// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`renders <Cns /> without throwing 1`] = `
.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;
}

.c7 {
  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;
}

.c2 {
  margin-bottom: 1.125rem;
}

.c11 {
  margin-bottom: 1.875rem;
}

.c14 {
  margin-top: 0.75rem;
}

.c19 {
  margin-top: 1.875rem;
}

.c20 {
  margin-top: 1.875rem;
  margin-bottom: 1.875rem;
}

.c28 {
  margin-top: 0.1875rem;
}

.c30 {
  margin-left: 0.75rem;
}

.c36 {
  margin-left: 0.375rem;
}

.c10 {
  padding: 1.875rem;
}

.c34 {
  font-family: sans-serif;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
  overflow: visible;
  text-transform: none;
  -webkit-appearance: button;
  -moz-appearance: button;
  appearance: button;
}

.c34::-moz-focus-inner,
.c34[type='button']::-moz-focus-inner,
.c34[type='reset']::-moz-focus-inner,
.c34[type='submit']::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

.c34:-moz-focusring,
.c34[type='button']:-moz-focusring,
.c34[type='reset']:-moz-focusring,
.c34[type='submit']:-moz-focusring {
  outline: 0.0625rem dotted ButtonText;
}

.c6 {
  color: rgb(73,73,73);
  margin: 0;
  line-height: 1.5rem;
  font-size: 0.9375rem;
  margin: 0;
}

.c33 {
  min-width: 7.5rem;
}

.c32 {
  display: inline-block;
}

.c31 {
  box-sizing: border-box;
  display: inline-block;
  -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;
  min-height: 3rem;
  height: 3rem;
  min-width: 7.5rem;
  padding: 0.9375rem 1.125rem;
  position: relative;
  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
  font-size: 0.9375rem;
  text-align: center;
  font-style: normal;
  font-stretch: normal;
  -webkit-letter-spacing: normal;
  -moz-letter-spacing: normal;
  -ms-letter-spacing: normal;
  letter-spacing: normal;
  -webkit-text-decoration: none;
  text-decoration: none;
  white-space: nowrap;
  vertical-align: middle;
  touch-action: manipulation;
  cursor: pointer;
  color: rgb(255,255,255);
  -webkit-text-fill-color: currentcolor;
  background-image: none;
  background-color: rgb(59,70,204);
  border-radius: 0.25rem;
  border: solid 0.0625rem rgb(45,56,132);
}

.c31:focus {
  outline: 0;
  -webkit-text-decoration: none;
  text-decoration: none;
  background-color: rgb(59,70,204);
  border-color: rgb(45,56,132);
}

.c31:hover {
  background-color: rgb(72,83,217);
  border-color: rgb(45,56,132);
}

.c31:active,
.c31:active:hover,
.c31:active:focus {
  background-image: none;
  outline: 0;
  background-color: rgb(45,56,132);
  border-color: rgb(45,56,132);
}

.c31[disabled] {
  cursor: not-allowed;
  pointer-events: none;
}

.c27 {
  font-size: 0.9375rem;
  line-height: 1.125rem;
  font-style: normal;
  font-stretch: normal;
  display: block;
  color: rgb(70,70,70);
  text-align: left;
}

.c0 {
  box-sizing: border-box;
  width: 100%;
  max-width: 78.75rem;
  padding-bottom: 1.125rem;
}

.c13 {
  margin: 0;
  color: rgb(73,73,73);
  font-weight: normal;
  line-height: 1.625rem;
  font-size: 1.3125rem;
}

.c18 {
  height: 1px;
  background-color: rgb(216,216,216);
  height: 0.0625rem;
}

.c8 {
  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);
}

.c9 {
  box-sizing: border-box;
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  border-width: 0;
  background-color: transparent;
}

.c25 {
  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 {
  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;
}

.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-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-align-items: flex-end;
  -webkit-box-align: flex-end;
  -ms-flex-align: flex-end;
  align-items: flex-end;
}

.c24 {
  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;
}

.c35 {
  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 {
  -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;
  display: block;
}

.c29 {
  box-sizing: border-box;
  width: 18.75rem;
  height: 3rem;
  min-height: 3rem;
  padding: 0.8125rem 0.75rem;
  border-radius: 0.25rem;
  background-color: rgb(255,255,255);
  border: 0.0625rem solid rgb(216,216,216);
  color: rgb(73,73,73);
  font-size: 0.9375rem;
  line-height: normal !important;
  font-style: normal;
  font-stretch: normal;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: 0;
  max-width: 22.1875rem;
  text-overflow: ellipsis;
}

.c29:focus {
  border-color: rgb(59,70,204);
  outline: 0;
}

.c29::-webkit-input-placeholder {
  color: rgba(73,73,73,0.5);
}

.c29::-moz-placeholder {
  color: rgba(73,73,73,0.5);
}

.c29:-ms-input-placeholder {
  color: rgba(73,73,73,0.5);
}

.c29:invalid {
  box-shadow: none;
}

.c29:disabled {
  background-color: rgb(250,250,250);
  color: rgb(216,216,216);
  cursor: not-allowed;
}

.c29:disabled::-webkit-input-placeholder {
  color: rgba(73,73,73,0.5);
}

.c29:disabled::-moz-placeholder {
  color: rgba(73,73,73,0.5);
}

.c29:disabled:-ms-input-placeholder {
  color: rgba(73,73,73,0.5);
}

.c26 {
  font-weight: 600;
  white-space: pre;
  font-size: 0.8125rem;
}

.c37 {
  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;
}

.c39 {
  display: none;
}

.c39:checked + label {
  background: #3B46CC;
  border: 0.0625rem solid rgb(59,70,204);
}

.c39: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);
}

.c39:checked + label:active {
  box-shadow: none;
}

.c40 {
  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);
}

.c40::selection {
  background: none;
}

.c40:active {
  box-shadow: inset 0 0 0 1.5rem rgb(216,216,216);
}

.c40:hover {
  border: 0.0625rem solid rgb(59,70,204);
}

.c40:hover:after {
  box-shadow: 0 0 0 0.0625rem rgb(59,70,204);
}

.c40:after,
.c40:before {
  position: relative;
  display: block;
  content: '';
  width: 50%;
  height: 100%;
}

.c40: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);
}

.c40:active {
  box-shadow: inset 0 0 0 2em rgb(216,216,216);
}

.c40:before {
  display: none;
}

.c12 {
  margin: 0;
}

.c15 {
  margin: 0;
}

.c38 {
  margin: 0 6px;
}

.c17 {
  margin-left: 0;
  margin-right: 0;
}

.c21 {
  margin-bottom: 0;
}

.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 (min-width:0em) {
  .c7 {
    -webkit-flex-basis: 100%;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    max-width: 100%;
  }
}

@media only screen and (min-width:48em) {
  .c7 {
    -webkit-flex-basis: 100%;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    max-width: 100%;
  }
}

@media only screen and (min-width:64em) {
  .c7 {
    -webkit-flex-basis: 75%;
    -ms-flex-preferred-size: 75%;
    flex-basis: 75%;
    max-width: 75%;
  }
}

@media only screen and (max-width:37.4375rem) {
  .c0 {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
}

@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
  .c0 {
    padding-left: 1.875rem;
    padding-right: 1.875rem;
  }
}

@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
  .c0 {
    padding-left: 4.375rem;
    padding-right: 4.375rem;
  }
}

<div
  className="c0 c1"
>
  <div
    className="c2"
  >
    <div
      className="c3"
    >
      <div
        className="c4"
      >
        <p
          className="c5 c6"
        >
          Triton CNS is used to automatically update hostnames for your instances. You can serve multiple instances (with multiple IP addresses) under the same hostname by matching the CNS service names.
           
          <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="c3"
  >
    <div
      className="c7"
    >
      <div
        className="c8"
        disabled={false}
        name="card"
      >
        <div
          className="c9 c8"
          disabled={false}
          name="card-outlet"
        >
          <div
            className="c10"
          >
            <div
              className="c11"
            >
              <h3
                className="c12 c13"
              >
                CNS Default Hostnames
              </h3>
              <div
                className="c14"
              >
                <p
                  className="c15 c6"
                >
                  Default hostnames are automatically generated from both the instance name and any attached networks.
                </p>
              </div>
            </div>
            <div
              className="c16"
            />
            <div
              className="c14"
            >
              <div
                className="c17 c18 c3"
                height="0.0625rem"
              />
            </div>
            <div
              className="c19"
            >
              <div
                className="c20"
              >
                <h3
                  className="c12 c13"
                >
                  CNS Service hostnames
                </h3>
                <div
                  className="c14"
                >
                  <p
                    className="c15 c6"
                  >
                    CNS service hostnames are created by attaching a CNS service name to one or more instances. You can serve multiple instances under the same hostname by assigning them to a matching CNS service name.
                  </p>
                </div>
              </div>
              <div
                className="c2"
              >
                <form
                  className="c21"
                  onSubmit={undefined}
                >
                  <div
                    className="c22"
                    wrap={true}
                  >
                    <div
                      className="c23"
                    >
                      <div
                        className="c24"
                      >
                        <div
                          className="c25"
                          name="name"
                          role="group"
                          style={undefined}
                        >
                          <label
                            className="c26 c27"
                            htmlFor="k"
                          >
                            Attach to new CNS service name
                          </label>
                          <div
                            className="c28"
                          >
                            <input
                              className="c29"
                              disabled={false}
                              id="k"
                              onBlur={null}
                              placeholder="Example: mySQLdb"
                            />
                          </div>
                        </div>
                      </div>
                    </div>
                    <div
                      className="c23"
                    >
                      <div
                        className="c30"
                      >
                        <button
                          className="c31 c32 c33 c34"
                          data-ui-button="true"
                          disabled={undefined}
                          href=""
                          type="submit"
                        >
                          Add
                        </button>
                      </div>
                    </div>
                  </div>
                </form>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div
        className="c19"
      >
        <div
          className="c2"
        >
          <div
            className="c25"
            name="cns-enabled"
            role="group"
            style={undefined}
          >
            <div
              className="c35"
            >
              <label
                className="c26 c27"
                disabled={false}
                htmlFor="l"
              >
                Disabled CNS
              </label>
              <div
                className="c36"
              >
                <div
                  className="c37"
                >
                  <input
                    checked={true}
                    className="c38 c39"
                    disabled={false}
                    id="l"
                    onBlur={undefined}
                    onChange={[Function]}
                    type="checkbox"
                  />
                  <label
                    checked={true}
                    className="c38 c40"
                    disabled={false}
                    htmlFor="l"
                    id="l"
                    onBlur={undefined}
                    onChange={[Function]}
                  />
                  <label
                    checked={true}
                    className="c38 c26 c27"
                    disabled={false}
                    htmlFor="l"
                    id="l"
                    onBlur={undefined}
                    onChange={[Function]}
                  >
                     
                    Enabled CNS
                  </label>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`renders <Cns disabled /> without throwing 1`] = `
.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;
}

.c7 {
  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;
}

.c2 {
  margin-bottom: 1.125rem;
}

.c11 {
  margin-top: 1.875rem;
}

.c16 {
  margin-left: 0.375rem;
}

.c10 {
  padding: 1.875rem;
}

.c6 {
  color: rgb(73,73,73);
  margin: 0;
  line-height: 1.5rem;
  font-size: 0.9375rem;
  margin: 0;
}

.c15 {
  font-size: 0.9375rem;
  line-height: 1.125rem;
  font-style: normal;
  font-stretch: normal;
  display: block;
  color: rgb(70,70,70);
  text-align: left;
}

.c0 {
  box-sizing: border-box;
  width: 100%;
  max-width: 78.75rem;
  padding-bottom: 1.125rem;
}

.c8 {
  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);
}

.c9 {
  box-sizing: border-box;
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  border-width: 0;
  background-color: transparent;
}

.c12 {
  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;
}

.c13 {
  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;
}

.c14 {
  font-weight: 600;
  white-space: pre;
  font-size: 0.8125rem;
}

.c17 {
  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;
}

.c18 {
  margin: 0 6px;
}

.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 (min-width:0em) {
  .c7 {
    -webkit-flex-basis: 100%;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    max-width: 100%;
  }
}

@media only screen and (min-width:48em) {
  .c7 {
    -webkit-flex-basis: 100%;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    max-width: 100%;
  }
}

@media only screen and (min-width:64em) {
  .c7 {
    -webkit-flex-basis: 75%;
    -ms-flex-preferred-size: 75%;
    flex-basis: 75%;
    max-width: 75%;
  }
}

@media only screen and (max-width:37.4375rem) {
  .c0 {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
}

@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
  .c0 {
    padding-left: 1.875rem;
    padding-right: 1.875rem;
  }
}

@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
  .c0 {
    padding-left: 4.375rem;
    padding-right: 4.375rem;
  }
}

<div
  className="c0 c1"
>
  <div
    className="c2"
  >
    <div
      className="c3"
    >
      <div
        className="c4"
      >
        <p
          className="c5 c6"
        >
          Triton CNS is used to automatically update hostnames for your instances. You can serve multiple instances (with multiple IP addresses) under the same hostname by matching the CNS service names.
           
          <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="c3"
  >
    <div
      className="c7"
    >
      <div
        className="c8"
        disabled={false}
        name="card"
      >
        <div
          className="c9 c8"
          disabled={false}
          name="card-outlet"
        >
          <div
            className="c10"
          />
        </div>
      </div>
      <div
        className="c11"
      >
        <div
          className="c2"
        >
          <div
            className="c12"
            name="cns-enabled"
            role="group"
            style={undefined}
          >
            <div
              className="c13"
            >
              <label
                className="c14 c15"
                disabled={false}
                htmlFor="r"
              >
                Disabled CNS
              </label>
              <div
                className="c16"
              >
                <div
                  className="c17"
                >
                  <input
                    checked={false}
                    className="c18 c19"
                    disabled={false}
                    id="r"
                    onBlur={undefined}
                    onChange={[Function]}
                    type="checkbox"
                  />
                  <label
                    checked={false}
                    className="c18 c20"
                    disabled={false}
                    htmlFor="r"
                    id="r"
                    onBlur={undefined}
                    onChange={[Function]}
                  />
                  <label
                    checked={false}
                    className="c18 c14 c15"
                    disabled={false}
                    htmlFor="r"
                    id="r"
                    onBlur={undefined}
                    onChange={[Function]}
                  >
                     
                    Enabled CNS
                  </label>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`renders <Cns hostnames /> without throwing 1`] = `
.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;
}

.c7 {
  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;
}

.c25 {
  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;
}

.c2 {
  margin-bottom: 1.125rem;
}

.c11 {
  margin-bottom: 1.875rem;
}

.c14 {
  margin-top: 0.75rem;
}

.c32 {
  margin-top: 1.875rem;
}

.c33 {
  margin-top: 1.875rem;
  margin-bottom: 1.875rem;
}

.c24 {
  margin-top: 0.1875rem;
}

.c40 {
  margin-left: 0.75rem;
}

.c48 {
  margin-left: 0.375rem;
}

