@import url(custom-style_scss_ver.css);
:root {
  /*brand*/
  --brand-50: #E5F2FF;
  --brand-100: #CCE5FF;
  --brand-200: #99CAFF;
  --brand-300: #66B0FF;
  --brand-400: #3396FF;
  --brand-500: #007AFF;
  --brand-600: #0063CC;
  --brand-700: #004A99;
  --brand-800: #003166;
  --brand-900: #001F40;
  --brand-950: #001226;
  /*blue*/
  --blue-50: #E5F2FF;
  --blue-100: #CCE5FF;
  --blue-200: #99CAFF;
  --blue-300: #66B0FF;
  --blue-400: #3396FF;
  --blue-500: #007AFF;
  --blue-600: #0063CC;
  --blue-700: #004A99;
  --blue-800: #003166;
  --blue-900: #001F40;
  --blue-950: #001226;
  /*lavender*/
  --lavender-50: #F2F0FF;
  --lavender-100: #E4E0FF;
  --lavender-200: #CAC2FF;
  --lavender-300: #AFA3FF;
  --lavender-400: #9585FF;
  --lavender-500: #7763FF;
  --lavender-600: #4D36E3;
  --lavender-700: #2F1E9C;
  --lavender-800: #231675;
  --lavender-900: #0F0930;
  --lavender-950: #060414;
  /*red*/
  --red-50: #FFECEB;
  --red-100: #FFD8D6;
  --red-200: #FFB1AD;
  --red-300: #FF8B85;
  --red-400: #FF645C;
  --red-500: #FF3B30;
  --red-600: #F50C00;
  --red-700: #B80900;
  --red-800: #7A0600;
  --red-900: #3D0300;
  --red-950: #1F0200;
  /*orange*/
  --orange-50: #FFF4E5;
  --orange-100: #FFEACC;
  --orange-200: #FFD599;
  --orange-300: #FFBF66;
  --orange-400: #FFAA33;
  --orange-500: #FF9500;
  --orange-600: #CC7700;
  --orange-700: #995900;
  --orange-800: #663C00;
  --orange-900: #331E00;
  --orange-950: #190F00;
  /*lime*/
  --lime-50: #E7FDF1;
  --lime-100: #D4FCE5;
  --lime-200: #A9F9CC;
  --lime-300: #7EF6B2;
  --lime-400: #4EF396;
  --lime-500: #25F07C;
  --lime-600: #0ECD61;
  --lime-700: #0B9D4A;
  --lime-800: #076932;
  --lime-900: #043419;
  --lime-950: #02180B;
  /*navy*/
  --navy-50: #EBEFFF;
  --navy-100: #D6DFFF;
  --navy-200: #ADBFFF;
  --navy-300: #8AA3FF;
  --navy-400: #6183FF;
  --navy-500: #3864FF;
  --navy-600: #2F53D6;
  --navy-700: #2643AD;
  --navy-800: #172867;
  --navy-900: #0C1638;
  --navy-950: #07102F;
  /*indigo*/
  --indigo-50: #EFEFFB;
  --indigo-100: #DFDEF7;
  --indigo-200: #BEBDEF;
  --indigo-300: #9A98E6;
  --indigo-400: #7978DE;
  --indigo-500: #5856D6;
  --indigo-600: #3D3BC9;
  --indigo-700: #282691;
  --indigo-800: #1C1B67;
  --indigo-900: #100F39;
  --indigo-950: #0A0A22;
  /*purple*/
  --purple-50: #F7EEFC;
  --purple-100: #EFDDF8;
  --purple-200: #DFBAF2;
  --purple-300: #D098EB;
  --purple-400: #C076E5;
  --purple-500: #AF52DE;
  --purple-600: #9627CE;
  --purple-700: #711D9A;
  --purple-800: #4B1467;
  --purple-900: #260A33;
  --purple-950: #13051A;
  /*yellow*/
  --yellow-50: #FFF9E5;
  --yellow-100: #FFF3CC;
  --yellow-200: #FFE799;
  --yellow-300: #FFDB66;
  --yellow-400: #FFCF33;
  --yellow-500: #FFC402;
  --yellow-600: #CC9C00;
  --yellow-700: #997500;
  --yellow-800: #664E00;
  --yellow-900: #332700;
  --yellow-950: #191400;
  /*green*/
  --green-50: #F1FFE0;
  --green-100: #E6FFC7;
  --green-200: #CDFF8F;
  --green-300: #B1FF52;
  --green-400: #98FF1A;
  --green-500: #7BE000;
  --green-600: #62B300;
  --green-700: #498500;
  --green-800: #325C00;
  --green-900: #192E00;
  --green-950: #0B1400;
  /*forest*/
  --forest-50: #DBFFE3;
  --forest-100: #B3FFC3;
  --forest-200: #6BFF8B;
  --forest-300: #1FFF4F;
  --forest-400: #00D62E;
  --forest-500: #00891E;
  --forest-600: #007018;
  --forest-700: #005212;
  --forest-800: #00380C;
  --forest-900: #001906;
  --forest-950: #000F03;
  /*mint*/
  --mint-50: #E8FCFB;
  --mint-100: #CDF9F7;
  --mint-200: #9BF3EF;
  --mint-300: #68EDE7;
  --mint-400: #36E8DF;
  --mint-500: #18CEC5;
  --mint-600: #13A49D;
  --mint-700: #0E7B76;
  --mint-800: #0A524F;
  --mint-900: #052927;
  --mint-950: #031716;
  /*cyan*/
  --cyan-50: #EBF9FF;
  --cyan-100: #D6F2FF;
  --cyan-200: #B3E7FF;
  --cyan-300: #8ADAFF;
  --cyan-400: #61CDFF;
  --cyan-500: #3BC1FF;
  --cyan-600: #00ABFA;
  --cyan-700: #0081BD;
  --cyan-800: #005780;
  --cyan-900: #002A3D;
  --cyan-950: #00151F;
  /*charcoal*/
  --charcoal-50: #EFF0F0;
  --charcoal-100: #E2E3E4;
  --charcoal-200: #C5C8C9;
  --charcoal-300: #A5A9AC;
  --charcoal-400: #888E91;
  --charcoal-500: #6C7275;
  --charcoal-600: #565A5D;
  --charcoal-700: #404345;
  --charcoal-800: #2C2F30;
  --charcoal-900: #1C1D1F;
  --charcoal-950: #0A0B0B;
  /*gray*/
  --gray-50: #F4F5F6;
  --gray-100: #ECEDEF;
  --gray-200: #D8DCDE;
  --gray-300: #C2C8CC;
  --gray-400: #AFB6BB;
  --gray-500: #9BA4AB;
  --gray-600: #77838D;
  --gray-700: #586269;
  --gray-800: #3D4348;
  --gray-900: #1E2224;
  --gray-950: #0E0F11;
  /*black*/
  --black-500: #0E0F11;
  /*white*/
  --white-500: #FFF;
  /*brand 0, 122, 255*/
  --brand-t-5per: rgba(0, 122, 255, 0.05);
  --brand-t-10per: rgba(0, 122, 255, 0.1);
  --brand-t-15per: rgba(0, 122, 255, 0.15);
  --brand-t-20per: rgba(0, 122, 255, 0.2);
  --brand-t-25per: rgba(0, 122, 255, 0.25);
  --brand-t-30per: rgba(0, 122, 255, 0.3);
  --brand-t-35per: rgba(0, 122, 255, 0.35);
  --brand-t-40per: rgba(0, 122, 255, 0.4);
  --brand-t-45per: rgba(0, 122, 255, 0.45);
  --brand-t-50per: rgba(0, 122, 255, 0.5);
  --brand-t-55per: rgba(0, 122, 255, 0.55);
  /*blue 0, 122, 255*/
  --blue-t-5per: rgba(0, 122, 255, 0.05);
  --blue-t-10per: rgba(0, 122, 255, 0.1);
  --blue-t-15per: rgba(0, 122, 255, 0.15);
  --blue-t-20per: rgba(0, 122, 255, 0.2);
  --blue-t-25per: rgba(0, 122, 255, 0.25);
  --blue-t-30per: rgba(0, 122, 255, 0.3);
  --blue-t-35per: rgba(0, 122, 255, 0.35);
  --blue-t-40per: rgba(0, 122, 255, 0.4);
  --blue-t-45per: rgba(0, 122, 255, 0.45);
  --blue-t-50per: rgba(0, 122, 255, 0.5);
  --blue-t-55per: rgba(0, 122, 255, 0.55);
  /*lavender 119, 99, 255*/
  --lavender-t-5per: rgba(119, 99, 255, 0.05);
  --lavender-t-10per: rgba(119, 99, 255, 0.1);
  --lavender-t-15per: rgba(119, 99, 255, 0.15);
  --lavender-t-20per: rgba(119, 99, 255, 0.2);
  --lavender-t-25per: rgba(119, 99, 255, 0.25);
  --lavender-t-30per: rgba(119, 99, 255, 0.3);
  --lavender-t-35per: rgba(119, 99, 255, 0.35);
  --lavender-t-40per: rgba(119, 99, 255, 0.4);
  --lavender-t-45per: rgba(119, 99, 255, 0.45);
  --lavender-t-50per: rgba(119, 99, 255, 0.5);
  --lavender-t-55per: rgba(119, 99, 255, 0.55);
  /*red 255, 59, 48*/
  --red-t-5per: rgba(255, 59, 48, 0.05);
  --red-t-10per: rgba(255, 59, 48, 0.1);
  --red-t-15per: rgba(255, 59, 48, 0.15);
  --red-t-20per: rgba(255, 59, 48, 0.2);
  --red-t-25per: rgba(255, 59, 48, 0.25);
  --red-t-30per: rgba(255, 59, 48, 0.3);
  --red-t-35per: rgba(255, 59, 48, 0.35);
  --red-t-40per: rgba(255, 59, 48, 0.4);
  --red-t-45per: rgba(255, 59, 48, 0.45);
  --red-t-50per: rgba(255, 59, 48, 0.5);
  --red-t-55per: rgba(255, 59, 48, 0.55);
  /*orange 255, 149, 0*/
  --orange-t-5per: rgba(255, 149, 0, 0.05);
  --orange-t-10per: rgba(255, 149, 0, 0.1);
  --orange-t-15per: rgba(255, 149, 0, 0.15);
  --orange-t-20per: rgba(255, 149, 0, 0.2);
  --orange-t-25per: rgba(255, 149, 0, 0.25);
  --orange-t-30per: rgba(255, 149, 0, 0.3);
  --orange-t-35per: rgba(255, 149, 0, 0.35);
  --orange-t-40per: rgba(255, 149, 0, 0.4);
  --orange-t-45per: rgba(255, 149, 0, 0.45);
  --orange-t-50per: rgba(255, 149, 0, 0.5);
  --orange-t-55per: rgba(255, 149, 0, 0.55);
  /*lime 37, 240, 124*/
  --lime-t-5per: rgba(37, 240, 124, 0.05);
  --lime-t-10per: rgba(37, 240, 124, 0.1);
  --lime-t-15per: rgba(37, 240, 124, 0.15);
  --lime-t-20per: rgba(37, 240, 124, 0.2);
  --lime-t-25per: rgba(37, 240, 124, 0.25);
  --lime-t-30per: rgba(37, 240, 124, 0.3);
  --lime-t-35per: rgba(37, 240, 124, 0.35);
  --lime-t-40per: rgba(37, 240, 124, 0.4);
  --lime-t-45per: rgba(37, 240, 124, 0.45);
  --lime-t-50per: rgba(37, 240, 124, 0.5);
  --lime-t-55per: rgba(37, 240, 124, 0.55);
  /*navy 56, 100, 255*/
  --navy-t-5per: rgba(56, 100, 255, 0.05);
  --navy-t-10per: rgba(56, 100, 255, 0.1);
  --navy-t-15per: rgba(56, 100, 255, 0.15);
  --navy-t-20per: rgba(56, 100, 255, 0.2);
  --navy-t-25per: rgba(56, 100, 255, 0.25);
  --navy-t-30per: rgba(56, 100, 255, 0.3);
  --navy-t-35per: rgba(56, 100, 255, 0.35);
  --navy-t-40per: rgba(56, 100, 255, 0.4);
  --navy-t-45per: rgba(56, 100, 255, 0.45);
  --navy-t-50per: rgba(56, 100, 255, 0.5);
  --navy-t-55per: rgba(56, 100, 255, 0.55);
  /*indigo 88, 86, 214*/
  --indigo-t-5per: rgba(88, 86, 214, 0.05);
  --indigo-t-10per: rgba(88, 86, 214, 0.1);
  --indigo-t-15per: rgba(88, 86, 214, 0.15);
  --indigo-t-20per: rgba(88, 86, 214, 0.2);
  --indigo-t-25per: rgba(88, 86, 214, 0.25);
  --indigo-t-30per: rgba(88, 86, 214, 0.3);
  --indigo-t-35per: rgba(88, 86, 214, 0.35);
  --indigo-t-40per: rgba(88, 86, 214, 0.4);
  --indigo-t-45per: rgba(88, 86, 214, 0.45);
  --indigo-t-50per: rgba(88, 86, 214, 0.5);
  --indigo-t-55per: rgba(88, 86, 214, 0.55);
  /*purple 175, 82, 222*/
  --purple-t-5per: rgba(175, 82, 222, 0.05);
  --purple-t-10per: rgba(175, 82, 222, 0.1);
  --purple-t-15per: rgba(175, 82, 222, 0.15);
  --purple-t-20per: rgba(175, 82, 222, 0.2);
  --purple-t-25per: rgba(175, 82, 222, 0.25);
  --purple-t-30per: rgba(175, 82, 222, 0.3);
  --purple-t-35per: rgba(175, 82, 222, 0.35);
  --purple-t-40per: rgba(175, 82, 222, 0.4);
  --purple-t-45per: rgba(175, 82, 222, 0.45);
  --purple-t-50per: rgba(175, 82, 222, 0.5);
  --purple-t-55per: rgba(175, 82, 222, 0.55);
  /*yellow 255, 196, 2*/
  --yellow-t-5per: rgba(255, 196, 2, 0.05);
  --yellow-t-10per: rgba(255, 196, 2, 0.1);
  --yellow-t-15per: rgba(255, 196, 2, 0.15);
  --yellow-t-20per: rgba(255, 196, 2, 0.2);
  --yellow-t-25per: rgba(255, 196, 2, 0.25);
  --yellow-t-30per: rgba(255, 196, 2, 0.3);
  --yellow-t-35per: rgba(255, 196, 2, 0.35);
  --yellow-t-40per: rgba(255, 196, 2, 0.4);
  --yellow-t-45per: rgba(255, 196, 2, 0.45);
  --yellow-t-50per: rgba(255, 196, 2, 0.5);
  --yellow-t-55per: rgba(255, 196, 2, 0.55);
  /*green 123, 224, 0*/
  --green-t-5per: rgba(123, 224, 0, 0.05);
  --green-t-10per: rgba(123, 224, 0, 0.1);
  --green-t-15per: rgba(123, 224, 0, 0.15);
  --green-t-20per: rgba(123, 224, 0, 0.2);
  --green-t-25per: rgba(123, 224, 0, 0.25);
  --green-t-30per: rgba(123, 224, 0, 0.3);
  --green-t-35per: rgba(123, 224, 0, 0.35);
  --green-t-40per: rgba(123, 224, 0, 0.4);
  --green-t-45per: rgba(123, 224, 0, 0.45);
  --green-t-50per: rgba(123, 224, 0, 0.5);
  --green-t-55per: rgba(123, 224, 0, 0.55);
  /*forest 0, 137, 30*/
  --forest-t-5per: rgba(0, 137, 30, 0.05);
  --forest-t-10per: rgba(0, 137, 30, 0.1);
  --forest-t-15per: rgba(0, 137, 30, 0.15);
  --forest-t-20per: rgba(0, 137, 30, 0.2);
  --forest-t-25per: rgba(0, 137, 30, 0.25);
  --forest-t-30per: rgba(0, 137, 30, 0.3);
  --forest-t-35per: rgba(0, 137, 30, 0.35);
  --forest-t-40per: rgba(0, 137, 30, 0.4);
  --forest-t-45per: rgba(0, 137, 30, 0.45);
  --forest-t-50per: rgba(0, 137, 30, 0.5);
  --forest-t-55per: rgba(0, 137, 30, 0.55);
  /*mint 24, 206, 197*/
  --mint-t-5per: rgba(24, 206, 197, 0.05);
  --mint-t-10per: rgba(24, 206, 197, 0.1);
  --mint-t-15per: rgba(24, 206, 197, 0.15);
  --mint-t-20per: rgba(24, 206, 197, 0.2);
  --mint-t-25per: rgba(24, 206, 197, 0.25);
  --mint-t-30per: rgba(24, 206, 197, 0.3);
  --mint-t-35per: rgba(24, 206, 197, 0.35);
  --mint-t-40per: rgba(24, 206, 197, 0.4);
  --mint-t-45per: rgba(24, 206, 197, 0.45);
  --mint-t-50per: rgba(24, 206, 197, 0.5);
  --mint-t-55per: rgba(24, 206, 197, 0.55);
  /*cyan 59, 193, 255*/
  --cyan-t-5per: rgba(59, 193, 255, 0.05);
  --cyan-t-10per: rgba(59, 193, 255, 0.1);
  --cyan-t-15per: rgba(59, 193, 255, 0.15);
  --cyan-t-20per: rgba(59, 193, 255, 0.2);
  --cyan-t-25per: rgba(59, 193, 255, 0.25);
  --cyan-t-30per: rgba(59, 193, 255, 0.3);
  --cyan-t-35per: rgba(59, 193, 255, 0.35);
  --cyan-t-40per: rgba(59, 193, 255, 0.4);
  --cyan-t-45per: rgba(59, 193, 255, 0.45);
  --cyan-t-50per: rgba(59, 193, 255, 0.5);
  --cyan-t-55per: rgba(59, 193, 255, 0.55);
  /*charcoal 108, 114, 117*/
  --charcoal-t-5per: rgba(108, 114, 117, 0.05);
  --charcoal-t-10per: rgba(108, 114, 117, 0.1);
  --charcoal-t-15per: rgba(108, 114, 117, 0.15);
  --charcoal-t-20per: rgba(108, 114, 117, 0.2);
  --charcoal-t-25per: rgba(108, 114, 117, 0.25);
  --charcoal-t-30per: rgba(108, 114, 117, 0.3);
  --charcoal-t-35per: rgba(108, 114, 117, 0.35);
  --charcoal-t-40per: rgba(108, 114, 117, 0.4);
  --charcoal-t-45per: rgba(108, 114, 117, 0.45);
  --charcoal-t-50per: rgba(108, 114, 117, 0.5);
  --charcoal-t-55per: rgba(108, 114, 117, 0.55);
  /*gray 155, 164, 171*/
  --gray-t-5per: rgba(155, 164, 171, 0.05);
  --gray-t-10per: rgba(155, 164, 171, 0.1);
  --gray-t-15per: rgba(155, 164, 171, 0.15);
  --gray-t-20per: rgba(155, 164, 171, 0.2);
  --gray-t-25per: rgba(155, 164, 171, 0.25);
  --gray-t-30per: rgba(155, 164, 171, 0.3);
  --gray-t-35per: rgba(155, 164, 171, 0.35);
  --gray-t-40per: rgba(155, 164, 171, 0.4);
  --gray-t-45per: rgba(155, 164, 171, 0.45);
  --gray-t-50per: rgba(155, 164, 171, 0.5);
  --gray-t-55per: rgba(155, 164, 171, 0.55);
  /*black 0, 0, 0*/
  --black-t-5per: rgba(0, 0, 0, 0.05);
  --black-t-10per: rgba(0, 0, 0, 0.1);
  --black-t-15per: rgba(0, 0, 0, 0.15);
  --black-t-20per: rgba(0, 0, 0, 0.2);
  --black-t-25per: rgba(0, 0, 0, 0.25);
  --black-t-30per: rgba(0, 0, 0, 0.3);
  --black-t-35per: rgba(0, 0, 0, 0.35);
  --black-t-40per: rgba(0, 0, 0, 0.4);
  --black-t-45per: rgba(0, 0, 0, 0.45);
  --black-t-50per: rgba(0, 0, 0, 0.5);
  --black-t-55per: rgba(0, 0, 0, 0.55);
  /*white 255, 255, 255*/
  --white-t-5per: rgba(255, 255, 255, 0.05);
  --white-t-10per: rgba(255, 255, 255, 0.1);
  --white-t-15per: rgba(255, 255, 255, 0.15);
  --white-t-20per: rgba(255, 255, 255, 0.2);
  --white-t-25per: rgba(255, 255, 255, 0.25);
  --white-t-30per: rgba(255, 255, 255, 0.3);
  --white-t-35per: rgba(255, 255, 255, 0.35);
  --white-t-40per: rgba(255, 255, 255, 0.4);
  --white-t-45per: rgba(255, 255, 255, 0.45);
  --white-t-50per: rgba(255, 255, 255, 0.5);
  --white-t-55per: rgba(255, 255, 255, 0.55);
  --gradient-1:linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.75) 100%);
  --gradient-2:linear-gradient(180deg, rgba(61, 67, 72, 0.95) 0%, rgba(61, 67, 72, 0.75) 100%) ;
}

