@spaceone/design-system/css/style.css

SpaceONE Design System

/* Tailwind CSS */

/* Tailwind CSS */

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers.
 */

body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */

main {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
  -webkit-box-sizing: content-box;
          box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */

a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */

img {
  border-style: none;
}

/* Forms
   ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input { /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select { /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

legend {
  -webkit-box-sizing: border-box;
          box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */

textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */

[type="checkbox"],
[type="radio"] {
  -webkit-box-sizing: border-box;
          box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */

details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
  display: list-item;
}

/* Misc
   ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */

template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */

[hidden] {
  display: none;
}

/**
 * Manually forked from SUIT CSS Base: https://github.com/suitcss/base
 * A thin layer on top of normalize.css that provides a starting point more
 * suitable for web applications.
 */

/**
 * Removes the default spacing and border for appropriate elements.
 */

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

button {
  background-color: transparent;
  background-image: none;
  padding: 0;
}

/**
 * Work around a Firefox/IE bug where the transparent `button` background
 * results in a loss of the default `button` focus styles.
 */

button:focus {
  outline: 1px dotted;
  outline: 5px auto -webkit-focus-ring-color;
}

fieldset {
  margin: 0;
  padding: 0;
}

ol,
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/**
 * Tailwind custom reset styles
 */

/**
 * 1. Use the user's configured `sans` font-family (with Tailwind's default
 *    sans-serif font stack as a fallback) as a sane default.
 * 2. Use Tailwind's default "normal" line-height so the user isn't forced
 *    to override it to ensure consistency even when using the default theme.
 */

html {
  font-family: Noto Sans; /* 1 */
  line-height: 1.5; /* 2 */
}

/**
 * 1. Prevent padding and border from affecting element width.
 *
 *    We used to set this in the html element and inherit from
 *    the parent element for everything else. This caused issues
 *    in shadow-dom-enhanced elements like <details> where the content
 *    is wrapped by a div with box-sizing set to `content-box`.
 *
 *    https://github.com/mozdevs/cssremedy/issues/4
 *
 *
 * 2. Allow adding a border to an element by just adding a border-width.
 *
 *    By default, the way the browser specifies that an element should have no
 *    border is by setting it's border-style to `none` in the user-agent
 *    stylesheet.
 *
 *    In order to easily add borders to elements by just setting the `border-width`
 *    property, we change the default border-style for all elements to `solid`, and
 *    use border-width to hide them instead. This way our `border` utilities only
 *    need to set the `border-width` property instead of the entire `border`
 *    shorthand, making our border utilities much more straightforward to compose.
 *
 *    https://github.com/tailwindcss/tailwindcss/pull/116
 */

*,
::before,
::after {
  -webkit-box-sizing: border-box;
          box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: #CED0D6; /* 2 */
}

/*
 * Ensure horizontal rules are visible by default
 */

hr {
  border-top-width: 1px;
}

/**
 * Undo the `border-style: none` reset that Normalize applies to images so that
 * our `border-{width}` utilities have the expected effect.
 *
 * The Normalize reset is unnecessary for us since we default the border-width
 * to 0 on all elements.
 *
 * https://github.com/tailwindcss/tailwindcss/issues/362
 */

img {
  border-style: solid;
}

textarea {
  resize: vertical;
}

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
  color: #a0aec0;
}

input::-moz-placeholder, textarea::-moz-placeholder {
  color: #a0aec0;
}

input:-ms-input-placeholder, textarea:-ms-input-placeholder {
  color: #a0aec0;
}

input::-ms-input-placeholder, textarea::-ms-input-placeholder {
  color: #a0aec0;
}

input::placeholder,
textarea::placeholder {
  color: #a0aec0;
}

button,
[role="button"] {
  cursor: pointer;
}