.c22 {
  margin-right: 0.375rem;
  margin-bottom: 0.1875rem;
}

.c26 {
  margin-bottom: 0.1875rem;
}

.c45 {
  margin-top: 0.1875rem;
  margin-bottom: 0.375rem;
}

.c46 {
  margin-bottom: 0rem;
}

.c10 {
  padding: 1.875rem;
}

.c20 {
  font-size: 80%;
}

.c44 {
  font-family: sans-serif;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
  overflow: visible;
  text-transform: none;
  -webkit-appearance: button;
  -moz-appearance: button;
  appearance: button;
}

.c44::-moz-focus-inner,
.c44[type='button']::-moz-focus-inner,
.c44[type='reset']::-moz-focus-inner,
.c44[type='submit']::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

.c44:-moz-focusring,
.c44[type='button']:-moz-focusring,
.c44[type='reset']:-moz-focusring,
.c44[type='submit']:-moz-focusring {
  outline: 0.0625rem dotted ButtonText;
}

.c6 {
  color: rgb(73,73,73);
  margin: 0;
  line-height: 1.5rem;
  font-size: 0.9375rem;
  margin: 0;
}

.c43 {
  min-width: 7.5rem;
}

.c42 {
  display: inline-block;
}

.c41 {
  box-sizing: border-box;
  display: inline-block;
  -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;
  min-height: 3rem;
  height: 3rem;
  min-width: 7.5rem;
  padding: 0.9375rem 1.125rem;
  position: relative;
  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
  font-size: 0.9375rem;
  text-align: center;
  font-style: normal;
  font-stretch: normal;
  -webkit-letter-spacing: normal;
  -moz-letter-spacing: normal;
  -ms-letter-spacing: normal;
  letter-spacing: normal;
  -webkit-text-decoration: none;
  text-decoration: none;
  white-space: nowrap;
  vertical-align: middle;
  touch-action: manipulation;
  cursor: pointer;
  color: rgb(255,255,255);
  -webkit-text-fill-color: currentcolor;
  background-image: none;
  background-color: rgb(59,70,204);
  border-radius: 0.25rem;
  border: solid 0.0625rem rgb(45,56,132);
}

.c41:focus {
  outline: 0;
  -webkit-text-decoration: none;
  text-decoration: none;
  background-color: rgb(59,70,204);
  border-color: rgb(45,56,132);
}

.c41:hover {
  background-color: rgb(72,83,217);
  border-color: rgb(45,56,132);
}

.c41:active,
.c41:active:hover,
.c41:active:focus {
  background-image: none;
  outline: 0;
  background-color: rgb(45,56,132);
  border-color: rgb(45,56,132);
}

.c41[disabled] {
  cursor: not-allowed;
  pointer-events: none;
}

.c38 {
  font-size: 0.9375rem;
  line-height: 1.125rem;
  font-style: normal;
  font-stretch: normal;
  display: block;
  color: rgb(70,70,70);
  text-align: left;
}

.c0 {
  box-sizing: border-box;
  width: 100%;
  max-width: 78.75rem;
  padding-bottom: 1.125rem;
}

.c13 {
  margin: 0;
  color: rgb(73,73,73);
  font-weight: normal;
  line-height: 1.625rem;
  font-size: 1.3125rem;
}

.c19 {
  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
  color: rgb(73,73,73);
  line-height: 1.125rem;
  font-size: 0.8125rem;
  font-weight: 600;
}

.c23 {
  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
  color: rgb(73,73,73);
  line-height: 1.125rem;
  font-size: 0.8125rem;
}

.c31 {
  height: 1px;
  background-color: rgb(216,216,216);
  height: 0.0625rem;
}

.c8 {
  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);
}

.c9 {
  box-sizing: border-box;
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  border-width: 0;
  background-color: transparent;
}

.c36 {
  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 {
  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;
}

.c35 {
  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-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-align-items: flex-end;
  -webkit-box-align: flex-end;
  -ms-flex-align: flex-end;
  align-items: flex-end;
}

.c17 {
  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;
}

.c47 {
  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;
}

.c21 {
  -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;
  display: block;
}

.c39 {
  box-sizing: border-box;
  width: 18.75rem;
  height: 3rem;
  min-height: 3rem;
  padding: 0.8125rem 0.75rem;
  border-radius: 0.25rem;
  background-color: rgb(255,255,255);
  border: 0.0625rem solid rgb(216,216,216);
  color: rgb(73,73,73);
  font-size: 0.9375rem;
  line-height: normal !important;
  font-style: normal;
  font-stretch: normal;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: 0;
  max-width: 22.1875rem;
  text-overflow: ellipsis;
}

.c39:focus {
  border-color: rgb(59,70,204);
  outline: 0;
}

.c39::-webkit-input-placeholder {
  color: rgba(73,73,73,0.5);
}

.c39::-moz-placeholder {
  color: rgba(73,73,73,0.5);
}

.c39:-ms-input-placeholder {
  color: rgba(73,73,73,0.5);
}

.c39:invalid {
  box-shadow: none;
}

.c39:disabled {
  background-color: rgb(250,250,250);
  color: rgb(216,216,216);
  cursor: not-allowed;
}

.c39:disabled::-webkit-input-placeholder {
  color: rgba(73,73,73,0.5);
}

.c39:disabled::-moz-placeholder {
  color: rgba(73,73,73,0.5);
}

.c39:disabled:-ms-input-placeholder {
  color: rgba(73,73,73,0.5);
}

.c28 {
  box-sizing: border-box;
  width: 18.75rem;
  height: 3rem;
  min-height: 3rem;
  padding: 0.8125rem 0.75rem;
  border-radius: 0.25rem;
  background-color: rgb(255,255,255);
  border: 0.0625rem solid rgb(216,216,216);
  color: rgb(250,250,250);
  font-size: 0.9375rem;
  line-height: normal !important;
  font-style: normal;
  font-stretch: normal;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: 0;
  background-color: rgb(250,250,250);
  color: rgb(216,216,216);
  cursor: not-allowed;
  font-family: "Roboto Mono",monospace;
  width: 100%;
  min-width: 100%;
}

.c28:focus {
  border-color: rgb(59,70,204);
  outline: 0;
}

.c28::-webkit-input-placeholder {
  color: rgba(73,73,73,0.5);
}

.c28::-moz-placeholder {
  color: rgba(73,73,73,0.5);
}

.c28:-ms-input-placeholder {
  color: rgba(73,73,73,0.5);
}

.c28:invalid {
  box-shadow: none;
}

.c28::-webkit-input-placeholder {
  color: rgb(216,216,216);
}

.c28::-moz-placeholder {
  color: rgb(216,216,216);
}

.c28:-ms-input-placeholder {
  color: rgb(216,216,216);
}

.c28:disabled {
  background-color: rgb(250,250,250);
  color: rgb(216,216,216);
  cursor: not-allowed;
}

.c28:disabled::-webkit-input-placeholder {
  color: rgba(73,73,73,0.5);
}

.c28:disabled::-moz-placeholder {
  color: rgba(73,73,73,0.5);
}

.c28:disabled:-ms-input-placeholder {
  color: rgba(73,73,73,0.5);
}

.c28:disabled {
  color: rgb(73,73,73);
}

.c28:disabled::-webkit-input-placeholder {
  color: rgb(73,73,73);
}

.c28:disabled::-moz-placeholder {
  color: rgb(73,73,73);
}

.c28:disabled:-ms-input-placeholder {
  color: rgb(73,73,73);
}

.c37 {
  font-weight: 600;
  white-space: pre;
  font-size: 0.8125rem;
}

.c49 {
  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;
}

.c51 {
  display: none;
}

.c51:checked + label {
  background: #3B46CC;
  border: 0.0625rem solid rgb(59,70,204);
}

.c51: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);
}

.c51:checked + label:active {
  box-shadow: none;
}

.c52 {
  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);
}

.c52::selection {
  background: none;
}

.c52:active {
  box-shadow: inset 0 0 0 1.5rem rgb(216,216,216);
}

.c52:hover {
  border: 0.0625rem solid rgb(59,70,204);
}

.c52:hover:after {
  box-shadow: 0 0 0 0.0625rem rgb(59,70,204);
}

.c52:after,
.c52:before {
  position: relative;
  display: block;
  content: '';
  width: 50%;
  height: 100%;
}

.c52: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);
}

.c52:active {
  box-shadow: inset 0 0 0 2em rgb(216,216,216);
}

.c52:before {
  display: none;
}

.c27 {
  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;
}

.c27 input {
  padding-right: 1.875rem;
}

.c27 div {
  position: relative;
  left: -1.625rem;
}

.c29 {
  cursor: pointer;
}

.c18 {
  padding-right: 0.75rem;
  margin-right: 0.75rem;
  border-right: 0.0625rem solid rgb(216,216,216);
}

.c12 {
  margin: 0;
}

.c15 {
  margin: 0;
}

.c50 {
  margin: 0 6px;
}

.c30 {
  margin-left: 0;
  margin-right: 0;
}

.c34 {
  margin-bottom: 0;
}

.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 (min-width:0em) {
  .c7 {
    -webkit-flex-basis: 100%;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    max-width: 100%;
  }
}

@media only screen and (min-width:48em) {
  .c7 {
    -webkit-flex-basis: 100%;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    max-width: 100%;
  }
}

@media only screen and (min-width:64em) {
  .c7 {
    -webkit-flex-basis: 75%;
    -ms-flex-preferred-size: 75%;
    flex-basis: 75%;
    max-width: 75%;
  }
}

@media only screen and (min-width:0em) {
  .c25 {
    -webkit-flex-basis: 100%;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    max-width: 100%;
  }
}

@media only screen and (min-width:64em) {
  .c25 {
    -webkit-flex-basis: 100%;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    max-width: 100%;
  }
}

@media only screen and (max-width:37.4375rem) {
  .c0 {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
}

@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
  .c0 {
    padding-left: 1.875rem;
    padding-right: 1.875rem;
  }
}

@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
  .c0 {
    padding-left: 4.375rem;
    padding-right: 4.375rem;
  }
}

<div
  className="c0 c1"