[class*=btn-] {
  height: 48px;
  display: inline-flex;
  align-items: center;
  border-radius: 10px;
  font-size: 18px;
  color: #fff;
  border: 0;
  padding: 0;
  font-weight: 600;
  position: relative;
  border-width: 1px;
  border-style: solid;
  border-color: rgba(255, 255, 255, 0);
}
[class*=btn-] > * {
  padding: 0 3px;
  color: inherit;
  font-size: inherit;
  white-space: nowrap;
}
[class*=btn-] > i {
  font-size: calc(100% + 4px);
  color: inherit;
}
[class*=btn-] > span {
  font-weight: inherit;
  line-height: 1;
}
[class*=btn-]:disabled, [class*=btn-]:disabled:hover {
  background-color: var(--gray-t-40per);
  color: var(--gray-t-55per);
}
.dark-mode [class*=btn-]:disabled, .dark-mode [class*=btn-]:disabled:hover {
  background-color: var(--gray-t-40per);
  color: var(--gray-t-55per);
}

.btn-brand {
  background-color: var(--brand-500);
  border-color: var(--brand-500);
}
.btn-brand:hover, .btn-brand.hover {
  background-color: var(--brand-600);
}

.btn-blue {
  background-color: var(--blue-500);
  border-color: var(--blue-500);
}
.btn-blue:hover, .btn-blue.hover {
  background-color: var(--blue-600);
}