table {
  border-collapse: collapse;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/**
 * Reset links to optimize for opt-in styling instead of
 * opt-out.
 */

a {
  color: inherit;
  text-decoration: inherit;
}

/**
 * Reset form element properties that are easy to forget to
 * style explicitly so you don't inadvertently introduce
 * styles that deviate from your design system. These styles
 * supplement a partial reset that is already applied by
 * normalize.css.
 */

button,
input,
optgroup,
select,
textarea {
  padding: 0;
  line-height: inherit;
  color: inherit;
}

/**
 * Use the configured 'mono' font family for elements that
 * are expected to be rendered with a monospace font, falling
 * back to the system monospace stack if there is no configured
 * 'mono' font family.
 */

pre,
code,
kbd,
samp {
  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

/**
 * Make replaced elements `display: block` by default as that's
 * the behavior you want almost all of the time. Inspired by
 * CSS Remedy, with `svg` added as well.
 *
 * https://github.com/mozdevs/cssremedy/issues/14
 */

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block;
  vertical-align: middle;
}

/**
 * Constrain images and videos to the parent width and preserve
 * their instrinsic aspect ratio.
 *
 * https://github.com/mozdevs/cssremedy/issues/14
 */

img,
video {
  max-width: 100%;
  height: auto;
}

.container {
  width: 100%;
}

@media (min-width: 375px) {
  .container {
    max-width: 375px;
  }
}

@media (min-width: 478px) {
  .container {
    max-width: 478px;
  }
}

@media (min-width: 576px) {
  .container {
    max-width: 576px;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 768px;
  }
}

@media (min-width: 1024px) {
  .container {
    max-width: 1024px;
  }
}

@media (min-width: 1440px) {
  .container {
    max-width: 1440px;
  }
}

@media (min-width: 1920px) {
  .container {
    max-width: 1920px;
  }
}

@media (min-width: 2560px) {
  .container {
    max-width: 2560px;
  }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.not-sr-only {
  position: static;
  width: auto;
  height: auto;
  padding: 0;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

.\!sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border-width: 0 !important;
}

.\!not-sr-only {
  position: static !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
  clip: auto !important;
  white-space: normal !important;
}

.hover\:sr-only:hover {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.hover\:not-sr-only:hover {
  position: static;
  width: auto;
  height: auto;
  padding: 0;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

.appearance-none {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

.\!appearance-none {
  -webkit-appearance: none !important;
     -moz-appearance: none !important;
          appearance: none !important;
}

.hover\:appearance-none:hover {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

.bg-fixed {
  background-attachment: fixed;
}

.bg-local {
  background-attachment: local;
}

.bg-scroll {
  background-attachment: scroll;
}

.\!bg-fixed {
  background-attachment: fixed !important;
}

.\!bg-local {
  background-attachment: local !important;
}

.\!bg-scroll {
  background-attachment: scroll !important;
}

.hover\:bg-fixed:hover {
  background-attachment: fixed;
}

.hover\:bg-local:hover {
  background-attachment: local;
}

.hover\:bg-scroll:hover {
  background-attachment: scroll;
}

.bg-primary {
  background-color: #6638B6;
}

.bg-primaryDark {
  background-color: #3C2C84;
}

.bg-primary1 {
  background-color: #8C81D1;
}

.bg-primary2 {
  background-color: #A8A5CE;
}

.bg-primary3 {
  background-color: #EBEAF6;
}

.bg-primary4 {
  background-color: #F8F8FC;
}

.bg-secondary {
  background-color: #007EE5;
}

.bg-secondary1 {
  background-color: #43BEFF;
}

.bg-secondary2 {
  background-color: #F5F9FD;
}

.bg-alert {
  background-color: #EF3817;
}

.bg-safe {
  background-color: #60B731;
}

.bg-primary-dark {
  background-color: #3C2C84;
}

.bg-primary-1 {
  background-color: #8C81D1;
}

.bg-primary-2 {
  background-color: #A8A5CE;
}

.bg-primary-3 {
  background-color: #EBEAF6;
}

.bg-primary-4 {
  background-color: #F8F8FC;
}

.bg-secondary-1 {
  background-color: #43BEFF;
}

.bg-secondary-2 {
  background-color: #F5F9FD;
}

.bg-transparent {
  background-color: transparent;
}

.bg-black {
  background-color: #000000;
}

.bg-white {
  background-color: #FFFFFF;
}

.bg-point-violet {
  background-color: #7545FF;
}

.bg-gray-100 {
  background-color: #F7F7F7;
}

.bg-gray-200 {
  background-color: #E5E5E8;
}

.bg-gray-300 {
  background-color: #CED0D6;
}

.bg-gray-400 {
  background-color: #A7A9B2;
}

.bg-gray-500 {
  background-color: #858895;
}

.bg-gray-600 {
  background-color: #6B6E7B;
}

.bg-gray-700 {
  background-color: #5F616D;
}

.bg-gray-800 {
  background-color: #474952;
}

.bg-gray-900 {
  background-color: #222532;
}

.bg-gray {
  background-color: #858895;
}

.bg-gray-dark {
  background-color: #222532;
}

.bg-red-100 {
  background-color: #FFE8E8;
}

.bg-red-200 {
  background-color: #FFC4C4;
}

.bg-red-300 {
  background-color: #FF8F8F;
}

.bg-red-400 {
  background-color: #FF6A6A;
}

.bg-red-500 {
  background-color: #EF3817;
}

.bg-red-600 {
  background-color: #CC2C00;
}

.bg-red-700 {
  background-color: #C53030;
}

.bg-red-800 {
  background-color: #9B2C2C;
}

.bg-red-900 {
  background-color: #742A2A;
}

.bg-red {
  background-color: #EF3817;
}

.bg-coral-100 {
  background-color: #FFEBE6;
}

.bg-coral-200 {
  background-color: #FFD3C8;
}

.bg-coral-300 {
  background-color: #FFB39E;
}

.bg-coral-400 {
  background-color: #FF9476;
}

.bg-coral-500 {
  background-color: #FF7750;
}

.bg-coral-600 {
  background-color: #F55A2F;
}

.bg-coral-700 {
  background-color: #DD470F;
}

.bg-coral-800 {
  background-color: #B93E0F;
}

.bg-coral-900 {
  background-color: #8E3311;
}

.bg-coral {
  background-color: #FF7750;
}

.bg-yellow-100 {
  background-color: #FFFAE6;
}

.bg-yellow-200 {
  background-color: #FFEB99;
}

.bg-yellow-300 {
  background-color: #FFE066;
}

.bg-yellow-400 {
  background-color: #FFD633;
}

.bg-yellow-500 {
  background-color: #FFCE02;
}

.bg-yellow-600 {
  background-color: #E6B800;
}

.bg-yellow-700 {
  background-color: #CCA300;
}

.bg-yellow-800 {
  background-color: #806600;
}

.bg-yellow-900 {
  background-color: #4D3D00;
}

.bg-yellow {
  background-color: #FFCE02;
}

.bg-green-100 {
  background-color: #F9FCE9;
}

.bg-green-200 {
  background-color: #E7F3A5;
}

.bg-green-300 {
  background-color: #D5EA62;
}

.bg-green-400 {
  background-color: #C2E01E;
}

.bg-green-500 {
  background-color: #60B731;
}

.bg-green-600 {
  background-color: #3F7B1A;
}

.bg-green-700 {
  background-color: #366916;
}

.bg-green-800 {
  background-color: #203F0D;
}

.bg-green-900 {
  background-color: #162A09;
}

.bg-green {
  background-color: #60B731;
}

.bg-blue-100 {
  background-color: #F5F9FD;
}

.bg-blue-200 {
  background-color: #E9F4FF;
}

.bg-blue-300 {
  background-color: #B9DCFF;
}

.bg-blue-400 {
  background-color: #43BEFF;
}

.bg-blue-500 {
  background-color: #007EE5;
}

.bg-blue-600 {
  background-color: #0069CC;
}

.bg-blue-700 {
  background-color: #005CB3;
}

.bg-blue-800 {
  background-color: #004F99;
}

.bg-blue-900 {
  background-color: #003566;
}

.bg-blue {
  background-color: #007EE5;
}

.bg-violet-100 {
  background-color: #F8F8FC;
}

.bg-violet-200 {
  background-color: #EBEAF6;
}

.bg-violet-300 {
  background-color: #A8A5CE;
}

.bg-violet-400 {
  background-color: #8C81D1;
}

.bg-violet-500 {
  background-color: #6638B6;
}

.bg-violet-600 {
  background-color: #58309C;
}

.bg-violet-700 {
  background-color: #4D2A89;
}

.bg-violet-800 {
  background-color: #3C2C84;
}

.bg-violet-900 {
  background-color: #371E62;
}

.bg-violet {
  background-color: #6638B6;
}

.bg-peacock-100 {
  background-color: #E6FFFA;
}

.bg-peacock-200 {
  background-color: #B2F5EA;
}

.bg-peacock-300 {
  background-color: #81E6D9;
}

.bg-peacock-400 {
  background-color: #4FD1C5;
}

.bg-peacock-500 {
  background-color: #38B2AC;
}

.bg-peacock-600 {
  background-color: #319795;
}

.bg-peacock-700 {
  background-color: #2C7A7B;
}

.bg-peacock-800 {
  background-color: #285E61;
}

.bg-peacock-900 {
  background-color: #234E52;
}

.bg-peacock {
  background-color: #38B2AC;
}

.bg-indigo-100 {
  background-color: #EBF4FF;
}

.bg-indigo-200 {
  background-color: #C3DAFE;
}

.bg-indigo-300 {
  background-color: #A3BFFA;
}

.bg-indigo-400 {
  background-color: #7F9CF5;
}

.bg-indigo-500 {
  background-color: #667EEA;
}

.bg-indigo-600 {
  background-color: #5A67D8;
}

.bg-indigo-700 {
  background-color: #6439DE;
}

.bg-indigo-800 {
  background-color: #434190;
}

.bg-indigo-900 {
  background-color: #3C366B;
}

.bg-indigo {
  background-color: #667EEA;
}

.\!bg-primary {
  background-color: #6638B6 !important;
}

.\!bg-primaryDark {
  background-color: #3C2C84 !important;
}

.\!bg-primary1 {
  background-color: #8C81D1 !important;
}

.\!bg-primary2 {
  background-color: #A8A5CE !important;
}

.\!bg-primary3 {
  background-color: #EBEAF6 !important;
}

.\!bg-primary4 {
  background-color: #F8F8FC !important;
}

.\!bg-secondary {
  background-color: #007EE5 !important;
}

.\!bg-secondary1 {
  background-color: #43BEFF !important;
}

.\!bg-secondary2 {
  background-color: #F5F9FD !important;
}

.\!bg-alert {
  background-color: #EF3817 !important;
}

.\!bg-safe {
  background-color: #60B731 !important;
}

.\!bg-primary-dark {
  background-color: #3C2C84 !important;
}

.\!bg-primary-1 {
  background-color: #8C81D1 !important;
}

.\!bg-primary-2 {
  background-color: #A8A5CE !important;
}

.\!bg-primary-3 {
  background-color: #EBEAF6 !important;
}

.\!bg-primary-4 {
  background-color: #F8F8FC !important;
}

.\!bg-secondary-1 {
  background-color: #43BEFF !important;
}

.\!bg-secondary-2 {
  background-color: #F5F9FD !important;
}

.\!bg-transparent {
  background-color: transparent !important;
}

.\!bg-black {
  background-color: #000000 !important;
}

.\!bg-white {
  background-color: #FFFFFF !important;
}

.\!bg-point-violet {
  background-color: #7545FF !important;
}

.\!bg-gray-100 {
  background-color: #F7F7F7 !important;
}

.\!bg-gray-200 {
  background-color: #E5E5E8 !important;
}

.\!bg-gray-300 {
  background-color: #CED0D6 !important;
}

.\!bg-gray-400 {
  background-color: #A7A9B2 !important;
}

.\!bg-gray-500 {
  background-color: #858895 !important;
}

.\!bg-gray-600 {
  background-color: #6B6E7B !important;
}

.\!bg-gray-700 {
  background-color: #5F616D !important;
}

.\!bg-gray-800 {
  background-color: #474952 !important;
}

.\!bg-gray-900 {
  background-color: #222532 !important;
}

.\!bg-gray {
  background-color: #858895 !important;
}

.\!bg-gray-dark {
  background-color: #222532 !important;
}

.\!bg-red-100 {
  background-color: #FFE8E8 !important;
}

.\!bg-red-200 {
  background-color: #FFC4C4 !important;
}

.\!bg-red-300 {
  background-color: #FF8F8F !important;
}

.\!bg-red-400 {
  background-color: #FF6A6A !important;
}

.\!bg-red-500 {
  background-color: #EF3817 !important;
}

.\!bg-red-600 {
  background-color: #CC2C00 !important;
}

.\!bg-red-700 {
  background-color: #C53030 !important;
}

.\!bg-red-800 {
  background-color: #9B2C2C !important;
}

.\!bg-red-900 {
  background-color: #742A2A !important;
}

.\!bg-red {
  background-color: #EF3817 !important;
}

.\!bg-coral-100 {
  background-color: #FFEBE6 !important;
}

.\!bg-coral-200 {
  background-color: #FFD3C8 !important;
}

.\!bg-coral-300 {
  background-color: #FFB39E !important;
}

.\!bg-coral-400 {
  background-color: #FF9476 !important;
}

.\!bg-coral-500 {
  background-color: #FF7750 !important;
}

.\!bg-coral-600 {
  background-color: #F55A2F !important;
}

.\!bg-coral-700 {
  background-color: #DD470F !important;
}

.\!bg-coral-800 {
  background-color: #B93E0F !important;
}

.\!bg-coral-900 {
  background-color: #8E3311 !important;
}

.\!bg-coral {
  background-color: #FF7750 !important;
}

.\!bg-yellow-100 {
  background-color: #FFFAE6 !important;
}

.\!bg-yellow-200 {
  background-color: #FFEB99 !important;
}

.\!bg-yellow-300 {
  background-color: #FFE066 !important;
}

.\!bg-yellow-400 {
  background-color: #FFD633 !important;
}

.\!bg-yellow-500 {
  background-color: #FFCE02 !important;
}

.\!bg-yellow-600 {
  background-color: #E6B800 !important;
}

.\!bg-yellow-700 {
  background-color: #CCA300 !important;
}

.\!bg-yellow-800 {
  background-color: #806600 !important;
}

.\!bg-yellow-900 {
  background-color: #4D3D00 !important;
}

.\!bg-yellow {
  background-color: #FFCE02 !important;
}

.\!bg-green-100 {
  background-color: #F9FCE9 !important;
}

.\!bg-green-200 {
  background-color: #E7F3A5 !important;
}

.\!bg-green-300 {
  background-color: #D5EA62 !important;
}

.\!bg-green-400 {
  background-color: #C2E01E !important;
}

.\!bg-green-500 {
  background-color: #60B731 !important;
}

.\!bg-green-600 {
  background-color: #3F7B1A !important;
}

.\!bg-green-700 {
  background-color: #366916 !important;
}

.\!bg-green-800 {
  background-color: #203F0D !important;
}

.\!bg-green-900 {
  background-color: #162A09 !important;
}

.\!bg-green {
  background-color: #60B731 !important;
}

.\!bg-blue-100 {
  background-color: #F5F9FD !important;
}

.\!bg-blue-200 {
  background-color: #E9F4FF !important;
}

.\!bg-blue-300 {
  background-color: #B9DCFF !important;
}

.\!bg-blue-400 {
  background-color: #43BEFF !important;
}

.\!bg-blue-500 {
  background-color: #007EE5 !important;
}

.\!bg-blue-600 {
  background-color: #0069CC !important;
}

.\!bg-blue-700 {
  background-color: #005CB3 !important;
}

.\!bg-blue-800 {
  background-color: #004F99 !important;
}

.\!bg-blue-900 {
  background-color: #003566 !important;
}

.\!bg-blue {
  background-color: #007EE5 !important;
}

.\!bg-violet-100 {
  background-color: #F8F8FC !important;
}

.\!bg-violet-200 {
  background-color: #EBEAF6 !important;
}

.\!bg-violet-300 {
  background-color: #A8A5CE !important;
}

.\!bg-violet-400 {
  background-color: #8C81D1 !important;
}

.\!bg-violet-500 {
  background-color: #6638B6 !important;
}

.\!bg-violet-600 {
  background-color: #58309C !important;
}

.\!bg-violet-700 {
  background-color: #4D2A89 !important;
}

.\!bg-violet-800 {
  background-color: #3C2C84 !important;
}

.\!bg-violet-900 {
  background-color: #371E62 !important;
}

.\!bg-violet {
  background-color: #6638B6 !important;
}

.\!bg-peacock-100 {
  background-color: #E6FFFA !important;
}

.\!bg-peacock-200 {
  background-color: #B2F5EA !important;
}

.\!bg-peacock-300 {
  background-color: #81E6D9 !important;
}

.\!bg-peacock-400 {
  background-color: #4FD1C5 !important;
}

.\!bg-peacock-500 {
  background-color: #38B2AC !important;
}

.\!bg-peacock-600 {
  background-color: #319795 !important;
}

.\!bg-peacock-700 {
  background-color: #2C7A7B !important;
}

.\!bg-peacock-800 {
  background-color: #285E61 !important;
}

.\!bg-peacock-900 {
  background-color: #234E52 !important;
}

.\!bg-peacock {
  background-color: #38B2AC !important;
}

.\!bg-indigo-100 {
  background-color: #EBF4FF !important;
}

.\!bg-indigo-200 {
  background-color: #C3DAFE !important;
}

.\!bg-indigo-300 {
  background-color: #A3BFFA !important;
}

.\!bg-indigo-400 {
  background-color: #7F9CF5 !important;
}

.\!bg-indigo-500 {
  background-color: #667EEA !important;
}

.\!bg-indigo-600 {
  background-color: #5A67D8 !important;
}

.\!bg-indigo-700 {
  background-color: #6439DE !important;
}

.\!bg-indigo-800 {
  background-color: #434190 !important;
}

.\!bg-indigo-900 {
  background-color: #3C366B !important;
}

.\!bg-indigo {
  background-color: #667EEA !important;
}

.hover\:bg-primary:hover {
  background-color: #6638B6;
}

.hover\:bg-primaryDark:hover {
  background-color: #3C2C84;
}

.hover\:bg-primary1:hover {
  background-color: #8C81D1;
}

.hover\:bg-primary2:hover {
  background-color: #A8A5CE;
}

.hover\:bg-primary3:hover {
  background-color: #EBEAF6;
}

.hover\:bg-primary4:hover {
  background-color: #F8F8FC;
}

.hover\:bg-secondary:hover {
  background-color: #007EE5;
}

.hover\:bg-secondary1:hover {
  background-color: #43BEFF;
}

.hover\:bg-secondary2:hover {
  background-color: #F5F9FD;
}

.hover\:bg-alert:hover {
  background-color: #EF3817;
}

.hover\:bg-safe:hover {
  background-color: #60B731;
}

.hover\:bg-primary-dark:hover {
  background-color: #3C2C84;
}

.hover\:bg-primary-1:hover {
  background-color: #8C81D1;
}

.hover\:bg-primary-2:hover {
  background-color: #A8A5CE;
}

.hover\:bg-primary-3:hover {
  background-color: #EBEAF6;
}

.hover\:bg-primary-4:hover {
  background-color: #F8F8FC;
}

.hover\:bg-secondary-1:hover {
  background-color: #43BEFF;
}

.hover\:bg-secondary-2:hover {
  background-color: #F5F9FD;
}

.hover\:bg-transparent:hover {
  background-color: transparent;
}

.hover\:bg-black:hover {
  background-color: #000000;
}

.hover\:bg-white:hover {
  background-color: #FFFFFF;
}

.hover\:bg-point-violet:hover {
  background-color: #7545FF;
}

.hover\:bg-gray-100:hover {
  background-color: #F7F7F7;
}

.hover\:bg-gray-200:hover {
  background-color: #E5E5E8;
}

.hover\:bg-gray-300:hover {
  background-color: #CED0D6;
}

.hover\:bg-gray-400:hover {
  background-color: #A7A9B2;
}

.hover\:bg-gray-500:hover {
  background-color: #858895;
}

.hover\:bg-gray-600:hover {
  background-color: #6B6E7B;
}

.hover\:bg-gray-700:hover {
  background-color: #5F616D;
}

.hover\:bg-gray-800:hover {
  background-color: #474952;
}

.hover\:bg-gray-900:hover {
  background-color: #222532;
}

.hover\:bg-gray:hover {
  background-color: #858895;
}

.hover\:bg-gray-dark:hover {
  background-color: #222532;
}

.hover\:bg-red-100:hover {
  background-color: #FFE8E8;
}

.hover\:bg-red-200:hover {
  background-color: #FFC4C4;
}

.hover\:bg-red-300:hover {
  background-color: #FF8F8F;
}

.hover\:bg-red-400:hover {
  background-color: #FF6A6A;
}

.hover\:bg-red-500:hover {
  background-color: #EF3817;
}

.hover\:bg-red-600:hover {
  background-color: #CC2C00;
}

.hover\:bg-red-700:hover {
  background-color: #C53030;
}

.hover\:bg-red-800:hover {
  background-color: #9B2C2C;
}

.hover\:bg-red-900:hover {
  background-color: #742A2A;
}

.hover\:bg-red:hover {
  background-color: #EF3817;
}

.hover\:bg-coral-100:hover {
  background-color: #FFEBE6;
}

.hover\:bg-coral-200:hover {
  background-color: #FFD3C8;
}

.hover\:bg-coral-300:hover {
  background-color: #FFB39E;
}

.hover\:bg-coral-400:hover {
  background-color: #FF9476;
}

.hover\:bg-coral-500:hover {
  background-color: #FF7750;
}

.hover\:bg-coral-600:hover {
  background-color: #F55A2F;
}

.hover\:bg-coral-700:hover {
  background-color: #DD470F;
}

.hover\:bg-coral-800:hover {
  background-color: #B93E0F;
}

.hover\:bg-coral-900:hover {
  background-color: #8E3311;
}

.hover\:bg-coral:hover {
  background-color: #FF7750;
}

.hover\:bg-yellow-100:hover {
  background-color: #FFFAE6;
}

.hover\:bg-yellow-200:hover {
  background-color: #FFEB99;
}

.hover\:bg-yellow-300:hover {
  background-color: #FFE066;
}

.hover\:bg-yellow-400:hover {
  background-color: #FFD633;
}

.hover\:bg-yellow-500:hover {
  background-color: #FFCE02;
}

.hover\:bg-yellow-600:hover {
  background-color: #E6B800;
}

.hover\:bg-yellow-700:hover {
  background-color: #CCA300;
}

.hover\:bg-yellow-800:hover {
  background-color: #806600;
}

.hover\:bg-yellow-900:hover {
  background-color: #4D3D00;
}

.hover\:bg-yellow:hover {
  background-color: #FFCE02;
}

.hover\:bg-green-100:hover {
  background-color: #F9FCE9;
}

.hover\:bg-green-200:hover {
  background-color: #E7F3A5;
}

.hover\:bg-green-300:hover {
  background-color: #D5EA62;
}

.hover\:bg-green-400:hover {
  background-color: #C2E01E;
}

.hover\:bg-green-500:hover {
  background-color: #60B731;
}

.hover\:bg-green-600:hover {
  background-color: #3F7B1A;
}

.hover\:bg-green-700:hover {
  background-color: #366916;
}

.hover\:bg-green-800:hover {
  background-color: #203F0D;
}

.hover\:bg-green-900:hover {
  background-color: #162A09;
}

.hover\:bg-green:hover {
  background-color: #60B731;
}

.hover\:bg-blue-100:hover {
  background-color: #F5F9FD;
}

.hover\:bg-blue-200:hover {
  background-color: #E9F4FF;
}

.hover\:bg-blue-300:hover {
  background-color: #B9DCFF;
}

.hover\:bg-blue-400:hover {
  background-color: #43BEFF;
}

.hover\:bg-blue-500:hover {
  background-color: #007EE5;
}

.hover\:bg-blue-600:hover {
  background-color: #0069CC;
}

.hover\:bg-blue-700:hover {
  background-color: #005CB3;
}

.hover\:bg-blue-800:hover {
  background-color: #004F99;
}

.hover\:bg-blue-900:hover {
  background-color: #003566;
}

.hover\:bg-blue:hover {
  background-color: #007EE5;
}

.hover\:bg-violet-100:hover {
  background-color: #F8F8FC;
}

.hover\:bg-violet-200:hover {
  background-color: #EBEAF6;
}

.hover\:bg-violet-300:hover {
  background-color: #A8A5CE;
}

.hover\:bg-violet-400:hover {
  background-color: #8C81D1;
}

.hover\:bg-violet-500:hover {
  background-color: #6638B6;
}

.hover\:bg-violet-600:hover {
  background-color: #58309C;
}

.hover\:bg-violet-700:hover {
  background-color: #4D2A89;
}

.hover\:bg-violet-800:hover {
  background-color: #3C2C84;
}

.hover\:bg-violet-900:hover {
  background-color: #371E62;
}

.hover\:bg-violet:hover {
  background-color: #6638B6;
}

.hover\:bg-peacock-100:hover {
  background-color: #E6FFFA;
}

.hover\:bg-peacock-200:hover {
  background-color: #B2F5EA;
}

.hover\:bg-peacock-300:hover {
  background-color: #81E6D9;
}

.hover\:bg-peacock-400:hover {
  background-color: #4FD1C5;
}

.hover\:bg-peacock-500:hover {
  background-color: #38B2AC;
}

.hover\:bg-peacock-600:hover {
  background-color: #319795;
}

.hover\:bg-peacock-700:hover {
  background-color: #2C7A7B;
}

.hover\:bg-peacock-800:hover {
  background-color: #285E61;
}

.hover\:bg-peacock-900:hover {
  background-color: #234E52;
}

.hover\:bg-peacock:hover {
  background-color: #38B2AC;
}

.hover\:bg-indigo-100:hover {
  background-color: #EBF4FF;
}

.hover\:bg-indigo-200:hover {
  background-color: #C3DAFE;
}

.hover\:bg-indigo-300:hover {
  background-color: #A3BFFA;
}

.hover\:bg-indigo-400:hover {
  background-color: #7F9CF5;
}

.hover\:bg-indigo-500:hover {
  background-color: #667EEA;
}

.hover\:bg-indigo-600:hover {
  background-color: #5A67D8;
}

.hover\:bg-indigo-700:hover {
  background-color: #6439DE;
}

.hover\:bg-indigo-800:hover {
  background-color: #434190;
}

.hover\:bg-indigo-900:hover {
  background-color: #3C366B;
}

.hover\:bg-indigo:hover {
  background-color: #667EEA;
}

.bg-bottom {
  background-position: bottom;
}

.bg-center {
  background-position: center;
}

.bg-left {
  background-position: left;
}

.bg-left-bottom {
  background-position: left bottom;
}

.bg-left-top {
  background-position: left top;
}

.bg-right {
  background-position: right;
}

.bg-right-bottom {
  background-position: right bottom;
}

.bg-right-top {
  background-position: right top;
}

.bg-top {
  background-position: top;
}

.\!bg-bottom {
  background-position: bottom !important;
}

.\!bg-center {
  background-position: center !important;
}

.\!bg-left {
  background-position: left !important;
}

.\!bg-left-bottom {
  background-position: left bottom !important;
}

.\!bg-left-top {
  background-position: left top !important;
}

.\!bg-right {
  background-position: right !important;
}

.\!bg-right-bottom {
  background-position: right bottom !important;
}

.\!bg-right-top {
  background-position: right top !important;
}

.\!bg-top {
  background-position: top !important;
}

.hover\:bg-bottom:hover {
  background-position: bottom;
}

.hover\:bg-center:hover {
  background-position: center;
}

.hover\:bg-left:hover {
  background-position: left;
}

.hover\:bg-left-bottom:hover {
  background-position: left bottom;
}

.hover\:bg-left-top:hover {
  background-position: left top;
}

.hover\:bg-right:hover {
  background-position: right;
}

.hover\:bg-right-bottom:hover {
  background-position: right bottom;
}

.hover\:bg-right-top:hover {
  background-position: right top;
}

.hover\:bg-top:hover {
  background-position: top;
}

.bg-repeat {
  background-repeat: repeat;
}

.bg-no-repeat {
  background-repeat: no-repeat;
}

.bg-repeat-x {
  background-repeat: repeat-x;
}

.bg-repeat-y {
  background-repeat: repeat-y;
}

.bg-repeat-round {
  background-repeat: round;
}

.bg-repeat-space {
  background-repeat: space;
}

.\!bg-repeat {
  background-repeat: repeat !important;
}

.\!bg-no-repeat {
  background-repeat: no-repeat !important;
}

.\!bg-repeat-x {
  background-repeat: repeat-x !important;
}

.\!bg-repeat-y {
  background-repeat: repeat-y !important;
}

.\!bg-repeat-round {
  background-repeat: round !important;
}

.\!bg-repeat-space {
  background-repeat: space !important;
}

.hover\:bg-repeat:hover {
  background-repeat: repeat;
}

.hover\:bg-no-repeat:hover {
  background-repeat: no-repeat;
}

.hover\:bg-repeat-x:hover {
  background-repeat: repeat-x;
}

.hover\:bg-repeat-y:hover {
  background-repeat: repeat-y;
}

.hover\:bg-repeat-round:hover {
  background-repeat: round;
}

.hover\:bg-repeat-space:hover {
  background-repeat: space;
}

.bg-auto {
  background-size: auto;
}

.bg-cover {
  background-size: cover;
}

.bg-contain {
  background-size: contain;
}

.\!bg-auto {
  background-size: auto !important;
}

.\!bg-cover {
  background-size: cover !important;
}

.\!bg-contain {
  background-size: contain !important;
}

.hover\:bg-auto:hover {
  background-size: auto;
}

.hover\:bg-cover:hover {
  background-size: cover;
}

.hover\:bg-contain:hover {
  background-size: contain;
}

.border-collapse {
  border-collapse: collapse;
}

.border-separate {
  border-collapse: separate;
}

.\!border-collapse {
  border-collapse: collapse !important;
}

.\!border-separate {
  border-collapse: separate !important;
}

.hover\:border-collapse:hover {
  border-collapse: collapse;
}

.hover\:border-separate:hover {
  border-collapse: separate;
}

.border-primary {
  border-color: #6638B6;
}

.border-primaryDark {
  border-color: #3C2C84;
}

.border-primary1 {
  border-color: #8C81D1;
}

.border-primary2 {
  border-color: #A8A5CE;
}

.border-primary3 {
  border-color: #EBEAF6;
}

.border-primary4 {
  border-color: #F8F8FC;
}

.border-secondary {
  border-color: #007EE5;
}

.border-secondary1 {
  border-color: #43BEFF;
}

.border-secondary2 {
  border-color: #F5F9FD;
}

.border-alert {
  border-color: #EF3817;
}

.border-safe {
  border-color: #60B731;
}

.border-primary-dark {
  border-color: #3C2C84;
}

.border-primary-1 {
  border-color: #8C81D1;
}

.border-primary-2 {
  border-color: #A8A5CE;
}

.border-primary-3 {
  border-color: #EBEAF6;
}

.border-primary-4 {
  border-color: #F8F8FC;
}

.border-secondary-1 {
  border-color: #43BEFF;
}

.border-secondary-2 {
  border-color: #F5F9FD;
}

.border-transparent {
  border-color: transparent;
}

.border-black {
  border-color: #000000;
}

.border-white {
  border-color: #FFFFFF;
}

.border-point-violet {
  border-color: #7545FF;
}

.border-gray-100 {
  border-color: #F7F7F7;
}

.border-gray-200 {
  border-color: #E5E5E8;
}

.border-gray-300 {
  border-color: #CED0D6;
}

.border-gray-400 {
  border-color: #A7A9B2;
}

.border-gray-500 {
  border-color: #858895;
}

.border-gray-600 {
  border-color: #6B6E7B;
}

.border-gray-700 {
  border-color: #5F616D;
}

.border-gray-800 {
  border-color: #474952;
}

.border-gray-900 {
  border-color: #222532;
}

.border-gray {
  border-color: #858895;
}

.border-gray-dark {
  border-color: #222532;
}

.border-red-100 {
  border-color: #FFE8E8;
}

.border-red-200 {
  border-color: #FFC4C4;
}

.border-red-300 {
  border-color: #FF8F8F;
}

.border-red-400 {
  border-color: #FF6A6A;
}

.border-red-500 {
  border-color: #EF3817;
}

.border-red-600 {
  border-color: #CC2C00;
}

.border-red-700 {
  border-color: #C53030;
}

.border-red-800 {
  border-color: #9B2C2C;
}

.border-red-900 {
  border-color: #742A2A;
}

.border-red {
  border-color: #EF3817;
}

.border-coral-100 {
  border-color: #FFEBE6;
}

.border-coral-200 {
  border-color: #FFD3C8;
}

.border-coral-300 {
  border-color: #FFB39E;
}

.border-coral-400 {
  border-color: #FF9476;
}

.border-coral-500 {
  border-color: #FF7750;
}

.border-coral-600 {
  border-color: #F55A2F;
}

.border-coral-700 {
  border-color: #DD470F;
}

.border-coral-800 {
  border-color: #B93E0F;
}

.border-coral-900 {
  border-color: #8E3311;
}

.border-coral {
  border-color: #FF7750;
}

.border-yellow-100 {
  border-color: #FFFAE6;
}

.border-yellow-200 {
  border-color: #FFEB99;
}

.border-yellow-300 {
  border-color: #FFE066;
}

.border-yellow-400 {
  border-color: #FFD633;
}

.border-yellow-500 {
  border-color: #FFCE02;
}

.border-yellow-600 {
  border-color: #E6B800;
}

.border-yellow-700 {
  border-color: #CCA300;
}

.border-yellow-800 {
  border-color: #806600;
}

.border-yellow-900 {
  border-color: #4D3D00;
}

.border-yellow {
  border-color: #FFCE02;
}

.border-green-100 {
  border-color: #F9FCE9;
}

.border-green-200 {
  border-color: #E7F3A5;
}

.border-green-300 {
  border-color: #D5EA62;
}

.border-green-400 {
  border-color: #C2E01E;
}

.border-green-500 {
  border-color: #60B731;
}

.border-green-600 {
  border-color: #3F7B1A;
}

.border-green-700 {
  border-color: #366916;
}

.border-green-800 {
  border-color: #203F0D;
}

.border-green-900 {
  border-color: #162A09;
}

.border-green {
  border-color: #60B731;
}

.border-blue-100 {
  border-color: #F5F9FD;
}

.border-blue-200 {
  border-color: #E9F4FF;
}

.border-blue-300 {
  border-color: #B9DCFF;
}

.border-blue-400 {
  border-color: #43BEFF;
}

.border-blue-500 {
  border-color: #007EE5;
}

.border-blue-600 {
  border-color: #0069CC;
}

.border-blue-700 {
  border-color: #005CB3;
}

.border-blue-800 {
  border-color: #004F99;
}

.border-blue-900 {
  border-color: #003566;
}

.border-blue {
  border-color: #007EE5;
}

.border-violet-100 {
  border-color: #F8F8FC;
}

.border-violet-200 {
  border-color: #EBEAF6;
}

.border-violet-300 {
  border-color: #A8A5CE;
}

.border-violet-400 {
  border-color: #8C81D1;
}

.border-violet-500 {
  border-color: #6638B6;
}

.border-violet-600 {
  border-color: #58309C;
}

.border-violet-700 {
  border-color: #4D2A89;
}

.border-violet-800 {
  border-color: #3C2C84;
}

.border-violet-900 {
  border-color: #371E62;
}

.border-violet {
  border-color: #6638B6;
}

.border-peacock-100 {
  border-color: #E6FFFA;
}

.border-peacock-200 {
  border-color: #B2F5EA;
}

.border-peacock-300 {
  border-color: #81E6D9;
}

.border-peacock-400 {
  border-color: #4FD1C5;
}

.border-peacock-500 {
  border-color: #38B2AC;
}

.border-peacock-600 {
  border-color: #319795;
}

.border-peacock-700 {
  border-color: #2C7A7B;
}

.border-peacock-800 {
  border-color: #285E61;
}

.border-peacock-900 {
  border-color: #234E52;
}

.border-peacock {
  border-color: #38B2AC;
}

.border-indigo-100 {
  border-color: #EBF4FF;
}

.border-indigo-200 {
  border-color: #C3DAFE;
}

.border-indigo-300 {
  border-color: #A3BFFA;
}

.border-indigo-400 {
  border-color: #7F9CF5;
}

.border-indigo-500 {
  border-color: #667EEA;
}

.border-indigo-600 {
  border-color: #5A67D8;
}

.border-indigo-700 {
  border-color: #6439DE;
}

.border-indigo-800 {
  border-color: #434190;
}

.border-indigo-900 {
  border-color: #3C366B;
}

.border-indigo {
  border-color: #667EEA;
}

.\!border-primary {
  border-color: #6638B6 !important;
}

.\!border-primaryDark {
  border-color: #3C2C84 !important;
}

.\!border-primary1 {
  border-color: #8C81D1 !important;
}

.\!border-primary2 {
  border-color: #A8A5CE !important;
}

.\!border-primary3 {
  border-color: #EBEAF6 !important;
}

.\!border-primary4 {
  border-color: #F8F8FC !important;
}

.\!border-secondary {
  border-color: #007EE5 !important;
}

.\!border-secondary1 {
  border-color: #43BEFF !important;
}

.\!border-secondary2 {
  border-color: #F5F9FD !important;
}

.\!border-alert {
  border-color: #EF3817 !important;
}

.\!border-safe {
  border-color: #60B731 !important;
}

.\!border-primary-dark {
  border-color: #3C2C84 !important;
}

.\!border-primary-1 {
  border-color: #8C81D1 !important;
}

.\!border-primary-2 {
  border-color: #A8A5CE !important;
}

.\!border-primary-3 {
  border-color: #EBEAF6 !important;
}

.\!border-primary-4 {
  border-color: #F8F8FC !important;
}

.\!border-secondary-1 {
  border-color: #43BEFF !important;
}

.\!border-secondary-2 {
  border-color: #F5F9FD !important;
}

.\!border-transparent {
  border-color: transparent !important;
}

.\!border-black {
  border-color: #000000 !important;
}

.\!border-white {
  border-color: #FFFFFF !important;
}

.\!border-point-violet {
  border-color: #7545FF !important;
}

.\!border-gray-100 {
  border-color: #F7F7F7 !important;
}

.\!border-gray-200 {
  border-color: #E5E5E8 !important;
}

.\!border-gray-300 {
  border-color: #CED0D6 !important;
}

.\!border-gray-400 {
  border-color: #A7A9B2 !important;
}

.\!border-gray-500 {
  border-color: #858895 !important;
}

.\!border-gray-600 {
  border-color: #6B6E7B !important;
}

.\!border-gray-700 {
  border-color: #5F616D !important;
}

.\!border-gray-800 {
  border-color: #474952 !important;
}

.\!border-gray-900 {
  border-color: #222532 !important;
}

.\!border-gray {
  border-color: #858895 !important;
}

.\!border-gray-dark {
  border-color: #222532 !important;
}

.\!border-red-100 {
  border-color: #FFE8E8 !important;
}

.\!border-red-200 {
  border-color: #FFC4C4 !important;
}

.\!border-red-300 {
  border-color: #FF8F8F !important;
}

.\!border-red-400 {
  border-color: #FF6A6A !important;
}

.\!border-red-500 {
  border-color: #EF3817 !important;
}

.\!border-red-600 {
  border-color: #CC2C00 !important;
}

.\!border-red-700 {
  border-color: #C53030 !important;
}

.\!border-red-800 {
  border-color: #9B2C2C !important;
}

.\!border-red-900 {
  border-color: #742A2A !important;
}

.\!border-red {
  border-color: #EF3817 !important;
}

.\!border-coral-100 {
  border-color: #FFEBE6 !important;
}

.\!border-coral-200 {
  border-color: #FFD3C8 !important;
}

.\!border-coral-300 {
  border-color: #FFB39E !important;
}

.\!border-coral-400 {
  border-color: #FF9476 !important;
}

.\!border-coral-500 {
  border-color: #FF7750 !important;
}

.\!border-coral-600 {
  border-color: #F55A2F !important;
}

.\!border-coral-700 {
  border-color: #DD470F !important;
}

.\!border-coral-800 {
  border-color: #B93E0F !important;
}

.\!border-coral-900 {
  border-color: #8E3311 !important;
}

.\!border-coral {
  border-color: #FF7750 !important;
}

.\!border-yellow-100 {
  border-color: #FFFAE6 !important;
}

.\!border-yellow-200 {
  border-color: #FFEB99 !important;
}

.\!border-yellow-300 {
  border-color: #FFE066 !important;
}

.\!border-yellow-400 {
  border-color: #FFD633 !important;
}

.\!border-yellow-500 {
  border-color: #FFCE02 !important;
}

.\!border-yellow-600 {
  border-color: #E6B800 !important;
}

.\!border-yellow-700 {
  border-color: #CCA300 !important;
}

.\!border-yellow-800 {
  border-color: #806600 !important;
}

.\!border-yellow-900 {
  border-color: #4D3D00 !important;
}

.\!border-yellow {
  border-color: #FFCE02 !important;
}

.\!border-green-100 {
  border-color: #F9FCE9 !important;
}

.\!border-green-200 {
  border-color: #E7F3A5 !important;
}

.\!border-green-300 {
  border-color: #D5EA62 !important;
}

.\!border-green-400 {
  border-color: #C2E01E !important;
}

.\!border-green-500 {
  border-color: #60B731 !important;
}

.\!border-green-600 {
  border-color: #3F7B1A !important;
}

.\!border-green-700 {
  border-color: #366916 !important;
}

.\!border-green-800 {
  border-color: #203F0D !important;
}

.\!border-green-900 {
  border-color: #162A09 !important;
}

.\!border-green {
  border-color: #60B731 !important;
}

.\!border-blue-100 {
  border-color: #F5F9FD !important;
}

.\!border-blue-200 {
  border-color: #E9F4FF !important;
}

.\!border-blue-300 {
  border-color: #B9DCFF !important;
}

.\!border-blue-400 {
  border-color: #43BEFF !important;
}

.\!border-blue-500 {
  border-color: #007EE5 !important;
}

.\!border-blue-600 {
  border-color: #0069CC !important;
}

.\!border-blue-700 {
  border-color: #005CB3 !important;
}

.\!border-blue-800 {
  border-color: #004F99 !important;
}

.\!border-blue-900 {
  border-color: #003566 !important;
}

.\!border-blue {
  border-color: #007EE5 !important;
}

.\!border-violet-100 {
  border-color: #F8F8FC !important;
}

.\!border-violet-200 {
  border-color: #EBEAF6 !important;
}

.\!border-violet-300 {
  border-color: #A8A5CE !important;
}

.\!border-violet-400 {
  border-color: #8C81D1 !important;
}

.\!border-violet-500 {
  border-color: #6638B6 !important;
}

.\!border-violet-600 {
  border-color: #58309C !important;
}

.\!border-violet-700 {
  border-color: #4D2A89 !important;
}

.\!border-violet-800 {
  border-color: #3C2C84 !important;
}

.\!border-violet-900 {
  border-color: #371E62 !important;
}

.\!border-violet {
  border-color: #6638B6 !important;
}

.\!border-peacock-100 {
  border-color: #E6FFFA !important;
}

.\!border-peacock-200 {
  border-color: #B2F5EA !important;
}

.\!border-peacock-300 {
  border-color: #81E6D9 !important;
}

.\!border-peacock-400 {
  border-color: #4FD1C5 !important;
}

.\!border-peacock-500 {
  border-color: #38B2AC !important;
}

.\!border-peacock-600 {
  border-color: #319795 !important;
}

.\!border-peacock-700 {
  border-color: #2C7A7B !important;
}

.\!border-peacock-800 {
  border-color: #285E61 !important;
}

.\!border-peacock-900 {
  border-color: #234E52 !important;
}

.\!border-peacock {
  border-color: #38B2AC !important;
}

.\!border-indigo-100 {
  border-color: #EBF4FF !important;
}

.\!border-indigo-200 {
  border-color: #C3DAFE !important;
}

.\!border-indigo-300 {
  border-color: #A3BFFA !important;
}

.\!border-indigo-400 {
  border-color: #7F9CF5 !important;
}

.\!border-indigo-500 {
  border-color: #667EEA !important;
}

.\!border-indigo-600 {
  border-color: #5A67D8 !important;
}

.\!border-indigo-700 {
  border-color: #6439DE !important;
}

.\!border-indigo-800 {
  border-color: #434190 !important;
}

.\!border-indigo-900 {
  border-color: #3C366B !important;
}

.\!border-indigo {
  border-color: #667EEA !important;
}

.hover\:border-primary:hover {
  border-color: #6638B6;
}

.hover\:border-primaryDark:hover {
  border-color: #3C2C84;
}

.hover\:border-primary1:hover {
  border-color: #8C81D1;
}

.hover\:border-primary2:hover {
  border-color: #A8A5CE;
}

.hover\:border-primary3:hover {
  border-color: #EBEAF6;
}

.hover\:border-primary4:hover {
  border-color: #F8F8FC;
}

.hover\:border-secondary:hover {
  border-color: #007EE5;
}

.hover\:border-secondary1:hover {
  border-color: #43BEFF;
}

.hover\:border-secondary2:hover {
  border-color: #F5F9FD;
}

.hover\:border-alert:hover {
  border-color: #EF3817;
}

.hover\:border-safe:hover {
  border-color: #60B731;
}

.hover\:border-primary-dark:hover {
  border-color: #3C2C84;
}

.hover\:border-primary-1:hover {
  border-color: #8C81D1;
}

.hover\:border-primary-2:hover {
  border-color: #A8A5CE;
}

.hover\:border-primary-3:hover {
  border-color: #EBEAF6;
}

.hover\:border-primary-4:hover {
  border-color: #F8F8FC;
}

.hover\:border-secondary-1:hover {
  border-color: #43BEFF;
}

.hover\:border-secondary-2:hover {
  border-color: #F5F9FD;
}

.hover\:border-transparent:hover {
  border-color: transparent;
}

.hover\:border-black:hover {
  border-color: #000000;
}

.hover\: