/*
   imported from qr-code.scss 
*/

/*
  When adding a color, please add it to the :export section at the end of this file.
  If you need to add a new section/type of color, you can add the section title to the :export by pre-prending it with an underscore.
*/
/**
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/**
 * Lightens or darkens a color based on its brightness
 */
/**
* This takes the current $color of the parent and sets the icon color
* to be the currentColor
*/
/**
* Determines the icon size for various different sizes of buttons
*/
/* Primary Colors */
/* Secondary Colors */
/* Gradients */
/* Transparencies */
/* stylelint-disable */

/* stylelint-enable */
/**
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/**
 * Lightens or darkens a color based on its brightness
 */
/**
* This takes the current $color of the parent and sets the icon color
* to be the currentColor
*/
/**
* Determines the icon size for various different sizes of buttons
*/
/* IMPORT_PT: update these as the project sees fit */
/* Line Heights */
/* stylelint-disable */

/* stylelint-enable */
/**
  If making changes to this file, please make sure the changes are reflected on the :export section at the end of the file.
 */
/**
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/**
 * Lightens or darkens a color based on its brightness
 */
/**
* This takes the current $color of the parent and sets the icon color
* to be the currentColor
*/
/**
* Determines the icon size for various different sizes of buttons
*/
/* IMPORT_PT: update these as the project sees fit */
/* stylelint-disable */

/* stylelint-enable */
/**
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/**
 * Lightens or darkens a color based on its brightness
 */
/**
* This takes the current $color of the parent and sets the icon color
* to be the currentColor
*/
/**
* Determines the icon size for various different sizes of buttons
*/
.qr-code__qr-code___m0Dq- {
  align-items: center;
  border-radius: 2px;
  display: flex;
  flex-direction: column; }
  .qr-code__qr-code__container___1rHe5 {
    align-items: center;
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: calc(10.13139px + 0.58394vw) 15%;
    text-align: center;
    width: 100%; }
  .qr-code__qr-code__image___oaU3x {
    height: 100%;
    margin: calc(6.13139px + 0.58394vw) 0;
    max-width: 350px;
    position: relative;
    width: 100%; }
    .qr-code__qr-code__image___oaU3x::before {
      border-left: 5px solid #0E99FF;
      border-top: 5px solid #0E99FF;
      content: "";
      display: block;
      height: 24px;
      left: 0;
      position: absolute;
      top: 0;
      width: 24px; }
    .qr-code__qr-code__image___oaU3x::after {
      border-right: 5px solid #0E99FF;
      border-top: 5px solid #0E99FF;
      content: "";
      display: block;
      height: 24px;
      position: absolute;
      right: 0;
      top: 0;
      width: 24px; }
  .qr-code__qr-code__image-bottom___ALyZr {
    height: 100%;
    max-width: 350px;
    width: 100%; }
    .qr-code__qr-code__image-bottom___ALyZr::before {
      border-bottom: 5px solid #0E99FF;
      border-left: 5px solid #0E99FF;
      bottom: 2px;
      content: "";
      display: block;
      height: 24px;
      left: 0;
      position: absolute;
      width: 24px; }
    .qr-code__qr-code__image-bottom___ALyZr::after {
      border-bottom: 5px solid #0E99FF;
      border-right: 5px solid #0E99FF;
      bottom: 2px;
      content: "";
      display: block;
      height: 24px;
      position: absolute;
      right: 0;
      width: 24px; }
  .qr-code__qr-code__message___30UP4 {
    border-bottom-left-radius: 2px;
    border-bottom-right-radius: 2px;
    font-size: calc(16px + 2 * (100vw - 320px) / 1120);
    line-height: calc(25px + 6 * (100vw - 320px) / 1120);
    padding: calc(10.13139px + 0.58394vw) calc(25.45985px + 2.0438vw);
    text-align: center;
    width: 100%; }
  .qr-code__qr-code__request___2A7xk {
    font-size: calc(14px + 4 * (100vw - 320px) / 1120);
    line-height: calc(21px + 4 * (100vw - 320px) / 1120);
    padding: 0 calc(10.13139px + 0.58394vw); }
  .qr-code__qr-code__amount___2f2VR {
    font-size: calc(12px + 2 * (100vw - 320px) / 1120); }
  .qr-code__qr-code__wallet___1IMy1 {
    overflow: hidden;
    padding: calc(10.13139px + 0.58394vw) calc(25.45985px + 2.0438vw);
    text-align: center;
    white-space: nowrap;
    width: 100%; }
    .qr-code__qr-code__wallet___1IMy1 p {
      font-size: calc(14px + 4 * (100vw - 320px) / 1120); }
    .qr-code__qr-code__wallet___1IMy1 h2,
    .qr-code__qr-code__wallet___1IMy1 p {
      font-weight: inherit;
      margin: 0 !important;
      overflow: hidden;
      text-overflow: ellipsis; }
  @media only screen and (max-width: 576px) {
    .qr-code__qr-code___m0Dq- {
      font-weight: 700 !important; }
      .qr-code__qr-code__container___1rHe5 {
        padding: 0 15%; } }