>
  <div
    className="c2"
  >
    <div
      className="c3"
    >
      <div
        className="c4"
      >
        <p
          className="c5 c6"
        >
          Triton CNS is used to automatically update hostnames for your instances. You can serve multiple instances (with multiple IP addresses) under the same hostname by matching the CNS service names.
           
          <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="c3"
  >
    <div
      className="c7"
    >
      <div
        className="c8"
        disabled={false}
        name="card"
      >
        <div
          className="c9 c8"
          disabled={false}
          name="card-outlet"
        >
          <div
            className="c10"
          >
            <div
              className="c11"
            >
              <h3
                className="c12 c13"
              >
                CNS Default Hostnames
              </h3>
              <div
                className="c14"
              >
                <p
                  className="c15 c6"
                >
                  Default hostnames are automatically generated from both the instance name and any attached networks.
                </p>
              </div>
            </div>
            <div
              className="c16"
            >
              <div
                className="c2"
              >
                <div
                  className="c17"
                >
                  <small
                    className="c18 c19 c20"
                  >
                    Instance name
                     
                    hostname
                    
                  </small>
                  <div
                    className="c21"
                  >
                    <div
                      className="c22"
                    >
                      <svg
                        height="16"
                        style={
                          Object {
                            "transform": "rotate(0deg)",
                          }
                        }
                        viewBox="0 0 12 16"
                        width="12"
                      >
                        <path
                          d="M6,13H6a1,1,0,0,1-1-1V10A1,1,0,0,1,6,9H6a1,1,0,0,1,1,1v2A1,1,0,0,1,6,13Zm4-7V4A4,4,0,0,0,2,4H4c0-1.65.35-2,2-2s2,.35,2,2V6H2A2,2,0,0,0,0,8v6a2,2,0,0,0,2,2h8a2,2,0,0,0,2-2V8A2,2,0,0,0,10,6Zm0,7a1,1,0,0,1-1,1H3a1,1,0,0,1-1-1V9A1,1,0,0,1,3,8H9a1,1,0,0,1,1,1Z"
                          fill="rgb(73, 73, 73)"
                        />
                      </svg>
                    </div>
                  </div>
                  <div
                    className="c21"
                  >
                    <small
                      className="c23 c20"
                    >
                      Public
                    </small>
                  </div>
                </div>
                <div
                  className="c24"
                >
                  <div
                    className="c3"
                  >
                    <div
                      className="c25"
                    >
                      <div
                        className="c26"
                      />
                      <div
                        className="c27"
                        disabled={true}
                      >
                        <input
                          className="c28"
                          disabled={true}
                          id=""
                          onBlur={null}
                          value="stuffy-stuff"
                        />
                        <div
                          onClick={undefined}
                          onMouseEnter={[Function]}
                          onMouseLeave={[Function]}
                          style={
                            Object {
                              "display": "inline-block",
                            }
                          }
                        >
                          <svg
                            className="c29"
                            height="19"
                            innerRef={undefined}
                            onClick={[Function]}
                            style={
                              Object {
                                "transform": "rotate(0deg)",
                              }
                            }
                            viewBox="0 0 15 19"
                            width="15"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M5,12l2-2v9H8V10l2,2,1-1L7.5,8,4,11ZM11,1h2a2.15,2.15,0,0,1,2,2V16a2.15,2.15,0,0,1-2,2H10V16h3V3H11V5H4V3H2V16H5v2H2a2.15,2.15,0,0,1-2-2V3A2.15,2.15,0,0,1,2,1H4V0h7ZM9,2H6V3H9V2Z"
                              fill="rgb(73, 73, 73)"
                            />
                          </svg>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div
                className="c2"
              >
                <div
                  className="c17"
                >
                  <small
                    className="c18 c19 c20"
                  >
                    Instance name
                     
                    hostname
                    
                  </small>
                  <div
                    className="c21"
                  >
                    <div
                      className="c22"
                    >
                      <svg
                        height="16"
                        style={
                          Object {
                            "transform": "rotate(0deg)",
                          }
                        }
                        viewBox="0 0 12 16"
                        width="12"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="M10,6V4A4,4,0,0,0,2,4V6H2A2,2,0,0,0,0,8v6a2,2,0,0,0,2,2h8a2,2,0,0,0,2-2V8A2,2,0,0,0,10,6ZM4,4c0-1.65.35-2,2-2s2,.35,2,2V6H4Zm6,9a1,1,0,0,1-1,1H3a1,1,0,0,1-1-1V9A1,1,0,0,1,3,8H9a1,1,0,0,1,1,1ZM6,13H6a1,1,0,0,1-1-1V10A1,1,0,0,1,6,9H6a1,1,0,0,1,1,1v2A1,1,0,0,1,6,13Z"
                          fill="rgb(73, 73, 73)"
                        />
                      </svg>
                    </div>
                  </div>
                  <div
                    className="c21"
                  >
                    <small
                      className="c23 c20"
                    >
                      Private
                    </small>
                  </div>
                </div>
                <div
                  className="c24"
                >
                  <div
                    className="c3"
                  >
                    <div
                      className="c25"
                    >
                      <div
                        className="c26"
                      />
                      <div
                        className="c27"
                        disabled={true}
                      >
                        <input
                          className="c28"
                          disabled={true}
                          id=""
                          onBlur={null}
                          value="stuffy-stuff"
                        />
                        <div
                          onClick={undefined}
                          onMouseEnter={[Function]}
                          onMouseLeave={[Function]}
                          style={
                            Object {
                              "display": "inline-block",
                            }
                          }
                        >
                          <svg
                            className="c29"
                            height="19"
                            innerRef={undefined}
                            onClick={[Function]}
                            style={
                              Object {
                                "transform": "rotate(0deg)",
                              }
                            }
                            viewBox="0 0 15 19"
                            width="15"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M5,12l2-2v9H8V10l2,2,1-1L7.5,8,4,11ZM11,1h2a2.15,2.15,0,0,1,2,2V16a2.15,2.15,0,0,1-2,2H10V16h3V3H11V5H4V3H2V16H5v2H2a2.15,2.15,0,0,1-2-2V3A2.15,2.15,0,0,1,2,1H4V0h7ZM9,2H6V3H9V2Z"
                              fill="rgb(73, 73, 73)"
                            />
                          </svg>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div
              className="c14"
            >
              <div
                className="c30 c31 c3"
                height="0.0625rem"
              />
            </div>
            <div
              className="c32"
            >
              <div
                className="c33"
              >
                <h3
                  className="c12 c13"
                >
                  CNS Service hostnames
                </h3>
                <div
                  className="c14"
                >
                  <p
                    className="c15 c6"
                  >
                    CNS service hostnames are created by attaching a CNS service name to one or more instances. You can serve multiple instances under the same hostname by assigning them to a matching CNS service name.
                  </p>
                </div>
              </div>
              <div
                className="c2"
              >
                <form
                  className="c34"
                  onSubmit={undefined}
                >
                  <div
                    className="c35"
                    wrap={true}
                  >
                    <div
                      className="c21"
                    >
                      <div
                        className="c17"
                      >
                        <div
                          className="c36"
                          name="name"
                          role="group"
                          style={undefined}
                        >
                          <label
                            className="c37 c38"
                            htmlFor="u"
                          >
                            Attach to new CNS service name
                          </label>
                          <div
                            className="c24"
                          >
                            <input
                              className="c39"
                              disabled={false}
                              id="u"
                              onBlur={null}
                              placeholder="Example: mySQLdb"
                            />
                          </div>
                        </div>
                      </div>
                    </div>
                    <div
                      className="c21"
                    >
                      <div
                        className="c40"
                      >
                        <button
                          className="c41 c42 c43 c44"
                          data-ui-button="true"
                          disabled={undefined}
                          href=""
                          type="submit"
                        >
                          Add
                        </button>
                      </div>
                    </div>
                  </div>
                </form>
              </div>
              <div
                className="c32"
              >
                <div
                  className="c16"
                >
                  <div
                    className="c2"
                  >
                    <div
                      className="c17"
                    >
                      <small
                        className="c18 c19 c20"
                      >
                        CNS service
                         
                        hostname
                        s
                      </small>
                      <div
                        className="c21"
                      >
                        <div
                          className="c22"
                        >
                          <svg
                            height="16"
                            style={
                              Object {
                                "transform": "rotate(0deg)",
                              }
                            }
                            viewBox="0 0 12 16"
                            width="12"
                          >
                            <path
                              d="M6,13H6a1,1,0,0,1-1-1V10A1,1,0,0,1,6,9H6a1,1,0,0,1,1,1v2A1,1,0,0,1,6,13Zm4-7V4A4,4,0,0,0,2,4H4c0-1.65.35-2,2-2s2,.35,2,2V6H2A2,2,0,0,0,0,8v6a2,2,0,0,0,2,2h8a2,2,0,0,0,2-2V8A2,2,0,0,0,10,6Zm0,7a1,1,0,0,1-1,1H3a1,1,0,0,1-1-1V9A1,1,0,0,1,3,8H9a1,1,0,0,1,1,1Z"
                              fill="rgb(73, 73, 73)"
                            />
                          </svg>
                        </div>
                      </div>
                      <div
                        className="c21"
                      >
                        <small
                          className="c23 c20"
                        >
                          Public
                        </small>
                      </div>
                    </div>
                    <div
                      className="c45"
                    >
                      <div
                        className="c3"
                      >
                        <div
                          className="c25"
                        >
                          <div
                            className="c26"
                          />
                          <div
                            className="c27"
                            disabled={true}
                          >
                            <input
                              className="c28"
                              disabled={true}
                              id=""
                              onBlur={null}
                              value="serbice"
                            />
                            <div
                              onClick={undefined}
                              onMouseEnter={[Function]}
                              onMouseLeave={[Function]}
                              style={
                                Object {
                                  "display": "inline-block",
                                }
                              }
                            >
                              <svg
                                className="c29"
                                height="19"
                                innerRef={undefined}
                                onClick={[Function]}
                                style={
                                  Object {
                                    "transform": "rotate(0deg)",
                                  }
                                }
                                viewBox="0 0 15 19"
                                width="15"
                                xmlns="http://www.w3.org/2000/svg"
                              >
                                <path
                                  d="M5,12l2-2v9H8V10l2,2,1-1L7.5,8,4,11ZM11,1h2a2.15,2.15,0,0,1,2,2V16a2.15,2.15,0,0,1-2,2H10V16h3V3H11V5H4V3H2V16H5v2H2a2.15,2.15,0,0,1-2-2V3A2.15,2.15,0,0,1,2,1H4V0h7ZM9,2H6V3H9V2Z"
                                  fill="rgb(73, 73, 73)"
                                />
                              </svg>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div
                      className="c45"
                    >
                      <div
                        className="c3"
                      >
                        <div
                          className="c25"
                        >
                          <div
                            className="c26"
                          />
                          <div
                            className="c27"
                            disabled={true}
                          >
                            <input
                              className="c28"
                              disabled={true}
                              id=""
                              onBlur={null}
                              value="dssasda"
                            />
                            <div
                              onClick={undefined}
                              onMouseEnter={[Function]}
                              onMouseLeave={[Function]}
                              style={
                                Object {
                                  "display": "inline-block",
                                }
                              }
                            >
                              <svg
                                className="c29"
                                height="19"
                                innerRef={undefined}
                                onClick={[Function]}
                                style={
                                  Object {
                                    "transform": "rotate(0deg)",
                                  }
                                }
                                viewBox="0 0 15 19"
                                width="15"
                                xmlns="http://www.w3.org/2000/svg"
                              >
                                <path
                                  d="M5,12l2-2v9H8V10l2,2,1-1L7.5,8,4,11ZM11,1h2a2.15,2.15,0,0,1,2,2V16a2.15,2.15,0,0,1-2,2H10V16h3V3H11V5H4V3H2V16H5v2H2a2.15,2.15,0,0,1-2-2V3A2.15,2.15,0,0,1,2,1H4V0h7ZM9,2H6V3H9V2Z"
                                  fill="rgb(73, 73, 73)"
                                />
                              </svg>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div
                      className="c24"
                    >
                      <div
                        className="c3"
                      >
                        <div
                          className="c25"
                        >
                          <div
                            className="c26"
                          />
                          <div
                            className="c27"
                            disabled={true}
                          >
                            <input
                              className="c28"
                              disabled={true}
                              id=""
                              onBlur={null}
                              value="dsasd"
                            />
                            <div
                              onClick={undefined}
                              onMouseEnter={[Function]}
                              onMouseLeave={[Function]}
                              style={
                                Object {
                                  "display": "inline-block",
                                }
                              }
                            >
                              <svg
                                className="c29"
                                height="19"
                                innerRef={undefined}
                                onClick={[Function]}
                                style={
                                  Object {
                                    "transform": "rotate(0deg)",
                                  }
                                }
                                viewBox="0 0 15 19"
                                width="15"
                                xmlns="http://www.w3.org/2000/svg"
                              >
                                <path
                                  d="M5,12l2-2v9H8V10l2,2,1-1L7.5,8,4,11ZM11,1h2a2.15,2.15,0,0,1,2,2V16a2.15,2.15,0,0,1-2,2H10V16h3V3H11V5H4V3H2V16H5v2H2a2.15,2.15,0,0,1-2-2V3A2.15,2.15,0,0,1,2,1H4V0h7ZM9,2H6V3H9V2Z"
                                  fill="rgb(73, 73, 73)"
                                />
                              </svg>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div
                    className="c46"
                  >
                    <div
                      className="c17"
                    >
                      <small
                        className="c18 c19 c20"
                      >
                        CNS service
                         
                        hostname
                        s
                      </small>
                      <div
                        className="c21"
                      >
                        <div
                          className="c22"
                        >
                          <svg
                            height="16"
                            style={
                              Object {
                                "transform": "rotate(0deg)",
                              }
                            }
                            viewBox="0 0 12 16"
                            width="12"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M10,6V4A4,4,0,0,0,2,4V6H2A2,2,0,0,0,0,8v6a2,2,0,0,0,2,2h8a2,2,0,0,0,2-2V8A2,2,0,0,0,10,6ZM4,4c0-1.65.35-2,2-2s2,.35,2,2V6H4Zm6,9a1,1,0,0,1-1,1H3a1,1,0,0,1-1-1V9A1,1,0,0,1,3,8H9a1,1,0,0,1,1,1ZM6,13H6a1,1,0,0,1-1-1V10A1,1,0,0,1,6,9H6a1,1,0,0,1,1,1v2A1,1,0,0,1,6,13Z"
                              fill="rgb(73, 73, 73)"
                            />
                          </svg>
                        </div>
                      </div>
                      <div
                        className="c21"
                      >
                        <small
                          className="c23 c20"
                        >
                          Private
                        </small>
                      </div>
                    </div>
                    <div
                      className="c45"
                    >
                      <div
                        className="c3"
                      >
                        <div
                          className="c25"
                        >
                          <div
                            className="c26"
                          />
                          <div
                            className="c27"
                            disabled={true}
                          >
                            <input
                              className="c28"
                              disabled={true}
                              id=""
                              onBlur={null}
                              value="serbice"
                            />
                            <div
                              onClick={undefined}
                              onMouseEnter={[Function]}
                              onMouseLeave={[Function]}
                              style={
                                Object {
                                  "display": "inline-block",
                                }
                              }
                            >
                              <svg
                                className="c29"
                                height="19"
                                innerRef={undefined}
                                onClick={[Function]}
                                style={
                                  Object {
                                    "transform": "rotate(0deg)",
                                  }
                                }
                                viewBox="0 0 15 19"
                                width="15"
                                xmlns="http://www.w3.org/2000/svg"
                              >
                                <path
                                  d="M5,12l2-2v9H8V10l2,2,1-1L7.5,8,4,11ZM11,1h2a2.15,2.15,0,0,1,2,2V16a2.15,2.15,0,0,1-2,2H10V16h3V3H11V5H4V3H2V16H5v2H2a2.15,2.15,0,0,1-2-2V3A2.15,2.15,0,0,1,2,1H4V0h7ZM9,2H6V3H9V2Z"
                                  fill="rgb(73, 73, 73)"
                                />
                              </svg>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div
                      className="c45"
                    >
                      <div
                        className="c3"
                      >
                        <div
                          className="c25"
                        >
                          <div
                            className="c26"
                          />
                          <div
                            className="c27"
                            disabled={true}
                          >
                            <input
                              className="c28"
                              disabled={true}
                              id=""
                              onBlur={null}
                              value="dssasda"
                            />
                            <div
                              onClick={undefined}
                              onMouseEnter={[Function]}
                              onMouseLeave={[Function]}
                              style={
                                Object {
                                  "display": "inline-block",
                                }
                              }
                            >
                              <svg
                                className="c29"
                                height="19"
                                innerRef={undefined}
                                onClick={[Function]}
                                style={
                                  Object {
                                    "transform": "rotate(0deg)",
                                  }
                                }
                                viewBox="0 0 15 19"
                                width="15"
                                xmlns="http://www.w3.org/2000/svg"
                              >
                                <path
                                  d="M5,12l2-2v9H8V10l2,2,1-1L7.5,8,4,11ZM11,1h2a2.15,2.15,0,0,1,2,2V16a2.15,2.15,0,0,1-2,2H10V16h3V3H11V5H4V3H2V16H5v2H2a2.15,2.15,0,0,1-2-2V3A2.15,2.15,0,0,1,2,1H4V0h7ZM9,2H6V3H9V2Z"
                                  fill="rgb(73, 73, 73)"
                                />
                              </svg>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div
                      className="c24"
                    >
                      <div
                        className="c3"
                      >
                        <div
                          className="c25"
                        >
                          <div
                            className="c26"
                          />
                          <div
                            className="c27"
                            disabled={true}
                          >
                            <input
                              className="c28"
                              disabled={true}
                              id=""
                              onBlur={null}
                              value="dsasd"
                            />
                            <div
                              onClick={undefined}
                              onMouseEnter={[Function]}
                              onMouseLeave={[Function]}
                              style={
                                Object {
                                  "display": "inline-block",
                                }
                              }
                            >
                              <svg
                                className="c29"
                                height="19"
                                innerRef={undefined}
                                onClick={[Function]}
                                style={
                                  Object {
                                    "transform": "rotate(0deg)",
                                  }
                                }
                                viewBox="0 0 15 19"
                                width="15"
                                xmlns="http://www.w3.org/2000/svg"
                              >
                                <path
                                  d="M5,12l2-2v9H8V10l2,2,1-1L7.5,8,4,11ZM11,1h2a2.15,2.15,0,0,1,2,2V16a2.15,2.15,0,0,1-2,2H10V16h3V3H11V5H4V3H2V16H5v2H2a2.15,2.15,0,0,1-2-2V3A2.15,2.15,0,0,1,2,1H4V0h7ZM9,2H6V3H9V2Z"
                                  fill="rgb(73, 73, 73)"
                                />
                              </svg>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div
        className="c32"
      >
        <div
          className="c2"
        >
          <div
            className="c36"
            name="cns-enabled"
            role="group"
            style={undefined}
          >
            <div
              className="c47"
            >
              <label
                className="c37 c38"
                disabled={false}
                htmlFor="v"
              >
                Disabled CNS
              </label>
              <div
                className="c48"
              >
                <div
                  className="c49"
                >
                  <input
                    checked={true}
                    className="c50 c51"
                    disabled={false}
                    id="v"
                    onBlur={undefined}
                    onChange={[Function]}
                    type="checkbox"
                  />
                  <label
                    checked={true}
                    className="c50 c52"
                    disabled={false}
                    htmlFor="v"
                    id="v"
                    onBlur={undefined}
                    onChange={[Function]}
                  />
                  <label
                    checked={true}
                    className="c50 c37 c38"
                    disabled={false}
                    htmlFor="v"
                    id="v"
                    onBlur={undefined}
                    onChange={[Function]}
                  >
                     
                    Enabled CNS
                  </label>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`renders <Cns loading /> without throwing 1`] = `
.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;
}

.c7 {
  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;
}

.c2 {
  margin-bottom: 1.125rem;
}

.c10 {
  padding: 1.875rem;
}

.c12 {
  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;
}

.c13 {
  -webkit-animation-delay: 0.5s;
  animation-delay: 0.5s;
}

.c14 {
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
}

.c6 {
  color: rgb(73,73,73);
  margin: 0;
  line-height: 1.5rem;
  font-size: 0.9375rem;
  margin: 0;
}

.c11 {
  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;
}

.c15 {
  -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;
}

.c0 {
  box-sizing: border-box;
  width: 100%;
  max-width: 78.75rem;
  padding-bottom: 1.125rem;
}

.c8 {
  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);
}

.c9 {
  box-sizing: border-box;
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  border-width: 0;
  background-color: transparent;
}

.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 (min-width:0em) {
  .c7 {
    -webkit-flex-basis: 100%;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    max-width: 100%;
  }
}

@media only screen and (min-width:48em) {
  .c7 {
    -webkit-flex-basis: 100%;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    max-width: 100%;
  }
}

@media only screen and (min-width:64em) {
  .c7 {
    -webkit-flex-basis: 75%;
    -ms-flex-preferred-size: 75%;
    flex-basis: 75%;
    max-width: 75%;
  }
}

@media only screen and (max-width:37.4375rem) {
  .c0 {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
}

@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
  .c0 {
    padding-left: 1.875rem;
    padding-right: 1.875rem;
  }
}

@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
  .c0 {
    padding-left: 4.375rem;
    padding-right: 4.375rem;
  }
}

<div
  className="c0 c1"
>
  <div
    className="c2"
  >
    <div
      className="c3"
    >
      <div
        className="c4"
      >
        <p
          className="c5 c6"
        >
          Triton CNS is used to automatically update hostnames for your instances. You can serve multiple instances (with multiple IP addresses) under the same hostname by matching the CNS service names.
           
          <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="c3"
  >
    <div
      className="c7"
    >
      <div
        className="c8"
        disabled={false}
        name="card"
      >
        <div
          className="c9 c8"
          disabled={false}
          name="card-outlet"
        >
          <div
            className="c10"
          >
            <div
              className="c11"
            >
              <svg
                height="10"
                width="28"
              >
                <rect
                  className="c12"
                  height="6"
                  width="6"
                  x="2"
                  y="2"
                />
                <rect
                  className="c13 c12"
                  height="6"
                  width="6"
                  x="11"
                  y="2"
                />
                <rect
                  className="c14 c12"
                  height="6"
                  width="6"
                  x="20"
                  y="2"
                />
              </svg>
              <p
                className="c15 c6"
              >
                Loading...
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`renders <Cns loadingError /> without throwing 1`] = `
.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;
}

