.card {
  border-radius: 4px;
  border: solid 1px var(--color-white-darker);
  background-color: var(--color-white);
  height: auto; }
  .card .cardButton {
    min-height: 52px;
    display: flex;
    width: 100%;
    color: var(--color-primary);
    font-size: var(--size-font-s);
    padding: 0;
    background-color: transparent;
    align-items: center;
    justify-content: center; }
    @media (min-width: 1024px) {
      .card .cardButton {
        padding: 0 32px;
        cursor: pointer;
        justify-content: initial; } }
  .card.web-4-0 {
    background: var(--color-4-0-white);
    border: 1px solid var(--color-4-0-purple-lighter); }
    .card.web-4-0 .cardButton {
      color: var(--color-4-0-purple); }

.expandable {
  height: auto; }

.radius-0 {
  border-radius: 4px; }

.radius-1 {
  border-radius: 8px; }

.radius-2 {
  border-radius: 12px; }

.radius-3 {
  border-radius: 16px; }

.elevation-0 {
  box-shadow: none; }

.elevation-1 {
  box-shadow: 0 2px 4px 0 var(--color-white-smoke-dark); }

.elevation-2 {
  box-shadow: 0 4px 8px 0 var(--color-white-smoke-dark); }

.elevation-3 {
  box-shadow: 0 8px 16px 0 var(--color-white-smoke-dark); }

.elevation-4 {
  box-shadow: 0 16px 32px 0 var(--color-white-smoke-dark); }

.rowWrapper {
  padding: 16px;
  display: flex;
  flex-direction: row;
  font-size: var(--size-font-l);
  min-height: 54px;
  flex-wrap: wrap; }
  .rowWrapper:not(:last-child) {
    border-bottom: 1px solid var(--color-white-darker); }
  @media (min-width: 1024px) {
    .rowWrapper {
      flex-wrap: initial; } }
  .rowWrapper .content {
    margin-right: auto;
    max-width: 50%; }
    .rowWrapper .content.withoutActions {
      align-items: flex-start;
      display: flex;
      flex-direction: column;
      margin-right: unset;
      flex-basis: unset;
      justify-content: flex-start;
      max-width: 100%; }
    @media (min-width: 1024px) {
      .rowWrapper .content {
        flex-basis: 50%;
        max-width: 50%; }
        .rowWrapper .content.withoutActions {
          flex-direction: row;
          flex-basis: calc(100% - 30%);
          max-width: calc(100% - 30%); } }
  @media (min-width: 1024px) {
    .rowWrapper {
      padding: 20px 16px 17px 32px; } }
  .rowWrapper .label {
    color: var(--color-dark-lighter);
    font-size: var(--size-font-m);
    margin-bottom: var(--size-margin);
    flex: 1 1 100%; }
    @media (min-width: 1024px) {
      .rowWrapper .label {
        max-width: 30%;
        flex-basis: 30%;
        margin-bottom: 0;
        flex: auto; } }
    .rowWrapper .label:first-letter {
      text-transform: uppercase; }
  .rowWrapper.web-4-0:not(:last-child) {
    border-bottom: 1px solid var(--color-4-0-purple-lighter); }

@media (min-width: 1024px) {
  .actionsWrapper {
    flex-basis: 20%;
    display: flex;
    justify-content: flex-end; } }

.actionsWrapper > .rowActionButton {
  margin-right: -12px; }
  .actionsWrapper > .rowActionButton > div > div {
    display: none; }
    @media (min-width: 1024px) {
      .actionsWrapper > .rowActionButton > div > div {
        display: block; } }

@media (min-width: 1024px) {
  .children {
    flex-basis: 50%;
    max-width: 50%; } }

.status {
  margin-top: var(--size-margin);
  color: var(--color-warning);
  font-size: var(--size-font-m); }
  @media (min-width: 1024px) {
    .status {
      margin-top: 0;
      margin-left: auto;
      flex-basis: 50%;
      max-width: 50%; } }

.statusTitle {
  font-weight: 500; }

.statusTimestamp {
  margin-top: var(--size-margin); }

.statusMessage {
  margin-top: var(--size-margin);
  font-size: var(--size-font-xs); }

.wrapper {
  display: flex;
  flex-direction: column;
  flex: 1;
  justify-content: center;
  align-items: center;
  text-align: center; }
  .wrapper .text {
    color: var(--color-dark);
    font-size: var(--size-font-s);
    margin: 16px 0; }
  .wrapper .button {
    width: 214px; }
  .wrapper .image {
    width: 100%; }
  .wrapper .container {
    display: flex;
    flex-direction: column;
    width: 100%; }