.btn-lavender {
  background-color: var(--lavender-500);
  border-color: var(--lavender-500);
}
.btn-lavender:hover, .btn-lavender.hover {
  background-color: var(--lavender-600);
}

.btn-red {
  background-color: var(--red-500);
  border-color: var(--red-500);
}
.btn-red:hover, .btn-red.hover {
  background-color: var(--red-600);
}

.btn-orange {
  background-color: var(--orange-500);
  border-color: var(--orange-500);
}
.btn-orange:hover, .btn-orange.hover {
  background-color: var(--orange-600);
}

.btn-lime {
  background-color: var(--lime-500);
  border-color: var(--lime-500);
}
.btn-lime:hover, .btn-lime.hover {
  background-color: var(--lime-600);
}

.btn-navy {
  background-color: var(--navy-500);
  border-color: var(--navy-500);
}
.btn-navy:hover, .btn-navy.hover {
  background-color: var(--navy-600);
}

.btn-indigo {
  background-color: var(--indigo-500);
  border-color: var(--indigo-500);
}
.btn-indigo:hover, .btn-indigo.hover {
  background-color: var(--indigo-600);
}

.btn-purple {
  background-color: var(--purple-500);
  border-color: var(--purple-500);
}
.btn-purple:hover, .btn-purple.hover {
  background-color: var(--purple-600);
}

.btn-yellow {
  background-color: var(--yellow-500);
  border-color: var(--yellow-500);
}
.btn-yellow:hover, .btn-yellow.hover {
  background-color: var(--yellow-600);
}

.btn-green {
  background-color: var(--green-500);
  border-color: var(--green-500);
}
.btn-green:hover, .btn-green.hover {
  background-color: var(--green-600);
}

.btn-forest {
  background-color: var(--forest-500);
  border-color: var(--forest-500);
}
.btn-forest:hover, .btn-forest.hover {
  background-color: var(--forest-600);
}

.btn-mint {
  background-color: var(--mint-500);
  border-color: var(--mint-500);
}
.btn-mint:hover, .btn-mint.hover {
  background-color: var(--mint-600);
}

.btn-cyan {
  background-color: var(--cyan-500);
  border-color: var(--cyan-500);
}
.btn-cyan:hover, .btn-cyan.hover {
  background-color: var(--cyan-600);
}

.btn-charcoal {
  background-color: var(--charcoal-500);
  border-color: var(--charcoal-500);
}
.btn-charcoal:hover, .btn-charcoal.hover {
  background-color: var(--charcoal-600);
}

.btn-gray {
  background-color: var(--gray-500);
  border-color: var(--gray-500);
}
.btn-gray:hover, .btn-gray.hover {
  background-color: var(--gray-600);
}

.btn-black {
  background-color: var(--black-500);
  border-color: var(--black-500);
}
.btn-black:hover, .btn-black.hover {
  background-color: var(--black-600);
}

.btn-white {
  background-color: var(--white-500);
  border-color: var(--white-500);
}
.btn-white:hover, .btn-white.hover {
  background-color: var(--white-600);
}

[class*=-outline] {
  border-style: solid;
  background-color: #fff;
}
[class*=-outline]:disabled, [class*=-outline]:disabled:hover {
  background-color: rgba(255, 255, 255, 0);
  border-color: var(--gray-t-40per);
  color: var(--gray-t-40per);
}
.dark-mode [class*=-outline]:disabled, .dark-mode [class*=-outline]:disabled:hover {
  background-color: rgba(255, 255, 255, 0);
  border-color: var(--gray-t-40per);
  color: var(--gray-t-40per);
}

.btn-brand-outline {
  border-color: var(--brand-500);
  color: var(--brand-500);
  /*dark-mode*/
}
.btn-brand-outline:hover, .btn-brand-outline.hover {
  background-color: var(--brand-t-5per);
  color: var(--brand-600);
}
.dark-mode .btn-brand-outline {
  color: var(--brand-400);
}
.dark-mode .btn-brand-outline:hover, .dark-mode .btn-brand-outline.hover {
  background-color: var(--brand-t-15per);
  border-color: var(--brand-600);
  color: var(--brand-600);
}

.btn-blue-outline {
  border-color: var(--blue-500);
  color: var(--blue-500);
  /*dark-mode*/
}
.btn-blue-outline:hover, .btn-blue-outline.hover {
  background-color: var(--blue-t-5per);
  color: var(--blue-600);
}
.dark-mode .btn-blue-outline {
  color: var(--blue-400);
}
.dark-mode .btn-blue-outline:hover, .dark-mode .btn-blue-outline.hover {
  background-color: var(--blue-t-15per);
  border-color: var(--blue-600);
  color: var(--blue-600);
}

.btn-lavender-outline {
  border-color: var(--lavender-500);
  color: var(--lavender-500);
  /*dark-mode*/
}
.btn-lavender-outline:hover, .btn-lavender-outline.hover {
  background-color: var(--lavender-t-5per);
  color: var(--lavender-600);
}
.dark-mode .btn-lavender-outline {
  color: var(--lavender-400);
}
.dark-mode .btn-lavender-outline:hover, .dark-mode .btn-lavender-outline.hover {
  background-color: var(--lavender-t-15per);
  border-color: var(--lavender-600);
  color: var(--lavender-600);
}

.btn-red-outline {
  border-color: var(--red-500);
  color: var(--red-500);
  /*dark-mode*/
}
.btn-red-outline:hover, .btn-red-outline.hover {
  background-color: var(--red-t-5per);
  color: var(--red-600);
}
.dark-mode .btn-red-outline {
  color: var(--red-400);
}
.dark-mode .btn-red-outline:hover, .dark-mode .btn-red-outline.hover {
  background-color: var(--red-t-15per);
  border-color: var(--red-600);
  color: var(--red-600);
}

.btn-orange-outline {
  border-color: var(--orange-500);
  color: var(--orange-500);
  /*dark-mode*/
}
.btn-orange-outline:hover, .btn-orange-outline.hover {
  background-color: var(--orange-t-5per);
  color: var(--orange-600);
}
.dark-mode .btn-orange-outline {
  color: var(--orange-400);
}
.dark-mode .btn-orange-outline:hover, .dark-mode .btn-orange-outline.hover {
  background-color: var(--orange-t-15per);
  border-color: var(--orange-600);
  color: var(--orange-600);
}

.btn-lime-outline {
  border-color: var(--lime-500);
  color: var(--lime-500);
  /*dark-mode*/
}
.btn-lime-outline:hover, .btn-lime-outline.hover {
  background-color: var(--lime-t-5per);
  color: var(--lime-600);
}
.dark-mode .btn-lime-outline {
  color: var(--lime-400);
}
.dark-mode .btn-lime-outline:hover, .dark-mode .btn-lime-outline.hover {
  background-color: var(--lime-t-15per);
  border-color: var(--lime-600);
  color: var(--lime-600);
}

.btn-navy-outline {
  border-color: var(--navy-500);
  color: var(--navy-500);
  /*dark-mode*/
}
.btn-navy-outline:hover, .btn-navy-outline.hover {
  background-color: var(--navy-t-5per);
  color: var(--navy-600);
}
.dark-mode .btn-navy-outline {
  color: var(--navy-400);
}
.dark-mode .btn-navy-outline:hover, .dark-mode .btn-navy-outline.hover {
  background-color: var(--navy-t-15per);
  border-color: var(--navy-600);
  color: var(--navy-600);
}

.btn-indigo-outline {
  border-color: var(--indigo-500);
  color: var(--indigo-500);
  /*dark-mode*/
}
.btn-indigo-outline:hover, .btn-indigo-outline.hover {
  background-color: var(--indigo-t-5per);
  color: var(--indigo-600);
}
.dark-mode .btn-indigo-outline {
  color: var(--indigo-400);
}
.dark-mode .btn-indigo-outline:hover, .dark-mode .btn-indigo-outline.hover {
  background-color: var(--indigo-t-15per);
  border-color: var(--indigo-600);
  color: var(--indigo-600);
}

.btn-purple-outline {
  border-color: var(--purple-500);
  color: var(--purple-500);
  /*dark-mode*/
}
.btn-purple-outline:hover, .btn-purple-outline.hover {
  background-color: var(--purple-t-5per);
  color: var(--purple-600);
}
.dark-mode .btn-purple-outline {
  color: var(--purple-400);
}
.dark-mode .btn-purple-outline:hover, .dark-mode .btn-purple-outline.hover {
  background-color: var(--purple-t-15per);
  border-color: var(--purple-600);
  color: var(--purple-600);
}

.btn-yellow-outline {
  border-color: var(--yellow-500);
  color: var(--yellow-500);
  /*dark-mode*/
}
.btn-yellow-outline:hover, .btn-yellow-outline.hover {
  background-color: var(--yellow-t-5per);
  color: var(--yellow-600);
}
.dark-mode .btn-yellow-outline {
  color: var(--yellow-400);
}
.dark-mode .btn-yellow-outline:hover, .dark-mode .btn-yellow-outline.hover {
  background-color: var(--yellow-t-15per);
  border-color: var(--yellow-600);
  color: var(--yellow-600);
}

.btn-green-outline {
  border-color: var(--green-500);
  color: var(--green-500);
  /*dark-mode*/
}
.btn-green-outline:hover, .btn-green-outline.hover {
  background-color: var(--green-t-5per);
  color: var(--green-600);
}
.dark-mode .btn-green-outline {
  color: var(--green-400);
}
.dark-mode .btn-green-outline:hover, .dark-mode .btn-green-outline.hover {
  background-color: var(--green-t-15per);
  border-color: var(--green-600);
  color: var(--green-600);
}

.btn-forest-outline {
  border-color: var(--forest-500);
  color: var(--forest-500);
  /*dark-mode*/
}
.btn-forest-outline:hover, .btn-forest-outline.hover {
  background-color: var(--forest-t-5per);
  color: var(--forest-600);
}
.dark-mode .btn-forest-outline {
  color: var(--forest-400);
}
.dark-mode .btn-forest-outline:hover, .dark-mode .btn-forest-outline.hover {
  background-color: var(--forest-t-15per);
  border-color: var(--forest-600);
  color: var(--forest-600);
}

.btn-mint-outline {
  border-color: var(--mint-500);
  color: var(--mint-500);
  /*dark-mode*/
}
.btn-mint-outline:hover, .btn-mint-outline.hover {
  background-color: var(--mint-t-5per);
  color: var(--mint-600);
}
.dark-mode .btn-mint-outline {
  color: var(--mint-400);
}
.dark-mode .btn-mint-outline:hover, .dark-mode .btn-mint-outline.hover {
  background-color: var(--mint-t-15per);
  border-color: var(--mint-600);
  color: var(--mint-600);
}