.c7 {
  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;
}

.c2 {
  margin-bottom: 1.125rem;
}

.c11 {
  margin-bottom: 1.875rem;
}

.c19 {
  margin-top: 0.75rem;
}

.c24 {
  margin-top: 1.875rem;
}

.c25 {
  margin-top: 1.875rem;
  margin-bottom: 1.875rem;
}

.c33 {
  margin-top: 0.1875rem;
}

.c35 {
  margin-left: 0.75rem;
}

.c10 {
  padding: 1.875rem;
}

.c39 {
  font-family: sans-serif;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
  overflow: visible;
  text-transform: none;
  -webkit-appearance: button;
  -moz-appearance: button;
  appearance: button;
}

.c39::-moz-focus-inner,
.c39[type='button']::-moz-focus-inner,
.c39[type='reset']::-moz-focus-inner,
.c39[type='submit']::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

.c39:-moz-focusring,
.c39[type='button']:-moz-focusring,
.c39[type='reset']:-moz-focusring,
.c39[type='submit']:-moz-focusring {
  outline: 0.0625rem dotted ButtonText;
}

.c6 {
  color: rgb(73,73,73);
  margin: 0;
  line-height: 1.5rem;
  font-size: 0.9375rem;
  margin: 0;
}

.c38 {
  min-width: 7.5rem;
}

.c37 {
  display: inline-block;
}

.c36 {
  box-sizing: border-box;
  display: inline-block;
  -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;
  min-height: 3rem;
  height: 3rem;
  min-width: 7.5rem;
  padding: 0.9375rem 1.125rem;
  position: relative;
  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
  font-size: 0.9375rem;
  text-align: center;
  font-style: normal;
  font-stretch: normal;
  -webkit-letter-spacing: normal;
  -moz-letter-spacing: normal;
  -ms-letter-spacing: normal;
  letter-spacing: normal;
  -webkit-text-decoration: none;
  text-decoration: none;
  white-space: nowrap;
  vertical-align: middle;
  touch-action: manipulation;
  cursor: pointer;
  color: rgb(255,255,255);
  -webkit-text-fill-color: currentcolor;
  background-image: none;
  background-color: rgb(59,70,204);
  border-radius: 0.25rem;
  border: solid 0.0625rem rgb(45,56,132);
}

.c36:focus {
  outline: 0;
  -webkit-text-decoration: none;
  text-decoration: none;
  background-color: rgb(59,70,204);
  border-color: rgb(45,56,132);
}

.c36:hover {
  background-color: rgb(72,83,217);
  border-color: rgb(45,56,132);
}

.c36:active,
.c36:active:hover,
.c36:active:focus {
  background-image: none;
  outline: 0;
  background-color: rgb(45,56,132);
  border-color: rgb(45,56,132);
}

.c36[disabled] {
  cursor: not-allowed;
  pointer-events: none;
}

.c32 {
  font-size: 0.9375rem;
  line-height: 1.125rem;
  font-style: normal;
  font-stretch: normal;
  display: block;
  color: rgb(70,70,70);
  text-align: left;
}

.c0 {
  box-sizing: border-box;
  width: 100%;
  max-width: 78.75rem;
  padding-bottom: 1.125rem;
}

.c18 {
  margin: 0;
  color: rgb(73,73,73);
  font-weight: normal;
  line-height: 1.625rem;
  font-size: 1.3125rem;
}

.c15 {
  margin: 0;
  color: rgb(73,73,73);
  font-weight: 400;
  line-height: 1.5rem;
  font-size: 0.9375rem;
}

.c23 {
  height: 1px;
  background-color: rgb(216,216,216);
  height: 0.0625rem;
}

.c8 {
  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);
}

.c9 {
  box-sizing: border-box;
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  border-width: 0;
  background-color: transparent;
}

.c30 {
  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;
}

.c21 {
  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;
}

.c27 {
  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-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-align-items: flex-end;
  -webkit-box-align: flex-end;
  -ms-flex-align: flex-end;
  align-items: flex-end;
}

.c29 {
  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;
}

.c28 {
  -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;
  display: block;
}

.c34 {
  box-sizing: border-box;
  width: 18.75rem;
  height: 3rem;
  min-height: 3rem;
  padding: 0.8125rem 0.75rem;
  border-radius: 0.25rem;
  background-color: rgb(255,255,255);
  border: 0.0625rem solid rgb(216,216,216);
  color: rgb(73,73,73);
  font-size: 0.9375rem;
  line-height: normal !important;
  font-style: normal;
  font-stretch: normal;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: 0;
  max-width: 22.1875rem;
  text-overflow: ellipsis;
}

.c34:focus {
  border-color: rgb(59,70,204);
  outline: 0;
}

.c34::-webkit-input-placeholder {
  color: rgba(73,73,73,0.5);
}

.c34::-moz-placeholder {
  color: rgba(73,73,73,0.5);
}

.c34:-ms-input-placeholder {
  color: rgba(73,73,73,0.5);
}

.c34:invalid {
  box-shadow: none;
}

.c34:disabled {
  background-color: rgb(250,250,250);
  color: rgb(216,216,216);
  cursor: not-allowed;
}

.c34:disabled::-webkit-input-placeholder {
  color: rgba(73,73,73,0.5);
}

.c34:disabled::-moz-placeholder {
  color: rgba(73,73,73,0.5);
}

.c34:disabled:-ms-input-placeholder {
  color: rgba(73,73,73,0.5);
}

.c31 {
  font-weight: 600;
  white-space: pre;
  font-size: 0.8125rem;
}

.c12 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  background-color: rgb(255,255,255);
  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
  border: 0.0625rem solid rgb(216,216,216);
  border-radius: 0.1875rem;
  width: 100%;
}

.c13 {
  border-radius: 0.1875rem 0 0 0.1875rem;
  min-width: 0.75rem;
  background-color: rgb(0,152,88);
  background-color: rgb(210,67,58);
}

.c14 {
  padding: 1.125rem 1.125rem;
}

.c16 {
  line-height: 0.875rem;
  font-size: 0.8125rem;
}

.c17 {
  margin: 0;
}

.c20 {
  margin: 0;
}

.c22 {
  margin-left: 0;
  margin-right: 0;
}

.c26 {
  margin-bottom: 0;
}

.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 (min-width:0em) {
  .c7 {
    -webkit-flex-basis: 100%;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    max-width: 100%;
  }
}

@media only screen and (min-width:48em) {
  .c7 {
    -webkit-flex-basis: 100%;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    max-width: 100%;
  }
}

@media only screen and (min-width:64em) {
  .c7 {
    -webkit-flex-basis: 75%;
    -ms-flex-preferred-size: 75%;
    flex-basis: 75%;
    max-width: 75%;
  }
}

@media only screen and (max-width:37.4375rem) {
  .c0 {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
}

@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
  .c0 {
    padding-left: 1.875rem;
    padding-right: 1.875rem;
  }
}

@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
  .c0 {
    padding-left: 4.375rem;
    padding-right: 4.375rem;
  }
}

<div
  className="c0 c1"
