joyent-portal/packages/my-joy-beta/src/containers/instances/__tests__/__snapshots__/summary.spec.js.snap

5311 lines
136 KiB
Plaintext

// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders <Summary /> without throwing 1`] = `
.c0 {
margin-right: auto;
margin-left: auto;
box-sizing: border-box;
width: 100%;
max-width: 62.5rem;
padding-bottom: 1.125rem;
}
@media only screen and (min-width:48em) {
.c0 {
width: 46rem;
}
}
@media only screen and (min-width:64em) {
.c0 {
width: 61rem;
}
}
@media only screen and (min-width:75em) {
.c0 {
width: 76rem;
}
}
@media only screen and (max-width:47.9375rem) {
.c0 {
padding-left: 0.375rem;
padding-right: 0.375rem;
}
}
<div
className="c0"
/>
`;
exports[`renders <Summary loading /> without throwing 1`] = `
.c2 {
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;
}
.c3 {
fill: rgb(59,70,204);
stroke: rgb(59,70,204);
-webkit-animation: iCqDak 1.5s ease-out 0s infinite;
animation: iCqDak 1.5s ease-out 0s infinite;
-webkit-animation-delay: 0.5s;
animation-delay: 0.5s;
}
.c4 {
fill: rgb(59,70,204);
stroke: rgb(59,70,204);
-webkit-animation: iCqDak 1.5s ease-out 0s infinite;
animation: iCqDak 1.5s ease-out 0s infinite;
-webkit-animation-delay: 1s;
animation-delay: 1s;
}
.c1 {
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;
}
.c5 {
color: rgba(73,73,73,1);
line-height: 1.5rem;
font-size: 0.9375rem;
margin: 0;
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
-webkit-align-self: stretch;
-ms-flex-item-align: stretch;
align-self: stretch;
text-align: center;
margin-bottom: 0;
margin-left: 0.375rem;
}
.c5 + p,
.c5 + small,
.c5 + h1,
.c5 + h2,
.c5 + label,
.c5 + h3,
.c5 + h4,
.c5 + h5,
.c5 + div,
.c5 + span {
padding-bottom: 2.25rem;
}
.c0 {
margin-right: auto;
margin-left: auto;
box-sizing: border-box;
width: 100%;
max-width: 62.5rem;
padding-bottom: 1.125rem;
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;
}
@media only screen and (min-width:48em) {
.c0 {
width: 46rem;
}
}
@media only screen and (min-width:64em) {
.c0 {
width: 61rem;
}
}
@media only screen and (min-width:75em) {
.c0 {
width: 76rem;
}
}
@media only screen and (max-width:47.9375rem) {
.c0 {
padding-left: 0.375rem;
padding-right: 0.375rem;
}
}
<div
className="c0"
>
<div
className="c1"
>
<svg
height="10"
width="28"
>
<rect
className="c2"
height="6"
width="6"
x="2"
y="2"
/>
<rect
className="c3"
height="6"
width="6"
x="11"
y="2"
/>
<rect
className="c4"
height="6"
width="6"
x="20"
y="2"
/>
</svg>
<p
className="c5"
>
Loading...
</p>
</div>
</div>
`;
exports[`renders <Summary loadingError /> without throwing 1`] = `
.c5 {
color: rgba(73,73,73,1);
line-height: 1.5rem;
font-size: 0.9375rem;
margin: 0;
}
.c5 + p,
.c5 + small,
.c5 + h1,
.c5 + h2,
.c5 + label,
.c5 + h3,
.c5 + h4,
.c5 + h5,
.c5 + div,
.c5 + span {
padding-bottom: 2.25rem;
}
.c0 {
margin-right: auto;
margin-left: auto;
box-sizing: border-box;
width: 100%;
max-width: 62.5rem;
padding-bottom: 1.125rem;
}
.c4 {
color: rgba(73,73,73,1);
font-weight: 600;
line-height: 1.5rem;
font-size: 0.9375rem;
margin: 0;
}
.c4 + p,
.c4 + small,
.c4 + h1,
.c4 + h2,
.c4 + label,
.c4 + h3,
.c4 + h4,
.c4 + h5,
.c4 + div,
.c4 + span {
margin-top: 0.75rem;
}
.c1 {
position: relative;
margin-bottom: 0.75rem;
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);
width: 100%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.c2 {
min-width: 2.25rem;
margin-right: 1.125rem;
min-height: 100%;
background-color: rgb(0,152,88);
background-color: rgb(210,67,58);
}
.c3 {
padding: 0.75rem 0 0.84375rem 0;
}
.c6 {
position: absolute;
right: 0.1875rem;
margin: 0;
}
@media only screen and (min-width:48em) {
.c0 {
width: 46rem;
}
}
@media only screen and (min-width:64em) {
.c0 {
width: 61rem;
}
}
@media only screen and (min-width:75em) {
.c0 {
width: 76rem;
}
}
@media only screen and (max-width:47.9375rem) {
.c0 {
padding-left: 0.375rem;
padding-right: 0.375rem;
}
}
<div
className="c0"
>
<div
className="c1"
>
<div
className="c2"
/>
<div
className="c3"
>
<h4
className="c4"
>
Ooops!
</h4>
<p
className="c5"
>
An error occurred while loading your instance summary
</p>
</div>
<svg
className="c6 "
height="12"
onClick={[Function]}
style={
Object {
"transform": "rotate(0deg)",
}
}
viewBox="0 0 12 12"
width="12"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M7.314 5.9l4.242-4.243L10.142.243 5.9 4.485 1.657.243.243 1.657l4.242 4.242-4.242 4.243 1.414 1.414 4.242-4.242 4.243 4.242 1.414-1.414L7.314 5.9z"
fill="rgba(73, 73, 73, 1)"
fillRule="evenodd"
/>
</svg>
</div>
</div>
`;
exports[`renders <Summary mutationError /> without throwing 1`] = `
.c5 {
color: rgba(73,73,73,1);
line-height: 1.5rem;
font-size: 0.9375rem;
margin: 0;
}
.c5 + p,
.c5 + small,
.c5 + h1,
.c5 + h2,
.c5 + label,
.c5 + h3,
.c5 + h4,
.c5 + h5,
.c5 + div,
.c5 + span {
padding-bottom: 2.25rem;
}
.c0 {
margin-right: auto;
margin-left: auto;
box-sizing: border-box;
width: 100%;
max-width: 62.5rem;
padding-bottom: 1.125rem;
}
.c4 {
color: rgba(73,73,73,1);
font-weight: 600;
line-height: 1.5rem;
font-size: 0.9375rem;
margin: 0;
}
.c4 + p,
.c4 + small,
.c4 + h1,
.c4 + h2,
.c4 + label,
.c4 + h3,
.c4 + h4,
.c4 + h5,
.c4 + div,
.c4 + span {
margin-top: 0.75rem;
}
.c1 {
position: relative;
margin-bottom: 0.75rem;
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);
width: 100%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.c2 {
min-width: 2.25rem;
margin-right: 1.125rem;
min-height: 100%;
background-color: rgb(0,152,88);
background-color: rgb(210,67,58);
}
.c3 {
padding: 0.75rem 0 0.84375rem 0;
}
.c6 {
position: absolute;
right: 0.1875rem;
margin: 0;
}
@media only screen and (min-width:48em) {
.c0 {
width: 46rem;
}
}
@media only screen and (min-width:64em) {
.c0 {
width: 61rem;
}
}
@media only screen and (min-width:75em) {
.c0 {
width: 76rem;
}
}
@media only screen and (max-width:47.9375rem) {
.c0 {
padding-left: 0.375rem;
padding-right: 0.375rem;
}
}
<div
className="c0"
>
<div
className="c1"
>
<div
className="c2"
/>
<div
className="c3"
>
<h4
className="c4"
>
Ooops!
</h4>
<p
className="c5"
>
some mutation error
</p>
</div>
<svg
className="c6 "
height="12"
onClick={[Function]}
style={
Object {
"transform": "rotate(0deg)",
}
}
viewBox="0 0 12 12"
width="12"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M7.314 5.9l4.242-4.243L10.142.243 5.9 4.485 1.657.243.243 1.657l4.242 4.242-4.242 4.243 1.414 1.414 4.242-4.242 4.243 4.242 1.414-1.414L7.314 5.9z"
fill="rgba(73, 73, 73, 1)"
fillRule="evenodd"
/>
</svg>
</div>
</div>
`;
exports[`renders <Summary starting stopping rebooting removing /> without throwing 1`] = `
.c0 {
margin-right: auto;
margin-left: auto;
box-sizing: border-box;
width: 100%;
max-width: 62.5rem;
padding-bottom: 1.125rem;
}
@media only screen and (min-width:48em) {
.c0 {
width: 46rem;
}
}
@media only screen and (min-width:64em) {
.c0 {
width: 61rem;
}
}
@media only screen and (min-width:75em) {
.c0 {
width: 76rem;
}
}
@media only screen and (max-width:47.9375rem) {
.c0 {
padding-left: 0.375rem;
padding-right: 0.375rem;
}
}
<div
className="c0"
/>
`;
exports[`renders <Summary starting stopping rebooting removing /> without throwing 2`] = `
.c20 {
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;
min-width: 7.5rem;
}
.c20::-moz-focus-inner,
.c20[type='button']::-moz-focus-inner,
.c20[type='reset']::-moz-focus-inner,
.c20[type='submit']::-moz-focus-inner {
border-style: none;
padding: 0;
}
.c20:-moz-focusring,
.c20[type='button']:-moz-focusring,
.c20[type='reset']:-moz-focusring,
.c20[type='submit']:-moz-focusring {
outline: 0.0625rem dotted ButtonText;
}
.c20 + button {
margin-left: 0.375rem;
}
.c19 {
display: inline-block;
}
.c18 {
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;
margin-bottom: 0.5rem;
margin-top: 0.5rem;
padding: 0.9375rem 1.125rem;
position: relative;
font-size: 0.9375rem;
text-align: center;
font-style: normal;
font-stretch: normal;
line-height: normal;
-webkit-letter-spacing: normal;
-moz-letter-spacing: normal;
-ms-letter-spacing: normal;
letter-spacing: normal;
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);
color: rgb(70,70,70);
-webkit-text-fill-color: currentcolor;
background-color: rgb(255,255,255);
border-color: rgb(216,216,216);
cursor: not-allowed;
pointer-events: none;
color: rgb(216,216,216);
background-color: rgb(250,250,250);
border-color: rgb(216,216,216);
padding: 0.5625rem 1.125rem;
font-size: 0.8125rem;
min-width: 0rem;
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.c18:focus {
outline: 0;
text-decoration: none;
background-color: rgb(59,70,204);
border-color: rgb(45,56,132);
}
.c18:hover {
background-color: rgb(72,83,217);
border: solid 0.0625rem rgb(45,56,132);
}
.c18:active,
.c18:active:hover,
.c18:active:focus {
background-image: none;
outline: 0;
background-color: rgb(45,56,132);
border-color: rgb(45,56,132);
}
.c18[disabled] {
cursor: not-allowed;
pointer-events: none;
}
.c18:focus {
background-color: rgb(255,255,255);
border-color: rgb(216,216,216);
}
.c18:hover {
background-color: rgb(247,247,247);
border-color: rgb(216,216,216);
}
.c18:active,
.c18:active:hover,
.c18:active:focus {
background-color: rgb(230,230,230);
border-color: rgb(216,216,216);
}
.c18:focus {
background-color: rgb(250,250,250);
border-color: rgb(216,216,216);
}
.c18:hover {
background-color: rgb(250,250,250);
border-color: rgb(250,250,250);
}
.c18:active,
.c18:active:hover,
.c18:active:focus {
background-color: rgb(250,250,250);
border-color: rgb(250,250,250);
}
.c18 svg + span {
margin-left: 0.75rem;
}
.c18 svg {
max-height: 1.125rem;
}
.c21 {
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;
margin-bottom: 0.5rem;
margin-top: 0.5rem;
padding: 0.9375rem 1.125rem;
position: relative;
font-size: 0.9375rem;
text-align: center;
font-style: normal;
font-stretch: normal;
line-height: normal;
-webkit-letter-spacing: normal;
-moz-letter-spacing: normal;
-ms-letter-spacing: normal;
letter-spacing: normal;
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);
color: rgb(70,70,70);
-webkit-text-fill-color: currentcolor;
background-color: rgb(255,255,255);
border-color: rgb(216,216,216);
cursor: not-allowed;
pointer-events: none;
color: rgb(216,216,216);
background-color: rgb(250,250,250);
border-color: rgb(216,216,216);
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
font-weight: 500;
}
.c21:focus {
outline: 0;
text-decoration: none;
background-color: rgb(59,70,204);
border-color: rgb(45,56,132);
}
.c21:hover {
background-color: rgb(72,83,217);
border: solid 0.0625rem rgb(45,56,132);
}
.c21:active,
.c21:active:hover,
.c21:active:focus {
background-image: none;
outline: 0;
background-color: rgb(45,56,132);
border-color: rgb(45,56,132);
}
.c21[disabled] {
cursor: not-allowed;
pointer-events: none;
}
.c21:focus {
background-color: rgb(255,255,255);
border-color: rgb(216,216,216);
}
.c21:hover {
background-color: rgb(247,247,247);
border-color: rgb(216,216,216);
}
.c21:active,
.c21:active:hover,
.c21:active:focus {
background-color: rgb(230,230,230);
border-color: rgb(216,216,216);
}
.c21:focus {
background-color: rgb(250,250,250);
border-color: rgb(216,216,216);
}
.c21:hover {
background-color: rgb(250,250,250);
border-color: rgb(250,250,250);
}
.c21:active,
.c21:active:hover,
.c21:active:focus {
background-color: rgb(250,250,250);
border-color: rgb(250,250,250);
}
.c21 svg + span {
margin-left: 0.75rem;
}
.c21 svg {
max-height: 1.125rem;
}
.c22 {
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;
margin-bottom: 0.5rem;
margin-top: 0.5rem;
padding: 0.9375rem 1.125rem;
position: relative;
font-size: 0.9375rem;
text-align: center;
font-style: normal;
font-stretch: normal;
line-height: normal;
-webkit-letter-spacing: normal;
-moz-letter-spacing: normal;
-ms-letter-spacing: normal;
letter-spacing: normal;
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);
color: rgb(70,70,70);
-webkit-text-fill-color: currentcolor;
background-color: rgb(255,255,255);
border-color: rgb(216,216,216);
padding: 0.5625rem 1.125rem;
font-size: 0.8125rem;
min-width: 0rem;
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.c22:focus {
outline: 0;
text-decoration: none;
background-color: rgb(59,70,204);
border-color: rgb(45,56,132);
}
.c22:hover {
background-color: rgb(72,83,217);
border: solid 0.0625rem rgb(45,56,132);
}
.c22:active,
.c22:active:hover,
.c22:active:focus {
background-image: none;
outline: 0;
background-color: rgb(45,56,132);
border-color: rgb(45,56,132);
}
.c22[disabled] {
cursor: not-allowed;
pointer-events: none;
}
.c22:focus {
background-color: rgb(255,255,255);
border-color: rgb(216,216,216);
}
.c22:hover {
background-color: rgb(247,247,247);
border-color: rgb(216,216,216);
}
.c22:active,
.c22:active:hover,
.c22:active:focus {
background-color: rgb(230,230,230);
border-color: rgb(216,216,216);
}
.c22 svg + span {
margin-left: 0.75rem;
}
.c22 svg {
max-height: 1.125rem;
}
.c23 {
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;
margin-bottom: 0.5rem;
margin-top: 0.5rem;
padding: 0.9375rem 1.125rem;
position: relative;
font-size: 0.9375rem;
text-align: center;
font-style: normal;
font-stretch: normal;
line-height: normal;
-webkit-letter-spacing: normal;
-moz-letter-spacing: normal;
-ms-letter-spacing: normal;
letter-spacing: normal;
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);
color: rgb(70,70,70);
-webkit-text-fill-color: currentcolor;
background-color: rgb(255,255,255);
border-color: rgb(216,216,216);
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
font-weight: 500;
}
.c23:focus {
outline: 0;
text-decoration: none;
background-color: rgb(59,70,204);
border-color: rgb(45,56,132);
}
.c23:hover {
background-color: rgb(72,83,217);
border: solid 0.0625rem rgb(45,56,132);
}
.c23:active,
.c23:active:hover,
.c23:active:focus {
background-image: none;
outline: 0;
background-color: rgb(45,56,132);
border-color: rgb(45,56,132);
}
.c23[disabled] {
cursor: not-allowed;
pointer-events: none;
}
.c23:focus {
background-color: rgb(255,255,255);
border-color: rgb(216,216,216);
}
.c23:hover {
background-color: rgb(247,247,247);
border-color: rgb(216,216,216);
}
.c23:active,
.c23:active:hover,
.c23:active:focus {
background-color: rgb(230,230,230);
border-color: rgb(216,216,216);
}
.c23 svg + span {
margin-left: 0.75rem;
}
.c23 svg {
max-height: 1.125rem;
}
.c25 {
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;
margin-bottom: 0.5rem;
margin-top: 0.5rem;
padding: 0.9375rem 1.125rem;
position: relative;
font-size: 0.9375rem;
text-align: center;
font-style: normal;
font-stretch: normal;
line-height: normal;
-webkit-letter-spacing: normal;
-moz-letter-spacing: normal;
-ms-letter-spacing: normal;
letter-spacing: normal;
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);
color: rgb(70,70,70);
-webkit-text-fill-color: currentcolor;
background-color: rgb(255,255,255);
border-color: rgb(216,216,216);
color: rgb(210,67,58);
-webkit-text-fill-color: currentcolor;
background-color: rgb(255,255,255);
border-color: rgb(210,67,58);
padding: 0.5625rem 1.125rem;
font-size: 0.8125rem;
min-width: 0rem;
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
float: right;
}
.c25:focus {
outline: 0;
text-decoration: none;
background-color: rgb(59,70,204);
border-color: rgb(45,56,132);
}
.c25:hover {
background-color: rgb(72,83,217);
border: solid 0.0625rem rgb(45,56,132);
}
.c25:active,
.c25:active:hover,
.c25:active:focus {
background-image: none;
outline: 0;
background-color: rgb(45,56,132);
border-color: rgb(45,56,132);
}
.c25[disabled] {
cursor: not-allowed;
pointer-events: none;
}
.c25:focus {
background-color: rgb(255,255,255);
border-color: rgb(216,216,216);
}
.c25:hover {
background-color: rgb(247,247,247);
border-color: rgb(216,216,216);
}
.c25:active,
.c25:active:hover,
.c25:active:focus {
background-color: rgb(230,230,230);
border-color: rgb(216,216,216);
}
.c25:focus {
background-color: rgb(255,255,255);
border-color: rgb(210,67,58);
}
.c25:hover {
background-color: rgb(247,247,247);
border-color: rgb(210,67,58);
}
.c25:active,
.c25:active:hover,
.c25:active:focus {
background-color: rgb(230,230,230);
border-color: rgb(210,67,58);
}
.c25 svg + span {
margin-left: 0.75rem;
}
.c25 svg {
max-height: 1.125rem;
}
.c26 {
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;
margin-bottom: 0.5rem;
margin-top: 0.5rem;
padding: 0.9375rem 1.125rem;
position: relative;
font-size: 0.9375rem;
text-align: center;
font-style: normal;
font-stretch: normal;
line-height: normal;
-webkit-letter-spacing: normal;
-moz-letter-spacing: normal;
-ms-letter-spacing: normal;
letter-spacing: normal;
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);
color: rgb(70,70,70);
-webkit-text-fill-color: currentcolor;
background-color: rgb(255,255,255);
border-color: rgb(216,216,216);
color: rgb(210,67,58);
-webkit-text-fill-color: currentcolor;
background-color: rgb(255,255,255);
border-color: rgb(210,67,58);
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
font-weight: 500;
float: right;
}
.c26:focus {
outline: 0;
text-decoration: none;
background-color: rgb(59,70,204);
border-color: rgb(45,56,132);
}
.c26:hover {
background-color: rgb(72,83,217);
border: solid 0.0625rem rgb(45,56,132);
}
.c26:active,
.c26:active:hover,
.c26:active:focus {
background-image: none;
outline: 0;
background-color: rgb(45,56,132);
border-color: rgb(45,56,132);
}
.c26[disabled] {
cursor: not-allowed;
pointer-events: none;
}
.c26:focus {
background-color: rgb(255,255,255);
border-color: rgb(216,216,216);
}
.c26:hover {
background-color: rgb(247,247,247);
border-color: rgb(216,216,216);
}
.c26:active,
.c26:active:hover,
.c26:active:focus {
background-color: rgb(230,230,230);
border-color: rgb(216,216,216);
}
.c26:focus {
background-color: rgb(255,255,255);
border-color: rgb(210,67,58);
}
.c26:hover {
background-color: rgb(247,247,247);
border-color: rgb(210,67,58);
}
.c26:active,
.c26:active:hover,
.c26:active:focus {
background-color: rgb(230,230,230);
border-color: rgb(210,67,58);
}
.c26 svg + span {
margin-left: 0.75rem;
}
.c26 svg {
max-height: 1.125rem;
}
.c11 {
font-size: 0.9375rem;
font-style: normal;
font-stretch: normal;
display: block;
color: rgb(70,70,70);
text-align: left;
}
.c1 {
box-sizing: border-box;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex: 0 1 auto;
-ms-flex: 0 1 auto;
flex: 0 1 auto;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-right: -0.5rem;
margin-left: -0.5rem;
}
.c6 {
box-sizing: border-box;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex: 0 1 auto;
-ms-flex: 0 1 auto;
flex: 0 1 auto;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-right: -0.5rem;
margin-left: -0.5rem;
}
.c16 {
box-sizing: border-box;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex: 0 1 auto;
-ms-flex: 0 1 auto;
flex: 0 1 auto;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-right: -0.5rem;
margin-left: -0.5rem;
}
.c2 {
box-sizing: border-box;
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
padding-right: 0.5rem;
padding-left: 0.5rem;
}
.c7 {
box-sizing: border-box;
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
padding-right: 0.5rem;
padding-left: 0.5rem;
}
.c17 {
box-sizing: border-box;
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
padding-right: 0.5rem;
padding-left: 0.5rem;
}
.c24 {
box-sizing: border-box;
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
padding-right: 0.5rem;
padding-left: 0.5rem;
}
.c29 {
box-sizing: border-box;
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
padding-right: 0.5rem;
padding-left: 0.5rem;
}
.c0 {
margin-right: auto;
margin-left: auto;
box-sizing: border-box;
width: 100%;
max-width: 62.5rem;
padding-bottom: 1.125rem;
}
.c8 {
color: rgba(73,73,73,1);
font-weight: normal;
line-height: 1.875rem;
font-size: 1.5rem;
margin: 0;
}
.c8 + p,
.c8 + small,
.c8 + h1,
.c8 + h2,
.c8 + label,
.c8 + h3,
.c8 + h4,
.c8 + h5,
.c8 + div,
.c8 + span {
margin-top: 1.5rem;
}
.c28 {
background-color: rgb(216,216,216);
margin: 0;
height: 0.0625rem;
}
.c13 {
width: 0.375rem;
height: 0.375rem;
border-radius: 0.1875rem;
background-color: rgb(0,152,88);
display: inline-block;
margin-top: 0.0625rem;
margin-right: 0.375rem;
height: 0.6875rem;
width: 0.6875rem;
border-radius: 50%;
}
.c3 {
box-sizing: content-box;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex: 1 0 auto;
-ms-flex: 1 0 auto;
flex: 1 0 auto;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
position: relative;
border-width: 0.0625rem;
border-style: solid;
-webkit-transition: all 300ms ease;
transition: all 300ms ease;
color: rgba(73,73,73,1);
background-color: rgb(255,255,255);
border-color: rgb(216,216,216);
}
.c4 {
box-sizing: content-box;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex: 1 0 auto;
-ms-flex: 1 0 auto;
flex: 1 0 auto;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
position: relative;
border-width: 0.0625rem;
border-style: solid;
-webkit-transition: all 300ms ease;
transition: all 300ms ease;
color: rgba(73,73,73,1);
background-color: rgb(255,255,255);
border-color: rgb(216,216,216);
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;
margin-bottom: 0;
background-color: transparent;
}
.c4 > [name='card']:not(:last-child) {
margin-bottom: 0.8125rem;
}
.c4 > [name='card']:last-child {
margin-bottom: 0.4375rem;
}
.c32 {
box-sizing: border-box;
width: 18.75rem;
height: 3rem;
min-height: 3rem;
margin-bottom: 0.5rem;
margin-top: 0.5rem;
padding: 0.8125rem 1.125rem;
border-radius: 0.25rem;
background-color: rgb(255,255,255);
border: 0.0625rem solid rgb(216,216,216);
color: rgba(73,73,73,1);
max-width: 100%;
font-size: 0.9375rem;
line-height: normal !important;
font-style: normal;
font-stretch: normal;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
outline: 0;
}
.c32::-webkit-input-placeholder {
color: rgba(73,73,73,0.5);
}
.c32::-moz-placeholder {
color: rgba(73,73,73,0.5);
}
.c32:-ms-input-placeholder {
color: rgba(73,73,73,0.5);
}
.c32:invalid {
box-shadow: none;
}
.c32:disabled {
background-color: rgb(250,250,250);
color: rgb(216,216,216);
}
.c32:disabled::-webkit-input-placeholder {
color: rgba(73,73,73,0.5);
}
.c32:disabled::-moz-placeholder {
color: rgba(73,73,73,0.5);
}
.c32:disabled:-ms-input-placeholder {
color: rgba(73,73,73,0.5);
}
.c32:focus {
border-color: rgb(59,70,204);
outline: 0;
}
.c30 {
font-size: 0.9375rem;
font-style: normal;
font-stretch: normal;
display: block;
color: rgb(70,70,70);
text-align: left;
margin-right: 0.75rem;
font-weight: bold;
white-space: pre;
font-size: 0.8125rem;
}
.c9 {
margin-top: 0.5rem;
margin-bottom: 1rem;
}
.c14 {
margin-top: 0.25rem;
}
.c27 {
margin-top: 2rem;
margin-bottom: 4rem;
}
.c5 {
padding: 2rem;
}
.c15 {
opacity: 0.5;
padding-right: 0.1875rem;
}
.c10 {
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
}
.c31 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
margin-bottom: 0.625rem;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.c31 input {
padding-right: 1.875rem;
}
.c31 div {
position: relative;
left: -1.625rem;
}
.c34 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
margin-bottom: 0.625rem;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin-bottom: 0rem;
}
.c34 input {
padding-right: 1.875rem;
}
.c34 div {
position: relative;
left: -1.625rem;
}
.c12 {
width: 0.0625rem;
background: rgb(216,216,216);
height: 1.5rem;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-self: flex-end;
-ms-flex-item-align: end;
align-self: flex-end;
margin: 0 1.125rem;
}
.c33 {
cursor: pointer;
}
@media only screen and (min-width:0em) {
.c6 {
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
}
@media only screen and (min-width:0em) {
.c16 {
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
}
}
@media only screen and (min-width:0em) {
.c2 {
-webkit-flex-basis: 100%;
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
max-width: 100%;
display: block;
}
}
@media only screen and (min-width:48em) {
.c2 {
-webkit-flex-basis: 100%;
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
max-width: 100%;
display: block;
}
}
@media only screen and (min-width:64em) {
.c2 {
-webkit-flex-basis: 75%;
-ms-flex-preferred-size: 75%;
flex-basis: 75%;
max-width: 75%;
display: block;
}
}
@media only screen and (min-width:0em) {
.c7 {
-webkit-flex-basis: 100%;
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
max-width: 100%;
display: block;
}
}
@media only screen and (min-width:0em) {
.c17 {
-webkit-flex-basis: 75%;
-ms-flex-preferred-size: 75%;
flex-basis: 75%;
max-width: 75%;
display: block;
}
}
@media only screen and (min-width:0em) {
.c24 {
-webkit-flex-basis: 25%;
-ms-flex-preferred-size: 25%;
flex-basis: 25%;
max-width: 25%;
display: block;
}
}
@media only screen and (min-width:0em) {
.c29 {
-webkit-flex-basis: 100%;
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
max-width: 100%;
display: block;
}
}
@media only screen and (min-width:64em) {
.c29 {
-webkit-flex-basis: 58.333333333333336%;
-ms-flex-preferred-size: 58.333333333333336%;
flex-basis: 58.333333333333336%;
max-width: 58.333333333333336%;
display: block;
}
}
@media only screen and (min-width:48em) {
.c0 {
width: 46rem;
}
}
@media only screen and (min-width:64em) {
.c0 {
width: 61rem;
}
}
@media only screen and (min-width:75em) {
.c0 {
width: 76rem;
}
}
@media only screen and (max-width:47.9375rem) {
.c0 {
padding-left: 0.375rem;
padding-right: 0.375rem;
}
}
@media (max-width:47.9375rem) {
.c10 {
display: block;
}
}
@media (max-width:47.9375rem) {
.c12 {
display: none;
}
}
<div
className="c0"
>
<div
className="c1"
>
<div
className="c2"
>
<div
className="c3"
disabled={false}
name="card"
>
<div
className="c4"
name="card-outlet"
>
<div
className="c5"
>
<div
className="c6"
>
<div
className="c7"
>
<h2
className="c8"
>
g4-highcpu-128M
</h2>
</div>
</div>
<div
className="c9"
>
<div
className="c10"
>
<label
className="c11"
>
Alpine 3
</label>
<div
className="c12"
/>
<label
className="c11"
>
Hardware Virtual Machine
</label>
<div
className="c12"
/>
<div
className="c10"
>
<span
className="c13"
color="green"
height="0.6875rem"
width="0.6875rem"
/>
Running
</div>
</div>
<div
className="c14"
>
<div
className="c10"
>
<div
className="c10"
>
<label
className="c15 c11"
>
Created:
</label>
<label
className="c11"
>
almost NaN years
ago
</label>
</div>
<div
className="c12"
/>
<div
className="c10"
>
<label
className="c15 c11"
>
Updated:
</label>
<label
className="c11"
>
almost NaN years
ago
</label>
</div>
</div>
</div>
</div>
<div
className="c16"
>
<div
className="c17"
>
<span
name="react-responsive-mock"
query="only screen and (max-width: 47.9375rem)"
>
<button
className="c18 c19 c20"
disabled={true}
href=""
icon={true}
onClick={[Function]}
type="button"
>
<svg
className=""
height="15"
style={
Object {
"transform": "rotate(0deg)",
}
}
version="1.1"
width="15"
xmlnsXlink="http://www.w3.org/1999/xlink"
>
<g
transform="translate(18292 -19563)"
>
<mask
id="L"
>
<rect
fill="#fff"
height={15}
transform="matrix(6.12323e-17 1 -1 6.12323e-17 -18278 19564)"
width={15}
x={-1}
y={-1}
/>
<use
fill="#000"
transform="matrix(6.12323e-17 1 -1 6.12323e-17 -18278 19564)"
xlinkHref="#M"
/>
</mask>
<g
mask="url(#L"
>
<use
fill="rgb(216, 216, 216)"
transform="matrix(6.12323e-17 1 -1 6.12323e-17 -18278 19564)"
xlinkHref="#N"
/>
</g>
</g>
<defs>
<path
d="M5.595 1.93a1 1 0 0 1 1.81 0l4.056 8.645A1 1 0 0 1 10.556 12H2.444a1 1 0 0 1-.905-1.425L5.595 1.93z"
id="M"
/>
<path
d="M1.54 10.575l-1.812-.85 1.811.85zM7.404 1.93l-1.81.85 1.81-.85zm-1.81.85l4.055 8.645 3.621-1.7-4.055-8.644-3.621 1.698zm4.96 7.22h-8.11v4h8.11v-4zM3.35 11.425l4.055-8.646-3.621-1.698-4.056 8.645 3.622 1.699zM2.444 10a1 1 0 0 1 .906 1.425l-3.622-1.7C-1.205 11.716.247 14 2.444 14v-4zm7.206 1.425A1 1 0 0 1 10.555 10v4c2.198 0 3.65-2.285 2.716-4.274l-3.62 1.699zM9.216 1.08c-1.08-2.302-4.353-2.302-5.432 0l3.621 1.698a1 1 0 0 1-1.81 0l3.621-1.698z"
id="N"
/>
</defs>
</svg>
</button>
</span>
<span
name="react-responsive-mock"
query="only screen and (min-width: 48rem)"
>
<button
className="c21 c19 c20"
disabled={true}
href=""
icon={true}
onClick={[Function]}
type="button"
>
<svg
className=""
height="15"
style={
Object {
"transform": "rotate(0deg)",
}
}
version="1.1"
width="15"
xmlnsXlink="http://www.w3.org/1999/xlink"
>
<g
transform="translate(18292 -19563)"
>
<mask
id="L"
>
<rect
fill="#fff"
height={15}
transform="matrix(6.12323e-17 1 -1 6.12323e-17 -18278 19564)"
width={15}
x={-1}
y={-1}
/>
<use
fill="#000"
transform="matrix(6.12323e-17 1 -1 6.12323e-17 -18278 19564)"
xlinkHref="#M"
/>
</mask>
<g
mask="url(#L"
>
<use
fill="rgb(216, 216, 216)"
transform="matrix(6.12323e-17 1 -1 6.12323e-17 -18278 19564)"
xlinkHref="#N"
/>
</g>
</g>
<defs>
<path
d="M5.595 1.93a1 1 0 0 1 1.81 0l4.056 8.645A1 1 0 0 1 10.556 12H2.444a1 1 0 0 1-.905-1.425L5.595 1.93z"
id="M"
/>
<path
d="M1.54 10.575l-1.812-.85 1.811.85zM7.404 1.93l-1.81.85 1.81-.85zm-1.81.85l4.055 8.645 3.621-1.7-4.055-8.644-3.621 1.698zm4.96 7.22h-8.11v4h8.11v-4zM3.35 11.425l4.055-8.646-3.621-1.698-4.056 8.645 3.622 1.699zM2.444 10a1 1 0 0 1 .906 1.425l-3.622-1.7C-1.205 11.716.247 14 2.444 14v-4zm7.206 1.425A1 1 0 0 1 10.555 10v4c2.198 0 3.65-2.285 2.716-4.274l-3.62 1.699zM9.216 1.08c-1.08-2.302-4.353-2.302-5.432 0l3.621 1.698a1 1 0 0 1-1.81 0l3.621-1.698z"
id="N"
/>
</defs>
</svg>
<span>
Start
</span>
</button>
</span>
<span
name="react-responsive-mock"
query="only screen and (max-width: 47.9375rem)"
>
<button
className="c22 c19 c20"
disabled={false}
href=""
icon={true}
onClick={[Function]}
type="button"
>
<svg
className=""
height="14"
style={
Object {
"transform": "rotate(0deg)",
}
}
version="1.1"
viewBox="0 0 14 14"
width="14"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
>
<g
transform="translate(18113 -18582)"
>
<g>
<mask
id="O"
>
<use
fill="white"
transform="translate(-18113 18582)"
xlinkHref="#P"
/>
</mask>
<g
mask="url(#O)"
>
<use
fill="rgba(73, 73, 73, 1)"
transform="translate(-18113 18582)"
xlinkHref="#Q"
/>
</g>
</g>
</g>
<defs>
<path
d="M 0 2C 0 0.895431 0.895431 0 2 0L 12 0C 13.1046 0 14 0.895431 14 2L 14 12C 14 13.1046 13.1046 14 12 14L 2 14C 0.895431 14 0 13.1046 0 12L 0 2Z"
id="P"
/>
<path
d="M 2 2L 12 2L 12 -2L 2 -2L 2 2ZM 12 2L 12 12L 16 12L 16 2L 12 2ZM 12 12L 2 12L 2 16L 12 16L 12 12ZM 2 12L 2 2L -2 2L -2 12L 2 12ZM 2 12L 2 12L -2 12C -2 14.2091 -0.209139 16 2 16L 2 12ZM 12 12L 12 12L 12 16C 14.2091 16 16 14.2091 16 12L 12 12ZM 12 2L 12 2L 16 2C 16 -0.209139 14.2091 -2 12 -2L 12 2ZM 2 -2C -0.209139 -2 -2 -0.209139 -2 2L 2 2L 2 2L 2 -2Z"
id="Q"
/>
</defs>
</svg>
</button>
</span>
<span
name="react-responsive-mock"
query="only screen and (min-width: 48rem)"
>
<button
className="c23 c19 c20"
disabled={false}
href=""
icon={true}
onClick={[Function]}
type="button"
>
<svg
className=""
height="14"
style={
Object {
"transform": "rotate(0deg)",
}
}
version="1.1"
viewBox="0 0 14 14"
width="14"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
>
<g
transform="translate(18113 -18582)"
>
<g>
<mask
id="O"
>
<use
fill="white"
transform="translate(-18113 18582)"
xlinkHref="#P"
/>
</mask>
<g
mask="url(#O)"
>
<use
fill="rgba(73, 73, 73, 1)"
transform="translate(-18113 18582)"
xlinkHref="#Q"
/>
</g>
</g>
</g>
<defs>
<path
d="M 0 2C 0 0.895431 0.895431 0 2 0L 12 0C 13.1046 0 14 0.895431 14 2L 14 12C 14 13.1046 13.1046 14 12 14L 2 14C 0.895431 14 0 13.1046 0 12L 0 2Z"
id="P"
/>
<path
d="M 2 2L 12 2L 12 -2L 2 -2L 2 2ZM 12 2L 12 12L 16 12L 16 2L 12 2ZM 12 12L 2 12L 2 16L 12 16L 12 12ZM 2 12L 2 2L -2 2L -2 12L 2 12ZM 2 12L 2 12L -2 12C -2 14.2091 -0.209139 16 2 16L 2 12ZM 12 12L 12 12L 12 16C 14.2091 16 16 14.2091 16 12L 12 12ZM 12 2L 12 2L 16 2C 16 -0.209139 14.2091 -2 12 -2L 12 2ZM 2 -2C -0.209139 -2 -2 -0.209139 -2 2L 2 2L 2 2L 2 -2Z"
id="Q"
/>
</defs>
</svg>
<span>
Stop
</span>
</button>
</span>
<span
name="react-responsive-mock"
query="only screen and (max-width: 47.9375rem)"
>
<button
className="c22 c19 c20"
disabled={false}
href=""
icon={true}
onClick={[Function]}
type="button"
>
<svg
className=""
height="21"
style={
Object {
"transform": "rotate(0deg)",
}
}
version="1.1"
viewBox="0 0 20 21"
width="20"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
>
<g
transform="translate(17997 -18577)"
>
<g>
<use
fill="rgba(73, 73, 73, 1)"
transform="matrix(0.866025 0.5 -0.5 0.866025 -17988.7 18577.9)"
xlinkHref="#K"
/>
</g>
</g>
<defs>
<path
d="M 5.39661 3.57718L 5.3977 5.34469L 10.0255 2.67281L 5.39715 0L 5.39832 2.00201C 2.33086 2.5484 0.00065755 5.23112 0 8.45654C 0.000380483 12.0783 2.93556 15.0137 6.55562 15.0143C 10.1774 15.014 13.1128 12.0788 13.1124 8.45702L 11.5697 8.45687C 11.5697 11.2264 9.32527 13.4717 6.55578 13.4716C 3.78629 13.4716 1.54268 11.2262 1.5427 8.45669C 1.54135 6.08718 3.18616 4.10012 5.39661 3.57718Z"
fillRule="evenodd"
id="K"
/>
</defs>
</svg>
</button>
</span>
<span
name="react-responsive-mock"
query="only screen and (min-width: 48rem)"
>
<button
className="c23 c19 c20"
disabled={false}
href=""
icon={true}
onClick={[Function]}
type="button"
>
<svg
className=""
height="21"
style={
Object {
"transform": "rotate(0deg)",
}
}
version="1.1"
viewBox="0 0 20 21"
width="20"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
>
<g
transform="translate(17997 -18577)"
>
<g>
<use
fill="rgba(73, 73, 73, 1)"
transform="matrix(0.866025 0.5 -0.5 0.866025 -17988.7 18577.9)"
xlinkHref="#K"
/>
</g>
</g>
<defs>
<path
d="M 5.39661 3.57718L 5.3977 5.34469L 10.0255 2.67281L 5.39715 0L 5.39832 2.00201C 2.33086 2.5484 0.00065755 5.23112 0 8.45654C 0.000380483 12.0783 2.93556 15.0137 6.55562 15.0143C 10.1774 15.014 13.1128 12.0788 13.1124 8.45702L 11.5697 8.45687C 11.5697 11.2264 9.32527 13.4717 6.55578 13.4716C 3.78629 13.4716 1.54268 11.2262 1.5427 8.45669C 1.54135 6.08718 3.18616 4.10012 5.39661 3.57718Z"
fillRule="evenodd"
id="K"
/>
</defs>
</svg>
<span>
Reboot
</span>
</button>
</span>
</div>
<div
className="c24"
>
<span
name="react-responsive-mock"
query="only screen and (max-width: 47.9375rem)"
>
<button
className="c25 c19 c20"
disabled={false}
href=""
icon={true}
onClick={[Function]}
type="button"
>
<svg
className=""
height="12"
style={
Object {
"transform": "rotate(0deg)",
}
}
version="1.1"
viewBox="0 0 9 12"
width="9"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
>
<g
transform="translate(17403 -18583)"
>
<g>
<use
fill="rgb(210, 67, 58)"
transform="translate(-17403 18583)"
xlinkHref="#j"
/>
</g>
</g>
<defs>
<path
d="M 2 0L 2 1L 0 1L 0 2L 9 2L 9 1L 7 1L 7 0L 2 0ZM 0 3L 1 12L 8 12L 9 3L 0 3ZM 6 4L 7.882 4L 7.104 11L 6 11L 6 4ZM 4 11L 5.001 11L 5.001 4L 4 4L 4 11ZM 1.11719 4L 3.00019 4L 3.00019 11L 1.89619 11L 1.11719 4Z"
fillRule="evenodd"
id="j"
/>
</defs>
</svg>
</button>
</span>
<span
name="react-responsive-mock"
query="only screen and (min-width: 48rem)"
>
<button
className="c26 c19 c20"
disabled={false}
href=""
icon={true}
onClick={[Function]}
type="button"
>
<svg
className=""
height="12"
style={
Object {
"transform": "rotate(0deg)",
}
}
version="1.1"
viewBox="0 0 9 12"
width="9"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
>
<g
transform="translate(17403 -18583)"
>
<g>
<use
fill="rgb(210, 67, 58)"
transform="translate(-17403 18583)"
xlinkHref="#j"
/>
</g>
</g>
<defs>
<path
d="M 2 0L 2 1L 0 1L 0 2L 9 2L 9 1L 7 1L 7 0L 2 0ZM 0 3L 1 12L 8 12L 9 3L 0 3ZM 6 4L 7.882 4L 7.104 11L 6 11L 6 4ZM 4 11L 5.001 11L 5.001 4L 4 4L 4 11ZM 1.11719 4L 3.00019 4L 3.00019 11L 1.89619 11L 1.11719 4Z"
fillRule="evenodd"
id="j"
/>
</defs>
</svg>
<span>
Remove
</span>
</button>
</span>
</div>
</div>
<div
className="c27"
>
<div
className="c28 c1"
height="0.0625rem"
/>
</div>
<div
className="c1"
>
<div
className="c29"
>
<label
className="c30"
htmlFor=""
>
Short ID
</label>
<div
className="c31"
>
<input
className="c32"
disabled={false}
id=""
value="2252839a"
/>
<div
onClick={undefined}
onMouseEnter={[Function]}
onMouseLeave={[Function]}
tag={false}
>
<svg
className="c33 "
height="16"
onClick={[Function]}
style={
Object {
"transform": "rotate(0deg)",
}
}
version="1.1"
width="13"
xmlnsXlink="http://www.w3.org/1999/xlink"
>
<g
transform="translate(-2367 443)"
>
<use
fill="rgba(73, 73, 73, 1)"
transform="translate(2370 -437)"
xlinkHref="#e"
/>
<use
fill="rgba(73, 73, 73, 1)"
transform="translate(2367 -443)"
xlinkHref="#f"
/>
</g>
<defs>
<path
d="M6 3L4 5V0H3v5L1 3 0 4l3.5 3L7 4 6 3z"
id="e"
/>
<path
d="M12 1h-2V0H3v1H1c-.6 0-1 .4-1 1v13c0 .6.4 1 1 1h11c.6 0 1-.4 1-1V2c0-.6-.4-1-1-1zM4 1h5v2H4V1zm8 14H1V2h2v2h7V2h2v13z"
id="f"
/>
</defs>
</svg>
</div>
</div>
</div>
</div>
<div
className="c1"
>
<div
className="c29"
>
<label
className="c30"
htmlFor=""
>
ID
</label>
<div
className="c31"
>
<input
className="c32"
disabled={false}
id=""
value="2252839a-e698-ceec-afac-9549ad0c6624"
/>
<div
onClick={undefined}
onMouseEnter={[Function]}
onMouseLeave={[Function]}
tag={false}
>
<svg
className="c33 "
height="16"
onClick={[Function]}
style={
Object {
"transform": "rotate(0deg)",
}
}
version="1.1"
width="13"
xmlnsXlink="http://www.w3.org/1999/xlink"
>
<g
transform="translate(-2367 443)"
>
<use
fill="rgba(73, 73, 73, 1)"
transform="translate(2370 -437)"
xlinkHref="#e"
/>
<use
fill="rgba(73, 73, 73, 1)"
transform="translate(2367 -443)"
xlinkHref="#f"
/>
</g>
<defs>
<path
d="M6 3L4 5V0H3v5L1 3 0 4l3.5 3L7 4 6 3z"
id="e"
/>
<path
d="M12 1h-2V0H3v1H1c-.6 0-1 .4-1 1v13c0 .6.4 1 1 1h11c.6 0 1-.4 1-1V2c0-.6-.4-1-1-1zM4 1h5v2H4V1zm8 14H1V2h2v2h7V2h2v13z"
id="f"
/>
</defs>
</svg>
</div>
</div>
</div>
</div>
<div
className="c1"
>
<div
className="c29"
>
<label
className="c30"
htmlFor=""
>
CN UUID
</label>
<div
className="c31"
>
<input
className="c32"
disabled={false}
id=""
value="70bb1cee-dba3-11e3-a799-002590e4f2b0"
/>
<div
onClick={undefined}
onMouseEnter={[Function]}
onMouseLeave={[Function]}
tag={false}
>
<svg
className="c33 "
height="16"
onClick={[Function]}
style={
Object {
"transform": "rotate(0deg)",
}
}
version="1.1"
width="13"
xmlnsXlink="http://www.w3.org/1999/xlink"
>
<g
transform="translate(-2367 443)"
>
<use
fill="rgba(73, 73, 73, 1)"
transform="translate(2370 -437)"
xlinkHref="#e"
/>
<use
fill="rgba(73, 73, 73, 1)"
transform="translate(2367 -443)"
xlinkHref="#f"
/>
</g>
<defs>
<path
d="M6 3L4 5V0H3v5L1 3 0 4l3.5 3L7 4 6 3z"
id="e"
/>
<path
d="M12 1h-2V0H3v1H1c-.6 0-1 .4-1 1v13c0 .6.4 1 1 1h11c.6 0 1-.4 1-1V2c0-.6-.4-1-1-1zM4 1h5v2H4V1zm8 14H1V2h2v2h7V2h2v13z"
id="f"
/>
</defs>
</svg>
</div>
</div>
</div>
</div>
<div
className="c1"
>
<div
className="c29"
>
<label
className="c30"
htmlFor=""
>
Image UUID
</label>
<div
className="c31"
>
<input
className="c32"
disabled={false}
id=""
value="19aa3328-0025-11e7-a19a-c39077bfd4cf"
/>
<div
onClick={undefined}
onMouseEnter={[Function]}
onMouseLeave={[Function]}
tag={false}
>
<svg
className="c33 "
height="16"
onClick={[Function]}
style={
Object {
"transform": "rotate(0deg)",
}
}
version="1.1"
width="13"
xmlnsXlink="http://www.w3.org/1999/xlink"
>
<g
transform="translate(-2367 443)"
>
<use
fill="rgba(73, 73, 73, 1)"
transform="translate(2370 -437)"
xlinkHref="#e"
/>
<use
fill="rgba(73, 73, 73, 1)"
transform="translate(2367 -443)"
xlinkHref="#f"
/>
</g>
<defs>
<path
d="M6 3L4 5V0H3v5L1 3 0 4l3.5 3L7 4 6 3z"
id="e"
/>
<path
d="M12 1h-2V0H3v1H1c-.6 0-1 .4-1 1v13c0 .6.4 1 1 1h11c.6 0 1-.4 1-1V2c0-.6-.4-1-1-1zM4 1h5v2H4V1zm8 14H1V2h2v2h7V2h2v13z"
id="f"
/>
</defs>
</svg>
</div>
</div>
</div>
</div>
<div
className="c1"
>
<div
className="c29"
>
<label
className="c30"
htmlFor=""
>
Login
</label>
<div
className="c31"
>
<input
className="c32"
disabled={false}
id=""
value="ssh root@72.2.119.146"
/>
<div
onClick={undefined}
onMouseEnter={[Function]}
onMouseLeave={[Function]}
tag={false}
>
<svg
className="c33 "
height="16"
onClick={[Function]}
style={
Object {
"transform": "rotate(0deg)",
}
}
version="1.1"
width="13"
xmlnsXlink="http://www.w3.org/1999/xlink"
>
<g
transform="translate(-2367 443)"
>
<use
fill="rgba(73, 73, 73, 1)"
transform="translate(2370 -437)"
xlinkHref="#e"
/>
<use
fill="rgba(73, 73, 73, 1)"
transform="translate(2367 -443)"
xlinkHref="#f"
/>
</g>
<defs>
<path
d="M6 3L4 5V0H3v5L1 3 0 4l3.5 3L7 4 6 3z"
id="e"
/>
<path
d="M12 1h-2V0H3v1H1c-.6 0-1 .4-1 1v13c0 .6.4 1 1 1h11c.6 0 1-.4 1-1V2c0-.6-.4-1-1-1zM4 1h5v2H4V1zm8 14H1V2h2v2h7V2h2v13z"
id="f"
/>
</defs>
</svg>
</div>
</div>
</div>
</div>
<div
className="c1"
>
<div
className="c29"
>
<label
className="c30"
htmlFor=""
>
IP address 1
</label>
<div
className="c31"
>
<input
className="c32"
disabled={false}
id=""
value="72.2.119.146"
/>
<div
onClick={undefined}
onMouseEnter={[Function]}
onMouseLeave={[Function]}
tag={false}
>
<svg
className="c33 "
height="16"
onClick={[Function]}
style={
Object {
"transform": "rotate(0deg)",
}
}
version="1.1"
width="13"
xmlnsXlink="http://www.w3.org/1999/xlink"
>
<g
transform="translate(-2367 443)"
>
<use
fill="rgba(73, 73, 73, 1)"
transform="translate(2370 -437)"
xlinkHref="#e"
/>
<use
fill="rgba(73, 73, 73, 1)"
transform="translate(2367 -443)"
xlinkHref="#f"
/>
</g>
<defs>
<path
d="M6 3L4 5V0H3v5L1 3 0 4l3.5 3L7 4 6 3z"
id="e"
/>
<path
d="M12 1h-2V0H3v1H1c-.6 0-1 .4-1 1v13c0 .6.4 1 1 1h11c.6 0 1-.4 1-1V2c0-.6-.4-1-1-1zM4 1h5v2H4V1zm8 14H1V2h2v2h7V2h2v13z"
id="f"
/>
</defs>
</svg>
</div>
</div>
</div>
</div>
<div
className="c1"
>
<div
className="c29"
>
<label
className="c30"
htmlFor=""
>
IP address 2
</label>
<div
className="c34"
>
<input
className="c32"
disabled={false}
id=""
value="10.112.5.63"
/>
<div
onClick={undefined}
onMouseEnter={[Function]}
onMouseLeave={[Function]}
tag={false}
>
<svg
className="c33 "
height="16"
onClick={[Function]}
style={
Object {
"transform": "rotate(0deg)",
}
}
version="1.1"
width="13"
xmlnsXlink="http://www.w3.org/1999/xlink"
>
<g
transform="translate(-2367 443)"
>
<use
fill="rgba(73, 73, 73, 1)"
transform="translate(2370 -437)"
xlinkHref="#e"
/>
<use
fill="rgba(73, 73, 73, 1)"
transform="translate(2367 -443)"
xlinkHref="#f"
/>
</g>
<defs>
<path
d="M6 3L4 5V0H3v5L1 3 0 4l3.5 3L7 4 6 3z"
id="e"
/>
<path
d="M12 1h-2V0H3v1H1c-.6 0-1 .4-1 1v13c0 .6.4 1 1 1h11c.6 0 1-.4 1-1V2c0-.6-.4-1-1-1zM4 1h5v2H4V1zm8 14H1V2h2v2h7V2h2v13z"
id="f"
/>
</defs>
</svg>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
`;
exports[`renders <Summary starting stopping rebooting removing /> without throwing 3`] = `
.c20 {
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;
min-width: 7.5rem;
}
.c20::-moz-focus-inner,
.c20[type='button']::-moz-focus-inner,
.c20[type='reset']::-moz-focus-inner,
.c20[type='submit']::-moz-focus-inner {
border-style: none;
padding: 0;
}
.c20:-moz-focusring,
.c20[type='button']:-moz-focusring,
.c20[type='reset']:-moz-focusring,
.c20[type='submit']:-moz-focusring {
outline: 0.0625rem dotted ButtonText;
}
.c20 + button {
margin-left: 0.375rem;
}
.c19 {
display: inline-block;
}
.c18 {
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;
margin-bottom: 0.5rem;
margin-top: 0.5rem;
padding: 0.9375rem 1.125rem;
position: relative;
font-size: 0.9375rem;
text-align: center;
font-style: normal;
font-stretch: normal;
line-height: normal;
-webkit-letter-spacing: normal;
-moz-letter-spacing: normal;
-ms-letter-spacing: normal;
letter-spacing: normal;
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);
color: rgb(70,70,70);
-webkit-text-fill-color: currentcolor;
background-color: rgb(255,255,255);
border-color: rgb(216,216,216);
cursor: not-allowed;
pointer-events: none;
color: rgb(216,216,216);
background-color: rgb(250,250,250);
border-color: rgb(216,216,216);
padding: 0.5625rem 1.125rem;
font-size: 0.8125rem;
min-width: 0rem;
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.c18:focus {
outline: 0;
text-decoration: none;
background-color: rgb(59,70,204);
border-color: rgb(45,56,132);
}
.c18:hover {
background-color: rgb(72,83,217);
border: solid 0.0625rem rgb(45,56,132);
}
.c18:active,
.c18:active:hover,
.c18:active:focus {
background-image: none;
outline: 0;
background-color: rgb(45,56,132);
border-color: rgb(45,56,132);
}
.c18[disabled] {
cursor: not-allowed;
pointer-events: none;
}
.c18:focus {
background-color: rgb(255,255,255);
border-color: rgb(216,216,216);
}
.c18:hover {
background-color: rgb(247,247,247);
border-color: rgb(216,216,216);
}
.c18:active,
.c18:active:hover,
.c18:active:focus {
background-color: rgb(230,230,230);
border-color: rgb(216,216,216);
}
.c18:focus {
background-color: rgb(250,250,250);
border-color: rgb(216,216,216);
}
.c18:hover {
background-color: rgb(250,250,250);
border-color: rgb(250,250,250);
}
.c18:active,
.c18:active:hover,
.c18:active:focus {
background-color: rgb(250,250,250);
border-color: rgb(250,250,250);
}
.c18 svg + span {
margin-left: 0.75rem;
}
.c18 svg {
max-height: 1.125rem;
}
.c21 {
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;
margin-bottom: 0.5rem;
margin-top: 0.5rem;
padding: 0.9375rem 1.125rem;
position: relative;
font-size: 0.9375rem;
text-align: center;
font-style: normal;
font-stretch: normal;
line-height: normal;
-webkit-letter-spacing: normal;
-moz-letter-spacing: normal;
-ms-letter-spacing: normal;
letter-spacing: normal;
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);
color: rgb(70,70,70);
-webkit-text-fill-color: currentcolor;
background-color: rgb(255,255,255);
border-color: rgb(216,216,216);
cursor: not-allowed;
pointer-events: none;
color: rgb(216,216,216);
background-color: rgb(250,250,250);
border-color: rgb(216,216,216);
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
font-weight: 500;
}
.c21:focus {
outline: 0;
text-decoration: none;
background-color: rgb(59,70,204);
border-color: rgb(45,56,132);
}
.c21:hover {
background-color: rgb(72,83,217);
border: solid 0.0625rem rgb(45,56,132);
}
.c21:active,
.c21:active:hover,
.c21:active:focus {
background-image: none;
outline: 0;
background-color: rgb(45,56,132);
border-color: rgb(45,56,132);
}
.c21[disabled] {
cursor: not-allowed;
pointer-events: none;
}
.c21:focus {
background-color: rgb(255,255,255);
border-color: rgb(216,216,216);
}
.c21:hover {
background-color: rgb(247,247,247);
border-color: rgb(216,216,216);
}
.c21:active,
.c21:active:hover,
.c21:active:focus {
background-color: rgb(230,230,230);
border-color: rgb(216,216,216);
}
.c21:focus {
background-color: rgb(250,250,250);
border-color: rgb(216,216,216);
}
.c21:hover {
background-color: rgb(250,250,250);
border-color: rgb(250,250,250);
}
.c21:active,
.c21:active:hover,
.c21:active:focus {
background-color: rgb(250,250,250);
border-color: rgb(250,250,250);
}
.c21 svg + span {
margin-left: 0.75rem;
}
.c21 svg {
max-height: 1.125rem;
}
.c22 {
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;
margin-bottom: 0.5rem;
margin-top: 0.5rem;
padding: 0.9375rem 1.125rem;
position: relative;
font-size: 0.9375rem;
text-align: center;
font-style: normal;
font-stretch: normal;
line-height: normal;
-webkit-letter-spacing: normal;
-moz-letter-spacing: normal;
-ms-letter-spacing: normal;
letter-spacing: normal;
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);
color: rgb(70,70,70);
-webkit-text-fill-color: currentcolor;
background-color: rgb(255,255,255);
border-color: rgb(216,216,216);
padding: 0.5625rem 1.125rem;
font-size: 0.8125rem;
min-width: 0rem;
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.c22:focus {
outline: 0;
text-decoration: none;
background-color: rgb(59,70,204);
border-color: rgb(45,56,132);
}
.c22:hover {
background-color: rgb(72,83,217);
border: solid 0.0625rem rgb(45,56,132);
}
.c22:active,
.c22:active:hover,
.c22:active:focus {
background-image: none;
outline: 0;
background-color: rgb(45,56,132);
border-color: rgb(45,56,132);
}
.c22[disabled] {
cursor: not-allowed;
pointer-events: none;
}
.c22:focus {
background-color: rgb(255,255,255);
border-color: rgb(216,216,216);
}
.c22:hover {
background-color: rgb(247,247,247);
border-color: rgb(216,216,216);
}
.c22:active,
.c22:active:hover,
.c22:active:focus {
background-color: rgb(230,230,230);
border-color: rgb(216,216,216);
}
.c22 svg + span {
margin-left: 0.75rem;
}
.c22 svg {
max-height: 1.125rem;
}
.c23 {
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;
margin-bottom: 0.5rem;
margin-top: 0.5rem;
padding: 0.9375rem 1.125rem;
position: relative;
font-size: 0.9375rem;
text-align: center;
font-style: normal;
font-stretch: normal;
line-height: normal;
-webkit-letter-spacing: normal;
-moz-letter-spacing: normal;
-ms-letter-spacing: normal;
letter-spacing: normal;
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);
color: rgb(70,70,70);
-webkit-text-fill-color: currentcolor;
background-color: rgb(255,255,255);
border-color: rgb(216,216,216);
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
font-weight: 500;
}
.c23:focus {
outline: 0;
text-decoration: none;
background-color: rgb(59,70,204);
border-color: rgb(45,56,132);
}
.c23:hover {
background-color: rgb(72,83,217);
border: solid 0.0625rem rgb(45,56,132);
}
.c23:active,
.c23:active:hover,
.c23:active:focus {
background-image: none;
outline: 0;
background-color: rgb(45,56,132);
border-color: rgb(45,56,132);
}
.c23[disabled] {
cursor: not-allowed;
pointer-events: none;
}
.c23:focus {
background-color: rgb(255,255,255);
border-color: rgb(216,216,216);
}
.c23:hover {
background-color: rgb(247,247,247);
border-color: rgb(216,216,216);
}
.c23:active,
.c23:active:hover,
.c23:active:focus {
background-color: rgb(230,230,230);
border-color: rgb(216,216,216);
}
.c23 svg + span {
margin-left: 0.75rem;
}
.c23 svg {
max-height: 1.125rem;
}
.c25 {
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;
margin-bottom: 0.5rem;
margin-top: 0.5rem;
padding: 0.9375rem 1.125rem;
position: relative;
font-size: 0.9375rem;
text-align: center;
font-style: normal;
font-stretch: normal;
line-height: normal;
-webkit-letter-spacing: normal;
-moz-letter-spacing: normal;
-ms-letter-spacing: normal;
letter-spacing: normal;
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);
color: rgb(70,70,70);
-webkit-text-fill-color: currentcolor;
background-color: rgb(255,255,255);
border-color: rgb(216,216,216);
color: rgb(210,67,58);
-webkit-text-fill-color: currentcolor;
background-color: rgb(255,255,255);
border-color: rgb(210,67,58);
padding: 0.5625rem 1.125rem;
font-size: 0.8125rem;
min-width: 0rem;
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
float: right;
}
.c25:focus {
outline: 0;
text-decoration: none;
background-color: rgb(59,70,204);
border-color: rgb(45,56,132);
}
.c25:hover {
background-color: rgb(72,83,217);
border: solid 0.0625rem rgb(45,56,132);
}
.c25:active,
.c25:active:hover,
.c25:active:focus {
background-image: none;
outline: 0;
background-color: rgb(45,56,132);
border-color: rgb(45,56,132);
}
.c25[disabled] {
cursor: not-allowed;
pointer-events: none;
}
.c25:focus {
background-color: rgb(255,255,255);
border-color: rgb(216,216,216);
}
.c25:hover {
background-color: rgb(247,247,247);
border-color: rgb(216,216,216);
}
.c25:active,
.c25:active:hover,
.c25:active:focus {
background-color: rgb(230,230,230);
border-color: rgb(216,216,216);
}
.c25:focus {
background-color: rgb(255,255,255);
border-color: rgb(210,67,58);
}
.c25:hover {
background-color: rgb(247,247,247);
border-color: rgb(210,67,58);
}
.c25:active,
.c25:active:hover,
.c25:active:focus {
background-color: rgb(230,230,230);
border-color: rgb(210,67,58);
}
.c25 svg + span {
margin-left: 0.75rem;
}
.c25 svg {
max-height: 1.125rem;
}
.c26 {
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;
margin-bottom: 0.5rem;
margin-top: 0.5rem;
padding: 0.9375rem 1.125rem;
position: relative;
font-size: 0.9375rem;
text-align: center;
font-style: normal;
font-stretch: normal;
line-height: normal;
-webkit-letter-spacing: normal;
-moz-letter-spacing: normal;
-ms-letter-spacing: normal;
letter-spacing: normal;
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);
color: rgb(70,70,70);
-webkit-text-fill-color: currentcolor;
background-color: rgb(255,255,255);
border-color: rgb(216,216,216);
color: rgb(210,67,58);
-webkit-text-fill-color: currentcolor;
background-color: rgb(255,255,255);
border-color: rgb(210,67,58);
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
font-weight: 500;
float: right;
}
.c26:focus {
outline: 0;
text-decoration: none;
background-color: rgb(59,70,204);
border-color: rgb(45,56,132);
}
.c26:hover {
background-color: rgb(72,83,217);
border: solid 0.0625rem rgb(45,56,132);
}
.c26:active,
.c26:active:hover,
.c26:active:focus {
background-image: none;
outline: 0;
background-color: rgb(45,56,132);
border-color: rgb(45,56,132);
}
.c26[disabled] {
cursor: not-allowed;
pointer-events: none;
}
.c26:focus {
background-color: rgb(255,255,255);
border-color: rgb(216,216,216);
}
.c26:hover {
background-color: rgb(247,247,247);
border-color: rgb(216,216,216);
}
.c26:active,
.c26:active:hover,
.c26:active:focus {
background-color: rgb(230,230,230);
border-color: rgb(216,216,216);
}
.c26:focus {
background-color: rgb(255,255,255);
border-color: rgb(210,67,58);
}
.c26:hover {
background-color: rgb(247,247,247);
border-color: rgb(210,67,58);
}
.c26:active,
.c26:active:hover,
.c26:active:focus {
background-color: rgb(230,230,230);
border-color: rgb(210,67,58);
}
.c26 svg + span {
margin-left: 0.75rem;
}
.c26 svg {
max-height: 1.125rem;
}
.c11 {
font-size: 0.9375rem;
font-style: normal;
font-stretch: normal;
display: block;
color: rgb(70,70,70);
text-align: left;
}
.c1 {
box-sizing: border-box;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex: 0 1 auto;
-ms-flex: 0 1 auto;
flex: 0 1 auto;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-right: -0.5rem;
margin-left: -0.5rem;
}
.c6 {
box-sizing: border-box;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex: 0 1 auto;
-ms-flex: 0 1 auto;
flex: 0 1 auto;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-right: -0.5rem;
margin-left: -0.5rem;
}
.c16 {
box-sizing: border-box;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex: 0 1 auto;
-ms-flex: 0 1 auto;
flex: 0 1 auto;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-right: -0.5rem;
margin-left: -0.5rem;
}
.c2 {
box-sizing: border-box;
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
padding-right: 0.5rem;
padding-left: 0.5rem;
}
.c7 {
box-sizing: border-box;
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
padding-right: 0.5rem;
padding-left: 0.5rem;
}
.c17 {
box-sizing: border-box;
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
padding-right: 0.5rem;
padding-left: 0.5rem;
}
.c24 {
box-sizing: border-box;
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
padding-right: 0.5rem;
padding-left: 0.5rem;
}
.c29 {
box-sizing: border-box;
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
padding-right: 0.5rem;
padding-left: 0.5rem;
}
.c0 {
margin-right: auto;
margin-left: auto;
box-sizing: border-box;
width: 100%;
max-width: 62.5rem;
padding-bottom: 1.125rem;
}
.c8 {
color: rgba(73,73,73,1);
font-weight: normal;
line-height: 1.875rem;
font-size: 1.5rem;
margin: 0;
}
.c8 + p,
.c8 + small,
.c8 + h1,
.c8 + h2,
.c8 + label,
.c8 + h3,
.c8 + h4,
.c8 + h5,
.c8 + div,
.c8 + span {
margin-top: 1.5rem;
}
.c28 {
background-color: rgb(216,216,216);
margin: 0;
height: 0.0625rem;
}
.c13 {
width: 0.375rem;
height: 0.375rem;
border-radius: 0.1875rem;
background-color: rgb(0,152,88);
display: inline-block;
margin-top: 0.0625rem;
margin-right: 0.375rem;
height: 0.6875rem;
width: 0.6875rem;
border-radius: 50%;
}
.c3 {
box-sizing: content-box;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex: 1 0 auto;
-ms-flex: 1 0 auto;
flex: 1 0 auto;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
position: relative;
border-width: 0.0625rem;
border-style: solid;
-webkit-transition: all 300ms ease;
transition: all 300ms ease;
color: rgba(73,73,73,1);
background-color: rgb(255,255,255);
border-color: rgb(216,216,216);
}
.c4 {
box-sizing: content-box;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex: 1 0 auto;
-ms-flex: 1 0 auto;
flex: 1 0 auto;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
position: relative;
border-width: 0.0625rem;
border-style: solid;
-webkit-transition: all 300ms ease;
transition: all 300ms ease;
color: rgba(73,73,73,1);
background-color: rgb(255,255,255);
border-color: rgb(216,216,216);
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;
margin-bottom: 0;
background-color: transparent;
}
.c4 > [name='card']:not(:last-child) {
margin-bottom: 0.8125rem;
}
.c4 > [name='card']:last-child {
margin-bottom: 0.4375rem;
}
.c32 {
box-sizing: border-box;
width: 18.75rem;
height: 3rem;
min-height: 3rem;
margin-bottom: 0.5rem;
margin-top: 0.5rem;
padding: 0.8125rem 1.125rem;
border-radius: 0.25rem;
background-color: rgb(255,255,255);
border: 0.0625rem solid rgb(216,216,216);
color: rgba(73,73,73,1);
max-width: 100%;
font-size: 0.9375rem;
line-height: normal !important;
font-style: normal;
font-stretch: normal;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
outline: 0;
}
.c32::-webkit-input-placeholder {
color: rgba(73,73,73,0.5);
}
.c32::-moz-placeholder {
color: rgba(73,73,73,0.5);
}
.c32:-ms-input-placeholder {
color: rgba(73,73,73,0.5);
}
.c32:invalid {
box-shadow: none;
}
.c32:disabled {
background-color: rgb(250,250,250);
color: rgb(216,216,216);
}
.c32:disabled::-webkit-input-placeholder {
color: rgba(73,73,73,0.5);
}
.c32:disabled::-moz-placeholder {
color: rgba(73,73,73,0.5);
}
.c32:disabled:-ms-input-placeholder {
color: rgba(73,73,73,0.5);
}
.c32:focus {
border-color: rgb(59,70,204);
outline: 0;
}
.c30 {
font-size: 0.9375rem;
font-style: normal;
font-stretch: normal;
display: block;
color: rgb(70,70,70);
text-align: left;
margin-right: 0.75rem;
font-weight: bold;
white-space: pre;
font-size: 0.8125rem;
}
.c9 {
margin-top: 0.5rem;
margin-bottom: 1rem;
}
.c14 {
margin-top: 0.25rem;
}
.c27 {
margin-top: 2rem;
margin-bottom: 4rem;
}
.c5 {
padding: 2rem;
}
.c15 {
opacity: 0.5;
padding-right: 0.1875rem;
}
.c10 {
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
}
.c31 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
margin-bottom: 0.625rem;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.c31 input {
padding-right: 1.875rem;
}
.c31 div {
position: relative;
left: -1.625rem;
}
.c34 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
margin-bottom: 0.625rem;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin-bottom: 0rem;
}
.c34 input {
padding-right: 1.875rem;
}
.c34 div {
position: relative;
left: -1.625rem;
}
.c12 {
width: 0.0625rem;
background: rgb(216,216,216);
height: 1.5rem;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-self: flex-end;
-ms-flex-item-align: end;
align-self: flex-end;
margin: 0 1.125rem;
}
.c33 {
cursor: pointer;
}
@media only screen and (min-width:0em) {
.c6 {
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
}
@media only screen and (min-width:0em) {
.c16 {
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
}
}
@media only screen and (min-width:0em) {
.c2 {
-webkit-flex-basis: 100%;
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
max-width: 100%;
display: block;
}
}
@media only screen and (min-width:48em) {
.c2 {
-webkit-flex-basis: 100%;
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
max-width: 100%;
display: block;
}
}
@media only screen and (min-width:64em) {
.c2 {
-webkit-flex-basis: 75%;
-ms-flex-preferred-size: 75%;
flex-basis: 75%;
max-width: 75%;
display: block;
}
}
@media only screen and (min-width:0em) {
.c7 {
-webkit-flex-basis: 100%;
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
max-width: 100%;
display: block;
}
}
@media only screen and (min-width:0em) {
.c17 {
-webkit-flex-basis: 75%;
-ms-flex-preferred-size: 75%;
flex-basis: 75%;
max-width: 75%;
display: block;
}
}
@media only screen and (min-width:0em) {
.c24 {
-webkit-flex-basis: 25%;
-ms-flex-preferred-size: 25%;
flex-basis: 25%;
max-width: 25%;
display: block;
}
}
@media only screen and (min-width:0em) {
.c29 {
-webkit-flex-basis: 100%;
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
max-width: 100%;
display: block;
}
}
@media only screen and (min-width:64em) {
.c29 {
-webkit-flex-basis: 58.333333333333336%;
-ms-flex-preferred-size: 58.333333333333336%;
flex-basis: 58.333333333333336%;
max-width: 58.333333333333336%;
display: block;
}
}
@media only screen and (min-width:48em) {
.c0 {
width: 46rem;
}
}
@media only screen and (min-width:64em) {
.c0 {
width: 61rem;
}
}
@media only screen and (min-width:75em) {
.c0 {
width: 76rem;
}
}
@media only screen and (max-width:47.9375rem) {
.c0 {
padding-left: 0.375rem;
padding-right: 0.375rem;
}
}
@media (max-width:47.9375rem) {
.c10 {
display: block;
}
}
@media (max-width:47.9375rem) {
.c12 {
display: none;
}
}
<div
className="c0"
>
<div
className="c1"
>
<div
className="c2"
>
<div
className="c3"
disabled={false}
name="card"
>
<div
className="c4"
name="card-outlet"
>
<div
className="c5"
>
<div
className="c6"
>
<div
className="c7"
>
<h2
className="c8"
>
g4-highcpu-128M
</h2>
</div>
</div>
<div
className="c9"
>
<div
className="c10"
>
<label
className="c11"
>
Custom Image
</label>
<div
className="c12"
/>
<label
className="c11"
>
Infrastructure Container
</label>
<div
className="c12"
/>
<div
className="c10"
>
<span
className="c13"
color="green"
height="0.6875rem"
width="0.6875rem"
/>
Running
</div>
</div>
<div
className="c14"
>
<div
className="c10"
>
<div
className="c10"
>
<label
className="c15 c11"
>
Created:
</label>
<label
className="c11"
>
almost NaN years
ago
</label>
</div>
<div
className="c12"
/>
<div
className="c10"
>
<label
className="c15 c11"
>
Updated:
</label>
<label
className="c11"
>
almost NaN years
ago
</label>
</div>
</div>
</div>
</div>
<div
className="c16"
>
<div
className="c17"
>
<span
name="react-responsive-mock"
query="only screen and (max-width: 47.9375rem)"
>
<button
className="c18 c19 c20"
disabled={true}
href=""
icon={true}
onClick={[Function]}
type="button"
>
<svg
className=""
height="15"
style={
Object {
"transform": "rotate(0deg)",
}
}
version="1.1"
width="15"
xmlnsXlink="http://www.w3.org/1999/xlink"
>
<g
transform="translate(18292 -19563)"
>
<mask
id="L"
>
<rect
fill="#fff"
height={15}
transform="matrix(6.12323e-17 1 -1 6.12323e-17 -18278 19564)"
width={15}
x={-1}
y={-1}
/>
<use
fill="#000"
transform="matrix(6.12323e-17 1 -1 6.12323e-17 -18278 19564)"
xlinkHref="#M"
/>
</mask>
<g
mask="url(#L"
>
<use
fill="rgb(216, 216, 216)"
transform="matrix(6.12323e-17 1 -1 6.12323e-17 -18278 19564)"
xlinkHref="#N"
/>
</g>
</g>
<defs>
<path
d="M5.595 1.93a1 1 0 0 1 1.81 0l4.056 8.645A1 1 0 0 1 10.556 12H2.444a1 1 0 0 1-.905-1.425L5.595 1.93z"
id="M"
/>
<path
d="M1.54 10.575l-1.812-.85 1.811.85zM7.404 1.93l-1.81.85 1.81-.85zm-1.81.85l4.055 8.645 3.621-1.7-4.055-8.644-3.621 1.698zm4.96 7.22h-8.11v4h8.11v-4zM3.35 11.425l4.055-8.646-3.621-1.698-4.056 8.645 3.622 1.699zM2.444 10a1 1 0 0 1 .906 1.425l-3.622-1.7C-1.205 11.716.247 14 2.444 14v-4zm7.206 1.425A1 1 0 0 1 10.555 10v4c2.198 0 3.65-2.285 2.716-4.274l-3.62 1.699zM9.216 1.08c-1.08-2.302-4.353-2.302-5.432 0l3.621 1.698a1 1 0 0 1-1.81 0l3.621-1.698z"
id="N"
/>
</defs>
</svg>
</button>
</span>
<span
name="react-responsive-mock"
query="only screen and (min-width: 48rem)"
>
<button
className="c21 c19 c20"
disabled={true}
href=""
icon={true}
onClick={[Function]}
type="button"
>
<svg
className=""
height="15"
style={
Object {
"transform": "rotate(0deg)",
}
}
version="1.1"
width="15"
xmlnsXlink="http://www.w3.org/1999/xlink"
>
<g
transform="translate(18292 -19563)"
>
<mask
id="L"
>
<rect
fill="#fff"
height={15}
transform="matrix(6.12323e-17 1 -1 6.12323e-17 -18278 19564)"
width={15}
x={-1}
y={-1}
/>
<use
fill="#000"
transform="matrix(6.12323e-17 1 -1 6.12323e-17 -18278 19564)"
xlinkHref="#M"
/>
</mask>
<g
mask="url(#L"
>
<use
fill="rgb(216, 216, 216)"
transform="matrix(6.12323e-17 1 -1 6.12323e-17 -18278 19564)"
xlinkHref="#N"
/>
</g>
</g>
<defs>
<path
d="M5.595 1.93a1 1 0 0 1 1.81 0l4.056 8.645A1 1 0 0 1 10.556 12H2.444a1 1 0 0 1-.905-1.425L5.595 1.93z"
id="M"
/>
<path
d="M1.54 10.575l-1.812-.85 1.811.85zM7.404 1.93l-1.81.85 1.81-.85zm-1.81.85l4.055 8.645 3.621-1.7-4.055-8.644-3.621 1.698zm4.96 7.22h-8.11v4h8.11v-4zM3.35 11.425l4.055-8.646-3.621-1.698-4.056 8.645 3.622 1.699zM2.444 10a1 1 0 0 1 .906 1.425l-3.622-1.7C-1.205 11.716.247 14 2.444 14v-4zm7.206 1.425A1 1 0 0 1 10.555 10v4c2.198 0 3.65-2.285 2.716-4.274l-3.62 1.699zM9.216 1.08c-1.08-2.302-4.353-2.302-5.432 0l3.621 1.698a1 1 0 0 1-1.81 0l3.621-1.698z"
id="N"
/>
</defs>
</svg>
<span>
Start
</span>
</button>
</span>
<span
name="react-responsive-mock"
query="only screen and (max-width: 47.9375rem)"
>
<button
className="c22 c19 c20"
disabled={false}
href=""
icon={true}
onClick={[Function]}
type="button"
>
<svg
className=""
height="14"
style={
Object {
"transform": "rotate(0deg)",
}
}
version="1.1"
viewBox="0 0 14 14"
width="14"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
>
<g
transform="translate(18113 -18582)"
>
<g>
<mask
id="O"
>
<use
fill="white"
transform="translate(-18113 18582)"
xlinkHref="#P"
/>
</mask>
<g
mask="url(#O)"
>
<use
fill="rgba(73, 73, 73, 1)"
transform="translate(-18113 18582)"
xlinkHref="#Q"
/>
</g>
</g>
</g>
<defs>
<path
d="M 0 2C 0 0.895431 0.895431 0 2 0L 12 0C 13.1046 0 14 0.895431 14 2L 14 12C 14 13.1046 13.1046 14 12 14L 2 14C 0.895431 14 0 13.1046 0 12L 0 2Z"
id="P"
/>
<path
d="M 2 2L 12 2L 12 -2L 2 -2L 2 2ZM 12 2L 12 12L 16 12L 16 2L 12 2ZM 12 12L 2 12L 2 16L 12 16L 12 12ZM 2 12L 2 2L -2 2L -2 12L 2 12ZM 2 12L 2 12L -2 12C -2 14.2091 -0.209139 16 2 16L 2 12ZM 12 12L 12 12L 12 16C 14.2091 16 16 14.2091 16 12L 12 12ZM 12 2L 12 2L 16 2C 16 -0.209139 14.2091 -2 12 -2L 12 2ZM 2 -2C -0.209139 -2 -2 -0.209139 -2 2L 2 2L 2 2L 2 -2Z"
id="Q"
/>
</defs>
</svg>
</button>
</span>
<span
name="react-responsive-mock"
query="only screen and (min-width: 48rem)"
>
<button
className="c23 c19 c20"
disabled={false}
href=""
icon={true}
onClick={[Function]}
type="button"
>
<svg
className=""
height="14"
style={
Object {
"transform": "rotate(0deg)",
}
}
version="1.1"
viewBox="0 0 14 14"
width="14"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
>
<g
transform="translate(18113 -18582)"
>
<g>
<mask
id="O"
>
<use
fill="white"
transform="translate(-18113 18582)"
xlinkHref="#P"
/>
</mask>
<g
mask="url(#O)"
>
<use
fill="rgba(73, 73, 73, 1)"
transform="translate(-18113 18582)"
xlinkHref="#Q"
/>
</g>
</g>
</g>
<defs>
<path
d="M 0 2C 0 0.895431 0.895431 0 2 0L 12 0C 13.1046 0 14 0.895431 14 2L 14 12C 14 13.1046 13.1046 14 12 14L 2 14C 0.895431 14 0 13.1046 0 12L 0 2Z"
id="P"
/>
<path
d="M 2 2L 12 2L 12 -2L 2 -2L 2 2ZM 12 2L 12 12L 16 12L 16 2L 12 2ZM 12 12L 2 12L 2 16L 12 16L 12 12ZM 2 12L 2 2L -2 2L -2 12L 2 12ZM 2 12L 2 12L -2 12C -2 14.2091 -0.209139 16 2 16L 2 12ZM 12 12L 12 12L 12 16C 14.2091 16 16 14.2091 16 12L 12 12ZM 12 2L 12 2L 16 2C 16 -0.209139 14.2091 -2 12 -2L 12 2ZM 2 -2C -0.209139 -2 -2 -0.209139 -2 2L 2 2L 2 2L 2 -2Z"
id="Q"
/>
</defs>
</svg>
<span>
Stop
</span>
</button>
</span>
<span
name="react-responsive-mock"
query="only screen and (max-width: 47.9375rem)"
>
<button
className="c22 c19 c20"
disabled={false}
href=""
icon={true}
onClick={[Function]}
type="button"
>
<svg
className=""
height="21"
style={
Object {
"transform": "rotate(0deg)",
}
}
version="1.1"
viewBox="0 0 20 21"
width="20"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
>
<g
transform="translate(17997 -18577)"
>
<g>
<use
fill="rgba(73, 73, 73, 1)"
transform="matrix(0.866025 0.5 -0.5 0.866025 -17988.7 18577.9)"
xlinkHref="#K"
/>
</g>
</g>
<defs>
<path
d="M 5.39661 3.57718L 5.3977 5.34469L 10.0255 2.67281L 5.39715 0L 5.39832 2.00201C 2.33086 2.5484 0.00065755 5.23112 0 8.45654C 0.000380483 12.0783 2.93556 15.0137 6.55562 15.0143C 10.1774 15.014 13.1128 12.0788 13.1124 8.45702L 11.5697 8.45687C 11.5697 11.2264 9.32527 13.4717 6.55578 13.4716C 3.78629 13.4716 1.54268 11.2262 1.5427 8.45669C 1.54135 6.08718 3.18616 4.10012 5.39661 3.57718Z"
fillRule="evenodd"
id="K"
/>
</defs>
</svg>
</button>
</span>
<span
name="react-responsive-mock"
query="only screen and (min-width: 48rem)"
>
<button
className="c23 c19 c20"
disabled={false}
href=""
icon={true}
onClick={[Function]}
type="button"
>
<svg
className=""
height="21"
style={
Object {
"transform": "rotate(0deg)",
}
}
version="1.1"
viewBox="0 0 20 21"
width="20"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
>
<g
transform="translate(17997 -18577)"
>
<g>
<use
fill="rgba(73, 73, 73, 1)"
transform="matrix(0.866025 0.5 -0.5 0.866025 -17988.7 18577.9)"
xlinkHref="#K"
/>
</g>
</g>
<defs>
<path
d="M 5.39661 3.57718L 5.3977 5.34469L 10.0255 2.67281L 5.39715 0L 5.39832 2.00201C 2.33086 2.5484 0.00065755 5.23112 0 8.45654C 0.000380483 12.0783 2.93556 15.0137 6.55562 15.0143C 10.1774 15.014 13.1128 12.0788 13.1124 8.45702L 11.5697 8.45687C 11.5697 11.2264 9.32527 13.4717 6.55578 13.4716C 3.78629 13.4716 1.54268 11.2262 1.5427 8.45669C 1.54135 6.08718 3.18616 4.10012 5.39661 3.57718Z"
fillRule="evenodd"
id="K"
/>
</defs>
</svg>
<span>
Reboot
</span>
</button>
</span>
</div>
<div
className="c24"
>
<span
name="react-responsive-mock"
query="only screen and (max-width: 47.9375rem)"
>
<button
className="c25 c19 c20"
disabled={false}
href=""
icon={true}
onClick={[Function]}
type="button"
>
<svg
className=""
height="12"
style={
Object {
"transform": "rotate(0deg)",
}
}
version="1.1"
viewBox="0 0 9 12"
width="9"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
>
<g
transform="translate(17403 -18583)"
>
<g>
<use
fill="rgb(210, 67, 58)"
transform="translate(-17403 18583)"
xlinkHref="#j"
/>
</g>
</g>
<defs>
<path
d="M 2 0L 2 1L 0 1L 0 2L 9 2L 9 1L 7 1L 7 0L 2 0ZM 0 3L 1 12L 8 12L 9 3L 0 3ZM 6 4L 7.882 4L 7.104 11L 6 11L 6 4ZM 4 11L 5.001 11L 5.001 4L 4 4L 4 11ZM 1.11719 4L 3.00019 4L 3.00019 11L 1.89619 11L 1.11719 4Z"
fillRule="evenodd"
id="j"
/>
</defs>
</svg>
</button>
</span>
<span
name="react-responsive-mock"
query="only screen and (min-width: 48rem)"
>
<button
className="c26 c19 c20"
disabled={false}
href=""
icon={true}
onClick={[Function]}
type="button"
>
<svg
className=""
height="12"
style={
Object {
"transform": "rotate(0deg)",
}
}
version="1.1"
viewBox="0 0 9 12"
width="9"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
>
<g
transform="translate(17403 -18583)"
>
<g>
<use
fill="rgb(210, 67, 58)"
transform="translate(-17403 18583)"
xlinkHref="#j"
/>
</g>
</g>
<defs>
<path
d="M 2 0L 2 1L 0 1L 0 2L 9 2L 9 1L 7 1L 7 0L 2 0ZM 0 3L 1 12L 8 12L 9 3L 0 3ZM 6 4L 7.882 4L 7.104 11L 6 11L 6 4ZM 4 11L 5.001 11L 5.001 4L 4 4L 4 11ZM 1.11719 4L 3.00019 4L 3.00019 11L 1.89619 11L 1.11719 4Z"
fillRule="evenodd"
id="j"
/>
</defs>
</svg>
<span>
Remove
</span>
</button>
</span>
</div>
</div>
<div
className="c27"
>
<div
className="c28 c1"
height="0.0625rem"
/>
</div>
<div
className="c1"
>
<div
className="c29"
>
<label
className="c30"
htmlFor=""
>
Short ID
</label>
<div
className="c31"
>
<input
className="c32"
disabled={false}
id=""
value="2252839a"
/>
<div
onClick={undefined}
onMouseEnter={[Function]}
onMouseLeave={[Function]}
tag={false}
>
<svg
className="c33 "
height="16"
onClick={[Function]}
style={
Object {
"transform": "rotate(0deg)",
}
}
version="1.1"
width="13"
xmlnsXlink="http://www.w3.org/1999/xlink"
>
<g
transform="translate(-2367 443)"
>
<use
fill="rgba(73, 73, 73, 1)"
transform="translate(2370 -437)"
xlinkHref="#e"
/>
<use
fill="rgba(73, 73, 73, 1)"
transform="translate(2367 -443)"
xlinkHref="#f"
/>
</g>
<defs>
<path
d="M6 3L4 5V0H3v5L1 3 0 4l3.5 3L7 4 6 3z"
id="e"
/>
<path
d="M12 1h-2V0H3v1H1c-.6 0-1 .4-1 1v13c0 .6.4 1 1 1h11c.6 0 1-.4 1-1V2c0-.6-.4-1-1-1zM4 1h5v2H4V1zm8 14H1V2h2v2h7V2h2v13z"
id="f"
/>
</defs>
</svg>
</div>
</div>
</div>
</div>
<div
className="c1"
>
<div
className="c29"
>
<label
className="c30"
htmlFor=""
>
ID
</label>
<div
className="c31"
>
<input
className="c32"
disabled={false}
id=""
value="2252839a-e698-ceec-afac-9549ad0c6624"
/>
<div
onClick={undefined}
onMouseEnter={[Function]}
onMouseLeave={[Function]}
tag={false}
>
<svg
className="c33 "
height="16"
onClick={[Function]}
style={
Object {
"transform": "rotate(0deg)",
}
}
version="1.1"
width="13"
xmlnsXlink="http://www.w3.org/1999/xlink"
>
<g
transform="translate(-2367 443)"
>
<use
fill="rgba(73, 73, 73, 1)"
transform="translate(2370 -437)"
xlinkHref="#e"
/>
<use
fill="rgba(73, 73, 73, 1)"
transform="translate(2367 -443)"
xlinkHref="#f"
/>
</g>
<defs>
<path
d="M6 3L4 5V0H3v5L1 3 0 4l3.5 3L7 4 6 3z"
id="e"
/>
<path
d="M12 1h-2V0H3v1H1c-.6 0-1 .4-1 1v13c0 .6.4 1 1 1h11c.6 0 1-.4 1-1V2c0-.6-.4-1-1-1zM4 1h5v2H4V1zm8 14H1V2h2v2h7V2h2v13z"
id="f"
/>
</defs>
</svg>
</div>
</div>
</div>
</div>
<div
className="c1"
>
<div
className="c29"
>
<label
className="c30"
htmlFor=""
>
CN UUID
</label>
<div
className="c31"
>
<input
className="c32"
disabled={false}
id=""
value="70bb1cee-dba3-11e3-a799-002590e4f2b0"
/>
<div
onClick={undefined}
onMouseEnter={[Function]}
onMouseLeave={[Function]}
tag={false}
>
<svg
className="c33 "
height="16"
onClick={[Function]}
style={
Object {
"transform": "rotate(0deg)",
}
}
version="1.1"
width="13"
xmlnsXlink="http://www.w3.org/1999/xlink"
>
<g
transform="translate(-2367 443)"
>
<use
fill="rgba(73, 73, 73, 1)"
transform="translate(2370 -437)"
xlinkHref="#e"
/>
<use
fill="rgba(73, 73, 73, 1)"
transform="translate(2367 -443)"
xlinkHref="#f"
/>
</g>
<defs>
<path
d="M6 3L4 5V0H3v5L1 3 0 4l3.5 3L7 4 6 3z"
id="e"
/>
<path
d="M12 1h-2V0H3v1H1c-.6 0-1 .4-1 1v13c0 .6.4 1 1 1h11c.6 0 1-.4 1-1V2c0-.6-.4-1-1-1zM4 1h5v2H4V1zm8 14H1V2h2v2h7V2h2v13z"
id="f"
/>
</defs>
</svg>
</div>
</div>
</div>
</div>
<div
className="c1"
>
<div
className="c29"
>
<label
className="c30"
htmlFor=""
>
Image UUID
</label>
<div
className="c31"
>
<input
className="c32"
disabled={false}
id=""
value="19aa3328-0025-11e7-a19a-c39077bfd4cf"
/>
<div
onClick={undefined}
onMouseEnter={[Function]}
onMouseLeave={[Function]}
tag={false}
>
<svg
className="c33 "
height="16"
onClick={[Function]}
style={
Object {
"transform": "rotate(0deg)",
}
}
version="1.1"
width="13"
xmlnsXlink="http://www.w3.org/1999/xlink"
>
<g
transform="translate(-2367 443)"
>
<use
fill="rgba(73, 73, 73, 1)"
transform="translate(2370 -437)"
xlinkHref="#e"
/>
<use
fill="rgba(73, 73, 73, 1)"
transform="translate(2367 -443)"
xlinkHref="#f"
/>
</g>
<defs>
<path
d="M6 3L4 5V0H3v5L1 3 0 4l3.5 3L7 4 6 3z"
id="e"
/>
<path
d="M12 1h-2V0H3v1H1c-.6 0-1 .4-1 1v13c0 .6.4 1 1 1h11c.6 0 1-.4 1-1V2c0-.6-.4-1-1-1zM4 1h5v2H4V1zm8 14H1V2h2v2h7V2h2v13z"
id="f"
/>
</defs>
</svg>
</div>
</div>
</div>
</div>
<div
className="c1"
>
<div
className="c29"
>
<label
className="c30"
htmlFor=""
>
Login
</label>
<div
className="c31"
>
<input
className="c32"
disabled={false}
id=""
value="ssh root@72.2.119.146"
/>
<div
onClick={undefined}
onMouseEnter={[Function]}
onMouseLeave={[Function]}
tag={false}
>
<svg
className="c33 "
height="16"
onClick={[Function]}
style={
Object {
"transform": "rotate(0deg)",
}
}
version="1.1"
width="13"
xmlnsXlink="http://www.w3.org/1999/xlink"
>
<g
transform="translate(-2367 443)"
>
<use
fill="rgba(73, 73, 73, 1)"
transform="translate(2370 -437)"
xlinkHref="#e"
/>
<use
fill="rgba(73, 73, 73, 1)"
transform="translate(2367 -443)"
xlinkHref="#f"
/>
</g>
<defs>
<path
d="M6 3L4 5V0H3v5L1 3 0 4l3.5 3L7 4 6 3z"
id="e"
/>
<path
d="M12 1h-2V0H3v1H1c-.6 0-1 .4-1 1v13c0 .6.4 1 1 1h11c.6 0 1-.4 1-1V2c0-.6-.4-1-1-1zM4 1h5v2H4V1zm8 14H1V2h2v2h7V2h2v13z"
id="f"
/>
</defs>
</svg>
</div>
</div>
</div>
</div>
<div
className="c1"
>
<div
className="c29"
>
<label
className="c30"
htmlFor=""
>
IP address 1
</label>
<div
className="c31"
>
<input
className="c32"
disabled={false}
id=""
value="72.2.119.146"
/>
<div
onClick={undefined}
onMouseEnter={[Function]}
onMouseLeave={[Function]}
tag={false}
>
<svg
className="c33 "
height="16"
onClick={[Function]}
style={
Object {
"transform": "rotate(0deg)",
}
}
version="1.1"
width="13"
xmlnsXlink="http://www.w3.org/1999/xlink"
>
<g
transform="translate(-2367 443)"
>
<use
fill="rgba(73, 73, 73, 1)"
transform="translate(2370 -437)"
xlinkHref="#e"
/>
<use
fill="rgba(73, 73, 73, 1)"
transform="translate(2367 -443)"
xlinkHref="#f"
/>
</g>
<defs>
<path
d="M6 3L4 5V0H3v5L1 3 0 4l3.5 3L7 4 6 3z"
id="e"
/>
<path
d="M12 1h-2V0H3v1H1c-.6 0-1 .4-1 1v13c0 .6.4 1 1 1h11c.6 0 1-.4 1-1V2c0-.6-.4-1-1-1zM4 1h5v2H4V1zm8 14H1V2h2v2h7V2h2v13z"
id="f"
/>
</defs>
</svg>
</div>
</div>
</div>
</div>
<div
className="c1"
>
<div
className="c29"
>
<label
className="c30"
htmlFor=""
>
IP address 2
</label>
<div
className="c34"
>
<input
className="c32"
disabled={false}
id=""
value="10.112.5.63"
/>
<div
onClick={undefined}
onMouseEnter={[Function]}
onMouseLeave={[Function]}
tag={false}
>
<svg
className="c33 "
height="16"
onClick={[Function]}
style={
Object {
"transform": "rotate(0deg)",
}
}
version="1.1"
width="13"
xmlnsXlink="http://www.w3.org/1999/xlink"
>
<g
transform="translate(-2367 443)"
>
<use
fill="rgba(73, 73, 73, 1)"
transform="translate(2370 -437)"
xlinkHref="#e"
/>
<use
fill="rgba(73, 73, 73, 1)"
transform="translate(2367 -443)"
xlinkHref="#f"
/>
</g>
<defs>
<path
d="M6 3L4 5V0H3v5L1 3 0 4l3.5 3L7 4 6 3z"
id="e"
/>
<path
d="M12 1h-2V0H3v1H1c-.6 0-1 .4-1 1v13c0 .6.4 1 1 1h11c.6 0 1-.4 1-1V2c0-.6-.4-1-1-1zM4 1h5v2H4V1zm8 14H1V2h2v2h7V2h2v13z"
id="f"
/>
</defs>
</svg>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
`;