.btn-cyan-outline {
  border-color: var(--cyan-500);
  color: var(--cyan-500);
  /*dark-mode*/
}
.btn-cyan-outline:hover, .btn-cyan-outline.hover {
  background-color: var(--cyan-t-5per);
  color: var(--cyan-600);
}
.dark-mode .btn-cyan-outline {
  color: var(--cyan-400);
}
.dark-mode .btn-cyan-outline:hover, .dark-mode .btn-cyan-outline.hover {
  background-color: var(--cyan-t-15per);
  border-color: var(--cyan-600);
  color: var(--cyan-600);
}

.btn-charcoal-outline {
  border-color: var(--charcoal-500);
  color: var(--charcoal-500);
  /*dark-mode*/
}
.btn-charcoal-outline:hover, .btn-charcoal-outline.hover {
  background-color: var(--charcoal-t-5per);
  color: var(--charcoal-600);
}
.dark-mode .btn-charcoal-outline {
  color: var(--charcoal-400);
}
.dark-mode .btn-charcoal-outline:hover, .dark-mode .btn-charcoal-outline.hover {
  background-color: var(--charcoal-t-15per);
  border-color: var(--charcoal-600);
  color: var(--charcoal-600);
}

.btn-gray-outline {
  border-color: var(--gray-500);
  color: var(--gray-500);
  /*dark-mode*/
}
.btn-gray-outline:hover, .btn-gray-outline.hover {
  background-color: var(--gray-t-5per);
  color: var(--gray-600);
}
.dark-mode .btn-gray-outline {
  color: var(--gray-400);
}
.dark-mode .btn-gray-outline:hover, .dark-mode .btn-gray-outline.hover {
  background-color: var(--gray-t-15per);
  border-color: var(--gray-600);
  color: var(--gray-600);
}

.btn-black-outline {
  border-color: var(--black-500);
  color: var(--black-500);
  /*dark-mode*/
}
.btn-black-outline:hover, .btn-black-outline.hover {
  background-color: var(--black-t-5per);
  color: var(--black-600);
}
.dark-mode .btn-black-outline {
  color: var(--black-400);
}
.dark-mode .btn-black-outline:hover, .dark-mode .btn-black-outline.hover {
  background-color: var(--black-t-15per);
  border-color: var(--black-600);
  color: var(--black-600);
}

.btn-white-outline {
  border-color: var(--white-500);
  color: var(--white-500);
  /*dark-mode*/
}
.btn-white-outline:hover, .btn-white-outline.hover {
  background-color: var(--white-t-5per);
  color: var(--white-600);
}
.dark-mode .btn-white-outline {
  color: var(--white-400);
}
.dark-mode .btn-white-outline:hover, .dark-mode .btn-white-outline.hover {
  background-color: var(--white-t-15per);
  border-color: var(--white-600);
  color: var(--white-600);
}

[class*=-outline-gray] {
  border-color: var(--gray-300);
}
[class*=-outline-gray]:disabled, [class*=-outline-gray]:disabled:hover {
  border-color: var(--gray-t-40per);
  color: var(--gray-t-55per);
  background-color: var(--gray-t-25per);
}
.dark-mode [class*=-outline-gray] {
  border-color: var(--gray-t-40per);
}
.dark-mode [class*=-outline-gray]:disabled, .dark-mode [class*=-outline-gray]:disabled:hover {
  border-color: var(--gray-t-40per);
  color: var(--gray-t-55per);
  background-color: var(--gray-t-25per);
}

.btn-brand-outline-gray {
  color: var(--brand-500);
  /*dark-mode*/
}
.btn-brand-outline-gray:hover, .btn-brand-outline-gray.hover {
  border-color: var(--brand-500);
  background-color: var(--brand-t-5per);
  color: var(--brand-600);
}
.dark-mode .btn-brand-outline-gray {
  color: var(--brand-400);
  background-color: var(--gray-900);
}
.dark-mode .btn-brand-outline-gray:hover, .dark-mode .btn-brand-outline-gray.hover {
  background-color: var(--brand-t-15per);
  border-color: var(--brand-600);
  color: var(--brand-600);
}

.btn-blue-outline-gray {
  color: var(--blue-500);
  /*dark-mode*/
}
.btn-blue-outline-gray:hover, .btn-blue-outline-gray.hover {
  border-color: var(--blue-500);
  background-color: var(--blue-t-5per);
  color: var(--blue-600);
}
.dark-mode .btn-blue-outline-gray {
  color: var(--blue-400);
  background-color: var(--gray-900);
}
.dark-mode .btn-blue-outline-gray:hover, .dark-mode .btn-blue-outline-gray.hover {
  background-color: var(--blue-t-15per);
  border-color: var(--blue-600);
  color: var(--blue-600);
}

.btn-lavender-outline-gray {
  color: var(--lavender-500);
  /*dark-mode*/
}
.btn-lavender-outline-gray:hover, .btn-lavender-outline-gray.hover {
  border-color: var(--lavender-500);
  background-color: var(--lavender-t-5per);
  color: var(--lavender-600);
}
.dark-mode .btn-lavender-outline-gray {
  color: var(--lavender-400);
  background-color: var(--gray-900);
}
.dark-mode .btn-lavender-outline-gray:hover, .dark-mode .btn-lavender-outline-gray.hover {
  background-color: var(--lavender-t-15per);
  border-color: var(--lavender-600);
  color: var(--lavender-600);
}

.btn-red-outline-gray {
  color: var(--red-500);
  /*dark-mode*/
}
.btn-red-outline-gray:hover, .btn-red-outline-gray.hover {
  border-color: var(--red-500);
  background-color: var(--red-t-5per);
  color: var(--red-600);
}
.dark-mode .btn-red-outline-gray {
  color: var(--red-400);
  background-color: var(--gray-900);
}
.dark-mode .btn-red-outline-gray:hover, .dark-mode .btn-red-outline-gray.hover {
  background-color: var(--red-t-15per);
  border-color: var(--red-600);
  color: var(--red-600);
}

.btn-orange-outline-gray {
  color: var(--orange-500);
  /*dark-mode*/
}
.btn-orange-outline-gray:hover, .btn-orange-outline-gray.hover {
  border-color: var(--orange-500);
  background-color: var(--orange-t-5per);
  color: var(--orange-600);
}
.dark-mode .btn-orange-outline-gray {
  color: var(--orange-400);
  background-color: var(--gray-900);
}
.dark-mode .btn-orange-outline-gray:hover, .dark-mode .btn-orange-outline-gray.hover {
  background-color: var(--orange-t-15per);
  border-color: var(--orange-600);
  color: var(--orange-600);
}

.btn-lime-outline-gray {
  color: var(--lime-500);
  /*dark-mode*/
}
.btn-lime-outline-gray:hover, .btn-lime-outline-gray.hover {
  border-color: var(--lime-500);
  background-color: var(--lime-t-5per);
  color: var(--lime-600);
}
.dark-mode .btn-lime-outline-gray {
  color: var(--lime-400);
  background-color: var(--gray-900);
}
.dark-mode .btn-lime-outline-gray:hover, .dark-mode .btn-lime-outline-gray.hover {
  background-color: var(--lime-t-15per);
  border-color: var(--lime-600);
  color: var(--lime-600);
}

.btn-navy-outline-gray {
  color: var(--navy-500);
  /*dark-mode*/
}
.btn-navy-outline-gray:hover, .btn-navy-outline-gray.hover {
  border-color: var(--navy-500);
  background-color: var(--navy-t-5per);
  color: var(--navy-600);
}
.dark-mode .btn-navy-outline-gray {
  color: var(--navy-400);
  background-color: var(--gray-900);
}
.dark-mode .btn-navy-outline-gray:hover, .dark-mode .btn-navy-outline-gray.hover {
  background-color: var(--navy-t-15per);
  border-color: var(--navy-600);
  color: var(--navy-600);
}

.btn-indigo-outline-gray {
  color: var(--indigo-500);
  /*dark-mode*/
}
.btn-indigo-outline-gray:hover, .btn-indigo-outline-gray.hover {
  border-color: var(--indigo-500);
  background-color: var(--indigo-t-5per);
  color: var(--indigo-600);
}
.dark-mode .btn-indigo-outline-gray {
  color: var(--indigo-400);
  background-color: var(--gray-900);
}
.dark-mode .btn-indigo-outline-gray:hover, .dark-mode .btn-indigo-outline-gray.hover {
  background-color: var(--indigo-t-15per);
  border-color: var(--indigo-600);
  color: var(--indigo-600);
}

.btn-purple-outline-gray {
  color: var(--purple-500);
  /*dark-mode*/
}
.btn-purple-outline-gray:hover, .btn-purple-outline-gray.hover {
  border-color: var(--purple-500);
  background-color: var(--purple-t-5per);
  color: var(--purple-600);
}
.dark-mode .btn-purple-outline-gray {
  color: var(--purple-400);
  background-color: var(--gray-900);
}
.dark-mode .btn-purple-outline-gray:hover, .dark-mode .btn-purple-outline-gray.hover {
  background-color: var(--purple-t-15per);
  border-color: var(--purple-600);
  color: var(--purple-600);
}

.btn-yellow-outline-gray {
  color: var(--yellow-500);
  /*dark-mode*/
}
.btn-yellow-outline-gray:hover, .btn-yellow-outline-gray.hover {
  border-color: var(--yellow-500);
  background-color: var(--yellow-t-5per);
  color: var(--yellow-600);
}
.dark-mode .btn-yellow-outline-gray {
  color: var(--yellow-400);
  background-color: var(--gray-900);
}
.dark-mode .btn-yellow-outline-gray:hover, .dark-mode .btn-yellow-outline-gray.hover {
  background-color: var(--yellow-t-15per);
  border-color: var(--yellow-600);
  color: var(--yellow-600);
}

.btn-green-outline-gray {
  color: var(--green-500);
  /*dark-mode*/
}
.btn-green-outline-gray:hover, .btn-green-outline-gray.hover {
  border-color: var(--green-500);
  background-color: var(--green-t-5per);
  color: var(--green-600);
}
.dark-mode .btn-green-outline-gray {
  color: var(--green-400);
  background-color: var(--gray-900);
}
.dark-mode .btn-green-outline-gray:hover, .dark-mode .btn-green-outline-gray.hover {
  background-color: var(--green-t-15per);
  border-color: var(--green-600);
  color: var(--green-600);
}

.btn-forest-outline-gray {
  color: var(--forest-500);
  /*dark-mode*/
}
.btn-forest-outline-gray:hover, .btn-forest-outline-gray.hover {
  border-color: var(--forest-500);
  background-color: var(--forest-t-5per);
  color: var(--forest-600);
}
.dark-mode .btn-forest-outline-gray {
  color: var(--forest-400);
  background-color: var(--gray-900);
}
.dark-mode .btn-forest-outline-gray:hover, .dark-mode .btn-forest-outline-gray.hover {
  background-color: var(--forest-t-15per);
  border-color: var(--forest-600);
  color: var(--forest-600);
}