>
  <div
    className="c2"
  >
    <div
      className="c3"
    >
      <div
        className="c4"
      >
        <p
          className="c5 c6"
        >
          Triton CNS is used to automatically update hostnames for your instances. You can serve multiple instances (with multiple IP addresses) under the same hostname by matching the CNS service names.
           
          <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="c3"
  >
    <div
      className="c7"
    >
      <div
        className="c8"
        disabled={false}
        name="card"
      >
        <div
          className="c9 c8"
          disabled={false}
          name="card-outlet"
        >
          <div
            className="c10"
          >
            <div
              className="c11"
            >
              <div
                className="c12"
              >
                <div
                  className="c13"
                />
                <div
                  className="c14"
                >
                  <h4
                    className="c15"
                  >
                    Ooops!
                  </h4>
                  <p
                    className="c16 c6"
                  >
                    An error occurred while loading your CNS services
                  </p>
                </div>
              </div>
            </div>
            <div
              className="c11"
            >
              <h3
                className="c17 c18"
              >
                CNS Default Hostnames
              </h3>
              <div
                className="c19"
              >
                <p
                  className="c20 c6"
                >
                  Default hostnames are automatically generated from both the instance name and any attached networks.
                </p>
              </div>
            </div>
            <div
              className="c21"
            />
            <div
              className="c19"
            >
              <div
                className="c22 c23 c3"
                height="0.0625rem"
              />
            </div>
            <div
              className="c24"
            >
              <div
                className="c25"
              >
                <h3
                  className="c17 c18"
                >
                  CNS Service hostnames
                </h3>
                <div
                  className="c19"
                >
                  <p
                    className="c20 c6"
                  >
                    CNS service hostnames are created by attaching a CNS service name to one or more instances. You can serve multiple instances under the same hostname by assigning them to a matching CNS service name.
                  </p>
                </div>
              </div>
              <div
                className="c2"
              >
                <form
                  className="c26"
                  onSubmit={undefined}
                >
                  <div
                    className="c27"
                    wrap={true}
                  >
                    <div
                      className="c28"
                    >
                      <div
                        className="c29"
                      >
                        <div
                          className="c30"
                          name="name"
                          role="group"
                          style={undefined}
                        >
                          <label
                            className="c31 c32"
                            htmlFor="m"
                          >
                            Attach to new CNS service name
                          </label>
                          <div
                            className="c33"
                          >
                            <input
                              className="c34"
                              disabled={false}
                              id="m"
                              onBlur={null}
                              placeholder="Example: mySQLdb"
                            />
                          </div>
                        </div>
                      </div>
                    </div>
                    <div
                      className="c28"
                    >
                      <div
                        className="c35"
                      >
                        <button
                          className="c36 c37 c38 c39"
                          data-ui-button="true"
                          disabled={undefined}
                          href=""
                          type="submit"
                        >
                          Add
                        </button>
                      </div>
                    </div>
                  </div>
                </form>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`renders <Cns mutating /> without throwing 1`] = `
.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;
}

.c7 {
  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;
}

.c25 {
  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;
}

.c2 {
  margin-bottom: 1.125rem;
}

.c11 {
  margin-bottom: 1.875rem;
}

.c14 {
  margin-top: 0.75rem;
}

.c32 {
  margin-top: 1.875rem;
}

.c33 {
  margin-top: 1.875rem;
  margin-bottom: 1.875rem;
}

.c24 {
  margin-top: 0.1875rem;
}

.c40 {
  margin-left: 0.75rem;
}

.c54 {
  margin-left: 0.375rem;
}

.c22 {
  margin-right: 0.375rem;
  margin-bottom: 0.1875rem;
}

.c26 {
  margin-bottom: 0.1875rem;
}

.c45 {
  margin-top: 0.375rem;
}

.c48 {
  margin-right: 0.375rem;
  margin-bottom: 0.375rem;
}

.c50 {
  margin-top: 0.1875rem;
  margin-bottom: 0.375rem;
}

.c51 {
  margin-bottom: 0rem;
}

.c10 {
  padding: 1.875rem;
}

.c20 {
  font-size: 80%;
}

.c44 {
  font-family: sans-serif;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
  overflow: visible;
  text-transform: none;
  -webkit-appearance: button;
  -moz-appearance: button;
  appearance: button;
}

.c44::-moz-focus-inner,
.c44[type='button']::-moz-focus-inner,
.c44[type='reset']::-moz-focus-inner,
.c44[type='submit']::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

.c44:-moz-focusring,
.c44[type='button']:-moz-focusring,
.c44[type='reset']:-moz-focusring,
.c44[type='submit']:-moz-focusring {
  outline: 0.0625rem dotted ButtonText;
}

.c6 {
  color: rgb(73,73,73);
  margin: 0;
  line-height: 1.5rem;
  font-size: 0.9375rem;
  margin: 0;
}

.c43 {
  min-width: 7.5rem;
}

.c42 {
  display: inline-block;
}

.c41 {
  box-sizing: border-box;
  display: inline-block;
  -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;
  min-height: 3rem;
  height: 3rem;
  min-width: 7.5rem;
  padding: 0.9375rem 1.125rem;
  position: relative;
  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
  font-size: 0.9375rem;
  text-align: center;
  font-style: normal;
  font-stretch: normal;
  -webkit-letter-spacing: normal;
  -moz-letter-spacing: normal;
  -ms-letter-spacing: normal;
  letter-spacing: normal;
  -webkit-text-decoration: none;
  text-decoration: none;
  white-space: nowrap;
  vertical-align: middle;
  touch-action: manipulation;
  cursor: pointer;
  color: rgb(255,255,255);
  -webkit-text-fill-color: currentcolor;
  background-image: none;
  background-color: rgb(59,70,204);
  border-radius: 0.25rem;
  border: solid 0.0625rem rgb(45,56,132);
}

.c41:focus {
  outline: 0;
  -webkit-text-decoration: none;
  text-decoration: none;
  background-color: rgb(59,70,204);
  border-color: rgb(45,56,132);
}

.c41:hover {
  background-color: rgb(72,83,217);
  border-color: rgb(45,56,132);
}

.c41:active,
.c41:active:hover,
.c41:active:focus {
  background-image: none;
  outline: 0;
  background-color: rgb(45,56,132);
  border-color: rgb(45,56,132);
}

.c41[disabled] {
  cursor: not-allowed;
  pointer-events: none;
}

.c38 {
  font-size: 0.9375rem;
  line-height: 1.125rem;
  font-style: normal;
  font-stretch: normal;
  display: block;
  color: rgb(70,70,70);
  text-align: left;
}

.c0 {
  box-sizing: border-box;
  width: 100%;
  max-width: 78.75rem;
  padding-bottom: 1.125rem;
}

.c13 {
  margin: 0;
  color: rgb(73,73,73);
  font-weight: normal;
  line-height: 1.625rem;
  font-size: 1.3125rem;
}

.c19 {
  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
  color: rgb(73,73,73);
  line-height: 1.125rem;
  font-size: 0.8125rem;
  font-weight: 600;
}

.c23 {
  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
  color: rgb(73,73,73);
  line-height: 1.125rem;
  font-size: 0.8125rem;
}

.c31 {
  height: 1px;
  background-color: rgb(216,216,216);
  height: 0.0625rem;
}

.c8 {
  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);
}

.c9 {
  box-sizing: border-box;
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  border-width: 0;
  background-color: transparent;
}

.c36 {
  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 {
  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;
}

.c35 {
  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-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-align-items: flex-end;
  -webkit-box-align: flex-end;
  -ms-flex-align: flex-end;
  align-items: flex-end;
}

.c17 {
  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;
}

.c52 {
  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;
}

.c21 {
  -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;
  display: block;
}

.c28 {
  box-sizing: border-box;
  width: 18.75rem;
  height: 3rem;
  min-height: 3rem;
  padding: 0.8125rem 0.75rem;
  border-radius: 0.25rem;
  background-color: rgb(255,255,255);
  border: 0.0625rem solid rgb(216,216,216);
  color: rgb(250,250,250);
  font-size: 0.9375rem;
  line-height: normal !important;
  font-style: normal;
  font-stretch: normal;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: 0;
  background-color: rgb(250,250,250);
  color: rgb(216,216,216);
  cursor: not-allowed;
  font-family: "Roboto Mono",monospace;
  width: 100%;
  min-width: 100%;
}

.c28:focus {
  border-color: rgb(59,70,204);
  outline: 0;
}

.c28::-webkit-input-placeholder {
  color: rgba(73,73,73,0.5);
}

.c28::-moz-placeholder {
  color: rgba(73,73,73,0.5);
}

.c28:-ms-input-placeholder {
  color: rgba(73,73,73,0.5);
}

.c28:invalid {
  box-shadow: none;
}

.c28::-webkit-input-placeholder {
  color: rgb(216,216,216);
}

.c28::-moz-placeholder {
  color: rgb(216,216,216);
}

.c28:-ms-input-placeholder {
  color: rgb(216,216,216);
}

.c28:disabled {
  background-color: rgb(250,250,250);
  color: rgb(216,216,216);
  cursor: not-allowed;
}

.c28:disabled::-webkit-input-placeholder {
  color: rgba(73,73,73,0.5);
}

.c28:disabled::-moz-placeholder {
  color: rgba(73,73,73,0.5);
}

.c28:disabled:-ms-input-placeholder {
  color: rgba(73,73,73,0.5);
}

.c28:disabled {
  color: rgb(73,73,73);
}

.c28:disabled::-webkit-input-placeholder {
  color: rgb(73,73,73);
}

.c28:disabled::-moz-placeholder {
  color: rgb(73,73,73);
}

.c28:disabled:-ms-input-placeholder {
  color: rgb(73,73,73);
}

.c39 {
  box-sizing: border-box;
  width: 18.75rem;
  height: 3rem;
  min-height: 3rem;
  padding: 0.8125rem 0.75rem;
  border-radius: 0.25rem;
  background-color: rgb(255,255,255);
  border: 0.0625rem solid rgb(216,216,216);
  color: rgb(250,250,250);
  font-size: 0.9375rem;
  line-height: normal !important;
  font-style: normal;
  font-stretch: normal;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: 0;
  background-color: rgb(250,250,250);
  color: rgb(216,216,216);
  cursor: not-allowed;
  max-width: 22.1875rem;
  text-overflow: ellipsis;
}

.c39:focus {
  border-color: rgb(59,70,204);
  outline: 0;
}

.c39::-webkit-input-placeholder {
  color: rgba(73,73,73,0.5);
}

.c39::-moz-placeholder {
  color: rgba(73,73,73,0.5);
}

.c39:-ms-input-placeholder {
  color: rgba(73,73,73,0.5);
}

.c39:invalid {
  box-shadow: none;
}

.c39::-webkit-input-placeholder {
  color: rgb(216,216,216);
}

.c39::-moz-placeholder {
  color: rgb(216,216,216);
}

.c39:-ms-input-placeholder {
  color: rgb(216,216,216);
}

.c39:disabled {
  background-color: rgb(250,250,250);
  color: rgb(216,216,216);
  cursor: not-allowed;
}

.c39:disabled::-webkit-input-placeholder {
  color: rgba(73,73,73,0.5);
}

.c39:disabled::-moz-placeholder {
  color: rgba(73,73,73,0.5);
}

.c39:disabled:-ms-input-placeholder {
  color: rgba(73,73,73,0.5);
}

.c37 {
  font-weight: 600;
  white-space: pre;
  font-size: 0.8125rem;
}

.c53 {
  font-weight: 600;
  white-space: pre;
  font-size: 0.8125rem;
  color: rgb(216,216,216);
}

.c55 {
  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;
}

.c57 {
  display: none;
}

.c57:checked + label {
  background: #3B46CC;
  border: 0.0625rem solid rgb(59,70,204);
}

.c57: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);
}

.c57:checked + label:active {
  box-shadow: none;
}

.c57:checked + label {
  background: rgb(250,250,250);
  border: 0.0625rem solid rgb(216,216,216);
}

.c57:checked + label:after {
  box-shadow: 0 0 0 0.0625rem rgb(216,216,216);
}

.c58 {
  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;
}

.c58::selection {
  background: none;
}

.c58:active {
  box-shadow: inset 0 0 0 1.5rem rgb(216,216,216);
}

.c58:hover {
  border: 0.0625rem solid rgb(59,70,204);
}

.c58:hover:after {
  box-shadow: 0 0 0 0.0625rem rgb(59,70,204);
}

.c58:after,
.c58:before {
  position: relative;
  display: block;
  content: '';
  width: 50%;
  height: 100%;
}

.c58: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);
}

.c58:active {
  box-shadow: inset 0 0 0 2em rgb(216,216,216);
}

.c58:before {
  display: none;
}

.c58:active {
  box-shadow: none;
}

.c58:active:after {
  padding-right: 0;
}

.c58:before {
  cursor: not-allowed;
}

.c58:after {
  cursor: not-allowed;
  background: rgb(230,230,230);
}

.c58:hover {
  border: 0.0625rem solid rgb(216,216,216);
}

.c58:hover:after {
  box-shadow: 0 0 0 0.0625rem rgb(216,216,216);
}

.c27 {
  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;
}

.c27 input {
  padding-right: 1.875rem;
}

.c27 div {
  position: relative;
  left: -1.625rem;
}

.c29 {
  cursor: pointer;
}

.c49 {
  border: 0.0625rem solid rgb(216,216,216);
  box-sizing: border-box;
  border-radius: 0.125rem;
  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-box-flex: 0;
  -webkit-flex-grow: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background: rgba(66,134,244,0.1);
  border: 0.0625rem solid rgb(45,56,132);
}

.c47 {
  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;
}

.c46 {
  margin-bottom: -0.375rem;
}

.c18 {
  padding-right: 0.75rem;
  margin-right: 0.75rem;
  border-right: 0.0625rem solid rgb(216,216,216);
}

.c12 {
  margin: 0;
}

.c15 {
  margin: 0;
}

.c56 {
  margin: 0 6px;
}

.c30 {
  margin-left: 0;
  margin-right: 0;
}

.c34 {
  margin-bottom: 0;
}

.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 (min-width:0em) {
  .c7 {
    -webkit-flex-basis: 100%;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    max-width: 100%;
  }
}

@media only screen and (min-width:48em) {
  .c7 {
    -webkit-flex-basis: 100%;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    max-width: 100%;
  }
}

@media only screen and (min-width:64em) {
  .c7 {
    -webkit-flex-basis: 75%;
    -ms-flex-preferred-size: 75%;
    flex-basis: 75%;
    max-width: 75%;
  }
}

@media only screen and (min-width:0em) {
  .c25 {
    -webkit-flex-basis: 100%;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    max-width: 100%;
  }
}

@media only screen and (min-width:64em) {
  .c25 {
    -webkit-flex-basis: 100%;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    max-width: 100%;
  }
}

@media only screen and (max-width:37.4375rem) {
  .c0 {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
}

@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
  .c0 {
    padding-left: 1.875rem;
    padding-right: 1.875rem;
  }
}

@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
  .c0 {
    padding-left: 4.375rem;
    padding-right: 4.375rem;
  }
}

<div
  className="c0 c1"
>
  <div
    className="c2"
  >
    <div
      className="c3"
    >
      <div
        className="c4"
      >
        <p
          className="c5 c6"
        >
          Triton CNS is used to automatically update hostnames for your instances. You can serve multiple instances (with multiple IP addresses) under the same hostname by matching the CNS service names.
           
          <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="c3"
  >
    <div
      className="c7"
    >
      <div
        className="c8"
        disabled={false}
        name="card"
      >
        <div
          className="c9 c8"
          disabled={false}
          name="card-outlet"
        >
          <div
            className="c10"
          >
            <div
              className="c11"
            >
              <h3
                className="c12 c13"
              >
                CNS Default Hostnames
              </h3>
              <div
                className="c14"
              >
                <p
                  className="c15 c6"
                >
                  Default hostnames are automatically generated from both the instance name and any attached networks.
                </p>
              </div>
            </div>
            <div
              className="c16"
            >
              <div
                className="c2"
              >
                <div
                  className="c17"
                >
                  <small
                    className="c18 c19 c20"
                  >
                    Instance name
                     
                    hostname
                    
                  </small>
                  <div
                    className="c21"
                  >
                    <div
                      className="c22"
                    >
                      <svg
                        height="16"
                        style={
                          Object {
                            "transform": "rotate(0deg)",
                          }
                        }
                        viewBox="0 0 12 16"
                        width="12"
                      >
                        <path
                          d="M6,13H6a1,1,0,0,1-1-1V10A1,1,0,0,1,6,9H6a1,1,0,0,1,1,1v2A1,1,0,0,1,6,13Zm4-7V4A4,4,0,0,0,2,4H4c0-1.65.35-2,2-2s2,.35,2,2V6H2A2,2,0,0,0,0,8v6a2,2,0,0,0,2,2h8a2,2,0,0,0,2-2V8A2,2,0,0,0,10,6Zm0,7a1,1,0,0,1-1,1H3a1,1,0,0,1-1-1V9A1,1,0,0,1,3,8H9a1,1,0,0,1,1,1Z"
                          fill="rgb(73, 73, 73)"
                        />
                      </svg>
                    </div>
                  </div>
                  <div
                    className="c21"
                  >
                    <small
                      className="c23 c20"
                    >
                      Public
                    </small>
                  </div>
                </div>
                <div
                  className="c24"
                >
                  <div
                    className="c3"
                  >
                    <div
                      className="c25"
                    >
                      <div
                        className="c26"
                      />
                      <div
                        className="c27"
                        disabled={true}
                      >
                        <input
                          className="c28"
                          disabled={true}
                          id=""
                          onBlur={null}
                          value="stuffy-stuff"
                        />
                        <div
                          onClick={undefined}
                          onMouseEnter={[Function]}
                          onMouseLeave={[Function]}
                          style={
                            Object {
                              "display": "inline-block",
                            }
                          }
                        >
                          <svg
                            className="c29"
                            height="19"
                            innerRef={undefined}
                            onClick={[Function]}
                            style={
                              Object {
                                "transform": "rotate(0deg)",
                              }
                            }
                            viewBox="0 0 15 19"
                            width="15"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M5,12l2-2v9H8V10l2,2,1-1L7.5,8,4,11ZM11,1h2a2.15,2.15,0,0,1,2,2V16a2.15,2.15,0,0,1-2,2H10V16h3V3H11V5H4V3H2V16H5v2H2a2.15,2.15,0,0,1-2-2V3A2.15,2.15,0,0,1,2,1H4V0h7ZM9,2H6V3H9V2Z"
                              fill="rgb(73, 73, 73)"
                            />
                          </svg>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div
                className="c2"
              >
                <div
                  className="c17"
                >
                  <small
                    className="c18 c19 c20"
                  >
                    Instance name
                     
                    hostname
                    
                  </small>
                  <div
                    className="c21"
                  >
                    <div
                      className="c22"
                    >
                      <svg
                        height="16"
                        style={
                          Object {
                            "transform": "rotate(0deg)",
                          }
                        }
                        viewBox="0 0 12 16"
                        width="12"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="M10,6V4A4,4,0,0,0,2,4V6H2A2,2,0,0,0,0,8v6a2,2,0,0,0,2,2h8a2,2,0,0,0,2-2V8A2,2,0,0,0,10,6ZM4,4c0-1.65.35-2,2-2s2,.35,2,2V6H4Zm6,9a1,1,0,0,1-1,1H3a1,1,0,0,1-1-1V9A1,1,0,0,1,3,8H9a1,1,0,0,1,1,1ZM6,13H6a1,1,0,0,1-1-1V10A1,1,0,0,1,6,9H6a1,1,0,0,1,1,1v2A1,1,0,0,1,6,13Z"
                          fill="rgb(73, 73, 73)"
                        />
                      </svg>
                    </div>
                  </div>
                  <div
                    className="c21"
                  >
                    <small
                      className="c23 c20"
                    >
                      Private
                    </small>
                  </div>
                </div>
                <div
                  className="c24"
                >
                  <div
                    className="c3"
                  >
                    <div
                      className="c25"
                    >
                      <div
                        className="c26"
                      />
                      <div
                        className="c27"
                        disabled={true}
                      >
                        <input
                          className="c28"
                          disabled={true}
                          id=""
                          onBlur={null}
                          value="stuffy-stuff"
                        />
                        <div
                          onClick={undefined}
                          onMouseEnter={[Function]}
                          onMouseLeave={[Function]}
                          style={
                            Object {
                              "display": "inline-block",
                            }
                          }
                        >
                          <svg
                            className="c29"
                            height="19"
                            innerRef={undefined}
                            onClick={[Function]}
                            style={
                              Object {
                                "transform": "rotate(0deg)",
                              }
                            }
                            viewBox="0 0 15 19"
                            width="15"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M5,12l2-2v9H8V10l2,2,1-1L7.5,8,4,11ZM11,1h2a2.15,2.15,0,0,1,2,2V16a2.15,2.15,0,0,1-2,2H10V16h3V3H11V5H4V3H2V16H5v2H2a2.15,2.15,0,0,1-2-2V3A2.15,2.15,0,0,1,2,1H4V0h7ZM9,2H6V3H9V2Z"
                              fill="rgb(73, 73, 73)"
                            />
                          </svg>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div
              className="c14"
            >
              <div
                className="c30 c31 c3"
                height="0.0625rem"
              />
            </div>
            <div
              className="c32"
            >
              <div
                className="c33"
              >
                <h3
                  className="c12 c13"
                >
                  CNS Service hostnames
                </h3>
                <div
                  className="c14"
                >
                  <p
                    className="c15 c6"
                  >
                    CNS service hostnames are created by attaching a CNS service name to one or more instances. You can serve multiple instances under the same hostname by assigning them to a matching CNS service name.
                  </p>
                </div>
              </div>
              <div
                className="c2"
              >
                <form
                  className="c34"
                  onSubmit={undefined}
                >
                  <div
                    className="c35"
                    wrap={true}
                  >
                    <div
                      className="c21"
                    >
                      <div
                        className="c17"
                      >
                        <div
                          className="c36"
                          name="name"
                          role="group"
                          style={undefined}
                        >
                          <label
                            className="c37 c38"
                            htmlFor="p"
                          >
                            Attach to new CNS service name
                          </label>
                          <div
                            className="c24"
                          >
                            <input
                              className="c39"
                              disabled={true}
                              id="p"
                              onBlur={null}
                              placeholder="Example: mySQLdb"
                            />
                          </div>
                        </div>
                      </div>
                    </div>
                    <div
                      className="c21"
                    >
                      <div
                        className="c40"
                      >
                        <button
                          className="c41 c42 c43 c44"
                          data-ui-button="true"
                          disabled={undefined}
                          href=""
                          type="submit"
                        >
                          Add
                        </button>
                      </div>
                    </div>
                  </div>
                </form>
              </div>
              <div
                className="c2"
              >
                <label
                  className="c37 c38"
                  htmlFor=""
                >
                  Existing CNS service name(s)
                </label>
                <div
                  className="c45"
                >
                  <ul
                    className="c46 c47"
                  >
                    <div
                      className="c48"
                    >
                      <li
                        className="c49"
                        fill="rgba(66, 134, 244, 0.1)"
                        id="cns-tag-0"
                      >
                        serbice
                      </li>
                    </div>
                    <div
                      className="c48"
                    >
                      <li
                        className="c49"
                        fill="rgba(66, 134, 244, 0.1)"
                        id="cns-tag-1"
                      >
                        dssasda
                      </li>
                    </div>
                    <div
                      className="c48"
                    >
                      <li
                        className="c49"
                        fill="rgba(66, 134, 244, 0.1)"
                        id="cns-tag-2"
                      >
                        dsasd
                      </li>
                    </div>
                  </ul>
                </div>
              </div>
              <div
                className="c32"
              >
                <div
                  className="c16"
                >
                  <div
                    className="c2"
                  >
                    <div
                      className="c17"
                    >
                      <small
                        className="c18 c19 c20"
                      >
                        CNS service
                         
                        hostname
                        s
                      </small>
                      <div
                        className="c21"
                      >
                        <div
                          className="c22"
                        >
                          <svg
                            height="16"
                            style={
                              Object {
                                "transform": "rotate(0deg)",
                              }
                            }
                            viewBox="0 0 12 16"
                            width="12"
                          >
                            <path
                              d="M6,13H6a1,1,0,0,1-1-1V10A1,1,0,0,1,6,9H6a1,1,0,0,1,1,1v2A1,1,0,0,1,6,13Zm4-7V4A4,4,0,0,0,2,4H4c0-1.65.35-2,2-2s2,.35,2,2V6H2A2,2,0,0,0,0,8v6a2,2,0,0,0,2,2h8a2,2,0,0,0,2-2V8A2,2,0,0,0,10,6Zm0,7a1,1,0,0,1-1,1H3a1,1,0,0,1-1-1V9A1,1,0,0,1,3,8H9a1,1,0,0,1,1,1Z"
                              fill="rgb(73, 73, 73)"
                            />
                          </svg>
                        </div>
                      </div>
                      <div
                        className="c21"
                      >
                        <small
                          className="c23 c20"
                        >
                          Public
                        </small>
                      </div>
                    </div>
                    <div
                      className="c50"
                    >
                      <div
                        className="c3"
                      >
                        <div
                          className="c25"
                        >
                          <div
                            className="c26"
                          />
                          <div
                            className="c27"
                            disabled={true}
                          >
                            <input
                              className="c28"
                              disabled={true}
                              id=""
                              onBlur={null}
                              value="serbice"
                            />
                            <div
                              onClick={undefined}
                              onMouseEnter={[Function]}
                              onMouseLeave={[Function]}
                              style={
                                Object {
                                  "display": "inline-block",
                                }
                              }
                            >
                              <svg
                                className="c29"
                                height="19"
                                innerRef={undefined}
                                onClick={[Function]}
                                style={
                                  Object {
                                    "transform": "rotate(0deg)",
                                  }
                                }
                                viewBox="0 0 15 19"
                                width="15"
                                xmlns="http://www.w3.org/2000/svg"
                              >
                                <path
                                  d="M5,12l2-2v9H8V10l2,2,1-1L7.5,8,4,11ZM11,1h2a2.15,2.15,0,0,1,2,2V16a2.15,2.15,0,0,1-2,2H10V16h3V3H11V5H4V3H2V16H5v2H2a2.15,2.15,0,0,1-2-2V3A2.15,2.15,0,0,1,2,1H4V0h7ZM9,2H6V3H9V2Z"
                                  fill="rgb(73, 73, 73)"
                                />
                              </svg>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div
                      className="c50"
                    >
                      <div
                        className="c3"
                      >
                        <div
                          className="c25"
                        >
                          <div
                            className="c26"
                          />
                          <div
                            className="c27"
                            disabled={true}
                          >
                            <input
                              className="c28"
                              disabled={true}
                              id=""
                              onBlur={null}
                              value="dssasda"
                            />
                            <div
                              onClick={undefined}
                              onMouseEnter={[Function]}
                              onMouseLeave={[Function]}
                              style={
                                Object {
                                  "display": "inline-block",
                                }
                              }
                            >
                              <svg
                                className="c29"
                                height="19"
                                innerRef={undefined}
                                onClick={[Function]}
                                style={
                                  Object {
                                    "transform": "rotate(0deg)",
                                  }
                                }
                                viewBox="0 0 15 19"
                                width="15"
                                xmlns="http://www.w3.org/2000/svg"
                              >
                                <path
                                  d="M5,12l2-2v9H8V10l2,2,1-1L7.5,8,4,11ZM11,1h2a2.15,2.15,0,0,1,2,2V16a2.15,2.15,0,0,1-2,2H10V16h3V3H11V5H4V3H2V16H5v2H2a2.15,2.15,0,0,1-2-2V3A2.15,2.15,0,0,1,2,1H4V0h7ZM9,2H6V3H9V2Z"
                                  fill="rgb(73, 73, 73)"
                                />
                              </svg>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div
                      className="c24"
                    >
                      <div
                        className="c3"
                      >
                        <div
                          className="c25"
                        >
                          <div
                            className="c26"
                          />
                          <div
                            className="c27"
                            disabled={true}
                          >
                            <input
                              className="c28"
                              disabled={true}
                              id=""
                              onBlur={null}
                              value="dsasd"
                            />
                            <div
                              onClick={undefined}
                              onMouseEnter={[Function]}
                              onMouseLeave={[Function]}
                              style={
                                Object {
                                  "display": "inline-block",
                                }
                              }
                            >
                              <svg
                                className="c29"
                                height="19"
                                innerRef={undefined}
                                onClick={[Function]}
                                style={
                                  Object {
                                    "transform": "rotate(0deg)",
                                  }
                                }
                                viewBox="0 0 15 19"
                                width="15"
                                xmlns="http://www.w3.org/2000/svg"
                              >
                                <path
                                  d="M5,12l2-2v9H8V10l2,2,1-1L7.5,8,4,11ZM11,1h2a2.15,2.15,0,0,1,2,2V16a2.15,2.15,0,0,1-2,2H10V16h3V3H11V5H4V3H2V16H5v2H2a2.15,2.15,0,0,1-2-2V3A2.15,2.15,0,0,1,2,1H4V0h7ZM9,2H6V3H9V2Z"
                                  fill="rgb(73, 73, 73)"
                                />
                              </svg>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div
                    className="c51"
                  >
                    <div
                      className="c17"
                    >
                      <small
                        className="c18 c19 c20"
                      >
                        CNS service
                         
                        hostname
                        s
                      </small>
                      <div
                        className="c21"
                      >
                        <div
                          className="c22"
                        >
                          <svg
                            height="16"
                            style={
                              Object {
                                "transform": "rotate(0deg)",
                              }
                            }
                            viewBox="0 0 12 16"
                            width="12"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M10,6V4A4,4,0,0,0,2,4V6H2A2,2,0,0,0,0,8v6a2,2,0,0,0,2,2h8a2,2,0,0,0,2-2V8A2,2,0,0,0,10,6ZM4,4c0-1.65.35-2,2-2s2,.35,2,2V6H4Zm6,9a1,1,0,0,1-1,1H3a1,1,0,0,1-1-1V9A1,1,0,0,1,3,8H9a1,1,0,0,1,1,1ZM6,13H6a1,1,0,0,1-1-1V10A1,1,0,0,1,6,9H6a1,1,0,0,1,1,1v2A1,1,0,0,1,6,13Z"
                              fill="rgb(73, 73, 73)"
                            />
                          </svg>
                        </div>
                      </div>
                      <div
                        className="c21"
                      >
                        <small
                          className="c23 c20"
                        >
                          Private
                        </small>
                      </div>
                    </div>
                    <div
                      className="c50"
                    >
                      <div
                        className="c3"
                      >
                        <div
                          className="c25"
                        >
                          <div
                            className="c26"
                          />
                          <div
                            className="c27"
                            disabled={true}
                          >
                            <input
                              className="c28"
                              disabled={true}
                              id=""
                              onBlur={null}
                              value="serbice"
                            />
                            <div
                              onClick={undefined}
                              onMouseEnter={[Function]}
                              onMouseLeave={[Function]}
                              style={
                                Object {
                                  "display": "inline-block",
                                }
                              }
                            >
                              <svg
                                className="c29"
                                height="19"
                                innerRef={undefined}
                                onClick={[Function]}
                                style={
                                  Object {
                                    "transform": "rotate(0deg)",
                                  }
                                }
                                viewBox="0 0 15 19"
                                width="15"
                                xmlns="http://www.w3.org/2000/svg"
                              >
                                <path
                                  d="M5,12l2-2v9H8V10l2,2,1-1L7.5,8,4,11ZM11,1h2a2.15,2.15,0,0,1,2,2V16a2.15,2.15,0,0,1-2,2H10V16h3V3H11V5H4V3H2V16H5v2H2a2.15,2.15,0,0,1-2-2V3A2.15,2.15,0,0,1,2,1H4V0h7ZM9,2H6V3H9V2Z"
                                  fill="rgb(73, 73, 73)"
                                />
                              </svg>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div
                      className="c50"
                    >
                      <div
                        className="c3"
                      >
                        <div
                          className="c25"
                        >
                          <div
                            className="c26"
                          />
                          <div
                            className="c27"
                            disabled={true}
                          >
                            <input
                              className="c28"
                              disabled={true}
                              id=""
                              onBlur={null}
                              value="dssasda"
                            />
                            <div
                              onClick={undefined}
                              onMouseEnter={[Function]}
                              onMouseLeave={[Function]}
                              style={
                                Object {
                                  "display": "inline-block",
                                }
                              }
                            >
                              <svg
                                className="c29"
                                height="19"
                                innerRef={undefined}
                                onClick={[Function]}
                                style={
                                  Object {
                                    "transform": "rotate(0deg)",
                                  }
                                }
                                viewBox="0 0 15 19"
                                width="15"
                                xmlns="http://www.w3.org/2000/svg"
                              >
                                <path
                                  d="M5,12l2-2v9H8V10l2,2,1-1L7.5,8,4,11ZM11,1h2a2.15,2.15,0,0,1,2,2V16a2.15,2.15,0,0,1-2,2H10V16h3V3H11V5H4V3H2V16H5v2H2a2.15,2.15,0,0,1-2-2V3A2.15,2.15,0,0,1,2,1H4V0h7ZM9,2H6V3H9V2Z"
                                  fill="rgb(73, 73, 73)"
                                />
                              </svg>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div
                      className="c24"
                    >
                      <div
                        className="c3"
                      >
                        <div
                          className="c25"
                        >
                          <div
                            className="c26"
                          />
                          <div
                            className="c27"
                            disabled={true}
                          >
                            <input
                              className="c28"
                              disabled={true}
                              id=""
                              onBlur={null}
                              value="dsasd"
                            />
                            <div
                              onClick={undefined}
                              onMouseEnter={[Function]}
                              onMouseLeave={[Function]}
                              style={
                                Object {
                                  "display": "inline-block",
                                }
                              }
                            >
                              <svg
                                className="c29"
                                height="19"
                                innerRef={undefined}
                                onClick={[Function]}
                                style={
                                  Object {
                                    "transform": "rotate(0deg)",
                                  }
                                }
                                viewBox="0 0 15 19"
                                width="15"
                                xmlns="http://www.w3.org/2000/svg"
                              >
                                <path
                                  d="M5,12l2-2v9H8V10l2,2,1-1L7.5,8,4,11ZM11,1h2a2.15,2.15,0,0,1,2,2V16a2.15,2.15,0,0,1-2,2H10V16h3V3H11V5H4V3H2V16H5v2H2a2.15,2.15,0,0,1-2-2V3A2.15,2.15,0,0,1,2,1H4V0h7ZM9,2H6V3H9V2Z"
                                  fill="rgb(73, 73, 73)"
                                />
                              </svg>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div
        className="c32"
      >
        <div
          className="c2"
        >
          <div
            className="c36"
            name="cns-enabled"
            role="group"
            style={undefined}
          >
            <div
              className="c52"
            >
              <label
                className="c53 c38"
                disabled={true}
                htmlFor="q"
              >
                Disabled CNS
              </label>
              <div
                className="c54"
              >
                <div
                  className="c55"
                >
                  <input
                    checked={true}
                    className="c56 c57"
                    disabled={true}
                    id="q"
                    onBlur={undefined}
                    onChange={[Function]}
                    type="checkbox"
                  />
                  <label
                    checked={true}
                    className="c56 c58"
                    disabled={true}
                    htmlFor="q"
                    id="q"
                    onBlur={undefined}
                    onChange={[Function]}
                  />
                  <label
                    checked={true}
                    className="c56 c53 c38"
                    disabled={true}
                    htmlFor="q"
                    id="q"
                    onBlur={undefined}
                    onChange={[Function]}
                  >
                     
                    Enabled CNS
                  </label>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`renders <Cns mutationError /> without throwing 1`] = `
.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;
}

.c7 {
  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;
}

.c2 {
  margin-bottom: 1.125rem;
}

.c11 {
  margin-bottom: 1.875rem;
}

.c19 {
  margin-top: 0.75rem;
}

.c24 {
  margin-top: 1.875rem;
}

.c25 {
  margin-top: 1.875rem;
  margin-bottom: 1.875rem;
}

.c33 {
  margin-top: 0.1875rem;
}

.c35 {
  margin-left: 0.75rem;
}

.c41 {
  margin-left: 0.375rem;
}

.c10 {
  padding: 1.875rem;
}

.c39 {
  font-family: sans-serif;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
  overflow: visible;
  text-transform: none;
  -webkit-appearance: button;
  -moz-appearance: button;
  appearance: button;
}

.c39::-moz-focus-inner,
.c39[type='button']::-moz-focus-inner,
.c39[type='reset']::-moz-focus-inner,
.c39[type='submit']::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

.c39:-moz-focusring,
.c39[type='button']:-moz-focusring,
.c39[type='reset']:-moz-focusring,
.c39[type='submit']:-moz-focusring {
  outline: 0.0625rem dotted ButtonText;
}

.c6 {
  color: rgb(73,73,73);
  margin: 0;
  line-height: 1.5rem;
  font-size: 0.9375rem;
  margin: 0;
}

.c38 {
  min-width: 7.5rem;
}

.c37 {
  display: inline-block;
}

.c36 {
  box-sizing: border-box;
  display: inline-block;
  -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;
  min-height: 3rem;
  height: 3rem;
  min-width: 7.5rem;
  padding: 0.9375rem 1.125rem;
  position: relative;
  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
  font-size: 0.9375rem;
  text-align: center;
  font-style: normal;
  font-stretch: normal;
  -webkit-letter-spacing: normal;
  -moz-letter-spacing: normal;
  -ms-letter-spacing: normal;
  letter-spacing: normal;
  -webkit-text-decoration: none;
  text-decoration: none;
  white-space: nowrap;
  vertical-align: middle;
  touch-action: manipulation;
  cursor: pointer;
  color: rgb(255,255,255);
  -webkit-text-fill-color: currentcolor;
  background-image: none;
  background-color: rgb(59,70,204);
  border-radius: 0.25rem;
  border: solid 0.0625rem rgb(45,56,132);
}

.c36:focus {
  outline: 0;
  -webkit-text-decoration: none;
  text-decoration: none;
  background-color: rgb(59,70,204);
  border-color: rgb(45,56,132);
}

.c36:hover {
  background-color: rgb(72,83,217);
  border-color: rgb(45,56,132);
}

.c36:active,
.c36:active:hover,
.c36:active:focus {
  background-image: none;
  outline: 0;
  background-color: rgb(45,56,132);
  border-color: rgb(45,56,132);
}

.c36[disabled] {
  cursor: not-allowed;
  pointer-events: none;
}

.c32 {
  font-size: 0.9375rem;
  line-height: 1.125rem;
  font-style: normal;
  font-stretch: normal;
  display: block;
  color: rgb(70,70,70);
  text-align: left;
}

.c0 {
  box-sizing: border-box;
  width: 100%;
  max-width: 78.75rem;
  padding-bottom: 1.125rem;
}

.c18 {
  margin: 0;
  color: rgb(73,73,73);
  font-weight: normal;
  line-height: 1.625rem;
  font-size: 1.3125rem;
}

.c15 {
  margin: 0;
  color: rgb(73,73,73);
  font-weight: 400;
  line-height: 1.5rem;
  font-size: 0.9375rem;
}

.c23 {
  height: 1px;
  background-color: rgb(216,216,216);
  height: 0.0625rem;
}

.c8 {
  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);
}

.c9 {
  box-sizing: border-box;
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  border-width: 0;
  background-color: transparent;
}

.c30 {
  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;
}

.c21 {
  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;
}

.c27 {
  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-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-align-items: flex-end;
  -webkit-box-align: flex-end;
  -ms-flex-align: flex-end;
  align-items: flex-end;
}

.c29 {
  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;
}

.c40 {
  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;
}

.c28 {
  -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;
  display: block;
}

.c34 {
  box-sizing: border-box;
  width: 18.75rem;
  height: 3rem;
  min-height: 3rem;
  padding: 0.8125rem 0.75rem;
  border-radius: 0.25rem;
  background-color: rgb(255,255,255);
  border: 0.0625rem solid rgb(216,216,216);
  color: rgb(73,73,73);
  font-size: 0.9375rem;
  line-height: normal !important;
  font-style: normal;
  font-stretch: normal;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: 0;
  max-width: 22.1875rem;
  text-overflow: ellipsis;
}

.c34:focus {
  border-color: rgb(59,70,204);
  outline: 0;
}

.c34::-webkit-input-placeholder {
  color: rgba(73,73,73,0.5);
}

.c34::-moz-placeholder {
  color: rgba(73,73,73,0.5);
}

.c34:-ms-input-placeholder {
  color: rgba(73,73,73,0.5);
}

.c34:invalid {
  box-shadow: none;
}

.c34:disabled {
  background-color: rgb(250,250,250);
  color: rgb(216,216,216);
  cursor: not-allowed;
}

.c34:disabled::-webkit-input-placeholder {
  color: rgba(73,73,73,0.5);
}

.c34:disabled::-moz-placeholder {
  color: rgba(73,73,73,0.5);
}

.c34:disabled:-ms-input-placeholder {
  color: rgba(73,73,73,0.5);
}

.c31 {
  font-weight: 600;
  white-space: pre;
  font-size: 0.8125rem;
}

.c42 {
  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;
}

.c44 {
  display: none;
}

.c44:checked + label {
  background: #3B46CC;
  border: 0.0625rem solid rgb(59,70,204);
}

.c44: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);
}

.c44:checked + label:active {
  box-shadow: none;
}

.c45 {
  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);
}

.c45::selection {
  background: none;
}

.c45:active {
  box-shadow: inset 0 0 0 1.5rem rgb(216,216,216);
}

.c45:hover {
  border: 0.0625rem solid rgb(59,70,204);
}

.c45:hover:after {
  box-shadow: 0 0 0 0.0625rem rgb(59,70,204);
}

.c45:after,
.c45:before {
  position: relative;
  display: block;
  content: '';
  width: 50%;
  height: 100%;
}

.c45: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);
}

.c45:active {
  box-shadow: inset 0 0 0 2em rgb(216,216,216);
}

.c45:before {
  display: none;
}

.c12 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  background-color: rgb(255,255,255);
  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
  border: 0.0625rem solid rgb(216,216,216);
  border-radius: 0.1875rem;
  width: 100%;
}

.c13 {
  border-radius: 0.1875rem 0 0 0.1875rem;
  min-width: 0.75rem;
  background-color: rgb(0,152,88);
  background-color: rgb(210,67,58);
}

.c14 {
  padding: 1.125rem 1.125rem;
}

.c16 {
  line-height: 0.875rem;
  font-size: 0.8125rem;
}

.c17 {
  margin: 0;
}

.c20 {
  margin: 0;
}

.c43 {
  margin: 0 6px;
}

.c22 {
  margin-left: 0;
  margin-right: 0;
}

.c26 {
  margin-bottom: 0;
}

.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 (min-width:0em) {
  .c7 {
    -webkit-flex-basis: 100%;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    max-width: 100%;
  }
}

@media only screen and (min-width:48em) {
  .c7 {
    -webkit-flex-basis: 100%;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    max-width: 100%;
  }
}

@media only screen and (min-width:64em) {
  .c7 {
    -webkit-flex-basis: 75%;
    -ms-flex-preferred-size: 75%;
    flex-basis: 75%;
    max-width: 75%;
  }
}

@media only screen and (max-width:37.4375rem) {
  .c0 {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
}

@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
  .c0 {
    padding-left: 1.875rem;
    padding-right: 1.875rem;
  }
}

@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
  .c0 {
    padding-left: 4.375rem;
    padding-right: 4.375rem;
  }
}

<div
  className="c0 c1"
>
  <div
    className="c2"
  >
    <div
      className="c3"
    >
      <div
        className="c4"
      >
        <p
          className="c5 c6"
        >
          Triton CNS is used to automatically update hostnames for your instances. You can serve multiple instances (with multiple IP addresses) under the same hostname by matching the CNS service names.
           
          <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="c3"
  >
    <div
      className="c7"
    >
      <div
        className="c8"
        disabled={false}
        name="card"
      >
        <div
          className="c9 c8"
          disabled={false}
          name="card-outlet"
        >
          <div
            className="c10"
          >
            <div
              className="c11"
            >
              <div
                className="c12"
              >
                <div
                  className="c13"
                />
                <div
                  className="c14"
                >
                  <h4
                    className="c15"
                  >
                    Ooops!
                  </h4>
                  <p
                    className="c16 c6"
                  >
                    mutation error
                  </p>
                </div>
              </div>
            </div>
            <div
              className="c11"
            >
              <h3
                className="c17 c18"
              >
                CNS Default Hostnames
              </h3>
              <div
                className="c19"
              >
                <p
                  className="c20 c6"
                >
                  Default hostnames are automatically generated from both the instance name and any attached networks.
                </p>
              </div>
            </div>
            <div
              className="c21"
            />
            <div
              className="c19"
            >
              <div
                className="c22 c23 c3"
                height="0.0625rem"
              />
            </div>
            <div
              className="c24"
            >
              <div
                className="c25"
              >
                <h3
                  className="c17 c18"
                >
                  CNS Service hostnames
                </h3>
                <div
                  className="c19"
                >
                  <p
                    className="c20 c6"
                  >
                    CNS service hostnames are created by attaching a CNS service name to one or more instances. You can serve multiple instances under the same hostname by assigning them to a matching CNS service name.
                  </p>
                </div>
              </div>
              <div
                className="c2"
              >
                <form
                  className="c26"
                  onSubmit={undefined}
                >
                  <div
                    className="c27"
                    wrap={true}
                  >
                    <div
                      className="c28"
                    >
                      <div
                        className="c29"
                      >
                        <div
                          className="c30"
                          name="name"
                          role="group"
                          style={undefined}
                        >
                          <label
                            className="c31 c32"
                            htmlFor="n"
                          >
                            Attach to new CNS service name
                          </label>
                          <div
                            className="c33"
                          >
                            <input
                              className="c34"
                              disabled={false}
                              id="n"
                              onBlur={null}
                              placeholder="Example: mySQLdb"
                            />
                          </div>
                        </div>
                      </div>
                    </div>
                    <div
                      className="c28"
                    >
                      <div
                        className="c35"
                      >
                        <button
                          className="c36 c37 c38 c39"
                          data-ui-button="true"
                          disabled={undefined}
                          href=""
                          type="submit"
                        >
                          Add
                        </button>
                      </div>
                    </div>
                  </div>
                </form>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div
        className="c24"
      >
        <div
          className="c2"
        >
          <div
            className="c30"
            name="cns-enabled"
            role="group"
            style={undefined}
          >
            <div
              className="c40"
            >
              <label
                className="c31 c32"
                disabled={false}
                htmlFor="o"
              >
                Disabled CNS
              </label>
              <div
                className="c41"
              >
                <div
                  className="c42"
                >
                  <input
                    checked={true}
                    className="c43 c44"
                    disabled={false}
                    id="o"
                    onBlur={undefined}
                    onChange={[Function]}
                    type="checkbox"
                  />
                  <label
                    checked={true}
                    className="c43 c45"
                    disabled={false}
                    htmlFor="o"
                    id="o"
                    onBlur={undefined}
                    onChange={[Function]}
                  />
                  <label
                    checked={true}
                    className="c43 c31 c32"
                    disabled={false}
                    htmlFor="o"
                    id="o"
                    onBlur={undefined}
                    onChange={[Function]}
                  >
                     
                    Enabled CNS
                  </label>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`renders <Cns services /> without throwing 1`] = `
.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;
}

.c7 {
  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;
}

.c2 {
  margin-bottom: 1.125rem;
}

.c11 {
  margin-bottom: 1.875rem;
}

.c14 {
  margin-top: 0.75rem;
}

.c19 {
  margin-top: 1.875rem;
}

.c20 {
  margin-top: 1.875rem;
  margin-bottom: 1.875rem;
}

.c28 {
  margin-top: 0.1875rem;
}

.c30 {
  margin-left: 0.75rem;
}

.c42 {
  margin-left: 0.375rem;
}

.c35 {
  margin-top: 0.375rem;
}

.c38 {
  margin-right: 0.375rem;
  margin-bottom: 0.375rem;
}

.c10 {
  padding: 1.875rem;
}

.c34 {
  font-family: sans-serif;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
  overflow: visible;
  text-transform: none;
  -webkit-appearance: button;
  -moz-appearance: button;
  appearance: button;
}

.c34::-moz-focus-inner,
.c34[type='button']::-moz-focus-inner,
.c34[type='reset']::-moz-focus-inner,
.c34[type='submit']::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

.c34:-moz-focusring,
.c34[type='button']:-moz-focusring,
.c34[type='reset']:-moz-focusring,
.c34[type='submit']:-moz-focusring {
  outline: 0.0625rem dotted ButtonText;
}

.c6 {
  color: rgb(73,73,73);
  margin: 0;
  line-height: 1.5rem;
  font-size: 0.9375rem;
  margin: 0;
}

.c33 {
  min-width: 7.5rem;
}

.c32 {
  display: inline-block;
}

.c31 {
  box-sizing: border-box;
  display: inline-block;
  -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;
  min-height: 3rem;
  height: 3rem;
  min-width: 7.5rem;
  padding: 0.9375rem 1.125rem;
  position: relative;
  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
  font-size: 0.9375rem;
  text-align: center;
  font-style: normal;
  font-stretch: normal;
  -webkit-letter-spacing: normal;
  -moz-letter-spacing: normal;
  -ms-letter-spacing: normal;
  letter-spacing: normal;
  -webkit-text-decoration: none;
  text-decoration: none;
  white-space: nowrap;
  vertical-align: middle;
  touch-action: manipulation;
  cursor: pointer;
  color: rgb(255,255,255);
  -webkit-text-fill-color: currentcolor;
  background-image: none;
  background-color: rgb(59,70,204);
  border-radius: 0.25rem;
  border: solid 0.0625rem rgb(45,56,132);
}

.c31:focus {
  outline: 0;
  -webkit-text-decoration: none;
  text-decoration: none;
  background-color: rgb(59,70,204);
  border-color: rgb(45,56,132);
}

.c31:hover {
  background-color: rgb(72,83,217);
  border-color: rgb(45,56,132);
}

.c31:active,
.c31:active:hover,
.c31:active:focus {
  background-image: none;
  outline: 0;
  background-color: rgb(45,56,132);
  border-color: rgb(45,56,132);
}

.c31[disabled] {
  cursor: not-allowed;
  pointer-events: none;
}

.c27 {
  font-size: 0.9375rem;
  line-height: 1.125rem;
  font-style: normal;
  font-stretch: normal;
  display: block;
  color: rgb(70,70,70);
  text-align: left;
}

.c0 {
  box-sizing: border-box;
  width: 100%;
  max-width: 78.75rem;
  padding-bottom: 1.125rem;
}

.c13 {
  margin: 0;
  color: rgb(73,73,73);
  font-weight: normal;
  line-height: 1.625rem;
  font-size: 1.3125rem;
}

.c18 {
  height: 1px;
  background-color: rgb(216,216,216);
  height: 0.0625rem;
}

.c8 {
  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);
}

.c9 {
  box-sizing: border-box;
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  border-width: 0;
  background-color: transparent;
}

.c25 {
  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 {
  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;
}

.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-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-align-items: flex-end;
  -webkit-box-align: flex-end;
  -ms-flex-align: flex-end;
  align-items: flex-end;
}

.c24 {
  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;
}

.c41 {
  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 {
  -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;
  display: block;
}

.c29 {
  box-sizing: border-box;
  width: 18.75rem;
  height: 3rem;
  min-height: 3rem;
  padding: 0.8125rem 0.75rem;
  border-radius: 0.25rem;
  background-color: rgb(255,255,255);
  border: 0.0625rem solid rgb(216,216,216);
  color: rgb(73,73,73);
  font-size: 0.9375rem;
  line-height: normal !important;
  font-style: normal;
  font-stretch: normal;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: 0;
  max-width: 22.1875rem;
  text-overflow: ellipsis;
}

.c29:focus {
  border-color: rgb(59,70,204);
  outline: 0;
}

.c29::-webkit-input-placeholder {
  color: rgba(73,73,73,0.5);
}

.c29::-moz-placeholder {
  color: rgba(73,73,73,0.5);
}

.c29:-ms-input-placeholder {
  color: rgba(73,73,73,0.5);
}

.c29:invalid {
  box-shadow: none;
}

.c29:disabled {
  background-color: rgb(250,250,250);
  color: rgb(216,216,216);
  cursor: not-allowed;
}

.c29:disabled::-webkit-input-placeholder {
  color: rgba(73,73,73,0.5);
}

.c29:disabled::-moz-placeholder {
  color: rgba(73,73,73,0.5);
}

.c29:disabled:-ms-input-placeholder {
  color: rgba(73,73,73,0.5);
}

.c26 {
  font-weight: 600;
  white-space: pre;
  font-size: 0.8125rem;
}

.c43 {
  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;
}

.c45 {
  display: none;
}

.c45:checked + label {
  background: #3B46CC;
  border: 0.0625rem solid rgb(59,70,204);
}

.c45: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);
}

.c45:checked + label:active {
  box-shadow: none;
}

.c46 {
  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);
}

.c46::selection {
  background: none;
}

.c46:active {
  box-shadow: inset 0 0 0 1.5rem rgb(216,216,216);
}

.c46:hover {
  border: 0.0625rem solid rgb(59,70,204);
}

.c46:hover:after {
  box-shadow: 0 0 0 0.0625rem rgb(59,70,204);
}

.c46:after,
.c46:before {
  position: relative;
  display: block;
  content: '';
  width: 50%;
  height: 100%;
}

.c46: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);
}

.c46:active {
  box-shadow: inset 0 0 0 2em rgb(216,216,216);
}

.c46:before {
  display: none;
}

.c40 {
  margin-left: 0.75rem;
  cursor: pointer;
}

.c39 {
  border: 0.0625rem solid rgb(216,216,216);
  box-sizing: border-box;
  border-radius: 0.125rem;
  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-box-flex: 0;
  -webkit-flex-grow: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background: rgba(66,134,244,0.1);
  border: 0.0625rem solid rgb(45,56,132);
}

.c37 {
  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;
}

.c36 {
  margin-bottom: -0.375rem;
}

.c12 {
  margin: 0;
}

.c15 {
  margin: 0;
}

.c44 {
  margin: 0 6px;
}

.c17 {
  margin-left: 0;
  margin-right: 0;
}

.c21 {
  margin-bottom: 0;
}

.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 (min-width:0em) {
  .c7 {
    -webkit-flex-basis: 100%;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    max-width: 100%;
  }
}

@media only screen and (min-width:48em) {
  .c7 {
    -webkit-flex-basis: 100%;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    max-width: 100%;
  }
}

@media only screen and (min-width:64em) {
  .c7 {
    -webkit-flex-basis: 75%;
    -ms-flex-preferred-size: 75%;
    flex-basis: 75%;
    max-width: 75%;
  }
}

@media only screen and (max-width:37.4375rem) {
  .c0 {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
}

@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
  .c0 {
    padding-left: 1.875rem;
    padding-right: 1.875rem;
  }
}

@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
  .c0 {
    padding-left: 4.375rem;
    padding-right: 4.375rem;
  }
}

<div
  className="c0 c1"
>
  <div
    className="c2"
  >
    <div
      className="c3"
    >
      <div
        className="c4"
      >
        <p
          className="c5 c6"
        >
          Triton CNS is used to automatically update hostnames for your instances. You can serve multiple instances (with multiple IP addresses) under the same hostname by matching the CNS service names.
           
          <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="c3"
  >
    <div
      className="c7"
    >
      <div
        className="c8"
        disabled={false}
        name="card"
      >
        <div
          className="c9 c8"
          disabled={false}
          name="card-outlet"
        >
          <div
            className="c10"
          >
            <div
              className="c11"
            >
              <h3
                className="c12 c13"
              >
                CNS Default Hostnames
              </h3>
              <div
                className="c14"
              >
                <p
                  className="c15 c6"
                >
                  Default hostnames are automatically generated from both the instance name and any attached networks.
                </p>
              </div>
            </div>
            <div
              className="c16"
            />
            <div
              className="c14"
            >
              <div
                className="c17 c18 c3"
                height="0.0625rem"
              />
            </div>
            <div
              className="c19"
            >
              <div
                className="c20"
              >
                <h3
                  className="c12 c13"
                >
                  CNS Service hostnames
                </h3>
                <div
                  className="c14"
                >
                  <p
                    className="c15 c6"
                  >
                    CNS service hostnames are created by attaching a CNS service name to one or more instances. You can serve multiple instances under the same hostname by assigning them to a matching CNS service name.
                  </p>
                </div>
              </div>
              <div
                className="c2"
              >
                <form
                  className="c21"
                  onSubmit={undefined}
                >
                  <div
                    className="c22"
                    wrap={true}
                  >
                    <div
                      className="c23"
                    >
                      <div
                        className="c24"
                      >
                        <div
                          className="c25"
                          name="name"
                          role="group"
                          style={undefined}
                        >
                          <label
                            className="c26 c27"
                            htmlFor="s"
                          >
                            Attach to new CNS service name
                          </label>
                          <div
                            className="c28"
                          >
                            <input
                              className="c29"
                              disabled={false}
                              id="s"
                              onBlur={null}
                              placeholder="Example: mySQLdb"
                            />
                          </div>
                        </div>
                      </div>
                    </div>
                    <div
                      className="c23"
                    >
                      <div
                        className="c30"
                      >
                        <button
                          className="c31 c32 c33 c34"
                          data-ui-button="true"
                          disabled={undefined}
                          href=""
                          type="submit"
                        >
                          Add
                        </button>
                      </div>
                    </div>
                  </div>
                </form>
              </div>
              <div
                className="c2"
              >
                <label
                  className="c26 c27"
                  htmlFor=""
                >
                  Existing CNS service name(s)
                </label>
                <div
                  className="c35"
                >
                  <ul
                    className="c36 c37"
                  >
                    <div
                      className="c38"
                    >
                      <li
                        className="c39"
                        fill="rgba(66, 134, 244, 0.1)"
                        id="cns-tag-0"
                      >
                        serbice
                        <svg
                          className="c40"
                          height="11.31"
                          innerRef={undefined}
                          onClick={[Function]}
                          style={
                            Object {
                              "transform": "rotate(0deg)",
                            }
                          }
                          viewBox="0 0 11.31 11.31"
                          width="11.31"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <path
                            d="M11.31,1.41,9.9,0,5.66,4.24,1.41,0,0,1.41,4.24,5.66,0,9.9l1.41,1.41L5.66,7.07,9.9,11.31,11.31,9.9,7.07,5.66Z"
                            fill="rgb(45, 56, 132)"
                          />
                        </svg>
                      </li>
                    </div>
                    <div
                      className="c38"
                    >
                      <li
                        className="c39"
                        fill="rgba(66, 134, 244, 0.1)"
                        id="cns-tag-1"
                      >
                        dssasda
                        <svg
                          className="c40"
                          height="11.31"
                          innerRef={undefined}
                          onClick={[Function]}
                          style={
                            Object {
                              "transform": "rotate(0deg)",
                            }
                          }
                          viewBox="0 0 11.31 11.31"
                          width="11.31"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <path
                            d="M11.31,1.41,9.9,0,5.66,4.24,1.41,0,0,1.41,4.24,5.66,0,9.9l1.41,1.41L5.66,7.07,9.9,11.31,11.31,9.9,7.07,5.66Z"
                            fill="rgb(45, 56, 132)"
                          />
                        </svg>
                      </li>
                    </div>
                    <div
                      className="c38"
                    >
                      <li
                        className="c39"
                        fill="rgba(66, 134, 244, 0.1)"
                        id="cns-tag-2"
                      >
                        dsasd
                        <svg
                          className="c40"
                          height="11.31"
                          innerRef={undefined}
                          onClick={[Function]}
                          style={
                            Object {
                              "transform": "rotate(0deg)",
                            }
                          }
                          viewBox="0 0 11.31 11.31"
                          width="11.31"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <path
                            d="M11.31,1.41,9.9,0,5.66,4.24,1.41,0,0,1.41,4.24,5.66,0,9.9l1.41,1.41L5.66,7.07,9.9,11.31,11.31,9.9,7.07,5.66Z"
                            fill="rgb(45, 56, 132)"
                          />
                        </svg>
                      </li>
                    </div>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div
        className="c19"
      >
        <div
          className="c2"
        >
          <div
            className="c25"
            name="cns-enabled"
            role="group"
            style={undefined}
          >
            <div
              className="c41"
            >
              <label
                className="c26 c27"
                disabled={false}
                htmlFor="t"
              >
                Disabled CNS
              </label>
              <div
                className="c42"
              >
                <div
                  className="c43"
                >
                  <input
                    checked={true}
                    className="c44 c45"
                    disabled={false}
                    id="t"
                    onBlur={undefined}
                    onChange={[Function]}
                    type="checkbox"
                  />
                  <label
                    checked={true}
                    className="c44 c46"
                    disabled={false}
                    htmlFor="t"
                    id="t"
                    onBlur={undefined}
                    onChange={[Function]}
                  />
                  <label
                    checked={true}
                    className="c44 c26 c27"
                    disabled={false}
                    htmlFor="t"
                    id="t"
                    onBlur={undefined}
                    onChange={[Function]}
                  >
                     
                    Enabled CNS
                  </label>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`renders <Cns services hostnames /> without throwing 1`] = `
.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;
}

.c7 {
  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;
}

.c2 {
  margin-bottom: 1.125rem;
}

.c11 {
  margin-top: 1.875rem;
}

.c16 {
  margin-left: 0.375rem;
}

.c10 {
  padding: 1.875rem;
}

.c6 {
  color: rgb(73,73,73);
  margin: 0;
  line-height: 1.5rem;
  font-size: 0.9375rem;
  margin: 0;
}

.c15 {
  font-size: 0.9375rem;
  line-height: 1.125rem;
  font-style: normal;
  font-stretch: normal;
  display: block;
  color: rgb(70,70,70);
  text-align: left;
}

.c0 {
  box-sizing: border-box;
  width: 100%;
  max-width: 78.75rem;
  padding-bottom: 1.125rem;
}

.c8 {
  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);
}

.c9 {
  box-sizing: border-box;
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  border-width: 0;
  background-color: transparent;
}

.c12 {
  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;
}

.c13 {
  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;
}

.c14 {
  font-weight: 600;
  white-space: pre;
  font-size: 0.8125rem;
}

.c17 {
  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;
}

.c18 {
  margin: 0 6px;
}

.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 (min-width:0em) {
  .c7 {
    -webkit-flex-basis: 100%;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    max-width: 100%;
  }
}

@media only screen and (min-width:48em) {
  .c7 {
    -webkit-flex-basis: 100%;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    max-width: 100%;
  }
}

@media only screen and (min-width:64em) {
  .c7 {
    -webkit-flex-basis: 75%;
    -ms-flex-preferred-size: 75%;
    flex-basis: 75%;
    max-width: 75%;
  }
}

@media only screen and (max-width:37.4375rem) {
  .c0 {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
}

@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
  .c0 {
    padding-left: 1.875rem;
    padding-right: 1.875rem;
  }
}

@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
  .c0 {
    padding-left: 4.375rem;
    padding-right: 4.375rem;
  }
}

<div
  className="c0 c1"
>
  <div
    className="c2"
  >
    <div
      className="c3"
    >
      <div
        className="c4"
      >
        <p
          className="c5 c6"
        >
          Triton CNS is used to automatically update hostnames for your instances. You can serve multiple instances (with multiple IP addresses) under the same hostname by matching the CNS service names.
           
          <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="c3"
  >
    <div
      className="c7"
    >
      <div
        className="c8"
        disabled={false}
        name="card"
      >
        <div
          className="c9 c8"
          disabled={false}
          name="card-outlet"
        >
          <div
            className="c10"
          />
        </div>
      </div>
      <div
        className="c11"
      >
        <div
          className="c2"
        >
          <div
            className="c12"
            name="cns-enabled"
            role="group"
            style={undefined}
          >
            <div
              className="c13"
            >
              <label
                className="c14 c15"
                disabled={false}
                htmlFor="w"
              >
                Disabled CNS
              </label>
              <div
                className="c16"
              >
                <div
                  className="c17"
                >
                  <input
                    checked={false}
                    className="c18 c19"
                    disabled={false}
                    id="w"
                    onBlur={undefined}
                    onChange={[Function]}
                    type="checkbox"
                  />
                  <label
                    checked={false}
                    className="c18 c20"
                    disabled={false}
                    htmlFor="w"
                    id="w"
                    onBlur={undefined}
                    onChange={[Function]}
                  />
                  <label
                    checked={false}
                    className="c18 c14 c15"
                    disabled={false}
                    htmlFor="w"
                    id="w"
                    onBlur={undefined}
                    onChange={[Function]}
                  >
                     
                    Enabled CNS
                  </label>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;