From 8e6adb1ef4e15d83aec3a5083573ed1c607af9ff Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?F=C3=A1bio=20Moreira?=
 <fabiommmoreira@Fabios-MacBook-Pro.local>
Date: Wed, 16 May 2018 15:09:35 +0100
Subject: [PATCH] test: update snapshots

---
 .../__tests__/__snapshots__/list.spec.js.snap |  272 +-
 .../__snapshots__/metadata.spec.js.snap       |   12 +-
 .../__snapshots__/snapshots.spec.js.snap      |  220 +-
 .../__snapshots__/firewall.spec.js.snap       | 8856 +++++++++--------
 .../__tests__/__snapshots__/list.spec.js.snap |  168 +-
 .../__snapshots__/metadata.spec.js.snap       |   12 +-
 .../__snapshots__/networks.spec.js.snap       |   12 +-
 .../__tests__/__snapshots__/tags.spec.js.snap |   18 +-
 .../__snapshots__/firewall.spec.js.snap       | 1135 ++-
 .../__snapshots__/network.spec.js.snap        |  198 +-
 .../__snapshots__/card.spec.js.snap           |    6 +-
 packages/ui-toolkit/src/card/header.js        |    6 +-
 .../__tests__/__snapshots__/form.spec.js.snap |   26 +
 packages/ui-toolkit/src/form/checkbox.js      |    7 +-
 .../__snapshots__/key-value.spec.js.snap      |   54 +-
 15 files changed, 6176 insertions(+), 4826 deletions(-)