.btn-mint-outline-gray {
  color: var(--mint-500);
  /*dark-mode*/
}
.btn-mint-outline-gray:hover, .btn-mint-outline-gray.hover {
  border-color: var(--mint-500);
  background-color: var(--mint-t-5per);
  color: var(--mint-600);
}
.dark-mode .btn-mint-outline-gray {
  color: var(--mint-400);
  background-color: var(--gray-900);
}
.dark-mode .btn-mint-outline-gray:hover, .dark-mode .btn-mint-outline-gray.hover {
  background-color: var(--mint-t-15per);
  border-color: var(--mint-600);
  color: var(--mint-600);
}

.btn-cyan-outline-gray {
  color: var(--cyan-500);
  /*dark-mode*/
}
.btn-cyan-outline-gray:hover, .btn-cyan-outline-gray.hover {
  border-color: var(--cyan-500);
  background-color: var(--cyan-t-5per);
  color: var(--cyan-600);
}
.dark-mode .btn-cyan-outline-gray {
  color: var(--cyan-400);
  background-color: var(--gray-900);
}
.dark-mode .btn-cyan-outline-gray:hover, .dark-mode .btn-cyan-outline-gray.hover {
  background-color: var(--cyan-t-15per);
  border-color: var(--cyan-600);
  color: var(--cyan-600);
}

.btn-charcoal-outline-gray {
  color: var(--charcoal-500);
  /*dark-mode*/
}
.btn-charcoal-outline-gray:hover, .btn-charcoal-outline-gray.hover {
  border-color: var(--charcoal-500);
  background-color: var(--charcoal-t-5per);
  color: var(--charcoal-600);
}
.dark-mode .btn-charcoal-outline-gray {
  color: var(--charcoal-400);
  background-color: var(--gray-900);
}
.dark-mode .btn-charcoal-outline-gray:hover, .dark-mode .btn-charcoal-outline-gray.hover {
  background-color: var(--charcoal-t-15per);
  border-color: var(--charcoal-600);
  color: var(--charcoal-600);
}

.btn-gray-outline-gray {
  color: var(--gray-500);
  /*dark-mode*/
}
.btn-gray-outline-gray:hover, .btn-gray-outline-gray.hover {
  border-color: var(--gray-500);
  background-color: var(--gray-t-5per);
  color: var(--gray-600);
}
.dark-mode .btn-gray-outline-gray {
  color: var(--gray-400);
  background-color: var(--gray-900);
}
.dark-mode .btn-gray-outline-gray:hover, .dark-mode .btn-gray-outline-gray.hover {
  background-color: var(--gray-t-15per);
  border-color: var(--gray-600);
  color: var(--gray-600);
}

.btn-black-outline-gray {
  color: var(--black-500);
  /*dark-mode*/
}
.btn-black-outline-gray:hover, .btn-black-outline-gray.hover {
  border-color: var(--black-500);
  background-color: var(--black-t-5per);
  color: var(--black-600);
}
.dark-mode .btn-black-outline-gray {
  color: var(--black-400);
  background-color: var(--gray-900);
}
.dark-mode .btn-black-outline-gray:hover, .dark-mode .btn-black-outline-gray.hover {
  background-color: var(--black-t-15per);
  border-color: var(--black-600);
  color: var(--black-600);
}

.btn-white-outline-gray {
  color: var(--white-500);
  /*dark-mode*/
}
.btn-white-outline-gray:hover, .btn-white-outline-gray.hover {
  border-color: var(--white-500);
  background-color: var(--white-t-5per);
  color: var(--white-600);
}
.dark-mode .btn-white-outline-gray {
  color: var(--white-400);
  background-color: var(--gray-900);
}
.dark-mode .btn-white-outline-gray:hover, .dark-mode .btn-white-outline-gray.hover {
  background-color: var(--white-t-15per);
  border-color: var(--white-600);
  color: var(--white-600);
}

[class*=-subtle] {
  /*dark-mode*/
}
[class*=-subtle]:disabled, [class*=-subtle]:disabled:hover {
  background-color: var(--gray-t-25per);
  color: var(--gray-t-55per);
}
.dark-mode [class*=-subtle]:disabled, .dark-mode [class*=-subtle]:disabled:hover {
  background-color: var(--gray-t-25per);
  color: var(--gray-t-55per);
}

.btn-brand-subtle {
  background-color: var(--brand-t-10per);
  color: var(--brand-500);
  /*dark-mode*/
}
.btn-brand-subtle:hover, .btn-brand-subtle.hover {
  background-color: var(--brand-t-15per);
}
.dark-mode .btn-brand-subtle {
  background-color: var(--brand-t-20per);
}
.dark-mode .btn-brand-subtle:hover, .dark-mode .btn-brand-subtle.hover {
  background-color: var(--brand-t-35per);
}

.btn-blue-subtle {
  background-color: var(--blue-t-10per);
  color: var(--blue-500);
  /*dark-mode*/
}
.btn-blue-subtle:hover, .btn-blue-subtle.hover {
  background-color: var(--blue-t-15per);
}
.dark-mode .btn-blue-subtle {
  background-color: var(--blue-t-20per);
}
.dark-mode .btn-blue-subtle:hover, .dark-mode .btn-blue-subtle.hover {
  background-color: var(--blue-t-35per);
}

.btn-lavender-subtle {
  background-color: var(--lavender-t-10per);
  color: var(--lavender-500);
  /*dark-mode*/
}
.btn-lavender-subtle:hover, .btn-lavender-subtle.hover {
  background-color: var(--lavender-t-15per);
}
.dark-mode .btn-lavender-subtle {
  background-color: var(--lavender-t-20per);
}
.dark-mode .btn-lavender-subtle:hover, .dark-mode .btn-lavender-subtle.hover {
  background-color: var(--lavender-t-35per);
}

.btn-red-subtle {
  background-color: var(--red-t-10per);
  color: var(--red-500);
  /*dark-mode*/
}
.btn-red-subtle:hover, .btn-red-subtle.hover {
  background-color: var(--red-t-15per);
}
.dark-mode .btn-red-subtle {
  background-color: var(--red-t-20per);
}
.dark-mode .btn-red-subtle:hover, .dark-mode .btn-red-subtle.hover {
  background-color: var(--red-t-35per);
}

.btn-orange-subtle {
  background-color: var(--orange-t-10per);
  color: var(--orange-500);
  /*dark-mode*/
}
.btn-orange-subtle:hover, .btn-orange-subtle.hover {
  background-color: var(--orange-t-15per);
}
.dark-mode .btn-orange-subtle {
  background-color: var(--orange-t-20per);
}
.dark-mode .btn-orange-subtle:hover, .dark-mode .btn-orange-subtle.hover {
  background-color: var(--orange-t-35per);
}

.btn-lime-subtle {
  background-color: var(--lime-t-10per);
  color: var(--lime-500);
  /*dark-mode*/
}
.btn-lime-subtle:hover, .btn-lime-subtle.hover {
  background-color: var(--lime-t-15per);
}
.dark-mode .btn-lime-subtle {
  background-color: var(--lime-t-20per);
}
.dark-mode .btn-lime-subtle:hover, .dark-mode .btn-lime-subtle.hover {
  background-color: var(--lime-t-35per);
}

.btn-navy-subtle {
  background-color: var(--navy-t-10per);
  color: var(--navy-500);
  /*dark-mode*/
}
.btn-navy-subtle:hover, .btn-navy-subtle.hover {
  background-color: var(--navy-t-15per);
}
.dark-mode .btn-navy-subtle {
  background-color: var(--navy-t-20per);
}
.dark-mode .btn-navy-subtle:hover, .dark-mode .btn-navy-subtle.hover {
  background-color: var(--navy-t-35per);
}

.btn-indigo-subtle {
  background-color: var(--indigo-t-10per);
  color: var(--indigo-500);
  /*dark-mode*/
}
.btn-indigo-subtle:hover, .btn-indigo-subtle.hover {
  background-color: var(--indigo-t-15per);
}
.dark-mode .btn-indigo-subtle {
  background-color: var(--indigo-t-20per);
}
.dark-mode .btn-indigo-subtle:hover, .dark-mode .btn-indigo-subtle.hover {
  background-color: var(--indigo-t-35per);
}

.btn-purple-subtle {
  background-color: var(--purple-t-10per);
  color: var(--purple-500);
  /*dark-mode*/
}
.btn-purple-subtle:hover, .btn-purple-subtle.hover {
  background-color: var(--purple-t-15per);
}
.dark-mode .btn-purple-subtle {
  background-color: var(--purple-t-20per);
}
.dark-mode .btn-purple-subtle:hover, .dark-mode .btn-purple-subtle.hover {
  background-color: var(--purple-t-35per);
}

.btn-yellow-subtle {
  background-color: var(--yellow-t-10per);
  color: var(--yellow-500);
  /*dark-mode*/
}
.btn-yellow-subtle:hover, .btn-yellow-subtle.hover {
  background-color: var(--yellow-t-15per);
}
.dark-mode .btn-yellow-subtle {
  background-color: var(--yellow-t-20per);
}
.dark-mode .btn-yellow-subtle:hover, .dark-mode .btn-yellow-subtle.hover {
  background-color: var(--yellow-t-35per);
}

.btn-green-subtle {
  background-color: var(--green-t-10per);
  color: var(--green-500);
  /*dark-mode*/
}
.btn-green-subtle:hover, .btn-green-subtle.hover {
  background-color: var(--green-t-15per);
}
.dark-mode .btn-green-subtle {
  background-color: var(--green-t-20per);
}
.dark-mode .btn-green-subtle:hover, .dark-mode .btn-green-subtle.hover {
  background-color: var(--green-t-35per);
}

.btn-forest-subtle {
  background-color: var(--forest-t-10per);
  color: var(--forest-500);
  /*dark-mode*/
}
.btn-forest-subtle:hover, .btn-forest-subtle.hover {
  background-color: var(--forest-t-15per);
}
.dark-mode .btn-forest-subtle {
  background-color: var(--forest-t-20per);
}
.dark-mode .btn-forest-subtle:hover, .dark-mode .btn-forest-subtle.hover {
  background-color: var(--forest-t-35per);
}

.btn-mint-subtle {
  background-color: var(--mint-t-10per);
  color: var(--mint-500);
  /*dark-mode*/
}
.btn-mint-subtle:hover, .btn-mint-subtle.hover {
  background-color: var(--mint-t-15per);
}
.dark-mode .btn-mint-subtle {
  background-color: var(--mint-t-20per);
}
.dark-mode .btn-mint-subtle:hover, .dark-mode .btn-mint-subtle.hover {
  background-color: var(--mint-t-35per);
}

.btn-cyan-subtle {
  background-color: var(--cyan-t-10per);
  color: var(--cyan-500);
  /*dark-mode*/
}
.btn-cyan-subtle:hover, .btn-cyan-subtle.hover {
  background-color: var(--cyan-t-15per);
}
.dark-mode .btn-cyan-subtle {
  background-color: var(--cyan-t-20per);
}
.dark-mode .btn-cyan-subtle:hover, .dark-mode .btn-cyan-subtle.hover {
  background-color: var(--cyan-t-35per);
}

.btn-charcoal-subtle {
  background-color: var(--charcoal-t-10per);
  color: var(--charcoal-500);
  /*dark-mode*/
}
.btn-charcoal-subtle:hover, .btn-charcoal-subtle.hover {
  background-color: var(--charcoal-t-15per);
}
.dark-mode .btn-charcoal-subtle {
  background-color: var(--charcoal-t-20per);
}
.dark-mode .btn-charcoal-subtle:hover, .dark-mode .btn-charcoal-subtle.hover {
  background-color: var(--charcoal-t-35per);
}

.btn-gray-subtle {
  background-color: var(--gray-t-10per);
  color: var(--gray-500);
  /*dark-mode*/
}
.btn-gray-subtle:hover, .btn-gray-subtle.hover {
  background-color: var(--gray-t-15per);
}
.dark-mode .btn-gray-subtle {
  background-color: var(--gray-t-20per);
}
.dark-mode .btn-gray-subtle:hover, .dark-mode .btn-gray-subtle.hover {
  background-color: var(--gray-t-35per);
}

.btn-black-subtle {
  background-color: var(--black-t-10per);
  color: var(--black-500);
  /*dark-mode*/
}
.btn-black-subtle:hover, .btn-black-subtle.hover {
  background-color: var(--black-t-15per);
}
.dark-mode .btn-black-subtle {
  background-color: var(--black-t-20per);
}
.dark-mode .btn-black-subtle:hover, .dark-mode .btn-black-subtle.hover {
  background-color: var(--black-t-35per);
}

.btn-white-subtle {
  background-color: var(--white-t-10per);
  color: var(--white-500);
  /*dark-mode*/
}
.btn-white-subtle:hover, .btn-white-subtle.hover {
  background-color: var(--white-t-15per);
}
.dark-mode .btn-white-subtle {
  background-color: var(--white-t-20per);
}
.dark-mode .btn-white-subtle:hover, .dark-mode .btn-white-subtle.hover {
  background-color: var(--white-t-35per);
}

[class*=-named] {
  background-color: rgba(255, 255, 255, 0);
  /*dark-mode*/
}
[class*=-named]:disabled, [class*=-named]:disabled:hover {
  color: var(--gray-t-55per);
  background-color: rgba(255, 255, 255, 0);
}
.dark-mode [class*=-named]:disabled, .dark-mode [class*=-named]:disabled:hover {
  color: var(--gray-t-55per);
  background-color: rgba(255, 255, 255, 0);
}

.btn-brand-named {
  color: var(--brand-500);
  /*dark-mode*/
}
.btn-brand-named:hover, .btn-brand-named.hover {
  color: var(--brand-600);
}
.dark-mode .btn-brand-named {
  color: var(--brand-400);
}
.dark-mode .btn-brand-named:hover, .dark-mode .btn-brand-named.hover {
  color: var(--brand-500);
}

.btn-blue-named {
  color: var(--blue-500);
  /*dark-mode*/
}
.btn-blue-named:hover, .btn-blue-named.hover {
  color: var(--blue-600);
}
.dark-mode .btn-blue-named {
  color: var(--blue-400);
}
.dark-mode .btn-blue-named:hover, .dark-mode .btn-blue-named.hover {
  color: var(--blue-500);
}

.btn-lavender-named {
  color: var(--lavender-500);
  /*dark-mode*/
}
.btn-lavender-named:hover, .btn-lavender-named.hover {
  color: var(--lavender-600);
}
.dark-mode .btn-lavender-named {
  color: var(--lavender-400);
}
.dark-mode .btn-lavender-named:hover, .dark-mode .btn-lavender-named.hover {
  color: var(--lavender-500);
}

.btn-red-named {
  color: var(--red-500);
  /*dark-mode*/
}
.btn-red-named:hover, .btn-red-named.hover {
  color: var(--red-600);
}
.dark-mode .btn-red-named {
  color: var(--red-400);
}
.dark-mode .btn-red-named:hover, .dark-mode .btn-red-named.hover {
  color: var(--red-500);
}

.btn-orange-named {
  color: var(--orange-500);
  /*dark-mode*/
}
.btn-orange-named:hover, .btn-orange-named.hover {
  color: var(--orange-600);
}
.dark-mode .btn-orange-named {
  color: var(--orange-400);
}
.dark-mode .btn-orange-named:hover, .dark-mode .btn-orange-named.hover {
  color: var(--orange-500);
}

.btn-lime-named {
  color: var(--lime-500);
  /*dark-mode*/
}
.btn-lime-named:hover, .btn-lime-named.hover {
  color: var(--lime-600);
}
.dark-mode .btn-lime-named {
  color: var(--lime-400);
}
.dark-mode .btn-lime-named:hover, .dark-mode .btn-lime-named.hover {
  color: var(--lime-500);
}

.btn-navy-named {
  color: var(--navy-500);
  /*dark-mode*/
}
.btn-navy-named:hover, .btn-navy-named.hover {
  color: var(--navy-600);
}
.dark-mode .btn-navy-named {
  color: var(--navy-400);
}
.dark-mode .btn-navy-named:hover, .dark-mode .btn-navy-named.hover {
  color: var(--navy-500);
}

.btn-indigo-named {
  color: var(--indigo-500);
  /*dark-mode*/
}
.btn-indigo-named:hover, .btn-indigo-named.hover {
  color: var(--indigo-600);
}
.dark-mode .btn-indigo-named {
  color: var(--indigo-400);
}
.dark-mode .btn-indigo-named:hover, .dark-mode .btn-indigo-named.hover {
  color: var(--indigo-500);
}

.btn-purple-named {
  color: var(--purple-500);
  /*dark-mode*/
}
.btn-purple-named:hover, .btn-purple-named.hover {
  color: var(--purple-600);
}
.dark-mode .btn-purple-named {
  color: var(--purple-400);
}
.dark-mode .btn-purple-named:hover, .dark-mode .btn-purple-named.hover {
  color: var(--purple-500);
}

.btn-yellow-named {
  color: var(--yellow-500);
  /*dark-mode*/
}
.btn-yellow-named:hover, .btn-yellow-named.hover {
  color: var(--yellow-600);
}
.dark-mode .btn-yellow-named {
  color: var(--yellow-400);
}
.dark-mode .btn-yellow-named:hover, .dark-mode .btn-yellow-named.hover {
  color: var(--yellow-500);
}

.btn-green-named {
  color: var(--green-500);
  /*dark-mode*/
}
.btn-green-named:hover, .btn-green-named.hover {
  color: var(--green-600);
}
.dark-mode .btn-green-named {
  color: var(--green-400);
}
.dark-mode .btn-green-named:hover, .dark-mode .btn-green-named.hover {
  color: var(--green-500);
}

.btn-forest-named {
  color: var(--forest-500);
  /*dark-mode*/
}
.btn-forest-named:hover, .btn-forest-named.hover {
  color: var(--forest-600);
}
.dark-mode .btn-forest-named {
  color: var(--forest-400);
}
.dark-mode .btn-forest-named:hover, .dark-mode .btn-forest-named.hover {
  color: var(--forest-500);
}

.btn-mint-named {
  color: var(--mint-500);
  /*dark-mode*/
}
.btn-mint-named:hover, .btn-mint-named.hover {
  color: var(--mint-600);
}
.dark-mode .btn-mint-named {
  color: var(--mint-400);
}
.dark-mode .btn-mint-named:hover, .dark-mode .btn-mint-named.hover {
  color: var(--mint-500);
}

.btn-cyan-named {
  color: var(--cyan-500);
  /*dark-mode*/
}
.btn-cyan-named:hover, .btn-cyan-named.hover {
  color: var(--cyan-600);
}
.dark-mode .btn-cyan-named {
  color: var(--cyan-400);
}
.dark-mode .btn-cyan-named:hover, .dark-mode .btn-cyan-named.hover {
  color: var(--cyan-500);
}

.btn-charcoal-named {
  color: var(--charcoal-500);
  /*dark-mode*/
}
.btn-charcoal-named:hover, .btn-charcoal-named.hover {
  color: var(--charcoal-600);
}
.dark-mode .btn-charcoal-named {
  color: var(--charcoal-400);
}
.dark-mode .btn-charcoal-named:hover, .dark-mode .btn-charcoal-named.hover {
  color: var(--charcoal-500);
}

.btn-gray-named {
  color: var(--gray-500);
  /*dark-mode*/
}
.btn-gray-named:hover, .btn-gray-named.hover {
  color: var(--gray-600);
}
.dark-mode .btn-gray-named {
  color: var(--gray-400);
}
.dark-mode .btn-gray-named:hover, .dark-mode .btn-gray-named.hover {
  color: var(--gray-500);
}

.btn-black-named {
  color: var(--black-500);
  /*dark-mode*/
}
.btn-black-named:hover, .btn-black-named.hover {
  color: var(--black-600);
}
.dark-mode .btn-black-named {
  color: var(--black-400);
}
.dark-mode .btn-black-named:hover, .dark-mode .btn-black-named.hover {
  color: var(--black-500);
}

.btn-white-named {
  color: var(--white-500);
  /*dark-mode*/
}
.btn-white-named:hover, .btn-white-named.hover {
  color: var(--white-600);
}
.dark-mode .btn-white-named {
  color: var(--white-400);
}
.dark-mode .btn-white-named:hover, .dark-mode .btn-white-named.hover {
  color: var(--white-500);
}

.btn-lime {
  color: var(--gray-950);
}

.btn-lime-outline,
.btn-lime-outline-gray,
.btn-lime-subtle,
.btn-lime-named {
  color: var(--lime-700);
}

.btn-green {
  color: var(--gray-950);
}

.btn-green-outline,
.btn-green-outline-gray,
.btn-green-subtle,
.btn-green-named {
  color: var(--green-700);
}

.btn-mint {
  color: var(--gray-950);
}

.btn-mint-outline,
.btn-mint-outline-gray,
.btn-mint-subtle,
.btn-mint-named {
  color: var(--mint-700);
}

.btn-cyan {
  color: var(--gray-950);
}

.btn-cyan-outline,
.btn-cyan-outline-gray,
.btn-cyan-subtle,
.btn-cyan-named {
  color: var(--cyan-700);
}

.btn-orange {
  color: var(--gray-950);
}

.btn-orange-outline,
.btn-orange-outline-gray,
.btn-orange-subtle,
.btn-orange-named {
  color: var(--orange-700);
}

.btn-yellow {
  color: var(--gray-950);
}

.btn-yellow-outline,
.btn-yellow-outline-gray,
.btn-yellow-subtle,
.btn-yellow-named {
  color: var(--yellow-700);
}

.bs-xl {
  font-size: 20px;
  height: 56px;
  padding-left: 16px;
  padding-right: 16px;
  border-radius: 12px;
  border-width: 1.5px;
  font-weight: 700;
  box-sizing: border-box;
}
.bs-xl > * {
  padding-left: 4px;
  padding-right: 4px;
}
.bs-xl > i {
  font-size: calc(100% + 2px);
}
.bs-xl.only-icon {
  padding-left: 13px;
  padding-right: 13px;
}
.bs-xl.only-icon > i {
  padding: 0;
  font-size: 28px;
}

.bs-l {
  font-size: 18px;
  height: 44px;
  padding-left: 13px;
  padding-right: 13px;
  border-radius: 10px;
  border-width: 1.5px;
  font-weight: 700;
  box-sizing: border-box;
}
.bs-l > * {
  padding-left: 3px;
  padding-right: 3px;
}
.bs-l > i {
  font-size: calc(100% + 2px);
}
.bs-l.only-icon {
  padding-left: 10.5px;
  padding-right: 10.5px;
}
.bs-l.only-icon > i {
  padding: 0;
  font-size: 21px;
}

.bs-m {
  font-size: 15px;
  height: 32px;
  padding-left: 11px;
  padding-right: 11px;
  border-radius: 8px;
  border-width: 1px;
  font-weight: 600;
  box-sizing: border-box;
}
.bs-m > * {
  padding-left: 3px;
  padding-right: 3px;
}
.bs-m > i {
  font-size: calc(100% + 3px);
}
.bs-m.only-icon {
  padding-left: 7.5px;
  padding-right: 7.5px;
}
.bs-m.only-icon > i {
  padding: 0;
  font-size: 15px;
}

.bs-s {
  font-size: 12px;
  height: 24px;
  padding-left: 10px;
  padding-right: 10px;
  border-radius: 6px;
  border-width: 1px;
  font-weight: 600;
  box-sizing: border-box;
}
.bs-s > * {
  padding-left: 2px;
  padding-right: 2px;
}
.bs-s > i {
  font-size: calc(100% + 2px);
}
.bs-s.only-icon {
  padding-left: 4px;
  padding-right: 4px;
}
.bs-s.only-icon > i {
  padding: 0;
  font-size: 14px;
}

.bs-xs {
  font-size: 10px;
  height: 20px;
  padding-left: 6px;
  padding-right: 6px;
  border-radius: 4px;
  border-width: 1px;
  font-weight: 600;
  box-sizing: border-box;
}
.bs-xs > * {
  padding-left: 2px;
  padding-right: 2px;
}
.bs-xs > i {
  font-size: calc(100% + 1px);
}
.bs-xs.only-icon {
  padding-left: 4px;
  padding-right: 4px;
}
.bs-xs.only-icon > i {
  padding: 0;
  font-size: 10px;
}

.bs-mobile {
  font-size: 16px;
  height: 42px;
  padding-left: 13px;
  padding-right: 13px;
  border-radius: 10px;
  border-width: 1px;
  font-weight: 700;
  box-sizing: border-box;
}
.bs-mobile > * {
  padding-left: 3px;
  padding-right: 3px;
}
.bs-mobile > i {
  font-size: calc(100% + 2px);
}
.bs-mobile.only-icon {
  padding-left: 11px;
  padding-right: 11px;
}
.bs-mobile.only-icon > i {
  padding: 0;
  font-size: 21px;
}

@media (min-width: 1280px) {
  .bs-md-xl {
    font-size: 20px;
    height: 56px;
    padding-left: 16px;
    padding-right: 16px;
    border-radius: 12px;
    border-width: 1.5px;
    font-weight: 700;
    box-sizing: border-box;
  }
  .bs-md-xl > * {
    padding-left: 4px;
    padding-right: 4px;
  }
  .bs-md-xl > i {
    font-size: calc(100% + 2px);
  }
  .bs-md-xl.only-icon {
    padding-left: 14px;
    padding-right: 14px;
  }
  .bs-md-xl.only-icon[class*=-outline] {
    padding-left: 13px;
    padding-right: 13px;
  }
  .bs-md-l {
    font-size: 18px;
    height: 44px;
    padding-left: 13px;
    padding-right: 13px;
    border-radius: 10px;
    border-width: 1.5px;
    font-weight: 700;
    box-sizing: border-box;
  }
  .bs-md-l > * {
    padding-left: 3px;
    padding-right: 3px;
  }
  .bs-md-l > i {
    font-size: calc(100% + 2px);
  }
  .bs-md-l.only-icon {
    padding-left: 11.5px;
    padding-right: 11.5px;
  }
  .bs-md-l.only-icon[class*=-outline] {
    padding-left: 10.5px;
    padding-right: 10.5px;
  }
  .bs-md-m {
    font-size: 15px;
    height: 32px;
    padding-left: 11px;
    padding-right: 11px;
    border-radius: 8px;
    border-width: 1px;
    font-weight: 600;
    box-sizing: border-box;
  }
  .bs-md-m > * {
    padding-left: 3px;
    padding-right: 3px;
  }
  .bs-md-m > i {
    font-size: calc(100% + 3px);
  }
  .bs-md-m.only-icon {
    padding-left: 8px;
    padding-right: 8px;
  }
  .bs-md-m.only-icon[class*=-outline] {
    padding-left: 7px;
    padding-right: 7px;
  }
  .bs-md-s {
    font-size: 12px;
    height: 24px;
    padding-left: 10px;
    padding-right: 10px;
    border-radius: 6px;
    border-width: 1px;
    font-weight: 600;
    box-sizing: border-box;
  }
  .bs-md-s > * {
    padding-left: 2px;
    padding-right: 2px;
  }
  .bs-md-s > i {
    font-size: calc(100% + 2px);
  }
  .bs-md-s.only-icon {
    padding-left: 4.5px;
    padding-right: 4.5px;
  }
  .bs-md-s.only-icon[class*=-outline] {
    padding-left: 3.5px;
    padding-right: 3.5px;
  }
  .bs-md-xs {
    font-size: 10px;
    height: 20px;
    padding-left: 6px;
    padding-right: 6px;
    border-radius: 4px;
    border-width: 1px;
    font-weight: 600;
    box-sizing: border-box;
  }
  .bs-md-xs > * {
    padding-left: 2px;
    padding-right: 2px;
  }
  .bs-md-xs > i {
    font-size: calc(100% + 1px);
  }
  .bs-md-xs.only-icon {
    padding-left: 4.5px;
    padding-right: 4.5px;
  }
  .bs-md-xs.only-icon[class*=-outline] {
    padding-left: 3.5px;
    padding-right: 3.5px;
  }
  .bs-md-mobile {
    font-size: 16px;
    height: 42px;
    padding-left: 13px;
    padding-right: 13px;
    border-radius: 10px;
    border-width: 1px;
    font-weight: 700;
    box-sizing: border-box;
  }
  .bs-md-mobile > * {
    padding-left: 3px;
    padding-right: 3px;
  }
  .bs-md-mobile > i {
    font-size: calc(100% + 2px);
  }
  .bs-md-mobile.only-icon {
    padding-left: 11.5px;
    padding-right: 11.5px;
  }
  .bs-md-mobile.only-icon[class*=-outline] {
    padding-left: 10.5px;
    padding-right: 10.5px;
  }
}
@media (min-width: 1440px) {
  .bs-xl-xl {
    font-size: 20px;
    height: 56px;
    padding-left: 16px;
    padding-right: 16px;
    border-radius: 12px;
    border-width: 1.5px;
    font-weight: 700;
    box-sizing: border-box;
  }
  .bs-xl-xl > * {
    padding-left: 4px;
    padding-right: 4px;
  }
  .bs-xl-xl > i {
    font-size: calc(100% + 2px);
  }
  .bs-xl-xl.only-icon {
    padding-left: 14px;
    padding-right: 14px;
  }
  .bs-xl-xl.only-icon[class*=-outline] {
    padding-left: 13px;
    padding-right: 13px;
  }
  .bs-xl-l {
    font-size: 18px;
    height: 44px;
    padding-left: 13px;
    padding-right: 13px;
    border-radius: 10px;
    border-width: 1.5px;
    font-weight: 700;
    box-sizing: border-box;
  }
  .bs-xl-l > * {
    padding-left: 3px;
    padding-right: 3px;
  }
  .bs-xl-l > i {
    font-size: calc(100% + 2px);
  }
  .bs-xl-l.only-icon {
    padding-left: 11.5px;
    padding-right: 11.5px;
  }
  .bs-xl-l.only-icon[class*=-outline] {
    padding-left: 10.5px;
    padding-right: 10.5px;
  }
  .bs-xl-m {
    font-size: 15px;
    height: 32px;
    padding-left: 11px;
    padding-right: 11px;
    border-radius: 8px;
    border-width: 1px;
    font-weight: 600;
    box-sizing: border-box;
  }
  .bs-xl-m > * {
    padding-left: 3px;
    padding-right: 3px;
  }
  .bs-xl-m > i {
    font-size: calc(100% + 3px);
  }
  .bs-xl-m.only-icon {
    padding-left: 8px;
    padding-right: 8px;
  }
  .bs-xl-m.only-icon[class*=-outline] {
    padding-left: 7px;
    padding-right: 7px;
  }
  .bs-xl-s {
    font-size: 12px;
    height: 24px;
    padding-left: 10px;
    padding-right: 10px;
    border-radius: 6px;
    border-width: 1px;
    font-weight: 600;
    box-sizing: border-box;
  }
  .bs-xl-s > * {
    padding-left: 2px;
    padding-right: 2px;
  }
  .bs-xl-s > i {
    font-size: calc(100% + 2px);
  }
  .bs-xl-s.only-icon {
    padding-left: 4.5px;
    padding-right: 4.5px;
  }
  .bs-xl-s.only-icon[class*=-outline] {
    padding-left: 3.5px;
    padding-right: 3.5px;
  }
  .bs-xl-xs {
    font-size: 10px;
    height: 20px;
    padding-left: 6px;
    padding-right: 6px;
    border-radius: 4px;
    border-width: 1px;
    font-weight: 600;
    box-sizing: border-box;
  }
  .bs-xl-xs > * {
    padding-left: 2px;
    padding-right: 2px;
  }
  .bs-xl-xs > i {
    font-size: calc(100% + 1px);
  }
  .bs-xl-xs.only-icon {
    padding-left: 4.5px;
    padding-right: 4.5px;
  }
  .bs-xl-xs.only-icon[class*=-outline] {
    padding-left: 3.5px;
    padding-right: 3.5px;
  }
  .bs-xl-mobile {
    font-size: 16px;
    height: 42px;
    padding-left: 13px;
    padding-right: 13px;
    border-radius: 10px;
    border-width: 1px;
    font-weight: 700;
    box-sizing: border-box;
  }
  .bs-xl-mobile > * {
    padding-left: 3px;
    padding-right: 3px;
  }
  .bs-xl-mobile > i {
    font-size: calc(100% + 2px);
  }
  .bs-xl-mobile.only-icon {
    padding-left: 11.5px;
    padding-right: 11.5px;
  }
  .bs-xl-mobile.only-icon[class*=-outline] {
    padding-left: 10.5px;
    padding-right: 10.5px;
  }
}
.btn-Ai-blue {
  background: linear-gradient(103deg, var(--blue-500) 4.83%, var(--purple-500) 104.91%);
}

