/*
   imported from button.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 */
/**
  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
*/
/* IMPORT_PT: update these as the project sees fit */
/* Line Heights */
/* stylelint-disable */

/* stylelint-enable */
.button__button___3kagF {
  min-height: 40px;
  min-width: 124px;
  background: #D7D7D7;
  border: 0;
  border-radius: 6px;
  box-sizing: border-box;
  color: #444444;
  display: inline-block;
  font-size: calc(12px + 2 * (100vw - 320px) / 1120);
  padding: 4px 12px; }
  .button__button___3kagF:enabled {
    cursor: pointer; }
  .button__button___3kagF:hover {
    background: #E6F3FC; }
  .button__button___3kagF:active {
    border: 2px solid #444444;
    position: relative;
    top: 1px; }
  .button__button___3kagF.button__btn-full___283DF {
    width: 100%; }
  .button__button___3kagF.button__btn-lg___1uGFM {
    min-height: 58px;
    min-width: 174px;
    border-radius: 29px;
    font-size: calc(14px + 4 * (100vw - 320px) / 1120); }
    .button__button___3kagF.button__btn-lg___1uGFM:active {
      border: 3px solid #444444; }
  .button__button___3kagF.button__btn-sm___2euno {
    min-height: 25px;
    min-width: 104px;
    border-radius: 4px; }

.button__primary___2lv9w {
  background: #0E99FF;
  border: 2px solid #0E99FF;
  color: #FFFFFF; }
  .button__primary___2lv9w:hover {
    background: #FFFFFF;
    color: #0E99FF; }
  .button__primary___2lv9w:active {
    background: #E6F3FC;
    border: 2px solid #0E99FF;
    color: #0E99FF; }
  .button__primary___2lv9w.button__btn-lg___1uGFM {
    border: 3px solid #0E99FF; }
    .button__primary___2lv9w.button__btn-lg___1uGFM:active {
      background: #E6F3FC;
      border: 3px solid #0E99FF;
      color: #0E99FF; }

.button__secondary___3R9B- {
  background: #F6F5F9;
  border: 2px solid #F6F5F9;
  color: #0E99FF; }
  .button__secondary___3R9B-:hover {
    background: #0E99FF;
    border: 2px solid #0E99FF;
    color: #F6F5F9; }
  .button__secondary___3R9B-:active {
    border: 2px solid #5bb9ff; }
  .button__secondary___3R9B-.button__btn-lg___1uGFM:active {
    border: 3px solid #5bb9ff; }

.button__tertiary___2D3ek {
  background: rgba(0, 0, 0, 0);
  border: 2px solid #FFFFFF;
  color: #FFFFFF; }
  .button__tertiary___2D3ek:hover {
    background: #FFFFFF;
    color: #0E99FF; }
  .button__tertiary___2D3ek:active {
    border: 2px solid #d9d9d9; }
  .button__tertiary___2D3ek.button__btn-lg___1uGFM:active {
    border: 3px solid #d9d9d9; }

.button__slate-clear___zrzBO {
  background: rgba(0, 0, 0, 0);
  border: 2px solid #607997;
  color: #607997; }
  .button__slate-clear___zrzBO:hover {
    background: #607997;
    color: #FFFFFF; }
  .button__slate-clear___zrzBO:active {
    border: 2px solid #8da0b7; }
  .button__slate-clear___zrzBO.button__btn-lg___1uGFM:active {
    border: 3px solid #8da0b7; }

.button__green___2Wbt8 {
  background: #7ED221;
  border: 2px solid #7ED221;
  color: #FFFFFF; }
  .button__green___2Wbt8:hover {
    background: #FFFFFF;
    color: #7ED221; }
  .button__green___2Wbt8:active {
    background: #D4FFCC;
    border: 2px solid #7ED221;
    color: #7ED221; }
  .button__green___2Wbt8.button__btn-lg___1uGFM {
    border: 3px solid #7ED221; }
    .button__green___2Wbt8.button__btn-lg___1uGFM:active {
      background: #D4FFCC;
      border: 3px solid #7ED221;
      color: #7ED221; }

.button__slate___36nW- {
  background: #607997;
  border: 2px solid #607997;
  color: #FFFFFF; }
  .button__slate___36nW-:hover {
    background: #FFFFFF;
    color: #607997; }
  .button__slate___36nW-:active {
    background: #D7D7D7;
    border: 2px solid #607997;
    color: #607997; }
  .button__slate___36nW-.button__btn-lg___1uGFM {
    border: 3px solid #607997; }
    .button__slate___36nW-.button__btn-lg___1uGFM:active {
      background: #D7D7D7;
      border: 3px solid #607997;
      color: #607997; }

.button__alert___ED07e {
  min-height: 36px;
  min-width: 124px;
  background: linear-gradient(90deg, #E5378F 0%, #F76B1C 100%);
  border: 0;
  border-radius: 18px;
  color: #FFFFFF;
  position: relative; }
  .button__alert___ED07e::after {
    background: linear-gradient(90deg, #E5378F 0%, #F76B1C 100%);
    border-radius: 20px;
    bottom: -2px;
    content: '';
    left: -2px;
    position: absolute;
    right: -2px;
    top: -2px;
    z-index: -1; }
  .button__alert___ED07e:hover {
    background: #FFFFFF; }
    .button__alert___ED07e:hover > span {
      background: linear-gradient(90deg, #E5378F 0%, #F76B1C 100%);
      /* stylelint-disable */
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      /* stylelint-enable */ }
  .button__alert___ED07e:active {
    background: #FFC7CC;
    border: initial; }
  .button__alert___ED07e.button__btn-lg___1uGFM {
    min-height: 49px;
    min-width: 174px;
    border-radius: 24.5px; }
    .button__alert___ED07e.button__btn-lg___1uGFM::after {
      border-radius: 27.5px;
      bottom: -3px;
      left: -3px;
      right: -3px;
      top: -3px; }
    .button__alert___ED07e.button__btn-lg___1uGFM:active {
      background: #FFC7CC;
      border: initial; }
  .button__alert___ED07e.button__btn-sm___2euno {
    border-radius: 12.5px; }

.button__teal____P5fC {
  min-height: 36px;
  min-width: 124px;
  background: linear-gradient(45deg, #4392D7 0%, #00E3C6 100%);
  border: 0;
  border-radius: 18px;
  color: #FFFFFF;
  position: relative; }
  .button__teal____P5fC::after {
    background: linear-gradient(45deg, #4392D7 0%, #00E3C6 100%);
    border-radius: 20px;
    bottom: -2px;
    content: '';
    left: -2px;
    position: absolute;
    right: -2px;
    top: -2px;
    z-index: -1; }
  .button__teal____P5fC:hover {
    background: #FFFFFF; }
    .button__teal____P5fC:hover > span {
      background: linear-gradient(45deg, #4392D7 0%, #00E3C6 100%);
      /* stylelint-disable */
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      /* stylelint-enable */ }
  .button__teal____P5fC:active {
    background: #E6F3FC;
    border: initial; }
  .button__teal____P5fC.button__btn-lg___1uGFM {
    min-height: 49px;
    min-width: 174px;
    border-radius: 24.5px; }
    .button__teal____P5fC.button__btn-lg___1uGFM::after {
      border-radius: 27.5px;
      bottom: -3px;
      left: -3px;
      right: -3px;
      top: -3px; }
    .button__teal____P5fC.button__btn-lg___1uGFM:active {
      background: #E6F3FC;
      border: initial; }
  .button__teal____P5fC.button__btn-sm___2euno {
    border-radius: 12.5px; }