Default firewall rules
+Firewall rules from instance tags
+Default firewall rules
-Firewall rules from instance tags
-
+
,
+ .c1 {
+ margin-bottom: 0.25rem;
+}
+
+.c4 {
+ margin-bottom: 1rem;
+}
+
+.c6 {
+ margin-bottom: undefined;
+}
+
+.c15 {
+ margin-top: 4rem;
+}
+
+.c19 {
+ margin-bottom: 0.5rem;
+}
+
+.c14 {
+ margin-top: 2rem;
+}
+
+.c17 {
+ padding: 8rem;
+}
+
+.c5 {
+ color: rgba(73,73,73,1);
+ line-height: 1.5rem;
+ font-size: 0.9375rem;
+ margin: 0;
+}
+
+.c5 + p,
+.c5 + small,
+.c5 + h1,
+.c5 + h2,
+.c5 + label,
+.c5 + h3,
+.c5 + h4,
+.c5 + h5,
+.c5 + div,
+.c5 + span {
+ padding-bottom: 2.25rem;
+}
+
+.c9 {
+ font-size: 0.9375rem;
+ font-style: normal;
+ font-stretch: normal;
+ display: block;
+ color: rgb(70,70,70);
+ text-align: left;
+ margin-right: 0.75rem;
+ font-weight: bold;
+ white-space: pre;
+ font-size: 0.8125rem;
+}
+
+.c0 {
+ margin-right: auto;
+ margin-left: auto;
+ box-sizing: border-box;
+ width: 100%;
+ max-width: 62.5rem;
+ padding-bottom: 1.125rem;
+}
+
+.c2 {
+ box-sizing: border-box;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-flex: 0 1 auto;
+ -ms-flex: 0 1 auto;
+ flex: 0 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.5rem;
+ margin-left: -0.5rem;
+}
+
+.c3 {
+ box-sizing: border-box;
+ -webkit-flex: 0 0 auto;
+ -ms-flex: 0 0 auto;
+ flex: 0 0 auto;
+ padding-right: 0.5rem;
+ padding-left: 0.5rem;
+}
+
+.c21 {
+ color: rgba(73,73,73,1);
+ font-weight: normal;
+ line-height: 1.625rem;
+ font-size: 1.3125rem;
+ margin: 0;
+}
+
+.c21 + p,
+.c21 + small,
+.c21 + h1,
+.c21 + h2,
+.c21 + label,
+.c21 + h3,
+.c21 + h4,
+.c21 + h5,
+.c21 + div,
+.c21 + span {
+ margin-top: 1.5rem;
+}
+
+.c13 {
+ background-color: rgb(216,216,216);
+ margin: 0;
+ height: 0.0625rem;
+}
+
+.c16 {
+ 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: rgba(73,73,73,1);
+ background-color: rgb(255,255,255);
+ border-color: rgb(216,216,216);
+}
+
+.c7 {
+ display: inline-block;
+ margin: 0;
+ padding: 0;
+ border: none;
+ overflow: hidden;
+ height: auto;
+ -webkit-margin-start: 0;
+ -webkit-margin-end: 0;
+ -webkit-padding-before: 0;
+ -webkit-padding-start: 0;
+ -webkit-padding-end: 0;
+ -webkit-padding-after: 0;
+}
+
+.c10 {
+ 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;
+}
+
+.c11 {
+ display: none;
+}
+
+.c11:checked + label {
+ background: #3B46CC;
+ border: 0.0625rem solid rgb(59,70,204);
+}
+
+.c11: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);
+}
+
+.c11:checked + label:active {
+ box-shadow: none;
+}
+
+.c12 {
+ 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);
+ margin-right: 0.375rem;
+}
+
+.c12::selection {
+ background: none;
+}
+
+.c12:active {
+ box-shadow: inset 0 0 0 1.5rem rgb(216,216,216);
+}
+
+.c12:hover {
+ border: 0.0625rem solid rgb(59,70,204);
+}
+
+.c12:hover:after {
+ box-shadow: 0 0 0 0.0625rem rgb(59,70,204);
+}
+
+.c12:after,
+.c12:before {
+ position: relative;
+ display: block;
+ content: '';
+ width: 50%;
+ height: 100%;
+}
+
+.c12: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);
+}
+
+.c12:active {
+ box-shadow: inset 0 0 0 2em rgb(216,216,216);
+}
+
+.c12:before {
+ display: none;
+}
+
+.c8 {
+ 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;
+}
+
+.c18 {
+ 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 {
+ color: rgb(151,151,151);
+}
+
+@media only screen and (min-width:48em) {
+ .c0 {
+ width: 46rem;
+ }
+}
+
+@media only screen and (min-width:64em) {
+ .c0 {
+ width: 61rem;
+ }
+}
+
+@media only screen and (min-width:75em) {
+ .c0 {
+ width: 76rem;
+ }
+}
+
+@media only screen and (max-width:47.9375rem) {
+ .c0 {
+ padding-left: 0.375rem;
+ padding-right: 0.375rem;
+ }
+}
+
+@media only screen and (min-width:0em) {
+ .c3 {
+ -webkit-flex-basis: 100%;
+ -ms-flex-preferred-size: 100%;
+ flex-basis: 100%;
+ max-width: 100%;
+ display: block;
+ }
+}
+
+@media only screen and (min-width:48em) {
+ .c3 {
+ -webkit-flex-basis: 66.66666666666667%;
+ -ms-flex-preferred-size: 66.66666666666667%;
+ flex-basis: 66.66666666666667%;
+ max-width: 66.66666666666667%;
+ display: block;
+ }
+}
+
+
+
+
+
+
+
+
+
+ + Cloud Firewall rules control traffic across instances. Enabling the firewall adds a default set of rules and rules defined by your chosen tags. + + + Read the docs + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+ + Sorry, but we weren’t able to find any firewall rules. +
+
+
,
+]
+`;
+
+exports[`renders
+
+
+
+
+
+
+
+ + Cloud Firewall rules control traffic across instances. Enabling the firewall adds a default set of rules and rules defined by your chosen tags. + + + Read the docs + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + Sorry, but we weren’t able to find any firewall rules. +
+
+
,
+ .c1 {
+ margin-bottom: 0.25rem;
+}
+
+.c4 {
+ margin-bottom: 1rem;
+}
+
+.c6 {
+ margin-bottom: undefined;
+}
+
+.c15 {
+ margin-top: 4rem;
+}
+
+.c19 {
+ margin-bottom: 0.5rem;
+}
+
+.c14 {
+ margin-top: 2rem;
+}
+
+.c17 {
+ padding: 8rem;
+}
+
+.c5 {
+ color: rgba(73,73,73,1);
+ line-height: 1.5rem;
+ font-size: 0.9375rem;
+ margin: 0;
+}
+
+.c5 + p,
+.c5 + small,
+.c5 + h1,
+.c5 + h2,
+.c5 + label,
+.c5 + h3,
+.c5 + h4,
+.c5 + h5,
+.c5 + div,
+.c5 + span {
+ padding-bottom: 2.25rem;
+}
+
+.c9 {
+ font-size: 0.9375rem;
+ font-style: normal;
+ font-stretch: normal;
+ display: block;
+ color: rgb(70,70,70);
+ text-align: left;
+ margin-right: 0.75rem;
+ font-weight: bold;
+ white-space: pre;
+ font-size: 0.8125rem;
+}
+
+.c0 {
+ margin-right: auto;
+ margin-left: auto;
+ box-sizing: border-box;
+ width: 100%;
+ max-width: 62.5rem;
+ padding-bottom: 1.125rem;
+}
+
+.c2 {
+ box-sizing: border-box;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-flex: 0 1 auto;
+ -ms-flex: 0 1 auto;
+ flex: 0 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.5rem;
+ margin-left: -0.5rem;
+}
+
+.c3 {
+ box-sizing: border-box;
+ -webkit-flex: 0 0 auto;
+ -ms-flex: 0 0 auto;
+ flex: 0 0 auto;
+ padding-right: 0.5rem;
+ padding-left: 0.5rem;
+}
+
+.c21 {
+ color: rgba(73,73,73,1);
+ font-weight: normal;
+ line-height: 1.625rem;
+ font-size: 1.3125rem;
+ margin: 0;
+}
+
+.c21 + p,
+.c21 + small,
+.c21 + h1,
+.c21 + h2,
+.c21 + label,
+.c21 + h3,
+.c21 + h4,
+.c21 + h5,
+.c21 + div,
+.c21 + span {
+ margin-top: 1.5rem;
+}
+
+.c13 {
+ background-color: rgb(216,216,216);
+ margin: 0;
+ height: 0.0625rem;
+}
+
+.c16 {
+ 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: rgba(73,73,73,1);
+ background-color: rgb(255,255,255);
+ border-color: rgb(216,216,216);
+}
+
+.c7 {
+ display: inline-block;
+ margin: 0;
+ padding: 0;
+ border: none;
+ overflow: hidden;
+ height: auto;
+ -webkit-margin-start: 0;
+ -webkit-margin-end: 0;
+ -webkit-padding-before: 0;
+ -webkit-padding-start: 0;
+ -webkit-padding-end: 0;
+ -webkit-padding-after: 0;
+}
+
+.c10 {
+ 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;
+}
+
+.c11 {
+ display: none;
+}
+
+.c11:checked + label {
+ background: #3B46CC;
+ border: 0.0625rem solid rgb(59,70,204);
+}
+
+.c11: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);
+}
+
+.c11:checked + label:active {
+ box-shadow: none;
+}
+
+.c12 {
+ 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);
+ margin-right: 0.375rem;
+}
+
+.c12::selection {
+ background: none;
+}
+
+.c12:active {
+ box-shadow: inset 0 0 0 1.5rem rgb(216,216,216);
+}
+
+.c12:hover {
+ border: 0.0625rem solid rgb(59,70,204);
+}
+
+.c12:hover:after {
+ box-shadow: 0 0 0 0.0625rem rgb(59,70,204);
+}
+
+.c12:after,
+.c12:before {
+ position: relative;
+ display: block;
+ content: '';
+ width: 50%;
+ height: 100%;
+}
+
+.c12: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);
+}
+
+.c12:active {
+ box-shadow: inset 0 0 0 2em rgb(216,216,216);
+}
+
+.c12:before {
+ display: none;
+}
+
+.c8 {
+ 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;
+}
+
+.c18 {
+ 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 {
+ color: rgb(151,151,151);
+}
+
+@media only screen and (min-width:48em) {
+ .c0 {
+ width: 46rem;
+ }
+}
+
+@media only screen and (min-width:64em) {
+ .c0 {
+ width: 61rem;
+ }
+}
+
+@media only screen and (min-width:75em) {
+ .c0 {
+ width: 76rem;
+ }
+}
+
+@media only screen and (max-width:47.9375rem) {
+ .c0 {
+ padding-left: 0.375rem;
+ padding-right: 0.375rem;
+ }
+}
+
+@media only screen and (min-width:0em) {
+ .c3 {
+ -webkit-flex-basis: 100%;
+ -ms-flex-preferred-size: 100%;
+ flex-basis: 100%;
+ max-width: 100%;
+ display: block;
+ }
+}
+
+@media only screen and (min-width:48em) {
+ .c3 {
+ -webkit-flex-basis: 66.66666666666667%;
+ -ms-flex-preferred-size: 66.66666666666667%;
+ flex-basis: 66.66666666666667%;
+ max-width: 66.66666666666667%;
+ display: block;
+ }
+}
+
+
+
+
+
+
+
+
+
+ + Cloud Firewall rules control traffic across instances. Enabling the firewall adds a default set of rules and rules defined by your chosen tags. + + + Read the docs + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + Sorry, but we weren’t able to find any firewall rules. +
+
+
,
+]
+`;
+
+exports[`renders
+
+
+
+
+
+
+
+ + Cloud Firewall rules control traffic across instances. Enabling the firewall adds a default set of rules and rules defined by your chosen tags. + + + Read the docs + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + Sorry, but we weren’t able to find any firewall rules. +
+
+
,
+ .c1 {
+ margin-bottom: 0.25rem;
+}
+
+.c4 {
+ margin-bottom: 1rem;
+}
+
+.c7 {
+ fill: rgb(59,70,204);
+ stroke: rgb(59,70,204);
+ -webkit-animation: iCqDak 1.5s ease-out 0s infinite;
+ animation: iCqDak 1.5s ease-out 0s infinite;
+}
+
+.c8 {
+ fill: rgb(59,70,204);
+ stroke: rgb(59,70,204);
+ -webkit-animation: iCqDak 1.5s ease-out 0s infinite;
+ animation: iCqDak 1.5s ease-out 0s infinite;
+ -webkit-animation-delay: 0.5s;
+ animation-delay: 0.5s;
+}
+
+.c9 {
+ fill: rgb(59,70,204);
+ stroke: rgb(59,70,204);
+ -webkit-animation: iCqDak 1.5s ease-out 0s infinite;
+ animation: iCqDak 1.5s ease-out 0s infinite;
+ -webkit-animation-delay: 1s;
+ animation-delay: 1s;
+}
+
+.c5 {
+ color: rgba(73,73,73,1);
+ line-height: 1.5rem;
+ font-size: 0.9375rem;
+ margin: 0;
+}
+
+.c5 + p,
+.c5 + small,
+.c5 + h1,
+.c5 + h2,
+.c5 + label,
+.c5 + h3,
+.c5 + h4,
+.c5 + h5,
+.c5 + div,
+.c5 + span {
+ padding-bottom: 2.25rem;
+}
+
+.c10 {
+ color: rgba(73,73,73,1);
+ line-height: 1.5rem;
+ font-size: 0.9375rem;
+ margin: 0;
+ -webkit-flex: 0 0 auto;
+ -ms-flex: 0 0 auto;
+ flex: 0 0 auto;
+ -webkit-align-self: stretch;
+ -ms-flex-item-align: stretch;
+ align-self: stretch;
+ text-align: center;
+ margin-bottom: 0;
+ margin-left: 0.375rem;
+}
+
+.c10 + p,
+.c10 + small,
+.c10 + h1,
+.c10 + h2,
+.c10 + label,
+.c10 + h3,
+.c10 + h4,
+.c10 + h5,
+.c10 + div,
+.c10 + span {
+ padding-bottom: 2.25rem;
+}
+
+.c6 {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-flex-direction: column;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ -webkit-flex-wrap: nowrap;
+ -ms-flex-wrap: nowrap;
+ flex-wrap: nowrap;
+ -webkit-box-pack: center;
+ -webkit-justify-content: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ -webkit-align-content: center;
+ -ms-flex-line-pack: center;
+ align-content: center;
+ -webkit-align-items: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ min-height: 1.25rem;
+ -webkit-flex: 1 0 auto;
+ -ms-flex: 1 0 auto;
+ flex: 1 0 auto;
+}
+
+.c0 {
+ margin-right: auto;
+ margin-left: auto;
+ box-sizing: border-box;
+ width: 100%;
+ max-width: 62.5rem;
+ padding-bottom: 1.125rem;
+}
+
+.c2 {
+ box-sizing: border-box;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-flex: 0 1 auto;
+ -ms-flex: 0 1 auto;
+ flex: 0 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.5rem;
+ margin-left: -0.5rem;
+}
+
+.c3 {
+ box-sizing: border-box;
+ -webkit-flex: 0 0 auto;
+ -ms-flex: 0 0 auto;
+ flex: 0 0 auto;
+ padding-right: 0.5rem;
+ padding-left: 0.5rem;
+}
+
+@media only screen and (min-width:48em) {
+ .c0 {
+ width: 46rem;
+ }
+}
+
+@media only screen and (min-width:64em) {
+ .c0 {
+ width: 61rem;
+ }
+}
+
+@media only screen and (min-width:75em) {
+ .c0 {
+ width: 76rem;
+ }
+}
+
+@media only screen and (max-width:47.9375rem) {
+ .c0 {
+ padding-left: 0.375rem;
+ padding-right: 0.375rem;
+ }
+}
+
+@media only screen and (min-width:0em) {
+ .c3 {
+ -webkit-flex-basis: 100%;
+ -ms-flex-preferred-size: 100%;
+ flex-basis: 100%;
+ max-width: 100%;
+ display: block;
+ }
+}
+
+@media only screen and (min-width:48em) {
+ .c3 {
+ -webkit-flex-basis: 66.66666666666667%;
+ -ms-flex-preferred-size: 66.66666666666667%;
+ flex-basis: 66.66666666666667%;
+ max-width: 66.66666666666667%;
+ display: block;
+ }
+}
+
+
+
+
+
+
+
+
+
+ + Cloud Firewall rules control traffic across instances. Enabling the firewall adds a default set of rules and rules defined by your chosen tags. + + + Read the docs + +
+
+
+
++ Loading... +
+
+
,
+]
+`;
+
+exports[`renders
+
+
+
+
+
+
+
+ + Cloud Firewall rules control traffic across instances. Enabling the firewall adds a default set of rules and rules defined by your chosen tags. + + + Read the docs + +
+
+
+
++ Loading... +
+
+
+`;
+
+exports[`renders
+
+
+
+
+
+
+
+ + Cloud Firewall rules control traffic across instances. Enabling the firewall adds a default set of rules and rules defined by your chosen tags. + + + Read the docs + +
+
+
+
+
+
+
+ + Ooops! +
++ An error occurred while loading your firewall rules +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + Sorry, but we weren’t able to find any firewall rules. +
+
+
+`;
+
+exports[`renders
+
+
+
+
+
+
+
+ + Cloud Firewall rules control traffic across instances. Enabling the firewall adds a default set of rules and rules defined by your chosen tags. + + + Read the docs + +
+
+
+
+
+
+
+ + Ooops! +
++ error +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + Sorry, but we weren’t able to find any firewall rules. +
+
+
,
+ .c1 {
+ margin-bottom: 0.25rem;
+}
+
+.c4 {
+ margin-bottom: 1rem;
+}
+
+.c6 {
+ margin-bottom: undefined;
+}
+
+.c5 {
+ color: rgba(73,73,73,1);
+ line-height: 1.5rem;
+ font-size: 0.9375rem;
+ margin: 0;
+}
+
+.c5 + p,
+.c5 + small,
+.c5 + h1,
+.c5 + h2,
+.c5 + label,
+.c5 + h3,
+.c5 + h4,
+.c5 + h5,
+.c5 + div,
+.c5 + span {
+ padding-bottom: 2.25rem;
+}
+
+.c9 {
+ font-size: 0.9375rem;
+ font-style: normal;
+ font-stretch: normal;
+ display: block;
+ color: rgb(70,70,70);
+ text-align: left;
+ margin-right: 0.75rem;
+ font-weight: bold;
+ white-space: pre;
+ font-size: 0.8125rem;
+}
+
+.c0 {
+ margin-right: auto;
+ margin-left: auto;
+ box-sizing: border-box;
+ width: 100%;
+ max-width: 62.5rem;
+ padding-bottom: 1.125rem;
+}
+
+.c2 {
+ box-sizing: border-box;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-flex: 0 1 auto;
+ -ms-flex: 0 1 auto;
+ flex: 0 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.5rem;
+ margin-left: -0.5rem;
+}
+
+.c3 {
+ box-sizing: border-box;
+ -webkit-flex: 0 0 auto;
+ -ms-flex: 0 0 auto;
+ flex: 0 0 auto;
+ padding-right: 0.5rem;
+ padding-left: 0.5rem;
+}
+
+.c13 {
+ background-color: rgb(216,216,216);
+ margin: 0;
+ height: 0.0625rem;
+}
+
+.c7 {
+ display: inline-block;
+ margin: 0;
+ padding: 0;
+ border: none;
+ overflow: hidden;
+ height: auto;
+ -webkit-margin-start: 0;
+ -webkit-margin-end: 0;
+ -webkit-padding-before: 0;
+ -webkit-padding-start: 0;
+ -webkit-padding-end: 0;
+ -webkit-padding-after: 0;
+}
+
+.c10 {
+ 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;
+}
+
+.c11 {
+ display: none;
+}
+
+.c11:checked + label {
+ background: #3B46CC;
+ border: 0.0625rem solid rgb(59,70,204);
+}
+
+.c11: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);
+}
+
+.c11:checked + label:active {
+ box-shadow: none;
+}
+
+.c12 {
+ 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);
+ margin-right: 0.375rem;
+}
+
+.c12::selection {
+ background: none;
+}
+
+.c12:active {
+ box-shadow: inset 0 0 0 1.5rem rgb(216,216,216);
+}
+
+.c12:hover {
+ border: 0.0625rem solid rgb(59,70,204);
+}
+
+.c12:hover:after {
+ box-shadow: 0 0 0 0.0625rem rgb(59,70,204);
+}
+
+.c12:after,
+.c12:before {
+ position: relative;
+ display: block;
+ content: '';
+ width: 50%;
+ height: 100%;
+}
+
+.c12: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);
+}
+
+.c12:active {
+ box-shadow: inset 0 0 0 2em rgb(216,216,216);
+}
+
+.c12:before {
+ display: none;
+}
+
+.c8 {
+ 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;
+}
+
+@media only screen and (min-width:48em) {
+ .c0 {
+ width: 46rem;
+ }
+}
+
+@media only screen and (min-width:64em) {
+ .c0 {
+ width: 61rem;
+ }
+}
+
+@media only screen and (min-width:75em) {
+ .c0 {
+ width: 76rem;
+ }
+}
+
+@media only screen and (max-width:47.9375rem) {
+ .c0 {
+ padding-left: 0.375rem;
+ padding-right: 0.375rem;
+ }
+}
+
+@media only screen and (min-width:0em) {
+ .c3 {
+ -webkit-flex-basis: 100%;
+ -ms-flex-preferred-size: 100%;
+ flex-basis: 100%;
+ max-width: 100%;
+ display: block;
+ }
+}
+
+@media only screen and (min-width:48em) {
+ .c3 {
+ -webkit-flex-basis: 66.66666666666667%;
+ -ms-flex-preferred-size: 66.66666666666667%;
+ flex-basis: 66.66666666666667%;
+ max-width: 66.66666666666667%;
+ display: block;
+ }
+}
+
+
+
+
+
+
+
+
+
+ + Cloud Firewall rules control traffic across instances. Enabling the firewall adds a default set of rules and rules defined by your chosen tags. + + + Read the docs + +
+
+
+
+
+
+
,
+ .c1 {
+ margin-bottom: 0.25rem;
+}
+
+.c4 {
+ margin-bottom: 1rem;
+}
+
+.c6 {
+ margin-bottom: undefined;
+}
+
+.c18 {
+ margin-bottom: 0.5rem;
+}
+
+.c14 {
+ margin-top: 2rem;
+}
+
+.c15 {
+ margin-top: undefined;
+}
+
+.c17 {
+ margin-top: 1rem;
+}
+
+.c24 {
+ margin-right: undefined;
+}
+
+.c27 {
+ margin-top: 0.25rem;
+ margin-bottom: 0.25rem;
+}
+
+.c28 {
+ margin-left: undefined;
+}
+
+.c29 {
+ margin-right: 0;
+ margin-bottom: 0;
+}
+
+.c20 {
+ padding-top: undefined;
+ padding-right: 1rem;
+ padding-bottom: undefined;
+ padding-left: 1rem;
+}
+
+.c5 {
+ color: rgba(73,73,73,1);
+ line-height: 1.5rem;
+ font-size: 0.9375rem;
+ margin: 0;
+}
+
+.c5 + p,
+.c5 + small,
+.c5 + h1,
+.c5 + h2,
+.c5 + label,
+.c5 + h3,
+.c5 + h4,
+.c5 + h5,
+.c5 + div,
+.c5 + span {
+ padding-bottom: 2.25rem;
+}
+
+.c9 {
+ font-size: 0.9375rem;
+ font-style: normal;
+ font-stretch: normal;
+ display: block;
+ color: rgb(70,70,70);
+ text-align: left;
+ margin-right: 0.75rem;
+ font-weight: bold;
+ white-space: pre;
+ font-size: 0.8125rem;
+}
+
+.c0 {
+ margin-right: auto;
+ margin-left: auto;
+ box-sizing: border-box;
+ width: 100%;
+ max-width: 62.5rem;
+ padding-bottom: 1.125rem;
+}
+
+.c2 {
+ box-sizing: border-box;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-flex: 0 1 auto;
+ -ms-flex: 0 1 auto;
+ flex: 0 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.5rem;
+ margin-left: -0.5rem;
+}
+
+.c21 {
+ box-sizing: border-box;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-flex: 0 1 auto;
+ -ms-flex: 0 1 auto;
+ flex: 0 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.5rem;
+ margin-left: -0.5rem;
+ -webkit-flex: 1 1 auto;
+ -ms-flex: 1 1 auto;
+ flex: 1 1 auto;
+}
+
+.c3 {
+ box-sizing: border-box;
+ -webkit-flex: 0 0 auto;
+ -ms-flex: 0 0 auto;
+ flex: 0 0 auto;
+ padding-right: 0.5rem;
+ padding-left: 0.5rem;
+}
+
+.c22 {
+ box-sizing: border-box;
+ -webkit-flex: 0 0 auto;
+ -ms-flex: 0 0 auto;
+ flex: 0 0 auto;
+ padding-right: 0.5rem;
+ padding-left: 0.5rem;
+}
+
+.c32 {
+ box-sizing: border-box;
+ -webkit-flex: 0 0 auto;
+ -ms-flex: 0 0 auto;
+ flex: 0 0 auto;
+ padding-right: 0.5rem;
+ padding-left: 0.5rem;
+}
+
+.c16 {
+ color: rgba(73,73,73,1);
+ font-weight: normal;
+ line-height: 1.625rem;
+ font-size: 1.3125rem;
+ margin: 0;
+}
+
+.c13 {
+ background-color: rgb(216,216,216);
+ margin: 0;
+ height: 0.0625rem;
+}
+
+.c30 {
+ 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-box-flex: 1;
+ -webkit-flex-grow: 1;
+ -ms-flex-positive: 1;
+ flex-grow: 1;
+}
+
+.c7 {
+ display: inline-block;
+ margin: 0;
+ padding: 0;
+ border: none;
+ overflow: hidden;
+ height: auto;
+ -webkit-margin-start: 0;
+ -webkit-margin-end: 0;
+ -webkit-padding-before: 0;
+ -webkit-padding-start: 0;
+ -webkit-padding-end: 0;
+ -webkit-padding-after: 0;
+}
+
+.c10 {
+ 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;
+}
+
+.c11 {
+ display: none;
+}
+
+.c11:checked + label {
+ background: #3B46CC;
+ border: 0.0625rem solid rgb(59,70,204);
+}
+
+.c11: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);
+}
+
+.c11:checked + label:active {
+ box-shadow: none;
+}
+
+.c12 {
+ 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);
+ margin-right: 0.375rem;
+}
+
+.c12::selection {
+ background: none;
+}
+
+.c12:active {
+ box-shadow: inset 0 0 0 1.5rem rgb(216,216,216);
+}
+
+.c12:hover {
+ border: 0.0625rem solid rgb(59,70,204);
+}
+
+.c12:hover:after {
+ box-shadow: 0 0 0 0.0625rem rgb(59,70,204);
+}
+
+.c12:after,
+.c12:before {
+ position: relative;
+ display: block;
+ content: '';
+ width: 50%;
+ height: 100%;
+}
+
+.c12: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);
+}
+
+.c12:active {
+ box-shadow: inset 0 0 0 2em rgb(216,216,216);
+}
+
+.c12:before {
+ display: none;
+}
+
+.c25 {
+ -webkit-order: 0;
+ -ms-flex-order: 0;
+ order: 0;
+ -webkit-flex-basis: auto;
+ -ms-flex-preferred-size: auto;
+ flex-basis: auto;
+ -webkit-box-flex: 0;
+ -webkit-flex-grow: 0;
+ -ms-flex-positive: 0;
+ flex-grow: 0;
+ -webkit-flex-shrink: 1;
+ -ms-flex-negative: 1;
+ flex-shrink: 1;
+}
+
+.c31 {
+ border: 0.0625rem solid rgb(216,216,216);
+ box-sizing: border-box;
+ border-radius: 0.1875rem;
+ font-size: 0.8125rem;
+ line-height: 1.125rem;
+ padding: 0.3125rem 0.75rem;
+ 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-box-flex: 1;
+ -webkit-flex-grow: 1;
+ -ms-flex-positive: 1;
+ flex-grow: 1;
+}
+
+.c26 {
+ margin: 0;
+ padding: 0;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ list-style: none;
+ -webkit-flex-wrap: wrap;
+ -ms-flex-wrap: wrap;
+ flex-wrap: wrap;
+}
+
+.c8 {
+ 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;
+}
+
+.c23 {
+ 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-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;
+ width: 100%;
+ height: 100%;
+ -webkit-flex-basis: 100%;
+ -ms-flex-preferred-size: 100%;
+ flex-basis: 100%;
+}
+
+.c19 {
+ display: inline-block;
+ background-color: rgb(255,255,255);
+ border: 0.0625rem solid rgb(216,216,216);
+ min-width: 100%;
+ color: rgb(151,151,151);
+}
+
+@media only screen and (min-width:48em) {
+ .c0 {
+ width: 46rem;
+ }
+}
+
+@media only screen and (min-width:64em) {
+ .c0 {
+ width: 61rem;
+ }
+}
+
+@media only screen and (min-width:75em) {
+ .c0 {
+ width: 76rem;
+ }
+}
+
+@media only screen and (max-width:47.9375rem) {
+ .c0 {
+ padding-left: 0.375rem;
+ padding-right: 0.375rem;
+ }
+}
+
+@media only screen and (min-width:0em) {
+ .c3 {
+ -webkit-flex-basis: 100%;
+ -ms-flex-preferred-size: 100%;
+ flex-basis: 100%;
+ max-width: 100%;
+ display: block;
+ }
+}
+
+@media only screen and (min-width:48em) {
+ .c3 {
+ -webkit-flex-basis: 66.66666666666667%;
+ -ms-flex-preferred-size: 66.66666666666667%;
+ flex-basis: 66.66666666666667%;
+ max-width: 66.66666666666667%;
+ display: block;
+ }
+}
+
+@media only screen and (min-width:0em) {
+ .c22 {
+ -webkit-flex-basis: 25%;
+ -ms-flex-preferred-size: 25%;
+ flex-basis: 25%;
+ max-width: 25%;
+ display: block;
+ }
+}
+
+@media only screen and (min-width:0em) {
+ .c32 {
+ -webkit-flex-basis: 16.666666666666668%;
+ -ms-flex-preferred-size: 16.666666666666668%;
+ flex-basis: 16.666666666666668%;
+ max-width: 16.666666666666668%;
+ display: block;
+ }
+}
+
+
+
+
+
+
+
+
+
+ + Cloud Firewall rules control traffic across instances. Enabling the firewall adds a default set of rules and rules defined by your chosen tags. + + + Read the docs + +
+
+
+
+
+
+
,
+]
+`;
+
+exports[`renders
+
+
+
+
+
+
+
+ + Cloud Firewall rules control traffic across instances. Enabling the firewall adds a default set of rules and rules defined by your chosen tags. + + + Read the docs + +
+
+
+
+
+
+
+
+
+
++ Firewall rules from instance tags +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ From:
+
+
+
+
+ -
+
+
+ Any
+
+
+
+
+
+
+
+
+
+
+ To:
+
+
+
+
+ -
+
- + wat: + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Protocol:
+
+
+
+ tcp
+
+
+
+
+
+
+
+
+
+ Ports:
+
+
+
+ all
+
+
+
+
+
+
+
+
+
+ Action:
+
+
+
+ Allow
+
+
+
,
+ .c1 {
+ margin-bottom: 0.25rem;
+}
+
+.c4 {
+ margin-bottom: 1rem;
+}
+
+.c6 {
+ margin-bottom: undefined;
+}
+
+.c5 {
+ color: rgba(73,73,73,1);
+ line-height: 1.5rem;
+ font-size: 0.9375rem;
+ margin: 0;
+}
+
+.c5 + p,
+.c5 + small,
+.c5 + h1,
+.c5 + h2,
+.c5 + label,
+.c5 + h3,
+.c5 + h4,
+.c5 + h5,
+.c5 + div,
+.c5 + span {
+ padding-bottom: 2.25rem;
+}
+
+.c9 {
+ font-size: 0.9375rem;
+ font-style: normal;
+ font-stretch: normal;
+ display: block;
+ color: rgb(70,70,70);
+ text-align: left;
+ margin-right: 0.75rem;
+ font-weight: bold;
+ white-space: pre;
+ font-size: 0.8125rem;
+}
+
+.c0 {
+ margin-right: auto;
+ margin-left: auto;
+ box-sizing: border-box;
+ width: 100%;
+ max-width: 62.5rem;
+ padding-bottom: 1.125rem;
+}
+
+.c2 {
+ box-sizing: border-box;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-flex: 0 1 auto;
+ -ms-flex: 0 1 auto;
+ flex: 0 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.5rem;
+ margin-left: -0.5rem;
+}
+
+.c3 {
+ box-sizing: border-box;
+ -webkit-flex: 0 0 auto;
+ -ms-flex: 0 0 auto;
+ flex: 0 0 auto;
+ padding-right: 0.5rem;
+ padding-left: 0.5rem;
+}
+
+.c13 {
+ background-color: rgb(216,216,216);
+ margin: 0;
+ height: 0.0625rem;
+}
+
+.c7 {
+ display: inline-block;
+ margin: 0;
+ padding: 0;
+ border: none;
+ overflow: hidden;
+ height: auto;
+ -webkit-margin-start: 0;
+ -webkit-margin-end: 0;
+ -webkit-padding-before: 0;
+ -webkit-padding-start: 0;
+ -webkit-padding-end: 0;
+ -webkit-padding-after: 0;
+}
+
+.c10 {
+ 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;
+}
+
+.c11 {
+ display: none;
+}
+
+.c11:checked + label {
+ background: #3B46CC;
+ border: 0.0625rem solid rgb(59,70,204);
+}
+
+.c11: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);
+}
+
+.c11:checked + label:active {
+ box-shadow: none;
+}
+
+.c12 {
+ 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);
+ margin-right: 0.375rem;
+}
+
+.c12::selection {
+ background: none;
+}
+
+.c12:active {
+ box-shadow: inset 0 0 0 1.5rem rgb(216,216,216);
+}
+
+.c12:hover {
+ border: 0.0625rem solid rgb(59,70,204);
+}
+
+.c12:hover:after {
+ box-shadow: 0 0 0 0.0625rem rgb(59,70,204);
+}
+
+.c12:after,
+.c12:before {
+ position: relative;
+ display: block;
+ content: '';
+ width: 50%;
+ height: 100%;
+}
+
+.c12: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);
+}
+
+.c12:active {
+ box-shadow: inset 0 0 0 2em rgb(216,216,216);
+}
+
+.c12:before {
+ display: none;
+}
+
+.c8 {
+ 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;
+}
+
+@media only screen and (min-width:48em) {
+ .c0 {
+ width: 46rem;
+ }
+}
+
+@media only screen and (min-width:64em) {
+ .c0 {
+ width: 61rem;
+ }
+}
+
+@media only screen and (min-width:75em) {
+ .c0 {
+ width: 76rem;
+ }
+}
+
+@media only screen and (max-width:47.9375rem) {
+ .c0 {
+ padding-left: 0.375rem;
+ padding-right: 0.375rem;
+ }
+}
+
+@media only screen and (min-width:0em) {
+ .c3 {
+ -webkit-flex-basis: 100%;
+ -ms-flex-preferred-size: 100%;
+ flex-basis: 100%;
+ max-width: 100%;
+ display: block;
+ }
+}
+
+@media only screen and (min-width:48em) {
+ .c3 {
+ -webkit-flex-basis: 66.66666666666667%;
+ -ms-flex-preferred-size: 66.66666666666667%;
+ flex-basis: 66.66666666666667%;
+ max-width: 66.66666666666667%;
+ display: block;
+ }
+}
+
+
+
+
+
+
+
+
+
+ + Cloud Firewall rules control traffic across instances. Enabling the firewall adds a default set of rules and rules defined by your chosen tags. + + + Read the docs + +
+
+
+
+
+
+
,
+ .c1 {
+ margin-bottom: 0.25rem;
+}
+
+.c4 {
+ margin-bottom: 1rem;
+}
+
+.c6 {
+ margin-bottom: undefined;
+}
+
+.c15 {
+ margin-top: 4rem;
+}
+
+.c18 {
+ margin-bottom: 0.5rem;
+}
+
+.c14 {
+ margin-top: 2rem;
+}
+
+.c17 {
+ margin-top: 1rem;
+}
+
+.c24 {
+ margin-right: undefined;
+}
+
+.c27 {
+ margin-top: 0.25rem;
+ margin-bottom: 0.25rem;
+}
+
+.c28 {
+ margin-left: undefined;
+}
+
+.c29 {
+ margin-right: 0;
+ margin-bottom: 0;
+}
+
+.c20 {
+ padding-top: undefined;
+ padding-right: 1rem;
+ padding-bottom: undefined;
+ padding-left: 1rem;
+}
+
+.c5 {
+ color: rgba(73,73,73,1);
+ line-height: 1.5rem;
+ font-size: 0.9375rem;
+ margin: 0;
+}
+
+.c5 + p,
+.c5 + small,
+.c5 + h1,
+.c5 + h2,
+.c5 + label,
+.c5 + h3,
+.c5 + h4,
+.c5 + h5,
+.c5 + div,
+.c5 + span {
+ padding-bottom: 2.25rem;
+}
+
+.c9 {
+ font-size: 0.9375rem;
+ font-style: normal;
+ font-stretch: normal;
+ display: block;
+ color: rgb(70,70,70);
+ text-align: left;
+ margin-right: 0.75rem;
+ font-weight: bold;
+ white-space: pre;
+ font-size: 0.8125rem;
+}
+
+.c0 {
+ margin-right: auto;
+ margin-left: auto;
+ box-sizing: border-box;
+ width: 100%;
+ max-width: 62.5rem;
+ padding-bottom: 1.125rem;
+}
+
+.c2 {
+ box-sizing: border-box;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-flex: 0 1 auto;
+ -ms-flex: 0 1 auto;
+ flex: 0 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.5rem;
+ margin-left: -0.5rem;
+}
+
+.c21 {
+ box-sizing: border-box;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-flex: 0 1 auto;
+ -ms-flex: 0 1 auto;
+ flex: 0 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.5rem;
+ margin-left: -0.5rem;
+ -webkit-flex: 1 1 auto;
+ -ms-flex: 1 1 auto;
+ flex: 1 1 auto;
+}
+
+.c3 {
+ box-sizing: border-box;
+ -webkit-flex: 0 0 auto;
+ -ms-flex: 0 0 auto;
+ flex: 0 0 auto;
+ padding-right: 0.5rem;
+ padding-left: 0.5rem;
+}
+
+.c22 {
+ box-sizing: border-box;
+ -webkit-flex: 0 0 auto;
+ -ms-flex: 0 0 auto;
+ flex: 0 0 auto;
+ padding-right: 0.5rem;
+ padding-left: 0.5rem;
+}
+
+.c32 {
+ box-sizing: border-box;
+ -webkit-flex: 0 0 auto;
+ -ms-flex: 0 0 auto;
+ flex: 0 0 auto;
+ padding-right: 0.5rem;
+ padding-left: 0.5rem;
+}
+
+.c16 {
+ color: rgba(73,73,73,1);
+ font-weight: normal;
+ line-height: 1.625rem;
+ font-size: 1.3125rem;
+ margin: 0;
+}
+
+.c13 {
+ background-color: rgb(216,216,216);
+ margin: 0;
+ height: 0.0625rem;
+}
+
+.c30 {
+ 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-box-flex: 1;
+ -webkit-flex-grow: 1;
+ -ms-flex-positive: 1;
+ flex-grow: 1;
+}
+
+.c7 {
+ display: inline-block;
+ margin: 0;
+ padding: 0;
+ border: none;
+ overflow: hidden;
+ height: auto;
+ -webkit-margin-start: 0;
+ -webkit-margin-end: 0;
+ -webkit-padding-before: 0;
+ -webkit-padding-start: 0;
+ -webkit-padding-end: 0;
+ -webkit-padding-after: 0;
+}
+
+.c10 {
+ 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;
+}
+
+.c11 {
+ display: none;
+}
+
+.c11:checked + label {
+ background: #3B46CC;
+ border: 0.0625rem solid rgb(59,70,204);
+}
+
+.c11: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);
+}
+
+.c11:checked + label:active {
+ box-shadow: none;
+}
+
+.c12 {
+ 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);
+ margin-right: 0.375rem;
+}
+
+.c12::selection {
+ background: none;
+}
+
+.c12:active {
+ box-shadow: inset 0 0 0 1.5rem rgb(216,216,216);
+}
+
+.c12:hover {
+ border: 0.0625rem solid rgb(59,70,204);
+}
+
+.c12:hover:after {
+ box-shadow: 0 0 0 0.0625rem rgb(59,70,204);
+}
+
+.c12:after,
+.c12:before {
+ position: relative;
+ display: block;
+ content: '';
+ width: 50%;
+ height: 100%;
+}
+
+.c12: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);
+}
+
+.c12:active {
+ box-shadow: inset 0 0 0 2em rgb(216,216,216);
+}
+
+.c12:before {
+ display: none;
+}
+
+.c25 {
+ -webkit-order: 0;
+ -ms-flex-order: 0;
+ order: 0;
+ -webkit-flex-basis: auto;
+ -ms-flex-preferred-size: auto;
+ flex-basis: auto;
+ -webkit-box-flex: 0;
+ -webkit-flex-grow: 0;
+ -ms-flex-positive: 0;
+ flex-grow: 0;
+ -webkit-flex-shrink: 1;
+ -ms-flex-negative: 1;
+ flex-shrink: 1;
+}
+
+.c31 {
+ border: 0.0625rem solid rgb(216,216,216);
+ box-sizing: border-box;
+ border-radius: 0.1875rem;
+ font-size: 0.8125rem;
+ line-height: 1.125rem;
+ padding: 0.3125rem 0.75rem;
+ 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-box-flex: 1;
+ -webkit-flex-grow: 1;
+ -ms-flex-positive: 1;
+ flex-grow: 1;
+}
+
+.c26 {
+ margin: 0;
+ padding: 0;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ list-style: none;
+ -webkit-flex-wrap: wrap;
+ -ms-flex-wrap: wrap;
+ flex-wrap: wrap;
+}
+
+.c8 {
+ 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;
+}
+
+.c23 {
+ 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-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;
+ width: 100%;
+ height: 100%;
+ -webkit-flex-basis: 100%;
+ -ms-flex-preferred-size: 100%;
+ flex-basis: 100%;
+}
+
+.c19 {
+ display: inline-block;
+ background-color: rgb(255,255,255);
+ border: 0.0625rem solid rgb(216,216,216);
+ min-width: 100%;
+ color: rgb(151,151,151);
+}
+
+@media only screen and (min-width:48em) {
+ .c0 {
+ width: 46rem;
+ }
+}
+
+@media only screen and (min-width:64em) {
+ .c0 {
+ width: 61rem;
+ }
+}
+
+@media only screen and (min-width:75em) {
+ .c0 {
+ width: 76rem;
+ }
+}
+
+@media only screen and (max-width:47.9375rem) {
+ .c0 {
+ padding-left: 0.375rem;
+ padding-right: 0.375rem;
+ }
+}
+
+@media only screen and (min-width:0em) {
+ .c3 {
+ -webkit-flex-basis: 100%;
+ -ms-flex-preferred-size: 100%;
+ flex-basis: 100%;
+ max-width: 100%;
+ display: block;
+ }
+}
+
+@media only screen and (min-width:48em) {
+ .c3 {
+ -webkit-flex-basis: 66.66666666666667%;
+ -ms-flex-preferred-size: 66.66666666666667%;
+ flex-basis: 66.66666666666667%;
+ max-width: 66.66666666666667%;
+ display: block;
+ }
+}
+
+@media only screen and (min-width:0em) {
+ .c22 {
+ -webkit-flex-basis: 25%;
+ -ms-flex-preferred-size: 25%;
+ flex-basis: 25%;
+ max-width: 25%;
+ display: block;
+ }
+}
+
+@media only screen and (min-width:0em) {
+ .c32 {
+ -webkit-flex-basis: 16.666666666666668%;
+ -ms-flex-preferred-size: 16.666666666666668%;
+ flex-basis: 16.666666666666668%;
+ max-width: 16.666666666666668%;
+ display: block;
+ }
+}
+
+
+
+
+
+
+
+
+
+ + Cloud Firewall rules control traffic across instances. Enabling the firewall adds a default set of rules and rules defined by your chosen tags. + + + Read the docs + +
+
+
+
+
+
+
,
+]
+`;
diff --git a/packages/my-joy-beta/src/containers/instances/__tests__/__snapshots__/tags.spec.js.snap b/packages/my-joy-beta/src/containers/instances/__tests__/__snapshots__/tags.spec.js.snap
index bad19e95..bfe4af06 100644
--- a/packages/my-joy-beta/src/containers/instances/__tests__/__snapshots__/tags.spec.js.snap
+++ b/packages/my-joy-beta/src/containers/instances/__tests__/__snapshots__/tags.spec.js.snap
@@ -7059,7 +7059,7 @@ exports[`renders
+
+
+
+
+
+
+
+ + Cloud Firewall rules control traffic across instances. Enabling the firewall adds a default set of rules and rules defined by your chosen tags. + + + Read the docs + +
+
+
+
+
+
+
+
+
+
++ Default firewall rules +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ From:
+
+
+
+
+ -
+
+
+ Any
+
+
+
+
+
+
+
+
+
+
+ To:
+
+
+
+
+ -
+
- + wat: + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Protocol:
+
+
+
+ tcp
+
+
+
+
+
+
+
+
+
+ Ports:
+
+
+
+ all
+
+
+
+
+
+
+
+
+
+ Action:
+
+
+
+ Allow
+
+ firewalls
; +import { + ViewContainer, + Message, + MessageTitle, + MessageDescription, + StatusLoader, + Divider +} from 'joyent-ui-toolkit'; -// -// import PropTypes from 'prop-types'; -// import forceArray from 'force-array'; -// import { compose, graphql } from 'react-apollo'; -// import find from 'lodash.find'; -// import get from 'lodash.get'; -// -// import { -// ViewContainer, -// StatusLoader, -// Message, -// MessageDescription, -// MessageTitle, -// Table, -// TableThead, -// TableTr, -// TableTh, -// TableTbody, -// P -// } from 'joyent-ui-toolkit'; -// -// import GetFirewallRules from '@graphql/list-firewall-rules.gql'; -// import { FirewallRule as InstanceFirewallRule } from '@components/instances'; -// -// const Firewall = ({ -// // eslint-disable-next-line camelcase -// firewallEnabled = false, -// firewallRules = [], -// loading, -// error -// }) => { -// const values = forceArray(firewallRules); -// const _loading = !(loading && !values.length) ? null :