UNPKG

spur-tailwind

Version:

Spur web UI

3,344 lines (2,548 loc) 1.08 MB
/*! 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 { 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 */ 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 { 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"] { 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. */ /** * 1. Prevent padding and border from affecting element width * https://goo.gl/pYtbK7 * 2. Change the default font family in all browsers (opinionated) */ html { box-sizing: border-box; /* 1 */ font-family: sans-serif; /* 2 */ } *, *::before, *::after { box-sizing: inherit; } /** * Removes the default spacing and border for appropriate elements. */ blockquote, dl, dd, h1, h2, h3, h4, h5, h6, figure, p, pre { margin: 0; } button { background: transparent; 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 system font stack 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: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 1 */ line-height: 1.5; /* 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 { border-width: 0; border-style: solid; border-color: #b7b4d5; } /** * 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::placeholder, textarea::placeholder { color: inherit; opacity: 0.5; } 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: 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%; margin-right: auto; margin-left: auto; padding-right: 1rem; padding-left: 1rem; } @media (min-width: 576px) { .container { max-width: 576px; } } @media (min-width: 768px) { .container { max-width: 768px; } } @media (min-width: 992px) { .container { max-width: 992px; } } @media (min-width: 1200px) { .container { max-width: 1200px; } } @media (min-width: 1440px) { .container { max-width: 1440px; } } .appearance-none { appearance: none; } .bg-fixed { background-attachment: fixed; } .bg-local { background-attachment: local; } .bg-scroll { background-attachment: scroll; } .bg-transparent { background-color: transparent; } .bg-black { background-color: #000; } .bg-white { background-color: #fff; } .bg-gray-100 { background-color: #f7fafc; } .bg-gray-200 { background-color: #edf2f7; } .bg-gray-300 { background-color: #e2e8f0; } .bg-gray-400 { background-color: #cbd5e0; } .bg-gray-500 { background-color: #a0aec0; } .bg-gray-600 { background-color: #718096; } .bg-gray-700 { background-color: #4a5568; } .bg-gray-800 { background-color: #2d3748; } .bg-gray-900 { background-color: #1a202c; } .bg-red-100 { background-color: #fff5f5; } .bg-red-200 { background-color: #fed7d7; } .bg-red-300 { background-color: #feb2b2; } .bg-red-400 { background-color: #fc8181; } .bg-red-500 { background-color: #f56565; } .bg-red-600 { background-color: #e53e3e; } .bg-red-700 { background-color: #c53030; } .bg-red-800 { background-color: #9b2c2c; } .bg-red-900 { background-color: #742a2a; } .bg-orange-100 { background-color: #fffaf0; } .bg-orange-200 { background-color: #feebc8; } .bg-orange-300 { background-color: #fbd38d; } .bg-orange-400 { background-color: #f6ad55; } .bg-orange-500 { background-color: #ed8936; } .bg-orange-600 { background-color: #dd6b20; } .bg-orange-700 { background-color: #c05621; } .bg-orange-800 { background-color: #9c4221; } .bg-orange-900 { background-color: #7b341e; } .bg-yellow-100 { background-color: #fffff0; } .bg-yellow-200 { background-color: #fefcbf; } .bg-yellow-300 { background-color: #faf089; } .bg-yellow-400 { background-color: #f6e05e; } .bg-yellow-500 { background-color: #ecc94b; } .bg-yellow-600 { background-color: #d69e2e; } .bg-yellow-700 { background-color: #b7791f; } .bg-yellow-800 { background-color: #975a16; } .bg-yellow-900 { background-color: #744210; } .bg-green-100 { background-color: #f0fff4; } .bg-green-200 { background-color: #c6f6d5; } .bg-green-300 { background-color: #9ae6b4; } .bg-green-400 { background-color: #68d391; } .bg-green-500 { background-color: #48bb78; } .bg-green-600 { background-color: #38a169; } .bg-green-700 { background-color: #2f855a; } .bg-green-800 { background-color: #276749; } .bg-green-900 { background-color: #22543d; } .bg-teal-100 { background-color: #e6fffa; } .bg-teal-200 { background-color: #b2f5ea; } .bg-teal-300 { background-color: #81e6d9; } .bg-teal-400 { background-color: #4fd1c5; } .bg-teal-500 { background-color: #38b2ac; } .bg-teal-600 { background-color: #319795; } .bg-teal-700 { background-color: #2c7a7b; } .bg-teal-800 { background-color: #285e61; } .bg-teal-900 { background-color: #234e52; } .bg-blue-100 { background-color: #ebf8ff; } .bg-blue-200 { background-color: #bee3f8; } .bg-blue-300 { background-color: #90cdf4; } .bg-blue-400 { background-color: #63b3ed; } .bg-blue-500 { background-color: #4299e1; } .bg-blue-600 { background-color: #3182ce; } .bg-blue-700 { background-color: #2b6cb0; } .bg-blue-800 { background-color: #2c5282; } .bg-blue-900 { background-color: #2a4365; } .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: #4c51bf; } .bg-indigo-800 { background-color: #434190; } .bg-indigo-900 { background-color: #3c366b; } .bg-purple-100 { background-color: #faf5ff; } .bg-purple-200 { background-color: #e9d8fd; } .bg-purple-300 { background-color: #d6bcfa; } .bg-purple-400 { background-color: #b794f4; } .bg-purple-500 { background-color: #9f7aea; } .bg-purple-600 { background-color: #805ad5; } .bg-purple-700 { background-color: #6b46c1; } .bg-purple-800 { background-color: #553c9a; } .bg-purple-900 { background-color: #44337a; } .bg-pink-100 { background-color: #fff5f7; } .bg-pink-200 { background-color: #fed7e2; } .bg-pink-300 { background-color: #fbb6ce; } .bg-pink-400 { background-color: #f687b3; } .bg-pink-500 { background-color: #ed64a6; } .bg-pink-600 { background-color: #d53f8c; } .bg-pink-700 { background-color: #b83280; } .bg-pink-800 { background-color: #97266d; } .bg-pink-900 { background-color: #702459; } .bg-current { background-color: currentColor; } .bg-white-half { background-color: rgba(255,255,255, 0.5); } .bg-spur-grey { background-color: #75757F; } .bg-silver { background-color: #c3c3c3; } .bg-background-grey { background-color: #f8f9fd; } .bg-filter-grey { background-color: #e3e7ef; } .bg-spur-black { background-color: #454553; } .bg-spur-black-half { background-color: rgba(69,69,83, 0.5); } .bg-blue-jeans { background-color: #60a7ff; } .bg-blue-jeans-half { background-color: rgba(96, 167, 255, 0.5); } .bg-blue-jeans-20 { background-color: rgba(96, 167, 255, 0.2); } .bg-blue-jeans-10 { background-color: rgba(96, 167, 255, 0.1); } .bg-deep-blue-jeans { background-color: #428ce8; } .bg-light-blue-jeans { background-color: #f8f9fd; } .bg-aquamarine { background-color: #60ebb4; } .bg-deep-aquamarine { background-color: #3ada9b; } .bg-light-watermelon { background-color: #ffe0e3; } .bg-watermelon { background-color: #ff7a87; } .bg-deep-watermelon { background-color: #f55f6e; } .bg-hover-red { background-color: #e85a69; } .bg-dark-red { background-color: #c24c57; } .bg-light-warning-gold { background-color: #fdf1dd; } .bg-warning-gold { background-color: #f5bf5f; } .bg-deep-gold { background-color: #dba240; } .bg-border-line-purple { background-color: #b7b4d5; } .bg-buzz-purple-10 { background-color: rgba(118, 62, 255, 0.1); } .bg-buzz-purple-5 { background-color: rgba(118, 62, 255, 0.05); } .bg-buzz-purple { background-color: #763eff; } .bg-dark-purple { background-color: #502AAC; } .bg-dead-state-purple { background-color: #d6d3eb; } .bg-extra-light-navy-purple { background-color: #bf96ff; } .bg-hover-purple { background-color: #6c39e8; } .bg-light-navy-purple { background-color: #a369ff; } .bg-navy-purple { background-color: #9f52ff; } .bg-support-purple { background-color: #746DBC; } .hover\:bg-transparent:hover { background-color: transparent; } .hover\:bg-black:hover { background-color: #000; } .hover\:bg-white:hover { background-color: #fff; } .hover\:bg-gray-100:hover { background-color: #f7fafc; } .hover\:bg-gray-200:hover { background-color: #edf2f7; } .hover\:bg-gray-300:hover { background-color: #e2e8f0; } .hover\:bg-gray-400:hover { background-color: #cbd5e0; } .hover\:bg-gray-500:hover { background-color: #a0aec0; } .hover\:bg-gray-600:hover { background-color: #718096; } .hover\:bg-gray-700:hover { background-color: #4a5568; } .hover\:bg-gray-800:hover { background-color: #2d3748; } .hover\:bg-gray-900:hover { background-color: #1a202c; } .hover\:bg-red-100:hover { background-color: #fff5f5; } .hover\:bg-red-200:hover { background-color: #fed7d7; } .hover\:bg-red-300:hover { background-color: #feb2b2; } .hover\:bg-red-400:hover { background-color: #fc8181; } .hover\:bg-red-500:hover { background-color: #f56565; } .hover\:bg-red-600:hover { background-color: #e53e3e; } .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-orange-100:hover { background-color: #fffaf0; } .hover\:bg-orange-200:hover { background-color: #feebc8; } .hover\:bg-orange-300:hover { background-color: #fbd38d; } .hover\:bg-orange-400:hover { background-color: #f6ad55; } .hover\:bg-orange-500:hover { background-color: #ed8936; } .hover\:bg-orange-600:hover { background-color: #dd6b20; } .hover\:bg-orange-700:hover { background-color: #c05621; } .hover\:bg-orange-800:hover { background-color: #9c4221; } .hover\:bg-orange-900:hover { background-color: #7b341e; } .hover\:bg-yellow-100:hover { background-color: #fffff0; } .hover\:bg-yellow-200:hover { background-color: #fefcbf; } .hover\:bg-yellow-300:hover { background-color: #faf089; } .hover\:bg-yellow-400:hover { background-color: #f6e05e; } .hover\:bg-yellow-500:hover { background-color: #ecc94b; } .hover\:bg-yellow-600:hover { background-color: #d69e2e; } .hover\:bg-yellow-700:hover { background-color: #b7791f; } .hover\:bg-yellow-800:hover { background-color: #975a16; } .hover\:bg-yellow-900:hover { background-color: #744210; } .hover\:bg-green-100:hover { background-color: #f0fff4; } .hover\:bg-green-200:hover { background-color: #c6f6d5; } .hover\:bg-green-300:hover { background-color: #9ae6b4; } .hover\:bg-green-400:hover { background-color: #68d391; } .hover\:bg-green-500:hover { background-color: #48bb78; } .hover\:bg-green-600:hover { background-color: #38a169; } .hover\:bg-green-700:hover { background-color: #2f855a; } .hover\:bg-green-800:hover { background-color: #276749; } .hover\:bg-green-900:hover { background-color: #22543d; } .hover\:bg-teal-100:hover { background-color: #e6fffa; } .hover\:bg-teal-200:hover { background-color: #b2f5ea; } .hover\:bg-teal-300:hover { background-color: #81e6d9; } .hover\:bg-teal-400:hover { background-color: #4fd1c5; } .hover\:bg-teal-500:hover { background-color: #38b2ac; } .hover\:bg-teal-600:hover { background-color: #319795; } .hover\:bg-teal-700:hover { background-color: #2c7a7b; } .hover\:bg-teal-800:hover { background-color: #285e61; } .hover\:bg-teal-900:hover { background-color: #234e52; } .hover\:bg-blue-100:hover { background-color: #ebf8ff; } .hover\:bg-blue-200:hover { background-color: #bee3f8; } .hover\:bg-blue-300:hover { background-color: #90cdf4; } .hover\:bg-blue-400:hover { background-color: #63b3ed; } .hover\:bg-blue-500:hover { background-color: #4299e1; } .hover\:bg-blue-600:hover { background-color: #3182ce; } .hover\:bg-blue-700:hover { background-color: #2b6cb0; } .hover\:bg-blue-800:hover { background-color: #2c5282; } .hover\:bg-blue-900:hover { background-color: #2a4365; } .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: #4c51bf; } .hover\:bg-indigo-800:hover { background-color: #434190; } .hover\:bg-indigo-900:hover { background-color: #3c366b; } .hover\:bg-purple-100:hover { background-color: #faf5ff; } .hover\:bg-purple-200:hover { background-color: #e9d8fd; } .hover\:bg-purple-300:hover { background-color: #d6bcfa; } .hover\:bg-purple-400:hover { background-color: #b794f4; } .hover\:bg-purple-500:hover { background-color: #9f7aea; } .hover\:bg-purple-600:hover { background-color: #805ad5; } .hover\:bg-purple-700:hover { background-color: #6b46c1; } .hover\:bg-purple-800:hover { background-color: #553c9a; } .hover\:bg-purple-900:hover { background-color: #44337a; } .hover\:bg-pink-100:hover { background-color: #fff5f7; } .hover\:bg-pink-200:hover { background-color: #fed7e2; } .hover\:bg-pink-300:hover { background-color: #fbb6ce; } .hover\:bg-pink-400:hover { background-color: #f687b3; } .hover\:bg-pink-500:hover { background-color: #ed64a6; } .hover\:bg-pink-600:hover { background-color: #d53f8c; } .hover\:bg-pink-700:hover { background-color: #b83280; } .hover\:bg-pink-800:hover { background-color: #97266d; } .hover\:bg-pink-900:hover { background-color: #702459; } .hover\:bg-current:hover { background-color: currentColor; } .hover\:bg-white-half:hover { background-color: rgba(255,255,255, 0.5); } .hover\:bg-spur-grey:hover { background-color: #75757F; } .hover\:bg-silver:hover { background-color: #c3c3c3; } .hover\:bg-background-grey:hover { background-color: #f8f9fd; } .hover\:bg-filter-grey:hover { background-color: #e3e7ef; } .hover\:bg-spur-black:hover { background-color: #454553; } .hover\:bg-spur-black-half:hover { background-color: rgba(69,69,83, 0.5); } .hover\:bg-blue-jeans:hover { background-color: #60a7ff; } .hover\:bg-blue-jeans-half:hover { background-color: rgba(96, 167, 255, 0.5); } .hover\:bg-blue-jeans-20:hover { background-color: rgba(96, 167, 255, 0.2); } .hover\:bg-blue-jeans-10:hover { background-color: rgba(96, 167, 255, 0.1); } .hover\:bg-deep-blue-jeans:hover { background-color: #428ce8; } .hover\:bg-light-blue-jeans:hover { background-color: #f8f9fd; } .hover\:bg-aquamarine:hover { background-color: #60ebb4; } .hover\:bg-deep-aquamarine:hover { background-color: #3ada9b; } .hover\:bg-light-watermelon:hover { background-color: #ffe0e3; } .hover\:bg-watermelon:hover { background-color: #ff7a87; } .hover\:bg-deep-watermelon:hover { background-color: #f55f6e; } .hover\:bg-hover-red:hover { background-color: #e85a69; } .hover\:bg-dark-red:hover { background-color: #c24c57; } .hover\:bg-light-warning-gold:hover { background-color: #fdf1dd; } .hover\:bg-warning-gold:hover { background-color: #f5bf5f; } .hover\:bg-deep-gold:hover { background-color: #dba240; } .hover\:bg-border-line-purple:hover { background-color: #b7b4d5; } .hover\:bg-buzz-purple-10:hover { background-color: rgba(118, 62, 255, 0.1); } .hover\:bg-buzz-purple-5:hover { background-color: rgba(118, 62, 255, 0.05); } .hover\:bg-buzz-purple:hover { background-color: #763eff; } .hover\:bg-dark-purple:hover { background-color: #502AAC; } .hover\:bg-dead-state-purple:hover { background-color: #d6d3eb; } .hover\:bg-extra-light-navy-purple:hover { background-color: #bf96ff; } .hover\:bg-hover-purple:hover { background-color: #6c39e8; } .hover\:bg-light-navy-purple:hover { background-color: #a369ff; } .hover\:bg-navy-purple:hover { background-color: #9f52ff; } .hover\:bg-support-purple:hover { background-color: #746DBC; } .focus\:bg-transparent:focus { background-color: transparent; } .focus\:bg-black:focus { background-color: #000; } .focus\:bg-white:focus { background-color: #fff; } .focus\:bg-gray-100:focus { background-color: #f7fafc; } .focus\:bg-gray-200:focus { background-color: #edf2f7; } .focus\:bg-gray-300:focus { background-color: #e2e8f0; } .focus\:bg-gray-400:focus { background-color: #cbd5e0; } .focus\:bg-gray-500:focus { background-color: #a0aec0; } .focus\:bg-gray-600:focus { background-color: #718096; } .focus\:bg-gray-700:focus { background-color: #4a5568; } .focus\:bg-gray-800:focus { background-color: #2d3748; } .focus\:bg-gray-900:focus { background-color: #1a202c; } .focus\:bg-red-100:focus { background-color: #fff5f5; } .focus\:bg-red-200:focus { background-color: #fed7d7; } .focus\:bg-red-300:focus { background-color: #feb2b2; } .focus\:bg-red-400:focus { background-color: #fc8181; } .focus\:bg-red-500:focus { background-color: #f56565; } .focus\:bg-red-600:focus { background-color: #e53e3e; } .focus\:bg-red-700:focus { background-color: #c53030; } .focus\:bg-red-800:focus { background-color: #9b2c2c; } .focus\:bg-red-900:focus { background-color: #742a2a; } .focus\:bg-orange-100:focus { background-color: #fffaf0; } .focus\:bg-orange-200:focus { background-color: #feebc8; } .focus\:bg-orange-300:focus { background-color: #fbd38d; } .focus\:bg-orange-400:focus { background-color: #f6ad55; } .focus\:bg-orange-500:focus { background-color: #ed8936; } .focus\:bg-orange-600:focus { background-color: #dd6b20; } .focus\:bg-orange-700:focus { background-color: #c05621; } .focus\:bg-orange-800:focus { background-color: #9c4221; } .focus\:bg-orange-900:focus { background-color: #7b341e; } .focus\:bg-yellow-100:focus { background-color: #fffff0; } .focus\:bg-yellow-200:focus { background-color: #fefcbf; } .focus\:bg-yellow-300:focus { background-color: #faf089; } .focus\:bg-yellow-400:focus { background-color: #f6e05e; } .focus\:bg-yellow-500:focus { background-color: #ecc94b; } .focus\:bg-yellow-600:focus { background-color: #d69e2e; } .focus\:bg-yellow-700:focus { background-color: #b7791f; } .focus\:bg-yellow-800:focus { background-color: #975a16; } .focus\:bg-yellow-900:focus { background-color: #744210; } .focus\:bg-green-100:focus { background-color: #f0fff4; } .focus\:bg-green-200:focus { background-color: #c6f6d5; } .focus\:bg-green-300:focus { background-color: #9ae6b4; } .focus\:bg-green-400:focus { background-color: #68d391; } .focus\:bg-green-500:focus { background-color: #48bb78; } .focus\:bg-green-600:focus { background-color: #38a169; } .focus\:bg-green-700:focus { background-color: #2f855a; } .focus\:bg-green-800:focus { background-color: #276749; } .focus\:bg-green-900:focus { background-color: #22543d; } .focus\:bg-teal-100:focus { background-color: #e6fffa; } .focus\:bg-teal-200:focus { background-color: #b2f5ea; } .focus\:bg-teal-300:focus { background-color: #81e6d9; } .focus\:bg-teal-400:focus { background-color: #4fd1c5; } .focus\:bg-teal-500:focus { background-color: #38b2ac; } .focus\:bg-teal-600:focus { background-color: #319795; } .focus\:bg-teal-700:focus { background-color: #2c7a7b; } .focus\:bg-teal-800:focus { background-color: #285e61; } .focus\:bg-teal-900:focus { background-color: #234e52; } .focus\:bg-blue-100:focus { background-color: #ebf8ff; } .focus\:bg-blue-200:focus { background-color: #bee3f8; } .focus\:bg-blue-300:focus { background-color: #90cdf4; } .focus\:bg-blue-400:focus { background-color: #63b3ed; } .focus\:bg-blue-500:focus { background-color: #4299e1; } .focus\:bg-blue-600:focus { background-color: #3182ce; } .focus\:bg-blue-700:focus { background-color: #2b6cb0; } .focus\:bg-blue-800:focus { background-color: #2c5282; } .focus\:bg-blue-900:focus { background-color: #2a4365; } .focus\:bg-indigo-100:focus { background-color: #ebf4ff; } .focus\:bg-indigo-200:focus { background-color: #c3dafe; } .focus\:bg-indigo-300:focus { background-color: #a3bffa; } .focus\:bg-indigo-400:focus { background-color: #7f9cf5; } .focus\:bg-indigo-500:focus { background-color: #667eea; } .focus\:bg-indigo-600:focus { background-color: #5a67d8; } .focus\:bg-indigo-700:focus { background-color: #4c51bf; } .focus\:bg-indigo-800:focus { background-color: #434190; } .focus\:bg-indigo-900:focus { background-color: #3c366b; } .focus\:bg-purple-100:focus { background-color: #faf5ff; } .focus\:bg-purple-200:focus { background-color: #e9d8fd; } .focus\:bg-purple-300:focus { background-color: #d6bcfa; } .focus\:bg-purple-400:focus { background-color: #b794f4; } .focus\:bg-purple-500:focus { background-color: #9f7aea; } .focus\:bg-purple-600:focus { background-color: #805ad5; } .focus\:bg-purple-700:focus { background-color: #6b46c1; } .focus\:bg-purple-800:focus { background-color: #553c9a; } .focus\:bg-purple-900:focus { background-color: #44337a; } .focus\:bg-pink-100:focus { background-color: #fff5f7; } .focus\:bg-pink-200:focus { background-color: #fed7e2; } .focus\:bg-pink-300:focus { background-color: #fbb6ce; } .focus\:bg-pink-400:focus { background-color: #f687b3; } .focus\:bg-pink-500:focus { background-color: #ed64a6; } .focus\:bg-pink-600:focus { background-color: #d53f8c; } .focus\:bg-pink-700:focus { background-color: #b83280; } .focus\:bg-pink-800:focus { background-color: #97266d; } .focus\:bg-pink-900:focus { background-color: #702459; } .focus\:bg-current:focus { background-color: currentColor; } .focus\:bg-white-half:focus { background-color: rgba(255,255,255, 0.5); } .focus\:bg-spur-grey:focus { background-color: #75757F; } .focus\:bg-silver:focus { background-color: #c3c3c3; } .focus\:bg-background-grey:focus { background-color: #f8f9fd; } .focus\:bg-filter-grey:focus { background-color: #e3e7ef; } .focus\:bg-spur-black:focus { background-color: #454553; } .focus\:bg-spur-black-half:focus { background-color: rgba(69,69,83, 0.5); } .focus\:bg-blue-jeans:focus { background-color: #60a7ff; } .focus\:bg-blue-jeans-half:focus { background-color: rgba(96, 167, 255, 0.5); } .focus\:bg-blue-jeans-20:focus { background-color: rgba(96, 167, 255, 0.2); } .focus\:bg-blue-jeans-10:focus { background-color: rgba(96, 167, 255, 0.1); } .focus\:bg-deep-blue-jeans:focus { background-color: #428ce8; } .focus\:bg-light-blue-jeans:focus { background-color: #f8f9fd; } .focus\:bg-aquamarine:focus { background-color: #60ebb4; } .focus\:bg-deep-aquamarine:focus { background-color: #3ada9b; } .focus\:bg-light-watermelon:focus { background-color: #ffe0e3; } .focus\:bg-watermelon:focus { background-color: #ff7a87; } .focus\:bg-deep-watermelon:focus { background-color: #f55f6e; } .focus\:bg-hover-red:focus { background-color: #e85a69; } .focus\:bg-dark-red:focus { background-color: #c24c57; } .focus\:bg-light-warning-gold:focus { background-color: #fdf1dd; } .focus\:bg-warning-gold:focus { background-color: #f5bf5f; } .focus\:bg-deep-gold:focus { background-color: #dba240; } .focus\:bg-border-line-purple:focus { background-color: #b7b4d5; } .focus\:bg-buzz-purple-10:focus { background-color: rgba(118, 62, 255, 0.1); } .focus\:bg-buzz-purple-5:focus { background-color: rgba(118, 62, 255, 0.05); } .focus\:bg-buzz-purple:focus { background-color: #763eff; } .focus\:bg-dark-purple:focus { background-color: #502AAC; } .focus\:bg-dead-state-purple:focus { background-color: #d6d3eb; } .focus\:bg-extra-light-navy-purple:focus { background-color: #bf96ff; } .focus\:bg-hover-purple:focus { background-color: #6c39e8; } .focus\:bg-light-navy-purple:focus { background-color: #a369ff; } .focus\:bg-navy-purple:focus { background-color: #9f52ff; } .focus\:bg-support-purple:focus { background-color: #746DBC; } .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-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-auto { background-size: auto; } .bg-cover { background-size: cover; } .bg-contain { background-size: contain; } .border-collapse { border-collapse: collapse; } .border-separate { border-collapse: separate; } .border-transparent { border-color: transparent; } .border-black { border-color: #000; } .border-white { border-color: #fff; } .border-gray-100 { border-color: #f7fafc; } .border-gray-200 { border-color: #edf2f7; } .border-gray-300 { border-color: #e2e8f0; } .border-gray-400 { border-color: #cbd5e0; } .border-gray-500 { border-color: #a0aec0; } .border-gray-600 { border-color: #718096; } .border-gray-700 { border-color: #4a5568; } .border-gray-800 { border-color: #2d3748; } .border-gray-900 { border-color: #1a202c; } .border-red-100 { border-color: #fff5f5; } .border-red-200 { border-color: #fed7d7; } .border-red-300 { border-color: #feb2b2; } .border-red-400 { border-color: #fc8181; } .border-red-500 { border-color: #f56565; } .border-red-600 { border-color: #e53e3e; } .border-red-700 { border-color: #c53030; } .border-red-800 { border-color: #9b2c2c; } .border-red-900 { border-color: #742a2a; } .border-orange-100 { border-color: #fffaf0; } .border-orange-200 { border-color: #feebc8; } .border-orange-300 { border-color: #fbd38d; } .border-orange-400 { border-color: #f6ad55; } .border-orange-500 { border-color: #ed8936; } .border-orange-600 { border-color: #dd6b20; } .border-orange-700 { border-color: #c05621; } .border-orange-800 { border-color: #9c4221; } .border-orange-900 { border-color: #7b341e; } .border-yellow-100 { border-color: #fffff0; } .border-yellow-200 { border-color: #fefcbf; } .border-yellow-300 { border-color: #faf089; } .border-yellow-400 { border-color: #f6e05e; } .border-yellow-500 { border-color: #ecc94b; } .border-yellow-600 { border-color: #d69e2e; } .border-yellow-700 { border-color: #b7791f; } .border-yellow-800 { border-color: #975a16; } .border-yellow-900 { border-color: #744210; } .border-green-100 { border-color: #f0fff4; } .border-green-200 { border-color: #c6f6d5; } .border-green-300 { border-color: #9ae6b4; } .border-green-400 { border-color: #68d391; } .border-green-500 { border-color: #48bb78; } .border-green-600 { border-color: #38a169; } .border-green-700 { border-color: #2f855a; } .border-green-800 { border-color: #276749; } .border-green-900 { border-color: #22543d; } .border-teal-100 { border-color: #e6fffa; } .border-teal-200 { border-color: #b2f5ea; } .border-teal-300 { border-color: #81e6d9; } .border-teal-400 { border-color: #4fd1c5; } .border-teal-500 { border-color: #38b2ac; } .border-teal-600 { border-color: #319795; } .border-teal-700 { border-color: #2c7a7b; } .border-teal-800 { border-color: #285e61; } .border-teal-900 { border-color: #234e52; } .border-blue-100 { border-color: #ebf8ff; } .border-blue-200 { border-color: #bee3f8; } .border-blue-300 { border-color: #90cdf4; } .border-blue-400 { border-color: #63b3ed; } .border-blue-500 { border-color: #4299e1; } .border-blue-600 { border-color: #3182ce; } .border-blue-700 { border-color: #2b6cb0; } .border-blue-800 { border-color: #2c5282; } .border-blue-900 { border-color: #2a4365; } .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: #4c51bf; } .border-indigo-800 { border-color: #434190; } .border-indigo-900 { border-color: #3c366b; } .border-purple-100 { border-color: #faf5ff; } .border-purple-200 { border-color: #e9d8fd; } .border-purple-300 { border-color: #d6bcfa; } .border-purple-400 { border-color: #b794f4; } .border-purple-500 { border-color: #9f7aea; } .border-purple-600 { border-color: #805ad5; } .border-purple-700 { border-color: #6b46c1; } .border-purple-800 { border-color: #553c9a; } .border-purple-900 { border-color: #44337a; } .border-pink-100 { border-color: #fff5f7; } .border-pink-200 { border-color: #fed7e2; } .border-pink-300 { border-color: #fbb6ce; } .border-pink-400 { border-color: #f687b3; } .border-pink-500 { border-color: #ed64a6; } .border-pink-600 { border-color: #d53f8c; } .border-pink-700 { border-color: #b83280; } .border-pink-800 { border-color: #97266d; } .border-pink-900 { border-color: #702459; } .border-current { border-color: currentColor; } .border-white-half { border-color: rgba(255,255,255, 0.5); } .border-spur-grey { border-color: #75757F; } .border-silver { border-color: #c3c3c3; } .border-background-grey { border-color: #f8f9fd; } .border-filter-grey { border-color: #e3e7ef; } .border-spur-black { border-color: #454553; } .border-spur-black-half { border-color: rgba(69,69,83, 0.5); } .border-blue-jeans { border-color: #60a7ff; } .border-blue-jeans-half { border-color: rgba(96, 167, 255, 0.5); } .border-blue-jeans-20 { border-color: rgba(96, 167, 255, 0.2); } .border-blue-jeans-10 { border-color: rgba(96, 167, 255, 0.1); } .border-deep-blue-jeans { border-color: #428ce8; } .border-light-blue-jeans { border-color: #f8f9fd; } .border-aquamarine { border-color: #60ebb4; } .border-deep-aquamarine { border-color: #3ada9b; } .border-light-watermelon { border-color: #ffe0e3; } .border-watermelon { border-color: #ff7a87; } .border-deep-watermelon { border-color: #f55f6e; } .border-hover-red { border-color: #e85a69; } .border-dark-red { border-color: #c24c57; } .border-light-warning-gold { border-color: #fdf1dd; } .border-warning-gold { border-color: #f5bf5f; } .border-deep-gold { border-color: #dba240; } .border-border-line-purple { border-color: #b7b4d5; } .border-buzz-purple-10 { border-color: rgba(118, 62, 255, 0.1); } .border-buzz-purple-5 { border-color: rgba(118, 62, 255, 0.05); } .border-buzz-purple { border-color: #763eff; } .border-dark-purple { border-color: #502AAC; } .border-dead-state-purple { border-color: #d6d3eb; } .border-extra-light-navy-purple { border-color: #bf96ff; } .border-hover-purple { border-color: #6c39e8; } .border-light-navy-purple { border-color: #a369ff; } .border-navy-purple { border-color: #9f52ff; } .border-support-purple { border-color: #746DBC; } .hover\:border-transparent:hover { border-color: transparent; } .hover\:border-black:hover { border-color: #000; } .hover\:border-white:hover { border-color: #fff; } .hover\:border-gray-100:hover { border-color: #f7fafc; } .hover\:border-gray-200:hover { border-color: #edf2f7; } .hover\:border-gray-300:hover { border-color: #e2e8f0; } .hover\:border-gray-400:hover { border-color: #cbd5e0; } .hover\:border-gray-500:hover { border-color: #a0aec0; } .hover\:border-gray-600:hover { border-color: #718096; } .hover\:border-gray-700:hover { border-color: #4a5568; } .hover\:border-gray-800:hover { border-color: #2d3748; } .hover\:border-gray-900:hover { border-color: #1a202c; } .hover\:border-red-100:hover { border-color: #fff5f5; } .hover\:border-red-200:hover { border-color: #fed7d7; } .hover\:border-red-300:hover { border-color: #feb2b2; } .hover\:border-red-400:hover { border-color: #fc8181; } .hover\:border-red-500:hover { border-color: #f56565; } .hover\:border-red-600:hover { border-color: #e53e3e; } .hover\:border-red-700:hover { border-color: #c53030; } .hover\:border-red-800:hover { border-color: #9b2c2c; } .hover\:border-red-900:hover { border-color: #742a2a; } .hover\:border-orange-100:hover { border-color: #fffaf0; } .hover\:border-orange-200:hover { border-color: #feebc8; } .hover\:border-orange-300:hover { border-color: #fbd38d; } .hover\:border-orange-400:hover { border-color: #f6ad55; } .hover\:border-orange-500:hover { border-color: #ed8936; } .hover\:border-orange-600:hover { border-color: #dd6b20; } .hover\:border-orange-700:hover { border-color: #c05621; } .hover\:border-orange-800:hover { border-color: #9c4221; } .hover\:border-orange-900:hover { border-color: #7b341e; } .hover\:border-yellow-100:hover { border-color: #fffff0; } .hover\:border-yellow-200:hover { border-color: #fefcbf; } .hover\:border-yellow-300:hover { border-color: #faf089; } .hover\:border-yellow-400:hover { border-color: #f6e05e; } .hover\:border-yellow-500:hover { border-color: #ecc94b; } .hover\:border-yellow-600:hover { border-color: #d69e2e; } .hover\:border-yellow-700:hover { border-color: #b7791f; } .hover\:border-yellow-800:hover { border-color: #975a16; } .hover\:border-yellow-900:hover { border-color: #744210; } .hover\:border-green-100:hover { border-color: #f0fff4; } .hover\:border-green-200:hover { border-color: #c6f6d5; } .hover\:border-green-300:hover { border-color: #9ae6b4; } .hover\:border-green-400:hover { border-color: #68d391; } .hover\:border-green-500:hover { border-color: #48bb78; } .hover\:border-green-600:hover { border-color: #38a169; } .hover\:border-green-700:hover { border-color: #2f855a; } .hover\:border-green-800:hover { border-color: #276749; } .hover\:border-green-900:hover { border-color: #22543d; } .hover\:border-teal-100:hover { border-color: #e6fffa; } .hover\:border-teal-200:hover { border-color: #b2f5ea; } .hover\:border-teal-300:hover { border-color: #81e6d9; } .hover\:border-teal-400:hover { border-color: #4fd1c5; } .hover\:border-teal-500:hover { border-color: #38b2ac; } .hover\:border-teal-600:hover { border-color: #319795; } .hover\:border-teal-700:hover { border-color: #2c7a7b; } .hover\:border-teal-800:hover { border-color: #285e61; } .hover\:border-teal-900:hover { border-color: #234e52; } .hover\:border-blue-100:hover { border-color: #ebf8ff; } .hover\:border-blue-200:hover { border-color: #bee3f8; } .hover\:border-blue-300:hover { border-color: #90cdf4; } .hover\:border-blue-400:hover { border-color: #63b3ed; } .hover\:border-blue-500:hover { border-color: #4299e1; } .hover\:border-blue-600:hover { border-color: #3182ce; } .hover\:border-blue-700:hover { border-color: #2b6cb0; } .hover\:border-blue-800:hover { border-color: #2c5282; } .hover\:border-blue-900:hover { border-color: #2a4365; } .hover\:border-indigo-100:hover { border-color: #ebf4ff; } .hover\:border-indigo-200:hover { border-color: #c3dafe; } .hover\:border-indigo-300:hover { border-color: #a3bffa; } .hover\:border-indigo-400:hover { border-color: #7f9cf5; } .hover\:border-indigo-500:hover { border-color: #667eea; } .hover\:border-indigo-600:hover { border-color: #5a67d8; } .hover\:border-indigo-700:hover { border-color: #4c51bf; } .hover\:border-indigo-800:hover { border-color: #434190; } .hover\:border-indigo-900:hover { border-color: #3c366b; } .hover\:border-purple-100:hover { border-color: #faf5ff; } .hover\:border-purple-200:hover { border-color: #e9d8fd; } .hover\:border-purple-300:hover { border-color: #d6bcfa; } .hover\:border-purple-400:hover { border-color: #b794f4; } .hover\:border-purple-500:hover { border-color: #9f7aea; } .hover\:border-purple-600:hover { border-color: #805ad5; } .hover\:border-purple-700:hover { border-color: #6b46c1; } .hover\:border-purple-800:hover { border-color: #553c9a; } .hover\:border-purple-900:hover { border-color: #44337a; } .hover\:border-pink-100:hover { border-color: #fff5f7; } .hover\:border-pink-200:hover { border-color: #fed7e2; } .hover\:border-pink-300:hover { border-color: #fbb6ce; } .hover\:border-pink-400:hover { border-color: #f687b3; } .hover\:border-pink-500:hover { border-color: #ed64a6; } .hover\:border-pink-600:hover { border-color: #d53f8c; } .hover\:border-pink-700:hover { border-color: #b83280; } .hover\:border-pink-800:hover { border-color: #97266d; } .hover\:border-pink-900:hover { border-color: #702459; } .hover\:border-current:hover { border-color: currentColor; } .hover\:border-white-half:hover { border-color: rgba(255,255,255, 0.5); } .hover\:border-spur-grey:hover { border-color: #75757F; } .hover\:border-silver:hover { border-color: #c3c3c3; } .hover\:border-background-grey:hover { border-color: #f8f9fd; } .hover\:border-filter-grey:hover { border-color: #e3e7ef; } .hover\:border-spur-black:hover { border-color: #454553; } .hover\:border-spur-black-half:hover { border-color: rgba(69,69,83, 0.5); } .hover\:border-blue-jeans:hover { border-color: #60a7ff; } .hover\:border-blue-jeans-half:hover { border-color: rgba(96, 167, 255, 0.5); } .hover\:border-blue-jeans-20:hover { border-color: rgba(96, 167, 255, 0.2); } .hover\:border-blue-jeans-10:hover { border-color: rgba(96, 167, 255, 0.1); } .hover\:border-deep-blue-jeans:hover { border-color: #428ce8; } .hover\:border-light-blue-jeans:hover { border-color: #f8f9fd; } .hover\:border-aquamarine:hover { border-color: #60ebb4; } .hover\:border-deep-aquamarine:hover { border-color: #3ada9b; } .hover\:border-light-watermelon:hover { border-color: #ffe0e3; } .hover\:border-watermelon:hover { border-color: #ff7a87; } .hover\:border-deep-watermelon:hover { border-color: #f55f6e; } .hover\:border-hover-red:hover { border-color: #e85a69; } .hover\:border-dark-red:hover { border-color: #c24c57; } .hover\:border-light-warning-gold:hover { border-color: #fdf1dd; } .hover\:border-warning-gold:hover { border-color: #f5bf5f; } .hover\:border-deep-gold:hover { border-color: #dba240; } .hover\:border-border-line-purple:hover { border-color: #b7b4d5; } .hover\:border-buzz-purple-10:hover { border-color: rgba(118, 62, 255, 0.1); } .hover\:border-buzz-purple-5:hover { border-color: rgba(118, 62, 255, 0.05); } .hover\:border-buzz-purple:hover { border-color: #763eff; } .hover\:border-dark-purple:hover { border-color: #502AAC; } .hover\:border-dead-state-purple:hover { border-color: #d6d3eb; } .hover\:border-extra-light-navy-purple:hover { border-color: #bf96ff; } .hover\:border-hover-purple:hover { border-color: #6c39e8; } .hover\:border-light-navy-purple:hover { border-color: #a369ff; } .hover\:border-navy-purple:hover { border-color: #9f52ff; } .hover\:border-support-purple:hover { border-color: #746DBC; } .focus\:border-transparent:focus { border-color: transparent; } .focus\:border-black:focus { border-color: #000; } .focus\:border-white:focus { border-color: #fff; } .focus\:border-gray-100:focus { border-color: #f7fafc; } .focus\:border-gray-200:focus { border-color: #edf2f7; } .focus\:border-gray-300:focus { border-color: #e2e8f0; } .focus\:border-gray-400:focus { border-color: #cbd5e0; } .focus\:border-gray-500:focus { border-color: #a0aec0; } .focus\:border-gray-600:focus { border-color: #718096; } .focus\:border-gray-700:focus { border-color: #4a5568; } .focus\:border-gray-800:focus { border-color: #2d3748; } .focus\:border-gray-900:focus { border-color: #1a202c; } .focus\:border-red-100:focus { border-color: #fff5f5; } .focus\:border-red-200:focus { border-color: #fed7d7; } .focus\:border-red-300:focus { border-color: #feb2b2; } .focus\:border-red-400:focus { border-color: #fc8181; } .focus\:border-red-500:focus { border-color: #f56565; } .focus\:border-red-600:focus { border-color: #e53e3e; } .focus\:border-red-700:focus { border-color: #c