diff --git a/consoles/my-joy-instances/src/components/instances/__tests__/__snapshots__/list.spec.js.snap b/consoles/my-joy-instances/src/components/instances/__tests__/__snapshots__/list.spec.js.snap
index a64f7cbe..917ca89f 100644
--- a/consoles/my-joy-instances/src/components/instances/__tests__/__snapshots__/list.spec.js.snap
+++ b/consoles/my-joy-instances/src/components/instances/__tests__/__snapshots__/list.spec.js.snap
@@ -141,12 +141,38 @@ exports[`renders <InstanceList /> without throwing 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-align-content: center;
+  -ms-flex-line-pack: center;
+  align-content: center;
+  height: 1.5rem;
 }
 
 .c5 label {
   font-weight: 400;
 }
 
+.c5 label::after {
+  width: 0.475rem;
+  height: 0.205rem;
+  top: 0.4125rem;
+  left: 0.35rem;
+}
+
+.c5 div[type='checkbox'],
+.c5 div[type='checkbox'] input,
+.c5 div[type='checkbox'] label {
+  height: 1.5rem;
+  width: 1.5rem;
+}
+
 .c4 {
   display: inline-block;
   padding: 0;
@@ -539,8 +565,6 @@ exports[`renders <InstanceList /> without throwing 1`] = `
           </span>
           <svg
             height="6"
-            marginBottom="0.125rem"
-            marginLeft="0.5625rem"
             style={
               Object {
                 "transform": "rotate(180deg)",
@@ -835,12 +859,38 @@ exports[`renders <InstanceList allSelected /> without throwing 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-align-content: center;
+  -ms-flex-line-pack: center;
+  align-content: center;
+  height: 1.5rem;
 }
 
 .c5 label {
   font-weight: 400;
 }
 
+.c5 label::after {
+  width: 0.475rem;
+  height: 0.205rem;
+  top: 0.4125rem;
+  left: 0.35rem;
+}
+
+.c5 div[type='checkbox'],
+.c5 div[type='checkbox'] input,
+.c5 div[type='checkbox'] label {
+  height: 1.5rem;
+  width: 1.5rem;
+}
+
 .c4 {
   display: inline-block;
   padding: 0;
@@ -1233,8 +1283,6 @@ exports[`renders <InstanceList allSelected /> without throwing 1`] = `
           </span>
           <svg
             height="6"
-            marginBottom="0.125rem"
-            marginLeft="0.5625rem"
             style={
               Object {
                 "transform": "rotate(180deg)",
@@ -1529,12 +1577,38 @@ exports[`renders <InstanceList sortBy /> without throwing 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-align-content: center;
+  -ms-flex-line-pack: center;
+  align-content: center;
+  height: 1.5rem;
 }
 
 .c5 label {
   font-weight: 400;
 }
 
+.c5 label::after {
+  width: 0.475rem;
+  height: 0.205rem;
+  top: 0.4125rem;
+  left: 0.35rem;
+}
+
+.c5 div[type='checkbox'],
+.c5 div[type='checkbox'] input,
+.c5 div[type='checkbox'] label {
+  height: 1.5rem;
+  width: 1.5rem;
+}
+
 .c4 {
   display: inline-block;
   padding: 0;
@@ -1938,8 +2012,6 @@ exports[`renders <InstanceList sortBy /> without throwing 1`] = `
           </span>
           <svg
             height="6"
-            marginBottom="0.125rem"
-            marginLeft="0.5625rem"
             style={
               Object {
                 "transform": "rotate(180deg)",
@@ -2223,12 +2295,38 @@ exports[`renders <InstanceList sortBy sortOrder /> without throwing 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-align-content: center;
+  -ms-flex-line-pack: center;
+  align-content: center;
+  height: 1.5rem;
 }
 
 .c5 label {
   font-weight: 400;
 }
 
+.c5 label::after {
+  width: 0.475rem;
+  height: 0.205rem;
+  top: 0.4125rem;
+  left: 0.35rem;
+}
+
+.c5 div[type='checkbox'],
+.c5 div[type='checkbox'] input,
+.c5 div[type='checkbox'] label {
+  height: 1.5rem;
+  width: 1.5rem;
+}
+
 .c4 {
   display: inline-block;
   padding: 0;
@@ -2632,8 +2730,6 @@ exports[`renders <InstanceList sortBy sortOrder /> without throwing 1`] = `
           </span>
           <svg
             height="6"
-            marginBottom="0.125rem"
-            marginLeft="0.5625rem"
             style={
               Object {
                 "transform": "rotate(0deg)",
@@ -2917,12 +3013,38 @@ exports[`renders <InstanceList submitting /> without throwing 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-align-content: center;
+  -ms-flex-line-pack: center;
+  align-content: center;
+  height: 1.5rem;
 }
 
 .c5 label {
   font-weight: 400;
 }
 
+.c5 label::after {
+  width: 0.475rem;
+  height: 0.205rem;
+  top: 0.4125rem;
+  left: 0.35rem;
+}
+
+.c5 div[type='checkbox'],
+.c5 div[type='checkbox'] input,
+.c5 div[type='checkbox'] label {
+  height: 1.5rem;
+  width: 1.5rem;
+}
+
 .c4 {
   display: inline-block;
   padding: 0;
@@ -3315,8 +3437,6 @@ exports[`renders <InstanceList submitting /> without throwing 1`] = `
           </span>
           <svg
             height="6"
-            marginBottom="0.125rem"
-            marginLeft="0.5625rem"
             style={
               Object {
                 "transform": "rotate(180deg)",
@@ -3611,12 +3731,38 @@ exports[`renders <InstanceList>{children}</InstanceList> without throwing 1`] =
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-align-content: center;
+  -ms-flex-line-pack: center;
+  align-content: center;
+  height: 1.5rem;
 }
 
 .c5 label {
   font-weight: 400;
 }
 
+.c5 label::after {
+  width: 0.475rem;
+  height: 0.205rem;
+  top: 0.4125rem;
+  left: 0.35rem;
+}
+
+.c5 div[type='checkbox'],
+.c5 div[type='checkbox'] input,
+.c5 div[type='checkbox'] label {
+  height: 1.5rem;
+  width: 1.5rem;
+}
+
 .c4 {
   display: inline-block;
   padding: 0;
@@ -4009,8 +4155,6 @@ exports[`renders <InstanceList>{children}</InstanceList> without throwing 1`] =
           </span>
           <svg
             height="6"
-            marginBottom="0.125rem"
-            marginLeft="0.5625rem"
             style={
               Object {
                 "transform": "rotate(180deg)",
@@ -4355,12 +4499,38 @@ exports[`renders <Item /> without throwing 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-align-content: center;
+  -ms-flex-line-pack: center;
+  align-content: center;
+  height: 1.5rem;
 }
 
 .c5 label {
   font-weight: 400;
 }
 
+.c5 label::after {
+  width: 0.475rem;
+  height: 0.205rem;
+  top: 0.4125rem;
+  left: 0.35rem;
+}
+
+.c5 div[type='checkbox'],
+.c5 div[type='checkbox'] input,
+.c5 div[type='checkbox'] label {
+  height: 1.5rem;
+  width: 1.5rem;
+}
+
 .c4 {
   display: inline-block;
   padding: 0;
@@ -4857,12 +5027,38 @@ exports[`renders <Item {...item} /> without throwing 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-align-content: center;
+  -ms-flex-line-pack: center;
+  align-content: center;
+  height: 1.5rem;
 }
 
 .c5 label {
   font-weight: 400;
 }
 
+.c5 label::after {
+  width: 0.475rem;
+  height: 0.205rem;
+  top: 0.4125rem;
+  left: 0.35rem;
+}
+
+.c5 div[type='checkbox'],
+.c5 div[type='checkbox'] input,
+.c5 div[type='checkbox'] label {
+  height: 1.5rem;
+  width: 1.5rem;
+}
+
 .c4 {
   display: inline-block;
   padding: 0;
@@ -5361,12 +5557,38 @@ exports[`renders <Item allowedActions /> without throwing 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-align-content: center;
+  -ms-flex-line-pack: center;
+  align-content: center;
+  height: 1.5rem;
 }
 
 .c5 label {
   font-weight: 400;
 }
 
+.c5 label::after {
+  width: 0.475rem;
+  height: 0.205rem;
+  top: 0.4125rem;
+  left: 0.35rem;
+}
+
+.c5 div[type='checkbox'],
+.c5 div[type='checkbox'] input,
+.c5 div[type='checkbox'] label {
+  height: 1.5rem;
+  width: 1.5rem;
+}
+
 .c4 {
   display: inline-block;
   padding: 0;
@@ -5852,12 +6074,38 @@ exports[`renders <Item mutating /> without throwing 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-align-content: center;
+  -ms-flex-line-pack: center;
+  align-content: center;
+  height: 1.5rem;
 }
 
 .c5 label {
   font-weight: 400;
 }
 
+.c5 label::after {
+  width: 0.475rem;
+  height: 0.205rem;
+  top: 0.4125rem;
+  left: 0.35rem;
+}
+
+.c5 div[type='checkbox'],
+.c5 div[type='checkbox'] input,
+.c5 div[type='checkbox'] label {
+  height: 1.5rem;
+  width: 1.5rem;
+}
+
 .c4 {
   display: inline-block;
   padding: 0;
diff --git a/consoles/my-joy-instances/src/components/instances/__tests__/__snapshots__/metadata.spec.js.snap b/consoles/my-joy-instances/src/components/instances/__tests__/__snapshots__/metadata.spec.js.snap
index 7dd659cf..bb125c25 100644
--- a/consoles/my-joy-instances/src/components/instances/__tests__/__snapshots__/metadata.spec.js.snap
+++ b/consoles/my-joy-instances/src/components/instances/__tests__/__snapshots__/metadata.spec.js.snap
@@ -572,9 +572,9 @@ exports[`renders <AddForm /> without throwing 1`] = `
   z-index: 1;
   line-height: 1.5rem;
   max-width: 100%;
-  border-top: 0px;
-  border-left: 0px;
-  border-right: 0px;
+  border-top: 0;
+  border-left: 0;
+  border-right: 0;
 }
 
 .c8 {
@@ -1629,9 +1629,9 @@ exports[`renders <EditForm /> without throwing 1`] = `
   z-index: 1;
   line-height: 1.5rem;
   max-width: 100%;
-  border-top: 0px;
-  border-left: 0px;
-  border-right: 0px;
+  border-top: 0;
+  border-left: 0;
+  border-right: 0;
 }
 
 .c8 {
diff --git a/consoles/my-joy-instances/src/components/instances/__tests__/__snapshots__/snapshots.spec.js.snap b/consoles/my-joy-instances/src/components/instances/__tests__/__snapshots__/snapshots.spec.js.snap
index dd7cb505..87127132 100644
--- a/consoles/my-joy-instances/src/components/instances/__tests__/__snapshots__/snapshots.spec.js.snap
+++ b/consoles/my-joy-instances/src/components/instances/__tests__/__snapshots__/snapshots.spec.js.snap
@@ -122,12 +122,38 @@ Array [
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-align-content: center;
+  -ms-flex-line-pack: center;
+  align-content: center;
+  height: 1.5rem;
 }
 
 .c5 label {
   font-weight: 400;
 }
 
+.c5 label::after {
+  width: 0.475rem;
+  height: 0.205rem;
+  top: 0.4125rem;
+  left: 0.35rem;
+}
+
+.c5 div[type='checkbox'],
+.c5 div[type='checkbox'] input,
+.c5 div[type='checkbox'] label {
+  height: 1.5rem;
+  width: 1.5rem;
+}
+
 .c4 {
   display: inline-block;
   padding: 0;
@@ -408,8 +434,6 @@ Array [
                 </span>
                 <svg
                     height="6"
-                    marginBottom="0.125rem"
-                    marginLeft="0.5625rem"
                     style={
                         Object {
                             "transform": "rotate(180deg)",
@@ -937,12 +961,38 @@ exports[`renders <Item /> without throwing 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-align-content: center;
+  -ms-flex-line-pack: center;
+  align-content: center;
+  height: 1.5rem;
 }
 
 .c3 label {
   font-weight: 400;
 }
 
+.c3 label::after {
+  width: 0.475rem;
+  height: 0.205rem;
+  top: 0.4125rem;
+  left: 0.35rem;
+}
+
+.c3 div[type='checkbox'],
+.c3 div[type='checkbox'] input,
+.c3 div[type='checkbox'] label {
+  height: 1.5rem;
+  width: 1.5rem;
+}
+
 .c2 {
   display: inline-block;
   padding: 0;
@@ -1306,12 +1356,38 @@ exports[`renders <Item {...item} /> without throwing 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-align-content: center;
+  -ms-flex-line-pack: center;
+  align-content: center;
+  height: 1.5rem;
 }
 
 .c3 label {
   font-weight: 400;
 }
 
+.c3 label::after {
+  width: 0.475rem;
+  height: 0.205rem;
+  top: 0.4125rem;
+  left: 0.35rem;
+}
+
+.c3 div[type='checkbox'],
+.c3 div[type='checkbox'] input,
+.c3 div[type='checkbox'] label {
+  height: 1.5rem;
+  width: 1.5rem;
+}
+
 .c2 {
   display: inline-block;
   padding: 0;
@@ -1876,12 +1952,38 @@ Array [
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-align-content: center;
+  -ms-flex-line-pack: center;
+  align-content: center;
+  height: 1.5rem;
 }
 
 .c5 label {
   font-weight: 400;
 }
 
+.c5 label::after {
+  width: 0.475rem;
+  height: 0.205rem;
+  top: 0.4125rem;
+  left: 0.35rem;
+}
+
+.c5 div[type='checkbox'],
+.c5 div[type='checkbox'] input,
+.c5 div[type='checkbox'] label {
+  height: 1.5rem;
+  width: 1.5rem;
+}
+
 .c4 {
   display: inline-block;
   padding: 0;
@@ -2162,8 +2264,6 @@ Array [
                 </span>
                 <svg
                     height="6"
-                    marginBottom="0.125rem"
-                    marginLeft="0.5625rem"
                     style={
                         Object {
                             "transform": "rotate(180deg)",
@@ -2665,12 +2765,38 @@ Array [
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-align-content: center;
+  -ms-flex-line-pack: center;
+  align-content: center;
+  height: 1.5rem;
 }
 
 .c5 label {
   font-weight: 400;
 }
 
+.c5 label::after {
+  width: 0.475rem;
+  height: 0.205rem;
+  top: 0.4125rem;
+  left: 0.35rem;
+}
+
+.c5 div[type='checkbox'],
+.c5 div[type='checkbox'] input,
+.c5 div[type='checkbox'] label {
+  height: 1.5rem;
+  width: 1.5rem;
+}
+
 .c4 {
   display: inline-block;
   padding: 0;
@@ -2951,8 +3077,6 @@ Array [
                 </span>
                 <svg
                     height="6"
-                    marginBottom="0.125rem"
-                    marginLeft="0.5625rem"
                     style={
                         Object {
                             "transform": "rotate(180deg)",
@@ -3454,12 +3578,38 @@ Array [
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-align-content: center;
+  -ms-flex-line-pack: center;
+  align-content: center;
+  height: 1.5rem;
 }
 
 .c5 label {
   font-weight: 400;
 }
 
+.c5 label::after {
+  width: 0.475rem;
+  height: 0.205rem;
+  top: 0.4125rem;
+  left: 0.35rem;
+}
+
+.c5 div[type='checkbox'],
+.c5 div[type='checkbox'] input,
+.c5 div[type='checkbox'] label {
+  height: 1.5rem;
+  width: 1.5rem;
+}
+
 .c4 {
   display: inline-block;
   padding: 0;
@@ -3751,8 +3901,6 @@ Array [
                 </span>
                 <svg
                     height="6"
-                    marginBottom="0.125rem"
-                    marginLeft="0.5625rem"
                     style={
                         Object {
                             "transform": "rotate(180deg)",
@@ -4243,12 +4391,38 @@ Array [
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-align-content: center;
+  -ms-flex-line-pack: center;
+  align-content: center;
+  height: 1.5rem;
 }
 
 .c5 label {
   font-weight: 400;
 }
 
+.c5 label::after {
+  width: 0.475rem;
+  height: 0.205rem;
+  top: 0.4125rem;
+  left: 0.35rem;
+}
+
+.c5 div[type='checkbox'],
+.c5 div[type='checkbox'] input,
+.c5 div[type='checkbox'] label {
+  height: 1.5rem;
+  width: 1.5rem;
+}
+
 .c4 {
   display: inline-block;
   padding: 0;
@@ -4540,8 +4714,6 @@ Array [
                 </span>
                 <svg
                     height="6"
-                    marginBottom="0.125rem"
-                    marginLeft="0.5625rem"
                     style={
                         Object {
                             "transform": "rotate(0deg)",
@@ -5032,12 +5204,38 @@ Array [
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-align-content: center;
+  -ms-flex-line-pack: center;
+  align-content: center;
+  height: 1.5rem;
 }
 
 .c5 label {
   font-weight: 400;
 }
 
+.c5 label::after {
+  width: 0.475rem;
+  height: 0.205rem;
+  top: 0.4125rem;
+  left: 0.35rem;
+}
+
+.c5 div[type='checkbox'],
+.c5 div[type='checkbox'] input,
+.c5 div[type='checkbox'] label {
+  height: 1.5rem;
+  width: 1.5rem;
+}
+
 .c4 {
   display: inline-block;
   padding: 0;
@@ -5318,8 +5516,6 @@ Array [
                 </span>
                 <svg
                     height="6"
-                    marginBottom="0.125rem"
-                    marginLeft="0.5625rem"
                     style={
                         Object {
                             "transform": "rotate(180deg)",
diff --git a/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/firewall.spec.js.snap b/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/firewall.spec.js.snap
index fd696f1e..a5bfac82 100644
--- a/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/firewall.spec.js.snap
+++ b/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/firewall.spec.js.snap
@@ -10,719 +10,61 @@ Array [
   margin-bottom: 1.875rem;
 }
 
-.c12 {
+.c18 {
+  margin-right: 0.75rem;
   margin-left: 0.75rem;
 }
 
-.c18 {
+.c20 {
   margin-top: 1.875rem;
 }
 
-.c23 {
+.c25 {
   margin-bottom: 0.75rem;
 }
 
-.c21 {
+.c23 {
   padding: 8rem;
 }
 
-.c6 {
-  color: rgb(73,73,73);
-  margin: 0;
-  line-height: 1.5rem;
-  font-size: 0.9375rem;
-}
-
-.c11 {
-  font-size: 0.9375rem;
-  line-height: 1.125rem;
-  font-style: normal;
-  font-stretch: normal;
-  display: block;
-  color: rgb(70,70,70);
-  text-align: left;
-}
-
-.c1 {
-  margin-right: auto;
-  margin-left: auto;
-}
-
-.c3 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 1 1 auto;
-  -ms-flex: 1 1 auto;
-  flex: 1 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.625rem;
-  margin-left: -0.625rem;
-}
-
-.c4 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.625rem;
-  padding-left: 0.625rem;
-  display: block;
-}
-
-.c0 {
-  box-sizing: border-box;
-  width: 100%;
-  max-width: 62.5rem;
-  padding-bottom: 1.125rem;
-}
-
-.c25 {
-  margin: 0;
-  color: rgb(73,73,73);
-  font-weight: normal;
-  line-height: 1.625rem;
-  font-size: 1.3125rem;
-}
-
-.c17 {
-  height: 1px;
-  background-color: rgb(216,216,216);
-}
-
-.c9 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-align-content: stretch;
-  -ms-flex-line-pack: stretch;
-  align-content: stretch;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.c22 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-align-content: stretch;
-  -ms-flex-line-pack: stretch;
-  align-content: stretch;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.c20 {
-  box-sizing: content-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 1 0 auto;
-  -ms-flex: 1 0 auto;
-  flex: 1 0 auto;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  position: relative;
-  border-width: 0.0625rem;
-  border-style: solid;
-  -webkit-transition: all 300ms ease;
-  transition: all 300ms ease;
-  color: rgb(73,73,73);
-  background-color: rgb(255,255,255);
-  border-color: rgb(216,216,216);
-}
-
-.c8 {
-  display: inline-block;
-  padding: 0;
-  border: none;
-  overflow: hidden;
-  height: auto;
-  -webkit-padding-before: 0;
-  -webkit-padding-start: 0;
-  -webkit-padding-end: 0;
-  -webkit-padding-after: 0;
-}
-
-.c10 {
-  font-weight: 600;
-  white-space: pre;
-  font-size: 0.8125rem;
-  font-size: 0.9375rem;
-}
-
-.c16 {
-  font-weight: 600;
-  white-space: pre;
-  font-size: 0.8125rem;
-}
-
 .c13 {
-  position: relative;
-  vertical-align: text-bottom;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
+  font-family: sans-serif;
+  font-size: 100%;
+  line-height: 1.15;
+  margin: 0;
+  overflow: visible;
 }
 
-.c14 {
-  display: none;
-}
-
-.c14:checked + label {
-  background: #3B46CC;
-  border: 0.0625rem solid rgb(59,70,204);
-}
-
-.c14:checked + label:after {
-  -webkit-transform: translateX(100%);
-  -ms-transform: translateX(100%);
-  transform: translateX(100%);
-  box-shadow: 0 0 0 0.0625rem rgb(59,70,204);
-}
-
-.c14:checked + label:active {
-  box-shadow: none;
-}
-
-.c15 {
-  outline: 0;
-  display: block;
-  width: 2.875rem;
-  height: 1.5rem;
-  position: relative;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
+.c13[type='checkbox'],
+.c13[type='radio'] {
   box-sizing: border-box;
-  background: rgb(250,250,250);
-  border-radius: 1.4375rem;
-  -webkit-transition: all 0.3s ease;
-  transition: all 0.3s ease;
-  border: 0.0625rem solid rgb(216,216,216);
+  padding: 0;
 }
 
-.c15::selection {
-  background: none;
+.c13[type='number']::-webkit-inner-spin-button,
+.c13[type='number']::-webkit-outer-spin-button {
+  height: auto;
 }
 
-.c15:active {
-  box-shadow: inset 0 0 0 1.5rem rgb(216,216,216);
+.c13[type='search'] {
+  -webkit-appearance: textfield;
+  -moz-appearance: textfield;
+  appearance: textfield;
+  outline-offset: -0.125rem;
 }
 
-.c15:hover {
-  border: 0.0625rem solid rgb(59,70,204);
+.c13[type='search']::-webkit-search-cancel-button,
+.c13[type='search']::-webkit-search-decoration {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
 }
 
-.c15:hover:after {
-  box-shadow: 0 0 0 0.0625rem rgb(59,70,204);
-}
-
-.c15:after,
-.c15:before {
-  position: relative;
-  display: block;
-  content: '';
-  width: 50%;
-  height: 100%;
-}
-
-.c15:after {
-  -webkit-transform: translateX(0%);
-  -ms-transform: translateX(0%);
-  transform: translateX(0%);
-  border-radius: 50%;
-  background: rgb(255,255,255);
-  -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275);
-  -webkit-transition: transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275);
-  transition: transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275);
-  box-shadow: 0 0 0 0.0625rem rgb(216,216,216);
-}
-
-.c15:active {
-  box-shadow: inset 0 0 0 2em rgb(216,216,216);
-}
-
-.c15:before {
-  display: none;
-}
-
-.c24 {
-  color: rgb(151,151,151);
-  text-align: center;
-}
-
-.c19 {
-  width: calc(100% - 0.125rem);
-}
-
-.c5 {
-  font-weight: 200;
-}
-
-@media only screen and (min-width:48em) {
-  .c1 {
-    width: 46rem;
-  }
-}
-
-@media only screen and (min-width:64em) {
-  .c1 {
-    width: 56rem;
-  }
-}
-
-@media only screen and (min-width:75em) {
-  .c1 {
-    width: 59rem;
-  }
-}
-
-@media only screen and (min-width:0em) {
-  .c4 {
-    -webkit-flex-basis: 100%;
-    -ms-flex-preferred-size: 100%;
-    flex-basis: 100%;
-    max-width: 100%;
-  }
-}
-
-@media only screen and (min-width:48em) {
-  .c4 {
-    -webkit-flex-basis: 58.333333333333336%;
-    -ms-flex-preferred-size: 58.333333333333336%;
-    flex-basis: 58.333333333333336%;
-    max-width: 58.333333333333336%;
-  }
-}
-
-@media only screen and (max-width:47.9375rem) {
-  .c0 {
-    padding-left: 0.375rem;
-    padding-right: 0.375rem;
-  }
-}
-
-<div
-    className="c0 c1"
->
-    <div
-        className="c2"
-    >
-        <div
-            className="c3"
-        >
-            <div
-                className="c4"
-            >
-                <p
-                    className="c5 c6"
-                >
-                    Cloud Firewall rules control traffic across instances. Enabling the firewall adds a default set of rules and rules defined by your chosen tags.
-                     
-                    <a
-                        href="https://docs.joyent.com/private-cloud/install/cns"
-                        rel="noopener noreferrer"
-                        target="__blank"
-                    >
-                        Read the docs
-                    </a>
-                </p>
-            </div>
-        </div>
-    </div>
-    <div
-        className="c7"
-    >
-        <form
-            onChange={[Function]}
-        >
-            <div
-                className="c8"
-                name="enabled"
-                role="group"
-                style={undefined}
-                type="checkbox"
-            >
-                <div
-                    className="c9"
-                >
-                    <label
-                        className="c10 c11"
-                        htmlFor="k"
-                    >
-                        Enable Firewall
-                    </label>
-                    <div
-                        className="c12"
-                    >
-                        <div
-                            className="c13"
-                        >
-                            <input
-                                checked={undefined}
-                                className="c14"
-                                disabled={false}
-                                id="k"
-                                onBlur={undefined}
-                                type="checkbox"
-                            />
-                            <label
-                                className="c15"
-                                disabled={false}
-                                htmlFor="k"
-                                id="k"
-                                onBlur={undefined}
-                            />
-                            <label
-                                className="c16 c11"
-                                disabled={false}
-                                htmlFor="k"
-                                id="k"
-                                onBlur={undefined}
-                            >
-                                 
-                            </label>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </form>
-    </div>
-    <div
-        className="c17 c3"
-        height="0.0625rem"
-    />
-    <div
-        className="c18"
-    >
-        <div
-            className="c19 c20"
-            disabled={false}
-            name="card"
-        >
-            <div
-                className="c21"
-            >
-                <div
-                    className="c22"
-                >
-                    <div
-                        className="c23"
-                    >
-                        <svg
-                            height={60}
-                            viewBox="0 0 79 60"
-                            width={79}
-                            xmlns="http://www.w3.org/2000/svg"
-                            xmlnsXlink="http://www.w3.org/1999/xlink"
-                        >
-                            <title>
-                                Guilty_Salamander
-                            </title>
-                            <desc>
-                                Created using Figma
-                            </desc>
-                            <use
-                                fill="#FAA427"
-                                transform="translate(23.8 22)"
-                                xlinkHref="#a"
-                            />
-                            <use
-                                fill="#F3722C"
-                                transform="translate(27.3 25.5)"
-                                xlinkHref="#b"
-                            />
-                            <use
-                                fill="#FAA427"
-                                transform="translate(4.8 32.1)"
-                                xlinkHref="#c"
-                            />
-                            <use
-                                fill="#F3722C"
-                                transform="translate(12.2 31.8)"
-                                xlinkHref="#d"
-                            />
-                            <use
-                                fill="#FAA427"
-                                transform="translate(54.4 31.9)"
-                                xlinkHref="#e"
-                            />
-                            <use
-                                fill="#F3722C"
-                                transform="translate(54.4 32)"
-                                xlinkHref="#f"
-                            />
-                            <use
-                                fill="#FAA427"
-                                transform="translate(15.8 26.8)"
-                                xlinkHref="#g"
-                            />
-                            <use
-                                fill="#FAA427"
-                                transform="translate(5)"
-                                xlinkHref="#h"
-                            />
-                            <use
-                                fill="#FAFBFC"
-                                transform="rotate(-15.13 41.037 5.45)"
-                                xlinkHref="#i"
-                            />
-                            <use
-                                fill="#412B13"
-                                transform="rotate(-15.13 67.273 -24.78)"
-                                xlinkHref="#j"
-                            />
-                            <use
-                                fill="#F3722C"
-                                transform="translate(2.2 8)"
-                                xlinkHref="#k"
-                            />
-                            <use
-                                fill="#FAFBFC"
-                                transform="rotate(-74.87 40.46 -20.511)"
-                                xlinkHref="#l"
-                            />
-                            <use
-                                fill="#412B13"
-                                transform="rotate(-74.87 41.364 -22.098)"
-                                xlinkHref="#m"
-                            />
-                            <use
-                                fill="#F3722C"
-                                transform="translate(52.1 8)"
-                                xlinkHref="#n"
-                            />
-                            <use
-                                fill="#F3722C"
-                                transform="translate(31.5 34.3)"
-                                xlinkHref="#o"
-                            />
-                            <use
-                                fill="#F3722C"
-                                transform="translate(14.3)"
-                                xlinkHref="#p"
-                            />
-                            <use
-                                fill="#F3722C"
-                                transform="translate(30.9 18.9)"
-                                xlinkHref="#q"
-                            />
-                            <use
-                                fill="#F3722C"
-                                transform="translate(37.6 18.9)"
-                                xlinkHref="#r"
-                            />
-                            <use
-                                fill="#FAA427"
-                                transform="translate(27.4 53.9)"
-                                xlinkHref="#s"
-                            />
-                            <use
-                                fill="#FAA427"
-                                transform="translate(39.1 53.9)"
-                                xlinkHref="#t"
-                            />
-                            <use
-                                fill="#F3722C"
-                                transform="translate(27.4 53.9)"
-                                xlinkHref="#u"
-                            />
-                            <use
-                                fill="#342013"
-                                transform="translate(28.6 26.2)"
-                                xlinkHref="#v"
-                            />
-                            <use
-                                fill="#FFF"
-                                transform="translate(32.6 28.7)"
-                                xlinkHref="#w"
-                            />
-                            <defs>
-                                <path
-                                    d="M54.921 36.053L0 0l1.413 24.908c.359 6.249 5.752 11.145 12.283 11.145H54.92z"
-                                    id="a"
-                                />
-                                <path
-                                    d="M42.12 32.526L13.47 0 0 23.737c.282 4.924 4.527 8.778 9.672 8.778l32.448.01z"
-                                    id="b"
-                                />
-                                <path
-                                    d="M3.326 17.01a3.312 3.312 0 0 1-1.545-6.25C6.059 8.52 8.482 2.226 8.52 2.165a3.313 3.313 0 0 1 6.216 2.296c-.133.354-3.312 8.717-9.86 12.145-.475.26-1.008.4-1.55.403z"
-                                    id="c"
-                                />
-                                <path
-                                    d="M5.079 9.205A28.654 28.654 0 0 0 7.287 4.75a3.312 3.312 0 1 0-6.183-2.296C.781 3.234.412 3.996 0 4.734c1.33 1.181 3.544 3.152 5.079 4.471z"
-                                    id="d"
-                                />
-                                <path
-                                    d="M11.682 17.27a3.312 3.312 0 0 0 1.545-6.248C8.95 8.78 6.526 2.487 6.504 2.427A3.312 3.312 0 1 0 .316 4.723c.126.353 3.312 8.717 9.853 12.145.464.254.983.393 1.513.403z"
-                                    id="e"
-                                />
-                                <path
-                                    d="M2.45 9.01A28.33 28.33 0 0 1 .242 4.553a3.312 3.312 0 1 1 6.21-2.296c.326.78.695 1.54 1.104 2.28C6.187 5.719 3.973 7.69 2.45 9.009z"
-                                    id="f"
-                                />
-                                <path
-                                    d="M35.159 0H6.542A6.542 6.542 0 0 0 0 6.542v14.016a6.542 6.542 0 0 0 6.542 6.541h28.617a6.541 6.541 0 0 0 6.541-6.541V6.542A6.542 6.542 0 0 0 35.16 0z"
-                                    id="g"
-                                />
-                                <path
-                                    d="M54.254 0H9.026A9.026 9.026 0 0 0 0 9.026v17.207a9.026 9.026 0 0 0 9.026 9.025h45.228a9.026 9.026 0 0 0 9.025-9.026V9.027A9.026 9.026 0 0 0 54.253 0z"
-                                    id="h"
-                                />
-                                <path
-                                    d="M9.721 18.637c5.37 0 9.721-4.172 9.721-9.319C19.442 4.172 15.09 0 9.722 0 4.351 0 0 4.172 0 9.318c0 5.147 4.352 9.319 9.721 9.319z"
-                                    id="i"
-                                />
-                                <path
-                                    d="M5.19 9.959c2.865 0 5.188-2.23 5.188-4.98C10.378 2.23 8.055 0 5.19 0S0 2.23 0 4.98c0 2.75 2.323 4.979 5.19 4.979z"
-                                    id="j"
-                                />
-                                <path
-                                    d="M7.262.351C2.078 1.753-1.018 6.921.306 11.89l18.77-5.073C17.705 1.847 12.411-1.045 7.261.35z"
-                                    id="k"
-                                />
-                                <path
-                                    d="M9.318 19.442c5.147 0 9.319-4.352 9.319-9.72C18.637 4.351 14.465 0 9.318 0 4.172 0 0 4.352 0 9.721c0 5.37 4.172 9.721 9.318 9.721z"
-                                    id="l"
-                                />
-                                <path
-                                    d="M4.98 10.378c2.75 0 4.979-2.323 4.979-5.189S7.729 0 4.979 0C2.23 0 0 2.323 0 5.19c0 2.865 2.23 5.188 4.98 5.188z"
-                                    id="m"
-                                />
-                                <path
-                                    d="M11.819.351c5.178 1.402 8.28 6.57 6.95 11.538L0 6.816C1.347 1.847 6.635-1.045 11.819.35z"
-                                    id="n"
-                                />
-                                <path
-                                    d="M5.106 4.897A5.007 5.007 0 0 0 10.218 0H0a5.001 5.001 0 0 0 5.106 4.897z"
-                                    id="o"
-                                />
-                                <path
-                                    d="M0 0l22.258 18.498L44.516 0H0z"
-                                    id="p"
-                                />
-                                <path
-                                    d="M2.445 0A2.396 2.396 0 0 0 0 2.342h4.885a2.39 2.39 0 0 0-2.44-2.34z"
-                                    id="q"
-                                />
-                                <path
-                                    d="M2.462 0A2.396 2.396 0 0 0 0 2.343h4.885A2.39 2.39 0 0 0 2.462 0z"
-                                    id="r"
-                                />
-                                <path
-                                    d="M0 0h6.227v3.091A3.047 3.047 0 0 1 3.18 6.14h-.127A3.047 3.047 0 0 1 .006 3.09V0H0z"
-                                    id="s"
-                                />
-                                <path
-                                    d="M.006 0H6.22v3.091A3.047 3.047 0 0 1 3.174 6.14h-.127A3.047 3.047 0 0 1 0 3.09V0h.006z"
-                                    id="t"
-                                />
-                                <path
-                                    d="M31.328 0H0v1.474h31.328V0z"
-                                    id="u"
-                                />
-                                <path
-                                    d="M15.422 1.503A17.422 17.422 0 0 0 8.113.002 17.4 17.4 0 0 0 .805 1.503a1.457 1.457 0 0 0 .629 2.76h2.572V4.06a1.579 1.579 0 0 1 2.126-1.468 6.194 6.194 0 0 0 3.963 0 1.574 1.574 0 0 1 2.12 1.468v.204h2.572a1.463 1.463 0 0 0 .635-2.76z"
-                                    id="v"
-                                />
-                                <path
-                                    d="M6.072.104a6.194 6.194 0 0 1-3.963 0A1.579 1.579 0 0 0 0 1.573v.204h8.209v-.204A1.573 1.573 0 0 0 6.072.104z"
-                                    id="w"
-                                />
-                            </defs>
-                        </svg>
-                    </div>
-                    <h3
-                        className="c24 c25"
-                    >
-                        Sorry, but we weren’t able to find any firewall rules.
-                    </h3>
-                </div>
-            </div>
-        </div>
-    </div>
-</div>,
-  .c2 {
-  margin-bottom: 1.125rem;
-}
-
-.c7 {
-  margin-bottom: 1.875rem;
-}
-
-.c12 {
-  margin-left: 0.75rem;
-}
-
-.c20 {
-  margin-top: 1.875rem;
-}
-
-.c25 {
-  margin-bottom: 0.75rem;
-}
-
-.c18 {
-  margin-top: 1.5rem;
-}
-
-.c19 {
-  margin-right: 0.75rem;
-}
-
-.c23 {
-  padding: 8rem;
+.c13::-webkit-file-upload-button {
+  -webkit-appearance: button;
+  -moz-appearance: button;
+  appearance: button;
+  font: inherit;
 }
 
 .c6 {
@@ -732,7 +74,7 @@ Array [
   font-size: 0.9375rem;
 }
 
-.c11 {
+.c17 {
   font-size: 0.9375rem;
   line-height: 1.125rem;
   font-style: normal;
@@ -791,35 +133,11 @@ Array [
   font-size: 1.3125rem;
 }
 
-.c17 {
+.c19 {
   height: 1px;
   background-color: rgb(216,216,216);
 }
 
-.c9 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-align-content: stretch;
-  -ms-flex-line-pack: stretch;
-  align-content: stretch;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
 .c24 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -873,7 +191,124 @@ Array [
   border-color: rgb(216,216,216);
 }
 
-.c8 {
+.c12 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  display: none;
+}
+
+.c12:checked + label::after {
+  opacity: 1;
+}
+
+.c12:selected + label::after {
+  opacity: 1;
+}
+
+.c12:checked + label {
+  border-color: rgb(59,70,204);
+}
+
+.c12:selected + label {
+  border-color: rgb(59,70,204);
+}
+
+.c12:disabled + label {
+  background-color: rgb(249,249,249);
+  cursor: not-allowed;
+}
+
+.c14 {
+  color: rgb(100,100,100);
+  position: absolute;
+  width: 1.125rem;
+  height: 1.125rem;
+  box-sizing: border-box;
+  top: 0;
+  right: 0;
+  cursor: pointer;
+  background-color: rgb(255,255,255);
+  box-shadow: none;
+  border: 0.0625rem solid rgb(216,216,216);
+  cursor: pointer;
+  border-radius: 0.25rem;
+  width: 1.125rem;
+  height: 1.125rem;
+}
+
+.c14::after {
+  opacity: 0;
+  content: '';
+  position: absolute;
+  width: 0.375rem;
+  height: 0.125rem;
+  background: transparent;
+  top: 0.3125rem;
+  left: 0.25rem;
+  border: 0.125rem solid rgb(45,45,45);
+  border-top: none;
+  border-right: none;
+  -webkit-transform: rotate(-45deg);
+  -ms-transform: rotate(-45deg);
+  transform: rotate(-45deg);
+}
+
+.c11 {
+  display: inline-block;
+  vertical-align: text-bottom;
+  width: 1.125rem;
+  height: 1.125rem;
+  position: relative;
+  cursor: pointer;
+}
+
+.c15 label {
+  font-weight: normal;
+  font-size: 0.9375rem;
+}
+
+.c10 {
+  list-style-type: none;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-align-content: center;
+  -ms-flex-line-pack: center;
+  align-content: center;
+  height: 1.5rem;
+}
+
+.c10 label {
+  font-weight: 400;
+}
+
+.c10 label::after {
+  width: 0.475rem;
+  height: 0.205rem;
+  top: 0.4125rem;
+  left: 0.35rem;
+}
+
+.c10 div[type='checkbox'],
+.c10 div[type='checkbox'] input,
+.c10 div[type='checkbox'] label {
+  height: 1.5rem;
+  width: 1.5rem;
+}
+
+.c9 {
   display: inline-block;
   padding: 0;
   border: none;
@@ -885,114 +320,11 @@ Array [
   -webkit-padding-after: 0;
 }
 
-.c10 {
-  font-weight: 600;
-  white-space: pre;
-  font-size: 0.8125rem;
-  font-size: 0.9375rem;
-}
-
 .c16 {
   font-weight: 600;
   white-space: pre;
   font-size: 0.8125rem;
-}
-
-.c13 {
-  position: relative;
-  vertical-align: text-bottom;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.c14 {
-  display: none;
-}
-
-.c14:checked + label {
-  background: #3B46CC;
-  border: 0.0625rem solid rgb(59,70,204);
-}
-
-.c14:checked + label:after {
-  -webkit-transform: translateX(100%);
-  -ms-transform: translateX(100%);
-  transform: translateX(100%);
-  box-shadow: 0 0 0 0.0625rem rgb(59,70,204);
-}
-
-.c14:checked + label:active {
-  box-shadow: none;
-}
-
-.c15 {
-  outline: 0;
-  display: block;
-  width: 2.875rem;
-  height: 1.5rem;
-  position: relative;
   cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  box-sizing: border-box;
-  background: rgb(250,250,250);
-  border-radius: 1.4375rem;
-  -webkit-transition: all 0.3s ease;
-  transition: all 0.3s ease;
-  border: 0.0625rem solid rgb(216,216,216);
-}
-
-.c15::selection {
-  background: none;
-}
-
-.c15:active {
-  box-shadow: inset 0 0 0 1.5rem rgb(216,216,216);
-}
-
-.c15:hover {
-  border: 0.0625rem solid rgb(59,70,204);
-}
-
-.c15:hover:after {
-  box-shadow: 0 0 0 0.0625rem rgb(59,70,204);
-}
-
-.c15:after,
-.c15:before {
-  position: relative;
-  display: block;
-  content: '';
-  width: 50%;
-  height: 100%;
-}
-
-.c15:after {
-  -webkit-transform: translateX(0%);
-  -ms-transform: translateX(0%);
-  transform: translateX(0%);
-  border-radius: 50%;
-  background: rgb(255,255,255);
-  -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275);
-  -webkit-transition: transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275);
-  transition: transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275);
-  box-shadow: 0 0 0 0.0625rem rgb(216,216,216);
-}
-
-.c15:active {
-  box-shadow: inset 0 0 0 2em rgb(216,216,216);
-}
-
-.c15:before {
-  display: none;
 }
 
 .c26 {
@@ -1004,6 +336,10 @@ Array [
   width: calc(100% - 0.125rem);
 }
 
+.c8 {
+  margin-bottom: 0 !important;
+}
+
 .c5 {
   font-weight: 200;
 }
@@ -1083,117 +419,66 @@ Array [
         className="c7"
     >
         <form
+            className="c8"
             onChange={[Function]}
         >
             <div
-                className="c8"
+                className="c9"
                 name="enabled"
                 role="group"
                 style={undefined}
                 type="checkbox"
             >
-                <div
-                    className="c9"
+                <li
+                    className="c10"
                 >
-                    <label
-                        className="c10 c11"
-                        htmlFor="l"
-                    >
-                        Enable Firewall
-                    </label>
                     <div
-                        className="c12"
+                        checked={false}
+                        className="c11"
+                        disabled={false}
+                        id="k"
+                        onBlur={undefined}
+                        type="checkbox"
                     >
-                        <div
-                            className="c13"
-                        >
-                            <input
-                                checked={undefined}
-                                className="c14"
-                                disabled={false}
-                                id="l"
-                                onBlur={undefined}
-                                type="checkbox"
-                            />
-                            <label
-                                className="c15"
-                                disabled={false}
-                                htmlFor="l"
-                                id="l"
-                                onBlur={undefined}
-                            />
-                            <label
-                                className="c16 c11"
-                                disabled={false}
-                                htmlFor="l"
-                                id="l"
-                                onBlur={undefined}
-                            >
-                                 
-                            </label>
-                        </div>
+                        <input
+                            checked={false}
+                            className="c12 c13"
+                            disabled={false}
+                            id="l"
+                            onBlur={undefined}
+                            type="checkbox"
+                        />
+                        <label
+                            className="c14"
+                            htmlFor="l"
+                        />
                     </div>
-                </div>
+                    <div
+                        checked={false}
+                        className="c15"
+                        disabled={false}
+                        id="k"
+                        onBlur={undefined}
+                    >
+                        <label
+                            className="c16 c17"
+                            htmlFor="l"
+                        >
+                            <div
+                                className="c18"
+                            >
+                                Enable Firewall
+                            </div>
+                        </label>
+                    </div>
+                </li>
             </div>
         </form>
     </div>
     <div
-        className="c17 c3"
+        className="c19 c3"
         height="0.0625rem"
     />
-    <div
-        className="c18"
-    >
-        <form>
-            <div
-                className="c8"
-                name="inactive"
-                role="group"
-                style={undefined}
-                type="checkbox"
-            >
-                <div
-                    className="c9"
-                >
-                    <div
-                        className="c19"
-                    >
-                        <div
-                            className="c13"
-                        >
-                            <input
-                                checked={undefined}
-                                className="c14"
-                                id="m"
-                                onBlur={undefined}
-                                type="checkbox"
-                            />
-                            <label
-                                className="c15"
-                                htmlFor="m"
-                                id="m"
-                                onBlur={undefined}
-                            />
-                            <label
-                                className="c16 c11"
-                                htmlFor="m"
-                                id="m"
-                                onBlur={undefined}
-                            >
-                                 
-                            </label>
-                        </div>
-                    </div>
-                    <label
-                        className="c10 c11"
-                        htmlFor="m"
-                    >
-                        Show inactive rules
-                    </label>
-                </div>
-            </div>
-        </form>
-    </div>
     <div
         className="c20"
     >
@@ -1444,6 +729,797 @@ Array [
             </div>
         </div>
     </div>
+</div>,
+  .c2 {
+  margin-bottom: 1.125rem;
+}
+
+.c7 {
+  margin-bottom: 1.875rem;
+}
+
+.c18 {
+  margin-right: 0.75rem;
+  margin-left: 0.75rem;
+}
+
+.c21 {
+  margin-top: 1.875rem;
+}
+
+.c26 {
+  margin-bottom: 0.75rem;
+}
+
+.c20 {
+  margin-top: 1.5rem;
+}
+
+.c24 {
+  padding: 8rem;
+}
+
+.c13 {
+  font-family: sans-serif;
+  font-size: 100%;
+  line-height: 1.15;
+  margin: 0;
+  overflow: visible;
+}
+
+.c13[type='checkbox'],
+.c13[type='radio'] {
+  box-sizing: border-box;
+  padding: 0;
+}
+
+.c13[type='number']::-webkit-inner-spin-button,
+.c13[type='number']::-webkit-outer-spin-button {
+  height: auto;
+}
+
+.c13[type='search'] {
+  -webkit-appearance: textfield;
+  -moz-appearance: textfield;
+  appearance: textfield;
+  outline-offset: -0.125rem;
+}
+
+.c13[type='search']::-webkit-search-cancel-button,
+.c13[type='search']::-webkit-search-decoration {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+}
+
+.c13::-webkit-file-upload-button {
+  -webkit-appearance: button;
+  -moz-appearance: button;
+  appearance: button;
+  font: inherit;
+}
+
+.c6 {
+  color: rgb(73,73,73);
+  margin: 0;
+  line-height: 1.5rem;
+  font-size: 0.9375rem;
+}
+
+.c17 {
+  font-size: 0.9375rem;
+  line-height: 1.125rem;
+  font-style: normal;
+  font-stretch: normal;
+  display: block;
+  color: rgb(70,70,70);
+  text-align: left;
+}
+
+.c1 {
+  margin-right: auto;
+  margin-left: auto;
+}
+
+.c3 {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.625rem;
+  margin-left: -0.625rem;
+}
+
+.c4 {
+  box-sizing: border-box;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  padding-right: 0.625rem;
+  padding-left: 0.625rem;
+  display: block;
+}
+
+.c0 {
+  box-sizing: border-box;
+  width: 100%;
+  max-width: 62.5rem;
+  padding-bottom: 1.125rem;
+}
+
+.c28 {
+  margin: 0;
+  color: rgb(73,73,73);
+  font-weight: normal;
+  line-height: 1.625rem;
+  font-size: 1.3125rem;
+}
+
+.c19 {
+  height: 1px;
+  background-color: rgb(216,216,216);
+}
+
+.c25 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  -webkit-align-content: stretch;
+  -ms-flex-line-pack: stretch;
+  align-content: stretch;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.c23 {
+  box-sizing: content-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1 0 auto;
+  -ms-flex: 1 0 auto;
+  flex: 1 0 auto;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  position: relative;
+  border-width: 0.0625rem;
+  border-style: solid;
+  -webkit-transition: all 300ms ease;
+  transition: all 300ms ease;
+  color: rgb(73,73,73);
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+}
+
+.c12 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  display: none;
+}
+
+.c12:checked + label::after {
+  opacity: 1;
+}
+
+.c12:selected + label::after {
+  opacity: 1;
+}
+
+.c12:checked + label {
+  border-color: rgb(59,70,204);
+}
+
+.c12:selected + label {
+  border-color: rgb(59,70,204);
+}
+
+.c12:disabled + label {
+  background-color: rgb(249,249,249);
+  cursor: not-allowed;
+}
+
+.c14 {
+  color: rgb(100,100,100);
+  position: absolute;
+  width: 1.125rem;
+  height: 1.125rem;
+  box-sizing: border-box;
+  top: 0;
+  right: 0;
+  cursor: pointer;
+  background-color: rgb(255,255,255);
+  box-shadow: none;
+  border: 0.0625rem solid rgb(216,216,216);
+  cursor: pointer;
+  border-radius: 0.25rem;
+  width: 1.125rem;
+  height: 1.125rem;
+}
+
+.c14::after {
+  opacity: 0;
+  content: '';
+  position: absolute;
+  width: 0.375rem;
+  height: 0.125rem;
+  background: transparent;
+  top: 0.3125rem;
+  left: 0.25rem;
+  border: 0.125rem solid rgb(45,45,45);
+  border-top: none;
+  border-right: none;
+  -webkit-transform: rotate(-45deg);
+  -ms-transform: rotate(-45deg);
+  transform: rotate(-45deg);
+}
+
+.c11 {
+  display: inline-block;
+  vertical-align: text-bottom;
+  width: 1.125rem;
+  height: 1.125rem;
+  position: relative;
+  cursor: pointer;
+}
+
+.c15 label {
+  font-weight: normal;
+  font-size: 0.9375rem;
+}
+
+.c10 {
+  list-style-type: none;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-align-content: center;
+  -ms-flex-line-pack: center;
+  align-content: center;
+  height: 1.5rem;
+}
+
+.c10 label {
+  font-weight: 400;
+}
+
+.c10 label::after {
+  width: 0.475rem;
+  height: 0.205rem;
+  top: 0.4125rem;
+  left: 0.35rem;
+}
+
+.c10 div[type='checkbox'],
+.c10 div[type='checkbox'] input,
+.c10 div[type='checkbox'] label {
+  height: 1.5rem;
+  width: 1.5rem;
+}
+
+.c9 {
+  display: inline-block;
+  padding: 0;
+  border: none;
+  overflow: hidden;
+  height: auto;
+  -webkit-padding-before: 0;
+  -webkit-padding-start: 0;
+  -webkit-padding-end: 0;
+  -webkit-padding-after: 0;
+}
+
+.c16 {
+  font-weight: 600;
+  white-space: pre;
+  font-size: 0.8125rem;
+  cursor: pointer;
+}
+
+.c27 {
+  color: rgb(151,151,151);
+  text-align: center;
+}
+
+.c22 {
+  width: calc(100% - 0.125rem);
+}
+
+.c8 {
+  margin-bottom: 0 !important;
+}
+
+.c5 {
+  font-weight: 200;
+}
+
+@media only screen and (min-width:48em) {
+  .c1 {
+    width: 46rem;
+  }
+}
+
+@media only screen and (min-width:64em) {
+  .c1 {
+    width: 56rem;
+  }
+}
+
+@media only screen and (min-width:75em) {
+  .c1 {
+    width: 59rem;
+  }
+}
+
+@media only screen and (min-width:0em) {
+  .c4 {
+    -webkit-flex-basis: 100%;
+    -ms-flex-preferred-size: 100%;
+    flex-basis: 100%;
+    max-width: 100%;
+  }
+}
+
+@media only screen and (min-width:48em) {
+  .c4 {
+    -webkit-flex-basis: 58.333333333333336%;
+    -ms-flex-preferred-size: 58.333333333333336%;
+    flex-basis: 58.333333333333336%;
+    max-width: 58.333333333333336%;
+  }
+}
+
+@media only screen and (max-width:47.9375rem) {
+  .c0 {
+    padding-left: 0.375rem;
+    padding-right: 0.375rem;
+  }
+}
+
+<div
+    className="c0 c1"
+>
+    <div
+        className="c2"
+    >
+        <div
+            className="c3"
+        >
+            <div
+                className="c4"
+            >
+                <p
+                    className="c5 c6"
+                >
+                    Cloud Firewall rules control traffic across instances. Enabling the firewall adds a default set of rules and rules defined by your chosen tags.
+                     
+                    <a
+                        href="https://docs.joyent.com/private-cloud/install/cns"
+                        rel="noopener noreferrer"
+                        target="__blank"
+                    >
+                        Read the docs
+                    </a>
+                </p>
+            </div>
+        </div>
+    </div>
+    <div
+        className="c7"
+    >
+        <form
+            className="c8"
+            onChange={[Function]}
+        >
+            <div
+                className="c9"
+                name="enabled"
+                role="group"
+                style={undefined}
+                type="checkbox"
+            >
+                <li
+                    className="c10"
+                >
+                    <div
+                        checked={false}
+                        className="c11"
+                        disabled={false}
+                        id="m"
+                        onBlur={undefined}
+                        type="checkbox"
+                    >
+                        <input
+                            checked={false}
+                            className="c12 c13"
+                            disabled={false}
+                            id="n"
+                            onBlur={undefined}
+                            type="checkbox"
+                        />
+                        <label
+                            className="c14"
+                            htmlFor="n"
+                        />
+                    </div>
+                    <div
+                        checked={false}
+                        className="c15"
+                        disabled={false}
+                        id="m"
+                        onBlur={undefined}
+                    >
+                        <label
+                            className="c16 c17"
+                            htmlFor="n"
+                        >
+                            <div
+                                className="c18"
+                            >
+                                Enable Firewall
+                            </div>
+                        </label>
+                    </div>
+                </li>
+            </div>
+        </form>
+    </div>
+    <div
+        className="c19 c3"
+        height="0.0625rem"
+    />
+    <div
+        className="c20"
+    >
+        <form
+            className="c8"
+        >
+            <div
+                className="c9"
+                name="inactive"
+                role="group"
+                style={undefined}
+                type="checkbox"
+            >
+                <li
+                    className="c10"
+                >
+                    <div
+                        checked={false}
+                        className="c11"
+                        disabled={false}
+                        id="o"
+                        onBlur={undefined}
+                        type="checkbox"
+                    >
+                        <input
+                            checked={false}
+                            className="c12 c13"
+                            disabled={false}
+                            id="p"
+                            onBlur={undefined}
+                            type="checkbox"
+                        />
+                        <label
+                            className="c14"
+                            htmlFor="p"
+                        />
+                    </div>
+                    <div
+                        checked={false}
+                        className="c15"
+                        disabled={false}
+                        id="o"
+                        onBlur={undefined}
+                    >
+                        <label
+                            className="c16 c17"
+                            htmlFor="p"
+                        >
+                            <div
+                                className="c18"
+                            >
+                                Show inactive rules
+                            </div>
+                        </label>
+                    </div>
+                </li>
+            </div>
+        </form>
+    </div>
+    <div
+        className="c21"
+    >
+        <div
+            className="c22 c23"
+            disabled={false}
+            name="card"
+        >
+            <div
+                className="c24"
+            >
+                <div
+                    className="c25"
+                >
+                    <div
+                        className="c26"
+                    >
+                        <svg
+                            height={60}
+                            viewBox="0 0 79 60"
+                            width={79}
+                            xmlns="http://www.w3.org/2000/svg"
+                            xmlnsXlink="http://www.w3.org/1999/xlink"
+                        >
+                            <title>
+                                Guilty_Salamander
+                            </title>
+                            <desc>
+                                Created using Figma
+                            </desc>
+                            <use
+                                fill="#FAA427"
+                                transform="translate(23.8 22)"
+                                xlinkHref="#a"
+                            />
+                            <use
+                                fill="#F3722C"
+                                transform="translate(27.3 25.5)"
+                                xlinkHref="#b"
+                            />
+                            <use
+                                fill="#FAA427"
+                                transform="translate(4.8 32.1)"
+                                xlinkHref="#c"
+                            />
+                            <use
+                                fill="#F3722C"
+                                transform="translate(12.2 31.8)"
+                                xlinkHref="#d"
+                            />
+                            <use
+                                fill="#FAA427"
+                                transform="translate(54.4 31.9)"
+                                xlinkHref="#e"
+                            />
+                            <use
+                                fill="#F3722C"
+                                transform="translate(54.4 32)"
+                                xlinkHref="#f"
+                            />
+                            <use
+                                fill="#FAA427"
+                                transform="translate(15.8 26.8)"
+                                xlinkHref="#g"
+                            />
+                            <use
+                                fill="#FAA427"
+                                transform="translate(5)"
+                                xlinkHref="#h"
+                            />
+                            <use
+                                fill="#FAFBFC"
+                                transform="rotate(-15.13 41.037 5.45)"
+                                xlinkHref="#i"
+                            />
+                            <use
+                                fill="#412B13"
+                                transform="rotate(-15.13 67.273 -24.78)"
+                                xlinkHref="#j"
+                            />
+                            <use
+                                fill="#F3722C"
+                                transform="translate(2.2 8)"
+                                xlinkHref="#k"
+                            />
+                            <use
+                                fill="#FAFBFC"
+                                transform="rotate(-74.87 40.46 -20.511)"
+                                xlinkHref="#l"
+                            />
+                            <use
+                                fill="#412B13"
+                                transform="rotate(-74.87 41.364 -22.098)"
+                                xlinkHref="#m"
+                            />
+                            <use
+                                fill="#F3722C"
+                                transform="translate(52.1 8)"
+                                xlinkHref="#n"
+                            />
+                            <use
+                                fill="#F3722C"
+                                transform="translate(31.5 34.3)"
+                                xlinkHref="#o"
+                            />
+                            <use
+                                fill="#F3722C"
+                                transform="translate(14.3)"
+                                xlinkHref="#p"
+                            />
+                            <use
+                                fill="#F3722C"
+                                transform="translate(30.9 18.9)"
+                                xlinkHref="#q"
+                            />
+                            <use
+                                fill="#F3722C"
+                                transform="translate(37.6 18.9)"
+                                xlinkHref="#r"
+                            />
+                            <use
+                                fill="#FAA427"
+                                transform="translate(27.4 53.9)"
+                                xlinkHref="#s"
+                            />
+                            <use
+                                fill="#FAA427"
+                                transform="translate(39.1 53.9)"
+                                xlinkHref="#t"
+                            />
+                            <use
+                                fill="#F3722C"
+                                transform="translate(27.4 53.9)"
+                                xlinkHref="#u"
+                            />
+                            <use
+                                fill="#342013"
+                                transform="translate(28.6 26.2)"
+                                xlinkHref="#v"
+                            />
+                            <use
+                                fill="#FFF"
+                                transform="translate(32.6 28.7)"
+                                xlinkHref="#w"
+                            />
+                            <defs>
+                                <path
+                                    d="M54.921 36.053L0 0l1.413 24.908c.359 6.249 5.752 11.145 12.283 11.145H54.92z"
+                                    id="a"
+                                />
+                                <path
+                                    d="M42.12 32.526L13.47 0 0 23.737c.282 4.924 4.527 8.778 9.672 8.778l32.448.01z"
+                                    id="b"
+                                />
+                                <path
+                                    d="M3.326 17.01a3.312 3.312 0 0 1-1.545-6.25C6.059 8.52 8.482 2.226 8.52 2.165a3.313 3.313 0 0 1 6.216 2.296c-.133.354-3.312 8.717-9.86 12.145-.475.26-1.008.4-1.55.403z"
+                                    id="c"
+                                />
+                                <path
+                                    d="M5.079 9.205A28.654 28.654 0 0 0 7.287 4.75a3.312 3.312 0 1 0-6.183-2.296C.781 3.234.412 3.996 0 4.734c1.33 1.181 3.544 3.152 5.079 4.471z"
+                                    id="d"
+                                />
+                                <path
+                                    d="M11.682 17.27a3.312 3.312 0 0 0 1.545-6.248C8.95 8.78 6.526 2.487 6.504 2.427A3.312 3.312 0 1 0 .316 4.723c.126.353 3.312 8.717 9.853 12.145.464.254.983.393 1.513.403z"
+                                    id="e"
+                                />
+                                <path
+                                    d="M2.45 9.01A28.33 28.33 0 0 1 .242 4.553a3.312 3.312 0 1 1 6.21-2.296c.326.78.695 1.54 1.104 2.28C6.187 5.719 3.973 7.69 2.45 9.009z"
+                                    id="f"
+                                />
+                                <path
+                                    d="M35.159 0H6.542A6.542 6.542 0 0 0 0 6.542v14.016a6.542 6.542 0 0 0 6.542 6.541h28.617a6.541 6.541 0 0 0 6.541-6.541V6.542A6.542 6.542 0 0 0 35.16 0z"
+                                    id="g"
+                                />
+                                <path
+                                    d="M54.254 0H9.026A9.026 9.026 0 0 0 0 9.026v17.207a9.026 9.026 0 0 0 9.026 9.025h45.228a9.026 9.026 0 0 0 9.025-9.026V9.027A9.026 9.026 0 0 0 54.253 0z"
+                                    id="h"
+                                />
+                                <path
+                                    d="M9.721 18.637c5.37 0 9.721-4.172 9.721-9.319C19.442 4.172 15.09 0 9.722 0 4.351 0 0 4.172 0 9.318c0 5.147 4.352 9.319 9.721 9.319z"
+                                    id="i"
+                                />
+                                <path
+                                    d="M5.19 9.959c2.865 0 5.188-2.23 5.188-4.98C10.378 2.23 8.055 0 5.19 0S0 2.23 0 4.98c0 2.75 2.323 4.979 5.19 4.979z"
+                                    id="j"
+                                />
+                                <path
+                                    d="M7.262.351C2.078 1.753-1.018 6.921.306 11.89l18.77-5.073C17.705 1.847 12.411-1.045 7.261.35z"
+                                    id="k"
+                                />
+                                <path
+                                    d="M9.318 19.442c5.147 0 9.319-4.352 9.319-9.72C18.637 4.351 14.465 0 9.318 0 4.172 0 0 4.352 0 9.721c0 5.37 4.172 9.721 9.318 9.721z"
+                                    id="l"
+                                />
+                                <path
+                                    d="M4.98 10.378c2.75 0 4.979-2.323 4.979-5.189S7.729 0 4.979 0C2.23 0 0 2.323 0 5.19c0 2.865 2.23 5.188 4.98 5.188z"
+                                    id="m"
+                                />
+                                <path
+                                    d="M11.819.351c5.178 1.402 8.28 6.57 6.95 11.538L0 6.816C1.347 1.847 6.635-1.045 11.819.35z"
+                                    id="n"
+                                />
+                                <path
+                                    d="M5.106 4.897A5.007 5.007 0 0 0 10.218 0H0a5.001 5.001 0 0 0 5.106 4.897z"
+                                    id="o"
+                                />
+                                <path
+                                    d="M0 0l22.258 18.498L44.516 0H0z"
+                                    id="p"
+                                />
+                                <path
+                                    d="M2.445 0A2.396 2.396 0 0 0 0 2.342h4.885a2.39 2.39 0 0 0-2.44-2.34z"
+                                    id="q"
+                                />
+                                <path
+                                    d="M2.462 0A2.396 2.396 0 0 0 0 2.343h4.885A2.39 2.39 0 0 0 2.462 0z"
+                                    id="r"
+                                />
+                                <path
+                                    d="M0 0h6.227v3.091A3.047 3.047 0 0 1 3.18 6.14h-.127A3.047 3.047 0 0 1 .006 3.09V0H0z"
+                                    id="s"
+                                />
+                                <path
+                                    d="M.006 0H6.22v3.091A3.047 3.047 0 0 1 3.174 6.14h-.127A3.047 3.047 0 0 1 0 3.09V0h.006z"
+                                    id="t"
+                                />
+                                <path
+                                    d="M31.328 0H0v1.474h31.328V0z"
+                                    id="u"
+                                />
+                                <path
+                                    d="M15.422 1.503A17.422 17.422 0 0 0 8.113.002 17.4 17.4 0 0 0 .805 1.503a1.457 1.457 0 0 0 .629 2.76h2.572V4.06a1.579 1.579 0 0 1 2.126-1.468 6.194 6.194 0 0 0 3.963 0 1.574 1.574 0 0 1 2.12 1.468v.204h2.572a1.463 1.463 0 0 0 .635-2.76z"
+                                    id="v"
+                                />
+                                <path
+                                    d="M6.072.104a6.194 6.194 0 0 1-3.963 0A1.579 1.579 0 0 0 0 1.573v.204h8.209v-.204A1.573 1.573 0 0 0 6.072.104z"
+                                    id="w"
+                                />
+                            </defs>
+                        </svg>
+                    </div>
+                    <h3
+                        className="c27 c28"
+                    >
+                        Sorry, but we weren’t able to find any firewall rules.
+                    </h3>
+                </div>
+            </div>
+        </div>
+    </div>
 </div>,
 ]
 `;
@@ -1458,719 +1534,61 @@ Array [
   margin-bottom: 1.875rem;
 }
 
-.c12 {
+.c18 {
+  margin-right: 0.75rem;
   margin-left: 0.75rem;
 }
 
-.c18 {
+.c20 {
   margin-top: 1.875rem;
 }
 
-.c23 {
+.c25 {
   margin-bottom: 0.75rem;
 }
 
-.c21 {
+.c23 {
   padding: 8rem;
 }
 
-.c6 {
-  color: rgb(73,73,73);
-  margin: 0;
-  line-height: 1.5rem;
-  font-size: 0.9375rem;
-}
-
-.c11 {
-  font-size: 0.9375rem;
-  line-height: 1.125rem;
-  font-style: normal;
-  font-stretch: normal;
-  display: block;
-  color: rgb(70,70,70);
-  text-align: left;
-}
-
-.c1 {
-  margin-right: auto;
-  margin-left: auto;
-}
-
-.c3 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 1 1 auto;
-  -ms-flex: 1 1 auto;
-  flex: 1 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.625rem;
-  margin-left: -0.625rem;
-}
-
-.c4 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.625rem;
-  padding-left: 0.625rem;
-  display: block;
-}
-
-.c0 {
-  box-sizing: border-box;
-  width: 100%;
-  max-width: 62.5rem;
-  padding-bottom: 1.125rem;
-}
-
-.c25 {
-  margin: 0;
-  color: rgb(73,73,73);
-  font-weight: normal;
-  line-height: 1.625rem;
-  font-size: 1.3125rem;
-}
-
-.c17 {
-  height: 1px;
-  background-color: rgb(216,216,216);
-}
-
-.c9 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-align-content: stretch;
-  -ms-flex-line-pack: stretch;
-  align-content: stretch;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.c22 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-align-content: stretch;
-  -ms-flex-line-pack: stretch;
-  align-content: stretch;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.c20 {
-  box-sizing: content-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 1 0 auto;
-  -ms-flex: 1 0 auto;
-  flex: 1 0 auto;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  position: relative;
-  border-width: 0.0625rem;
-  border-style: solid;
-  -webkit-transition: all 300ms ease;
-  transition: all 300ms ease;
-  color: rgb(73,73,73);
-  background-color: rgb(255,255,255);
-  border-color: rgb(216,216,216);
-}
-
-.c8 {
-  display: inline-block;
-  padding: 0;
-  border: none;
-  overflow: hidden;
-  height: auto;
-  -webkit-padding-before: 0;
-  -webkit-padding-start: 0;
-  -webkit-padding-end: 0;
-  -webkit-padding-after: 0;
-}
-
-.c10 {
-  font-weight: 600;
-  white-space: pre;
-  font-size: 0.8125rem;
-  font-size: 0.9375rem;
-}
-
-.c16 {
-  font-weight: 600;
-  white-space: pre;
-  font-size: 0.8125rem;
-}
-
 .c13 {
-  position: relative;
-  vertical-align: text-bottom;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
+  font-family: sans-serif;
+  font-size: 100%;
+  line-height: 1.15;
+  margin: 0;
+  overflow: visible;
 }
 
-.c14 {
-  display: none;
-}
-
-.c14:checked + label {
-  background: #3B46CC;
-  border: 0.0625rem solid rgb(59,70,204);
-}
-
-.c14:checked + label:after {
-  -webkit-transform: translateX(100%);
-  -ms-transform: translateX(100%);
-  transform: translateX(100%);
-  box-shadow: 0 0 0 0.0625rem rgb(59,70,204);
-}
-
-.c14:checked + label:active {
-  box-shadow: none;
-}
-
-.c15 {
-  outline: 0;
-  display: block;
-  width: 2.875rem;
-  height: 1.5rem;
-  position: relative;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
+.c13[type='checkbox'],
+.c13[type='radio'] {
   box-sizing: border-box;
-  background: rgb(250,250,250);
-  border-radius: 1.4375rem;
-  -webkit-transition: all 0.3s ease;
-  transition: all 0.3s ease;
-  border: 0.0625rem solid rgb(216,216,216);
+  padding: 0;
 }
 
-.c15::selection {
-  background: none;
+.c13[type='number']::-webkit-inner-spin-button,
+.c13[type='number']::-webkit-outer-spin-button {
+  height: auto;
 }
 
-.c15:active {
-  box-shadow: inset 0 0 0 1.5rem rgb(216,216,216);
+.c13[type='search'] {
+  -webkit-appearance: textfield;
+  -moz-appearance: textfield;
+  appearance: textfield;
+  outline-offset: -0.125rem;
 }
 
-.c15:hover {
-  border: 0.0625rem solid rgb(59,70,204);
+.c13[type='search']::-webkit-search-cancel-button,
+.c13[type='search']::-webkit-search-decoration {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
 }
 
-.c15:hover:after {
-  box-shadow: 0 0 0 0.0625rem rgb(59,70,204);
-}
-
-.c15:after,
-.c15:before {
-  position: relative;
-  display: block;
-  content: '';
-  width: 50%;
-  height: 100%;
-}
-
-.c15:after {
-  -webkit-transform: translateX(0%);
-  -ms-transform: translateX(0%);
-  transform: translateX(0%);
-  border-radius: 50%;
-  background: rgb(255,255,255);
-  -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275);
-  -webkit-transition: transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275);
-  transition: transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275);
-  box-shadow: 0 0 0 0.0625rem rgb(216,216,216);
-}
-
-.c15:active {
-  box-shadow: inset 0 0 0 2em rgb(216,216,216);
-}
-
-.c15:before {
-  display: none;
-}
-
-.c24 {
-  color: rgb(151,151,151);
-  text-align: center;
-}
-
-.c19 {
-  width: calc(100% - 0.125rem);
-}
-
-.c5 {
-  font-weight: 200;
-}
-
-@media only screen and (min-width:48em) {
-  .c1 {
-    width: 46rem;
-  }
-}
-
-@media only screen and (min-width:64em) {
-  .c1 {
-    width: 56rem;
-  }
-}
-
-@media only screen and (min-width:75em) {
-  .c1 {
-    width: 59rem;
-  }
-}
-
-@media only screen and (min-width:0em) {
-  .c4 {
-    -webkit-flex-basis: 100%;
-    -ms-flex-preferred-size: 100%;
-    flex-basis: 100%;
-    max-width: 100%;
-  }
-}
-
-@media only screen and (min-width:48em) {
-  .c4 {
-    -webkit-flex-basis: 58.333333333333336%;
-    -ms-flex-preferred-size: 58.333333333333336%;
-    flex-basis: 58.333333333333336%;
-    max-width: 58.333333333333336%;
-  }
-}
-
-@media only screen and (max-width:47.9375rem) {
-  .c0 {
-    padding-left: 0.375rem;
-    padding-right: 0.375rem;
-  }
-}
-
-<div
-    className="c0 c1"
->
-    <div
-        className="c2"
-    >
-        <div
-            className="c3"
-        >
-            <div
-                className="c4"
-            >
-                <p
-                    className="c5 c6"
-                >
-                    Cloud Firewall rules control traffic across instances. Enabling the firewall adds a default set of rules and rules defined by your chosen tags.
-                     
-                    <a
-                        href="https://docs.joyent.com/private-cloud/install/cns"
-                        rel="noopener noreferrer"
-                        target="__blank"
-                    >
-                        Read the docs
-                    </a>
-                </p>
-            </div>
-        </div>
-    </div>
-    <div
-        className="c7"
-    >
-        <form
-            onChange={[Function]}
-        >
-            <div
-                className="c8"
-                name="enabled"
-                role="group"
-                style={undefined}
-                type="checkbox"
-            >
-                <div
-                    className="c9"
-                >
-                    <label
-                        className="c10 c11"
-                        htmlFor="n"
-                    >
-                        Enable Firewall
-                    </label>
-                    <div
-                        className="c12"
-                    >
-                        <div
-                            className="c13"
-                        >
-                            <input
-                                checked={undefined}
-                                className="c14"
-                                disabled={false}
-                                id="n"
-                                onBlur={undefined}
-                                type="checkbox"
-                            />
-                            <label
-                                className="c15"
-                                disabled={false}
-                                htmlFor="n"
-                                id="n"
-                                onBlur={undefined}
-                            />
-                            <label
-                                className="c16 c11"
-                                disabled={false}
-                                htmlFor="n"
-                                id="n"
-                                onBlur={undefined}
-                            >
-                                 
-                            </label>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </form>
-    </div>
-    <div
-        className="c17 c3"
-        height="0.0625rem"
-    />
-    <div
-        className="c18"
-    >
-        <div
-            className="c19 c20"
-            disabled={false}
-            name="card"
-        >
-            <div
-                className="c21"
-            >
-                <div
-                    className="c22"
-                >
-                    <div
-                        className="c23"
-                    >
-                        <svg
-                            height={60}
-                            viewBox="0 0 79 60"
-                            width={79}
-                            xmlns="http://www.w3.org/2000/svg"
-                            xmlnsXlink="http://www.w3.org/1999/xlink"
-                        >
-                            <title>
-                                Guilty_Salamander
-                            </title>
-                            <desc>
-                                Created using Figma
-                            </desc>
-                            <use
-                                fill="#FAA427"
-                                transform="translate(23.8 22)"
-                                xlinkHref="#a"
-                            />
-                            <use
-                                fill="#F3722C"
-                                transform="translate(27.3 25.5)"
-                                xlinkHref="#b"
-                            />
-                            <use
-                                fill="#FAA427"
-                                transform="translate(4.8 32.1)"
-                                xlinkHref="#c"
-                            />
-                            <use
-                                fill="#F3722C"
-                                transform="translate(12.2 31.8)"
-                                xlinkHref="#d"
-                            />
-                            <use
-                                fill="#FAA427"
-                                transform="translate(54.4 31.9)"
-                                xlinkHref="#e"
-                            />
-                            <use
-                                fill="#F3722C"
-                                transform="translate(54.4 32)"
-                                xlinkHref="#f"
-                            />
-                            <use
-                                fill="#FAA427"
-                                transform="translate(15.8 26.8)"
-                                xlinkHref="#g"
-                            />
-                            <use
-                                fill="#FAA427"
-                                transform="translate(5)"
-                                xlinkHref="#h"
-                            />
-                            <use
-                                fill="#FAFBFC"
-                                transform="rotate(-15.13 41.037 5.45)"
-                                xlinkHref="#i"
-                            />
-                            <use
-                                fill="#412B13"
-                                transform="rotate(-15.13 67.273 -24.78)"
-                                xlinkHref="#j"
-                            />
-                            <use
-                                fill="#F3722C"
-                                transform="translate(2.2 8)"
-                                xlinkHref="#k"
-                            />
-                            <use
-                                fill="#FAFBFC"
-                                transform="rotate(-74.87 40.46 -20.511)"
-                                xlinkHref="#l"
-                            />
-                            <use
-                                fill="#412B13"
-                                transform="rotate(-74.87 41.364 -22.098)"
-                                xlinkHref="#m"
-                            />
-                            <use
-                                fill="#F3722C"
-                                transform="translate(52.1 8)"
-                                xlinkHref="#n"
-                            />
-                            <use
-                                fill="#F3722C"
-                                transform="translate(31.5 34.3)"
-                                xlinkHref="#o"
-                            />
-                            <use
-                                fill="#F3722C"
-                                transform="translate(14.3)"
-                                xlinkHref="#p"
-                            />
-                            <use
-                                fill="#F3722C"
-                                transform="translate(30.9 18.9)"
-                                xlinkHref="#q"
-                            />
-                            <use
-                                fill="#F3722C"
-                                transform="translate(37.6 18.9)"
-                                xlinkHref="#r"
-                            />
-                            <use
-                                fill="#FAA427"
-                                transform="translate(27.4 53.9)"
-                                xlinkHref="#s"
-                            />
-                            <use
-                                fill="#FAA427"
-                                transform="translate(39.1 53.9)"
-                                xlinkHref="#t"
-                            />
-                            <use
-                                fill="#F3722C"
-                                transform="translate(27.4 53.9)"
-                                xlinkHref="#u"
-                            />
-                            <use
-                                fill="#342013"
-                                transform="translate(28.6 26.2)"
-                                xlinkHref="#v"
-                            />
-                            <use
-                                fill="#FFF"
-                                transform="translate(32.6 28.7)"
-                                xlinkHref="#w"
-                            />
-                            <defs>
-                                <path
-                                    d="M54.921 36.053L0 0l1.413 24.908c.359 6.249 5.752 11.145 12.283 11.145H54.92z"
-                                    id="a"
-                                />
-                                <path
-                                    d="M42.12 32.526L13.47 0 0 23.737c.282 4.924 4.527 8.778 9.672 8.778l32.448.01z"
-                                    id="b"
-                                />
-                                <path
-                                    d="M3.326 17.01a3.312 3.312 0 0 1-1.545-6.25C6.059 8.52 8.482 2.226 8.52 2.165a3.313 3.313 0 0 1 6.216 2.296c-.133.354-3.312 8.717-9.86 12.145-.475.26-1.008.4-1.55.403z"
-                                    id="c"
-                                />
-                                <path
-                                    d="M5.079 9.205A28.654 28.654 0 0 0 7.287 4.75a3.312 3.312 0 1 0-6.183-2.296C.781 3.234.412 3.996 0 4.734c1.33 1.181 3.544 3.152 5.079 4.471z"
-                                    id="d"
-                                />
-                                <path
-                                    d="M11.682 17.27a3.312 3.312 0 0 0 1.545-6.248C8.95 8.78 6.526 2.487 6.504 2.427A3.312 3.312 0 1 0 .316 4.723c.126.353 3.312 8.717 9.853 12.145.464.254.983.393 1.513.403z"
-                                    id="e"
-                                />
-                                <path
-                                    d="M2.45 9.01A28.33 28.33 0 0 1 .242 4.553a3.312 3.312 0 1 1 6.21-2.296c.326.78.695 1.54 1.104 2.28C6.187 5.719 3.973 7.69 2.45 9.009z"
-                                    id="f"
-                                />
-                                <path
-                                    d="M35.159 0H6.542A6.542 6.542 0 0 0 0 6.542v14.016a6.542 6.542 0 0 0 6.542 6.541h28.617a6.541 6.541 0 0 0 6.541-6.541V6.542A6.542 6.542 0 0 0 35.16 0z"
-                                    id="g"
-                                />
-                                <path
-                                    d="M54.254 0H9.026A9.026 9.026 0 0 0 0 9.026v17.207a9.026 9.026 0 0 0 9.026 9.025h45.228a9.026 9.026 0 0 0 9.025-9.026V9.027A9.026 9.026 0 0 0 54.253 0z"
-                                    id="h"
-                                />
-                                <path
-                                    d="M9.721 18.637c5.37 0 9.721-4.172 9.721-9.319C19.442 4.172 15.09 0 9.722 0 4.351 0 0 4.172 0 9.318c0 5.147 4.352 9.319 9.721 9.319z"
-                                    id="i"
-                                />
-                                <path
-                                    d="M5.19 9.959c2.865 0 5.188-2.23 5.188-4.98C10.378 2.23 8.055 0 5.19 0S0 2.23 0 4.98c0 2.75 2.323 4.979 5.19 4.979z"
-                                    id="j"
-                                />
-                                <path
-                                    d="M7.262.351C2.078 1.753-1.018 6.921.306 11.89l18.77-5.073C17.705 1.847 12.411-1.045 7.261.35z"
-                                    id="k"
-                                />
-                                <path
-                                    d="M9.318 19.442c5.147 0 9.319-4.352 9.319-9.72C18.637 4.351 14.465 0 9.318 0 4.172 0 0 4.352 0 9.721c0 5.37 4.172 9.721 9.318 9.721z"
-                                    id="l"
-                                />
-                                <path
-                                    d="M4.98 10.378c2.75 0 4.979-2.323 4.979-5.189S7.729 0 4.979 0C2.23 0 0 2.323 0 5.19c0 2.865 2.23 5.188 4.98 5.188z"
-                                    id="m"
-                                />
-                                <path
-                                    d="M11.819.351c5.178 1.402 8.28 6.57 6.95 11.538L0 6.816C1.347 1.847 6.635-1.045 11.819.35z"
-                                    id="n"
-                                />
-                                <path
-                                    d="M5.106 4.897A5.007 5.007 0 0 0 10.218 0H0a5.001 5.001 0 0 0 5.106 4.897z"
-                                    id="o"
-                                />
-                                <path
-                                    d="M0 0l22.258 18.498L44.516 0H0z"
-                                    id="p"
-                                />
-                                <path
-                                    d="M2.445 0A2.396 2.396 0 0 0 0 2.342h4.885a2.39 2.39 0 0 0-2.44-2.34z"
-                                    id="q"
-                                />
-                                <path
-                                    d="M2.462 0A2.396 2.396 0 0 0 0 2.343h4.885A2.39 2.39 0 0 0 2.462 0z"
-                                    id="r"
-                                />
-                                <path
-                                    d="M0 0h6.227v3.091A3.047 3.047 0 0 1 3.18 6.14h-.127A3.047 3.047 0 0 1 .006 3.09V0H0z"
-                                    id="s"
-                                />
-                                <path
-                                    d="M.006 0H6.22v3.091A3.047 3.047 0 0 1 3.174 6.14h-.127A3.047 3.047 0 0 1 0 3.09V0h.006z"
-                                    id="t"
-                                />
-                                <path
-                                    d="M31.328 0H0v1.474h31.328V0z"
-                                    id="u"
-                                />
-                                <path
-                                    d="M15.422 1.503A17.422 17.422 0 0 0 8.113.002 17.4 17.4 0 0 0 .805 1.503a1.457 1.457 0 0 0 .629 2.76h2.572V4.06a1.579 1.579 0 0 1 2.126-1.468 6.194 6.194 0 0 0 3.963 0 1.574 1.574 0 0 1 2.12 1.468v.204h2.572a1.463 1.463 0 0 0 .635-2.76z"
-                                    id="v"
-                                />
-                                <path
-                                    d="M6.072.104a6.194 6.194 0 0 1-3.963 0A1.579 1.579 0 0 0 0 1.573v.204h8.209v-.204A1.573 1.573 0 0 0 6.072.104z"
-                                    id="w"
-                                />
-                            </defs>
-                        </svg>
-                    </div>
-                    <h3
-                        className="c24 c25"
-                    >
-                        Sorry, but we weren’t able to find any firewall rules.
-                    </h3>
-                </div>
-            </div>
-        </div>
-    </div>
-</div>,
-  .c2 {
-  margin-bottom: 1.125rem;
-}
-
-.c7 {
-  margin-bottom: 1.875rem;
-}
-
-.c12 {
-  margin-left: 0.75rem;
-}
-
-.c20 {
-  margin-top: 1.875rem;
-}
-
-.c25 {
-  margin-bottom: 0.75rem;
-}
-
-.c18 {
-  margin-top: 1.5rem;
-}
-
-.c19 {
-  margin-right: 0.75rem;
-}
-
-.c23 {
-  padding: 8rem;
+.c13::-webkit-file-upload-button {
+  -webkit-appearance: button;
+  -moz-appearance: button;
+  appearance: button;
+  font: inherit;
 }
 
 .c6 {
@@ -2180,7 +1598,7 @@ Array [
   font-size: 0.9375rem;
 }
 
-.c11 {
+.c17 {
   font-size: 0.9375rem;
   line-height: 1.125rem;
   font-style: normal;
@@ -2239,35 +1657,11 @@ Array [
   font-size: 1.3125rem;
 }
 
-.c17 {
+.c19 {
   height: 1px;
   background-color: rgb(216,216,216);
 }
 
-.c9 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-align-content: stretch;
-  -ms-flex-line-pack: stretch;
-  align-content: stretch;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
 .c24 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -2321,7 +1715,124 @@ Array [
   border-color: rgb(216,216,216);
 }
 
-.c8 {
+.c12 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  display: none;
+}
+
+.c12:checked + label::after {
+  opacity: 1;
+}
+
+.c12:selected + label::after {
+  opacity: 1;
+}
+
+.c12:checked + label {
+  border-color: rgb(59,70,204);
+}
+
+.c12:selected + label {
+  border-color: rgb(59,70,204);
+}
+
+.c12:disabled + label {
+  background-color: rgb(249,249,249);
+  cursor: not-allowed;
+}
+
+.c14 {
+  color: rgb(100,100,100);
+  position: absolute;
+  width: 1.125rem;
+  height: 1.125rem;
+  box-sizing: border-box;
+  top: 0;
+  right: 0;
+  cursor: pointer;
+  background-color: rgb(255,255,255);
+  box-shadow: none;
+  border: 0.0625rem solid rgb(216,216,216);
+  cursor: pointer;
+  border-radius: 0.25rem;
+  width: 1.125rem;
+  height: 1.125rem;
+}
+
+.c14::after {
+  opacity: 0;
+  content: '';
+  position: absolute;
+  width: 0.375rem;
+  height: 0.125rem;
+  background: transparent;
+  top: 0.3125rem;
+  left: 0.25rem;
+  border: 0.125rem solid rgb(45,45,45);
+  border-top: none;
+  border-right: none;
+  -webkit-transform: rotate(-45deg);
+  -ms-transform: rotate(-45deg);
+  transform: rotate(-45deg);
+}
+
+.c11 {
+  display: inline-block;
+  vertical-align: text-bottom;
+  width: 1.125rem;
+  height: 1.125rem;
+  position: relative;
+  cursor: pointer;
+}
+
+.c15 label {
+  font-weight: normal;
+  font-size: 0.9375rem;
+}
+
+.c10 {
+  list-style-type: none;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-align-content: center;
+  -ms-flex-line-pack: center;
+  align-content: center;
+  height: 1.5rem;
+}
+
+.c10 label {
+  font-weight: 400;
+}
+
+.c10 label::after {
+  width: 0.475rem;
+  height: 0.205rem;
+  top: 0.4125rem;
+  left: 0.35rem;
+}
+
+.c10 div[type='checkbox'],
+.c10 div[type='checkbox'] input,
+.c10 div[type='checkbox'] label {
+  height: 1.5rem;
+  width: 1.5rem;
+}
+
+.c9 {
   display: inline-block;
   padding: 0;
   border: none;
@@ -2333,114 +1844,11 @@ Array [
   -webkit-padding-after: 0;
 }
 
-.c10 {
-  font-weight: 600;
-  white-space: pre;
-  font-size: 0.8125rem;
-  font-size: 0.9375rem;
-}
-
 .c16 {
   font-weight: 600;
   white-space: pre;
   font-size: 0.8125rem;
-}
-
-.c13 {
-  position: relative;
-  vertical-align: text-bottom;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.c14 {
-  display: none;
-}
-
-.c14:checked + label {
-  background: #3B46CC;
-  border: 0.0625rem solid rgb(59,70,204);
-}
-
-.c14:checked + label:after {
-  -webkit-transform: translateX(100%);
-  -ms-transform: translateX(100%);
-  transform: translateX(100%);
-  box-shadow: 0 0 0 0.0625rem rgb(59,70,204);
-}
-
-.c14:checked + label:active {
-  box-shadow: none;
-}
-
-.c15 {
-  outline: 0;
-  display: block;
-  width: 2.875rem;
-  height: 1.5rem;
-  position: relative;
   cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  box-sizing: border-box;
-  background: rgb(250,250,250);
-  border-radius: 1.4375rem;
-  -webkit-transition: all 0.3s ease;
-  transition: all 0.3s ease;
-  border: 0.0625rem solid rgb(216,216,216);
-}
-
-.c15::selection {
-  background: none;
-}
-
-.c15:active {
-  box-shadow: inset 0 0 0 1.5rem rgb(216,216,216);
-}
-
-.c15:hover {
-  border: 0.0625rem solid rgb(59,70,204);
-}
-
-.c15:hover:after {
-  box-shadow: 0 0 0 0.0625rem rgb(59,70,204);
-}
-
-.c15:after,
-.c15:before {
-  position: relative;
-  display: block;
-  content: '';
-  width: 50%;
-  height: 100%;
-}
-
-.c15:after {
-  -webkit-transform: translateX(0%);
-  -ms-transform: translateX(0%);
-  transform: translateX(0%);
-  border-radius: 50%;
-  background: rgb(255,255,255);
-  -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275);
-  -webkit-transition: transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275);
-  transition: transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275);
-  box-shadow: 0 0 0 0.0625rem rgb(216,216,216);
-}
-
-.c15:active {
-  box-shadow: inset 0 0 0 2em rgb(216,216,216);
-}
-
-.c15:before {
-  display: none;
 }
 
 .c26 {
@@ -2452,6 +1860,10 @@ Array [
   width: calc(100% - 0.125rem);
 }
 
+.c8 {
+  margin-bottom: 0 !important;
+}
+
 .c5 {
   font-weight: 200;
 }
@@ -2531,117 +1943,66 @@ Array [
         className="c7"
     >
         <form
+            className="c8"
             onChange={[Function]}
         >
             <div
-                className="c8"
+                className="c9"
                 name="enabled"
                 role="group"
                 style={undefined}
                 type="checkbox"
             >
-                <div
-                    className="c9"
+                <li
+                    className="c10"
                 >
-                    <label
-                        className="c10 c11"
-                        htmlFor="o"
-                    >
-                        Enable Firewall
-                    </label>
                     <div
-                        className="c12"
+                        checked={false}
+                        className="c11"
+                        disabled={false}
+                        id="q"
+                        onBlur={undefined}
+                        type="checkbox"
                     >
-                        <div
-                            className="c13"
-                        >
-                            <input
-                                checked={undefined}
-                                className="c14"
-                                disabled={false}
-                                id="o"
-                                onBlur={undefined}
-                                type="checkbox"
-                            />
-                            <label
-                                className="c15"
-                                disabled={false}
-                                htmlFor="o"
-                                id="o"
-                                onBlur={undefined}
-                            />
-                            <label
-                                className="c16 c11"
-                                disabled={false}
-                                htmlFor="o"
-                                id="o"
-                                onBlur={undefined}
-                            >
-                                 
-                            </label>
-                        </div>
+                        <input
+                            checked={false}
+                            className="c12 c13"
+                            disabled={false}
+                            id="r"
+                            onBlur={undefined}
+                            type="checkbox"
+                        />
+                        <label
+                            className="c14"
+                            htmlFor="r"
+                        />
                     </div>
-                </div>
+                    <div
+                        checked={false}
+                        className="c15"
+                        disabled={false}
+                        id="q"
+                        onBlur={undefined}
+                    >
+                        <label
+                            className="c16 c17"
+                            htmlFor="r"
+                        >
+                            <div
+                                className="c18"
+                            >
+                                Enable Firewall
+                            </div>
+                        </label>
+                    </div>
+                </li>
             </div>
         </form>
     </div>
     <div
-        className="c17 c3"
+        className="c19 c3"
         height="0.0625rem"
     />
-    <div
-        className="c18"
-    >
-        <form>
-            <div
-                className="c8"
-                name="inactive"
-                role="group"
-                style={undefined}
-                type="checkbox"
-            >
-                <div
-                    className="c9"
-                >
-                    <div
-                        className="c19"
-                    >
-                        <div
-                            className="c13"
-                        >
-                            <input
-                                checked={undefined}
-                                className="c14"
-                                id="p"
-                                onBlur={undefined}
-                                type="checkbox"
-                            />
-                            <label
-                                className="c15"
-                                htmlFor="p"
-                                id="p"
-                                onBlur={undefined}
-                            />
-                            <label
-                                className="c16 c11"
-                                htmlFor="p"
-                                id="p"
-                                onBlur={undefined}
-                            >
-                                 
-                            </label>
-                        </div>
-                    </div>
-                    <label
-                        className="c10 c11"
-                        htmlFor="p"
-                    >
-                        Show inactive rules
-                    </label>
-                </div>
-            </div>
-        </form>
-    </div>
     <div
         className="c20"
     >
@@ -2892,6 +2253,797 @@ Array [
             </div>
         </div>
     </div>
+</div>,
+  .c2 {
+  margin-bottom: 1.125rem;
+}
+
+.c7 {
+  margin-bottom: 1.875rem;
+}
+
+.c18 {
+  margin-right: 0.75rem;
+  margin-left: 0.75rem;
+}
+
+.c21 {
+  margin-top: 1.875rem;
+}
+
+.c26 {
+  margin-bottom: 0.75rem;
+}
+
+.c20 {
+  margin-top: 1.5rem;
+}
+
+.c24 {
+  padding: 8rem;
+}
+
+.c13 {
+  font-family: sans-serif;
+  font-size: 100%;
+  line-height: 1.15;
+  margin: 0;
+  overflow: visible;
+}
+
+.c13[type='checkbox'],
+.c13[type='radio'] {
+  box-sizing: border-box;
+  padding: 0;
+}
+
+.c13[type='number']::-webkit-inner-spin-button,
+.c13[type='number']::-webkit-outer-spin-button {
+  height: auto;
+}
+
+.c13[type='search'] {
+  -webkit-appearance: textfield;
+  -moz-appearance: textfield;
+  appearance: textfield;
+  outline-offset: -0.125rem;
+}
+
+.c13[type='search']::-webkit-search-cancel-button,
+.c13[type='search']::-webkit-search-decoration {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+}
+
+.c13::-webkit-file-upload-button {
+  -webkit-appearance: button;
+  -moz-appearance: button;
+  appearance: button;
+  font: inherit;
+}
+
+.c6 {
+  color: rgb(73,73,73);
+  margin: 0;
+  line-height: 1.5rem;
+  font-size: 0.9375rem;
+}
+
+.c17 {
+  font-size: 0.9375rem;
+  line-height: 1.125rem;
+  font-style: normal;
+  font-stretch: normal;
+  display: block;
+  color: rgb(70,70,70);
+  text-align: left;
+}
+
+.c1 {
+  margin-right: auto;
+  margin-left: auto;
+}
+
+.c3 {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.625rem;
+  margin-left: -0.625rem;
+}
+
+.c4 {
+  box-sizing: border-box;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  padding-right: 0.625rem;
+  padding-left: 0.625rem;
+  display: block;
+}
+
+.c0 {
+  box-sizing: border-box;
+  width: 100%;
+  max-width: 62.5rem;
+  padding-bottom: 1.125rem;
+}
+
+.c28 {
+  margin: 0;
+  color: rgb(73,73,73);
+  font-weight: normal;
+  line-height: 1.625rem;
+  font-size: 1.3125rem;
+}
+
+.c19 {
+  height: 1px;
+  background-color: rgb(216,216,216);
+}
+
+.c25 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  -webkit-align-content: stretch;
+  -ms-flex-line-pack: stretch;
+  align-content: stretch;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.c23 {
+  box-sizing: content-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1 0 auto;
+  -ms-flex: 1 0 auto;
+  flex: 1 0 auto;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  position: relative;
+  border-width: 0.0625rem;
+  border-style: solid;
+  -webkit-transition: all 300ms ease;
+  transition: all 300ms ease;
+  color: rgb(73,73,73);
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+}
+
+.c12 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  display: none;
+}
+
+.c12:checked + label::after {
+  opacity: 1;
+}
+
+.c12:selected + label::after {
+  opacity: 1;
+}
+
+.c12:checked + label {
+  border-color: rgb(59,70,204);
+}
+
+.c12:selected + label {
+  border-color: rgb(59,70,204);
+}
+
+.c12:disabled + label {
+  background-color: rgb(249,249,249);
+  cursor: not-allowed;
+}
+
+.c14 {
+  color: rgb(100,100,100);
+  position: absolute;
+  width: 1.125rem;
+  height: 1.125rem;
+  box-sizing: border-box;
+  top: 0;
+  right: 0;
+  cursor: pointer;
+  background-color: rgb(255,255,255);
+  box-shadow: none;
+  border: 0.0625rem solid rgb(216,216,216);
+  cursor: pointer;
+  border-radius: 0.25rem;
+  width: 1.125rem;
+  height: 1.125rem;
+}
+
+.c14::after {
+  opacity: 0;
+  content: '';
+  position: absolute;
+  width: 0.375rem;
+  height: 0.125rem;
+  background: transparent;
+  top: 0.3125rem;
+  left: 0.25rem;
+  border: 0.125rem solid rgb(45,45,45);
+  border-top: none;
+  border-right: none;
+  -webkit-transform: rotate(-45deg);
+  -ms-transform: rotate(-45deg);
+  transform: rotate(-45deg);
+}
+
+.c11 {
+  display: inline-block;
+  vertical-align: text-bottom;
+  width: 1.125rem;
+  height: 1.125rem;
+  position: relative;
+  cursor: pointer;
+}
+
+.c15 label {
+  font-weight: normal;
+  font-size: 0.9375rem;
+}
+
+.c10 {
+  list-style-type: none;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-align-content: center;
+  -ms-flex-line-pack: center;
+  align-content: center;
+  height: 1.5rem;
+}
+
+.c10 label {
+  font-weight: 400;
+}
+
+.c10 label::after {
+  width: 0.475rem;
+  height: 0.205rem;
+  top: 0.4125rem;
+  left: 0.35rem;
+}
+
+.c10 div[type='checkbox'],
+.c10 div[type='checkbox'] input,
+.c10 div[type='checkbox'] label {
+  height: 1.5rem;
+  width: 1.5rem;
+}
+
+.c9 {
+  display: inline-block;
+  padding: 0;
+  border: none;
+  overflow: hidden;
+  height: auto;
+  -webkit-padding-before: 0;
+  -webkit-padding-start: 0;
+  -webkit-padding-end: 0;
+  -webkit-padding-after: 0;
+}
+
+.c16 {
+  font-weight: 600;
+  white-space: pre;
+  font-size: 0.8125rem;
+  cursor: pointer;
+}
+
+.c27 {
+  color: rgb(151,151,151);
+  text-align: center;
+}
+
+.c22 {
+  width: calc(100% - 0.125rem);
+}
+
+.c8 {
+  margin-bottom: 0 !important;
+}
+
+.c5 {
+  font-weight: 200;
+}
+
+@media only screen and (min-width:48em) {
+  .c1 {
+    width: 46rem;
+  }
+}
+
+@media only screen and (min-width:64em) {
+  .c1 {
+    width: 56rem;
+  }
+}
+
+@media only screen and (min-width:75em) {
+  .c1 {
+    width: 59rem;
+  }
+}
+
+@media only screen and (min-width:0em) {
+  .c4 {
+    -webkit-flex-basis: 100%;
+    -ms-flex-preferred-size: 100%;
+    flex-basis: 100%;
+    max-width: 100%;
+  }
+}
+
+@media only screen and (min-width:48em) {
+  .c4 {
+    -webkit-flex-basis: 58.333333333333336%;
+    -ms-flex-preferred-size: 58.333333333333336%;
+    flex-basis: 58.333333333333336%;
+    max-width: 58.333333333333336%;
+  }
+}
+
+@media only screen and (max-width:47.9375rem) {
+  .c0 {
+    padding-left: 0.375rem;
+    padding-right: 0.375rem;
+  }
+}
+
+<div
+    className="c0 c1"
+>
+    <div
+        className="c2"
+    >
+        <div
+            className="c3"
+        >
+            <div
+                className="c4"
+            >
+                <p
+                    className="c5 c6"
+                >
+                    Cloud Firewall rules control traffic across instances. Enabling the firewall adds a default set of rules and rules defined by your chosen tags.
+                     
+                    <a
+                        href="https://docs.joyent.com/private-cloud/install/cns"
+                        rel="noopener noreferrer"
+                        target="__blank"
+                    >
+                        Read the docs
+                    </a>
+                </p>
+            </div>
+        </div>
+    </div>
+    <div
+        className="c7"
+    >
+        <form
+            className="c8"
+            onChange={[Function]}
+        >
+            <div
+                className="c9"
+                name="enabled"
+                role="group"
+                style={undefined}
+                type="checkbox"
+            >
+                <li
+                    className="c10"
+                >
+                    <div
+                        checked={false}
+                        className="c11"
+                        disabled={false}
+                        id="s"
+                        onBlur={undefined}
+                        type="checkbox"
+                    >
+                        <input
+                            checked={false}
+                            className="c12 c13"
+                            disabled={false}
+                            id="t"
+                            onBlur={undefined}
+                            type="checkbox"
+                        />
+                        <label
+                            className="c14"
+                            htmlFor="t"
+                        />
+                    </div>
+                    <div
+                        checked={false}
+                        className="c15"
+                        disabled={false}
+                        id="s"
+                        onBlur={undefined}
+                    >
+                        <label
+                            className="c16 c17"
+                            htmlFor="t"
+                        >
+                            <div
+                                className="c18"
+                            >
+                                Enable Firewall
+                            </div>
+                        </label>
+                    </div>
+                </li>
+            </div>
+        </form>
+    </div>
+    <div
+        className="c19 c3"
+        height="0.0625rem"
+    />
+    <div
+        className="c20"
+    >
+        <form
+            className="c8"
+        >
+            <div
+                className="c9"
+                name="inactive"
+                role="group"
+                style={undefined}
+                type="checkbox"
+            >
+                <li
+                    className="c10"
+                >
+                    <div
+                        checked={false}
+                        className="c11"
+                        disabled={false}
+                        id="u"
+                        onBlur={undefined}
+                        type="checkbox"
+                    >
+                        <input
+                            checked={false}
+                            className="c12 c13"
+                            disabled={false}
+                            id="v"
+                            onBlur={undefined}
+                            type="checkbox"
+                        />
+                        <label
+                            className="c14"
+                            htmlFor="v"
+                        />
+                    </div>
+                    <div
+                        checked={false}
+                        className="c15"
+                        disabled={false}
+                        id="u"
+                        onBlur={undefined}
+                    >
+                        <label
+                            className="c16 c17"
+                            htmlFor="v"
+                        >
+                            <div
+                                className="c18"
+                            >
+                                Show inactive rules
+                            </div>
+                        </label>
+                    </div>
+                </li>
+            </div>
+        </form>
+    </div>
+    <div
+        className="c21"
+    >
+        <div
+            className="c22 c23"
+            disabled={false}
+            name="card"
+        >
+            <div
+                className="c24"
+            >
+                <div
+                    className="c25"
+                >
+                    <div
+                        className="c26"
+                    >
+                        <svg
+                            height={60}
+                            viewBox="0 0 79 60"
+                            width={79}
+                            xmlns="http://www.w3.org/2000/svg"
+                            xmlnsXlink="http://www.w3.org/1999/xlink"
+                        >
+                            <title>
+                                Guilty_Salamander
+                            </title>
+                            <desc>
+                                Created using Figma
+                            </desc>
+                            <use
+                                fill="#FAA427"
+                                transform="translate(23.8 22)"
+                                xlinkHref="#a"
+                            />
+                            <use
+                                fill="#F3722C"
+                                transform="translate(27.3 25.5)"
+                                xlinkHref="#b"
+                            />
+                            <use
+                                fill="#FAA427"
+                                transform="translate(4.8 32.1)"
+                                xlinkHref="#c"
+                            />
+                            <use
+                                fill="#F3722C"
+                                transform="translate(12.2 31.8)"
+                                xlinkHref="#d"
+                            />
+                            <use
+                                fill="#FAA427"
+                                transform="translate(54.4 31.9)"
+                                xlinkHref="#e"
+                            />
+                            <use
+                                fill="#F3722C"
+                                transform="translate(54.4 32)"
+                                xlinkHref="#f"
+                            />
+                            <use
+                                fill="#FAA427"
+                                transform="translate(15.8 26.8)"
+                                xlinkHref="#g"
+                            />
+                            <use
+                                fill="#FAA427"
+                                transform="translate(5)"
+                                xlinkHref="#h"
+                            />
+                            <use
+                                fill="#FAFBFC"
+                                transform="rotate(-15.13 41.037 5.45)"
+                                xlinkHref="#i"
+                            />
+                            <use
+                                fill="#412B13"
+                                transform="rotate(-15.13 67.273 -24.78)"
+                                xlinkHref="#j"
+                            />
+                            <use
+                                fill="#F3722C"
+                                transform="translate(2.2 8)"
+                                xlinkHref="#k"
+                            />
+                            <use
+                                fill="#FAFBFC"
+                                transform="rotate(-74.87 40.46 -20.511)"
+                                xlinkHref="#l"
+                            />
+                            <use
+                                fill="#412B13"
+                                transform="rotate(-74.87 41.364 -22.098)"
+                                xlinkHref="#m"
+                            />
+                            <use
+                                fill="#F3722C"
+                                transform="translate(52.1 8)"
+                                xlinkHref="#n"
+                            />
+                            <use
+                                fill="#F3722C"
+                                transform="translate(31.5 34.3)"
+                                xlinkHref="#o"
+                            />
+                            <use
+                                fill="#F3722C"
+                                transform="translate(14.3)"
+                                xlinkHref="#p"
+                            />
+                            <use
+                                fill="#F3722C"
+                                transform="translate(30.9 18.9)"
+                                xlinkHref="#q"
+                            />
+                            <use
+                                fill="#F3722C"
+                                transform="translate(37.6 18.9)"
+                                xlinkHref="#r"
+                            />
+                            <use
+                                fill="#FAA427"
+                                transform="translate(27.4 53.9)"
+                                xlinkHref="#s"
+                            />
+                            <use
+                                fill="#FAA427"
+                                transform="translate(39.1 53.9)"
+                                xlinkHref="#t"
+                            />
+                            <use
+                                fill="#F3722C"
+                                transform="translate(27.4 53.9)"
+                                xlinkHref="#u"
+                            />
+                            <use
+                                fill="#342013"
+                                transform="translate(28.6 26.2)"
+                                xlinkHref="#v"
+                            />
+                            <use
+                                fill="#FFF"
+                                transform="translate(32.6 28.7)"
+                                xlinkHref="#w"
+                            />
+                            <defs>
+                                <path
+                                    d="M54.921 36.053L0 0l1.413 24.908c.359 6.249 5.752 11.145 12.283 11.145H54.92z"
+                                    id="a"
+                                />
+                                <path
+                                    d="M42.12 32.526L13.47 0 0 23.737c.282 4.924 4.527 8.778 9.672 8.778l32.448.01z"
+                                    id="b"
+                                />
+                                <path
+                                    d="M3.326 17.01a3.312 3.312 0 0 1-1.545-6.25C6.059 8.52 8.482 2.226 8.52 2.165a3.313 3.313 0 0 1 6.216 2.296c-.133.354-3.312 8.717-9.86 12.145-.475.26-1.008.4-1.55.403z"
+                                    id="c"
+                                />
+                                <path
+                                    d="M5.079 9.205A28.654 28.654 0 0 0 7.287 4.75a3.312 3.312 0 1 0-6.183-2.296C.781 3.234.412 3.996 0 4.734c1.33 1.181 3.544 3.152 5.079 4.471z"
+                                    id="d"
+                                />
+                                <path
+                                    d="M11.682 17.27a3.312 3.312 0 0 0 1.545-6.248C8.95 8.78 6.526 2.487 6.504 2.427A3.312 3.312 0 1 0 .316 4.723c.126.353 3.312 8.717 9.853 12.145.464.254.983.393 1.513.403z"
+                                    id="e"
+                                />
+                                <path
+                                    d="M2.45 9.01A28.33 28.33 0 0 1 .242 4.553a3.312 3.312 0 1 1 6.21-2.296c.326.78.695 1.54 1.104 2.28C6.187 5.719 3.973 7.69 2.45 9.009z"
+                                    id="f"
+                                />
+                                <path
+                                    d="M35.159 0H6.542A6.542 6.542 0 0 0 0 6.542v14.016a6.542 6.542 0 0 0 6.542 6.541h28.617a6.541 6.541 0 0 0 6.541-6.541V6.542A6.542 6.542 0 0 0 35.16 0z"
+                                    id="g"
+                                />
+                                <path
+                                    d="M54.254 0H9.026A9.026 9.026 0 0 0 0 9.026v17.207a9.026 9.026 0 0 0 9.026 9.025h45.228a9.026 9.026 0 0 0 9.025-9.026V9.027A9.026 9.026 0 0 0 54.253 0z"
+                                    id="h"
+                                />
+                                <path
+                                    d="M9.721 18.637c5.37 0 9.721-4.172 9.721-9.319C19.442 4.172 15.09 0 9.722 0 4.351 0 0 4.172 0 9.318c0 5.147 4.352 9.319 9.721 9.319z"
+                                    id="i"
+                                />
+                                <path
+                                    d="M5.19 9.959c2.865 0 5.188-2.23 5.188-4.98C10.378 2.23 8.055 0 5.19 0S0 2.23 0 4.98c0 2.75 2.323 4.979 5.19 4.979z"
+                                    id="j"
+                                />
+                                <path
+                                    d="M7.262.351C2.078 1.753-1.018 6.921.306 11.89l18.77-5.073C17.705 1.847 12.411-1.045 7.261.35z"
+                                    id="k"
+                                />
+                                <path
+                                    d="M9.318 19.442c5.147 0 9.319-4.352 9.319-9.72C18.637 4.351 14.465 0 9.318 0 4.172 0 0 4.352 0 9.721c0 5.37 4.172 9.721 9.318 9.721z"
+                                    id="l"
+                                />
+                                <path
+                                    d="M4.98 10.378c2.75 0 4.979-2.323 4.979-5.189S7.729 0 4.979 0C2.23 0 0 2.323 0 5.19c0 2.865 2.23 5.188 4.98 5.188z"
+                                    id="m"
+                                />
+                                <path
+                                    d="M11.819.351c5.178 1.402 8.28 6.57 6.95 11.538L0 6.816C1.347 1.847 6.635-1.045 11.819.35z"
+                                    id="n"
+                                />
+                                <path
+                                    d="M5.106 4.897A5.007 5.007 0 0 0 10.218 0H0a5.001 5.001 0 0 0 5.106 4.897z"
+                                    id="o"
+                                />
+                                <path
+                                    d="M0 0l22.258 18.498L44.516 0H0z"
+                                    id="p"
+                                />
+                                <path
+                                    d="M2.445 0A2.396 2.396 0 0 0 0 2.342h4.885a2.39 2.39 0 0 0-2.44-2.34z"
+                                    id="q"
+                                />
+                                <path
+                                    d="M2.462 0A2.396 2.396 0 0 0 0 2.343h4.885A2.39 2.39 0 0 0 2.462 0z"
+                                    id="r"
+                                />
+                                <path
+                                    d="M0 0h6.227v3.091A3.047 3.047 0 0 1 3.18 6.14h-.127A3.047 3.047 0 0 1 .006 3.09V0H0z"
+                                    id="s"
+                                />
+                                <path
+                                    d="M.006 0H6.22v3.091A3.047 3.047 0 0 1 3.174 6.14h-.127A3.047 3.047 0 0 1 0 3.09V0h.006z"
+                                    id="t"
+                                />
+                                <path
+                                    d="M31.328 0H0v1.474h31.328V0z"
+                                    id="u"
+                                />
+                                <path
+                                    d="M15.422 1.503A17.422 17.422 0 0 0 8.113.002 17.4 17.4 0 0 0 .805 1.503a1.457 1.457 0 0 0 .629 2.76h2.572V4.06a1.579 1.579 0 0 1 2.126-1.468 6.194 6.194 0 0 0 3.963 0 1.574 1.574 0 0 1 2.12 1.468v.204h2.572a1.463 1.463 0 0 0 .635-2.76z"
+                                    id="v"
+                                />
+                                <path
+                                    d="M6.072.104a6.194 6.194 0 0 1-3.963 0A1.579 1.579 0 0 0 0 1.573v.204h8.209v-.204A1.573 1.573 0 0 0 6.072.104z"
+                                    id="w"
+                                />
+                            </defs>
+                        </svg>
+                    </div>
+                    <h3
+                        className="c27 c28"
+                    >
+                        Sorry, but we weren’t able to find any firewall rules.
+                    </h3>
+                </div>
+            </div>
+        </div>
+    </div>
 </div>,
 ]
 `;
@@ -3346,22 +3498,63 @@ exports[`renders <Firewall loadingError /> without throwing 1`] = `
   margin-bottom: 1.875rem;
 }
 
-.c17 {
+.c23 {
+  margin-right: 0.75rem;
   margin-left: 0.75rem;
 }
 
-.c23 {
+.c25 {
   margin-top: 1.875rem;
 }
 
-.c28 {
+.c30 {
   margin-bottom: 0.75rem;
 }
 
-.c26 {
+.c28 {
   padding: 8rem;
 }
 
+.c18 {
+  font-family: sans-serif;
+  font-size: 100%;
+  line-height: 1.15;
+  margin: 0;
+  overflow: visible;
+}
+
+.c18[type='checkbox'],
+.c18[type='radio'] {
+  box-sizing: border-box;
+  padding: 0;
+}
+
+.c18[type='number']::-webkit-inner-spin-button,
+.c18[type='number']::-webkit-outer-spin-button {
+  height: auto;
+}
+
+.c18[type='search'] {
+  -webkit-appearance: textfield;
+  -moz-appearance: textfield;
+  appearance: textfield;
+  outline-offset: -0.125rem;
+}
+
+.c18[type='search']::-webkit-search-cancel-button,
+.c18[type='search']::-webkit-search-decoration {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+}
+
+.c18::-webkit-file-upload-button {
+  -webkit-appearance: button;
+  -moz-appearance: button;
+  appearance: button;
+  font: inherit;
+}
+
 .c6 {
   color: rgb(73,73,73);
   margin: 0;
@@ -3369,7 +3562,7 @@ exports[`renders <Firewall loadingError /> without throwing 1`] = `
   font-size: 0.9375rem;
 }
 
-.c16 {
+.c22 {
   font-size: 0.9375rem;
   line-height: 1.125rem;
   font-style: normal;
@@ -3420,7 +3613,7 @@ exports[`renders <Firewall loadingError /> without throwing 1`] = `
   padding-bottom: 1.125rem;
 }
 
-.c30 {
+.c32 {
   margin: 0;
   color: rgb(73,73,73);
   font-weight: normal;
@@ -3436,36 +3629,12 @@ exports[`renders <Firewall loadingError /> without throwing 1`] = `
   font-size: 0.9375rem;
 }
 
-.c22 {
+.c24 {
   height: 1px;
   background-color: rgb(216,216,216);
 }
 
-.c14 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-align-content: stretch;
-  -ms-flex-line-pack: stretch;
-  align-content: stretch;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.c27 {
+.c29 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -3525,7 +3694,7 @@ exports[`renders <Firewall loadingError /> without throwing 1`] = `
   font-size: 0.8125rem;
 }
 
-.c25 {
+.c27 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -3547,7 +3716,124 @@ exports[`renders <Firewall loadingError /> without throwing 1`] = `
   border-color: rgb(216,216,216);
 }
 
-.c13 {
+.c17 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  display: none;
+}
+
+.c17:checked + label::after {
+  opacity: 1;
+}
+
+.c17:selected + label::after {
+  opacity: 1;
+}
+
+.c17:checked + label {
+  border-color: rgb(59,70,204);
+}
+
+.c17:selected + label {
+  border-color: rgb(59,70,204);
+}
+
+.c17:disabled + label {
+  background-color: rgb(249,249,249);
+  cursor: not-allowed;
+}
+
+.c19 {
+  color: rgb(100,100,100);
+  position: absolute;
+  width: 1.125rem;
+  height: 1.125rem;
+  box-sizing: border-box;
+  top: 0;
+  right: 0;
+  cursor: pointer;
+  background-color: rgb(255,255,255);
+  box-shadow: none;
+  border: 0.0625rem solid rgb(216,216,216);
+  cursor: pointer;
+  border-radius: 0.25rem;
+  width: 1.125rem;
+  height: 1.125rem;
+}
+
+.c19::after {
+  opacity: 0;
+  content: '';
+  position: absolute;
+  width: 0.375rem;
+  height: 0.125rem;
+  background: transparent;
+  top: 0.3125rem;
+  left: 0.25rem;
+  border: 0.125rem solid rgb(45,45,45);
+  border-top: none;
+  border-right: none;
+  -webkit-transform: rotate(-45deg);
+  -ms-transform: rotate(-45deg);
+  transform: rotate(-45deg);
+}
+
+.c16 {
+  display: inline-block;
+  vertical-align: text-bottom;
+  width: 1.125rem;
+  height: 1.125rem;
+  position: relative;
+  cursor: pointer;
+}
+
+.c20 label {
+  font-weight: normal;
+  font-size: 0.9375rem;
+}
+
+.c15 {
+  list-style-type: none;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-align-content: center;
+  -ms-flex-line-pack: center;
+  align-content: center;
+  height: 1.5rem;
+}
+
+.c15 label {
+  font-weight: 400;
+}
+
+.c15 label::after {
+  width: 0.475rem;
+  height: 0.205rem;
+  top: 0.4125rem;
+  left: 0.35rem;
+}
+
+.c15 div[type='checkbox'],
+.c15 div[type='checkbox'] input,
+.c15 div[type='checkbox'] label {
+  height: 1.5rem;
+  width: 1.5rem;
+}
+
+.c14 {
   display: inline-block;
   padding: 0;
   border: none;
@@ -3559,125 +3845,26 @@ exports[`renders <Firewall loadingError /> without throwing 1`] = `
   -webkit-padding-after: 0;
 }
 
-.c15 {
-  font-weight: 600;
-  white-space: pre;
-  font-size: 0.8125rem;
-  font-size: 0.9375rem;
-}
-
 .c21 {
   font-weight: 600;
   white-space: pre;
   font-size: 0.8125rem;
-}
-
-.c18 {
-  position: relative;
-  vertical-align: text-bottom;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.c19 {
-  display: none;
-}
-
-.c19:checked + label {
-  background: #3B46CC;
-  border: 0.0625rem solid rgb(59,70,204);
-}
-
-.c19:checked + label:after {
-  -webkit-transform: translateX(100%);
-  -ms-transform: translateX(100%);
-  transform: translateX(100%);
-  box-shadow: 0 0 0 0.0625rem rgb(59,70,204);
-}
-
-.c19:checked + label:active {
-  box-shadow: none;
-}
-
-.c20 {
-  outline: 0;
-  display: block;
-  width: 2.875rem;
-  height: 1.5rem;
-  position: relative;
   cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  box-sizing: border-box;
-  background: rgb(250,250,250);
-  border-radius: 1.4375rem;
-  -webkit-transition: all 0.3s ease;
-  transition: all 0.3s ease;
-  border: 0.0625rem solid rgb(216,216,216);
 }
 
-.c20::selection {
-  background: none;
-}
-
-.c20:active {
-  box-shadow: inset 0 0 0 1.5rem rgb(216,216,216);
-}
-
-.c20:hover {
-  border: 0.0625rem solid rgb(59,70,204);
-}
-
-.c20:hover:after {
-  box-shadow: 0 0 0 0.0625rem rgb(59,70,204);
-}
-
-.c20:after,
-.c20:before {
-  position: relative;
-  display: block;
-  content: '';
-  width: 50%;
-  height: 100%;
-}
-
-.c20:after {
-  -webkit-transform: translateX(0%);
-  -ms-transform: translateX(0%);
-  transform: translateX(0%);
-  border-radius: 50%;
-  background: rgb(255,255,255);
-  -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275);
-  -webkit-transition: transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275);
-  transition: transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275);
-  box-shadow: 0 0 0 0.0625rem rgb(216,216,216);
-}
-
-.c20:active {
-  box-shadow: inset 0 0 0 2em rgb(216,216,216);
-}
-
-.c20:before {
-  display: none;
-}
-
-.c29 {
+.c31 {
   color: rgb(151,151,151);
   text-align: center;
 }
 
-.c24 {
+.c26 {
   width: calc(100% - 0.125rem);
 }
 
+.c13 {
+  margin-bottom: 0 !important;
+}
+
 .c5 {
   font-weight: 200;
 }
@@ -3782,80 +3969,82 @@ exports[`renders <Firewall loadingError /> without throwing 1`] = `
     className="c7"
   >
     <form
+      className="c13"
       onChange={[Function]}
     >
       <div
-        className="c13"
+        className="c14"
         name="enabled"
         role="group"
         style={undefined}
         type="checkbox"
       >
-        <div
-          className="c14"
+        <li
+          className="c15"
         >
-          <label
-            className="c15 c16"
-            htmlFor="q"
-          >
-            Enable Firewall
-          </label>
           <div
-            className="c17"
+            checked={false}
+            className="c16"
+            disabled={false}
+            id="w"
+            onBlur={undefined}
+            type="checkbox"
           >
-            <div
-              className="c18"
-            >
-              <input
-                checked={undefined}
-                className="c19"
-                disabled={false}
-                id="q"
-                onBlur={undefined}
-                type="checkbox"
-              />
-              <label
-                className="c20"
-                disabled={false}
-                htmlFor="q"
-                id="q"
-                onBlur={undefined}
-              />
-              <label
-                className="c21 c16"
-                disabled={false}
-                htmlFor="q"
-                id="q"
-                onBlur={undefined}
-              >
-                 
-              </label>
-            </div>
+            <input
+              checked={false}
+              className="c17 c18"
+              disabled={false}
+              id="x"
+              onBlur={undefined}
+              type="checkbox"
+            />
+            <label
+              className="c19"
+              htmlFor="x"
+            />
           </div>
-        </div>
+          <div
+            checked={false}
+            className="c20"
+            disabled={false}
+            id="w"
+            onBlur={undefined}
+          >
+            <label
+              className="c21 c22"
+              htmlFor="x"
+            >
+              <div
+                className="c23"
+              >
+                Enable Firewall
+              </div>
+            </label>
+          </div>
+        </li>
       </div>
     </form>
   </div>
   <div
-    className="c22 c3"
+    className="c24 c3"
     height="0.0625rem"
   />
   <div
-    className="c23"
+    className="c25"
   >
     <div
-      className="c24 c25"
+      className="c26 c27"
       disabled={false}
       name="card"
     >
       <div
-        className="c26"
+        className="c28"
       >
         <div
-          className="c27"
+          className="c29"
         >
           <div
-            className="c28"
+            className="c30"
           >
             <svg
               height={60}
@@ -4082,7 +4271,7 @@ exports[`renders <Firewall loadingError /> without throwing 1`] = `
             </svg>
           </div>
           <h3
-            className="c29 c30"
+            className="c31 c32"
           >
             Sorry, but we weren’t able to find any firewall rules.
           </h3>
@@ -4102,22 +4291,63 @@ exports[`renders <Firewall mutationError /> without throwing 1`] = `
   margin-bottom: 1.875rem;
 }
 
-.c17 {
+.c23 {
+  margin-right: 0.75rem;
   margin-left: 0.75rem;
 }
 
-.c23 {
+.c25 {
   margin-top: 1.875rem;
 }
 
-.c28 {
+.c30 {
   margin-bottom: 0.75rem;
 }
 
-.c26 {
+.c28 {
   padding: 8rem;
 }
 
+.c18 {
+  font-family: sans-serif;
+  font-size: 100%;
+  line-height: 1.15;
+  margin: 0;
+  overflow: visible;
+}
+
+.c18[type='checkbox'],
+.c18[type='radio'] {
+  box-sizing: border-box;
+  padding: 0;
+}
+
+.c18[type='number']::-webkit-inner-spin-button,
+.c18[type='number']::-webkit-outer-spin-button {
+  height: auto;
+}
+
+.c18[type='search'] {
+  -webkit-appearance: textfield;
+  -moz-appearance: textfield;
+  appearance: textfield;
+  outline-offset: -0.125rem;
+}
+
+.c18[type='search']::-webkit-search-cancel-button,
+.c18[type='search']::-webkit-search-decoration {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+}
+
+.c18::-webkit-file-upload-button {
+  -webkit-appearance: button;
+  -moz-appearance: button;
+  appearance: button;
+  font: inherit;
+}
+
 .c6 {
   color: rgb(73,73,73);
   margin: 0;
@@ -4125,7 +4355,7 @@ exports[`renders <Firewall mutationError /> without throwing 1`] = `
   font-size: 0.9375rem;
 }
 
-.c16 {
+.c22 {
   font-size: 0.9375rem;
   line-height: 1.125rem;
   font-style: normal;
@@ -4176,7 +4406,7 @@ exports[`renders <Firewall mutationError /> without throwing 1`] = `
   padding-bottom: 1.125rem;
 }
 
-.c30 {
+.c32 {
   margin: 0;
   color: rgb(73,73,73);
   font-weight: normal;
@@ -4192,36 +4422,12 @@ exports[`renders <Firewall mutationError /> without throwing 1`] = `
   font-size: 0.9375rem;
 }
 
-.c22 {
+.c24 {
   height: 1px;
   background-color: rgb(216,216,216);
 }
 
-.c14 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-align-content: stretch;
-  -ms-flex-line-pack: stretch;
-  align-content: stretch;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.c27 {
+.c29 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -4281,7 +4487,7 @@ exports[`renders <Firewall mutationError /> without throwing 1`] = `
   font-size: 0.8125rem;
 }
 
-.c25 {
+.c27 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -4303,7 +4509,124 @@ exports[`renders <Firewall mutationError /> without throwing 1`] = `
   border-color: rgb(216,216,216);
 }
 
-.c13 {
+.c17 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  display: none;
+}
+
+.c17:checked + label::after {
+  opacity: 1;
+}
+
+.c17:selected + label::after {
+  opacity: 1;
+}
+
+.c17:checked + label {
+  border-color: rgb(59,70,204);
+}
+
+.c17:selected + label {
+  border-color: rgb(59,70,204);
+}
+
+.c17:disabled + label {
+  background-color: rgb(249,249,249);
+  cursor: not-allowed;
+}
+
+.c19 {
+  color: rgb(100,100,100);
+  position: absolute;
+  width: 1.125rem;
+  height: 1.125rem;
+  box-sizing: border-box;
+  top: 0;
+  right: 0;
+  cursor: pointer;
+  background-color: rgb(255,255,255);
+  box-shadow: none;
+  border: 0.0625rem solid rgb(216,216,216);
+  cursor: pointer;
+  border-radius: 0.25rem;
+  width: 1.125rem;
+  height: 1.125rem;
+}
+
+.c19::after {
+  opacity: 0;
+  content: '';
+  position: absolute;
+  width: 0.375rem;
+  height: 0.125rem;
+  background: transparent;
+  top: 0.3125rem;
+  left: 0.25rem;
+  border: 0.125rem solid rgb(45,45,45);
+  border-top: none;
+  border-right: none;
+  -webkit-transform: rotate(-45deg);
+  -ms-transform: rotate(-45deg);
+  transform: rotate(-45deg);
+}
+
+.c16 {
+  display: inline-block;
+  vertical-align: text-bottom;
+  width: 1.125rem;
+  height: 1.125rem;
+  position: relative;
+  cursor: pointer;
+}
+
+.c20 label {
+  font-weight: normal;
+  font-size: 0.9375rem;
+}
+
+.c15 {
+  list-style-type: none;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-align-content: center;
+  -ms-flex-line-pack: center;
+  align-content: center;
+  height: 1.5rem;
+}
+
+.c15 label {
+  font-weight: 400;
+}
+
+.c15 label::after {
+  width: 0.475rem;
+  height: 0.205rem;
+  top: 0.4125rem;
+  left: 0.35rem;
+}
+
+.c15 div[type='checkbox'],
+.c15 div[type='checkbox'] input,
+.c15 div[type='checkbox'] label {
+  height: 1.5rem;
+  width: 1.5rem;
+}
+
+.c14 {
   display: inline-block;
   padding: 0;
   border: none;
@@ -4315,125 +4638,26 @@ exports[`renders <Firewall mutationError /> without throwing 1`] = `
   -webkit-padding-after: 0;
 }
 
-.c15 {
-  font-weight: 600;
-  white-space: pre;
-  font-size: 0.8125rem;
-  font-size: 0.9375rem;
-}
-
 .c21 {
   font-weight: 600;
   white-space: pre;
   font-size: 0.8125rem;
-}
-
-.c18 {
-  position: relative;
-  vertical-align: text-bottom;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.c19 {
-  display: none;
-}
-
-.c19:checked + label {
-  background: #3B46CC;
-  border: 0.0625rem solid rgb(59,70,204);
-}
-
-.c19:checked + label:after {
-  -webkit-transform: translateX(100%);
-  -ms-transform: translateX(100%);
-  transform: translateX(100%);
-  box-shadow: 0 0 0 0.0625rem rgb(59,70,204);
-}
-
-.c19:checked + label:active {
-  box-shadow: none;
-}
-
-.c20 {
-  outline: 0;
-  display: block;
-  width: 2.875rem;
-  height: 1.5rem;
-  position: relative;
   cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  box-sizing: border-box;
-  background: rgb(250,250,250);
-  border-radius: 1.4375rem;
-  -webkit-transition: all 0.3s ease;
-  transition: all 0.3s ease;
-  border: 0.0625rem solid rgb(216,216,216);
 }
 
-.c20::selection {
-  background: none;
-}
-
-.c20:active {
-  box-shadow: inset 0 0 0 1.5rem rgb(216,216,216);
-}
-
-.c20:hover {
-  border: 0.0625rem solid rgb(59,70,204);
-}
-
-.c20:hover:after {
-  box-shadow: 0 0 0 0.0625rem rgb(59,70,204);
-}
-
-.c20:after,
-.c20:before {
-  position: relative;
-  display: block;
-  content: '';
-  width: 50%;
-  height: 100%;
-}
-
-.c20:after {
-  -webkit-transform: translateX(0%);
-  -ms-transform: translateX(0%);
-  transform: translateX(0%);
-  border-radius: 50%;
-  background: rgb(255,255,255);
-  -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275);
-  -webkit-transition: transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275);
-  transition: transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275);
-  box-shadow: 0 0 0 0.0625rem rgb(216,216,216);
-}
-
-.c20:active {
-  box-shadow: inset 0 0 0 2em rgb(216,216,216);
-}
-
-.c20:before {
-  display: none;
-}
-
-.c29 {
+.c31 {
   color: rgb(151,151,151);
   text-align: center;
 }
 
-.c24 {
+.c26 {
   width: calc(100% - 0.125rem);
 }
 
+.c13 {
+  margin-bottom: 0 !important;
+}
+
 .c5 {
   font-weight: 200;
 }
@@ -4538,80 +4762,82 @@ exports[`renders <Firewall mutationError /> without throwing 1`] = `
     className="c7"
   >
     <form
+      className="c13"
       onChange={[Function]}
     >
       <div
-        className="c13"
+        className="c14"
         name="enabled"
         role="group"
         style={undefined}
         type="checkbox"
       >
-        <div
-          className="c14"
+        <li
+          className="c15"
         >
-          <label
-            className="c15 c16"
-            htmlFor="r"
-          >
-            Enable Firewall
-          </label>
           <div
-            className="c17"
+            checked={false}
+            className="c16"
+            disabled={false}
+            id="y"
+            onBlur={undefined}
+            type="checkbox"
           >
-            <div
-              className="c18"
-            >
-              <input
-                checked={undefined}
-                className="c19"
-                disabled={false}
-                id="r"
-                onBlur={undefined}
-                type="checkbox"
-              />
-              <label
-                className="c20"
-                disabled={false}
-                htmlFor="r"
-                id="r"
-                onBlur={undefined}
-              />
-              <label
-                className="c21 c16"
-                disabled={false}
-                htmlFor="r"
-                id="r"
-                onBlur={undefined}
-              >
-                 
-              </label>
-            </div>
+            <input
+              checked={false}
+              className="c17 c18"
+              disabled={false}
+              id="z"
+              onBlur={undefined}
+              type="checkbox"
+            />
+            <label
+              className="c19"
+              htmlFor="z"
+            />
           </div>
-        </div>
+          <div
+            checked={false}
+            className="c20"
+            disabled={false}
+            id="y"
+            onBlur={undefined}
+          >
+            <label
+              className="c21 c22"
+              htmlFor="z"
+            >
+              <div
+                className="c23"
+              >
+                Enable Firewall
+              </div>
+            </label>
+          </div>
+        </li>
       </div>
     </form>
   </div>
   <div
-    className="c22 c3"
+    className="c24 c3"
     height="0.0625rem"
   />
   <div
-    className="c23"
+    className="c25"
   >
     <div
-      className="c24 c25"
+      className="c26 c27"
       disabled={false}
       name="card"
     >
       <div
-        className="c26"
+        className="c28"
       >
         <div
-          className="c27"
+          className="c29"
         >
           <div
-            className="c28"
+            className="c30"
           >
             <svg
               height={60}
@@ -4838,7 +5064,7 @@ exports[`renders <Firewall mutationError /> without throwing 1`] = `
             </svg>
           </div>
           <h3
-            className="c29 c30"
+            className="c31 c32"
           >
             Sorry, but we weren’t able to find any firewall rules.
           </h3>
@@ -4859,763 +5085,874 @@ Array [
   margin-bottom: 1.875rem;
 }
 
-.c12 {
-  margin-left: 0.75rem;
-}
-
-.c6 {
-  color: rgb(73,73,73);
-  margin: 0;
-  line-height: 1.5rem;
-  font-size: 0.9375rem;
-}
-
-.c11 {
-  font-size: 0.9375rem;
-  line-height: 1.125rem;
-  font-style: normal;
-  font-stretch: normal;
-  display: block;
-  color: rgb(70,70,70);
-  text-align: left;
-}
-
-.c1 {
-  margin-right: auto;
-  margin-left: auto;
-}
-
-.c3 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 1 1 auto;
-  -ms-flex: 1 1 auto;
-  flex: 1 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.625rem;
-  margin-left: -0.625rem;
-}
-
-.c4 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.625rem;
-  padding-left: 0.625rem;
-  display: block;
-}
-
-.c0 {
-  box-sizing: border-box;
-  width: 100%;
-  max-width: 62.5rem;
-  padding-bottom: 1.125rem;
-}
-
-.c17 {
-  height: 1px;
-  background-color: rgb(216,216,216);
-}
-
-.c9 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-align-content: stretch;
-  -ms-flex-line-pack: stretch;
-  align-content: stretch;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.c8 {
-  display: inline-block;
-  padding: 0;
-  border: none;
-  overflow: hidden;
-  height: auto;
-  -webkit-padding-before: 0;
-  -webkit-padding-start: 0;
-  -webkit-padding-end: 0;
-  -webkit-padding-after: 0;
-}
-
-.c10 {
-  font-weight: 600;
-  white-space: pre;
-  font-size: 0.8125rem;
-  font-size: 0.9375rem;
-}
-
-.c16 {
-  font-weight: 600;
-  white-space: pre;
-  font-size: 0.8125rem;
-}
-
-.c13 {
-  position: relative;
-  vertical-align: text-bottom;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.c14 {
-  display: none;
-}
-
-.c14:checked + label {
-  background: #3B46CC;
-  border: 0.0625rem solid rgb(59,70,204);
-}
-
-.c14:checked + label:after {
-  -webkit-transform: translateX(100%);
-  -ms-transform: translateX(100%);
-  transform: translateX(100%);
-  box-shadow: 0 0 0 0.0625rem rgb(59,70,204);
-}
-
-.c14:checked + label:active {
-  box-shadow: none;
-}
-
-.c15 {
-  outline: 0;
-  display: block;
-  width: 2.875rem;
-  height: 1.5rem;
-  position: relative;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  box-sizing: border-box;
-  background: rgb(250,250,250);
-  border-radius: 1.4375rem;
-  -webkit-transition: all 0.3s ease;
-  transition: all 0.3s ease;
-  border: 0.0625rem solid rgb(216,216,216);
-}
-
-.c15::selection {
-  background: none;
-}
-
-.c15:active {
-  box-shadow: inset 0 0 0 1.5rem rgb(216,216,216);
-}
-
-.c15:hover {
-  border: 0.0625rem solid rgb(59,70,204);
-}
-
-.c15:hover:after {
-  box-shadow: 0 0 0 0.0625rem rgb(59,70,204);
-}
-
-.c15:after,
-.c15:before {
-  position: relative;
-  display: block;
-  content: '';
-  width: 50%;
-  height: 100%;
-}
-
-.c15:after {
-  -webkit-transform: translateX(0%);
-  -ms-transform: translateX(0%);
-  transform: translateX(0%);
-  border-radius: 50%;
-  background: rgb(255,255,255);
-  -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275);
-  -webkit-transition: transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275);
-  transition: transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275);
-  box-shadow: 0 0 0 0.0625rem rgb(216,216,216);
-}
-
-.c15:active {
-  box-shadow: inset 0 0 0 2em rgb(216,216,216);
-}
-
-.c15:before {
-  display: none;
-}
-
-.c5 {
-  font-weight: 200;
-}
-
-@media only screen and (min-width:48em) {
-  .c1 {
-    width: 46rem;
-  }
-}
-
-@media only screen and (min-width:64em) {
-  .c1 {
-    width: 56rem;
-  }
-}
-
-@media only screen and (min-width:75em) {
-  .c1 {
-    width: 59rem;
-  }
-}
-
-@media only screen and (min-width:0em) {
-  .c4 {
-    -webkit-flex-basis: 100%;
-    -ms-flex-preferred-size: 100%;
-    flex-basis: 100%;
-    max-width: 100%;
-  }
-}
-
-@media only screen and (min-width:48em) {
-  .c4 {
-    -webkit-flex-basis: 58.333333333333336%;
-    -ms-flex-preferred-size: 58.333333333333336%;
-    flex-basis: 58.333333333333336%;
-    max-width: 58.333333333333336%;
-  }
-}
-
-@media only screen and (max-width:47.9375rem) {
-  .c0 {
-    padding-left: 0.375rem;
-    padding-right: 0.375rem;
-  }
-}
-
-<div
-    className="c0 c1"
->
-    <div
-        className="c2"
-    >
-        <div
-            className="c3"
-        >
-            <div
-                className="c4"
-            >
-                <p
-                    className="c5 c6"
-                >
-                    Cloud Firewall rules control traffic across instances. Enabling the firewall adds a default set of rules and rules defined by your chosen tags.
-                     
-                    <a
-                        href="https://docs.joyent.com/private-cloud/install/cns"
-                        rel="noopener noreferrer"
-                        target="__blank"
-                    >
-                        Read the docs
-                    </a>
-                </p>
-            </div>
-        </div>
-    </div>
-    <div
-        className="c7"
-    >
-        <form
-            onChange={[Function]}
-        >
-            <div
-                className="c8"
-                name="enabled"
-                role="group"
-                style={undefined}
-                type="checkbox"
-            >
-                <div
-                    className="c9"
-                >
-                    <label
-                        className="c10 c11"
-                        htmlFor="s"
-                    >
-                        Enable Firewall
-                    </label>
-                    <div
-                        className="c12"
-                    >
-                        <div
-                            className="c13"
-                        >
-                            <input
-                                checked={undefined}
-                                className="c14"
-                                disabled={false}
-                                id="s"
-                                onBlur={undefined}
-                                type="checkbox"
-                            />
-                            <label
-                                className="c15"
-                                disabled={false}
-                                htmlFor="s"
-                                id="s"
-                                onBlur={undefined}
-                            />
-                            <label
-                                className="c16 c11"
-                                disabled={false}
-                                htmlFor="s"
-                                id="s"
-                                onBlur={undefined}
-                            >
-                                 
-                            </label>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </form>
-    </div>
-    <div
-        className="c17 c3"
-        height="0.0625rem"
-    />
-</div>,
-  .c2 {
-  margin-bottom: 1.125rem;
-}
-
-.c7 {
-  margin-bottom: 1.875rem;
-}
-
-.c12 {
-  margin-left: 0.75rem;
-}
-
-.c6 {
-  color: rgb(73,73,73);
-  margin: 0;
-  line-height: 1.5rem;
-  font-size: 0.9375rem;
-}
-
-.c11 {
-  font-size: 0.9375rem;
-  line-height: 1.125rem;
-  font-style: normal;
-  font-stretch: normal;
-  display: block;
-  color: rgb(70,70,70);
-  text-align: left;
-}
-
-.c1 {
-  margin-right: auto;
-  margin-left: auto;
-}
-
-.c3 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 1 1 auto;
-  -ms-flex: 1 1 auto;
-  flex: 1 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.625rem;
-  margin-left: -0.625rem;
-}
-
-.c4 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.625rem;
-  padding-left: 0.625rem;
-  display: block;
-}
-
-.c0 {
-  box-sizing: border-box;
-  width: 100%;
-  max-width: 62.5rem;
-  padding-bottom: 1.125rem;
-}
-
-.c17 {
-  height: 1px;
-  background-color: rgb(216,216,216);
-}
-
-.c9 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-align-content: stretch;
-  -ms-flex-line-pack: stretch;
-  align-content: stretch;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.c8 {
-  display: inline-block;
-  padding: 0;
-  border: none;
-  overflow: hidden;
-  height: auto;
-  -webkit-padding-before: 0;
-  -webkit-padding-start: 0;
-  -webkit-padding-end: 0;
-  -webkit-padding-after: 0;
-}
-
-.c10 {
-  font-weight: 600;
-  white-space: pre;
-  font-size: 0.8125rem;
-  font-size: 0.9375rem;
-}
-
-.c16 {
-  font-weight: 600;
-  white-space: pre;
-  font-size: 0.8125rem;
-}
-
-.c13 {
-  position: relative;
-  vertical-align: text-bottom;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.c14 {
-  display: none;
-}
-
-.c14:checked + label {
-  background: #3B46CC;
-  border: 0.0625rem solid rgb(59,70,204);
-}
-
-.c14:checked + label:after {
-  -webkit-transform: translateX(100%);
-  -ms-transform: translateX(100%);
-  transform: translateX(100%);
-  box-shadow: 0 0 0 0.0625rem rgb(59,70,204);
-}
-
-.c14:checked + label:active {
-  box-shadow: none;
-}
-
-.c15 {
-  outline: 0;
-  display: block;
-  width: 2.875rem;
-  height: 1.5rem;
-  position: relative;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  box-sizing: border-box;
-  background: rgb(250,250,250);
-  border-radius: 1.4375rem;
-  -webkit-transition: all 0.3s ease;
-  transition: all 0.3s ease;
-  border: 0.0625rem solid rgb(216,216,216);
-}
-
-.c15::selection {
-  background: none;
-}
-
-.c15:active {
-  box-shadow: inset 0 0 0 1.5rem rgb(216,216,216);
-}
-
-.c15:hover {
-  border: 0.0625rem solid rgb(59,70,204);
-}
-
-.c15:hover:after {
-  box-shadow: 0 0 0 0.0625rem rgb(59,70,204);
-}
-
-.c15:after,
-.c15:before {
-  position: relative;
-  display: block;
-  content: '';
-  width: 50%;
-  height: 100%;
-}
-
-.c15:after {
-  -webkit-transform: translateX(0%);
-  -ms-transform: translateX(0%);
-  transform: translateX(0%);
-  border-radius: 50%;
-  background: rgb(255,255,255);
-  -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275);
-  -webkit-transition: transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275);
-  transition: transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275);
-  box-shadow: 0 0 0 0.0625rem rgb(216,216,216);
-}
-
-.c15:active {
-  box-shadow: inset 0 0 0 2em rgb(216,216,216);
-}
-
-.c15:before {
-  display: none;
-}
-
-.c5 {
-  font-weight: 200;
-}
-
-@media only screen and (min-width:48em) {
-  .c1 {
-    width: 46rem;
-  }
-}
-
-@media only screen and (min-width:64em) {
-  .c1 {
-    width: 56rem;
-  }
-}
-
-@media only screen and (min-width:75em) {
-  .c1 {
-    width: 59rem;
-  }
-}
-
-@media only screen and (min-width:0em) {
-  .c4 {
-    -webkit-flex-basis: 100%;
-    -ms-flex-preferred-size: 100%;
-    flex-basis: 100%;
-    max-width: 100%;
-  }
-}
-
-@media only screen and (min-width:48em) {
-  .c4 {
-    -webkit-flex-basis: 58.333333333333336%;
-    -ms-flex-preferred-size: 58.333333333333336%;
-    flex-basis: 58.333333333333336%;
-    max-width: 58.333333333333336%;
-  }
-}
-
-@media only screen and (max-width:47.9375rem) {
-  .c0 {
-    padding-left: 0.375rem;
-    padding-right: 0.375rem;
-  }
-}
-
-<div
-    className="c0 c1"
->
-    <div
-        className="c2"
-    >
-        <div
-            className="c3"
-        >
-            <div
-                className="c4"
-            >
-                <p
-                    className="c5 c6"
-                >
-                    Cloud Firewall rules control traffic across instances. Enabling the firewall adds a default set of rules and rules defined by your chosen tags.
-                     
-                    <a
-                        href="https://docs.joyent.com/private-cloud/install/cns"
-                        rel="noopener noreferrer"
-                        target="__blank"
-                    >
-                        Read the docs
-                    </a>
-                </p>
-            </div>
-        </div>
-    </div>
-    <div
-        className="c7"
-    >
-        <form
-            onChange={[Function]}
-        >
-            <div
-                className="c8"
-                name="enabled"
-                role="group"
-                style={undefined}
-                type="checkbox"
-            >
-                <div
-                    className="c9"
-                >
-                    <label
-                        className="c10 c11"
-                        htmlFor="t"
-                    >
-                        Enable Firewall
-                    </label>
-                    <div
-                        className="c12"
-                    >
-                        <div
-                            className="c13"
-                        >
-                            <input
-                                checked={undefined}
-                                className="c14"
-                                disabled={false}
-                                id="t"
-                                onBlur={undefined}
-                                type="checkbox"
-                            />
-                            <label
-                                className="c15"
-                                disabled={false}
-                                htmlFor="t"
-                                id="t"
-                                onBlur={undefined}
-                            />
-                            <label
-                                className="c16 c11"
-                                disabled={false}
-                                htmlFor="t"
-                                id="t"
-                                onBlur={undefined}
-                            >
-                                 
-                            </label>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </form>
-    </div>
-    <div
-        className="c17 c3"
-        height="0.0625rem"
-    />
-</div>,
-  .c2 {
-  margin-bottom: 1.125rem;
-}
-
-.c7 {
-  margin-bottom: 1.875rem;
-}
-
-.c12 {
-  margin-left: 0.75rem;
-}
-
-.c20 {
-  margin-top: 1.875rem;
-}
-
 .c18 {
-  margin-top: 1.5rem;
+  margin-right: 0.75rem;
+  margin-left: 0.75rem;
+}
+
+.c13 {
+  font-family: sans-serif;
+  font-size: 100%;
+  line-height: 1.15;
+  margin: 0;
+  overflow: visible;
+}
+
+.c13[type='checkbox'],
+.c13[type='radio'] {
+  box-sizing: border-box;
+  padding: 0;
+}
+
+.c13[type='number']::-webkit-inner-spin-button,
+.c13[type='number']::-webkit-outer-spin-button {
+  height: auto;
+}
+
+.c13[type='search'] {
+  -webkit-appearance: textfield;
+  -moz-appearance: textfield;
+  appearance: textfield;
+  outline-offset: -0.125rem;
+}
+
+.c13[type='search']::-webkit-search-cancel-button,
+.c13[type='search']::-webkit-search-decoration {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+}
+
+.c13::-webkit-file-upload-button {
+  -webkit-appearance: button;
+  -moz-appearance: button;
+  appearance: button;
+  font: inherit;
+}
+
+.c6 {
+  color: rgb(73,73,73);
+  margin: 0;
+  line-height: 1.5rem;
+  font-size: 0.9375rem;
+}
+
+.c17 {
+  font-size: 0.9375rem;
+  line-height: 1.125rem;
+  font-style: normal;
+  font-stretch: normal;
+  display: block;
+  color: rgb(70,70,70);
+  text-align: left;
+}
+
+.c1 {
+  margin-right: auto;
+  margin-left: auto;
+}
+
+.c3 {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.625rem;
+  margin-left: -0.625rem;
+}
+
+.c4 {
+  box-sizing: border-box;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  padding-right: 0.625rem;
+  padding-left: 0.625rem;
+  display: block;
+}
+
+.c0 {
+  box-sizing: border-box;
+  width: 100%;
+  max-width: 62.5rem;
+  padding-bottom: 1.125rem;
 }
 
 .c19 {
-  margin-right: 0.75rem;
+  height: 1px;
+  background-color: rgb(216,216,216);
 }
 
-.c22 {
-  margin-top: 1.125rem;
+.c12 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  display: none;
+}
+
+.c12:checked + label::after {
+  opacity: 1;
+}
+
+.c12:selected + label::after {
+  opacity: 1;
+}
+
+.c12:checked + label {
+  border-color: rgb(59,70,204);
+}
+
+.c12:selected + label {
+  border-color: rgb(59,70,204);
+}
+
+.c12:disabled + label {
+  background-color: rgb(249,249,249);
+  cursor: not-allowed;
+}
+
+.c14 {
+  color: rgb(100,100,100);
+  position: absolute;
+  width: 1.125rem;
+  height: 1.125rem;
+  box-sizing: border-box;
+  top: 0;
+  right: 0;
+  cursor: pointer;
+  background-color: rgb(255,255,255);
+  box-shadow: none;
+  border: 0.0625rem solid rgb(216,216,216);
+  cursor: pointer;
+  border-radius: 0.25rem;
+  width: 1.125rem;
+  height: 1.125rem;
+}
+
+.c14::after {
+  opacity: 0;
+  content: '';
+  position: absolute;
+  width: 0.375rem;
+  height: 0.125rem;
+  background: transparent;
+  top: 0.3125rem;
+  left: 0.25rem;
+  border: 0.125rem solid rgb(45,45,45);
+  border-top: none;
+  border-right: none;
+  -webkit-transform: rotate(-45deg);
+  -ms-transform: rotate(-45deg);
+  transform: rotate(-45deg);
+}
+
+.c11 {
+  display: inline-block;
+  vertical-align: text-bottom;
+  width: 1.125rem;
+  height: 1.125rem;
+  position: relative;
+  cursor: pointer;
+}
+
+.c15 label {
+  font-weight: normal;
+  font-size: 0.9375rem;
+}
+
+.c10 {
+  list-style-type: none;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-align-content: center;
+  -ms-flex-line-pack: center;
+  align-content: center;
+  height: 1.5rem;
+}
+
+.c10 label {
+  font-weight: 400;
+}
+
+.c10 label::after {
+  width: 0.475rem;
+  height: 0.205rem;
+  top: 0.4125rem;
+  left: 0.35rem;
+}
+
+.c10 div[type='checkbox'],
+.c10 div[type='checkbox'] input,
+.c10 div[type='checkbox'] label {
+  height: 1.5rem;
+  width: 1.5rem;
+}
+
+.c9 {
+  display: inline-block;
+  padding: 0;
+  border: none;
+  overflow: hidden;
+  height: auto;
+  -webkit-padding-before: 0;
+  -webkit-padding-start: 0;
+  -webkit-padding-end: 0;
+  -webkit-padding-after: 0;
+}
+
+.c16 {
+  font-weight: 600;
+  white-space: pre;
+  font-size: 0.8125rem;
+  cursor: pointer;
+}
+
+.c8 {
+  margin-bottom: 0 !important;
+}
+
+.c5 {
+  font-weight: 200;
+}
+
+@media only screen and (min-width:48em) {
+  .c1 {
+    width: 46rem;
+  }
+}
+
+@media only screen and (min-width:64em) {
+  .c1 {
+    width: 56rem;
+  }
+}
+
+@media only screen and (min-width:75em) {
+  .c1 {
+    width: 59rem;
+  }
+}
+
+@media only screen and (min-width:0em) {
+  .c4 {
+    -webkit-flex-basis: 100%;
+    -ms-flex-preferred-size: 100%;
+    flex-basis: 100%;
+    max-width: 100%;
+  }
+}
+
+@media only screen and (min-width:48em) {
+  .c4 {
+    -webkit-flex-basis: 58.333333333333336%;
+    -ms-flex-preferred-size: 58.333333333333336%;
+    flex-basis: 58.333333333333336%;
+    max-width: 58.333333333333336%;
+  }
+}
+
+@media only screen and (max-width:47.9375rem) {
+  .c0 {
+    padding-left: 0.375rem;
+    padding-right: 0.375rem;
+  }
+}
+
+<div
+    className="c0 c1"
+>
+    <div
+        className="c2"
+    >
+        <div
+            className="c3"
+        >
+            <div
+                className="c4"
+            >
+                <p
+                    className="c5 c6"
+                >
+                    Cloud Firewall rules control traffic across instances. Enabling the firewall adds a default set of rules and rules defined by your chosen tags.
+                     
+                    <a
+                        href="https://docs.joyent.com/private-cloud/install/cns"
+                        rel="noopener noreferrer"
+                        target="__blank"
+                    >
+                        Read the docs
+                    </a>
+                </p>
+            </div>
+        </div>
+    </div>
+    <div
+        className="c7"
+    >
+        <form
+            className="c8"
+            onChange={[Function]}
+        >
+            <div
+                className="c9"
+                name="enabled"
+                role="group"
+                style={undefined}
+                type="checkbox"
+            >
+                <li
+                    className="c10"
+                >
+                    <div
+                        checked={false}
+                        className="c11"
+                        disabled={false}
+                        id="A"
+                        onBlur={undefined}
+                        type="checkbox"
+                    >
+                        <input
+                            checked={false}
+                            className="c12 c13"
+                            disabled={false}
+                            id="B"
+                            onBlur={undefined}
+                            type="checkbox"
+                        />
+                        <label
+                            className="c14"
+                            htmlFor="B"
+                        />
+                    </div>
+                    <div
+                        checked={false}
+                        className="c15"
+                        disabled={false}
+                        id="A"
+                        onBlur={undefined}
+                    >
+                        <label
+                            className="c16 c17"
+                            htmlFor="B"
+                        >
+                            <div
+                                className="c18"
+                            >
+                                Enable Firewall
+                            </div>
+                        </label>
+                    </div>
+                </li>
+            </div>
+        </form>
+    </div>
+    <div
+        className="c19 c3"
+        height="0.0625rem"
+    />
+</div>,
+  .c2 {
+  margin-bottom: 1.125rem;
+}
+
+.c7 {
+  margin-bottom: 1.875rem;
+}
+
+.c18 {
+  margin-right: 0.75rem;
+  margin-left: 0.75rem;
+}
+
+.c13 {
+  font-family: sans-serif;
+  font-size: 100%;
+  line-height: 1.15;
+  margin: 0;
+  overflow: visible;
+}
+
+.c13[type='checkbox'],
+.c13[type='radio'] {
+  box-sizing: border-box;
+  padding: 0;
+}
+
+.c13[type='number']::-webkit-inner-spin-button,
+.c13[type='number']::-webkit-outer-spin-button {
+  height: auto;
+}
+
+.c13[type='search'] {
+  -webkit-appearance: textfield;
+  -moz-appearance: textfield;
+  appearance: textfield;
+  outline-offset: -0.125rem;
+}
+
+.c13[type='search']::-webkit-search-cancel-button,
+.c13[type='search']::-webkit-search-decoration {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+}
+
+.c13::-webkit-file-upload-button {
+  -webkit-appearance: button;
+  -moz-appearance: button;
+  appearance: button;
+  font: inherit;
+}
+
+.c6 {
+  color: rgb(73,73,73);
+  margin: 0;
+  line-height: 1.5rem;
+  font-size: 0.9375rem;
+}
+
+.c17 {
+  font-size: 0.9375rem;
+  line-height: 1.125rem;
+  font-style: normal;
+  font-stretch: normal;
+  display: block;
+  color: rgb(70,70,70);
+  text-align: left;
+}
+
+.c1 {
+  margin-right: auto;
+  margin-left: auto;
+}
+
+.c3 {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.625rem;
+  margin-left: -0.625rem;
+}
+
+.c4 {
+  box-sizing: border-box;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  padding-right: 0.625rem;
+  padding-left: 0.625rem;
+  display: block;
+}
+
+.c0 {
+  box-sizing: border-box;
+  width: 100%;
+  max-width: 62.5rem;
+  padding-bottom: 1.125rem;
+}
+
+.c19 {
+  height: 1px;
+  background-color: rgb(216,216,216);
+}
+
+.c12 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  display: none;
+}
+
+.c12:checked + label::after {
+  opacity: 1;
+}
+
+.c12:selected + label::after {
+  opacity: 1;
+}
+
+.c12:checked + label {
+  border-color: rgb(59,70,204);
+}
+
+.c12:selected + label {
+  border-color: rgb(59,70,204);
+}
+
+.c12:disabled + label {
+  background-color: rgb(249,249,249);
+  cursor: not-allowed;
+}
+
+.c14 {
+  color: rgb(100,100,100);
+  position: absolute;
+  width: 1.125rem;
+  height: 1.125rem;
+  box-sizing: border-box;
+  top: 0;
+  right: 0;
+  cursor: pointer;
+  background-color: rgb(255,255,255);
+  box-shadow: none;
+  border: 0.0625rem solid rgb(216,216,216);
+  cursor: pointer;
+  border-radius: 0.25rem;
+  width: 1.125rem;
+  height: 1.125rem;
+}
+
+.c14::after {
+  opacity: 0;
+  content: '';
+  position: absolute;
+  width: 0.375rem;
+  height: 0.125rem;
+  background: transparent;
+  top: 0.3125rem;
+  left: 0.25rem;
+  border: 0.125rem solid rgb(45,45,45);
+  border-top: none;
+  border-right: none;
+  -webkit-transform: rotate(-45deg);
+  -ms-transform: rotate(-45deg);
+  transform: rotate(-45deg);
+}
+
+.c11 {
+  display: inline-block;
+  vertical-align: text-bottom;
+  width: 1.125rem;
+  height: 1.125rem;
+  position: relative;
+  cursor: pointer;
+}
+
+.c15 label {
+  font-weight: normal;
+  font-size: 0.9375rem;
+}
+
+.c10 {
+  list-style-type: none;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-align-content: center;
+  -ms-flex-line-pack: center;
+  align-content: center;
+  height: 1.5rem;
+}
+
+.c10 label {
+  font-weight: 400;
+}
+
+.c10 label::after {
+  width: 0.475rem;
+  height: 0.205rem;
+  top: 0.4125rem;
+  left: 0.35rem;
+}
+
+.c10 div[type='checkbox'],
+.c10 div[type='checkbox'] input,
+.c10 div[type='checkbox'] label {
+  height: 1.5rem;
+  width: 1.5rem;
+}
+
+.c9 {
+  display: inline-block;
+  padding: 0;
+  border: none;
+  overflow: hidden;
+  height: auto;
+  -webkit-padding-before: 0;
+  -webkit-padding-start: 0;
+  -webkit-padding-end: 0;
+  -webkit-padding-after: 0;
+}
+
+.c16 {
+  font-weight: 600;
+  white-space: pre;
+  font-size: 0.8125rem;
+  cursor: pointer;
+}
+
+.c8 {
+  margin-bottom: 0 !important;
+}
+
+.c5 {
+  font-weight: 200;
+}
+
+@media only screen and (min-width:48em) {
+  .c1 {
+    width: 46rem;
+  }
+}
+
+@media only screen and (min-width:64em) {
+  .c1 {
+    width: 56rem;
+  }
+}
+
+@media only screen and (min-width:75em) {
+  .c1 {
+    width: 59rem;
+  }
+}
+
+@media only screen and (min-width:0em) {
+  .c4 {
+    -webkit-flex-basis: 100%;
+    -ms-flex-preferred-size: 100%;
+    flex-basis: 100%;
+    max-width: 100%;
+  }
+}
+
+@media only screen and (min-width:48em) {
+  .c4 {
+    -webkit-flex-basis: 58.333333333333336%;
+    -ms-flex-preferred-size: 58.333333333333336%;
+    flex-basis: 58.333333333333336%;
+    max-width: 58.333333333333336%;
+  }
+}
+
+@media only screen and (max-width:47.9375rem) {
+  .c0 {
+    padding-left: 0.375rem;
+    padding-right: 0.375rem;
+  }
+}
+
+<div
+    className="c0 c1"
+>
+    <div
+        className="c2"
+    >
+        <div
+            className="c3"
+        >
+            <div
+                className="c4"
+            >
+                <p
+                    className="c5 c6"
+                >
+                    Cloud Firewall rules control traffic across instances. Enabling the firewall adds a default set of rules and rules defined by your chosen tags.
+                     
+                    <a
+                        href="https://docs.joyent.com/private-cloud/install/cns"
+                        rel="noopener noreferrer"
+                        target="__blank"
+                    >
+                        Read the docs
+                    </a>
+                </p>
+            </div>
+        </div>
+    </div>
+    <div
+        className="c7"
+    >
+        <form
+            className="c8"
+            onChange={[Function]}
+        >
+            <div
+                className="c9"
+                name="enabled"
+                role="group"
+                style={undefined}
+                type="checkbox"
+            >
+                <li
+                    className="c10"
+                >
+                    <div
+                        checked={false}
+                        className="c11"
+                        disabled={false}
+                        id="C"
+                        onBlur={undefined}
+                        type="checkbox"
+                    >
+                        <input
+                            checked={false}
+                            className="c12 c13"
+                            disabled={false}
+                            id="D"
+                            onBlur={undefined}
+                            type="checkbox"
+                        />
+                        <label
+                            className="c14"
+                            htmlFor="D"
+                        />
+                    </div>
+                    <div
+                        checked={false}
+                        className="c15"
+                        disabled={false}
+                        id="C"
+                        onBlur={undefined}
+                    >
+                        <label
+                            className="c16 c17"
+                            htmlFor="D"
+                        >
+                            <div
+                                className="c18"
+                            >
+                                Enable Firewall
+                            </div>
+                        </label>
+                    </div>
+                </li>
+            </div>
+        </form>
+    </div>
+    <div
+        className="c19 c3"
+        height="0.0625rem"
+    />
+</div>,
+  .c2 {
+  margin-bottom: 1.125rem;
+}
+
+.c7 {
+  margin-bottom: 1.875rem;
+}
+
+.c18 {
+  margin-right: 0.75rem;
+  margin-left: 0.75rem;
+}
+
+.c21 {
+  margin-top: 1.875rem;
+}
+
+.c20 {
+  margin-top: 1.5rem;
 }
 
 .c23 {
+  margin-top: 1.125rem;
+}
+
+.c24 {
   margin-bottom: 0rem;
 }
 
-.c28 {
+.c29 {
   margin-right: 0.1875rem;
 }
 
-.c31 {
+.c33 {
   margin-left: 0.1875rem;
 }
 
-.c25 {
+.c26 {
   padding-top: 0.75rem;
   padding-right: 1.125rem;
   padding-bottom: 0.75rem;
   padding-left: 1.125rem;
 }
 
+.c13 {
+  font-family: sans-serif;
+  font-size: 100%;
+  line-height: 1.15;
+  margin: 0;
+  overflow: visible;
+}
+
+.c13[type='checkbox'],
+.c13[type='radio'] {
+  box-sizing: border-box;
+  padding: 0;
+}
+
+.c13[type='number']::-webkit-inner-spin-button,
+.c13[type='number']::-webkit-outer-spin-button {
+  height: auto;
+}
+
+.c13[type='search'] {
+  -webkit-appearance: textfield;
+  -moz-appearance: textfield;
+  appearance: textfield;
+  outline-offset: -0.125rem;
+}
+
+.c13[type='search']::-webkit-search-cancel-button,
+.c13[type='search']::-webkit-search-decoration {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+}
+
+.c13::-webkit-file-upload-button {
+  -webkit-appearance: button;
+  -moz-appearance: button;
+  appearance: button;
+  font: inherit;
+}
+
 .c6 {
   color: rgb(73,73,73);
   margin: 0;
@@ -5623,7 +5960,7 @@ Array [
   font-size: 0.9375rem;
 }
 
-.c11 {
+.c17 {
   font-size: 0.9375rem;
   line-height: 1.125rem;
   font-style: normal;
@@ -5667,7 +6004,7 @@ Array [
   display: block;
 }
 
-.c26 {
+.c27 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -5677,7 +6014,7 @@ Array [
   display: block;
 }
 
-.c35 {
+.c37 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -5694,7 +6031,7 @@ Array [
   padding-bottom: 1.125rem;
 }
 
-.c21 {
+.c22 {
   margin: 0;
   color: rgb(73,73,73);
   font-weight: normal;
@@ -5702,43 +6039,19 @@ Array [
   font-size: 1.3125rem;
 }
 
-.c30 {
+.c31 {
   color: rgb(73,73,73);
   font-weight: 700;
   line-height: 1.5rem;
   font-size: 0.9375rem;
 }
 
-.c17 {
+.c19 {
   height: 1px;
   background-color: rgb(216,216,216);
 }
 
-.c9 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-align-content: stretch;
-  -ms-flex-line-pack: stretch;
-  align-content: stretch;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.c27 {
+.c28 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -5774,7 +6087,31 @@ Array [
   flex-basis: 100%;
 }
 
-.c29 {
+.c32 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  -webkit-align-content: stretch;
+  -ms-flex-line-pack: stretch;
+  align-content: stretch;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.c30 {
   -webkit-order: 0;
   -ms-flex-order: 0;
   order: 0;
@@ -5791,7 +6128,7 @@ Array [
   display: block;
 }
 
-.c24 {
+.c25 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -5817,7 +6154,124 @@ Array [
   cursor: default;
 }
 
-.c8 {
+.c12 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  display: none;
+}
+
+.c12:checked + label::after {
+  opacity: 1;
+}
+
+.c12:selected + label::after {
+  opacity: 1;
+}
+
+.c12:checked + label {
+  border-color: rgb(59,70,204);
+}
+
+.c12:selected + label {
+  border-color: rgb(59,70,204);
+}
+
+.c12:disabled + label {
+  background-color: rgb(249,249,249);
+  cursor: not-allowed;
+}
+
+.c14 {
+  color: rgb(100,100,100);
+  position: absolute;
+  width: 1.125rem;
+  height: 1.125rem;
+  box-sizing: border-box;
+  top: 0;
+  right: 0;
+  cursor: pointer;
+  background-color: rgb(255,255,255);
+  box-shadow: none;
+  border: 0.0625rem solid rgb(216,216,216);
+  cursor: pointer;
+  border-radius: 0.25rem;
+  width: 1.125rem;
+  height: 1.125rem;
+}
+
+.c14::after {
+  opacity: 0;
+  content: '';
+  position: absolute;
+  width: 0.375rem;
+  height: 0.125rem;
+  background: transparent;
+  top: 0.3125rem;
+  left: 0.25rem;
+  border: 0.125rem solid rgb(45,45,45);
+  border-top: none;
+  border-right: none;
+  -webkit-transform: rotate(-45deg);
+  -ms-transform: rotate(-45deg);
+  transform: rotate(-45deg);
+}
+
+.c11 {
+  display: inline-block;
+  vertical-align: text-bottom;
+  width: 1.125rem;
+  height: 1.125rem;
+  position: relative;
+  cursor: pointer;
+}
+
+.c15 label {
+  font-weight: normal;
+  font-size: 0.9375rem;
+}
+
+.c10 {
+  list-style-type: none;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-align-content: center;
+  -ms-flex-line-pack: center;
+  align-content: center;
+  height: 1.5rem;
+}
+
+.c10 label {
+  font-weight: 400;
+}
+
+.c10 label::after {
+  width: 0.475rem;
+  height: 0.205rem;
+  top: 0.4125rem;
+  left: 0.35rem;
+}
+
+.c10 div[type='checkbox'],
+.c10 div[type='checkbox'] input,
+.c10 div[type='checkbox'] label {
+  height: 1.5rem;
+  width: 1.5rem;
+}
+
+.c9 {
   display: inline-block;
   padding: 0;
   border: none;
@@ -5829,117 +6283,14 @@ Array [
   -webkit-padding-after: 0;
 }
 
-.c10 {
-  font-weight: 600;
-  white-space: pre;
-  font-size: 0.8125rem;
-  font-size: 0.9375rem;
-}
-
 .c16 {
   font-weight: 600;
   white-space: pre;
   font-size: 0.8125rem;
-}
-
-.c13 {
-  position: relative;
-  vertical-align: text-bottom;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.c14 {
-  display: none;
-}
-
-.c14:checked + label {
-  background: #3B46CC;
-  border: 0.0625rem solid rgb(59,70,204);
-}
-
-.c14:checked + label:after {
-  -webkit-transform: translateX(100%);
-  -ms-transform: translateX(100%);
-  transform: translateX(100%);
-  box-shadow: 0 0 0 0.0625rem rgb(59,70,204);
-}
-
-.c14:checked + label:active {
-  box-shadow: none;
-}
-
-.c15 {
-  outline: 0;
-  display: block;
-  width: 2.875rem;
-  height: 1.5rem;
-  position: relative;
   cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  box-sizing: border-box;
-  background: rgb(250,250,250);
-  border-radius: 1.4375rem;
-  -webkit-transition: all 0.3s ease;
-  transition: all 0.3s ease;
-  border: 0.0625rem solid rgb(216,216,216);
 }
 
-.c15::selection {
-  background: none;
-}
-
-.c15:active {
-  box-shadow: inset 0 0 0 1.5rem rgb(216,216,216);
-}
-
-.c15:hover {
-  border: 0.0625rem solid rgb(59,70,204);
-}
-
-.c15:hover:after {
-  box-shadow: 0 0 0 0.0625rem rgb(59,70,204);
-}
-
-.c15:after,
-.c15:before {
-  position: relative;
-  display: block;
-  content: '';
-  width: 50%;
-  height: 100%;
-}
-
-.c15:after {
-  -webkit-transform: translateX(0%);
-  -ms-transform: translateX(0%);
-  transform: translateX(0%);
-  border-radius: 50%;
-  background: rgb(255,255,255);
-  -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275);
-  -webkit-transition: transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275);
-  transition: transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275);
-  box-shadow: 0 0 0 0.0625rem rgb(216,216,216);
-}
-
-.c15:active {
-  box-shadow: inset 0 0 0 2em rgb(216,216,216);
-}
-
-.c15:before {
-  display: none;
-}
-
-.c33 {
+.c35 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -5954,7 +6305,7 @@ Array [
   flex-grow: 1;
 }
 
-.c34 {
+.c36 {
   border: 0.0625rem solid rgb(216,216,216);
   box-sizing: border-box;
   border-radius: 0.125rem;
@@ -5975,7 +6326,7 @@ Array [
   align-items: center;
 }
 
-.c32 {
+.c34 {
   margin: 0;
   padding: 0;
   display: -webkit-box;
@@ -5988,6 +6339,10 @@ Array [
   flex-wrap: wrap;
 }
 
+.c8 {
+  margin-bottom: 0 !important;
+}
+
 .c5 {
   font-weight: 200;
 }
@@ -6029,7 +6384,7 @@ Array [
 }
 
 @media only screen and (min-width:0em) {
-  .c26 {
+  .c27 {
     -webkit-flex-basis: 25%;
     -ms-flex-preferred-size: 25%;
     flex-basis: 25%;
@@ -6038,7 +6393,7 @@ Array [
 }
 
 @media only screen and (min-width:0em) {
-  .c35 {
+  .c37 {
     -webkit-flex-basis: 16.666666666666668%;
     -ms-flex-preferred-size: 16.666666666666668%;
     flex-basis: 16.666666666666668%;
@@ -6085,156 +6440,164 @@ Array [
         className="c7"
     >
         <form
+            className="c8"
             onChange={[Function]}
         >
             <div
-                className="c8"
+                className="c9"
                 name="enabled"
                 role="group"
                 style={undefined}
                 type="checkbox"
             >
-                <div
-                    className="c9"
+                <li
+                    className="c10"
                 >
-                    <label
-                        className="c10 c11"
-                        htmlFor="u"
-                    >
-                        Enable Firewall
-                    </label>
                     <div
-                        className="c12"
+                        checked={false}
+                        className="c11"
+                        disabled={false}
+                        id="E"
+                        onBlur={undefined}
+                        type="checkbox"
                     >
-                        <div
-                            className="c13"
-                        >
-                            <input
-                                checked={undefined}
-                                className="c14"
-                                disabled={false}
-                                id="u"
-                                onBlur={undefined}
-                                type="checkbox"
-                            />
-                            <label
-                                className="c15"
-                                disabled={false}
-                                htmlFor="u"
-                                id="u"
-                                onBlur={undefined}
-                            />
-                            <label
-                                className="c16 c11"
-                                disabled={false}
-                                htmlFor="u"
-                                id="u"
-                                onBlur={undefined}
-                            >
-                                 
-                            </label>
-                        </div>
+                        <input
+                            checked={false}
+                            className="c12 c13"
+                            disabled={false}
+                            id="F"
+                            onBlur={undefined}
+                            type="checkbox"
+                        />
+                        <label
+                            className="c14"
+                            htmlFor="F"
+                        />
                     </div>
-                </div>
+                    <div
+                        checked={false}
+                        className="c15"
+                        disabled={false}
+                        id="E"
+                        onBlur={undefined}
+                    >
+                        <label
+                            className="c16 c17"
+                            htmlFor="F"
+                        >
+                            <div
+                                className="c18"
+                            >
+                                Enable Firewall
+                            </div>
+                        </label>
+                    </div>
+                </li>
             </div>
         </form>
     </div>
     <div
-        className="c17 c3"
+        className="c19 c3"
         height="0.0625rem"
     />
     <div
-        className="c18"
+        className="c20"
     >
-        <form>
+        <form
+            className="c8"
+        >
             <div
-                className="c8"
+                className="c9"
                 name="inactive"
                 role="group"
                 style={undefined}
                 type="checkbox"
             >
-                <div
-                    className="c9"
+                <li
+                    className="c10"
                 >
                     <div
-                        className="c19"
+                        checked={false}
+                        className="c11"
+                        disabled={false}
+                        id="G"
+                        onBlur={undefined}
+                        type="checkbox"
                     >
-                        <div
-                            className="c13"
-                        >
-                            <input
-                                checked={undefined}
-                                className="c14"
-                                id="v"
-                                onBlur={undefined}
-                                type="checkbox"
-                            />
-                            <label
-                                className="c15"
-                                htmlFor="v"
-                                id="v"
-                                onBlur={undefined}
-                            />
-                            <label
-                                className="c16 c11"
-                                htmlFor="v"
-                                id="v"
-                                onBlur={undefined}
-                            >
-                                 
-                            </label>
-                        </div>
+                        <input
+                            checked={false}
+                            className="c12 c13"
+                            disabled={false}
+                            id="H"
+                            onBlur={undefined}
+                            type="checkbox"
+                        />
+                        <label
+                            className="c14"
+                            htmlFor="H"
+                        />
                     </div>
-                    <label
-                        className="c10 c11"
-                        htmlFor="v"
+                    <div
+                        checked={false}
+                        className="c15"
+                        disabled={false}
+                        id="G"
+                        onBlur={undefined}
                     >
-                        Show inactive rules
-                    </label>
-                </div>
+                        <label
+                            className="c16 c17"
+                            htmlFor="H"
+                        >
+                            <div
+                                className="c18"
+                            >
+                                Show inactive rules
+                            </div>
+                        </label>
+                    </div>
+                </li>
             </div>
         </form>
     </div>
     <div
-        className="c20"
+        className="c21"
     >
         <h3
-            className="c21"
+            className="c22"
         >
             Firewall rules from instance tags
         </h3>
         <div
-            className="c22"
+            className="c23"
         >
             <div
-                className="c23"
+                className="c24"
             >
                 <div
-                    className="c24"
+                    className="c25"
                     disabled={true}
                     name="card"
                 >
                     <div
-                        className="c25"
+                        className="c26"
                     >
                         <div
                             className="c3"
                         >
                             <div
-                                className="c26"
+                                className="c27"
                             >
                                 <div
-                                    className="c27"
+                                    className="c28"
                                 >
                                     <div
-                                        className="c28"
+                                        className="c29"
                                     >
                                         <div
-                                            className="c29"
+                                            className="c30"
                                         >
                                             <strong
-                                                className="c30"
+                                                className="c31"
                                                 style={
                                                     Object {
                                                         "color": "#D8D8D8",
@@ -6246,7 +6609,7 @@ Array [
                                         </div>
                                     </div>
                                     <div
-                                        className="c9"
+                                        className="c32"
                                     >
                                         <p
                                             className="c6"
@@ -6262,19 +6625,19 @@ Array [
                                 </div>
                             </div>
                             <div
-                                className="c26"
+                                className="c27"
                             >
                                 <div
-                                    className="c27"
+                                    className="c28"
                                 >
                                     <div
-                                        className="c28"
+                                        className="c29"
                                     >
                                         <div
-                                            className="c29"
+                                            className="c30"
                                         >
                                             <strong
-                                                className="c30"
+                                                className="c31"
                                                 style={
                                                     Object {
                                                         "color": "#D8D8D8",
@@ -6286,19 +6649,19 @@ Array [
                                         </div>
                                     </div>
                                     <div
-                                        className="c9"
+                                        className="c32"
                                     >
                                         <div
-                                            className="c31"
+                                            className="c33"
                                         >
                                             <ul
-                                                className="c32"
+                                                className="c34"
                                             >
                                                 <div
-                                                    className="c33"
+                                                    className="c35"
                                                 >
                                                     <li
-                                                        className="c34"
+                                                        className="c36"
                                                         fill={null}
                                                         name="wat"
                                                         style={
@@ -6315,19 +6678,19 @@ Array [
                                 </div>
                             </div>
                             <div
-                                className="c35"
+                                className="c37"
                             >
                                 <div
-                                    className="c27"
+                                    className="c28"
                                 >
                                     <div
-                                        className="c28"
+                                        className="c29"
                                     >
                                         <div
-                                            className="c29"
+                                            className="c30"
                                         >
                                             <strong
-                                                className="c30"
+                                                className="c31"
                                                 style={
                                                     Object {
                                                         "color": "#D8D8D8",
@@ -6339,7 +6702,7 @@ Array [
                                         </div>
                                     </div>
                                     <div
-                                        className="c9"
+                                        className="c32"
                                     >
                                         <p
                                             className="c6"
@@ -6355,19 +6718,19 @@ Array [
                                 </div>
                             </div>
                             <div
-                                className="c35"
+                                className="c37"
                             >
                                 <div
-                                    className="c27"
+                                    className="c28"
                                 >
                                     <div
-                                        className="c28"
+                                        className="c29"
                                     >
                                         <div
-                                            className="c29"
+                                            className="c30"
                                         >
                                             <strong
-                                                className="c30"
+                                                className="c31"
                                                 style={
                                                     Object {
                                                         "color": "#D8D8D8",
@@ -6379,7 +6742,7 @@ Array [
                                         </div>
                                     </div>
                                     <div
-                                        className="c9"
+                                        className="c32"
                                     >
                                         <p
                                             className="c6"
@@ -6395,19 +6758,19 @@ Array [
                                 </div>
                             </div>
                             <div
-                                className="c35"
+                                className="c37"
                             >
                                 <div
-                                    className="c27"
+                                    className="c28"
                                 >
                                     <div
-                                        className="c28"
+                                        className="c29"
                                     >
                                         <div
-                                            className="c29"
+                                            className="c30"
                                         >
                                             <strong
-                                                className="c30"
+                                                className="c31"
                                                 style={
                                                     Object {
                                                         "color": "#D8D8D8",
@@ -6419,7 +6782,7 @@ Array [
                                         </div>
                                     </div>
                                     <div
-                                        className="c9"
+                                        className="c32"
                                     >
                                         <p
                                             className="c6"
@@ -6454,763 +6817,874 @@ Array [
   margin-bottom: 1.875rem;
 }
 
-.c12 {
-  margin-left: 0.75rem;
-}
-
-.c6 {
-  color: rgb(73,73,73);
-  margin: 0;
-  line-height: 1.5rem;
-  font-size: 0.9375rem;
-}
-
-.c11 {
-  font-size: 0.9375rem;
-  line-height: 1.125rem;
-  font-style: normal;
-  font-stretch: normal;
-  display: block;
-  color: rgb(70,70,70);
-  text-align: left;
-}
-
-.c1 {
-  margin-right: auto;
-  margin-left: auto;
-}
-
-.c3 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 1 1 auto;
-  -ms-flex: 1 1 auto;
-  flex: 1 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.625rem;
-  margin-left: -0.625rem;
-}
-
-.c4 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.625rem;
-  padding-left: 0.625rem;
-  display: block;
-}
-
-.c0 {
-  box-sizing: border-box;
-  width: 100%;
-  max-width: 62.5rem;
-  padding-bottom: 1.125rem;
-}
-
-.c17 {
-  height: 1px;
-  background-color: rgb(216,216,216);
-}
-
-.c9 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-align-content: stretch;
-  -ms-flex-line-pack: stretch;
-  align-content: stretch;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.c8 {
-  display: inline-block;
-  padding: 0;
-  border: none;
-  overflow: hidden;
-  height: auto;
-  -webkit-padding-before: 0;
-  -webkit-padding-start: 0;
-  -webkit-padding-end: 0;
-  -webkit-padding-after: 0;
-}
-
-.c10 {
-  font-weight: 600;
-  white-space: pre;
-  font-size: 0.8125rem;
-  font-size: 0.9375rem;
-}
-
-.c16 {
-  font-weight: 600;
-  white-space: pre;
-  font-size: 0.8125rem;
-}
-
-.c13 {
-  position: relative;
-  vertical-align: text-bottom;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.c14 {
-  display: none;
-}
-
-.c14:checked + label {
-  background: #3B46CC;
-  border: 0.0625rem solid rgb(59,70,204);
-}
-
-.c14:checked + label:after {
-  -webkit-transform: translateX(100%);
-  -ms-transform: translateX(100%);
-  transform: translateX(100%);
-  box-shadow: 0 0 0 0.0625rem rgb(59,70,204);
-}
-
-.c14:checked + label:active {
-  box-shadow: none;
-}
-
-.c15 {
-  outline: 0;
-  display: block;
-  width: 2.875rem;
-  height: 1.5rem;
-  position: relative;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  box-sizing: border-box;
-  background: rgb(250,250,250);
-  border-radius: 1.4375rem;
-  -webkit-transition: all 0.3s ease;
-  transition: all 0.3s ease;
-  border: 0.0625rem solid rgb(216,216,216);
-}
-
-.c15::selection {
-  background: none;
-}
-
-.c15:active {
-  box-shadow: inset 0 0 0 1.5rem rgb(216,216,216);
-}
-
-.c15:hover {
-  border: 0.0625rem solid rgb(59,70,204);
-}
-
-.c15:hover:after {
-  box-shadow: 0 0 0 0.0625rem rgb(59,70,204);
-}
-
-.c15:after,
-.c15:before {
-  position: relative;
-  display: block;
-  content: '';
-  width: 50%;
-  height: 100%;
-}
-
-.c15:after {
-  -webkit-transform: translateX(0%);
-  -ms-transform: translateX(0%);
-  transform: translateX(0%);
-  border-radius: 50%;
-  background: rgb(255,255,255);
-  -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275);
-  -webkit-transition: transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275);
-  transition: transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275);
-  box-shadow: 0 0 0 0.0625rem rgb(216,216,216);
-}
-
-.c15:active {
-  box-shadow: inset 0 0 0 2em rgb(216,216,216);
-}
-
-.c15:before {
-  display: none;
-}
-
-.c5 {
-  font-weight: 200;
-}
-
-@media only screen and (min-width:48em) {
-  .c1 {
-    width: 46rem;
-  }
-}
-
-@media only screen and (min-width:64em) {
-  .c1 {
-    width: 56rem;
-  }
-}
-
-@media only screen and (min-width:75em) {
-  .c1 {
-    width: 59rem;
-  }
-}
-
-@media only screen and (min-width:0em) {
-  .c4 {
-    -webkit-flex-basis: 100%;
-    -ms-flex-preferred-size: 100%;
-    flex-basis: 100%;
-    max-width: 100%;
-  }
-}
-
-@media only screen and (min-width:48em) {
-  .c4 {
-    -webkit-flex-basis: 58.333333333333336%;
-    -ms-flex-preferred-size: 58.333333333333336%;
-    flex-basis: 58.333333333333336%;
-    max-width: 58.333333333333336%;
-  }
-}
-
-@media only screen and (max-width:47.9375rem) {
-  .c0 {
-    padding-left: 0.375rem;
-    padding-right: 0.375rem;
-  }
-}
-
-<div
-    className="c0 c1"
->
-    <div
-        className="c2"
-    >
-        <div
-            className="c3"
-        >
-            <div
-                className="c4"
-            >
-                <p
-                    className="c5 c6"
-                >
-                    Cloud Firewall rules control traffic across instances. Enabling the firewall adds a default set of rules and rules defined by your chosen tags.
-                     
-                    <a
-                        href="https://docs.joyent.com/private-cloud/install/cns"
-                        rel="noopener noreferrer"
-                        target="__blank"
-                    >
-                        Read the docs
-                    </a>
-                </p>
-            </div>
-        </div>
-    </div>
-    <div
-        className="c7"
-    >
-        <form
-            onChange={[Function]}
-        >
-            <div
-                className="c8"
-                name="enabled"
-                role="group"
-                style={undefined}
-                type="checkbox"
-            >
-                <div
-                    className="c9"
-                >
-                    <label
-                        className="c10 c11"
-                        htmlFor="w"
-                    >
-                        Enable Firewall
-                    </label>
-                    <div
-                        className="c12"
-                    >
-                        <div
-                            className="c13"
-                        >
-                            <input
-                                checked={undefined}
-                                className="c14"
-                                disabled={false}
-                                id="w"
-                                onBlur={undefined}
-                                type="checkbox"
-                            />
-                            <label
-                                className="c15"
-                                disabled={false}
-                                htmlFor="w"
-                                id="w"
-                                onBlur={undefined}
-                            />
-                            <label
-                                className="c16 c11"
-                                disabled={false}
-                                htmlFor="w"
-                                id="w"
-                                onBlur={undefined}
-                            >
-                                 
-                            </label>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </form>
-    </div>
-    <div
-        className="c17 c3"
-        height="0.0625rem"
-    />
-</div>,
-  .c2 {
-  margin-bottom: 1.125rem;
-}
-
-.c7 {
-  margin-bottom: 1.875rem;
-}
-
-.c12 {
-  margin-left: 0.75rem;
-}
-
-.c6 {
-  color: rgb(73,73,73);
-  margin: 0;
-  line-height: 1.5rem;
-  font-size: 0.9375rem;
-}
-
-.c11 {
-  font-size: 0.9375rem;
-  line-height: 1.125rem;
-  font-style: normal;
-  font-stretch: normal;
-  display: block;
-  color: rgb(70,70,70);
-  text-align: left;
-}
-
-.c1 {
-  margin-right: auto;
-  margin-left: auto;
-}
-
-.c3 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 1 1 auto;
-  -ms-flex: 1 1 auto;
-  flex: 1 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.625rem;
-  margin-left: -0.625rem;
-}
-
-.c4 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.625rem;
-  padding-left: 0.625rem;
-  display: block;
-}
-
-.c0 {
-  box-sizing: border-box;
-  width: 100%;
-  max-width: 62.5rem;
-  padding-bottom: 1.125rem;
-}
-
-.c17 {
-  height: 1px;
-  background-color: rgb(216,216,216);
-}
-
-.c9 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-align-content: stretch;
-  -ms-flex-line-pack: stretch;
-  align-content: stretch;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.c8 {
-  display: inline-block;
-  padding: 0;
-  border: none;
-  overflow: hidden;
-  height: auto;
-  -webkit-padding-before: 0;
-  -webkit-padding-start: 0;
-  -webkit-padding-end: 0;
-  -webkit-padding-after: 0;
-}
-
-.c10 {
-  font-weight: 600;
-  white-space: pre;
-  font-size: 0.8125rem;
-  font-size: 0.9375rem;
-}
-
-.c16 {
-  font-weight: 600;
-  white-space: pre;
-  font-size: 0.8125rem;
-}
-
-.c13 {
-  position: relative;
-  vertical-align: text-bottom;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.c14 {
-  display: none;
-}
-
-.c14:checked + label {
-  background: #3B46CC;
-  border: 0.0625rem solid rgb(59,70,204);
-}
-
-.c14:checked + label:after {
-  -webkit-transform: translateX(100%);
-  -ms-transform: translateX(100%);
-  transform: translateX(100%);
-  box-shadow: 0 0 0 0.0625rem rgb(59,70,204);
-}
-
-.c14:checked + label:active {
-  box-shadow: none;
-}
-
-.c15 {
-  outline: 0;
-  display: block;
-  width: 2.875rem;
-  height: 1.5rem;
-  position: relative;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  box-sizing: border-box;
-  background: rgb(250,250,250);
-  border-radius: 1.4375rem;
-  -webkit-transition: all 0.3s ease;
-  transition: all 0.3s ease;
-  border: 0.0625rem solid rgb(216,216,216);
-}
-
-.c15::selection {
-  background: none;
-}
-
-.c15:active {
-  box-shadow: inset 0 0 0 1.5rem rgb(216,216,216);
-}
-
-.c15:hover {
-  border: 0.0625rem solid rgb(59,70,204);
-}
-
-.c15:hover:after {
-  box-shadow: 0 0 0 0.0625rem rgb(59,70,204);
-}
-
-.c15:after,
-.c15:before {
-  position: relative;
-  display: block;
-  content: '';
-  width: 50%;
-  height: 100%;
-}
-
-.c15:after {
-  -webkit-transform: translateX(0%);
-  -ms-transform: translateX(0%);
-  transform: translateX(0%);
-  border-radius: 50%;
-  background: rgb(255,255,255);
-  -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275);
-  -webkit-transition: transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275);
-  transition: transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275);
-  box-shadow: 0 0 0 0.0625rem rgb(216,216,216);
-}
-
-.c15:active {
-  box-shadow: inset 0 0 0 2em rgb(216,216,216);
-}
-
-.c15:before {
-  display: none;
-}
-
-.c5 {
-  font-weight: 200;
-}
-
-@media only screen and (min-width:48em) {
-  .c1 {
-    width: 46rem;
-  }
-}
-
-@media only screen and (min-width:64em) {
-  .c1 {
-    width: 56rem;
-  }
-}
-
-@media only screen and (min-width:75em) {
-  .c1 {
-    width: 59rem;
-  }
-}
-
-@media only screen and (min-width:0em) {
-  .c4 {
-    -webkit-flex-basis: 100%;
-    -ms-flex-preferred-size: 100%;
-    flex-basis: 100%;
-    max-width: 100%;
-  }
-}
-
-@media only screen and (min-width:48em) {
-  .c4 {
-    -webkit-flex-basis: 58.333333333333336%;
-    -ms-flex-preferred-size: 58.333333333333336%;
-    flex-basis: 58.333333333333336%;
-    max-width: 58.333333333333336%;
-  }
-}
-
-@media only screen and (max-width:47.9375rem) {
-  .c0 {
-    padding-left: 0.375rem;
-    padding-right: 0.375rem;
-  }
-}
-
-<div
-    className="c0 c1"
->
-    <div
-        className="c2"
-    >
-        <div
-            className="c3"
-        >
-            <div
-                className="c4"
-            >
-                <p
-                    className="c5 c6"
-                >
-                    Cloud Firewall rules control traffic across instances. Enabling the firewall adds a default set of rules and rules defined by your chosen tags.
-                     
-                    <a
-                        href="https://docs.joyent.com/private-cloud/install/cns"
-                        rel="noopener noreferrer"
-                        target="__blank"
-                    >
-                        Read the docs
-                    </a>
-                </p>
-            </div>
-        </div>
-    </div>
-    <div
-        className="c7"
-    >
-        <form
-            onChange={[Function]}
-        >
-            <div
-                className="c8"
-                name="enabled"
-                role="group"
-                style={undefined}
-                type="checkbox"
-            >
-                <div
-                    className="c9"
-                >
-                    <label
-                        className="c10 c11"
-                        htmlFor="x"
-                    >
-                        Enable Firewall
-                    </label>
-                    <div
-                        className="c12"
-                    >
-                        <div
-                            className="c13"
-                        >
-                            <input
-                                checked={undefined}
-                                className="c14"
-                                disabled={false}
-                                id="x"
-                                onBlur={undefined}
-                                type="checkbox"
-                            />
-                            <label
-                                className="c15"
-                                disabled={false}
-                                htmlFor="x"
-                                id="x"
-                                onBlur={undefined}
-                            />
-                            <label
-                                className="c16 c11"
-                                disabled={false}
-                                htmlFor="x"
-                                id="x"
-                                onBlur={undefined}
-                            >
-                                 
-                            </label>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </form>
-    </div>
-    <div
-        className="c17 c3"
-        height="0.0625rem"
-    />
-</div>,
-  .c2 {
-  margin-bottom: 1.125rem;
-}
-
-.c7 {
-  margin-bottom: 1.875rem;
-}
-
-.c12 {
-  margin-left: 0.75rem;
-}
-
-.c20 {
-  margin-top: 1.875rem;
-}
-
 .c18 {
-  margin-top: 1.5rem;
+  margin-right: 0.75rem;
+  margin-left: 0.75rem;
+}
+
+.c13 {
+  font-family: sans-serif;
+  font-size: 100%;
+  line-height: 1.15;
+  margin: 0;
+  overflow: visible;
+}
+
+.c13[type='checkbox'],
+.c13[type='radio'] {
+  box-sizing: border-box;
+  padding: 0;
+}
+
+.c13[type='number']::-webkit-inner-spin-button,
+.c13[type='number']::-webkit-outer-spin-button {
+  height: auto;
+}
+
+.c13[type='search'] {
+  -webkit-appearance: textfield;
+  -moz-appearance: textfield;
+  appearance: textfield;
+  outline-offset: -0.125rem;
+}
+
+.c13[type='search']::-webkit-search-cancel-button,
+.c13[type='search']::-webkit-search-decoration {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+}
+
+.c13::-webkit-file-upload-button {
+  -webkit-appearance: button;
+  -moz-appearance: button;
+  appearance: button;
+  font: inherit;
+}
+
+.c6 {
+  color: rgb(73,73,73);
+  margin: 0;
+  line-height: 1.5rem;
+  font-size: 0.9375rem;
+}
+
+.c17 {
+  font-size: 0.9375rem;
+  line-height: 1.125rem;
+  font-style: normal;
+  font-stretch: normal;
+  display: block;
+  color: rgb(70,70,70);
+  text-align: left;
+}
+
+.c1 {
+  margin-right: auto;
+  margin-left: auto;
+}
+
+.c3 {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.625rem;
+  margin-left: -0.625rem;
+}
+
+.c4 {
+  box-sizing: border-box;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  padding-right: 0.625rem;
+  padding-left: 0.625rem;
+  display: block;
+}
+
+.c0 {
+  box-sizing: border-box;
+  width: 100%;
+  max-width: 62.5rem;
+  padding-bottom: 1.125rem;
 }
 
 .c19 {
-  margin-right: 0.75rem;
+  height: 1px;
+  background-color: rgb(216,216,216);
 }
 
-.c22 {
-  margin-top: 1.125rem;
+.c12 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  display: none;
+}
+
+.c12:checked + label::after {
+  opacity: 1;
+}
+
+.c12:selected + label::after {
+  opacity: 1;
+}
+
+.c12:checked + label {
+  border-color: rgb(59,70,204);
+}
+
+.c12:selected + label {
+  border-color: rgb(59,70,204);
+}
+
+.c12:disabled + label {
+  background-color: rgb(249,249,249);
+  cursor: not-allowed;
+}
+
+.c14 {
+  color: rgb(100,100,100);
+  position: absolute;
+  width: 1.125rem;
+  height: 1.125rem;
+  box-sizing: border-box;
+  top: 0;
+  right: 0;
+  cursor: pointer;
+  background-color: rgb(255,255,255);
+  box-shadow: none;
+  border: 0.0625rem solid rgb(216,216,216);
+  cursor: pointer;
+  border-radius: 0.25rem;
+  width: 1.125rem;
+  height: 1.125rem;
+}
+
+.c14::after {
+  opacity: 0;
+  content: '';
+  position: absolute;
+  width: 0.375rem;
+  height: 0.125rem;
+  background: transparent;
+  top: 0.3125rem;
+  left: 0.25rem;
+  border: 0.125rem solid rgb(45,45,45);
+  border-top: none;
+  border-right: none;
+  -webkit-transform: rotate(-45deg);
+  -ms-transform: rotate(-45deg);
+  transform: rotate(-45deg);
+}
+
+.c11 {
+  display: inline-block;
+  vertical-align: text-bottom;
+  width: 1.125rem;
+  height: 1.125rem;
+  position: relative;
+  cursor: pointer;
+}
+
+.c15 label {
+  font-weight: normal;
+  font-size: 0.9375rem;
+}
+
+.c10 {
+  list-style-type: none;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-align-content: center;
+  -ms-flex-line-pack: center;
+  align-content: center;
+  height: 1.5rem;
+}
+
+.c10 label {
+  font-weight: 400;
+}
+
+.c10 label::after {
+  width: 0.475rem;
+  height: 0.205rem;
+  top: 0.4125rem;
+  left: 0.35rem;
+}
+
+.c10 div[type='checkbox'],
+.c10 div[type='checkbox'] input,
+.c10 div[type='checkbox'] label {
+  height: 1.5rem;
+  width: 1.5rem;
+}
+
+.c9 {
+  display: inline-block;
+  padding: 0;
+  border: none;
+  overflow: hidden;
+  height: auto;
+  -webkit-padding-before: 0;
+  -webkit-padding-start: 0;
+  -webkit-padding-end: 0;
+  -webkit-padding-after: 0;
+}
+
+.c16 {
+  font-weight: 600;
+  white-space: pre;
+  font-size: 0.8125rem;
+  cursor: pointer;
+}
+
+.c8 {
+  margin-bottom: 0 !important;
+}
+
+.c5 {
+  font-weight: 200;
+}
+
+@media only screen and (min-width:48em) {
+  .c1 {
+    width: 46rem;
+  }
+}
+
+@media only screen and (min-width:64em) {
+  .c1 {
+    width: 56rem;
+  }
+}
+
+@media only screen and (min-width:75em) {
+  .c1 {
+    width: 59rem;
+  }
+}
+
+@media only screen and (min-width:0em) {
+  .c4 {
+    -webkit-flex-basis: 100%;
+    -ms-flex-preferred-size: 100%;
+    flex-basis: 100%;
+    max-width: 100%;
+  }
+}
+
+@media only screen and (min-width:48em) {
+  .c4 {
+    -webkit-flex-basis: 58.333333333333336%;
+    -ms-flex-preferred-size: 58.333333333333336%;
+    flex-basis: 58.333333333333336%;
+    max-width: 58.333333333333336%;
+  }
+}
+
+@media only screen and (max-width:47.9375rem) {
+  .c0 {
+    padding-left: 0.375rem;
+    padding-right: 0.375rem;
+  }
+}
+
+<div
+    className="c0 c1"
+>
+    <div
+        className="c2"
+    >
+        <div
+            className="c3"
+        >
+            <div
+                className="c4"
+            >
+                <p
+                    className="c5 c6"
+                >
+                    Cloud Firewall rules control traffic across instances. Enabling the firewall adds a default set of rules and rules defined by your chosen tags.
+                     
+                    <a
+                        href="https://docs.joyent.com/private-cloud/install/cns"
+                        rel="noopener noreferrer"
+                        target="__blank"
+                    >
+                        Read the docs
+                    </a>
+                </p>
+            </div>
+        </div>
+    </div>
+    <div
+        className="c7"
+    >
+        <form
+            className="c8"
+            onChange={[Function]}
+        >
+            <div
+                className="c9"
+                name="enabled"
+                role="group"
+                style={undefined}
+                type="checkbox"
+            >
+                <li
+                    className="c10"
+                >
+                    <div
+                        checked={false}
+                        className="c11"
+                        disabled={false}
+                        id="I"
+                        onBlur={undefined}
+                        type="checkbox"
+                    >
+                        <input
+                            checked={false}
+                            className="c12 c13"
+                            disabled={false}
+                            id="J"
+                            onBlur={undefined}
+                            type="checkbox"
+                        />
+                        <label
+                            className="c14"
+                            htmlFor="J"
+                        />
+                    </div>
+                    <div
+                        checked={false}
+                        className="c15"
+                        disabled={false}
+                        id="I"
+                        onBlur={undefined}
+                    >
+                        <label
+                            className="c16 c17"
+                            htmlFor="J"
+                        >
+                            <div
+                                className="c18"
+                            >
+                                Enable Firewall
+                            </div>
+                        </label>
+                    </div>
+                </li>
+            </div>
+        </form>
+    </div>
+    <div
+        className="c19 c3"
+        height="0.0625rem"
+    />
+</div>,
+  .c2 {
+  margin-bottom: 1.125rem;
+}
+
+.c7 {
+  margin-bottom: 1.875rem;
+}
+
+.c18 {
+  margin-right: 0.75rem;
+  margin-left: 0.75rem;
+}
+
+.c13 {
+  font-family: sans-serif;
+  font-size: 100%;
+  line-height: 1.15;
+  margin: 0;
+  overflow: visible;
+}
+
+.c13[type='checkbox'],
+.c13[type='radio'] {
+  box-sizing: border-box;
+  padding: 0;
+}
+
+.c13[type='number']::-webkit-inner-spin-button,
+.c13[type='number']::-webkit-outer-spin-button {
+  height: auto;
+}
+
+.c13[type='search'] {
+  -webkit-appearance: textfield;
+  -moz-appearance: textfield;
+  appearance: textfield;
+  outline-offset: -0.125rem;
+}
+
+.c13[type='search']::-webkit-search-cancel-button,
+.c13[type='search']::-webkit-search-decoration {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+}
+
+.c13::-webkit-file-upload-button {
+  -webkit-appearance: button;
+  -moz-appearance: button;
+  appearance: button;
+  font: inherit;
+}
+
+.c6 {
+  color: rgb(73,73,73);
+  margin: 0;
+  line-height: 1.5rem;
+  font-size: 0.9375rem;
+}
+
+.c17 {
+  font-size: 0.9375rem;
+  line-height: 1.125rem;
+  font-style: normal;
+  font-stretch: normal;
+  display: block;
+  color: rgb(70,70,70);
+  text-align: left;
+}
+
+.c1 {
+  margin-right: auto;
+  margin-left: auto;
+}
+
+.c3 {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.625rem;
+  margin-left: -0.625rem;
+}
+
+.c4 {
+  box-sizing: border-box;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  padding-right: 0.625rem;
+  padding-left: 0.625rem;
+  display: block;
+}
+
+.c0 {
+  box-sizing: border-box;
+  width: 100%;
+  max-width: 62.5rem;
+  padding-bottom: 1.125rem;
+}
+
+.c19 {
+  height: 1px;
+  background-color: rgb(216,216,216);
+}
+
+.c12 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  display: none;
+}
+
+.c12:checked + label::after {
+  opacity: 1;
+}
+
+.c12:selected + label::after {
+  opacity: 1;
+}
+
+.c12:checked + label {
+  border-color: rgb(59,70,204);
+}
+
+.c12:selected + label {
+  border-color: rgb(59,70,204);
+}
+
+.c12:disabled + label {
+  background-color: rgb(249,249,249);
+  cursor: not-allowed;
+}
+
+.c14 {
+  color: rgb(100,100,100);
+  position: absolute;
+  width: 1.125rem;
+  height: 1.125rem;
+  box-sizing: border-box;
+  top: 0;
+  right: 0;
+  cursor: pointer;
+  background-color: rgb(255,255,255);
+  box-shadow: none;
+  border: 0.0625rem solid rgb(216,216,216);
+  cursor: pointer;
+  border-radius: 0.25rem;
+  width: 1.125rem;
+  height: 1.125rem;
+}
+
+.c14::after {
+  opacity: 0;
+  content: '';
+  position: absolute;
+  width: 0.375rem;
+  height: 0.125rem;
+  background: transparent;
+  top: 0.3125rem;
+  left: 0.25rem;
+  border: 0.125rem solid rgb(45,45,45);
+  border-top: none;
+  border-right: none;
+  -webkit-transform: rotate(-45deg);
+  -ms-transform: rotate(-45deg);
+  transform: rotate(-45deg);
+}
+
+.c11 {
+  display: inline-block;
+  vertical-align: text-bottom;
+  width: 1.125rem;
+  height: 1.125rem;
+  position: relative;
+  cursor: pointer;
+}
+
+.c15 label {
+  font-weight: normal;
+  font-size: 0.9375rem;
+}
+
+.c10 {
+  list-style-type: none;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-align-content: center;
+  -ms-flex-line-pack: center;
+  align-content: center;
+  height: 1.5rem;
+}
+
+.c10 label {
+  font-weight: 400;
+}
+
+.c10 label::after {
+  width: 0.475rem;
+  height: 0.205rem;
+  top: 0.4125rem;
+  left: 0.35rem;
+}
+
+.c10 div[type='checkbox'],
+.c10 div[type='checkbox'] input,
+.c10 div[type='checkbox'] label {
+  height: 1.5rem;
+  width: 1.5rem;
+}
+
+.c9 {
+  display: inline-block;
+  padding: 0;
+  border: none;
+  overflow: hidden;
+  height: auto;
+  -webkit-padding-before: 0;
+  -webkit-padding-start: 0;
+  -webkit-padding-end: 0;
+  -webkit-padding-after: 0;
+}
+
+.c16 {
+  font-weight: 600;
+  white-space: pre;
+  font-size: 0.8125rem;
+  cursor: pointer;
+}
+
+.c8 {
+  margin-bottom: 0 !important;
+}
+
+.c5 {
+  font-weight: 200;
+}
+
+@media only screen and (min-width:48em) {
+  .c1 {
+    width: 46rem;
+  }
+}
+
+@media only screen and (min-width:64em) {
+  .c1 {
+    width: 56rem;
+  }
+}
+
+@media only screen and (min-width:75em) {
+  .c1 {
+    width: 59rem;
+  }
+}
+
+@media only screen and (min-width:0em) {
+  .c4 {
+    -webkit-flex-basis: 100%;
+    -ms-flex-preferred-size: 100%;
+    flex-basis: 100%;
+    max-width: 100%;
+  }
+}
+
+@media only screen and (min-width:48em) {
+  .c4 {
+    -webkit-flex-basis: 58.333333333333336%;
+    -ms-flex-preferred-size: 58.333333333333336%;
+    flex-basis: 58.333333333333336%;
+    max-width: 58.333333333333336%;
+  }
+}
+
+@media only screen and (max-width:47.9375rem) {
+  .c0 {
+    padding-left: 0.375rem;
+    padding-right: 0.375rem;
+  }
+}
+
+<div
+    className="c0 c1"
+>
+    <div
+        className="c2"
+    >
+        <div
+            className="c3"
+        >
+            <div
+                className="c4"
+            >
+                <p
+                    className="c5 c6"
+                >
+                    Cloud Firewall rules control traffic across instances. Enabling the firewall adds a default set of rules and rules defined by your chosen tags.
+                     
+                    <a
+                        href="https://docs.joyent.com/private-cloud/install/cns"
+                        rel="noopener noreferrer"
+                        target="__blank"
+                    >
+                        Read the docs
+                    </a>
+                </p>
+            </div>
+        </div>
+    </div>
+    <div
+        className="c7"
+    >
+        <form
+            className="c8"
+            onChange={[Function]}
+        >
+            <div
+                className="c9"
+                name="enabled"
+                role="group"
+                style={undefined}
+                type="checkbox"
+            >
+                <li
+                    className="c10"
+                >
+                    <div
+                        checked={false}
+                        className="c11"
+                        disabled={false}
+                        id="K"
+                        onBlur={undefined}
+                        type="checkbox"
+                    >
+                        <input
+                            checked={false}
+                            className="c12 c13"
+                            disabled={false}
+                            id="L"
+                            onBlur={undefined}
+                            type="checkbox"
+                        />
+                        <label
+                            className="c14"
+                            htmlFor="L"
+                        />
+                    </div>
+                    <div
+                        checked={false}
+                        className="c15"
+                        disabled={false}
+                        id="K"
+                        onBlur={undefined}
+                    >
+                        <label
+                            className="c16 c17"
+                            htmlFor="L"
+                        >
+                            <div
+                                className="c18"
+                            >
+                                Enable Firewall
+                            </div>
+                        </label>
+                    </div>
+                </li>
+            </div>
+        </form>
+    </div>
+    <div
+        className="c19 c3"
+        height="0.0625rem"
+    />
+</div>,
+  .c2 {
+  margin-bottom: 1.125rem;
+}
+
+.c7 {
+  margin-bottom: 1.875rem;
+}
+
+.c18 {
+  margin-right: 0.75rem;
+  margin-left: 0.75rem;
+}
+
+.c21 {
+  margin-top: 1.875rem;
+}
+
+.c20 {
+  margin-top: 1.5rem;
 }
 
 .c23 {
+  margin-top: 1.125rem;
+}
+
+.c24 {
   margin-bottom: 0rem;
 }
 
-.c28 {
+.c29 {
   margin-right: 0.1875rem;
 }
 
-.c31 {
+.c33 {
   margin-left: 0.1875rem;
 }
 
-.c25 {
+.c26 {
   padding-top: 0.75rem;
   padding-right: 1.125rem;
   padding-bottom: 0.75rem;
   padding-left: 1.125rem;
 }
 
+.c13 {
+  font-family: sans-serif;
+  font-size: 100%;
+  line-height: 1.15;
+  margin: 0;
+  overflow: visible;
+}
+
+.c13[type='checkbox'],
+.c13[type='radio'] {
+  box-sizing: border-box;
+  padding: 0;
+}
+
+.c13[type='number']::-webkit-inner-spin-button,
+.c13[type='number']::-webkit-outer-spin-button {
+  height: auto;
+}
+
+.c13[type='search'] {
+  -webkit-appearance: textfield;
+  -moz-appearance: textfield;
+  appearance: textfield;
+  outline-offset: -0.125rem;
+}
+
+.c13[type='search']::-webkit-search-cancel-button,
+.c13[type='search']::-webkit-search-decoration {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+}
+
+.c13::-webkit-file-upload-button {
+  -webkit-appearance: button;
+  -moz-appearance: button;
+  appearance: button;
+  font: inherit;
+}
+
 .c6 {
   color: rgb(73,73,73);
   margin: 0;
@@ -7218,7 +7692,7 @@ Array [
   font-size: 0.9375rem;
 }
 
-.c11 {
+.c17 {
   font-size: 0.9375rem;
   line-height: 1.125rem;
   font-style: normal;
@@ -7262,7 +7736,7 @@ Array [
   display: block;
 }
 
-.c26 {
+.c27 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -7272,7 +7746,7 @@ Array [
   display: block;
 }
 
-.c35 {
+.c37 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -7289,7 +7763,7 @@ Array [
   padding-bottom: 1.125rem;
 }
 
-.c21 {
+.c22 {
   margin: 0;
   color: rgb(73,73,73);
   font-weight: normal;
@@ -7297,43 +7771,19 @@ Array [
   font-size: 1.3125rem;
 }
 
-.c30 {
+.c31 {
   color: rgb(73,73,73);
   font-weight: 700;
   line-height: 1.5rem;
   font-size: 0.9375rem;
 }
 
-.c17 {
+.c19 {
   height: 1px;
   background-color: rgb(216,216,216);
 }
 
-.c9 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-align-content: stretch;
-  -ms-flex-line-pack: stretch;
-  align-content: stretch;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.c27 {
+.c28 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -7369,7 +7819,31 @@ Array [
   flex-basis: 100%;
 }
 
-.c29 {
+.c32 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  -webkit-align-content: stretch;
+  -ms-flex-line-pack: stretch;
+  align-content: stretch;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.c30 {
   -webkit-order: 0;
   -ms-flex-order: 0;
   order: 0;
@@ -7386,7 +7860,7 @@ Array [
   display: block;
 }
 
-.c24 {
+.c25 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -7412,7 +7886,124 @@ Array [
   cursor: default;
 }
 
-.c8 {
+.c12 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  display: none;
+}
+
+.c12:checked + label::after {
+  opacity: 1;
+}
+
+.c12:selected + label::after {
+  opacity: 1;
+}
+
+.c12:checked + label {
+  border-color: rgb(59,70,204);
+}
+
+.c12:selected + label {
+  border-color: rgb(59,70,204);
+}
+
+.c12:disabled + label {
+  background-color: rgb(249,249,249);
+  cursor: not-allowed;
+}
+
+.c14 {
+  color: rgb(100,100,100);
+  position: absolute;
+  width: 1.125rem;
+  height: 1.125rem;
+  box-sizing: border-box;
+  top: 0;
+  right: 0;
+  cursor: pointer;
+  background-color: rgb(255,255,255);
+  box-shadow: none;
+  border: 0.0625rem solid rgb(216,216,216);
+  cursor: pointer;
+  border-radius: 0.25rem;
+  width: 1.125rem;
+  height: 1.125rem;
+}
+
+.c14::after {
+  opacity: 0;
+  content: '';
+  position: absolute;
+  width: 0.375rem;
+  height: 0.125rem;
+  background: transparent;
+  top: 0.3125rem;
+  left: 0.25rem;
+  border: 0.125rem solid rgb(45,45,45);
+  border-top: none;
+  border-right: none;
+  -webkit-transform: rotate(-45deg);
+  -ms-transform: rotate(-45deg);
+  transform: rotate(-45deg);
+}
+
+.c11 {
+  display: inline-block;
+  vertical-align: text-bottom;
+  width: 1.125rem;
+  height: 1.125rem;
+  position: relative;
+  cursor: pointer;
+}
+
+.c15 label {
+  font-weight: normal;
+  font-size: 0.9375rem;
+}
+
+.c10 {
+  list-style-type: none;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-align-content: center;
+  -ms-flex-line-pack: center;
+  align-content: center;
+  height: 1.5rem;
+}
+
+.c10 label {
+  font-weight: 400;
+}
+
+.c10 label::after {
+  width: 0.475rem;
+  height: 0.205rem;
+  top: 0.4125rem;
+  left: 0.35rem;
+}
+
+.c10 div[type='checkbox'],
+.c10 div[type='checkbox'] input,
+.c10 div[type='checkbox'] label {
+  height: 1.5rem;
+  width: 1.5rem;
+}
+
+.c9 {
   display: inline-block;
   padding: 0;
   border: none;
@@ -7424,117 +8015,14 @@ Array [
   -webkit-padding-after: 0;
 }
 
-.c10 {
-  font-weight: 600;
-  white-space: pre;
-  font-size: 0.8125rem;
-  font-size: 0.9375rem;
-}
-
 .c16 {
   font-weight: 600;
   white-space: pre;
   font-size: 0.8125rem;
-}
-
-.c13 {
-  position: relative;
-  vertical-align: text-bottom;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.c14 {
-  display: none;
-}
-
-.c14:checked + label {
-  background: #3B46CC;
-  border: 0.0625rem solid rgb(59,70,204);
-}
-
-.c14:checked + label:after {
-  -webkit-transform: translateX(100%);
-  -ms-transform: translateX(100%);
-  transform: translateX(100%);
-  box-shadow: 0 0 0 0.0625rem rgb(59,70,204);
-}
-
-.c14:checked + label:active {
-  box-shadow: none;
-}
-
-.c15 {
-  outline: 0;
-  display: block;
-  width: 2.875rem;
-  height: 1.5rem;
-  position: relative;
   cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  box-sizing: border-box;
-  background: rgb(250,250,250);
-  border-radius: 1.4375rem;
-  -webkit-transition: all 0.3s ease;
-  transition: all 0.3s ease;
-  border: 0.0625rem solid rgb(216,216,216);
 }
 
-.c15::selection {
-  background: none;
-}
-
-.c15:active {
-  box-shadow: inset 0 0 0 1.5rem rgb(216,216,216);
-}
-
-.c15:hover {
-  border: 0.0625rem solid rgb(59,70,204);
-}
-
-.c15:hover:after {
-  box-shadow: 0 0 0 0.0625rem rgb(59,70,204);
-}
-
-.c15:after,
-.c15:before {
-  position: relative;
-  display: block;
-  content: '';
-  width: 50%;
-  height: 100%;
-}
-
-.c15:after {
-  -webkit-transform: translateX(0%);
-  -ms-transform: translateX(0%);
-  transform: translateX(0%);
-  border-radius: 50%;
-  background: rgb(255,255,255);
-  -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275);
-  -webkit-transition: transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275);
-  transition: transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275);
-  box-shadow: 0 0 0 0.0625rem rgb(216,216,216);
-}
-
-.c15:active {
-  box-shadow: inset 0 0 0 2em rgb(216,216,216);
-}
-
-.c15:before {
-  display: none;
-}
-
-.c33 {
+.c35 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -7549,7 +8037,7 @@ Array [
   flex-grow: 1;
 }
 
-.c34 {
+.c36 {
   border: 0.0625rem solid rgb(216,216,216);
   box-sizing: border-box;
   border-radius: 0.125rem;
@@ -7570,7 +8058,7 @@ Array [
   align-items: center;
 }
 
-.c32 {
+.c34 {
   margin: 0;
   padding: 0;
   display: -webkit-box;
@@ -7583,6 +8071,10 @@ Array [
   flex-wrap: wrap;
 }
 
+.c8 {
+  margin-bottom: 0 !important;
+}
+
 .c5 {
   font-weight: 200;
 }
@@ -7624,7 +8116,7 @@ Array [
 }
 
 @media only screen and (min-width:0em) {
-  .c26 {
+  .c27 {
     -webkit-flex-basis: 25%;
     -ms-flex-preferred-size: 25%;
     flex-basis: 25%;
@@ -7633,7 +8125,7 @@ Array [
 }
 
 @media only screen and (min-width:0em) {
-  .c35 {
+  .c37 {
     -webkit-flex-basis: 16.666666666666668%;
     -ms-flex-preferred-size: 16.666666666666668%;
     flex-basis: 16.666666666666668%;
@@ -7680,156 +8172,164 @@ Array [
         className="c7"
     >
         <form
+            className="c8"
             onChange={[Function]}
         >
             <div
-                className="c8"
+                className="c9"
                 name="enabled"
                 role="group"
                 style={undefined}
                 type="checkbox"
             >
-                <div
-                    className="c9"
+                <li
+                    className="c10"
                 >
-                    <label
-                        className="c10 c11"
-                        htmlFor="y"
-                    >
-                        Enable Firewall
-                    </label>
                     <div
-                        className="c12"
+                        checked={false}
+                        className="c11"
+                        disabled={false}
+                        id="M"
+                        onBlur={undefined}
+                        type="checkbox"
                     >
-                        <div
-                            className="c13"
-                        >
-                            <input
-                                checked={undefined}
-                                className="c14"
-                                disabled={false}
-                                id="y"
-                                onBlur={undefined}
-                                type="checkbox"
-                            />
-                            <label
-                                className="c15"
-                                disabled={false}
-                                htmlFor="y"
-                                id="y"
-                                onBlur={undefined}
-                            />
-                            <label
-                                className="c16 c11"
-                                disabled={false}
-                                htmlFor="y"
-                                id="y"
-                                onBlur={undefined}
-                            >
-                                 
-                            </label>
-                        </div>
+                        <input
+                            checked={false}
+                            className="c12 c13"
+                            disabled={false}
+                            id="N"
+                            onBlur={undefined}
+                            type="checkbox"
+                        />
+                        <label
+                            className="c14"
+                            htmlFor="N"
+                        />
                     </div>
-                </div>
+                    <div
+                        checked={false}
+                        className="c15"
+                        disabled={false}
+                        id="M"
+                        onBlur={undefined}
+                    >
+                        <label
+                            className="c16 c17"
+                            htmlFor="N"
+                        >
+                            <div
+                                className="c18"
+                            >
+                                Enable Firewall
+                            </div>
+                        </label>
+                    </div>
+                </li>
             </div>
         </form>
     </div>
     <div
-        className="c17 c3"
+        className="c19 c3"
         height="0.0625rem"
     />
     <div
-        className="c18"
+        className="c20"
     >
-        <form>
+        <form
+            className="c8"
+        >
             <div
-                className="c8"
+                className="c9"
                 name="inactive"
                 role="group"
                 style={undefined}
                 type="checkbox"
             >
-                <div
-                    className="c9"
+                <li
+                    className="c10"
                 >
                     <div
-                        className="c19"
+                        checked={false}
+                        className="c11"
+                        disabled={false}
+                        id="O"
+                        onBlur={undefined}
+                        type="checkbox"
                     >
-                        <div
-                            className="c13"
-                        >
-                            <input
-                                checked={undefined}
-                                className="c14"
-                                id="z"
-                                onBlur={undefined}
-                                type="checkbox"
-                            />
-                            <label
-                                className="c15"
-                                htmlFor="z"
-                                id="z"
-                                onBlur={undefined}
-                            />
-                            <label
-                                className="c16 c11"
-                                htmlFor="z"
-                                id="z"
-                                onBlur={undefined}
-                            >
-                                 
-                            </label>
-                        </div>
+                        <input
+                            checked={false}
+                            className="c12 c13"
+                            disabled={false}
+                            id="P"
+                            onBlur={undefined}
+                            type="checkbox"
+                        />
+                        <label
+                            className="c14"
+                            htmlFor="P"
+                        />
                     </div>
-                    <label
-                        className="c10 c11"
-                        htmlFor="z"
+                    <div
+                        checked={false}
+                        className="c15"
+                        disabled={false}
+                        id="O"
+                        onBlur={undefined}
                     >
-                        Show inactive rules
-                    </label>
-                </div>
+                        <label
+                            className="c16 c17"
+                            htmlFor="P"
+                        >
+                            <div
+                                className="c18"
+                            >
+                                Show inactive rules
+                            </div>
+                        </label>
+                    </div>
+                </li>
             </div>
         </form>
     </div>
     <div
-        className="c20"
+        className="c21"
     >
         <h3
-            className="c21"
+            className="c22"
         >
             Default firewall rules
         </h3>
         <div
-            className="c22"
+            className="c23"
         >
             <div
-                className="c23"
+                className="c24"
             >
                 <div
-                    className="c24"
+                    className="c25"
                     disabled={true}
                     name="card"
                 >
                     <div
-                        className="c25"
+                        className="c26"
                     >
                         <div
                             className="c3"
                         >
                             <div
-                                className="c26"
+                                className="c27"
                             >
                                 <div
-                                    className="c27"
+                                    className="c28"
                                 >
                                     <div
-                                        className="c28"
+                                        className="c29"
                                     >
                                         <div
-                                            className="c29"
+                                            className="c30"
                                         >
                                             <strong
-                                                className="c30"
+                                                className="c31"
                                                 style={
                                                     Object {
                                                         "color": "#D8D8D8",
@@ -7841,7 +8341,7 @@ Array [
                                         </div>
                                     </div>
                                     <div
-                                        className="c9"
+                                        className="c32"
                                     >
                                         <p
                                             className="c6"
@@ -7857,19 +8357,19 @@ Array [
                                 </div>
                             </div>
                             <div
-                                className="c26"
+                                className="c27"
                             >
                                 <div
-                                    className="c27"
+                                    className="c28"
                                 >
                                     <div
-                                        className="c28"
+                                        className="c29"
                                     >
                                         <div
-                                            className="c29"
+                                            className="c30"
                                         >
                                             <strong
-                                                className="c30"
+                                                className="c31"
                                                 style={
                                                     Object {
                                                         "color": "#D8D8D8",
@@ -7881,19 +8381,19 @@ Array [
                                         </div>
                                     </div>
                                     <div
-                                        className="c9"
+                                        className="c32"
                                     >
                                         <div
-                                            className="c31"
+                                            className="c33"
                                         >
                                             <ul
-                                                className="c32"
+                                                className="c34"
                                             >
                                                 <div
-                                                    className="c33"
+                                                    className="c35"
                                                 >
                                                     <li
-                                                        className="c34"
+                                                        className="c36"
                                                         fill={null}
                                                         name="wat"
                                                         style={
@@ -7910,19 +8410,19 @@ Array [
                                 </div>
                             </div>
                             <div
-                                className="c35"
+                                className="c37"
                             >
                                 <div
-                                    className="c27"
+                                    className="c28"
                                 >
                                     <div
-                                        className="c28"
+                                        className="c29"
                                     >
                                         <div
-                                            className="c29"
+                                            className="c30"
                                         >
                                             <strong
-                                                className="c30"
+                                                className="c31"
                                                 style={
                                                     Object {
                                                         "color": "#D8D8D8",
@@ -7934,7 +8434,7 @@ Array [
                                         </div>
                                     </div>
                                     <div
-                                        className="c9"
+                                        className="c32"
                                     >
                                         <p
                                             className="c6"
@@ -7950,19 +8450,19 @@ Array [
                                 </div>
                             </div>
                             <div
-                                className="c35"
+                                className="c37"
                             >
                                 <div
-                                    className="c27"
+                                    className="c28"
                                 >
                                     <div
-                                        className="c28"
+                                        className="c29"
                                     >
                                         <div
-                                            className="c29"
+                                            className="c30"
                                         >
                                             <strong
-                                                className="c30"
+                                                className="c31"
                                                 style={
                                                     Object {
                                                         "color": "#D8D8D8",
@@ -7974,7 +8474,7 @@ Array [
                                         </div>
                                     </div>
                                     <div
-                                        className="c9"
+                                        className="c32"
                                     >
                                         <p
                                             className="c6"
@@ -7990,19 +8490,19 @@ Array [
                                 </div>
                             </div>
                             <div
-                                className="c35"
+                                className="c37"
                             >
                                 <div
-                                    className="c27"
+                                    className="c28"
                                 >
                                     <div
-                                        className="c28"
+                                        className="c29"
                                     >
                                         <div
-                                            className="c29"
+                                            className="c30"
                                         >
                                             <strong
-                                                className="c30"
+                                                className="c31"
                                                 style={
                                                     Object {
                                                         "color": "#D8D8D8",
@@ -8014,7 +8514,7 @@ Array [
                                         </div>
                                     </div>
                                     <div
-                                        className="c9"
+                                        className="c32"
                                     >
                                         <p
                                             className="c6"
diff --git a/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/list.spec.js.snap b/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/list.spec.js.snap
index 01ee67f8..80a5da75 100644
--- a/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/list.spec.js.snap
+++ b/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/list.spec.js.snap
@@ -315,12 +315,38 @@ exports[`renders <List /> without throwing 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-align-content: center;
+  -ms-flex-line-pack: center;
+  align-content: center;
+  height: 1.5rem;
 }
 
 .c18 label {
   font-weight: 400;
 }
 
+.c18 label::after {
+  width: 0.475rem;
+  height: 0.205rem;
+  top: 0.4125rem;
+  left: 0.35rem;
+}
+
+.c18 div[type='checkbox'],
+.c18 div[type='checkbox'] input,
+.c18 div[type='checkbox'] label {
+  height: 1.5rem;
+  width: 1.5rem;
+}
+
 .c6 {
   display: inline-block;
   padding: 0;
@@ -817,8 +843,6 @@ exports[`renders <List /> without throwing 1`] = `
             </span>
             <svg
               height="6"
-              marginBottom="0.125rem"
-              marginLeft="0.5625rem"
               style={
                 Object {
                   "transform": "rotate(180deg)",
@@ -1267,12 +1291,38 @@ exports[`renders <List error /> without throwing 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-align-content: center;
+  -ms-flex-line-pack: center;
+  align-content: center;
+  height: 1.5rem;
 }
 
 .c25 label {
   font-weight: 400;
 }
 
+.c25 label::after {
+  width: 0.475rem;
+  height: 0.205rem;
+  top: 0.4125rem;
+  left: 0.35rem;
+}
+
+.c25 div[type='checkbox'],
+.c25 div[type='checkbox'] input,
+.c25 div[type='checkbox'] label {
+  height: 1.5rem;
+  width: 1.5rem;
+}
+
 .c6 {
   display: inline-block;
   padding: 0;
@@ -1794,8 +1844,6 @@ exports[`renders <List error /> without throwing 1`] = `
             </span>
             <svg
               height="6"
-              marginBottom="0.125rem"
-              marginLeft="0.5625rem"
               style={
                 Object {
                   "transform": "rotate(180deg)",
@@ -2230,12 +2278,38 @@ exports[`renders <List instances /> without throwing 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-align-content: center;
+  -ms-flex-line-pack: center;
+  align-content: center;
+  height: 1.5rem;
 }
 
 .c18 label {
   font-weight: 400;
 }
 
+.c18 label::after {
+  width: 0.475rem;
+  height: 0.205rem;
+  top: 0.4125rem;
+  left: 0.35rem;
+}
+
+.c18 div[type='checkbox'],
+.c18 div[type='checkbox'] input,
+.c18 div[type='checkbox'] label {
+  height: 1.5rem;
+  width: 1.5rem;
+}
+
 .c6 {
   display: inline-block;
   padding: 0;
@@ -2941,8 +3015,6 @@ exports[`renders <List instances /> without throwing 1`] = `
             </span>
             <svg
               height="6"
-              marginBottom="0.125rem"
-              marginLeft="0.5625rem"
               style={
                 Object {
                   "transform": "rotate(180deg)",
@@ -4371,12 +4443,38 @@ exports[`renders <List instances selected /> without throwing 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-align-content: center;
+  -ms-flex-line-pack: center;
+  align-content: center;
+  height: 1.5rem;
 }
 
 .c18 label {
   font-weight: 400;
 }
 
+.c18 label::after {
+  width: 0.475rem;
+  height: 0.205rem;
+  top: 0.4125rem;
+  left: 0.35rem;
+}
+
+.c18 div[type='checkbox'],
+.c18 div[type='checkbox'] input,
+.c18 div[type='checkbox'] label {
+  height: 1.5rem;
+  width: 1.5rem;
+}
+
 .c6 {
   display: inline-block;
   padding: 0;
@@ -5125,8 +5223,6 @@ exports[`renders <List instances selected /> without throwing 1`] = `
             </span>
             <svg
               height="6"
-              marginBottom="0.125rem"
-              marginLeft="0.5625rem"
               style={
                 Object {
                   "transform": "rotate(180deg)",
@@ -6871,12 +6967,38 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-align-content: center;
+  -ms-flex-line-pack: center;
+  align-content: center;
+  height: 1.5rem;
 }
 
 .c18 label {
   font-weight: 400;
 }
 
+.c18 label::after {
+  width: 0.475rem;
+  height: 0.205rem;
+  top: 0.4125rem;
+  left: 0.35rem;
+}
+
+.c18 div[type='checkbox'],
+.c18 div[type='checkbox'] input,
+.c18 div[type='checkbox'] label {
+  height: 1.5rem;
+  width: 1.5rem;
+}
+
 .c6 {
   display: inline-block;
   padding: 0;
@@ -7625,8 +7747,6 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
             </span>
             <svg
               height="6"
-              marginBottom="0.125rem"
-              marginLeft="0.5625rem"
               style={
                 Object {
                   "transform": "rotate(180deg)",
@@ -9568,12 +9688,38 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-align-content: center;
+  -ms-flex-line-pack: center;
+  align-content: center;
+  height: 1.5rem;
 }
 
 .c18 label {
   font-weight: 400;
 }
 
+.c18 label::after {
+  width: 0.475rem;
+  height: 0.205rem;
+  top: 0.4125rem;
+  left: 0.35rem;
+}
+
+.c18 div[type='checkbox'],
+.c18 div[type='checkbox'] input,
+.c18 div[type='checkbox'] label {
+  height: 1.5rem;
+  width: 1.5rem;
+}
+
 .c6 {
   display: inline-block;
   padding: 0;
@@ -10322,8 +10468,6 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
             </span>
             <svg
               height="6"
-              marginBottom="0.125rem"
-              marginLeft="0.5625rem"
               style={
                 Object {
                   "transform": "rotate(180deg)",
diff --git a/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/metadata.spec.js.snap b/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/metadata.spec.js.snap
index a2e9c7a3..d949324a 100644
--- a/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/metadata.spec.js.snap
+++ b/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/metadata.spec.js.snap
@@ -1129,9 +1129,9 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
   z-index: 1;
   line-height: 1.5rem;
   max-width: 100%;
-  border-top: 0px;
-  border-left: 0px;
-  border-right: 0px;
+  border-top: 0;
+  border-left: 0;
+  border-right: 0;
 }
 
 .c28 {
@@ -3647,9 +3647,9 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
   z-index: 1;
   line-height: 1.5rem;
   max-width: 100%;
-  border-top: 0px;
-  border-left: 0px;
-  border-right: 0px;
+  border-top: 0;
+  border-left: 0;
+  border-right: 0;
 }
 
 .c28 {
diff --git a/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/networks.spec.js.snap b/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/networks.spec.js.snap
index 8472ea75..d6f0c596 100644
--- a/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/networks.spec.js.snap
+++ b/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/networks.spec.js.snap
@@ -1202,9 +1202,9 @@ exports[`renders <Networks networks /> without throwing 1`] = `
   z-index: 1;
   line-height: 1.5rem;
   max-width: 100%;
-  border-top: 0px;
-  border-left: 0px;
-  border-right: 0px;
+  border-top: 0;
+  border-left: 0;
+  border-right: 0;
 }
 
 .c25 {
@@ -1214,9 +1214,9 @@ exports[`renders <Networks networks /> without throwing 1`] = `
   z-index: 1;
   line-height: 1.5rem;
   max-width: 100%;
-  border-top: 0px;
-  border-left: 0px;
-  border-right: 0px;
+  border-top: 0;
+  border-left: 0;
+  border-right: 0;
   box-shadow: none;
 }
 
diff --git a/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/tags.spec.js.snap b/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/tags.spec.js.snap
index 230e270a..82177a76 100644
--- a/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/tags.spec.js.snap
+++ b/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/tags.spec.js.snap
@@ -1191,9 +1191,9 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
   z-index: 1;
   line-height: 1.5rem;
   max-width: 100%;
-  border-top: 0px;
-  border-left: 0px;
-  border-right: 0px;
+  border-top: 0;
+  border-left: 0;
+  border-right: 0;
 }
 
 .c24 {
@@ -2921,9 +2921,9 @@ exports[`renders <Tags editing /> without throwing 1`] = `
   z-index: 1;
   line-height: 1.5rem;
   max-width: 100%;
-  border-top: 0px;
-  border-left: 0px;
-  border-right: 0px;
+  border-top: 0;
+  border-left: 0;
+  border-right: 0;
 }
 
 .c25 {
@@ -4326,9 +4326,9 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
   z-index: 1;
   line-height: 1.5rem;
   max-width: 100%;
-  border-top: 0px;
-  border-left: 0px;
-  border-right: 0px;
+  border-top: 0;
+  border-left: 0;
+  border-right: 0;
 }
 
 .c25 {
diff --git a/packages/resource-widgets/src/__tests__/__snapshots__/firewall.spec.js.snap b/packages/resource-widgets/src/__tests__/__snapshots__/firewall.spec.js.snap
index c61da9f4..6de8eca6 100644
--- a/packages/resource-widgets/src/__tests__/__snapshots__/firewall.spec.js.snap
+++ b/packages/resource-widgets/src/__tests__/__snapshots__/firewall.spec.js.snap
@@ -4945,35 +4945,52 @@ Array [
 `;
 
 exports[`renders <ToggleFirewallForm /> without throwing 1`] = `
-.c4 {
+.c10 {
+  margin-right: 0.75rem;
   margin-left: 0.75rem;
 }
 
-.c1 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-align-content: stretch;
-  -ms-flex-line-pack: stretch;
-  align-content: stretch;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
+.c5 {
+  font-family: sans-serif;
+  font-size: 100%;
+  line-height: 1.15;
+  margin: 0;
+  overflow: visible;
 }
 
-.c3 {
+.c5[type='checkbox'],
+.c5[type='radio'] {
+  box-sizing: border-box;
+  padding: 0;
+}
+
+.c5[type='number']::-webkit-inner-spin-button,
+.c5[type='number']::-webkit-outer-spin-button {
+  height: auto;
+}
+
+.c5[type='search'] {
+  -webkit-appearance: textfield;
+  -moz-appearance: textfield;
+  appearance: textfield;
+  outline-offset: -0.125rem;
+}
+
+.c5[type='search']::-webkit-search-cancel-button,
+.c5[type='search']::-webkit-search-decoration {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+}
+
+.c5::-webkit-file-upload-button {
+  -webkit-appearance: button;
+  -moz-appearance: button;
+  appearance: button;
+  font: inherit;
+}
+
+.c9 {
   font-size: 0.9375rem;
   line-height: 1.125rem;
   font-style: normal;
@@ -4983,7 +5000,124 @@ exports[`renders <ToggleFirewallForm /> without throwing 1`] = `
   text-align: left;
 }
 
-.c0 {
+.c4 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  display: none;
+}
+
+.c4:checked + label::after {
+  opacity: 1;
+}
+
+.c4:selected + label::after {
+  opacity: 1;
+}
+
+.c4:checked + label {
+  border-color: rgb(59,70,204);
+}
+
+.c4:selected + label {
+  border-color: rgb(59,70,204);
+}
+
+.c4:disabled + label {
+  background-color: rgb(249,249,249);
+  cursor: not-allowed;
+}
+
+.c6 {
+  color: rgb(100,100,100);
+  position: absolute;
+  width: 1.125rem;
+  height: 1.125rem;
+  box-sizing: border-box;
+  top: 0;
+  right: 0;
+  cursor: pointer;
+  background-color: rgb(255,255,255);
+  box-shadow: none;
+  border: 0.0625rem solid rgb(216,216,216);
+  cursor: pointer;
+  border-radius: 0.25rem;
+  width: 1.125rem;
+  height: 1.125rem;
+}
+
+.c6::after {
+  opacity: 0;
+  content: '';
+  position: absolute;
+  width: 0.375rem;
+  height: 0.125rem;
+  background: transparent;
+  top: 0.3125rem;
+  left: 0.25rem;
+  border: 0.125rem solid rgb(45,45,45);
+  border-top: none;
+  border-right: none;
+  -webkit-transform: rotate(-45deg);
+  -ms-transform: rotate(-45deg);
+  transform: rotate(-45deg);
+}
+
+.c3 {
+  display: inline-block;
+  vertical-align: text-bottom;
+  width: 1.125rem;
+  height: 1.125rem;
+  position: relative;
+  cursor: pointer;
+}
+
+.c7 label {
+  font-weight: normal;
+  font-size: 0.9375rem;
+}
+
+.c2 {
+  list-style-type: none;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-align-content: center;
+  -ms-flex-line-pack: center;
+  align-content: center;
+  height: 1.5rem;
+}
+
+.c2 label {
+  font-weight: 400;
+}
+
+.c2 label::after {
+  width: 0.475rem;
+  height: 0.205rem;
+  top: 0.4125rem;
+  left: 0.35rem;
+}
+
+.c2 div[type='checkbox'],
+.c2 div[type='checkbox'] input,
+.c2 div[type='checkbox'] label {
+  height: 1.5rem;
+  width: 1.5rem;
+}
+
+.c1 {
   display: inline-block;
   padding: 0;
   border: none;
@@ -4995,202 +5129,122 @@ exports[`renders <ToggleFirewallForm /> without throwing 1`] = `
   -webkit-padding-after: 0;
 }
 
-.c2 {
-  font-weight: 600;
-  white-space: pre;
-  font-size: 0.8125rem;
-  font-size: 0.9375rem;
-}
-
 .c8 {
   font-weight: 600;
   white-space: pre;
   font-size: 0.8125rem;
-}
-
-.c5 {
-  position: relative;
-  vertical-align: text-bottom;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.c6 {
-  display: none;
-}
-
-.c6:checked + label {
-  background: #3B46CC;
-  border: 0.0625rem solid rgb(59,70,204);
-}
-
-.c6:checked + label:after {
-  -webkit-transform: translateX(100%);
-  -ms-transform: translateX(100%);
-  transform: translateX(100%);
-  box-shadow: 0 0 0 0.0625rem rgb(59,70,204);
-}
-
-.c6:checked + label:active {
-  box-shadow: none;
-}
-
-.c7 {
-  outline: 0;
-  display: block;
-  width: 2.875rem;
-  height: 1.5rem;
-  position: relative;
   cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  box-sizing: border-box;
-  background: rgb(250,250,250);
-  border-radius: 1.4375rem;
-  -webkit-transition: all 0.3s ease;
-  transition: all 0.3s ease;
-  border: 0.0625rem solid rgb(216,216,216);
 }
 
-.c7::selection {
-  background: none;
-}
-
-.c7:active {
-  box-shadow: inset 0 0 0 1.5rem rgb(216,216,216);
-}
-
-.c7:hover {
-  border: 0.0625rem solid rgb(59,70,204);
-}
-
-.c7:hover:after {
-  box-shadow: 0 0 0 0.0625rem rgb(59,70,204);
-}
-
-.c7:after,
-.c7:before {
-  position: relative;
-  display: block;
-  content: '';
-  width: 50%;
-  height: 100%;
-}
-
-.c7:after {
-  -webkit-transform: translateX(0%);
-  -ms-transform: translateX(0%);
-  transform: translateX(0%);
-  border-radius: 50%;
-  background: rgb(255,255,255);
-  -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275);
-  -webkit-transition: transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275);
-  transition: transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275);
-  box-shadow: 0 0 0 0.0625rem rgb(216,216,216);
-}
-
-.c7:active {
-  box-shadow: inset 0 0 0 2em rgb(216,216,216);
-}
-
-.c7:before {
-  display: none;
+.c0 {
+  margin-bottom: 0 !important;
 }
 
 <form
+  className="c0"
   onChange={undefined}
 >
   <div
-    className="c0"
+    className="c1"
     name="enabled"
     role="group"
     style={undefined}
     type="checkbox"
   >
-    <div
-      className="c1"
+    <li
+      className="c2"
     >
-      <label
-        className="c2 c3"
-        htmlFor="k"
-      >
-        Enable Firewall
-      </label>
       <div
-        className="c4"
+        checked={false}
+        className="c3"
+        disabled={false}
+        id="k"
+        onBlur={undefined}
+        type="checkbox"
       >
-        <div
-          className="c5"
-        >
-          <input
-            checked={undefined}
-            className="c6"
-            disabled={false}
-            id="k"
-            onBlur={undefined}
-            type="checkbox"
-          />
-          <label
-            className="c7"
-            disabled={false}
-            htmlFor="k"
-            id="k"
-            onBlur={undefined}
-          />
-          <label
-            className="c8 c3"
-            disabled={false}
-            htmlFor="k"
-            id="k"
-            onBlur={undefined}
-          >
-             
-          </label>
-        </div>
+        <input
+          checked={false}
+          className="c4 c5"
+          disabled={false}
+          id="l"
+          onBlur={undefined}
+          type="checkbox"
+        />
+        <label
+          className="c6"
+          htmlFor="l"
+        />
       </div>
-    </div>
+      <div
+        checked={false}
+        className="c7"
+        disabled={false}
+        id="k"
+        onBlur={undefined}
+      >
+        <label
+          className="c8 c9"
+          htmlFor="l"
+        >
+          <div
+            className="c10"
+          >
+            Enable Firewall
+          </div>
+        </label>
+      </div>
+    </li>
   </div>
 </form>
 `;
 
 exports[`renders <ToggleFirewallForm submitting /> without throwing 1`] = `
-.c4 {
+.c10 {
+  margin-right: 0.75rem;
   margin-left: 0.75rem;
 }
 
-.c1 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-align-content: stretch;
-  -ms-flex-line-pack: stretch;
-  align-content: stretch;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
+.c5 {
+  font-family: sans-serif;
+  font-size: 100%;
+  line-height: 1.15;
+  margin: 0;
+  overflow: visible;
 }
 
-.c3 {
+.c5[type='checkbox'],
+.c5[type='radio'] {
+  box-sizing: border-box;
+  padding: 0;
+}
+
+.c5[type='number']::-webkit-inner-spin-button,
+.c5[type='number']::-webkit-outer-spin-button {
+  height: auto;
+}
+
+.c5[type='search'] {
+  -webkit-appearance: textfield;
+  -moz-appearance: textfield;
+  appearance: textfield;
+  outline-offset: -0.125rem;
+}
+
+.c5[type='search']::-webkit-search-cancel-button,
+.c5[type='search']::-webkit-search-decoration {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+}
+
+.c5::-webkit-file-upload-button {
+  -webkit-appearance: button;
+  -moz-appearance: button;
+  appearance: button;
+  font: inherit;
+}
+
+.c9 {
   font-size: 0.9375rem;
   line-height: 1.125rem;
   font-style: normal;
@@ -5200,7 +5254,124 @@ exports[`renders <ToggleFirewallForm submitting /> without throwing 1`] = `
   text-align: left;
 }
 
-.c0 {
+.c4 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  display: none;
+}
+
+.c4:checked + label::after {
+  opacity: 1;
+}
+
+.c4:selected + label::after {
+  opacity: 1;
+}
+
+.c4:checked + label {
+  border-color: rgb(59,70,204);
+}
+
+.c4:selected + label {
+  border-color: rgb(59,70,204);
+}
+
+.c4:disabled + label {
+  background-color: rgb(249,249,249);
+  cursor: not-allowed;
+}
+
+.c6 {
+  color: rgb(100,100,100);
+  position: absolute;
+  width: 1.125rem;
+  height: 1.125rem;
+  box-sizing: border-box;
+  top: 0;
+  right: 0;
+  cursor: pointer;
+  background-color: rgb(255,255,255);
+  box-shadow: none;
+  border: 0.0625rem solid rgb(216,216,216);
+  cursor: pointer;
+  border-radius: 0.25rem;
+  width: 1.125rem;
+  height: 1.125rem;
+}
+
+.c6::after {
+  opacity: 0;
+  content: '';
+  position: absolute;
+  width: 0.375rem;
+  height: 0.125rem;
+  background: transparent;
+  top: 0.3125rem;
+  left: 0.25rem;
+  border: 0.125rem solid rgb(45,45,45);
+  border-top: none;
+  border-right: none;
+  -webkit-transform: rotate(-45deg);
+  -ms-transform: rotate(-45deg);
+  transform: rotate(-45deg);
+}
+
+.c3 {
+  display: inline-block;
+  vertical-align: text-bottom;
+  width: 1.125rem;
+  height: 1.125rem;
+  position: relative;
+  cursor: pointer;
+}
+
+.c7 label {
+  font-weight: normal;
+  font-size: 0.9375rem;
+}
+
+.c2 {
+  list-style-type: none;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-align-content: center;
+  -ms-flex-line-pack: center;
+  align-content: center;
+  height: 1.5rem;
+}
+
+.c2 label {
+  font-weight: 400;
+}
+
+.c2 label::after {
+  width: 0.475rem;
+  height: 0.205rem;
+  top: 0.4125rem;
+  left: 0.35rem;
+}
+
+.c2 div[type='checkbox'],
+.c2 div[type='checkbox'] input,
+.c2 div[type='checkbox'] label {
+  height: 1.5rem;
+  width: 1.5rem;
+}
+
+.c1 {
   display: inline-block;
   padding: 0;
   border: none;
@@ -5212,238 +5383,122 @@ exports[`renders <ToggleFirewallForm submitting /> without throwing 1`] = `
   -webkit-padding-after: 0;
 }
 
-.c2 {
-  font-weight: 600;
-  white-space: pre;
-  font-size: 0.8125rem;
-  font-size: 0.9375rem;
-}
-
 .c8 {
   font-weight: 600;
   white-space: pre;
   font-size: 0.8125rem;
-  color: rgb(216,216,216);
-}
-
-.c5 {
-  position: relative;
-  vertical-align: text-bottom;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.c6 {
-  display: none;
-}
-
-.c6:checked + label {
-  background: #3B46CC;
-  border: 0.0625rem solid rgb(59,70,204);
-}
-
-.c6:checked + label:after {
-  -webkit-transform: translateX(100%);
-  -ms-transform: translateX(100%);
-  transform: translateX(100%);
-  box-shadow: 0 0 0 0.0625rem rgb(59,70,204);
-}
-
-.c6:checked + label:active {
-  box-shadow: none;
-}
-
-.c6:checked + label {
-  background: rgb(250,250,250);
-  border: 0.0625rem solid rgb(216,216,216);
-}
-
-.c6:checked + label:after {
-  box-shadow: 0 0 0 0.0625rem rgb(216,216,216);
-}
-
-.c7 {
-  outline: 0;
-  display: block;
-  width: 2.875rem;
-  height: 1.5rem;
-  position: relative;
   cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  box-sizing: border-box;
-  background: rgb(250,250,250);
-  border-radius: 1.4375rem;
-  -webkit-transition: all 0.3s ease;
-  transition: all 0.3s ease;
-  border: 0.0625rem solid rgb(216,216,216);
-  cursor: not-allowed;
 }
 
-.c7::selection {
-  background: none;
-}
-
-.c7:active {
-  box-shadow: inset 0 0 0 1.5rem rgb(216,216,216);
-}
-
-.c7:hover {
-  border: 0.0625rem solid rgb(59,70,204);
-}
-
-.c7:hover:after {
-  box-shadow: 0 0 0 0.0625rem rgb(59,70,204);
-}
-
-.c7:after,
-.c7:before {
-  position: relative;
-  display: block;
-  content: '';
-  width: 50%;
-  height: 100%;
-}
-
-.c7:after {
-  -webkit-transform: translateX(0%);
-  -ms-transform: translateX(0%);
-  transform: translateX(0%);
-  border-radius: 50%;
-  background: rgb(255,255,255);
-  -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275);
-  -webkit-transition: transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275);
-  transition: transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275);
-  box-shadow: 0 0 0 0.0625rem rgb(216,216,216);
-}
-
-.c7:active {
-  box-shadow: inset 0 0 0 2em rgb(216,216,216);
-}
-
-.c7:before {
-  display: none;
-}
-
-.c7:active {
-  box-shadow: none;
-}
-
-.c7:active:after {
-  padding-right: 0;
-}
-
-.c7:before {
-  cursor: not-allowed;
-}
-
-.c7:after {
-  cursor: not-allowed;
-  background: rgb(230,230,230);
-}
-
-.c7:hover {
-  border: 0.0625rem solid rgb(216,216,216);
-}
-
-.c7:hover:after {
-  box-shadow: 0 0 0 0.0625rem rgb(216,216,216);
+.c0 {
+  margin-bottom: 0 !important;
 }
 
 <form
+  className="c0"
   onChange={undefined}
 >
   <div
-    className="c0"
+    className="c1"
     name="enabled"
     role="group"
     style={undefined}
     type="checkbox"
   >
-    <div
-      className="c1"
+    <li
+      className="c2"
     >
-      <label
-        className="c2 c3"
-        htmlFor="l"
-      >
-        Enable Firewall
-      </label>
       <div
-        className="c4"
+        checked={false}
+        className="c3"
+        disabled={true}
+        id="m"
+        onBlur={undefined}
+        type="checkbox"
       >
-        <div
-          className="c5"
-        >
-          <input
-            checked={undefined}
-            className="c6"
-            disabled={true}
-            id="l"
-            onBlur={undefined}
-            type="checkbox"
-          />
-          <label
-            className="c7"
-            disabled={true}
-            htmlFor="l"
-            id="l"
-            onBlur={undefined}
-          />
-          <label
-            className="c8 c3"
-            disabled={true}
-            htmlFor="l"
-            id="l"
-            onBlur={undefined}
-          >
-             
-          </label>
-        </div>
+        <input
+          checked={false}
+          className="c4 c5"
+          disabled={true}
+          id="n"
+          onBlur={undefined}
+          type="checkbox"
+        />
+        <label
+          className="c6"
+          htmlFor="n"
+        />
       </div>
-    </div>
+      <div
+        checked={false}
+        className="c7"
+        disabled={true}
+        id="m"
+        onBlur={undefined}
+      >
+        <label
+          className="c8 c9"
+          htmlFor="n"
+        >
+          <div
+            className="c10"
+          >
+            Enable Firewall
+          </div>
+        </label>
+      </div>
+    </li>
   </div>
 </form>
 `;
 
 exports[`renders <ToggleInactiveForm /> without throwing 1`] = `
-.c2 {
+.c10 {
   margin-right: 0.75rem;
+  margin-left: 0.75rem;
 }
 
-.c1 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-align-content: stretch;
-  -ms-flex-line-pack: stretch;
-  align-content: stretch;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
+.c5 {
+  font-family: sans-serif;
+  font-size: 100%;
+  line-height: 1.15;
+  margin: 0;
+  overflow: visible;
 }
 
-.c7 {
+.c5[type='checkbox'],
+.c5[type='radio'] {
+  box-sizing: border-box;
+  padding: 0;
+}
+
+.c5[type='number']::-webkit-inner-spin-button,
+.c5[type='number']::-webkit-outer-spin-button {
+  height: auto;
+}
+
+.c5[type='search'] {
+  -webkit-appearance: textfield;
+  -moz-appearance: textfield;
+  appearance: textfield;
+  outline-offset: -0.125rem;
+}
+
+.c5[type='search']::-webkit-search-cancel-button,
+.c5[type='search']::-webkit-search-decoration {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+}
+
+.c5::-webkit-file-upload-button {
+  -webkit-appearance: button;
+  -moz-appearance: button;
+  appearance: button;
+  font: inherit;
+}
+
+.c9 {
   font-size: 0.9375rem;
   line-height: 1.125rem;
   font-style: normal;
@@ -5453,7 +5508,124 @@ exports[`renders <ToggleInactiveForm /> without throwing 1`] = `
   text-align: left;
 }
 
-.c0 {
+.c4 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  display: none;
+}
+
+.c4:checked + label::after {
+  opacity: 1;
+}
+
+.c4:selected + label::after {
+  opacity: 1;
+}
+
+.c4:checked + label {
+  border-color: rgb(59,70,204);
+}
+
+.c4:selected + label {
+  border-color: rgb(59,70,204);
+}
+
+.c4:disabled + label {
+  background-color: rgb(249,249,249);
+  cursor: not-allowed;
+}
+
+.c6 {
+  color: rgb(100,100,100);
+  position: absolute;
+  width: 1.125rem;
+  height: 1.125rem;
+  box-sizing: border-box;
+  top: 0;
+  right: 0;
+  cursor: pointer;
+  background-color: rgb(255,255,255);
+  box-shadow: none;
+  border: 0.0625rem solid rgb(216,216,216);
+  cursor: pointer;
+  border-radius: 0.25rem;
+  width: 1.125rem;
+  height: 1.125rem;
+}
+
+.c6::after {
+  opacity: 0;
+  content: '';
+  position: absolute;
+  width: 0.375rem;
+  height: 0.125rem;
+  background: transparent;
+  top: 0.3125rem;
+  left: 0.25rem;
+  border: 0.125rem solid rgb(45,45,45);
+  border-top: none;
+  border-right: none;
+  -webkit-transform: rotate(-45deg);
+  -ms-transform: rotate(-45deg);
+  transform: rotate(-45deg);
+}
+
+.c3 {
+  display: inline-block;
+  vertical-align: text-bottom;
+  width: 1.125rem;
+  height: 1.125rem;
+  position: relative;
+  cursor: pointer;
+}
+
+.c7 label {
+  font-weight: normal;
+  font-size: 0.9375rem;
+}
+
+.c2 {
+  list-style-type: none;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-align-content: center;
+  -ms-flex-line-pack: center;
+  align-content: center;
+  height: 1.5rem;
+}
+
+.c2 label {
+  font-weight: 400;
+}
+
+.c2 label::after {
+  width: 0.475rem;
+  height: 0.205rem;
+  top: 0.4125rem;
+  left: 0.35rem;
+}
+
+.c2 div[type='checkbox'],
+.c2 div[type='checkbox'] input,
+.c2 div[type='checkbox'] label {
+  height: 1.5rem;
+  width: 1.5rem;
+}
+
+.c1 {
   display: inline-block;
   padding: 0;
   border: none;
@@ -5469,159 +5641,66 @@ exports[`renders <ToggleInactiveForm /> without throwing 1`] = `
   font-weight: 600;
   white-space: pre;
   font-size: 0.8125rem;
-  font-size: 0.9375rem;
-}
-
-.c6 {
-  font-weight: 600;
-  white-space: pre;
-  font-size: 0.8125rem;
-}
-
-.c3 {
-  position: relative;
-  vertical-align: text-bottom;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.c4 {
-  display: none;
-}
-
-.c4:checked + label {
-  background: #3B46CC;
-  border: 0.0625rem solid rgb(59,70,204);
-}
-
-.c4:checked + label:after {
-  -webkit-transform: translateX(100%);
-  -ms-transform: translateX(100%);
-  transform: translateX(100%);
-  box-shadow: 0 0 0 0.0625rem rgb(59,70,204);
-}
-
-.c4:checked + label:active {
-  box-shadow: none;
-}
-
-.c5 {
-  outline: 0;
-  display: block;
-  width: 2.875rem;
-  height: 1.5rem;
-  position: relative;
   cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  box-sizing: border-box;
-  background: rgb(250,250,250);
-  border-radius: 1.4375rem;
-  -webkit-transition: all 0.3s ease;
-  transition: all 0.3s ease;
-  border: 0.0625rem solid rgb(216,216,216);
 }
 
-.c5::selection {
-  background: none;
+.c0 {
+  margin-bottom: 0 !important;
 }
 
-.c5:active {
-  box-shadow: inset 0 0 0 1.5rem rgb(216,216,216);
-}
-
-.c5:hover {
-  border: 0.0625rem solid rgb(59,70,204);
-}
-
-.c5:hover:after {
-  box-shadow: 0 0 0 0.0625rem rgb(59,70,204);
-}
-
-.c5:after,
-.c5:before {
-  position: relative;
-  display: block;
-  content: '';
-  width: 50%;
-  height: 100%;
-}
-
-.c5:after {
-  -webkit-transform: translateX(0%);
-  -ms-transform: translateX(0%);
-  transform: translateX(0%);
-  border-radius: 50%;
-  background: rgb(255,255,255);
-  -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275);
-  -webkit-transition: transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275);
-  transition: transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275);
-  box-shadow: 0 0 0 0.0625rem rgb(216,216,216);
-}
-
-.c5:active {
-  box-shadow: inset 0 0 0 2em rgb(216,216,216);
-}
-
-.c5:before {
-  display: none;
-}
-
-<form>
+<form
+  className="c0"
+>
   <div
-    className="c0"
+    className="c1"
     name="inactive"
     role="group"
     style={undefined}
     type="checkbox"
   >
-    <div
-      className="c1"
+    <li
+      className="c2"
     >
       <div
-        className="c2"
+        checked={false}
+        className="c3"
+        disabled={false}
+        id="o"
+        onBlur={undefined}
+        type="checkbox"
       >
-        <div
-          className="c3"
-        >
-          <input
-            checked={undefined}
-            className="c4"
-            id="m"
-            onBlur={undefined}
-            type="checkbox"
-          />
-          <label
-            className="c5"
-            htmlFor="m"
-            id="m"
-            onBlur={undefined}
-          />
-          <label
-            className="c6 c7"
-            htmlFor="m"
-            id="m"
-            onBlur={undefined}
-          >
-             
-          </label>
-        </div>
+        <input
+          checked={false}
+          className="c4 c5"
+          disabled={false}
+          id="p"
+          onBlur={undefined}
+          type="checkbox"
+        />
+        <label
+          className="c6"
+          htmlFor="p"
+        />
       </div>
-      <label
-        className="c8 c7"
-        htmlFor="m"
+      <div
+        checked={false}
+        className="c7"
+        disabled={false}
+        id="o"
+        onBlur={undefined}
       >
-        Show inactive rules
-      </label>
-    </div>
+        <label
+          className="c8 c9"
+          htmlFor="p"
+        >
+          <div
+            className="c10"
+          >
+            Show inactive rules
+          </div>
+        </label>
+      </div>
+    </li>
   </div>
 </form>
 `;
diff --git a/packages/resource-widgets/src/__tests__/__snapshots__/network.spec.js.snap b/packages/resource-widgets/src/__tests__/__snapshots__/network.spec.js.snap
index 032a4532..0fae32ec 100644
--- a/packages/resource-widgets/src/__tests__/__snapshots__/network.spec.js.snap
+++ b/packages/resource-widgets/src/__tests__/__snapshots__/network.spec.js.snap
@@ -239,9 +239,9 @@ exports[`renders <Network /> without throwing 1`] = `
   z-index: 1;
   line-height: 1.5rem;
   max-width: 100%;
-  border-top: 0px;
-  border-left: 0px;
-  border-right: 0px;
+  border-top: 0;
+  border-left: 0;
+  border-right: 0;
 }
 
 .c7 {
@@ -387,12 +387,38 @@ exports[`renders <Network /> without throwing 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-align-content: center;
+  -ms-flex-line-pack: center;
+  align-content: center;
+  height: 1.5rem;
 }
 
 .c9 label {
   font-weight: 400;
 }
 
+.c9 label::after {
+  width: 0.475rem;
+  height: 0.205rem;
+  top: 0.4125rem;
+  left: 0.35rem;
+}
+
+.c9 div[type='checkbox'],
+.c9 div[type='checkbox'] input,
+.c9 div[type='checkbox'] label {
+  height: 1.5rem;
+  width: 1.5rem;
+}
+
 .c8 {
   display: inline-block;
   padding: 0;
@@ -1123,9 +1149,9 @@ exports[`renders <Network {...network} /> without throwing 1`] = `
   z-index: 1;
   line-height: 1.5rem;
   max-width: 100%;
-  border-top: 0px;
-  border-left: 0px;
-  border-right: 0px;
+  border-top: 0;
+  border-left: 0;
+  border-right: 0;
 }
 
 .c7 {
@@ -1271,12 +1297,38 @@ exports[`renders <Network {...network} /> without throwing 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-align-content: center;
+  -ms-flex-line-pack: center;
+  align-content: center;
+  height: 1.5rem;
 }
 
 .c9 label {
   font-weight: 400;
 }
 
+.c9 label::after {
+  width: 0.475rem;
+  height: 0.205rem;
+  top: 0.4125rem;
+  left: 0.35rem;
+}
+
+.c9 div[type='checkbox'],
+.c9 div[type='checkbox'] input,
+.c9 div[type='checkbox'] label {
+  height: 1.5rem;
+  width: 1.5rem;
+}
+
 .c8 {
   display: inline-block;
   padding: 0;
@@ -2020,9 +2072,9 @@ exports[`renders <Network {...network} /> without throwing 3`] = `
   z-index: 1;
   line-height: 1.5rem;
   max-width: 100%;
-  border-top: 0px;
-  border-left: 0px;
-  border-right: 0px;
+  border-top: 0;
+  border-left: 0;
+  border-right: 0;
 }
 
 .c7 {
@@ -2168,12 +2220,38 @@ exports[`renders <Network {...network} /> without throwing 3`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-align-content: center;
+  -ms-flex-line-pack: center;
+  align-content: center;
+  height: 1.5rem;
 }
 
 .c9 label {
   font-weight: 400;
 }
 
+.c9 label::after {
+  width: 0.475rem;
+  height: 0.205rem;
+  top: 0.4125rem;
+  left: 0.35rem;
+}
+
+.c9 div[type='checkbox'],
+.c9 div[type='checkbox'] input,
+.c9 div[type='checkbox'] label {
+  height: 1.5rem;
+  width: 1.5rem;
+}
+
 .c8 {
   display: inline-block;
   padding: 0;
@@ -2954,9 +3032,9 @@ exports[`renders <Network {...network} fabric /> without throwing 1`] = `
   z-index: 1;
   line-height: 1.5rem;
   max-width: 100%;
-  border-top: 0px;
-  border-left: 0px;
-  border-right: 0px;
+  border-top: 0;
+  border-left: 0;
+  border-right: 0;
 }
 
 .c28 {
@@ -2966,9 +3044,9 @@ exports[`renders <Network {...network} fabric /> without throwing 1`] = `
   z-index: 1;
   line-height: 1.5rem;
   max-width: 100%;
-  border-top: 0px;
-  border-left: 0px;
-  border-right: 0px;
+  border-top: 0;
+  border-left: 0;
+  border-right: 0;
   box-shadow: none;
 }
 
@@ -3115,12 +3193,38 @@ exports[`renders <Network {...network} fabric /> without throwing 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-align-content: center;
+  -ms-flex-line-pack: center;
+  align-content: center;
+  height: 1.5rem;
 }
 
 .c9 label {
   font-weight: 400;
 }
 
+.c9 label::after {
+  width: 0.475rem;
+  height: 0.205rem;
+  top: 0.4125rem;
+  left: 0.35rem;
+}
+
+.c9 div[type='checkbox'],
+.c9 div[type='checkbox'] input,
+.c9 div[type='checkbox'] label {
+  height: 1.5rem;
+  width: 1.5rem;
+}
+
 .c8 {
   display: inline-block;
   padding: 0;
@@ -4104,9 +4208,9 @@ exports[`renders <Network {...network} infoExpanded /> without throwing 1`] = `
   z-index: 1;
   line-height: 1.5rem;
   max-width: 100%;
-  border-top: 0px;
-  border-left: 0px;
-  border-right: 0px;
+  border-top: 0;
+  border-left: 0;
+  border-right: 0;
 }
 
 .c7 {
@@ -4252,12 +4356,38 @@ exports[`renders <Network {...network} infoExpanded /> without throwing 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-align-content: center;
+  -ms-flex-line-pack: center;
+  align-content: center;
+  height: 1.5rem;
 }
 
 .c9 label {
   font-weight: 400;
 }
 
+.c9 label::after {
+  width: 0.475rem;
+  height: 0.205rem;
+  top: 0.4125rem;
+  left: 0.35rem;
+}
+
+.c9 div[type='checkbox'],
+.c9 div[type='checkbox'] input,
+.c9 div[type='checkbox'] label {
+  height: 1.5rem;
+  width: 1.5rem;
+}
+
 .c8 {
   display: inline-block;
   padding: 0;
@@ -5374,9 +5504,9 @@ exports[`renders <Network {...network} public /> without throwing 1`] = `
   z-index: 1;
   line-height: 1.5rem;
   max-width: 100%;
-  border-top: 0px;
-  border-left: 0px;
-  border-right: 0px;
+  border-top: 0;
+  border-left: 0;
+  border-right: 0;
 }
 
 .c7 {
@@ -5522,12 +5652,38 @@ exports[`renders <Network {...network} public /> without throwing 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-align-content: center;
+  -ms-flex-line-pack: center;
+  align-content: center;
+  height: 1.5rem;
 }
 
 .c9 label {
   font-weight: 400;
 }
 
+.c9 label::after {
+  width: 0.475rem;
+  height: 0.205rem;
+  top: 0.4125rem;
+  left: 0.35rem;
+}
+
+.c9 div[type='checkbox'],
+.c9 div[type='checkbox'] input,
+.c9 div[type='checkbox'] label {
+  height: 1.5rem;
+  width: 1.5rem;
+}
+
 .c8 {
   display: inline-block;
   padding: 0;
diff --git a/packages/ui-toolkit/src/card/__tests___/__snapshots__/card.spec.js.snap b/packages/ui-toolkit/src/card/__tests___/__snapshots__/card.spec.js.snap
index f27aa88e..340cf040 100644
--- a/packages/ui-toolkit/src/card/__tests___/__snapshots__/card.spec.js.snap
+++ b/packages/ui-toolkit/src/card/__tests___/__snapshots__/card.spec.js.snap
@@ -60,9 +60,9 @@ exports[`Card Card With Header 1`] = `
   z-index: 1;
   line-height: 1.5rem;
   max-width: 100%;
-  border-top: 0px;
-  border-left: 0px;
-  border-right: 0px;
+  border-top: 0;
+  border-left: 0;
+  border-right: 0;
 }
 
 <div
diff --git a/packages/ui-toolkit/src/card/header.js b/packages/ui-toolkit/src/card/header.js
index 9211e60b..9c8f96c9 100644
--- a/packages/ui-toolkit/src/card/header.js
+++ b/packages/ui-toolkit/src/card/header.js
@@ -13,9 +13,9 @@ const BaseHeader = styled(BaseCard)`
   z-index: 1;
   line-height: ${remcalc(24)};
   max-width: 100%;
-  border-top: 0px;
-  border-left: 0px;
-  border-right: 0px;
+  border-top: 0;
+  border-left: 0;
+  border-right: 0;
 
   ${is('radius')`
     border-radius: ${remcalc(4)};
diff --git a/packages/ui-toolkit/src/form/__tests__/__snapshots__/form.spec.js.snap b/packages/ui-toolkit/src/form/__tests__/__snapshots__/form.spec.js.snap
index 0f872689..aa677f79 100644
--- a/packages/ui-toolkit/src/form/__tests__/__snapshots__/form.spec.js.snap
+++ b/packages/ui-toolkit/src/form/__tests__/__snapshots__/form.spec.js.snap
@@ -126,12 +126,38 @@ exports[`Form Checkbox 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-align-content: center;
+  -ms-flex-line-pack: center;
+  align-content: center;
+  height: 1.5rem;
 }
 
 .c0 label {
   font-weight: 400;
 }
 
+.c0 label::after {
+  width: 0.475rem;
+  height: 0.205rem;
+  top: 0.4125rem;
+  left: 0.35rem;
+}
+
+.c0 div[type='checkbox'],
+.c0 div[type='checkbox'] input,
+.c0 div[type='checkbox'] label {
+  height: 1.5rem;
+  width: 1.5rem;
+}
+
 .c7 {
   font-size: 0.9375rem;
   line-height: 1.125rem;
diff --git a/packages/ui-toolkit/src/form/checkbox.js b/packages/ui-toolkit/src/form/checkbox.js
index 22cc5391..ec6689da 100644
--- a/packages/ui-toolkit/src/form/checkbox.js
+++ b/packages/ui-toolkit/src/form/checkbox.js
@@ -1,6 +1,7 @@
 import styled from 'styled-components';
 import React from 'react';
 import PropTypes from 'prop-types';
+import remcalc from 'remcalc';
 
 import BaseInput from './base/input';
 import BaseToggle from './base/toggle';
@@ -12,7 +13,7 @@ const Li = styled.li`
   display: flex;
   align-items: center;
   align-content: center;
-  height: 24px;
+  height: ${remcalc(24)};
 
   label {
     font-weight: 400;
@@ -28,8 +29,8 @@ const Li = styled.li`
   div[type='checkbox'],
   div[type='checkbox'] input,
   div[type='checkbox'] label {
-    height: 24px;
-    width: 24px;
+    height: ${remcalc(24)};
+    width: ${remcalc(24)};
   }
 `;
 
diff --git a/packages/ui-toolkit/src/key-value/__tests__/__snapshots__/key-value.spec.js.snap b/packages/ui-toolkit/src/key-value/__tests__/__snapshots__/key-value.spec.js.snap
index 91f0e1d8..ca9be177 100644
--- a/packages/ui-toolkit/src/key-value/__tests__/__snapshots__/key-value.spec.js.snap
+++ b/packages/ui-toolkit/src/key-value/__tests__/__snapshots__/key-value.spec.js.snap
@@ -306,9 +306,9 @@ exports[`renders <KeyValue /> without throwing 1`] = `
   z-index: 1;
   line-height: 1.5rem;
   max-width: 100%;
-  border-top: 0px;
-  border-left: 0px;
-  border-right: 0px;
+  border-top: 0;
+  border-left: 0;
+  border-right: 0;
 }
 
 .c8 {
@@ -1104,9 +1104,9 @@ exports[`renders <KeyValue expanded={false} /> without throwing 1`] = `
   z-index: 1;
   line-height: 1.5rem;
   max-width: 100%;
-  border-top: 0px;
-  border-left: 0px;
-  border-right: 0px;
+  border-top: 0;
+  border-left: 0;
+  border-right: 0;
   box-shadow: none;
 }
 
@@ -1506,9 +1506,9 @@ exports[`renders <KeyValue input="input" /> without throwing 1`] = `
   z-index: 1;
   line-height: 1.5rem;
   max-width: 100%;
-  border-top: 0px;
-  border-left: 0px;
-  border-right: 0px;
+  border-top: 0;
+  border-left: 0;
+  border-right: 0;
 }
 
 .c8 {
@@ -2451,9 +2451,9 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
   z-index: 1;
   line-height: 1.5rem;
   max-width: 100%;
-  border-top: 0px;
-  border-left: 0px;
-  border-right: 0px;
+  border-top: 0;
+  border-left: 0;
+  border-right: 0;
 }
 
 .c8 {
@@ -3561,9 +3561,9 @@ exports[`renders <KeyValue method="add" /> without throwing 1`] = `
   z-index: 1;
   line-height: 1.5rem;
   max-width: 100%;
-  border-top: 0px;
-  border-left: 0px;
-  border-right: 0px;
+  border-top: 0;
+  border-left: 0;
+  border-right: 0;
 }
 
 .c8 {
@@ -4553,9 +4553,9 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
   z-index: 1;
   line-height: 1.5rem;
   max-width: 100%;
-  border-top: 0px;
-  border-left: 0px;
-  border-right: 0px;
+  border-top: 0;
+  border-left: 0;
+  border-right: 0;
 }
 
 .c8 {
@@ -5559,9 +5559,9 @@ exports[`renders <KeyValue removing /> without throwing 1`] = `
   z-index: 1;
   line-height: 1.5rem;
   max-width: 100%;
-  border-top: 0px;
-  border-left: 0px;
-  border-right: 0px;
+  border-top: 0;
+  border-left: 0;
+  border-right: 0;
 }
 
 .c8 {
@@ -6633,9 +6633,9 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
   z-index: 1;
   line-height: 1.5rem;
   max-width: 100%;
-  border-top: 0px;
-  border-left: 0px;
-  border-right: 0px;
+  border-top: 0;
+  border-left: 0;
+  border-right: 0;
 }
 
 .c8 {
@@ -7764,9 +7764,9 @@ exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
   z-index: 1;
   line-height: 1.5rem;
   max-width: 100%;
-  border-top: 0px;
-  border-left: 0px;
-  border-right: 0px;
+  border-top: 0;
+  border-left: 0;
+  border-right: 0;
 }
 
 .c8 {