@font-face {
  font-family: roobert;
  font-style: normal;
  font-weight: 400;
  src: url("https://mango.staging.mangoclients.com.au/fonts/roobert-regular.woff2");
}
@font-face {
  font-family: roobert;
  font-style: normal;
  font-weight: 500;
  src: url("https://mango.staging.mangoclients.com.au/fonts/roobert-medium.woff2");
}
@font-face {
  font-family: roobert;
  font-style: normal;
  font-weight: 600;
  src: url("https://mango.staging.mangoclients.com.au/fonts/roobert-semi-bold.woff2");
}
@font-face {
  font-family: roobert;
  font-style: normal;
  font-weight: 700;
  src: url("https://mango.staging.mangoclients.com.au/fonts/roobert-bold.woff2");
}
@font-face {
  font-family: roobert;
  font-style: normal;
  font-weight: 800;
  src: url("https://mango.staging.mangoclients.com.au/fonts/roobert-heavy.woff2");
}

:root {
  --font-size: calc(13rem / 16);
}

input.range {
  background-color: transparent;
}

.ck-style-grid {
  .ck-disabled {
    display: none !important;
  }

  .ck-style-grid__button__preview {
    > *:first-child {
      color: transparent;

      &::before {
        content: attr(class);
        color: black;
      }
    }
  }
}

.ck.ck-content {
  --h0000: 26px;
  --h000: 24px;
  --h00: 22px;
  --h0: 20px;
  --h1: 18px;
  --h2: 16px;
  --h3: 15px;
  --h4: 14.25px;
  --h5: 13.5px;
  --h6: 13px;
  --p4: 14px;
  --p3: 13px;
  --p2: 12.5px;
  --p1: 12px;
  --p0: 11px;
  --p00: 10px;
  --p000: 9px;

  p {
    font-size: var(--p1);
    font-weight: 400;
    font-family: roobert, "Roobert";
    margin: 0 0 0.35rem;
    letter-spacing: 0;
    color: black;

    strong {
      font-weight: 500;
    }
  }

  :is(h1, h2, h3, h4, h5, h6) {
    text-transform: none;
    margin: 0 0 0.5rem;
    color: black;
    font-family: roobert, "Roobert";
    font-weight: 500;
    letter-spacing: 0;

    strong {
      font-weight: 600;
    }
  }

  h1 {
    font-size: var(--h1);
  }

  h2 {
    font-size: var(--h2);
  }

  h3 {
    font-size: var(--h3);
  }

  h4 {
    font-size: var(--h4);
  }

  h5 {
    font-size: var(--h5);
  }

  h6 {
    font-size: var(--h6);
  }

  .h0000 {
    font-size: var(--h0000);
  }

  .h000 {
    font-size: var(--h000);
  }

  .h00 {
    font-size: var(--h00);
  }

  .h0 {
    font-size: var(--h0);
  }

  .h1 {
    font-size: var(--h1);
  }

  .h2 {
    font-size: var(--h2);
  }

  .h3 {
    font-size: var(--h3);
  }

  .h4 {
    font-size: var(--h4);
  }

  .h5 {
    font-size: var(--h5);
  }

  .h6 {
    font-size: var(--h6);
  }

  .p4 {
    font-size: var(--p4);
  }

  .p3 {
    font-size: var(--p3);
  }

  .p2 {
    font-size: var(--p2);
  }

  .p1 {
    font-size: var(--p1);
  }

  .p0 {
    font-size: var(--p0);
  }

  .p00 {
    font-size: var(--p00);
  }

  .p000 {
    font-size: var(--p000);
  }
}

.chip.large {
  --thumb-size: 60px;

  > .thumb {
    width: 100%;
    overflow: hidden;
    object-fit: cover;

    canvas {
      width: 100%;
    }
  }
}

.card > .card-main > .thumb {
  max-height: 50px;
  object-fit: contain;

  img {
    object-fit: cover;
  }
}

body.login main img#login-logo {
  max-width: min(calc(15rem + var(--pane-padding) * 0), 220px);
}