.btn-black {
  background: var(--gray-950);
}
.btn-black:hover, .btn-black.hover {
  background-color: var(--gray-600);
}
.btn-black:disabled, .btn-black:disabled:hover {
  background-color: var(--gray-t-40per);
  color: var(--gray-55per);
}
.dark-mode .btn-black {
  background-color: #fff;
  color: var(--gray-950);
}
.dark-mode .btn-black:hover, .dark-mode .btn-black.hover {
  background-color: var(--gray-50);
  color: #495157;
}
.dark-mode .btn-black:disabled, .dark-mode .btn-black:disabled:hover {
  background-color: rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.2);
}
.btn-black-outline {
  border-color: var(--gray-950);
  color: var(--gray-950);
}
.btn-black-outline:hover, .btn-black-outline.hover {
  border-color: #6C7680;
  background-color: var(--black-t-5per);
}
.btn-black-outline:disabled, .btn-black-outline:disabled:hover {
  background-color: transparent;
  border-color: var(--gray-t-40per);
  color: var(--gray-t-40per);
}
.dark-mode .btn-black-outline {
  border-color: #fff;
  color: #fff;
}
.dark-mode .btn-black-outline:hover, .dark-mode .btn-black-outline.hover {
  background-color: rgba(255, 255, 255, 0.05);
  border-color: var(--gray-500);
  color: var(--gray-400);
}
.dark-mode .btn-black-outline:disabled, .dark-mode .btn-black-outline:disabled:hover {
  background-color: transparent;
  border-color: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.2);
}
.btn-black-outline-gray {
  border-color: var(--gray-300);
  color: var(--gray-950);
}
.btn-black-outline-gray:hover, .btn-black-outline-gray.hover {
  border-color: #6C7680;
  background-color: var(--black-t-5per);
}
.btn-black-outline-gray:disabled, .btn-black-outline-gray:disabled:hover {
  background-color: var(--gray-t-25per);
  border-color: var(--gray-t-40per);
  color: var(--gray-t-55per);
}
.dark-mode .btn-black-outline-gray {
  background-color: var(--gray-950);
  border-color: var(--gray-t-40per);
  color: #fff;
}
.dark-mode .btn-black-outline-gray:hover, .dark-mode .btn-black-outline-gray.hover {
  background-color: rgba(255, 255, 255, 0.05);
  border-color: var(--gray-500);
  color: var(--gray-400);
}
.dark-mode .btn-black-outline-gray:disabled, .dark-mode .btn-black-outline-gray:disabled:hover {
  background-color: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.2);
}
.btn-black-subtle {
  background-color: var(--black-t-10per);
  color: var(--gray-950);
}
.btn-black-subtle:hover, .btn-black-subtle.hover {
  background-color: var(--black-t-15per);
  color: var(--gray-800);
}
.btn-black-subtle:disabled, .btn-black-subtle:disabled:hover {
  background-color: var(--gray-t-25per);
  color: var(--gray-t-55per);
}
.dark-mode .btn-black-subtle {
  background-color: var(--white-t-10per);
  color: #fff;
}
.dark-mode .btn-black-subtle:hover, .dark-mode .btn-black-subtle.hover {
  background-color: var(--white-t-15per);
  color: var(--gray-400);
}
.dark-mode .btn-black-subtle:disabled, .dark-mode .btn-black-subtle:disabled:hover {
  background-color: rgba(255, 255, 255, 0.07);
  color: var(--white-t-20per);
}
.btn-black-named {
  background: transparent;
  color: var(--gray-950);
}
.btn-black-named:hover, .btn-black-named.hover {
  color: var(--gray-800);
}
.btn-black-named:disabled, .btn-black-named:disabled:hover {
  color: var(--gray-t-55per);
}
.dark-mode .btn-black-named {
  color: #fff;
}
.dark-mode .btn-black-named:hover, .dark-mode .btn-black-named.hover {
  color: var(--gray-400);
}
.dark-mode .btn-black-named:disabled, .dark-mode .btn-black-named:disabled:hover {
  color: var(--white-t-20per);
}

/*
.btn-black{
  background:var(--gray-950);
  &:hover,&.hover{
    background-color:var(--gray-600);
  }
  &:disabled,&:disabled:hover{
    background-color:var(--gray-t-40per);
    color:var(--gray-55per);
  }
  .dark-mode &{
    background-color: #fff;
    color:var(--gray-950);
    &:hover,&.hover{
      background-color:var(--gray-50);
      color:#495157;
    }
    &:disabled,&:disabled:hover{
      background-color:rgba(255, 255, 255, 0.07);
      color:rgba(255, 255, 255, 0.20);
    }
  }

}
.btn-black-outline{
  border-color:var(--gray-950);
  color:var(--gray-950);
  &:hover,&.hover{
    border-color:#6C7680;
    background-color: var(--black-t-5per);
  }
  &:disabled,&:disabled:hover{
    background-color: #fff0;
    border-color:var(--gray-t-40per);
    color:var(--gray-t-40per); 
  }
  .dark-mode &{
    border-color: #fff;
    color:#fff;
    &:hover,&.hover{
      background-color:rgba(255, 255, 255, 0.05);
      border-color:var(--gray-500);
      color:var(--gray-400);
    }
    &:disabled,&:disabled:hover{
      background-color: #fff0;
      border-color: rgba(255, 255, 255, 0.15);
      color:rgba(255, 255, 255, 0.20);
    }
  }
}
.btn-black-outline-gray{
  border-color:var(--gray-300);
  color:var(--gray-950);
  &:hover,&.hover{
    border-color:#6C7680;
    background-color: var(--black-t-5per);
  }
  &:disabled,&:disabled:hover{
    background-color: var(--gray-t-25per);
    border-color:var(--gray-t-40per);
    color:var(--gray-t-55per); 
  }
  .dark-mode &{
    background-color: var(--gray-950);
    border-color: var(--gray-t-40per);
    color:#fff;
    &:hover,&.hover{
      background-color:rgba(255, 255, 255, 0.05);
      border-color:var(--gray-500);
      color:var(--gray-400);
    }
    &:disabled,&:disabled:hover{
      background-color: rgba(255, 255, 255, 0.07);
      border-color: rgba(255, 255, 255, 0.15);
      color:rgba(255, 255, 255, 0.20);
    }
  }


}
.btn-black-subtle{
  background-color: var(--black-t-10per);
  color:var(--gray-950);
  &:hover,&.hover{
    background-color: var(--black-t-15per);
    color:var(--gray-800);
  }
  &:disabled,&:disabled:hover{
    background-color: var(--gray-t-25per);
    color:var(--gray-t-55per); 
  }
  .dark-mode &{
    background-color:var(--white-t-10per);
    color:#fff;
    &:hover,&.hover{
      background-color:var(--white-t-15per);
      color:var(--gray-400);
    }
    &:disabled,&:disabled:hover{
      background-color: rgba(255, 255, 255, 0.07);
      color:var(--white-t-20per);
    }
  }

}
.btn-black-named{
  color:var(--gray-950);
  background:#fff0;
  &:hover,&.hover{
    color:var(--gray-800);
  }
  &:disabled,&:disabled:hover{
    color:var(--gray-t-55per); 
  }
  .dark-mode &{
    color:#fff;
    &:hover,&.hover{
      color:var(--gray-400);
    }
    &:disabled,&:disabled:hover{
      color:var(--white-t-20per);
    }
  }
}
  */
.btn-white {
  background: #fff;
  color: var(--gray-950);
}
.btn-white:hover, .btn-white.hover {
  background-color: #F4F5F6;
  color: #495157;
}
.btn-white:disabled, .btn-white:disabled:hover {
  color: var(--gray-55per);
  background-color: var(--gray-t-40per);
}
.dark-mode .btn-white {
  background-color: var(--gray-950);
  color: #fff;
}
.dark-mode .btn-white:hover, .dark-mode .btn-white.hover {
  background-color: #262B2E;
  color: var(--gray-100);
}
.dark-mode .btn-white:disabled, .dark-mode .btn-white:disabled:hover {
  background: rgba(255, 255, 255, 0.07);
  color: var(--white-t-20per);
}
.btn-white-outline {
  border-color: #fff;
  color: #fff;
}
.btn-white-outline:hover, .btn-white-outline.hover {
  border-color: var(--gray-100);
  color: var(--gray-100);
}
.btn-white-outline:disabled, .btn-white-outline:disabled:hover {
  color: var(--gray-t-55per);
  border-color: var(--gray-t-40per);
}
.dark-mode .btn-white-outline:hover, .dark-mode .btn-white-outline.hover {
  border-color: #6C7680;
  color: var(--gray-400);
}
.dark-mode .btn-white-outline:disabled, .dark-mode .btn-white-outline:disabled:hover {
  border-color: var(--white-t-15per);
}
.btn-white-outline-gray {
  border-color: var(--gray-300);
  color: var(--gray-950);
  background-color: #fff;
}
.btn-white-outline-gray:hover, .btn-white-outline-gray.hover {
  background-color: var(--gray-t-5per);
  color: var(--gray-100);
}
.btn-white-outline-gray:disabled, .btn-white-outline-gray:disabled:hover {
  color: var(--gray-t-55per);
  border-color: var(--gray-t-40per);
  background-color: var(--gray-t-25per);
}
.dark-mode .btn-white-outline-gray {
  background-color: var(--gray-900);
  border-color: var(--gray-t-40per);
  color: #fff;
}
.dark-mode .btn-white-outline-gray:hover, .dark-mode .btn-white-outline-gray.hover {
  background-color: var(--white-t-5per);
  border-color: #6C7680;
  color: var(--gray-400);
}
.dark-mode .btn-white-outline-gray:disabled, .dark-mode .btn-white-outline-gray:disabled:hover {
  border-color: var(--white-t-15per);
  background: rgba(255, 255, 255, 0.07);
  color: var(--white-t-20per);
}
.btn-white-subtle {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}
.btn-white-subtle:hover, .btn-white-subtle.hover {
  color: var(--gray-t-10per);
  background: rgba(255, 255, 255, 0.15);
}
.btn-white-subtle:disabled, .btn-white-subtle:disabled:hover {
  color: var(--gray-t-55per);
  background-color: var(--gray-t-25per);
}
.dark-mode .btn-white-subtle {
  background-color: var(--white-t-10per);
  color: #fff;
}
.dark-mode .btn-white-subtle:hover, .dark-mode .btn-white-subtle.hover {
  background-color: var(--white-t-15per);
  color: var(--gray-400);
}
.dark-mode .btn-white-subtle:disabled, .dark-mode .btn-white-subtle:disabled:hover {
  background: rgba(255, 255, 255, 0.07);
  color: var(--white-t-20per);
}
.btn-white-named {
  color: #fff;
}
.btn-white-named:hover, .btn-white-named.hover {
  color: var(--gray-100);
}
.btn-white-named:disabled, .btn-white-named:disabled:hover {
  color: var(--gray-t-55per);
}
.dark-mode .btn-white-named {
  color: #fff;
}
.dark-mode .btn-white-named:hover, .dark-mode .btn-white-named.hover {
  color: var(--gray-100);
}
.dark-mode .btn-white-named:disabled, .dark-mode .btn-white-named:disabled:hover {
  color: var(--gray-t-55per);
}/*# sourceMappingURL=button.css.map */