7946 lines
152 KiB
CSS
7946 lines
152 KiB
CSS
/* main.scss (drop-in)
|
|
VOR Core (base + utilities + components)
|
|
- No patterns/presets here (those belong in template/components later)
|
|
- Token-driven (variables.scss is the contract)
|
|
*/
|
|
/* palette.scss - Full Spectrum Master Map */
|
|
/* main.scss (drop-in)
|
|
VOR Core (base + utilities + components)
|
|
- No patterns/presets here (those belong in template/components later)
|
|
- Token-driven (variables.scss is the contract)
|
|
*/
|
|
/* variables.scss (drop-in) */
|
|
/* --------------------------------------------
|
|
Helpers
|
|
-------------------------------------------- */
|
|
/* --------------------------------------------
|
|
Breakpoints
|
|
-------------------------------------------- */
|
|
/* --------------------------------------------
|
|
Spacing
|
|
-------------------------------------------- */
|
|
/* --------------------------------------------
|
|
Elevation
|
|
-------------------------------------------- */
|
|
/* --------------------------------------------
|
|
Radius
|
|
-------------------------------------------- */
|
|
/* --------------------------------------------
|
|
Typography
|
|
-------------------------------------------- */
|
|
/* --------------------------------------------
|
|
Theme tokens
|
|
-------------------------------------------- */
|
|
:root {
|
|
/* Brand */
|
|
--primary: #0f766e;
|
|
--primary-light: #ccfbf1;
|
|
--primary-dark: #042f2e;
|
|
--accent: #f97316;
|
|
/* RGB channels for focus rings etc */
|
|
--primary-rgb: 15 118 110;
|
|
/* Status */
|
|
--success: #16a34a;
|
|
--info: #0d6efd;
|
|
--warning: #eab308;
|
|
--danger: #dc2626;
|
|
/* Surfaces */
|
|
--bg-app: #fbfcfd;
|
|
--bg-surface: #f8f9fa;
|
|
--bg-card: #ffffff;
|
|
--border-color: #e9ecef;
|
|
/* Text */
|
|
--text-main: #212529;
|
|
--text-muted: #495057;
|
|
--text-light: #adb5bd;
|
|
--text-inverse: #ffffff;
|
|
--table-header-bg: var(--bg-surface);
|
|
--table-striped-bg: #fbfcfd;
|
|
--table-hover-bg: rgba(var(--primary-rgb), 0.06);
|
|
}
|
|
|
|
[data-theme=dark] {
|
|
--primary: #5eead4;
|
|
--primary-light: #115e59;
|
|
--primary-rgb: 94 234 212;
|
|
--bg-app: #121416;
|
|
--bg-surface: #212529;
|
|
--bg-card: #343a40;
|
|
--border-color: #495057;
|
|
--text-main: #f8f9fa;
|
|
--text-muted: #ced4da;
|
|
--text-light: #6c757d;
|
|
--table-header-bg: var(--bg-surface);
|
|
--table-striped-bg: rgba(255,255,255,0.03);
|
|
--table-hover-bg: rgba(var(--primary-rgb), 0.10);
|
|
}
|
|
|
|
/* --------------------------------------------
|
|
SASS aliases to CSS vars
|
|
-------------------------------------------- */
|
|
/* --------------------------------------------
|
|
Z-index
|
|
-------------------------------------------- */
|
|
/* --------------------------------------------
|
|
Grid & layout maps
|
|
-------------------------------------------- */
|
|
/* --------------------------------------------
|
|
Components baseline tokens
|
|
-------------------------------------------- */
|
|
/* sizing maps */
|
|
/* motion */
|
|
/* focus ring */
|
|
/* sidebar */
|
|
/* --------------------------------------------
|
|
Base reset
|
|
-------------------------------------------- */
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html {
|
|
font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
|
|
line-height: 1.5;
|
|
-webkit-text-size-adjust: 100%;
|
|
-moz-tab-size: 4;
|
|
-o-tab-size: 4;
|
|
tab-size: 4;
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
font-size: 1rem;
|
|
font-weight: 400;
|
|
color: var(--text-main);
|
|
background-color: var(--bg-app);
|
|
transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1), color 250ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
/* Media defaults */
|
|
img, svg, video, canvas {
|
|
display: block;
|
|
max-width: 100%;
|
|
height: auto;
|
|
}
|
|
|
|
/* Links */
|
|
a {
|
|
color: inherit;
|
|
}
|
|
|
|
a:hover {
|
|
text-decoration: none;
|
|
}
|
|
|
|
/* Accessible focus (default; components can override) */
|
|
:focus-visible {
|
|
outline: none;
|
|
}
|
|
|
|
/* --------------------------------------------
|
|
Token helpers
|
|
-------------------------------------------- */
|
|
.bg-app {
|
|
background-color: var(--bg-app) !important;
|
|
}
|
|
|
|
.bg-surface {
|
|
background-color: var(--bg-surface) !important;
|
|
}
|
|
|
|
.bg-card {
|
|
background-color: var(--bg-card) !important;
|
|
}
|
|
|
|
.text-main {
|
|
color: var(--text-main) !important;
|
|
}
|
|
|
|
.text-muted {
|
|
color: var(--text-muted) !important;
|
|
}
|
|
|
|
.text-light {
|
|
color: var(--text-light) !important;
|
|
}
|
|
|
|
.text-inverse {
|
|
color: var(--text-inverse) !important;
|
|
}
|
|
|
|
/* --------------------------------------------
|
|
Containers / Grid (gutter via CSS vars)
|
|
-------------------------------------------- */
|
|
:root {
|
|
--gutter-x: 1rem;
|
|
--gutter-y: 0;
|
|
}
|
|
|
|
.container,
|
|
.container-fluid {
|
|
width: 100%;
|
|
padding-right: 0.5rem;
|
|
padding-left: 0.5rem;
|
|
margin-right: auto;
|
|
margin-left: auto;
|
|
}
|
|
|
|
@media (min-width: 576px) {
|
|
.container {
|
|
max-width: 540px;
|
|
}
|
|
}
|
|
@media (min-width: 768px) {
|
|
.container {
|
|
max-width: 720px;
|
|
}
|
|
}
|
|
@media (min-width: 992px) {
|
|
.container {
|
|
max-width: 960px;
|
|
}
|
|
}
|
|
@media (min-width: 1200px) {
|
|
.container {
|
|
max-width: 1140px;
|
|
}
|
|
}
|
|
@media (min-width: 1400px) {
|
|
.container {
|
|
max-width: 1320px;
|
|
}
|
|
}
|
|
.row {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
/* row controls gutters */
|
|
--gutter-x: 1rem;
|
|
--gutter-y: 0;
|
|
margin-top: calc(var(--gutter-y) * -1);
|
|
margin-right: calc(var(--gutter-x) / -2);
|
|
margin-left: calc(var(--gutter-x) / -2);
|
|
}
|
|
.row > * {
|
|
flex-shrink: 0;
|
|
width: 100%;
|
|
max-width: 100%;
|
|
padding-right: calc(var(--gutter-x) / 2);
|
|
padding-left: calc(var(--gutter-x) / 2);
|
|
margin-top: var(--gutter-y);
|
|
}
|
|
|
|
.row-wrap {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 14px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
/* gutter utilities */
|
|
.g-0 {
|
|
--gutter-x: 0;
|
|
--gutter-y: 0;
|
|
}
|
|
|
|
.gx-0 {
|
|
--gutter-x: 0;
|
|
}
|
|
|
|
.gy-0 {
|
|
--gutter-y: 0;
|
|
}
|
|
|
|
/* IMPORTANT: no @extend across media queries */
|
|
@media (min-width: 0) {
|
|
.col-1 {
|
|
width: 100%;
|
|
padding-right: calc(var(--gutter-x) / 2);
|
|
padding-left: calc(var(--gutter-x) / 2);
|
|
flex: 0 0 auto;
|
|
width: 8.3333333333%;
|
|
}
|
|
.col-2 {
|
|
width: 100%;
|
|
padding-right: calc(var(--gutter-x) / 2);
|
|
padding-left: calc(var(--gutter-x) / 2);
|
|
flex: 0 0 auto;
|
|
width: 16.6666666667%;
|
|
}
|
|
.col-3 {
|
|
width: 100%;
|
|
padding-right: calc(var(--gutter-x) / 2);
|
|
padding-left: calc(var(--gutter-x) / 2);
|
|
flex: 0 0 auto;
|
|
width: 25%;
|
|
}
|
|
.col-4 {
|
|
width: 100%;
|
|
padding-right: calc(var(--gutter-x) / 2);
|
|
padding-left: calc(var(--gutter-x) / 2);
|
|
flex: 0 0 auto;
|
|
width: 33.3333333333%;
|
|
}
|
|
.col-5 {
|
|
width: 100%;
|
|
padding-right: calc(var(--gutter-x) / 2);
|
|
padding-left: calc(var(--gutter-x) / 2);
|
|
flex: 0 0 auto;
|
|
width: 41.6666666667%;
|
|
}
|
|
.col-6 {
|
|
width: 100%;
|
|
padding-right: calc(var(--gutter-x) / 2);
|
|
padding-left: calc(var(--gutter-x) / 2);
|
|
flex: 0 0 auto;
|
|
width: 50%;
|
|
}
|
|
.col-7 {
|
|
width: 100%;
|
|
padding-right: calc(var(--gutter-x) / 2);
|
|
padding-left: calc(var(--gutter-x) / 2);
|
|
flex: 0 0 auto;
|
|
width: 58.3333333333%;
|
|
}
|
|
.col-8 {
|
|
width: 100%;
|
|
padding-right: calc(var(--gutter-x) / 2);
|
|
padding-left: calc(var(--gutter-x) / 2);
|
|
flex: 0 0 auto;
|
|
width: 66.6666666667%;
|
|
}
|
|
.col-9 {
|
|
width: 100%;
|
|
padding-right: calc(var(--gutter-x) / 2);
|
|
padding-left: calc(var(--gutter-x) / 2);
|
|
flex: 0 0 auto;
|
|
width: 75%;
|
|
}
|
|
.col-10 {
|
|
width: 100%;
|
|
padding-right: calc(var(--gutter-x) / 2);
|
|
padding-left: calc(var(--gutter-x) / 2);
|
|
flex: 0 0 auto;
|
|
width: 83.3333333333%;
|
|
}
|
|
.col-11 {
|
|
width: 100%;
|
|
padding-right: calc(var(--gutter-x) / 2);
|
|
padding-left: calc(var(--gutter-x) / 2);
|
|
flex: 0 0 auto;
|
|
width: 91.6666666667%;
|
|
}
|
|
.col-12 {
|
|
width: 100%;
|
|
padding-right: calc(var(--gutter-x) / 2);
|
|
padding-left: calc(var(--gutter-x) / 2);
|
|
flex: 0 0 auto;
|
|
width: 100%;
|
|
}
|
|
.col {
|
|
width: 100%;
|
|
padding-right: calc(var(--gutter-x) / 2);
|
|
padding-left: calc(var(--gutter-x) / 2);
|
|
flex: 1 0 0%;
|
|
}
|
|
.col-auto {
|
|
width: 100%;
|
|
padding-right: calc(var(--gutter-x) / 2);
|
|
padding-left: calc(var(--gutter-x) / 2);
|
|
flex: 0 0 auto;
|
|
width: auto;
|
|
}
|
|
}
|
|
@media (min-width: 576px) {
|
|
.col-sm-1 {
|
|
width: 100%;
|
|
padding-right: calc(var(--gutter-x) / 2);
|
|
padding-left: calc(var(--gutter-x) / 2);
|
|
flex: 0 0 auto;
|
|
width: 8.3333333333%;
|
|
}
|
|
.col-sm-2 {
|
|
width: 100%;
|
|
padding-right: calc(var(--gutter-x) / 2);
|
|
padding-left: calc(var(--gutter-x) / 2);
|
|
flex: 0 0 auto;
|
|
width: 16.6666666667%;
|
|
}
|
|
.col-sm-3 {
|
|
width: 100%;
|
|
padding-right: calc(var(--gutter-x) / 2);
|
|
padding-left: calc(var(--gutter-x) / 2);
|
|
flex: 0 0 auto;
|
|
width: 25%;
|
|
}
|
|
.col-sm-4 {
|
|
width: 100%;
|
|
padding-right: calc(var(--gutter-x) / 2);
|
|
padding-left: calc(var(--gutter-x) / 2);
|
|
flex: 0 0 auto;
|
|
width: 33.3333333333%;
|
|
}
|
|
.col-sm-5 {
|
|
width: 100%;
|
|
padding-right: calc(var(--gutter-x) / 2);
|
|
padding-left: calc(var(--gutter-x) / 2);
|
|
flex: 0 0 auto;
|
|
width: 41.6666666667%;
|
|
}
|
|
.col-sm-6 {
|
|
width: 100%;
|
|
padding-right: calc(var(--gutter-x) / 2);
|
|
padding-left: calc(var(--gutter-x) / 2);
|
|
flex: 0 0 auto;
|
|
width: 50%;
|
|
}
|
|
.col-sm-7 {
|
|
width: 100%;
|
|
padding-right: calc(var(--gutter-x) / 2);
|
|
padding-left: calc(var(--gutter-x) / 2);
|
|
flex: 0 0 auto;
|
|
width: 58.3333333333%;
|
|
}
|
|
.col-sm-8 {
|
|
width: 100%;
|
|
padding-right: calc(var(--gutter-x) / 2);
|
|
padding-left: calc(var(--gutter-x) / 2);
|
|
flex: 0 0 auto;
|
|
width: 66.6666666667%;
|
|
}
|
|
.col-sm-9 {
|
|
width: 100%;
|
|
padding-right: calc(var(--gutter-x) / 2);
|
|
padding-left: calc(var(--gutter-x) / 2);
|
|
flex: 0 0 auto;
|
|
width: 75%;
|
|
}
|
|
.col-sm-10 {
|
|
width: 100%;
|
|
padding-right: calc(var(--gutter-x) / 2);
|
|
padding-left: calc(var(--gutter-x) / 2);
|
|
flex: 0 0 auto;
|
|
width: 83.3333333333%;
|
|
}
|
|
.col-sm-11 {
|
|
width: 100%;
|
|
padding-right: calc(var(--gutter-x) / 2);
|
|
padding-left: calc(var(--gutter-x) / 2);
|
|
flex: 0 0 auto;
|
|
width: 91.6666666667%;
|
|
}
|
|
.col-sm-12 {
|
|
width: 100%;
|
|
padding-right: calc(var(--gutter-x) / 2);
|
|
padding-left: calc(var(--gutter-x) / 2);
|
|
flex: 0 0 auto;
|
|
width: 100%;
|
|
}
|
|
.col-sm {
|
|
width: 100%;
|
|
padding-right: calc(var(--gutter-x) / 2);
|
|
padding-left: calc(var(--gutter-x) / 2);
|
|
flex: 1 0 0%;
|
|
}
|
|
.col-sm-auto {
|
|
width: 100%;
|
|
padding-right: calc(var(--gutter-x) / 2);
|
|
padding-left: calc(var(--gutter-x) / 2);
|
|
flex: 0 0 auto;
|
|
width: auto;
|
|
}
|
|
}
|
|
@media (min-width: 768px) {
|
|
.col-md-1 {
|
|
width: 100%;
|
|
padding-right: calc(var(--gutter-x) / 2);
|
|
padding-left: calc(var(--gutter-x) / 2);
|
|
flex: 0 0 auto;
|
|
width: 8.3333333333%;
|
|
}
|
|
.col-md-2 {
|
|
width: 100%;
|
|
padding-right: calc(var(--gutter-x) / 2);
|
|
padding-left: calc(var(--gutter-x) / 2);
|
|
flex: 0 0 auto;
|
|
width: 16.6666666667%;
|
|
}
|
|
.col-md-3 {
|
|
width: 100%;
|
|
padding-right: calc(var(--gutter-x) / 2);
|
|
padding-left: calc(var(--gutter-x) / 2);
|
|
flex: 0 0 auto;
|
|
width: 25%;
|
|
}
|
|
.col-md-4 {
|
|
width: 100%;
|
|
padding-right: calc(var(--gutter-x) / 2);
|
|
padding-left: calc(var(--gutter-x) / 2);
|
|
flex: 0 0 auto;
|
|
width: 33.3333333333%;
|
|
}
|
|
.col-md-5 {
|
|
width: 100%;
|
|
padding-right: calc(var(--gutter-x) / 2);
|
|
padding-left: calc(var(--gutter-x) / 2);
|
|
flex: 0 0 auto;
|
|
width: 41.6666666667%;
|
|
}
|
|
.col-md-6 {
|
|
width: 100%;
|
|
padding-right: calc(var(--gutter-x) / 2);
|
|
padding-left: calc(var(--gutter-x) / 2);
|
|
flex: 0 0 auto;
|
|
width: 50%;
|
|
}
|
|
.col-md-7 {
|
|
width: 100%;
|
|
padding-right: calc(var(--gutter-x) / 2);
|
|
padding-left: calc(var(--gutter-x) / 2);
|
|
flex: 0 0 auto;
|
|
width: 58.3333333333%;
|
|
}
|
|
.col-md-8 {
|
|
width: 100%;
|
|
padding-right: calc(var(--gutter-x) / 2);
|
|
padding-left: calc(var(--gutter-x) / 2);
|
|
flex: 0 0 auto;
|
|
width: 66.6666666667%;
|
|
}
|
|
.col-md-9 {
|
|
width: 100%;
|
|
padding-right: calc(var(--gutter-x) / 2);
|
|
padding-left: calc(var(--gutter-x) / 2);
|
|
flex: 0 0 auto;
|
|
width: 75%;
|
|
}
|
|
.col-md-10 {
|
|
width: 100%;
|
|
padding-right: calc(var(--gutter-x) / 2);
|
|
padding-left: calc(var(--gutter-x) / 2);
|
|
flex: 0 0 auto;
|
|
width: 83.3333333333%;
|
|
}
|
|
.col-md-11 {
|
|
width: 100%;
|
|
padding-right: calc(var(--gutter-x) / 2);
|
|
padding-left: calc(var(--gutter-x) / 2);
|
|
flex: 0 0 auto;
|
|
width: 91.6666666667%;
|
|
}
|
|
.col-md-12 {
|
|
width: 100%;
|
|
padding-right: calc(var(--gutter-x) / 2);
|
|
padding-left: calc(var(--gutter-x) / 2);
|
|
flex: 0 0 auto;
|
|
width: 100%;
|
|
}
|
|
.col-md {
|
|
width: 100%;
|
|
padding-right: calc(var(--gutter-x) / 2);
|
|
padding-left: calc(var(--gutter-x) / 2);
|
|
flex: 1 0 0%;
|
|
}
|
|
.col-md-auto {
|
|
width: 100%;
|
|
padding-right: calc(var(--gutter-x) / 2);
|
|
padding-left: calc(var(--gutter-x) / 2);
|
|
flex: 0 0 auto;
|
|
width: auto;
|
|
}
|
|
}
|
|
@media (min-width: 992px) {
|
|
.col-lg-1 {
|
|
width: 100%;
|
|
padding-right: calc(var(--gutter-x) / 2);
|
|
padding-left: calc(var(--gutter-x) / 2);
|
|
flex: 0 0 auto;
|
|
width: 8.3333333333%;
|
|
}
|
|
.col-lg-2 {
|
|
width: 100%;
|
|
padding-right: calc(var(--gutter-x) / 2);
|
|
padding-left: calc(var(--gutter-x) / 2);
|
|
flex: 0 0 auto;
|
|
width: 16.6666666667%;
|
|
}
|
|
.col-lg-3 {
|
|
width: 100%;
|
|
padding-right: calc(var(--gutter-x) / 2);
|
|
padding-left: calc(var(--gutter-x) / 2);
|
|
flex: 0 0 auto;
|
|
width: 25%;
|
|
}
|
|
.col-lg-4 {
|
|
width: 100%;
|
|
padding-right: calc(var(--gutter-x) / 2);
|
|
padding-left: calc(var(--gutter-x) / 2);
|
|
flex: 0 0 auto;
|
|
width: 33.3333333333%;
|
|
}
|
|
.col-lg-5 {
|
|
width: 100%;
|
|
padding-right: calc(var(--gutter-x) / 2);
|
|
padding-left: calc(var(--gutter-x) / 2);
|
|
flex: 0 0 auto;
|
|
width: 41.6666666667%;
|
|
}
|
|
.col-lg-6 {
|
|
width: 100%;
|
|
padding-right: calc(var(--gutter-x) / 2);
|
|
padding-left: calc(var(--gutter-x) / 2);
|
|
flex: 0 0 auto;
|
|
width: 50%;
|
|
}
|
|
.col-lg-7 {
|
|
width: 100%;
|
|
padding-right: calc(var(--gutter-x) / 2);
|
|
padding-left: calc(var(--gutter-x) / 2);
|
|
flex: 0 0 auto;
|
|
width: 58.3333333333%;
|
|
}
|
|
.col-lg-8 {
|
|
width: 100%;
|
|
padding-right: calc(var(--gutter-x) / 2);
|
|
padding-left: calc(var(--gutter-x) / 2);
|
|
flex: 0 0 auto;
|
|
width: 66.6666666667%;
|
|
}
|
|
.col-lg-9 {
|
|
width: 100%;
|
|
padding-right: calc(var(--gutter-x) / 2);
|
|
padding-left: calc(var(--gutter-x) / 2);
|
|
flex: 0 0 auto;
|
|
width: 75%;
|
|
}
|
|
.col-lg-10 {
|
|
width: 100%;
|
|
padding-right: calc(var(--gutter-x) / 2);
|
|
padding-left: calc(var(--gutter-x) / 2);
|
|
flex: 0 0 auto;
|
|
width: 83.3333333333%;
|
|
}
|
|
.col-lg-11 {
|
|
width: 100%;
|
|
padding-right: calc(var(--gutter-x) / 2);
|
|
padding-left: calc(var(--gutter-x) / 2);
|
|
flex: 0 0 auto;
|
|
width: 91.6666666667%;
|
|
}
|
|
.col-lg-12 {
|
|
width: 100%;
|
|
padding-right: calc(var(--gutter-x) / 2);
|
|
padding-left: calc(var(--gutter-x) / 2);
|
|
flex: 0 0 auto;
|
|
width: 100%;
|
|
}
|
|
.col-lg {
|
|
width: 100%;
|
|
padding-right: calc(var(--gutter-x) / 2);
|
|
padding-left: calc(var(--gutter-x) / 2);
|
|
flex: 1 0 0%;
|
|
}
|
|
.col-lg-auto {
|
|
width: 100%;
|
|
padding-right: calc(var(--gutter-x) / 2);
|
|
padding-left: calc(var(--gutter-x) / 2);
|
|
flex: 0 0 auto;
|
|
width: auto;
|
|
}
|
|
}
|
|
@media (min-width: 1200px) {
|
|
.col-xl-1 {
|
|
width: 100%;
|
|
padding-right: calc(var(--gutter-x) / 2);
|
|
padding-left: calc(var(--gutter-x) / 2);
|
|
flex: 0 0 auto;
|
|
width: 8.3333333333%;
|
|
}
|
|
.col-xl-2 {
|
|
width: 100%;
|
|
padding-right: calc(var(--gutter-x) / 2);
|
|
padding-left: calc(var(--gutter-x) / 2);
|
|
flex: 0 0 auto;
|
|
width: 16.6666666667%;
|
|
}
|
|
.col-xl-3 {
|
|
width: 100%;
|
|
padding-right: calc(var(--gutter-x) / 2);
|
|
padding-left: calc(var(--gutter-x) / 2);
|
|
flex: 0 0 auto;
|
|
width: 25%;
|
|
}
|
|
.col-xl-4 {
|
|
width: 100%;
|
|
padding-right: calc(var(--gutter-x) / 2);
|
|
padding-left: calc(var(--gutter-x) / 2);
|
|
flex: 0 0 auto;
|
|
width: 33.3333333333%;
|
|
}
|
|
.col-xl-5 {
|
|
width: 100%;
|
|
padding-right: calc(var(--gutter-x) / 2);
|
|
padding-left: calc(var(--gutter-x) / 2);
|
|
flex: 0 0 auto;
|
|
width: 41.6666666667%;
|
|
}
|
|
.col-xl-6 {
|
|
width: 100%;
|
|
padding-right: calc(var(--gutter-x) / 2);
|
|
padding-left: calc(var(--gutter-x) / 2);
|
|
flex: 0 0 auto;
|
|
width: 50%;
|
|
}
|
|
.col-xl-7 {
|
|
width: 100%;
|
|
padding-right: calc(var(--gutter-x) / 2);
|
|
padding-left: calc(var(--gutter-x) / 2);
|
|
flex: 0 0 auto;
|
|
width: 58.3333333333%;
|
|
}
|
|
.col-xl-8 {
|
|
width: 100%;
|
|
padding-right: calc(var(--gutter-x) / 2);
|
|
padding-left: calc(var(--gutter-x) / 2);
|
|
flex: 0 0 auto;
|
|
width: 66.6666666667%;
|
|
}
|
|
.col-xl-9 {
|
|
width: 100%;
|
|
padding-right: calc(var(--gutter-x) / 2);
|
|
padding-left: calc(var(--gutter-x) / 2);
|
|
flex: 0 0 auto;
|
|
width: 75%;
|
|
}
|
|
.col-xl-10 {
|
|
width: 100%;
|
|
padding-right: calc(var(--gutter-x) / 2);
|
|
padding-left: calc(var(--gutter-x) / 2);
|
|
flex: 0 0 auto;
|
|
width: 83.3333333333%;
|
|
}
|
|
.col-xl-11 {
|
|
width: 100%;
|
|
padding-right: calc(var(--gutter-x) / 2);
|
|
padding-left: calc(var(--gutter-x) / 2);
|
|
flex: 0 0 auto;
|
|
width: 91.6666666667%;
|
|
}
|
|
.col-xl-12 {
|
|
width: 100%;
|
|
padding-right: calc(var(--gutter-x) / 2);
|
|
padding-left: calc(var(--gutter-x) / 2);
|
|
flex: 0 0 auto;
|
|
width: 100%;
|
|
}
|
|
.col-xl {
|
|
width: 100%;
|
|
padding-right: calc(var(--gutter-x) / 2);
|
|
padding-left: calc(var(--gutter-x) / 2);
|
|
flex: 1 0 0%;
|
|
}
|
|
.col-xl-auto {
|
|
width: 100%;
|
|
padding-right: calc(var(--gutter-x) / 2);
|
|
padding-left: calc(var(--gutter-x) / 2);
|
|
flex: 0 0 auto;
|
|
width: auto;
|
|
}
|
|
}
|
|
@media (min-width: 1400px) {
|
|
.col-xxl-1 {
|
|
width: 100%;
|
|
padding-right: calc(var(--gutter-x) / 2);
|
|
padding-left: calc(var(--gutter-x) / 2);
|
|
flex: 0 0 auto;
|
|
width: 8.3333333333%;
|
|
}
|
|
.col-xxl-2 {
|
|
width: 100%;
|
|
padding-right: calc(var(--gutter-x) / 2);
|
|
padding-left: calc(var(--gutter-x) / 2);
|
|
flex: 0 0 auto;
|
|
width: 16.6666666667%;
|
|
}
|
|
.col-xxl-3 {
|
|
width: 100%;
|
|
padding-right: calc(var(--gutter-x) / 2);
|
|
padding-left: calc(var(--gutter-x) / 2);
|
|
flex: 0 0 auto;
|
|
width: 25%;
|
|
}
|
|
.col-xxl-4 {
|
|
width: 100%;
|
|
padding-right: calc(var(--gutter-x) / 2);
|
|
padding-left: calc(var(--gutter-x) / 2);
|
|
flex: 0 0 auto;
|
|
width: 33.3333333333%;
|
|
}
|
|
.col-xxl-5 {
|
|
width: 100%;
|
|
padding-right: calc(var(--gutter-x) / 2);
|
|
padding-left: calc(var(--gutter-x) / 2);
|
|
flex: 0 0 auto;
|
|
width: 41.6666666667%;
|
|
}
|
|
.col-xxl-6 {
|
|
width: 100%;
|
|
padding-right: calc(var(--gutter-x) / 2);
|
|
padding-left: calc(var(--gutter-x) / 2);
|
|
flex: 0 0 auto;
|
|
width: 50%;
|
|
}
|
|
.col-xxl-7 {
|
|
width: 100%;
|
|
padding-right: calc(var(--gutter-x) / 2);
|
|
padding-left: calc(var(--gutter-x) / 2);
|
|
flex: 0 0 auto;
|
|
width: 58.3333333333%;
|
|
}
|
|
.col-xxl-8 {
|
|
width: 100%;
|
|
padding-right: calc(var(--gutter-x) / 2);
|
|
padding-left: calc(var(--gutter-x) / 2);
|
|
flex: 0 0 auto;
|
|
width: 66.6666666667%;
|
|
}
|
|
.col-xxl-9 {
|
|
width: 100%;
|
|
padding-right: calc(var(--gutter-x) / 2);
|
|
padding-left: calc(var(--gutter-x) / 2);
|
|
flex: 0 0 auto;
|
|
width: 75%;
|
|
}
|
|
.col-xxl-10 {
|
|
width: 100%;
|
|
padding-right: calc(var(--gutter-x) / 2);
|
|
padding-left: calc(var(--gutter-x) / 2);
|
|
flex: 0 0 auto;
|
|
width: 83.3333333333%;
|
|
}
|
|
.col-xxl-11 {
|
|
width: 100%;
|
|
padding-right: calc(var(--gutter-x) / 2);
|
|
padding-left: calc(var(--gutter-x) / 2);
|
|
flex: 0 0 auto;
|
|
width: 91.6666666667%;
|
|
}
|
|
.col-xxl-12 {
|
|
width: 100%;
|
|
padding-right: calc(var(--gutter-x) / 2);
|
|
padding-left: calc(var(--gutter-x) / 2);
|
|
flex: 0 0 auto;
|
|
width: 100%;
|
|
}
|
|
.col-xxl {
|
|
width: 100%;
|
|
padding-right: calc(var(--gutter-x) / 2);
|
|
padding-left: calc(var(--gutter-x) / 2);
|
|
flex: 1 0 0%;
|
|
}
|
|
.col-xxl-auto {
|
|
width: 100%;
|
|
padding-right: calc(var(--gutter-x) / 2);
|
|
padding-left: calc(var(--gutter-x) / 2);
|
|
flex: 0 0 auto;
|
|
width: auto;
|
|
}
|
|
}
|
|
/* --------------------------------------------
|
|
Display / Flex utilities
|
|
-------------------------------------------- */
|
|
@media (min-width: 0) {
|
|
.d-none {
|
|
display: none !important;
|
|
}
|
|
.d-block {
|
|
display: block !important;
|
|
}
|
|
.d-inline {
|
|
display: inline !important;
|
|
}
|
|
.d-inline-block {
|
|
display: inline-block !important;
|
|
}
|
|
.d-flex {
|
|
display: flex !important;
|
|
}
|
|
.d-inline-flex {
|
|
display: inline-flex !important;
|
|
}
|
|
.d-grid {
|
|
display: grid !important;
|
|
}
|
|
.justify-start {
|
|
justify-content: flex-start !important;
|
|
}
|
|
.justify-end {
|
|
justify-content: flex-end !important;
|
|
}
|
|
.justify-center {
|
|
justify-content: center !important;
|
|
}
|
|
.justify-between {
|
|
justify-content: space-between !important;
|
|
}
|
|
.justify-around {
|
|
justify-content: space-around !important;
|
|
}
|
|
.justify-evenly {
|
|
justify-content: space-evenly !important;
|
|
}
|
|
.align-start {
|
|
align-items: flex-start !important;
|
|
}
|
|
.align-end {
|
|
align-items: flex-end !important;
|
|
}
|
|
.align-center {
|
|
align-items: center !important;
|
|
}
|
|
.align-baseline {
|
|
align-items: baseline !important;
|
|
}
|
|
.align-stretch {
|
|
align-items: stretch !important;
|
|
}
|
|
.flex-row {
|
|
flex-direction: row !important;
|
|
}
|
|
.flex-row-reverse {
|
|
flex-direction: row-reverse !important;
|
|
}
|
|
.flex-column {
|
|
flex-direction: column !important;
|
|
}
|
|
.flex-column-reverse {
|
|
flex-direction: column-reverse !important;
|
|
}
|
|
}
|
|
@media (min-width: 576px) {
|
|
.d-sm-none {
|
|
display: none !important;
|
|
}
|
|
.d-sm-block {
|
|
display: block !important;
|
|
}
|
|
.d-sm-inline {
|
|
display: inline !important;
|
|
}
|
|
.d-sm-inline-block {
|
|
display: inline-block !important;
|
|
}
|
|
.d-sm-flex {
|
|
display: flex !important;
|
|
}
|
|
.d-sm-inline-flex {
|
|
display: inline-flex !important;
|
|
}
|
|
.d-sm-grid {
|
|
display: grid !important;
|
|
}
|
|
.justify-sm-start {
|
|
justify-content: flex-start !important;
|
|
}
|
|
.justify-sm-end {
|
|
justify-content: flex-end !important;
|
|
}
|
|
.justify-sm-center {
|
|
justify-content: center !important;
|
|
}
|
|
.justify-sm-between {
|
|
justify-content: space-between !important;
|
|
}
|
|
.justify-sm-around {
|
|
justify-content: space-around !important;
|
|
}
|
|
.justify-sm-evenly {
|
|
justify-content: space-evenly !important;
|
|
}
|
|
.align-sm-start {
|
|
align-items: flex-start !important;
|
|
}
|
|
.align-sm-end {
|
|
align-items: flex-end !important;
|
|
}
|
|
.align-sm-center {
|
|
align-items: center !important;
|
|
}
|
|
.align-sm-baseline {
|
|
align-items: baseline !important;
|
|
}
|
|
.align-sm-stretch {
|
|
align-items: stretch !important;
|
|
}
|
|
.flex-sm-row {
|
|
flex-direction: row !important;
|
|
}
|
|
.flex-sm-row-reverse {
|
|
flex-direction: row-reverse !important;
|
|
}
|
|
.flex-sm-column {
|
|
flex-direction: column !important;
|
|
}
|
|
.flex-sm-column-reverse {
|
|
flex-direction: column-reverse !important;
|
|
}
|
|
}
|
|
@media (min-width: 768px) {
|
|
.d-md-none {
|
|
display: none !important;
|
|
}
|
|
.d-md-block {
|
|
display: block !important;
|
|
}
|
|
.d-md-inline {
|
|
display: inline !important;
|
|
}
|
|
.d-md-inline-block {
|
|
display: inline-block !important;
|
|
}
|
|
.d-md-flex {
|
|
display: flex !important;
|
|
}
|
|
.d-md-inline-flex {
|
|
display: inline-flex !important;
|
|
}
|
|
.d-md-grid {
|
|
display: grid !important;
|
|
}
|
|
.justify-md-start {
|
|
justify-content: flex-start !important;
|
|
}
|
|
.justify-md-end {
|
|
justify-content: flex-end !important;
|
|
}
|
|
.justify-md-center {
|
|
justify-content: center !important;
|
|
}
|
|
.justify-md-between {
|
|
justify-content: space-between !important;
|
|
}
|
|
.justify-md-around {
|
|
justify-content: space-around !important;
|
|
}
|
|
.justify-md-evenly {
|
|
justify-content: space-evenly !important;
|
|
}
|
|
.align-md-start {
|
|
align-items: flex-start !important;
|
|
}
|
|
.align-md-end {
|
|
align-items: flex-end !important;
|
|
}
|
|
.align-md-center {
|
|
align-items: center !important;
|
|
}
|
|
.align-md-baseline {
|
|
align-items: baseline !important;
|
|
}
|
|
.align-md-stretch {
|
|
align-items: stretch !important;
|
|
}
|
|
.flex-md-row {
|
|
flex-direction: row !important;
|
|
}
|
|
.flex-md-row-reverse {
|
|
flex-direction: row-reverse !important;
|
|
}
|
|
.flex-md-column {
|
|
flex-direction: column !important;
|
|
}
|
|
.flex-md-column-reverse {
|
|
flex-direction: column-reverse !important;
|
|
}
|
|
}
|
|
@media (min-width: 992px) {
|
|
.d-lg-none {
|
|
display: none !important;
|
|
}
|
|
.d-lg-block {
|
|
display: block !important;
|
|
}
|
|
.d-lg-inline {
|
|
display: inline !important;
|
|
}
|
|
.d-lg-inline-block {
|
|
display: inline-block !important;
|
|
}
|
|
.d-lg-flex {
|
|
display: flex !important;
|
|
}
|
|
.d-lg-inline-flex {
|
|
display: inline-flex !important;
|
|
}
|
|
.d-lg-grid {
|
|
display: grid !important;
|
|
}
|
|
.justify-lg-start {
|
|
justify-content: flex-start !important;
|
|
}
|
|
.justify-lg-end {
|
|
justify-content: flex-end !important;
|
|
}
|
|
.justify-lg-center {
|
|
justify-content: center !important;
|
|
}
|
|
.justify-lg-between {
|
|
justify-content: space-between !important;
|
|
}
|
|
.justify-lg-around {
|
|
justify-content: space-around !important;
|
|
}
|
|
.justify-lg-evenly {
|
|
justify-content: space-evenly !important;
|
|
}
|
|
.align-lg-start {
|
|
align-items: flex-start !important;
|
|
}
|
|
.align-lg-end {
|
|
align-items: flex-end !important;
|
|
}
|
|
.align-lg-center {
|
|
align-items: center !important;
|
|
}
|
|
.align-lg-baseline {
|
|
align-items: baseline !important;
|
|
}
|
|
.align-lg-stretch {
|
|
align-items: stretch !important;
|
|
}
|
|
.flex-lg-row {
|
|
flex-direction: row !important;
|
|
}
|
|
.flex-lg-row-reverse {
|
|
flex-direction: row-reverse !important;
|
|
}
|
|
.flex-lg-column {
|
|
flex-direction: column !important;
|
|
}
|
|
.flex-lg-column-reverse {
|
|
flex-direction: column-reverse !important;
|
|
}
|
|
}
|
|
@media (min-width: 1200px) {
|
|
.d-xl-none {
|
|
display: none !important;
|
|
}
|
|
.d-xl-block {
|
|
display: block !important;
|
|
}
|
|
.d-xl-inline {
|
|
display: inline !important;
|
|
}
|
|
.d-xl-inline-block {
|
|
display: inline-block !important;
|
|
}
|
|
.d-xl-flex {
|
|
display: flex !important;
|
|
}
|
|
.d-xl-inline-flex {
|
|
display: inline-flex !important;
|
|
}
|
|
.d-xl-grid {
|
|
display: grid !important;
|
|
}
|
|
.justify-xl-start {
|
|
justify-content: flex-start !important;
|
|
}
|
|
.justify-xl-end {
|
|
justify-content: flex-end !important;
|
|
}
|
|
.justify-xl-center {
|
|
justify-content: center !important;
|
|
}
|
|
.justify-xl-between {
|
|
justify-content: space-between !important;
|
|
}
|
|
.justify-xl-around {
|
|
justify-content: space-around !important;
|
|
}
|
|
.justify-xl-evenly {
|
|
justify-content: space-evenly !important;
|
|
}
|
|
.align-xl-start {
|
|
align-items: flex-start !important;
|
|
}
|
|
.align-xl-end {
|
|
align-items: flex-end !important;
|
|
}
|
|
.align-xl-center {
|
|
align-items: center !important;
|
|
}
|
|
.align-xl-baseline {
|
|
align-items: baseline !important;
|
|
}
|
|
.align-xl-stretch {
|
|
align-items: stretch !important;
|
|
}
|
|
.flex-xl-row {
|
|
flex-direction: row !important;
|
|
}
|
|
.flex-xl-row-reverse {
|
|
flex-direction: row-reverse !important;
|
|
}
|
|
.flex-xl-column {
|
|
flex-direction: column !important;
|
|
}
|
|
.flex-xl-column-reverse {
|
|
flex-direction: column-reverse !important;
|
|
}
|
|
}
|
|
@media (min-width: 1400px) {
|
|
.d-xxl-none {
|
|
display: none !important;
|
|
}
|
|
.d-xxl-block {
|
|
display: block !important;
|
|
}
|
|
.d-xxl-inline {
|
|
display: inline !important;
|
|
}
|
|
.d-xxl-inline-block {
|
|
display: inline-block !important;
|
|
}
|
|
.d-xxl-flex {
|
|
display: flex !important;
|
|
}
|
|
.d-xxl-inline-flex {
|
|
display: inline-flex !important;
|
|
}
|
|
.d-xxl-grid {
|
|
display: grid !important;
|
|
}
|
|
.justify-xxl-start {
|
|
justify-content: flex-start !important;
|
|
}
|
|
.justify-xxl-end {
|
|
justify-content: flex-end !important;
|
|
}
|
|
.justify-xxl-center {
|
|
justify-content: center !important;
|
|
}
|
|
.justify-xxl-between {
|
|
justify-content: space-between !important;
|
|
}
|
|
.justify-xxl-around {
|
|
justify-content: space-around !important;
|
|
}
|
|
.justify-xxl-evenly {
|
|
justify-content: space-evenly !important;
|
|
}
|
|
.align-xxl-start {
|
|
align-items: flex-start !important;
|
|
}
|
|
.align-xxl-end {
|
|
align-items: flex-end !important;
|
|
}
|
|
.align-xxl-center {
|
|
align-items: center !important;
|
|
}
|
|
.align-xxl-baseline {
|
|
align-items: baseline !important;
|
|
}
|
|
.align-xxl-stretch {
|
|
align-items: stretch !important;
|
|
}
|
|
.flex-xxl-row {
|
|
flex-direction: row !important;
|
|
}
|
|
.flex-xxl-row-reverse {
|
|
flex-direction: row-reverse !important;
|
|
}
|
|
.flex-xxl-column {
|
|
flex-direction: column !important;
|
|
}
|
|
.flex-xxl-column-reverse {
|
|
flex-direction: column-reverse !important;
|
|
}
|
|
}
|
|
/* Convenience */
|
|
.flex-column {
|
|
flex-direction: column !important;
|
|
}
|
|
|
|
.mt-auto {
|
|
margin-top: auto !important;
|
|
}
|
|
|
|
.min-w-0 {
|
|
min-width: 0 !important;
|
|
}
|
|
|
|
.w-100 {
|
|
width: 100% !important;
|
|
}
|
|
|
|
.h-100 {
|
|
height: 100% !important;
|
|
}
|
|
|
|
/* --------------------------------------------
|
|
Spacing utilities (generator)
|
|
-------------------------------------------- */
|
|
@media (min-width: 0) {
|
|
.mt-0 {
|
|
margin-top: 0 !important;
|
|
}
|
|
.mt-1 {
|
|
margin-top: 0.25rem !important;
|
|
}
|
|
.mt-2 {
|
|
margin-top: 0.5rem !important;
|
|
}
|
|
.mt-3 {
|
|
margin-top: 1rem !important;
|
|
}
|
|
.mt-4 {
|
|
margin-top: 1.5rem !important;
|
|
}
|
|
.mt-5 {
|
|
margin-top: 2rem !important;
|
|
}
|
|
.mt-6 {
|
|
margin-top: 3rem !important;
|
|
}
|
|
.mt-7 {
|
|
margin-top: 4rem !important;
|
|
}
|
|
.mb-0 {
|
|
margin-bottom: 0 !important;
|
|
}
|
|
.mb-1 {
|
|
margin-bottom: 0.25rem !important;
|
|
}
|
|
.mb-2 {
|
|
margin-bottom: 0.5rem !important;
|
|
}
|
|
.mb-3 {
|
|
margin-bottom: 1rem !important;
|
|
}
|
|
.mb-4 {
|
|
margin-bottom: 1.5rem !important;
|
|
}
|
|
.mb-5 {
|
|
margin-bottom: 2rem !important;
|
|
}
|
|
.mb-6 {
|
|
margin-bottom: 3rem !important;
|
|
}
|
|
.mb-7 {
|
|
margin-bottom: 4rem !important;
|
|
}
|
|
.ms-0 {
|
|
margin-start: 0 !important;
|
|
}
|
|
.ms-1 {
|
|
margin-start: 0.25rem !important;
|
|
}
|
|
.ms-2 {
|
|
margin-start: 0.5rem !important;
|
|
}
|
|
.ms-3 {
|
|
margin-start: 1rem !important;
|
|
}
|
|
.ms-4 {
|
|
margin-start: 1.5rem !important;
|
|
}
|
|
.ms-5 {
|
|
margin-start: 2rem !important;
|
|
}
|
|
.ms-6 {
|
|
margin-start: 3rem !important;
|
|
}
|
|
.ms-7 {
|
|
margin-start: 4rem !important;
|
|
}
|
|
.me-0 {
|
|
margin-end: 0 !important;
|
|
}
|
|
.me-1 {
|
|
margin-end: 0.25rem !important;
|
|
}
|
|
.me-2 {
|
|
margin-end: 0.5rem !important;
|
|
}
|
|
.me-3 {
|
|
margin-end: 1rem !important;
|
|
}
|
|
.me-4 {
|
|
margin-end: 1.5rem !important;
|
|
}
|
|
.me-5 {
|
|
margin-end: 2rem !important;
|
|
}
|
|
.me-6 {
|
|
margin-end: 3rem !important;
|
|
}
|
|
.me-7 {
|
|
margin-end: 4rem !important;
|
|
}
|
|
.mx-0 {
|
|
margin-left: 0 !important;
|
|
margin-right: 0 !important;
|
|
}
|
|
.mx-1 {
|
|
margin-left: 0.25rem !important;
|
|
margin-right: 0.25rem !important;
|
|
}
|
|
.mx-2 {
|
|
margin-left: 0.5rem !important;
|
|
margin-right: 0.5rem !important;
|
|
}
|
|
.mx-3 {
|
|
margin-left: 1rem !important;
|
|
margin-right: 1rem !important;
|
|
}
|
|
.mx-4 {
|
|
margin-left: 1.5rem !important;
|
|
margin-right: 1.5rem !important;
|
|
}
|
|
.mx-5 {
|
|
margin-left: 2rem !important;
|
|
margin-right: 2rem !important;
|
|
}
|
|
.mx-6 {
|
|
margin-left: 3rem !important;
|
|
margin-right: 3rem !important;
|
|
}
|
|
.mx-7 {
|
|
margin-left: 4rem !important;
|
|
margin-right: 4rem !important;
|
|
}
|
|
.my-0 {
|
|
margin-top: 0 !important;
|
|
margin-bottom: 0 !important;
|
|
}
|
|
.my-1 {
|
|
margin-top: 0.25rem !important;
|
|
margin-bottom: 0.25rem !important;
|
|
}
|
|
.my-2 {
|
|
margin-top: 0.5rem !important;
|
|
margin-bottom: 0.5rem !important;
|
|
}
|
|
.my-3 {
|
|
margin-top: 1rem !important;
|
|
margin-bottom: 1rem !important;
|
|
}
|
|
.my-4 {
|
|
margin-top: 1.5rem !important;
|
|
margin-bottom: 1.5rem !important;
|
|
}
|
|
.my-5 {
|
|
margin-top: 2rem !important;
|
|
margin-bottom: 2rem !important;
|
|
}
|
|
.my-6 {
|
|
margin-top: 3rem !important;
|
|
margin-bottom: 3rem !important;
|
|
}
|
|
.my-7 {
|
|
margin-top: 4rem !important;
|
|
margin-bottom: 4rem !important;
|
|
}
|
|
.ma-0 {
|
|
margin: 0 !important;
|
|
}
|
|
.ma-1 {
|
|
margin: 0.25rem !important;
|
|
}
|
|
.ma-2 {
|
|
margin: 0.5rem !important;
|
|
}
|
|
.ma-3 {
|
|
margin: 1rem !important;
|
|
}
|
|
.ma-4 {
|
|
margin: 1.5rem !important;
|
|
}
|
|
.ma-5 {
|
|
margin: 2rem !important;
|
|
}
|
|
.ma-6 {
|
|
margin: 3rem !important;
|
|
}
|
|
.ma-7 {
|
|
margin: 4rem !important;
|
|
}
|
|
.pt-0 {
|
|
padding-top: 0 !important;
|
|
}
|
|
.pt-1 {
|
|
padding-top: 0.25rem !important;
|
|
}
|
|
.pt-2 {
|
|
padding-top: 0.5rem !important;
|
|
}
|
|
.pt-3 {
|
|
padding-top: 1rem !important;
|
|
}
|
|
.pt-4 {
|
|
padding-top: 1.5rem !important;
|
|
}
|
|
.pt-5 {
|
|
padding-top: 2rem !important;
|
|
}
|
|
.pt-6 {
|
|
padding-top: 3rem !important;
|
|
}
|
|
.pt-7 {
|
|
padding-top: 4rem !important;
|
|
}
|
|
.pb-0 {
|
|
padding-bottom: 0 !important;
|
|
}
|
|
.pb-1 {
|
|
padding-bottom: 0.25rem !important;
|
|
}
|
|
.pb-2 {
|
|
padding-bottom: 0.5rem !important;
|
|
}
|
|
.pb-3 {
|
|
padding-bottom: 1rem !important;
|
|
}
|
|
.pb-4 {
|
|
padding-bottom: 1.5rem !important;
|
|
}
|
|
.pb-5 {
|
|
padding-bottom: 2rem !important;
|
|
}
|
|
.pb-6 {
|
|
padding-bottom: 3rem !important;
|
|
}
|
|
.pb-7 {
|
|
padding-bottom: 4rem !important;
|
|
}
|
|
.ps-0 {
|
|
padding-start: 0 !important;
|
|
}
|
|
.ps-1 {
|
|
padding-start: 0.25rem !important;
|
|
}
|
|
.ps-2 {
|
|
padding-start: 0.5rem !important;
|
|
}
|
|
.ps-3 {
|
|
padding-start: 1rem !important;
|
|
}
|
|
.ps-4 {
|
|
padding-start: 1.5rem !important;
|
|
}
|
|
.ps-5 {
|
|
padding-start: 2rem !important;
|
|
}
|
|
.ps-6 {
|
|
padding-start: 3rem !important;
|
|
}
|
|
.ps-7 {
|
|
padding-start: 4rem !important;
|
|
}
|
|
.pe-0 {
|
|
padding-end: 0 !important;
|
|
}
|
|
.pe-1 {
|
|
padding-end: 0.25rem !important;
|
|
}
|
|
.pe-2 {
|
|
padding-end: 0.5rem !important;
|
|
}
|
|
.pe-3 {
|
|
padding-end: 1rem !important;
|
|
}
|
|
.pe-4 {
|
|
padding-end: 1.5rem !important;
|
|
}
|
|
.pe-5 {
|
|
padding-end: 2rem !important;
|
|
}
|
|
.pe-6 {
|
|
padding-end: 3rem !important;
|
|
}
|
|
.pe-7 {
|
|
padding-end: 4rem !important;
|
|
}
|
|
.px-0 {
|
|
padding-left: 0 !important;
|
|
padding-right: 0 !important;
|
|
}
|
|
.px-1 {
|
|
padding-left: 0.25rem !important;
|
|
padding-right: 0.25rem !important;
|
|
}
|
|
.px-2 {
|
|
padding-left: 0.5rem !important;
|
|
padding-right: 0.5rem !important;
|
|
}
|
|
.px-3 {
|
|
padding-left: 1rem !important;
|
|
padding-right: 1rem !important;
|
|
}
|
|
.px-4 {
|
|
padding-left: 1.5rem !important;
|
|
padding-right: 1.5rem !important;
|
|
}
|
|
.px-5 {
|
|
padding-left: 2rem !important;
|
|
padding-right: 2rem !important;
|
|
}
|
|
.px-6 {
|
|
padding-left: 3rem !important;
|
|
padding-right: 3rem !important;
|
|
}
|
|
.px-7 {
|
|
padding-left: 4rem !important;
|
|
padding-right: 4rem !important;
|
|
}
|
|
.py-0 {
|
|
padding-top: 0 !important;
|
|
padding-bottom: 0 !important;
|
|
}
|
|
.py-1 {
|
|
padding-top: 0.25rem !important;
|
|
padding-bottom: 0.25rem !important;
|
|
}
|
|
.py-2 {
|
|
padding-top: 0.5rem !important;
|
|
padding-bottom: 0.5rem !important;
|
|
}
|
|
.py-3 {
|
|
padding-top: 1rem !important;
|
|
padding-bottom: 1rem !important;
|
|
}
|
|
.py-4 {
|
|
padding-top: 1.5rem !important;
|
|
padding-bottom: 1.5rem !important;
|
|
}
|
|
.py-5 {
|
|
padding-top: 2rem !important;
|
|
padding-bottom: 2rem !important;
|
|
}
|
|
.py-6 {
|
|
padding-top: 3rem !important;
|
|
padding-bottom: 3rem !important;
|
|
}
|
|
.py-7 {
|
|
padding-top: 4rem !important;
|
|
padding-bottom: 4rem !important;
|
|
}
|
|
.pa-0 {
|
|
padding: 0 !important;
|
|
}
|
|
.pa-1 {
|
|
padding: 0.25rem !important;
|
|
}
|
|
.pa-2 {
|
|
padding: 0.5rem !important;
|
|
}
|
|
.pa-3 {
|
|
padding: 1rem !important;
|
|
}
|
|
.pa-4 {
|
|
padding: 1.5rem !important;
|
|
}
|
|
.pa-5 {
|
|
padding: 2rem !important;
|
|
}
|
|
.pa-6 {
|
|
padding: 3rem !important;
|
|
}
|
|
.pa-7 {
|
|
padding: 4rem !important;
|
|
}
|
|
}
|
|
@media (min-width: 576px) {
|
|
.mt-sm-0 {
|
|
margin-top: 0 !important;
|
|
}
|
|
.mt-sm-1 {
|
|
margin-top: 0.25rem !important;
|
|
}
|
|
.mt-sm-2 {
|
|
margin-top: 0.5rem !important;
|
|
}
|
|
.mt-sm-3 {
|
|
margin-top: 1rem !important;
|
|
}
|
|
.mt-sm-4 {
|
|
margin-top: 1.5rem !important;
|
|
}
|
|
.mt-sm-5 {
|
|
margin-top: 2rem !important;
|
|
}
|
|
.mt-sm-6 {
|
|
margin-top: 3rem !important;
|
|
}
|
|
.mt-sm-7 {
|
|
margin-top: 4rem !important;
|
|
}
|
|
.mb-sm-0 {
|
|
margin-bottom: 0 !important;
|
|
}
|
|
.mb-sm-1 {
|
|
margin-bottom: 0.25rem !important;
|
|
}
|
|
.mb-sm-2 {
|
|
margin-bottom: 0.5rem !important;
|
|
}
|
|
.mb-sm-3 {
|
|
margin-bottom: 1rem !important;
|
|
}
|
|
.mb-sm-4 {
|
|
margin-bottom: 1.5rem !important;
|
|
}
|
|
.mb-sm-5 {
|
|
margin-bottom: 2rem !important;
|
|
}
|
|
.mb-sm-6 {
|
|
margin-bottom: 3rem !important;
|
|
}
|
|
.mb-sm-7 {
|
|
margin-bottom: 4rem !important;
|
|
}
|
|
.ms-sm-0 {
|
|
margin-start: 0 !important;
|
|
}
|
|
.ms-sm-1 {
|
|
margin-start: 0.25rem !important;
|
|
}
|
|
.ms-sm-2 {
|
|
margin-start: 0.5rem !important;
|
|
}
|
|
.ms-sm-3 {
|
|
margin-start: 1rem !important;
|
|
}
|
|
.ms-sm-4 {
|
|
margin-start: 1.5rem !important;
|
|
}
|
|
.ms-sm-5 {
|
|
margin-start: 2rem !important;
|
|
}
|
|
.ms-sm-6 {
|
|
margin-start: 3rem !important;
|
|
}
|
|
.ms-sm-7 {
|
|
margin-start: 4rem !important;
|
|
}
|
|
.me-sm-0 {
|
|
margin-end: 0 !important;
|
|
}
|
|
.me-sm-1 {
|
|
margin-end: 0.25rem !important;
|
|
}
|
|
.me-sm-2 {
|
|
margin-end: 0.5rem !important;
|
|
}
|
|
.me-sm-3 {
|
|
margin-end: 1rem !important;
|
|
}
|
|
.me-sm-4 {
|
|
margin-end: 1.5rem !important;
|
|
}
|
|
.me-sm-5 {
|
|
margin-end: 2rem !important;
|
|
}
|
|
.me-sm-6 {
|
|
margin-end: 3rem !important;
|
|
}
|
|
.me-sm-7 {
|
|
margin-end: 4rem !important;
|
|
}
|
|
.mx-sm-0 {
|
|
margin-left: 0 !important;
|
|
margin-right: 0 !important;
|
|
}
|
|
.mx-sm-1 {
|
|
margin-left: 0.25rem !important;
|
|
margin-right: 0.25rem !important;
|
|
}
|
|
.mx-sm-2 {
|
|
margin-left: 0.5rem !important;
|
|
margin-right: 0.5rem !important;
|
|
}
|
|
.mx-sm-3 {
|
|
margin-left: 1rem !important;
|
|
margin-right: 1rem !important;
|
|
}
|
|
.mx-sm-4 {
|
|
margin-left: 1.5rem !important;
|
|
margin-right: 1.5rem !important;
|
|
}
|
|
.mx-sm-5 {
|
|
margin-left: 2rem !important;
|
|
margin-right: 2rem !important;
|
|
}
|
|
.mx-sm-6 {
|
|
margin-left: 3rem !important;
|
|
margin-right: 3rem !important;
|
|
}
|
|
.mx-sm-7 {
|
|
margin-left: 4rem !important;
|
|
margin-right: 4rem !important;
|
|
}
|
|
.my-sm-0 {
|
|
margin-top: 0 !important;
|
|
margin-bottom: 0 !important;
|
|
}
|
|
.my-sm-1 {
|
|
margin-top: 0.25rem !important;
|
|
margin-bottom: 0.25rem !important;
|
|
}
|
|
.my-sm-2 {
|
|
margin-top: 0.5rem !important;
|
|
margin-bottom: 0.5rem !important;
|
|
}
|
|
.my-sm-3 {
|
|
margin-top: 1rem !important;
|
|
margin-bottom: 1rem !important;
|
|
}
|
|
.my-sm-4 {
|
|
margin-top: 1.5rem !important;
|
|
margin-bottom: 1.5rem !important;
|
|
}
|
|
.my-sm-5 {
|
|
margin-top: 2rem !important;
|
|
margin-bottom: 2rem !important;
|
|
}
|
|
.my-sm-6 {
|
|
margin-top: 3rem !important;
|
|
margin-bottom: 3rem !important;
|
|
}
|
|
.my-sm-7 {
|
|
margin-top: 4rem !important;
|
|
margin-bottom: 4rem !important;
|
|
}
|
|
.ma-sm-0 {
|
|
margin: 0 !important;
|
|
}
|
|
.ma-sm-1 {
|
|
margin: 0.25rem !important;
|
|
}
|
|
.ma-sm-2 {
|
|
margin: 0.5rem !important;
|
|
}
|
|
.ma-sm-3 {
|
|
margin: 1rem !important;
|
|
}
|
|
.ma-sm-4 {
|
|
margin: 1.5rem !important;
|
|
}
|
|
.ma-sm-5 {
|
|
margin: 2rem !important;
|
|
}
|
|
.ma-sm-6 {
|
|
margin: 3rem !important;
|
|
}
|
|
.ma-sm-7 {
|
|
margin: 4rem !important;
|
|
}
|
|
.pt-sm-0 {
|
|
padding-top: 0 !important;
|
|
}
|
|
.pt-sm-1 {
|
|
padding-top: 0.25rem !important;
|
|
}
|
|
.pt-sm-2 {
|
|
padding-top: 0.5rem !important;
|
|
}
|
|
.pt-sm-3 {
|
|
padding-top: 1rem !important;
|
|
}
|
|
.pt-sm-4 {
|
|
padding-top: 1.5rem !important;
|
|
}
|
|
.pt-sm-5 {
|
|
padding-top: 2rem !important;
|
|
}
|
|
.pt-sm-6 {
|
|
padding-top: 3rem !important;
|
|
}
|
|
.pt-sm-7 {
|
|
padding-top: 4rem !important;
|
|
}
|
|
.pb-sm-0 {
|
|
padding-bottom: 0 !important;
|
|
}
|
|
.pb-sm-1 {
|
|
padding-bottom: 0.25rem !important;
|
|
}
|
|
.pb-sm-2 {
|
|
padding-bottom: 0.5rem !important;
|
|
}
|
|
.pb-sm-3 {
|
|
padding-bottom: 1rem !important;
|
|
}
|
|
.pb-sm-4 {
|
|
padding-bottom: 1.5rem !important;
|
|
}
|
|
.pb-sm-5 {
|
|
padding-bottom: 2rem !important;
|
|
}
|
|
.pb-sm-6 {
|
|
padding-bottom: 3rem !important;
|
|
}
|
|
.pb-sm-7 {
|
|
padding-bottom: 4rem !important;
|
|
}
|
|
.ps-sm-0 {
|
|
padding-start: 0 !important;
|
|
}
|
|
.ps-sm-1 {
|
|
padding-start: 0.25rem !important;
|
|
}
|
|
.ps-sm-2 {
|
|
padding-start: 0.5rem !important;
|
|
}
|
|
.ps-sm-3 {
|
|
padding-start: 1rem !important;
|
|
}
|
|
.ps-sm-4 {
|
|
padding-start: 1.5rem !important;
|
|
}
|
|
.ps-sm-5 {
|
|
padding-start: 2rem !important;
|
|
}
|
|
.ps-sm-6 {
|
|
padding-start: 3rem !important;
|
|
}
|
|
.ps-sm-7 {
|
|
padding-start: 4rem !important;
|
|
}
|
|
.pe-sm-0 {
|
|
padding-end: 0 !important;
|
|
}
|
|
.pe-sm-1 {
|
|
padding-end: 0.25rem !important;
|
|
}
|
|
.pe-sm-2 {
|
|
padding-end: 0.5rem !important;
|
|
}
|
|
.pe-sm-3 {
|
|
padding-end: 1rem !important;
|
|
}
|
|
.pe-sm-4 {
|
|
padding-end: 1.5rem !important;
|
|
}
|
|
.pe-sm-5 {
|
|
padding-end: 2rem !important;
|
|
}
|
|
.pe-sm-6 {
|
|
padding-end: 3rem !important;
|
|
}
|
|
.pe-sm-7 {
|
|
padding-end: 4rem !important;
|
|
}
|
|
.px-sm-0 {
|
|
padding-left: 0 !important;
|
|
padding-right: 0 !important;
|
|
}
|
|
.px-sm-1 {
|
|
padding-left: 0.25rem !important;
|
|
padding-right: 0.25rem !important;
|
|
}
|
|
.px-sm-2 {
|
|
padding-left: 0.5rem !important;
|
|
padding-right: 0.5rem !important;
|
|
}
|
|
.px-sm-3 {
|
|
padding-left: 1rem !important;
|
|
padding-right: 1rem !important;
|
|
}
|
|
.px-sm-4 {
|
|
padding-left: 1.5rem !important;
|
|
padding-right: 1.5rem !important;
|
|
}
|
|
.px-sm-5 {
|
|
padding-left: 2rem !important;
|
|
padding-right: 2rem !important;
|
|
}
|
|
.px-sm-6 {
|
|
padding-left: 3rem !important;
|
|
padding-right: 3rem !important;
|
|
}
|
|
.px-sm-7 {
|
|
padding-left: 4rem !important;
|
|
padding-right: 4rem !important;
|
|
}
|
|
.py-sm-0 {
|
|
padding-top: 0 !important;
|
|
padding-bottom: 0 !important;
|
|
}
|
|
.py-sm-1 {
|
|
padding-top: 0.25rem !important;
|
|
padding-bottom: 0.25rem !important;
|
|
}
|
|
.py-sm-2 {
|
|
padding-top: 0.5rem !important;
|
|
padding-bottom: 0.5rem !important;
|
|
}
|
|
.py-sm-3 {
|
|
padding-top: 1rem !important;
|
|
padding-bottom: 1rem !important;
|
|
}
|
|
.py-sm-4 {
|
|
padding-top: 1.5rem !important;
|
|
padding-bottom: 1.5rem !important;
|
|
}
|
|
.py-sm-5 {
|
|
padding-top: 2rem !important;
|
|
padding-bottom: 2rem !important;
|
|
}
|
|
.py-sm-6 {
|
|
padding-top: 3rem !important;
|
|
padding-bottom: 3rem !important;
|
|
}
|
|
.py-sm-7 {
|
|
padding-top: 4rem !important;
|
|
padding-bottom: 4rem !important;
|
|
}
|
|
.pa-sm-0 {
|
|
padding: 0 !important;
|
|
}
|
|
.pa-sm-1 {
|
|
padding: 0.25rem !important;
|
|
}
|
|
.pa-sm-2 {
|
|
padding: 0.5rem !important;
|
|
}
|
|
.pa-sm-3 {
|
|
padding: 1rem !important;
|
|
}
|
|
.pa-sm-4 {
|
|
padding: 1.5rem !important;
|
|
}
|
|
.pa-sm-5 {
|
|
padding: 2rem !important;
|
|
}
|
|
.pa-sm-6 {
|
|
padding: 3rem !important;
|
|
}
|
|
.pa-sm-7 {
|
|
padding: 4rem !important;
|
|
}
|
|
}
|
|
@media (min-width: 768px) {
|
|
.mt-md-0 {
|
|
margin-top: 0 !important;
|
|
}
|
|
.mt-md-1 {
|
|
margin-top: 0.25rem !important;
|
|
}
|
|
.mt-md-2 {
|
|
margin-top: 0.5rem !important;
|
|
}
|
|
.mt-md-3 {
|
|
margin-top: 1rem !important;
|
|
}
|
|
.mt-md-4 {
|
|
margin-top: 1.5rem !important;
|
|
}
|
|
.mt-md-5 {
|
|
margin-top: 2rem !important;
|
|
}
|
|
.mt-md-6 {
|
|
margin-top: 3rem !important;
|
|
}
|
|
.mt-md-7 {
|
|
margin-top: 4rem !important;
|
|
}
|
|
.mb-md-0 {
|
|
margin-bottom: 0 !important;
|
|
}
|
|
.mb-md-1 {
|
|
margin-bottom: 0.25rem !important;
|
|
}
|
|
.mb-md-2 {
|
|
margin-bottom: 0.5rem !important;
|
|
}
|
|
.mb-md-3 {
|
|
margin-bottom: 1rem !important;
|
|
}
|
|
.mb-md-4 {
|
|
margin-bottom: 1.5rem !important;
|
|
}
|
|
.mb-md-5 {
|
|
margin-bottom: 2rem !important;
|
|
}
|
|
.mb-md-6 {
|
|
margin-bottom: 3rem !important;
|
|
}
|
|
.mb-md-7 {
|
|
margin-bottom: 4rem !important;
|
|
}
|
|
.ms-md-0 {
|
|
margin-start: 0 !important;
|
|
}
|
|
.ms-md-1 {
|
|
margin-start: 0.25rem !important;
|
|
}
|
|
.ms-md-2 {
|
|
margin-start: 0.5rem !important;
|
|
}
|
|
.ms-md-3 {
|
|
margin-start: 1rem !important;
|
|
}
|
|
.ms-md-4 {
|
|
margin-start: 1.5rem !important;
|
|
}
|
|
.ms-md-5 {
|
|
margin-start: 2rem !important;
|
|
}
|
|
.ms-md-6 {
|
|
margin-start: 3rem !important;
|
|
}
|
|
.ms-md-7 {
|
|
margin-start: 4rem !important;
|
|
}
|
|
.me-md-0 {
|
|
margin-end: 0 !important;
|
|
}
|
|
.me-md-1 {
|
|
margin-end: 0.25rem !important;
|
|
}
|
|
.me-md-2 {
|
|
margin-end: 0.5rem !important;
|
|
}
|
|
.me-md-3 {
|
|
margin-end: 1rem !important;
|
|
}
|
|
.me-md-4 {
|
|
margin-end: 1.5rem !important;
|
|
}
|
|
.me-md-5 {
|
|
margin-end: 2rem !important;
|
|
}
|
|
.me-md-6 {
|
|
margin-end: 3rem !important;
|
|
}
|
|
.me-md-7 {
|
|
margin-end: 4rem !important;
|
|
}
|
|
.mx-md-0 {
|
|
margin-left: 0 !important;
|
|
margin-right: 0 !important;
|
|
}
|
|
.mx-md-1 {
|
|
margin-left: 0.25rem !important;
|
|
margin-right: 0.25rem !important;
|
|
}
|
|
.mx-md-2 {
|
|
margin-left: 0.5rem !important;
|
|
margin-right: 0.5rem !important;
|
|
}
|
|
.mx-md-3 {
|
|
margin-left: 1rem !important;
|
|
margin-right: 1rem !important;
|
|
}
|
|
.mx-md-4 {
|
|
margin-left: 1.5rem !important;
|
|
margin-right: 1.5rem !important;
|
|
}
|
|
.mx-md-5 {
|
|
margin-left: 2rem !important;
|
|
margin-right: 2rem !important;
|
|
}
|
|
.mx-md-6 {
|
|
margin-left: 3rem !important;
|
|
margin-right: 3rem !important;
|
|
}
|
|
.mx-md-7 {
|
|
margin-left: 4rem !important;
|
|
margin-right: 4rem !important;
|
|
}
|
|
.my-md-0 {
|
|
margin-top: 0 !important;
|
|
margin-bottom: 0 !important;
|
|
}
|
|
.my-md-1 {
|
|
margin-top: 0.25rem !important;
|
|
margin-bottom: 0.25rem !important;
|
|
}
|
|
.my-md-2 {
|
|
margin-top: 0.5rem !important;
|
|
margin-bottom: 0.5rem !important;
|
|
}
|
|
.my-md-3 {
|
|
margin-top: 1rem !important;
|
|
margin-bottom: 1rem !important;
|
|
}
|
|
.my-md-4 {
|
|
margin-top: 1.5rem !important;
|
|
margin-bottom: 1.5rem !important;
|
|
}
|
|
.my-md-5 {
|
|
margin-top: 2rem !important;
|
|
margin-bottom: 2rem !important;
|
|
}
|
|
.my-md-6 {
|
|
margin-top: 3rem !important;
|
|
margin-bottom: 3rem !important;
|
|
}
|
|
.my-md-7 {
|
|
margin-top: 4rem !important;
|
|
margin-bottom: 4rem !important;
|
|
}
|
|
.ma-md-0 {
|
|
margin: 0 !important;
|
|
}
|
|
.ma-md-1 {
|
|
margin: 0.25rem !important;
|
|
}
|
|
.ma-md-2 {
|
|
margin: 0.5rem !important;
|
|
}
|
|
.ma-md-3 {
|
|
margin: 1rem !important;
|
|
}
|
|
.ma-md-4 {
|
|
margin: 1.5rem !important;
|
|
}
|
|
.ma-md-5 {
|
|
margin: 2rem !important;
|
|
}
|
|
.ma-md-6 {
|
|
margin: 3rem !important;
|
|
}
|
|
.ma-md-7 {
|
|
margin: 4rem !important;
|
|
}
|
|
.pt-md-0 {
|
|
padding-top: 0 !important;
|
|
}
|
|
.pt-md-1 {
|
|
padding-top: 0.25rem !important;
|
|
}
|
|
.pt-md-2 {
|
|
padding-top: 0.5rem !important;
|
|
}
|
|
.pt-md-3 {
|
|
padding-top: 1rem !important;
|
|
}
|
|
.pt-md-4 {
|
|
padding-top: 1.5rem !important;
|
|
}
|
|
.pt-md-5 {
|
|
padding-top: 2rem !important;
|
|
}
|
|
.pt-md-6 {
|
|
padding-top: 3rem !important;
|
|
}
|
|
.pt-md-7 {
|
|
padding-top: 4rem !important;
|
|
}
|
|
.pb-md-0 {
|
|
padding-bottom: 0 !important;
|
|
}
|
|
.pb-md-1 {
|
|
padding-bottom: 0.25rem !important;
|
|
}
|
|
.pb-md-2 {
|
|
padding-bottom: 0.5rem !important;
|
|
}
|
|
.pb-md-3 {
|
|
padding-bottom: 1rem !important;
|
|
}
|
|
.pb-md-4 {
|
|
padding-bottom: 1.5rem !important;
|
|
}
|
|
.pb-md-5 {
|
|
padding-bottom: 2rem !important;
|
|
}
|
|
.pb-md-6 {
|
|
padding-bottom: 3rem !important;
|
|
}
|
|
.pb-md-7 {
|
|
padding-bottom: 4rem !important;
|
|
}
|
|
.ps-md-0 {
|
|
padding-start: 0 !important;
|
|
}
|
|
.ps-md-1 {
|
|
padding-start: 0.25rem !important;
|
|
}
|
|
.ps-md-2 {
|
|
padding-start: 0.5rem !important;
|
|
}
|
|
.ps-md-3 {
|
|
padding-start: 1rem !important;
|
|
}
|
|
.ps-md-4 {
|
|
padding-start: 1.5rem !important;
|
|
}
|
|
.ps-md-5 {
|
|
padding-start: 2rem !important;
|
|
}
|
|
.ps-md-6 {
|
|
padding-start: 3rem !important;
|
|
}
|
|
.ps-md-7 {
|
|
padding-start: 4rem !important;
|
|
}
|
|
.pe-md-0 {
|
|
padding-end: 0 !important;
|
|
}
|
|
.pe-md-1 {
|
|
padding-end: 0.25rem !important;
|
|
}
|
|
.pe-md-2 {
|
|
padding-end: 0.5rem !important;
|
|
}
|
|
.pe-md-3 {
|
|
padding-end: 1rem !important;
|
|
}
|
|
.pe-md-4 {
|
|
padding-end: 1.5rem !important;
|
|
}
|
|
.pe-md-5 {
|
|
padding-end: 2rem !important;
|
|
}
|
|
.pe-md-6 {
|
|
padding-end: 3rem !important;
|
|
}
|
|
.pe-md-7 {
|
|
padding-end: 4rem !important;
|
|
}
|
|
.px-md-0 {
|
|
padding-left: 0 !important;
|
|
padding-right: 0 !important;
|
|
}
|
|
.px-md-1 {
|
|
padding-left: 0.25rem !important;
|
|
padding-right: 0.25rem !important;
|
|
}
|
|
.px-md-2 {
|
|
padding-left: 0.5rem !important;
|
|
padding-right: 0.5rem !important;
|
|
}
|
|
.px-md-3 {
|
|
padding-left: 1rem !important;
|
|
padding-right: 1rem !important;
|
|
}
|
|
.px-md-4 {
|
|
padding-left: 1.5rem !important;
|
|
padding-right: 1.5rem !important;
|
|
}
|
|
.px-md-5 {
|
|
padding-left: 2rem !important;
|
|
padding-right: 2rem !important;
|
|
}
|
|
.px-md-6 {
|
|
padding-left: 3rem !important;
|
|
padding-right: 3rem !important;
|
|
}
|
|
.px-md-7 {
|
|
padding-left: 4rem !important;
|
|
padding-right: 4rem !important;
|
|
}
|
|
.py-md-0 {
|
|
padding-top: 0 !important;
|
|
padding-bottom: 0 !important;
|
|
}
|
|
.py-md-1 {
|
|
padding-top: 0.25rem !important;
|
|
padding-bottom: 0.25rem !important;
|
|
}
|
|
.py-md-2 {
|
|
padding-top: 0.5rem !important;
|
|
padding-bottom: 0.5rem !important;
|
|
}
|
|
.py-md-3 {
|
|
padding-top: 1rem !important;
|
|
padding-bottom: 1rem !important;
|
|
}
|
|
.py-md-4 {
|
|
padding-top: 1.5rem !important;
|
|
padding-bottom: 1.5rem !important;
|
|
}
|
|
.py-md-5 {
|
|
padding-top: 2rem !important;
|
|
padding-bottom: 2rem !important;
|
|
}
|
|
.py-md-6 {
|
|
padding-top: 3rem !important;
|
|
padding-bottom: 3rem !important;
|
|
}
|
|
.py-md-7 {
|
|
padding-top: 4rem !important;
|
|
padding-bottom: 4rem !important;
|
|
}
|
|
.pa-md-0 {
|
|
padding: 0 !important;
|
|
}
|
|
.pa-md-1 {
|
|
padding: 0.25rem !important;
|
|
}
|
|
.pa-md-2 {
|
|
padding: 0.5rem !important;
|
|
}
|
|
.pa-md-3 {
|
|
padding: 1rem !important;
|
|
}
|
|
.pa-md-4 {
|
|
padding: 1.5rem !important;
|
|
}
|
|
.pa-md-5 {
|
|
padding: 2rem !important;
|
|
}
|
|
.pa-md-6 {
|
|
padding: 3rem !important;
|
|
}
|
|
.pa-md-7 {
|
|
padding: 4rem !important;
|
|
}
|
|
}
|
|
@media (min-width: 992px) {
|
|
.mt-lg-0 {
|
|
margin-top: 0 !important;
|
|
}
|
|
.mt-lg-1 {
|
|
margin-top: 0.25rem !important;
|
|
}
|
|
.mt-lg-2 {
|
|
margin-top: 0.5rem !important;
|
|
}
|
|
.mt-lg-3 {
|
|
margin-top: 1rem !important;
|
|
}
|
|
.mt-lg-4 {
|
|
margin-top: 1.5rem !important;
|
|
}
|
|
.mt-lg-5 {
|
|
margin-top: 2rem !important;
|
|
}
|
|
.mt-lg-6 {
|
|
margin-top: 3rem !important;
|
|
}
|
|
.mt-lg-7 {
|
|
margin-top: 4rem !important;
|
|
}
|
|
.mb-lg-0 {
|
|
margin-bottom: 0 !important;
|
|
}
|
|
.mb-lg-1 {
|
|
margin-bottom: 0.25rem !important;
|
|
}
|
|
.mb-lg-2 {
|
|
margin-bottom: 0.5rem !important;
|
|
}
|
|
.mb-lg-3 {
|
|
margin-bottom: 1rem !important;
|
|
}
|
|
.mb-lg-4 {
|
|
margin-bottom: 1.5rem !important;
|
|
}
|
|
.mb-lg-5 {
|
|
margin-bottom: 2rem !important;
|
|
}
|
|
.mb-lg-6 {
|
|
margin-bottom: 3rem !important;
|
|
}
|
|
.mb-lg-7 {
|
|
margin-bottom: 4rem !important;
|
|
}
|
|
.ms-lg-0 {
|
|
margin-start: 0 !important;
|
|
}
|
|
.ms-lg-1 {
|
|
margin-start: 0.25rem !important;
|
|
}
|
|
.ms-lg-2 {
|
|
margin-start: 0.5rem !important;
|
|
}
|
|
.ms-lg-3 {
|
|
margin-start: 1rem !important;
|
|
}
|
|
.ms-lg-4 {
|
|
margin-start: 1.5rem !important;
|
|
}
|
|
.ms-lg-5 {
|
|
margin-start: 2rem !important;
|
|
}
|
|
.ms-lg-6 {
|
|
margin-start: 3rem !important;
|
|
}
|
|
.ms-lg-7 {
|
|
margin-start: 4rem !important;
|
|
}
|
|
.me-lg-0 {
|
|
margin-end: 0 !important;
|
|
}
|
|
.me-lg-1 {
|
|
margin-end: 0.25rem !important;
|
|
}
|
|
.me-lg-2 {
|
|
margin-end: 0.5rem !important;
|
|
}
|
|
.me-lg-3 {
|
|
margin-end: 1rem !important;
|
|
}
|
|
.me-lg-4 {
|
|
margin-end: 1.5rem !important;
|
|
}
|
|
.me-lg-5 {
|
|
margin-end: 2rem !important;
|
|
}
|
|
.me-lg-6 {
|
|
margin-end: 3rem !important;
|
|
}
|
|
.me-lg-7 {
|
|
margin-end: 4rem !important;
|
|
}
|
|
.mx-lg-0 {
|
|
margin-left: 0 !important;
|
|
margin-right: 0 !important;
|
|
}
|
|
.mx-lg-1 {
|
|
margin-left: 0.25rem !important;
|
|
margin-right: 0.25rem !important;
|
|
}
|
|
.mx-lg-2 {
|
|
margin-left: 0.5rem !important;
|
|
margin-right: 0.5rem !important;
|
|
}
|
|
.mx-lg-3 {
|
|
margin-left: 1rem !important;
|
|
margin-right: 1rem !important;
|
|
}
|
|
.mx-lg-4 {
|
|
margin-left: 1.5rem !important;
|
|
margin-right: 1.5rem !important;
|
|
}
|
|
.mx-lg-5 {
|
|
margin-left: 2rem !important;
|
|
margin-right: 2rem !important;
|
|
}
|
|
.mx-lg-6 {
|
|
margin-left: 3rem !important;
|
|
margin-right: 3rem !important;
|
|
}
|
|
.mx-lg-7 {
|
|
margin-left: 4rem !important;
|
|
margin-right: 4rem !important;
|
|
}
|
|
.my-lg-0 {
|
|
margin-top: 0 !important;
|
|
margin-bottom: 0 !important;
|
|
}
|
|
.my-lg-1 {
|
|
margin-top: 0.25rem !important;
|
|
margin-bottom: 0.25rem !important;
|
|
}
|
|
.my-lg-2 {
|
|
margin-top: 0.5rem !important;
|
|
margin-bottom: 0.5rem !important;
|
|
}
|
|
.my-lg-3 {
|
|
margin-top: 1rem !important;
|
|
margin-bottom: 1rem !important;
|
|
}
|
|
.my-lg-4 {
|
|
margin-top: 1.5rem !important;
|
|
margin-bottom: 1.5rem !important;
|
|
}
|
|
.my-lg-5 {
|
|
margin-top: 2rem !important;
|
|
margin-bottom: 2rem !important;
|
|
}
|
|
.my-lg-6 {
|
|
margin-top: 3rem !important;
|
|
margin-bottom: 3rem !important;
|
|
}
|
|
.my-lg-7 {
|
|
margin-top: 4rem !important;
|
|
margin-bottom: 4rem !important;
|
|
}
|
|
.ma-lg-0 {
|
|
margin: 0 !important;
|
|
}
|
|
.ma-lg-1 {
|
|
margin: 0.25rem !important;
|
|
}
|
|
.ma-lg-2 {
|
|
margin: 0.5rem !important;
|
|
}
|
|
.ma-lg-3 {
|
|
margin: 1rem !important;
|
|
}
|
|
.ma-lg-4 {
|
|
margin: 1.5rem !important;
|
|
}
|
|
.ma-lg-5 {
|
|
margin: 2rem !important;
|
|
}
|
|
.ma-lg-6 {
|
|
margin: 3rem !important;
|
|
}
|
|
.ma-lg-7 {
|
|
margin: 4rem !important;
|
|
}
|
|
.pt-lg-0 {
|
|
padding-top: 0 !important;
|
|
}
|
|
.pt-lg-1 {
|
|
padding-top: 0.25rem !important;
|
|
}
|
|
.pt-lg-2 {
|
|
padding-top: 0.5rem !important;
|
|
}
|
|
.pt-lg-3 {
|
|
padding-top: 1rem !important;
|
|
}
|
|
.pt-lg-4 {
|
|
padding-top: 1.5rem !important;
|
|
}
|
|
.pt-lg-5 {
|
|
padding-top: 2rem !important;
|
|
}
|
|
.pt-lg-6 {
|
|
padding-top: 3rem !important;
|
|
}
|
|
.pt-lg-7 {
|
|
padding-top: 4rem !important;
|
|
}
|
|
.pb-lg-0 {
|
|
padding-bottom: 0 !important;
|
|
}
|
|
.pb-lg-1 {
|
|
padding-bottom: 0.25rem !important;
|
|
}
|
|
.pb-lg-2 {
|
|
padding-bottom: 0.5rem !important;
|
|
}
|
|
.pb-lg-3 {
|
|
padding-bottom: 1rem !important;
|
|
}
|
|
.pb-lg-4 {
|
|
padding-bottom: 1.5rem !important;
|
|
}
|
|
.pb-lg-5 {
|
|
padding-bottom: 2rem !important;
|
|
}
|
|
.pb-lg-6 {
|
|
padding-bottom: 3rem !important;
|
|
}
|
|
.pb-lg-7 {
|
|
padding-bottom: 4rem !important;
|
|
}
|
|
.ps-lg-0 {
|
|
padding-start: 0 !important;
|
|
}
|
|
.ps-lg-1 {
|
|
padding-start: 0.25rem !important;
|
|
}
|
|
.ps-lg-2 {
|
|
padding-start: 0.5rem !important;
|
|
}
|
|
.ps-lg-3 {
|
|
padding-start: 1rem !important;
|
|
}
|
|
.ps-lg-4 {
|
|
padding-start: 1.5rem !important;
|
|
}
|
|
.ps-lg-5 {
|
|
padding-start: 2rem !important;
|
|
}
|
|
.ps-lg-6 {
|
|
padding-start: 3rem !important;
|
|
}
|
|
.ps-lg-7 {
|
|
padding-start: 4rem !important;
|
|
}
|
|
.pe-lg-0 {
|
|
padding-end: 0 !important;
|
|
}
|
|
.pe-lg-1 {
|
|
padding-end: 0.25rem !important;
|
|
}
|
|
.pe-lg-2 {
|
|
padding-end: 0.5rem !important;
|
|
}
|
|
.pe-lg-3 {
|
|
padding-end: 1rem !important;
|
|
}
|
|
.pe-lg-4 {
|
|
padding-end: 1.5rem !important;
|
|
}
|
|
.pe-lg-5 {
|
|
padding-end: 2rem !important;
|
|
}
|
|
.pe-lg-6 {
|
|
padding-end: 3rem !important;
|
|
}
|
|
.pe-lg-7 {
|
|
padding-end: 4rem !important;
|
|
}
|
|
.px-lg-0 {
|
|
padding-left: 0 !important;
|
|
padding-right: 0 !important;
|
|
}
|
|
.px-lg-1 {
|
|
padding-left: 0.25rem !important;
|
|
padding-right: 0.25rem !important;
|
|
}
|
|
.px-lg-2 {
|
|
padding-left: 0.5rem !important;
|
|
padding-right: 0.5rem !important;
|
|
}
|
|
.px-lg-3 {
|
|
padding-left: 1rem !important;
|
|
padding-right: 1rem !important;
|
|
}
|
|
.px-lg-4 {
|
|
padding-left: 1.5rem !important;
|
|
padding-right: 1.5rem !important;
|
|
}
|
|
.px-lg-5 {
|
|
padding-left: 2rem !important;
|
|
padding-right: 2rem !important;
|
|
}
|
|
.px-lg-6 {
|
|
padding-left: 3rem !important;
|
|
padding-right: 3rem !important;
|
|
}
|
|
.px-lg-7 {
|
|
padding-left: 4rem !important;
|
|
padding-right: 4rem !important;
|
|
}
|
|
.py-lg-0 {
|
|
padding-top: 0 !important;
|
|
padding-bottom: 0 !important;
|
|
}
|
|
.py-lg-1 {
|
|
padding-top: 0.25rem !important;
|
|
padding-bottom: 0.25rem !important;
|
|
}
|
|
.py-lg-2 {
|
|
padding-top: 0.5rem !important;
|
|
padding-bottom: 0.5rem !important;
|
|
}
|
|
.py-lg-3 {
|
|
padding-top: 1rem !important;
|
|
padding-bottom: 1rem !important;
|
|
}
|
|
.py-lg-4 {
|
|
padding-top: 1.5rem !important;
|
|
padding-bottom: 1.5rem !important;
|
|
}
|
|
.py-lg-5 {
|
|
padding-top: 2rem !important;
|
|
padding-bottom: 2rem !important;
|
|
}
|
|
.py-lg-6 {
|
|
padding-top: 3rem !important;
|
|
padding-bottom: 3rem !important;
|
|
}
|
|
.py-lg-7 {
|
|
padding-top: 4rem !important;
|
|
padding-bottom: 4rem !important;
|
|
}
|
|
.pa-lg-0 {
|
|
padding: 0 !important;
|
|
}
|
|
.pa-lg-1 {
|
|
padding: 0.25rem !important;
|
|
}
|
|
.pa-lg-2 {
|
|
padding: 0.5rem !important;
|
|
}
|
|
.pa-lg-3 {
|
|
padding: 1rem !important;
|
|
}
|
|
.pa-lg-4 {
|
|
padding: 1.5rem !important;
|
|
}
|
|
.pa-lg-5 {
|
|
padding: 2rem !important;
|
|
}
|
|
.pa-lg-6 {
|
|
padding: 3rem !important;
|
|
}
|
|
.pa-lg-7 {
|
|
padding: 4rem !important;
|
|
}
|
|
}
|
|
@media (min-width: 1200px) {
|
|
.mt-xl-0 {
|
|
margin-top: 0 !important;
|
|
}
|
|
.mt-xl-1 {
|
|
margin-top: 0.25rem !important;
|
|
}
|
|
.mt-xl-2 {
|
|
margin-top: 0.5rem !important;
|
|
}
|
|
.mt-xl-3 {
|
|
margin-top: 1rem !important;
|
|
}
|
|
.mt-xl-4 {
|
|
margin-top: 1.5rem !important;
|
|
}
|
|
.mt-xl-5 {
|
|
margin-top: 2rem !important;
|
|
}
|
|
.mt-xl-6 {
|
|
margin-top: 3rem !important;
|
|
}
|
|
.mt-xl-7 {
|
|
margin-top: 4rem !important;
|
|
}
|
|
.mb-xl-0 {
|
|
margin-bottom: 0 !important;
|
|
}
|
|
.mb-xl-1 {
|
|
margin-bottom: 0.25rem !important;
|
|
}
|
|
.mb-xl-2 {
|
|
margin-bottom: 0.5rem !important;
|
|
}
|
|
.mb-xl-3 {
|
|
margin-bottom: 1rem !important;
|
|
}
|
|
.mb-xl-4 {
|
|
margin-bottom: 1.5rem !important;
|
|
}
|
|
.mb-xl-5 {
|
|
margin-bottom: 2rem !important;
|
|
}
|
|
.mb-xl-6 {
|
|
margin-bottom: 3rem !important;
|
|
}
|
|
.mb-xl-7 {
|
|
margin-bottom: 4rem !important;
|
|
}
|
|
.ms-xl-0 {
|
|
margin-start: 0 !important;
|
|
}
|
|
.ms-xl-1 {
|
|
margin-start: 0.25rem !important;
|
|
}
|
|
.ms-xl-2 {
|
|
margin-start: 0.5rem !important;
|
|
}
|
|
.ms-xl-3 {
|
|
margin-start: 1rem !important;
|
|
}
|
|
.ms-xl-4 {
|
|
margin-start: 1.5rem !important;
|
|
}
|
|
.ms-xl-5 {
|
|
margin-start: 2rem !important;
|
|
}
|
|
.ms-xl-6 {
|
|
margin-start: 3rem !important;
|
|
}
|
|
.ms-xl-7 {
|
|
margin-start: 4rem !important;
|
|
}
|
|
.me-xl-0 {
|
|
margin-end: 0 !important;
|
|
}
|
|
.me-xl-1 {
|
|
margin-end: 0.25rem !important;
|
|
}
|
|
.me-xl-2 {
|
|
margin-end: 0.5rem !important;
|
|
}
|
|
.me-xl-3 {
|
|
margin-end: 1rem !important;
|
|
}
|
|
.me-xl-4 {
|
|
margin-end: 1.5rem !important;
|
|
}
|
|
.me-xl-5 {
|
|
margin-end: 2rem !important;
|
|
}
|
|
.me-xl-6 {
|
|
margin-end: 3rem !important;
|
|
}
|
|
.me-xl-7 {
|
|
margin-end: 4rem !important;
|
|
}
|
|
.mx-xl-0 {
|
|
margin-left: 0 !important;
|
|
margin-right: 0 !important;
|
|
}
|
|
.mx-xl-1 {
|
|
margin-left: 0.25rem !important;
|
|
margin-right: 0.25rem !important;
|
|
}
|
|
.mx-xl-2 {
|
|
margin-left: 0.5rem !important;
|
|
margin-right: 0.5rem !important;
|
|
}
|
|
.mx-xl-3 {
|
|
margin-left: 1rem !important;
|
|
margin-right: 1rem !important;
|
|
}
|
|
.mx-xl-4 {
|
|
margin-left: 1.5rem !important;
|
|
margin-right: 1.5rem !important;
|
|
}
|
|
.mx-xl-5 {
|
|
margin-left: 2rem !important;
|
|
margin-right: 2rem !important;
|
|
}
|
|
.mx-xl-6 {
|
|
margin-left: 3rem !important;
|
|
margin-right: 3rem !important;
|
|
}
|
|
.mx-xl-7 {
|
|
margin-left: 4rem !important;
|
|
margin-right: 4rem !important;
|
|
}
|
|
.my-xl-0 {
|
|
margin-top: 0 !important;
|
|
margin-bottom: 0 !important;
|
|
}
|
|
.my-xl-1 {
|
|
margin-top: 0.25rem !important;
|
|
margin-bottom: 0.25rem !important;
|
|
}
|
|
.my-xl-2 {
|
|
margin-top: 0.5rem !important;
|
|
margin-bottom: 0.5rem !important;
|
|
}
|
|
.my-xl-3 {
|
|
margin-top: 1rem !important;
|
|
margin-bottom: 1rem !important;
|
|
}
|
|
.my-xl-4 {
|
|
margin-top: 1.5rem !important;
|
|
margin-bottom: 1.5rem !important;
|
|
}
|
|
.my-xl-5 {
|
|
margin-top: 2rem !important;
|
|
margin-bottom: 2rem !important;
|
|
}
|
|
.my-xl-6 {
|
|
margin-top: 3rem !important;
|
|
margin-bottom: 3rem !important;
|
|
}
|
|
.my-xl-7 {
|
|
margin-top: 4rem !important;
|
|
margin-bottom: 4rem !important;
|
|
}
|
|
.ma-xl-0 {
|
|
margin: 0 !important;
|
|
}
|
|
.ma-xl-1 {
|
|
margin: 0.25rem !important;
|
|
}
|
|
.ma-xl-2 {
|
|
margin: 0.5rem !important;
|
|
}
|
|
.ma-xl-3 {
|
|
margin: 1rem !important;
|
|
}
|
|
.ma-xl-4 {
|
|
margin: 1.5rem !important;
|
|
}
|
|
.ma-xl-5 {
|
|
margin: 2rem !important;
|
|
}
|
|
.ma-xl-6 {
|
|
margin: 3rem !important;
|
|
}
|
|
.ma-xl-7 {
|
|
margin: 4rem !important;
|
|
}
|
|
.pt-xl-0 {
|
|
padding-top: 0 !important;
|
|
}
|
|
.pt-xl-1 {
|
|
padding-top: 0.25rem !important;
|
|
}
|
|
.pt-xl-2 {
|
|
padding-top: 0.5rem !important;
|
|
}
|
|
.pt-xl-3 {
|
|
padding-top: 1rem !important;
|
|
}
|
|
.pt-xl-4 {
|
|
padding-top: 1.5rem !important;
|
|
}
|
|
.pt-xl-5 {
|
|
padding-top: 2rem !important;
|
|
}
|
|
.pt-xl-6 {
|
|
padding-top: 3rem !important;
|
|
}
|
|
.pt-xl-7 {
|
|
padding-top: 4rem !important;
|
|
}
|
|
.pb-xl-0 {
|
|
padding-bottom: 0 !important;
|
|
}
|
|
.pb-xl-1 {
|
|
padding-bottom: 0.25rem !important;
|
|
}
|
|
.pb-xl-2 {
|
|
padding-bottom: 0.5rem !important;
|
|
}
|
|
.pb-xl-3 {
|
|
padding-bottom: 1rem !important;
|
|
}
|
|
.pb-xl-4 {
|
|
padding-bottom: 1.5rem !important;
|
|
}
|
|
.pb-xl-5 {
|
|
padding-bottom: 2rem !important;
|
|
}
|
|
.pb-xl-6 {
|
|
padding-bottom: 3rem !important;
|
|
}
|
|
.pb-xl-7 {
|
|
padding-bottom: 4rem !important;
|
|
}
|
|
.ps-xl-0 {
|
|
padding-start: 0 !important;
|
|
}
|
|
.ps-xl-1 {
|
|
padding-start: 0.25rem !important;
|
|
}
|
|
.ps-xl-2 {
|
|
padding-start: 0.5rem !important;
|
|
}
|
|
.ps-xl-3 {
|
|
padding-start: 1rem !important;
|
|
}
|
|
.ps-xl-4 {
|
|
padding-start: 1.5rem !important;
|
|
}
|
|
.ps-xl-5 {
|
|
padding-start: 2rem !important;
|
|
}
|
|
.ps-xl-6 {
|
|
padding-start: 3rem !important;
|
|
}
|
|
.ps-xl-7 {
|
|
padding-start: 4rem !important;
|
|
}
|
|
.pe-xl-0 {
|
|
padding-end: 0 !important;
|
|
}
|
|
.pe-xl-1 {
|
|
padding-end: 0.25rem !important;
|
|
}
|
|
.pe-xl-2 {
|
|
padding-end: 0.5rem !important;
|
|
}
|
|
.pe-xl-3 {
|
|
padding-end: 1rem !important;
|
|
}
|
|
.pe-xl-4 {
|
|
padding-end: 1.5rem !important;
|
|
}
|
|
.pe-xl-5 {
|
|
padding-end: 2rem !important;
|
|
}
|
|
.pe-xl-6 {
|
|
padding-end: 3rem !important;
|
|
}
|
|
.pe-xl-7 {
|
|
padding-end: 4rem !important;
|
|
}
|
|
.px-xl-0 {
|
|
padding-left: 0 !important;
|
|
padding-right: 0 !important;
|
|
}
|
|
.px-xl-1 {
|
|
padding-left: 0.25rem !important;
|
|
padding-right: 0.25rem !important;
|
|
}
|
|
.px-xl-2 {
|
|
padding-left: 0.5rem !important;
|
|
padding-right: 0.5rem !important;
|
|
}
|
|
.px-xl-3 {
|
|
padding-left: 1rem !important;
|
|
padding-right: 1rem !important;
|
|
}
|
|
.px-xl-4 {
|
|
padding-left: 1.5rem !important;
|
|
padding-right: 1.5rem !important;
|
|
}
|
|
.px-xl-5 {
|
|
padding-left: 2rem !important;
|
|
padding-right: 2rem !important;
|
|
}
|
|
.px-xl-6 {
|
|
padding-left: 3rem !important;
|
|
padding-right: 3rem !important;
|
|
}
|
|
.px-xl-7 {
|
|
padding-left: 4rem !important;
|
|
padding-right: 4rem !important;
|
|
}
|
|
.py-xl-0 {
|
|
padding-top: 0 !important;
|
|
padding-bottom: 0 !important;
|
|
}
|
|
.py-xl-1 {
|
|
padding-top: 0.25rem !important;
|
|
padding-bottom: 0.25rem !important;
|
|
}
|
|
.py-xl-2 {
|
|
padding-top: 0.5rem !important;
|
|
padding-bottom: 0.5rem !important;
|
|
}
|
|
.py-xl-3 {
|
|
padding-top: 1rem !important;
|
|
padding-bottom: 1rem !important;
|
|
}
|
|
.py-xl-4 {
|
|
padding-top: 1.5rem !important;
|
|
padding-bottom: 1.5rem !important;
|
|
}
|
|
.py-xl-5 {
|
|
padding-top: 2rem !important;
|
|
padding-bottom: 2rem !important;
|
|
}
|
|
.py-xl-6 {
|
|
padding-top: 3rem !important;
|
|
padding-bottom: 3rem !important;
|
|
}
|
|
.py-xl-7 {
|
|
padding-top: 4rem !important;
|
|
padding-bottom: 4rem !important;
|
|
}
|
|
.pa-xl-0 {
|
|
padding: 0 !important;
|
|
}
|
|
.pa-xl-1 {
|
|
padding: 0.25rem !important;
|
|
}
|
|
.pa-xl-2 {
|
|
padding: 0.5rem !important;
|
|
}
|
|
.pa-xl-3 {
|
|
padding: 1rem !important;
|
|
}
|
|
.pa-xl-4 {
|
|
padding: 1.5rem !important;
|
|
}
|
|
.pa-xl-5 {
|
|
padding: 2rem !important;
|
|
}
|
|
.pa-xl-6 {
|
|
padding: 3rem !important;
|
|
}
|
|
.pa-xl-7 {
|
|
padding: 4rem !important;
|
|
}
|
|
}
|
|
@media (min-width: 1400px) {
|
|
.mt-xxl-0 {
|
|
margin-top: 0 !important;
|
|
}
|
|
.mt-xxl-1 {
|
|
margin-top: 0.25rem !important;
|
|
}
|
|
.mt-xxl-2 {
|
|
margin-top: 0.5rem !important;
|
|
}
|
|
.mt-xxl-3 {
|
|
margin-top: 1rem !important;
|
|
}
|
|
.mt-xxl-4 {
|
|
margin-top: 1.5rem !important;
|
|
}
|
|
.mt-xxl-5 {
|
|
margin-top: 2rem !important;
|
|
}
|
|
.mt-xxl-6 {
|
|
margin-top: 3rem !important;
|
|
}
|
|
.mt-xxl-7 {
|
|
margin-top: 4rem !important;
|
|
}
|
|
.mb-xxl-0 {
|
|
margin-bottom: 0 !important;
|
|
}
|
|
.mb-xxl-1 {
|
|
margin-bottom: 0.25rem !important;
|
|
}
|
|
.mb-xxl-2 {
|
|
margin-bottom: 0.5rem !important;
|
|
}
|
|
.mb-xxl-3 {
|
|
margin-bottom: 1rem !important;
|
|
}
|
|
.mb-xxl-4 {
|
|
margin-bottom: 1.5rem !important;
|
|
}
|
|
.mb-xxl-5 {
|
|
margin-bottom: 2rem !important;
|
|
}
|
|
.mb-xxl-6 {
|
|
margin-bottom: 3rem !important;
|
|
}
|
|
.mb-xxl-7 {
|
|
margin-bottom: 4rem !important;
|
|
}
|
|
.ms-xxl-0 {
|
|
margin-start: 0 !important;
|
|
}
|
|
.ms-xxl-1 {
|
|
margin-start: 0.25rem !important;
|
|
}
|
|
.ms-xxl-2 {
|
|
margin-start: 0.5rem !important;
|
|
}
|
|
.ms-xxl-3 {
|
|
margin-start: 1rem !important;
|
|
}
|
|
.ms-xxl-4 {
|
|
margin-start: 1.5rem !important;
|
|
}
|
|
.ms-xxl-5 {
|
|
margin-start: 2rem !important;
|
|
}
|
|
.ms-xxl-6 {
|
|
margin-start: 3rem !important;
|
|
}
|
|
.ms-xxl-7 {
|
|
margin-start: 4rem !important;
|
|
}
|
|
.me-xxl-0 {
|
|
margin-end: 0 !important;
|
|
}
|
|
.me-xxl-1 {
|
|
margin-end: 0.25rem !important;
|
|
}
|
|
.me-xxl-2 {
|
|
margin-end: 0.5rem !important;
|
|
}
|
|
.me-xxl-3 {
|
|
margin-end: 1rem !important;
|
|
}
|
|
.me-xxl-4 {
|
|
margin-end: 1.5rem !important;
|
|
}
|
|
.me-xxl-5 {
|
|
margin-end: 2rem !important;
|
|
}
|
|
.me-xxl-6 {
|
|
margin-end: 3rem !important;
|
|
}
|
|
.me-xxl-7 {
|
|
margin-end: 4rem !important;
|
|
}
|
|
.mx-xxl-0 {
|
|
margin-left: 0 !important;
|
|
margin-right: 0 !important;
|
|
}
|
|
.mx-xxl-1 {
|
|
margin-left: 0.25rem !important;
|
|
margin-right: 0.25rem !important;
|
|
}
|
|
.mx-xxl-2 {
|
|
margin-left: 0.5rem !important;
|
|
margin-right: 0.5rem !important;
|
|
}
|
|
.mx-xxl-3 {
|
|
margin-left: 1rem !important;
|
|
margin-right: 1rem !important;
|
|
}
|
|
.mx-xxl-4 {
|
|
margin-left: 1.5rem !important;
|
|
margin-right: 1.5rem !important;
|
|
}
|
|
.mx-xxl-5 {
|
|
margin-left: 2rem !important;
|
|
margin-right: 2rem !important;
|
|
}
|
|
.mx-xxl-6 {
|
|
margin-left: 3rem !important;
|
|
margin-right: 3rem !important;
|
|
}
|
|
.mx-xxl-7 {
|
|
margin-left: 4rem !important;
|
|
margin-right: 4rem !important;
|
|
}
|
|
.my-xxl-0 {
|
|
margin-top: 0 !important;
|
|
margin-bottom: 0 !important;
|
|
}
|
|
.my-xxl-1 {
|
|
margin-top: 0.25rem !important;
|
|
margin-bottom: 0.25rem !important;
|
|
}
|
|
.my-xxl-2 {
|
|
margin-top: 0.5rem !important;
|
|
margin-bottom: 0.5rem !important;
|
|
}
|
|
.my-xxl-3 {
|
|
margin-top: 1rem !important;
|
|
margin-bottom: 1rem !important;
|
|
}
|
|
.my-xxl-4 {
|
|
margin-top: 1.5rem !important;
|
|
margin-bottom: 1.5rem !important;
|
|
}
|
|
.my-xxl-5 {
|
|
margin-top: 2rem !important;
|
|
margin-bottom: 2rem !important;
|
|
}
|
|
.my-xxl-6 {
|
|
margin-top: 3rem !important;
|
|
margin-bottom: 3rem !important;
|
|
}
|
|
.my-xxl-7 {
|
|
margin-top: 4rem !important;
|
|
margin-bottom: 4rem !important;
|
|
}
|
|
.ma-xxl-0 {
|
|
margin: 0 !important;
|
|
}
|
|
.ma-xxl-1 {
|
|
margin: 0.25rem !important;
|
|
}
|
|
.ma-xxl-2 {
|
|
margin: 0.5rem !important;
|
|
}
|
|
.ma-xxl-3 {
|
|
margin: 1rem !important;
|
|
}
|
|
.ma-xxl-4 {
|
|
margin: 1.5rem !important;
|
|
}
|
|
.ma-xxl-5 {
|
|
margin: 2rem !important;
|
|
}
|
|
.ma-xxl-6 {
|
|
margin: 3rem !important;
|
|
}
|
|
.ma-xxl-7 {
|
|
margin: 4rem !important;
|
|
}
|
|
.pt-xxl-0 {
|
|
padding-top: 0 !important;
|
|
}
|
|
.pt-xxl-1 {
|
|
padding-top: 0.25rem !important;
|
|
}
|
|
.pt-xxl-2 {
|
|
padding-top: 0.5rem !important;
|
|
}
|
|
.pt-xxl-3 {
|
|
padding-top: 1rem !important;
|
|
}
|
|
.pt-xxl-4 {
|
|
padding-top: 1.5rem !important;
|
|
}
|
|
.pt-xxl-5 {
|
|
padding-top: 2rem !important;
|
|
}
|
|
.pt-xxl-6 {
|
|
padding-top: 3rem !important;
|
|
}
|
|
.pt-xxl-7 {
|
|
padding-top: 4rem !important;
|
|
}
|
|
.pb-xxl-0 {
|
|
padding-bottom: 0 !important;
|
|
}
|
|
.pb-xxl-1 {
|
|
padding-bottom: 0.25rem !important;
|
|
}
|
|
.pb-xxl-2 {
|
|
padding-bottom: 0.5rem !important;
|
|
}
|
|
.pb-xxl-3 {
|
|
padding-bottom: 1rem !important;
|
|
}
|
|
.pb-xxl-4 {
|
|
padding-bottom: 1.5rem !important;
|
|
}
|
|
.pb-xxl-5 {
|
|
padding-bottom: 2rem !important;
|
|
}
|
|
.pb-xxl-6 {
|
|
padding-bottom: 3rem !important;
|
|
}
|
|
.pb-xxl-7 {
|
|
padding-bottom: 4rem !important;
|
|
}
|
|
.ps-xxl-0 {
|
|
padding-start: 0 !important;
|
|
}
|
|
.ps-xxl-1 {
|
|
padding-start: 0.25rem !important;
|
|
}
|
|
.ps-xxl-2 {
|
|
padding-start: 0.5rem !important;
|
|
}
|
|
.ps-xxl-3 {
|
|
padding-start: 1rem !important;
|
|
}
|
|
.ps-xxl-4 {
|
|
padding-start: 1.5rem !important;
|
|
}
|
|
.ps-xxl-5 {
|
|
padding-start: 2rem !important;
|
|
}
|
|
.ps-xxl-6 {
|
|
padding-start: 3rem !important;
|
|
}
|
|
.ps-xxl-7 {
|
|
padding-start: 4rem !important;
|
|
}
|
|
.pe-xxl-0 {
|
|
padding-end: 0 !important;
|
|
}
|
|
.pe-xxl-1 {
|
|
padding-end: 0.25rem !important;
|
|
}
|
|
.pe-xxl-2 {
|
|
padding-end: 0.5rem !important;
|
|
}
|
|
.pe-xxl-3 {
|
|
padding-end: 1rem !important;
|
|
}
|
|
.pe-xxl-4 {
|
|
padding-end: 1.5rem !important;
|
|
}
|
|
.pe-xxl-5 {
|
|
padding-end: 2rem !important;
|
|
}
|
|
.pe-xxl-6 {
|
|
padding-end: 3rem !important;
|
|
}
|
|
.pe-xxl-7 {
|
|
padding-end: 4rem !important;
|
|
}
|
|
.px-xxl-0 {
|
|
padding-left: 0 !important;
|
|
padding-right: 0 !important;
|
|
}
|
|
.px-xxl-1 {
|
|
padding-left: 0.25rem !important;
|
|
padding-right: 0.25rem !important;
|
|
}
|
|
.px-xxl-2 {
|
|
padding-left: 0.5rem !important;
|
|
padding-right: 0.5rem !important;
|
|
}
|
|
.px-xxl-3 {
|
|
padding-left: 1rem !important;
|
|
padding-right: 1rem !important;
|
|
}
|
|
.px-xxl-4 {
|
|
padding-left: 1.5rem !important;
|
|
padding-right: 1.5rem !important;
|
|
}
|
|
.px-xxl-5 {
|
|
padding-left: 2rem !important;
|
|
padding-right: 2rem !important;
|
|
}
|
|
.px-xxl-6 {
|
|
padding-left: 3rem !important;
|
|
padding-right: 3rem !important;
|
|
}
|
|
.px-xxl-7 {
|
|
padding-left: 4rem !important;
|
|
padding-right: 4rem !important;
|
|
}
|
|
.py-xxl-0 {
|
|
padding-top: 0 !important;
|
|
padding-bottom: 0 !important;
|
|
}
|
|
.py-xxl-1 {
|
|
padding-top: 0.25rem !important;
|
|
padding-bottom: 0.25rem !important;
|
|
}
|
|
.py-xxl-2 {
|
|
padding-top: 0.5rem !important;
|
|
padding-bottom: 0.5rem !important;
|
|
}
|
|
.py-xxl-3 {
|
|
padding-top: 1rem !important;
|
|
padding-bottom: 1rem !important;
|
|
}
|
|
.py-xxl-4 {
|
|
padding-top: 1.5rem !important;
|
|
padding-bottom: 1.5rem !important;
|
|
}
|
|
.py-xxl-5 {
|
|
padding-top: 2rem !important;
|
|
padding-bottom: 2rem !important;
|
|
}
|
|
.py-xxl-6 {
|
|
padding-top: 3rem !important;
|
|
padding-bottom: 3rem !important;
|
|
}
|
|
.py-xxl-7 {
|
|
padding-top: 4rem !important;
|
|
padding-bottom: 4rem !important;
|
|
}
|
|
.pa-xxl-0 {
|
|
padding: 0 !important;
|
|
}
|
|
.pa-xxl-1 {
|
|
padding: 0.25rem !important;
|
|
}
|
|
.pa-xxl-2 {
|
|
padding: 0.5rem !important;
|
|
}
|
|
.pa-xxl-3 {
|
|
padding: 1rem !important;
|
|
}
|
|
.pa-xxl-4 {
|
|
padding: 1.5rem !important;
|
|
}
|
|
.pa-xxl-5 {
|
|
padding: 2rem !important;
|
|
}
|
|
.pa-xxl-6 {
|
|
padding: 3rem !important;
|
|
}
|
|
.pa-xxl-7 {
|
|
padding: 4rem !important;
|
|
}
|
|
}
|
|
/* Classic alias set (p-0 / px-4 / etc) + gap */
|
|
.m-0 {
|
|
margin: 0 !important;
|
|
}
|
|
|
|
.mx-0 {
|
|
margin-left: 0 !important;
|
|
margin-right: 0 !important;
|
|
}
|
|
|
|
.my-0 {
|
|
margin-top: 0 !important;
|
|
margin-bottom: 0 !important;
|
|
}
|
|
|
|
.mt-0 {
|
|
margin-top: 0 !important;
|
|
}
|
|
|
|
.mb-0 {
|
|
margin-bottom: 0 !important;
|
|
}
|
|
|
|
.ml-0 {
|
|
margin-left: 0 !important;
|
|
}
|
|
|
|
.mr-0 {
|
|
margin-right: 0 !important;
|
|
}
|
|
|
|
.p-0 {
|
|
padding: 0 !important;
|
|
}
|
|
|
|
.px-0 {
|
|
padding-left: 0 !important;
|
|
padding-right: 0 !important;
|
|
}
|
|
|
|
.py-0 {
|
|
padding-top: 0 !important;
|
|
padding-bottom: 0 !important;
|
|
}
|
|
|
|
.pt-0 {
|
|
padding-top: 0 !important;
|
|
}
|
|
|
|
.pb-0 {
|
|
padding-bottom: 0 !important;
|
|
}
|
|
|
|
.pl-0 {
|
|
padding-left: 0 !important;
|
|
}
|
|
|
|
.pr-0 {
|
|
padding-right: 0 !important;
|
|
}
|
|
|
|
.gap-0 {
|
|
gap: 0 !important;
|
|
}
|
|
|
|
.m-1 {
|
|
margin: 0.25rem !important;
|
|
}
|
|
|
|
.mx-1 {
|
|
margin-left: 0.25rem !important;
|
|
margin-right: 0.25rem !important;
|
|
}
|
|
|
|
.my-1 {
|
|
margin-top: 0.25rem !important;
|
|
margin-bottom: 0.25rem !important;
|
|
}
|
|
|
|
.mt-1 {
|
|
margin-top: 0.25rem !important;
|
|
}
|
|
|
|
.mb-1 {
|
|
margin-bottom: 0.25rem !important;
|
|
}
|
|
|
|
.ml-1 {
|
|
margin-left: 0.25rem !important;
|
|
}
|
|
|
|
.mr-1 {
|
|
margin-right: 0.25rem !important;
|
|
}
|
|
|
|
.p-1 {
|
|
padding: 0.25rem !important;
|
|
}
|
|
|
|
.px-1 {
|
|
padding-left: 0.25rem !important;
|
|
padding-right: 0.25rem !important;
|
|
}
|
|
|
|
.py-1 {
|
|
padding-top: 0.25rem !important;
|
|
padding-bottom: 0.25rem !important;
|
|
}
|
|
|
|
.pt-1 {
|
|
padding-top: 0.25rem !important;
|
|
}
|
|
|
|
.pb-1 {
|
|
padding-bottom: 0.25rem !important;
|
|
}
|
|
|
|
.pl-1 {
|
|
padding-left: 0.25rem !important;
|
|
}
|
|
|
|
.pr-1 {
|
|
padding-right: 0.25rem !important;
|
|
}
|
|
|
|
.gap-1 {
|
|
gap: 0.25rem !important;
|
|
}
|
|
|
|
.m-2 {
|
|
margin: 0.5rem !important;
|
|
}
|
|
|
|
.mx-2 {
|
|
margin-left: 0.5rem !important;
|
|
margin-right: 0.5rem !important;
|
|
}
|
|
|
|
.my-2 {
|
|
margin-top: 0.5rem !important;
|
|
margin-bottom: 0.5rem !important;
|
|
}
|
|
|
|
.mt-2 {
|
|
margin-top: 0.5rem !important;
|
|
}
|
|
|
|
.mb-2 {
|
|
margin-bottom: 0.5rem !important;
|
|
}
|
|
|
|
.ml-2 {
|
|
margin-left: 0.5rem !important;
|
|
}
|
|
|
|
.mr-2 {
|
|
margin-right: 0.5rem !important;
|
|
}
|
|
|
|
.p-2 {
|
|
padding: 0.5rem !important;
|
|
}
|
|
|
|
.px-2 {
|
|
padding-left: 0.5rem !important;
|
|
padding-right: 0.5rem !important;
|
|
}
|
|
|
|
.py-2 {
|
|
padding-top: 0.5rem !important;
|
|
padding-bottom: 0.5rem !important;
|
|
}
|
|
|
|
.pt-2 {
|
|
padding-top: 0.5rem !important;
|
|
}
|
|
|
|
.pb-2 {
|
|
padding-bottom: 0.5rem !important;
|
|
}
|
|
|
|
.pl-2 {
|
|
padding-left: 0.5rem !important;
|
|
}
|
|
|
|
.pr-2 {
|
|
padding-right: 0.5rem !important;
|
|
}
|
|
|
|
.gap-2 {
|
|
gap: 0.5rem !important;
|
|
}
|
|
|
|
.m-3 {
|
|
margin: 1rem !important;
|
|
}
|
|
|
|
.mx-3 {
|
|
margin-left: 1rem !important;
|
|
margin-right: 1rem !important;
|
|
}
|
|
|
|
.my-3 {
|
|
margin-top: 1rem !important;
|
|
margin-bottom: 1rem !important;
|
|
}
|
|
|
|
.mt-3 {
|
|
margin-top: 1rem !important;
|
|
}
|
|
|
|
.mb-3 {
|
|
margin-bottom: 1rem !important;
|
|
}
|
|
|
|
.ml-3 {
|
|
margin-left: 1rem !important;
|
|
}
|
|
|
|
.mr-3 {
|
|
margin-right: 1rem !important;
|
|
}
|
|
|
|
.p-3 {
|
|
padding: 1rem !important;
|
|
}
|
|
|
|
.px-3 {
|
|
padding-left: 1rem !important;
|
|
padding-right: 1rem !important;
|
|
}
|
|
|
|
.py-3 {
|
|
padding-top: 1rem !important;
|
|
padding-bottom: 1rem !important;
|
|
}
|
|
|
|
.pt-3 {
|
|
padding-top: 1rem !important;
|
|
}
|
|
|
|
.pb-3 {
|
|
padding-bottom: 1rem !important;
|
|
}
|
|
|
|
.pl-3 {
|
|
padding-left: 1rem !important;
|
|
}
|
|
|
|
.pr-3 {
|
|
padding-right: 1rem !important;
|
|
}
|
|
|
|
.gap-3 {
|
|
gap: 1rem !important;
|
|
}
|
|
|
|
.m-4 {
|
|
margin: 1.5rem !important;
|
|
}
|
|
|
|
.mx-4 {
|
|
margin-left: 1.5rem !important;
|
|
margin-right: 1.5rem !important;
|
|
}
|
|
|
|
.my-4 {
|
|
margin-top: 1.5rem !important;
|
|
margin-bottom: 1.5rem !important;
|
|
}
|
|
|
|
.mt-4 {
|
|
margin-top: 1.5rem !important;
|
|
}
|
|
|
|
.mb-4 {
|
|
margin-bottom: 1.5rem !important;
|
|
}
|
|
|
|
.ml-4 {
|
|
margin-left: 1.5rem !important;
|
|
}
|
|
|
|
.mr-4 {
|
|
margin-right: 1.5rem !important;
|
|
}
|
|
|
|
.p-4 {
|
|
padding: 1.5rem !important;
|
|
}
|
|
|
|
.px-4 {
|
|
padding-left: 1.5rem !important;
|
|
padding-right: 1.5rem !important;
|
|
}
|
|
|
|
.py-4 {
|
|
padding-top: 1.5rem !important;
|
|
padding-bottom: 1.5rem !important;
|
|
}
|
|
|
|
.pt-4 {
|
|
padding-top: 1.5rem !important;
|
|
}
|
|
|
|
.pb-4 {
|
|
padding-bottom: 1.5rem !important;
|
|
}
|
|
|
|
.pl-4 {
|
|
padding-left: 1.5rem !important;
|
|
}
|
|
|
|
.pr-4 {
|
|
padding-right: 1.5rem !important;
|
|
}
|
|
|
|
.gap-4 {
|
|
gap: 1.5rem !important;
|
|
}
|
|
|
|
.m-5 {
|
|
margin: 2rem !important;
|
|
}
|
|
|
|
.mx-5 {
|
|
margin-left: 2rem !important;
|
|
margin-right: 2rem !important;
|
|
}
|
|
|
|
.my-5 {
|
|
margin-top: 2rem !important;
|
|
margin-bottom: 2rem !important;
|
|
}
|
|
|
|
.mt-5 {
|
|
margin-top: 2rem !important;
|
|
}
|
|
|
|
.mb-5 {
|
|
margin-bottom: 2rem !important;
|
|
}
|
|
|
|
.ml-5 {
|
|
margin-left: 2rem !important;
|
|
}
|
|
|
|
.mr-5 {
|
|
margin-right: 2rem !important;
|
|
}
|
|
|
|
.p-5 {
|
|
padding: 2rem !important;
|
|
}
|
|
|
|
.px-5 {
|
|
padding-left: 2rem !important;
|
|
padding-right: 2rem !important;
|
|
}
|
|
|
|
.py-5 {
|
|
padding-top: 2rem !important;
|
|
padding-bottom: 2rem !important;
|
|
}
|
|
|
|
.pt-5 {
|
|
padding-top: 2rem !important;
|
|
}
|
|
|
|
.pb-5 {
|
|
padding-bottom: 2rem !important;
|
|
}
|
|
|
|
.pl-5 {
|
|
padding-left: 2rem !important;
|
|
}
|
|
|
|
.pr-5 {
|
|
padding-right: 2rem !important;
|
|
}
|
|
|
|
.gap-5 {
|
|
gap: 2rem !important;
|
|
}
|
|
|
|
.m-6 {
|
|
margin: 3rem !important;
|
|
}
|
|
|
|
.mx-6 {
|
|
margin-left: 3rem !important;
|
|
margin-right: 3rem !important;
|
|
}
|
|
|
|
.my-6 {
|
|
margin-top: 3rem !important;
|
|
margin-bottom: 3rem !important;
|
|
}
|
|
|
|
.mt-6 {
|
|
margin-top: 3rem !important;
|
|
}
|
|
|
|
.mb-6 {
|
|
margin-bottom: 3rem !important;
|
|
}
|
|
|
|
.ml-6 {
|
|
margin-left: 3rem !important;
|
|
}
|
|
|
|
.mr-6 {
|
|
margin-right: 3rem !important;
|
|
}
|
|
|
|
.p-6 {
|
|
padding: 3rem !important;
|
|
}
|
|
|
|
.px-6 {
|
|
padding-left: 3rem !important;
|
|
padding-right: 3rem !important;
|
|
}
|
|
|
|
.py-6 {
|
|
padding-top: 3rem !important;
|
|
padding-bottom: 3rem !important;
|
|
}
|
|
|
|
.pt-6 {
|
|
padding-top: 3rem !important;
|
|
}
|
|
|
|
.pb-6 {
|
|
padding-bottom: 3rem !important;
|
|
}
|
|
|
|
.pl-6 {
|
|
padding-left: 3rem !important;
|
|
}
|
|
|
|
.pr-6 {
|
|
padding-right: 3rem !important;
|
|
}
|
|
|
|
.gap-6 {
|
|
gap: 3rem !important;
|
|
}
|
|
|
|
.m-7 {
|
|
margin: 4rem !important;
|
|
}
|
|
|
|
.mx-7 {
|
|
margin-left: 4rem !important;
|
|
margin-right: 4rem !important;
|
|
}
|
|
|
|
.my-7 {
|
|
margin-top: 4rem !important;
|
|
margin-bottom: 4rem !important;
|
|
}
|
|
|
|
.mt-7 {
|
|
margin-top: 4rem !important;
|
|
}
|
|
|
|
.mb-7 {
|
|
margin-bottom: 4rem !important;
|
|
}
|
|
|
|
.ml-7 {
|
|
margin-left: 4rem !important;
|
|
}
|
|
|
|
.mr-7 {
|
|
margin-right: 4rem !important;
|
|
}
|
|
|
|
.p-7 {
|
|
padding: 4rem !important;
|
|
}
|
|
|
|
.px-7 {
|
|
padding-left: 4rem !important;
|
|
padding-right: 4rem !important;
|
|
}
|
|
|
|
.py-7 {
|
|
padding-top: 4rem !important;
|
|
padding-bottom: 4rem !important;
|
|
}
|
|
|
|
.pt-7 {
|
|
padding-top: 4rem !important;
|
|
}
|
|
|
|
.pb-7 {
|
|
padding-bottom: 4rem !important;
|
|
}
|
|
|
|
.pl-7 {
|
|
padding-left: 4rem !important;
|
|
}
|
|
|
|
.pr-7 {
|
|
padding-right: 4rem !important;
|
|
}
|
|
|
|
.gap-7 {
|
|
gap: 4rem !important;
|
|
}
|
|
|
|
/* --------------------------------------------
|
|
Sizing utilities + responsive widths/heights
|
|
-------------------------------------------- */
|
|
.w-25 {
|
|
width: 25% !important;
|
|
}
|
|
|
|
.h-25 {
|
|
height: 25% !important;
|
|
}
|
|
|
|
.w-33 {
|
|
width: 33.33% !important;
|
|
}
|
|
|
|
.h-33 {
|
|
height: 33.33% !important;
|
|
}
|
|
|
|
.w-50 {
|
|
width: 50% !important;
|
|
}
|
|
|
|
.h-50 {
|
|
height: 50% !important;
|
|
}
|
|
|
|
.w-66 {
|
|
width: 66.66% !important;
|
|
}
|
|
|
|
.h-66 {
|
|
height: 66.66% !important;
|
|
}
|
|
|
|
.w-75 {
|
|
width: 75% !important;
|
|
}
|
|
|
|
.h-75 {
|
|
height: 75% !important;
|
|
}
|
|
|
|
.w-100 {
|
|
width: 100% !important;
|
|
}
|
|
|
|
.h-100 {
|
|
height: 100% !important;
|
|
}
|
|
|
|
.w-auto {
|
|
width: auto !important;
|
|
}
|
|
|
|
.h-auto {
|
|
height: auto !important;
|
|
}
|
|
|
|
.w-screen-v {
|
|
width: 100vh !important;
|
|
}
|
|
|
|
.h-screen-v {
|
|
height: 100vh !important;
|
|
}
|
|
|
|
.w-screen-h {
|
|
width: 100vw !important;
|
|
}
|
|
|
|
.h-screen-h {
|
|
height: 100vw !important;
|
|
}
|
|
|
|
@media (min-width: 0) {
|
|
.w-25 {
|
|
width: 25% !important;
|
|
}
|
|
.h-25 {
|
|
height: 25% !important;
|
|
}
|
|
.w-33 {
|
|
width: 33.33% !important;
|
|
}
|
|
.h-33 {
|
|
height: 33.33% !important;
|
|
}
|
|
.w-50 {
|
|
width: 50% !important;
|
|
}
|
|
.h-50 {
|
|
height: 50% !important;
|
|
}
|
|
.w-66 {
|
|
width: 66.66% !important;
|
|
}
|
|
.h-66 {
|
|
height: 66.66% !important;
|
|
}
|
|
.w-75 {
|
|
width: 75% !important;
|
|
}
|
|
.h-75 {
|
|
height: 75% !important;
|
|
}
|
|
.w-100 {
|
|
width: 100% !important;
|
|
}
|
|
.h-100 {
|
|
height: 100% !important;
|
|
}
|
|
.w-auto {
|
|
width: auto !important;
|
|
}
|
|
.h-auto {
|
|
height: auto !important;
|
|
}
|
|
.w-screen-v {
|
|
width: 100vh !important;
|
|
}
|
|
.h-screen-v {
|
|
height: 100vh !important;
|
|
}
|
|
.w-screen-h {
|
|
width: 100vw !important;
|
|
}
|
|
.h-screen-h {
|
|
height: 100vw !important;
|
|
}
|
|
}
|
|
@media (min-width: 576px) {
|
|
.w-sm-25 {
|
|
width: 25% !important;
|
|
}
|
|
.h-sm-25 {
|
|
height: 25% !important;
|
|
}
|
|
.w-sm-33 {
|
|
width: 33.33% !important;
|
|
}
|
|
.h-sm-33 {
|
|
height: 33.33% !important;
|
|
}
|
|
.w-sm-50 {
|
|
width: 50% !important;
|
|
}
|
|
.h-sm-50 {
|
|
height: 50% !important;
|
|
}
|
|
.w-sm-66 {
|
|
width: 66.66% !important;
|
|
}
|
|
.h-sm-66 {
|
|
height: 66.66% !important;
|
|
}
|
|
.w-sm-75 {
|
|
width: 75% !important;
|
|
}
|
|
.h-sm-75 {
|
|
height: 75% !important;
|
|
}
|
|
.w-sm-100 {
|
|
width: 100% !important;
|
|
}
|
|
.h-sm-100 {
|
|
height: 100% !important;
|
|
}
|
|
.w-sm-auto {
|
|
width: auto !important;
|
|
}
|
|
.h-sm-auto {
|
|
height: auto !important;
|
|
}
|
|
.w-sm-screen-v {
|
|
width: 100vh !important;
|
|
}
|
|
.h-sm-screen-v {
|
|
height: 100vh !important;
|
|
}
|
|
.w-sm-screen-h {
|
|
width: 100vw !important;
|
|
}
|
|
.h-sm-screen-h {
|
|
height: 100vw !important;
|
|
}
|
|
}
|
|
@media (min-width: 768px) {
|
|
.w-md-25 {
|
|
width: 25% !important;
|
|
}
|
|
.h-md-25 {
|
|
height: 25% !important;
|
|
}
|
|
.w-md-33 {
|
|
width: 33.33% !important;
|
|
}
|
|
.h-md-33 {
|
|
height: 33.33% !important;
|
|
}
|
|
.w-md-50 {
|
|
width: 50% !important;
|
|
}
|
|
.h-md-50 {
|
|
height: 50% !important;
|
|
}
|
|
.w-md-66 {
|
|
width: 66.66% !important;
|
|
}
|
|
.h-md-66 {
|
|
height: 66.66% !important;
|
|
}
|
|
.w-md-75 {
|
|
width: 75% !important;
|
|
}
|
|
.h-md-75 {
|
|
height: 75% !important;
|
|
}
|
|
.w-md-100 {
|
|
width: 100% !important;
|
|
}
|
|
.h-md-100 {
|
|
height: 100% !important;
|
|
}
|
|
.w-md-auto {
|
|
width: auto !important;
|
|
}
|
|
.h-md-auto {
|
|
height: auto !important;
|
|
}
|
|
.w-md-screen-v {
|
|
width: 100vh !important;
|
|
}
|
|
.h-md-screen-v {
|
|
height: 100vh !important;
|
|
}
|
|
.w-md-screen-h {
|
|
width: 100vw !important;
|
|
}
|
|
.h-md-screen-h {
|
|
height: 100vw !important;
|
|
}
|
|
}
|
|
@media (min-width: 992px) {
|
|
.w-lg-25 {
|
|
width: 25% !important;
|
|
}
|
|
.h-lg-25 {
|
|
height: 25% !important;
|
|
}
|
|
.w-lg-33 {
|
|
width: 33.33% !important;
|
|
}
|
|
.h-lg-33 {
|
|
height: 33.33% !important;
|
|
}
|
|
.w-lg-50 {
|
|
width: 50% !important;
|
|
}
|
|
.h-lg-50 {
|
|
height: 50% !important;
|
|
}
|
|
.w-lg-66 {
|
|
width: 66.66% !important;
|
|
}
|
|
.h-lg-66 {
|
|
height: 66.66% !important;
|
|
}
|
|
.w-lg-75 {
|
|
width: 75% !important;
|
|
}
|
|
.h-lg-75 {
|
|
height: 75% !important;
|
|
}
|
|
.w-lg-100 {
|
|
width: 100% !important;
|
|
}
|
|
.h-lg-100 {
|
|
height: 100% !important;
|
|
}
|
|
.w-lg-auto {
|
|
width: auto !important;
|
|
}
|
|
.h-lg-auto {
|
|
height: auto !important;
|
|
}
|
|
.w-lg-screen-v {
|
|
width: 100vh !important;
|
|
}
|
|
.h-lg-screen-v {
|
|
height: 100vh !important;
|
|
}
|
|
.w-lg-screen-h {
|
|
width: 100vw !important;
|
|
}
|
|
.h-lg-screen-h {
|
|
height: 100vw !important;
|
|
}
|
|
}
|
|
@media (min-width: 1200px) {
|
|
.w-xl-25 {
|
|
width: 25% !important;
|
|
}
|
|
.h-xl-25 {
|
|
height: 25% !important;
|
|
}
|
|
.w-xl-33 {
|
|
width: 33.33% !important;
|
|
}
|
|
.h-xl-33 {
|
|
height: 33.33% !important;
|
|
}
|
|
.w-xl-50 {
|
|
width: 50% !important;
|
|
}
|
|
.h-xl-50 {
|
|
height: 50% !important;
|
|
}
|
|
.w-xl-66 {
|
|
width: 66.66% !important;
|
|
}
|
|
.h-xl-66 {
|
|
height: 66.66% !important;
|
|
}
|
|
.w-xl-75 {
|
|
width: 75% !important;
|
|
}
|
|
.h-xl-75 {
|
|
height: 75% !important;
|
|
}
|
|
.w-xl-100 {
|
|
width: 100% !important;
|
|
}
|
|
.h-xl-100 {
|
|
height: 100% !important;
|
|
}
|
|
.w-xl-auto {
|
|
width: auto !important;
|
|
}
|
|
.h-xl-auto {
|
|
height: auto !important;
|
|
}
|
|
.w-xl-screen-v {
|
|
width: 100vh !important;
|
|
}
|
|
.h-xl-screen-v {
|
|
height: 100vh !important;
|
|
}
|
|
.w-xl-screen-h {
|
|
width: 100vw !important;
|
|
}
|
|
.h-xl-screen-h {
|
|
height: 100vw !important;
|
|
}
|
|
}
|
|
@media (min-width: 1400px) {
|
|
.w-xxl-25 {
|
|
width: 25% !important;
|
|
}
|
|
.h-xxl-25 {
|
|
height: 25% !important;
|
|
}
|
|
.w-xxl-33 {
|
|
width: 33.33% !important;
|
|
}
|
|
.h-xxl-33 {
|
|
height: 33.33% !important;
|
|
}
|
|
.w-xxl-50 {
|
|
width: 50% !important;
|
|
}
|
|
.h-xxl-50 {
|
|
height: 50% !important;
|
|
}
|
|
.w-xxl-66 {
|
|
width: 66.66% !important;
|
|
}
|
|
.h-xxl-66 {
|
|
height: 66.66% !important;
|
|
}
|
|
.w-xxl-75 {
|
|
width: 75% !important;
|
|
}
|
|
.h-xxl-75 {
|
|
height: 75% !important;
|
|
}
|
|
.w-xxl-100 {
|
|
width: 100% !important;
|
|
}
|
|
.h-xxl-100 {
|
|
height: 100% !important;
|
|
}
|
|
.w-xxl-auto {
|
|
width: auto !important;
|
|
}
|
|
.h-xxl-auto {
|
|
height: auto !important;
|
|
}
|
|
.w-xxl-screen-v {
|
|
width: 100vh !important;
|
|
}
|
|
.h-xxl-screen-v {
|
|
height: 100vh !important;
|
|
}
|
|
.w-xxl-screen-h {
|
|
width: 100vw !important;
|
|
}
|
|
.h-xxl-screen-h {
|
|
height: 100vw !important;
|
|
}
|
|
}
|
|
/* --------------------------------------------
|
|
Typography utilities
|
|
-------------------------------------------- */
|
|
.h1 {
|
|
font-size: 2.5rem !important;
|
|
}
|
|
|
|
.h2 {
|
|
font-size: 2rem !important;
|
|
}
|
|
|
|
.h3 {
|
|
font-size: 1.75rem !important;
|
|
}
|
|
|
|
.h4 {
|
|
font-size: 1.5rem !important;
|
|
}
|
|
|
|
.h5 {
|
|
font-size: 1.25rem !important;
|
|
}
|
|
|
|
.h6 {
|
|
font-size: 1rem !important;
|
|
}
|
|
|
|
.body {
|
|
font-size: 1rem !important;
|
|
}
|
|
|
|
.small {
|
|
font-size: 0.875rem !important;
|
|
}
|
|
|
|
.xs {
|
|
font-size: 0.75rem !important;
|
|
}
|
|
|
|
.text-center {
|
|
text-align: center !important;
|
|
}
|
|
|
|
.text-right {
|
|
text-align: right !important;
|
|
}
|
|
|
|
.text-left {
|
|
text-align: left !important;
|
|
}
|
|
|
|
.font-weight-light {
|
|
font-weight: 300 !important;
|
|
}
|
|
|
|
.font-weight-normal {
|
|
font-weight: 400 !important;
|
|
}
|
|
|
|
.font-weight-medium {
|
|
font-weight: 500 !important;
|
|
}
|
|
|
|
.font-weight-bold {
|
|
font-weight: 700 !important;
|
|
}
|
|
|
|
.text-decoration-none {
|
|
text-decoration: none !important;
|
|
}
|
|
|
|
.text-uppercase {
|
|
text-transform: uppercase !important;
|
|
}
|
|
|
|
code {
|
|
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
|
|
font-size: 0.95em;
|
|
padding: 0.12em 0.35em;
|
|
border-radius: 0.25rem;
|
|
background: rgba(var(--primary-rgb), 0.1);
|
|
border: 1px solid rgba(var(--primary-rgb), 0.14);
|
|
}
|
|
|
|
/* --------------------------------------------
|
|
Border helpers
|
|
-------------------------------------------- */
|
|
.border {
|
|
border: 1px solid var(--border-color) !important;
|
|
}
|
|
|
|
.border-top {
|
|
border-top: 1px solid var(--border-color) !important;
|
|
}
|
|
|
|
.border-bottom {
|
|
border-bottom: 1px solid var(--border-color) !important;
|
|
}
|
|
|
|
.border-left {
|
|
border-left: 1px solid var(--border-color) !important;
|
|
}
|
|
|
|
.border-right {
|
|
border-right: 1px solid var(--border-color) !important;
|
|
}
|
|
|
|
/* --------------------------------------------
|
|
Radius helpers
|
|
-------------------------------------------- */
|
|
.rounded {
|
|
border-radius: 0.5rem !important;
|
|
}
|
|
|
|
.rounded-sm {
|
|
border-radius: 0.25rem !important;
|
|
}
|
|
|
|
.rounded-lg {
|
|
border-radius: 1rem !important;
|
|
}
|
|
|
|
.rounded-pill {
|
|
border-radius: 50rem !important;
|
|
}
|
|
|
|
.rounded-none {
|
|
border-radius: 0 !important;
|
|
}
|
|
|
|
/* --------------------------------------------
|
|
Elevation helpers
|
|
-------------------------------------------- */
|
|
.elevation-0 {
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
.elevation-1 {
|
|
box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12) !important;
|
|
}
|
|
|
|
.elevation-2 {
|
|
box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12) !important;
|
|
}
|
|
|
|
.elevation-4 {
|
|
box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12) !important;
|
|
}
|
|
|
|
.elevation-8 {
|
|
box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12) !important;
|
|
}
|
|
|
|
.elevation-12 {
|
|
box-shadow: 0 7px 8px -4px rgba(0, 0, 0, 0.2), 0 12px 17px 2px rgba(0, 0, 0, 0.14), 0 5px 22px 4px rgba(0, 0, 0, 0.12) !important;
|
|
}
|
|
|
|
.elevation-16 {
|
|
box-shadow: 0 8px 10px -5px rgba(0, 0, 0, 0.2), 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12) !important;
|
|
}
|
|
|
|
.elevation-24 {
|
|
box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12) !important;
|
|
}
|
|
|
|
/* --------------------------------------------
|
|
Z-index utilities
|
|
-------------------------------------------- */
|
|
.z-deep {
|
|
z-index: -1 !important;
|
|
}
|
|
|
|
.z-default {
|
|
z-index: 1 !important;
|
|
}
|
|
|
|
.z-sticky {
|
|
z-index: 100 !important;
|
|
}
|
|
|
|
.z-sidebar {
|
|
z-index: 200 !important;
|
|
}
|
|
|
|
.z-header {
|
|
z-index: 300 !important;
|
|
}
|
|
|
|
.z-backdrop {
|
|
z-index: 400 !important;
|
|
}
|
|
|
|
.z-modal {
|
|
z-index: 500 !important;
|
|
}
|
|
|
|
.z-dropdown {
|
|
z-index: 600 !important;
|
|
}
|
|
|
|
.z-popover {
|
|
z-index: 700 !important;
|
|
}
|
|
|
|
.z-tooltip {
|
|
z-index: 800 !important;
|
|
}
|
|
|
|
.z-toast {
|
|
z-index: 900 !important;
|
|
}
|
|
|
|
/* --------------------------------------------
|
|
Visibility / overflow helpers
|
|
-------------------------------------------- */
|
|
.opacity-0 {
|
|
opacity: 0 !important;
|
|
}
|
|
|
|
.opacity-50 {
|
|
opacity: 0.5 !important;
|
|
}
|
|
|
|
.opacity-100 {
|
|
opacity: 1 !important;
|
|
}
|
|
|
|
.overflow-hidden {
|
|
overflow: hidden !important;
|
|
}
|
|
|
|
.overflow-auto {
|
|
overflow: auto !important;
|
|
}
|
|
|
|
.cursor-pointer {
|
|
cursor: pointer !important;
|
|
}
|
|
|
|
.user-select-none {
|
|
-webkit-user-select: none !important;
|
|
-moz-user-select: none !important;
|
|
user-select: none !important;
|
|
}
|
|
|
|
.is-hidden {
|
|
display: none !important;
|
|
}
|
|
|
|
.lock-scroll {
|
|
overflow: hidden !important;
|
|
}
|
|
|
|
/* --------------------------------------------
|
|
Media helpers
|
|
-------------------------------------------- */
|
|
.img-fluid {
|
|
max-width: 100%;
|
|
height: auto;
|
|
}
|
|
|
|
.object-contain {
|
|
-o-object-fit: contain !important;
|
|
object-fit: contain !important;
|
|
}
|
|
|
|
.object-cover {
|
|
-o-object-fit: cover !important;
|
|
object-fit: cover !important;
|
|
}
|
|
|
|
.object-fill {
|
|
-o-object-fit: fill !important;
|
|
object-fit: fill !important;
|
|
}
|
|
|
|
.object-scale-down {
|
|
-o-object-fit: scale-down !important;
|
|
object-fit: scale-down !important;
|
|
}
|
|
|
|
.ratio-1x1 {
|
|
position: relative;
|
|
width: 100%;
|
|
}
|
|
.ratio-1x1::before {
|
|
display: block;
|
|
content: "";
|
|
padding-top: 100%;
|
|
}
|
|
.ratio-1x1 > * {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.ratio-4x3 {
|
|
position: relative;
|
|
width: 100%;
|
|
}
|
|
.ratio-4x3::before {
|
|
display: block;
|
|
content: "";
|
|
padding-top: 75%;
|
|
}
|
|
.ratio-4x3 > * {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.ratio-16x9 {
|
|
position: relative;
|
|
width: 100%;
|
|
}
|
|
.ratio-16x9::before {
|
|
display: block;
|
|
content: "";
|
|
padding-top: 56.25%;
|
|
}
|
|
.ratio-16x9 > * {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.ratio-21x9 {
|
|
position: relative;
|
|
width: 100%;
|
|
}
|
|
.ratio-21x9::before {
|
|
display: block;
|
|
content: "";
|
|
padding-top: 42.85%;
|
|
}
|
|
.ratio-21x9 > * {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
/* --------------------------------------------
|
|
Color utilities + Buttons + Alerts
|
|
-------------------------------------------- */
|
|
.text-gray {
|
|
color: #6c757d !important;
|
|
}
|
|
|
|
.bg-gray {
|
|
background-color: #6c757d !important;
|
|
}
|
|
|
|
.bg-gray-light {
|
|
background-color: #f8f9fa !important;
|
|
}
|
|
|
|
.text-gray-50 {
|
|
color: #fbfcfd !important;
|
|
}
|
|
|
|
.bg-gray-50 {
|
|
background-color: #fbfcfd !important;
|
|
}
|
|
|
|
.text-gray-100 {
|
|
color: #f8f9fa !important;
|
|
}
|
|
|
|
.bg-gray-100 {
|
|
background-color: #f8f9fa !important;
|
|
}
|
|
|
|
.text-gray-200 {
|
|
color: #e9ecef !important;
|
|
}
|
|
|
|
.bg-gray-200 {
|
|
background-color: #e9ecef !important;
|
|
}
|
|
|
|
.text-gray-300 {
|
|
color: #dee2e6 !important;
|
|
}
|
|
|
|
.bg-gray-300 {
|
|
background-color: #dee2e6 !important;
|
|
}
|
|
|
|
.text-gray-400 {
|
|
color: #ced4da !important;
|
|
}
|
|
|
|
.bg-gray-400 {
|
|
background-color: #ced4da !important;
|
|
}
|
|
|
|
.text-gray-500 {
|
|
color: #adb5bd !important;
|
|
}
|
|
|
|
.bg-gray-500 {
|
|
background-color: #adb5bd !important;
|
|
}
|
|
|
|
.text-gray-600 {
|
|
color: #6c757d !important;
|
|
}
|
|
|
|
.bg-gray-600 {
|
|
background-color: #6c757d !important;
|
|
}
|
|
|
|
.text-gray-700 {
|
|
color: #495057 !important;
|
|
}
|
|
|
|
.bg-gray-700 {
|
|
background-color: #495057 !important;
|
|
}
|
|
|
|
.text-gray-800 {
|
|
color: #343a40 !important;
|
|
}
|
|
|
|
.bg-gray-800 {
|
|
background-color: #343a40 !important;
|
|
}
|
|
|
|
.text-gray-900 {
|
|
color: #212529 !important;
|
|
}
|
|
|
|
.bg-gray-900 {
|
|
background-color: #212529 !important;
|
|
}
|
|
|
|
.text-gray-950 {
|
|
color: #121416 !important;
|
|
}
|
|
|
|
.bg-gray-950 {
|
|
background-color: #121416 !important;
|
|
}
|
|
|
|
/* Solid button */
|
|
.btn-gray {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 0.5rem;
|
|
padding: 0.5rem 1rem;
|
|
font-weight: 500;
|
|
border-radius: 0.5rem;
|
|
border: 1px solid transparent;
|
|
cursor: pointer;
|
|
background-color: #6c757d;
|
|
color: #ffffff;
|
|
transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1), transform 250ms cubic-bezier(0.4, 0, 0.2, 1), filter 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
.btn-gray:hover {
|
|
filter: brightness(95%);
|
|
box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
|
|
transform: translateY(-2px);
|
|
}
|
|
.btn-gray:active {
|
|
filter: brightness(90%);
|
|
transform: translateY(0);
|
|
}
|
|
.btn-gray:focus {
|
|
outline: none;
|
|
}
|
|
.btn-gray:focus-visible {
|
|
box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.35), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
|
|
}
|
|
.btn-gray:disabled, .btn-gray.is-disabled {
|
|
opacity: 0.6;
|
|
cursor: not-allowed;
|
|
pointer-events: none;
|
|
box-shadow: none;
|
|
transform: none;
|
|
filter: none;
|
|
}
|
|
|
|
/* Light button */
|
|
.btn-gray-light {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 0.5rem;
|
|
padding: 0.5rem 1rem;
|
|
font-weight: 500;
|
|
border-radius: 0.5rem;
|
|
border: 1px solid #e9ecef;
|
|
cursor: pointer;
|
|
background-color: #f8f9fa;
|
|
color: #343a40;
|
|
transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1), transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
.btn-gray-light:hover {
|
|
background-color: #e9ecef;
|
|
box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);
|
|
transform: translateY(-1px);
|
|
}
|
|
.btn-gray-light:active {
|
|
background-color: #dee2e6;
|
|
transform: translateY(0);
|
|
}
|
|
.btn-gray-light:focus {
|
|
outline: none;
|
|
}
|
|
.btn-gray-light:focus-visible {
|
|
box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.35), 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);
|
|
}
|
|
.btn-gray-light:disabled, .btn-gray-light.is-disabled {
|
|
opacity: 0.6;
|
|
cursor: not-allowed;
|
|
pointer-events: none;
|
|
box-shadow: none;
|
|
transform: none;
|
|
}
|
|
|
|
/* Alerts */
|
|
.alert-gray {
|
|
padding: 1rem;
|
|
border-radius: 0.5rem;
|
|
background-color: #f8f9fa;
|
|
color: #212529;
|
|
border: 1px solid #e9ecef;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.text-blue {
|
|
color: #0a58ca !important;
|
|
}
|
|
|
|
.bg-blue {
|
|
background-color: #0a58ca !important;
|
|
}
|
|
|
|
.bg-blue-light {
|
|
background-color: #e7f1ff !important;
|
|
}
|
|
|
|
.text-blue-50 {
|
|
color: #f0f7ff !important;
|
|
}
|
|
|
|
.bg-blue-50 {
|
|
background-color: #f0f7ff !important;
|
|
}
|
|
|
|
.text-blue-100 {
|
|
color: #e7f1ff !important;
|
|
}
|
|
|
|
.bg-blue-100 {
|
|
background-color: #e7f1ff !important;
|
|
}
|
|
|
|
.text-blue-200 {
|
|
color: #cfe2ff !important;
|
|
}
|
|
|
|
.bg-blue-200 {
|
|
background-color: #cfe2ff !important;
|
|
}
|
|
|
|
.text-blue-300 {
|
|
color: #9ec5fe !important;
|
|
}
|
|
|
|
.bg-blue-300 {
|
|
background-color: #9ec5fe !important;
|
|
}
|
|
|
|
.text-blue-400 {
|
|
color: #6ea8fe !important;
|
|
}
|
|
|
|
.bg-blue-400 {
|
|
background-color: #6ea8fe !important;
|
|
}
|
|
|
|
.text-blue-500 {
|
|
color: #0d6efd !important;
|
|
}
|
|
|
|
.bg-blue-500 {
|
|
background-color: #0d6efd !important;
|
|
}
|
|
|
|
.text-blue-600 {
|
|
color: #0a58ca !important;
|
|
}
|
|
|
|
.bg-blue-600 {
|
|
background-color: #0a58ca !important;
|
|
}
|
|
|
|
.text-blue-700 {
|
|
color: #084298 !important;
|
|
}
|
|
|
|
.bg-blue-700 {
|
|
background-color: #084298 !important;
|
|
}
|
|
|
|
.text-blue-800 {
|
|
color: #052c65 !important;
|
|
}
|
|
|
|
.bg-blue-800 {
|
|
background-color: #052c65 !important;
|
|
}
|
|
|
|
.text-blue-900 {
|
|
color: #031633 !important;
|
|
}
|
|
|
|
.bg-blue-900 {
|
|
background-color: #031633 !important;
|
|
}
|
|
|
|
.text-blue-950 {
|
|
color: #020b1a !important;
|
|
}
|
|
|
|
.bg-blue-950 {
|
|
background-color: #020b1a !important;
|
|
}
|
|
|
|
/* Solid button */
|
|
.btn-blue {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 0.5rem;
|
|
padding: 0.5rem 1rem;
|
|
font-weight: 500;
|
|
border-radius: 0.5rem;
|
|
border: 1px solid transparent;
|
|
cursor: pointer;
|
|
background-color: #0a58ca;
|
|
color: #ffffff;
|
|
transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1), transform 250ms cubic-bezier(0.4, 0, 0.2, 1), filter 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
.btn-blue:hover {
|
|
filter: brightness(95%);
|
|
box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
|
|
transform: translateY(-2px);
|
|
}
|
|
.btn-blue:active {
|
|
filter: brightness(90%);
|
|
transform: translateY(0);
|
|
}
|
|
.btn-blue:focus {
|
|
outline: none;
|
|
}
|
|
.btn-blue:focus-visible {
|
|
box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.35), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
|
|
}
|
|
.btn-blue:disabled, .btn-blue.is-disabled {
|
|
opacity: 0.6;
|
|
cursor: not-allowed;
|
|
pointer-events: none;
|
|
box-shadow: none;
|
|
transform: none;
|
|
filter: none;
|
|
}
|
|
|
|
/* Light button */
|
|
.btn-blue-light {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 0.5rem;
|
|
padding: 0.5rem 1rem;
|
|
font-weight: 500;
|
|
border-radius: 0.5rem;
|
|
border: 1px solid #cfe2ff;
|
|
cursor: pointer;
|
|
background-color: #e7f1ff;
|
|
color: #052c65;
|
|
transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1), transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
.btn-blue-light:hover {
|
|
background-color: #cfe2ff;
|
|
box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);
|
|
transform: translateY(-1px);
|
|
}
|
|
.btn-blue-light:active {
|
|
background-color: #9ec5fe;
|
|
transform: translateY(0);
|
|
}
|
|
.btn-blue-light:focus {
|
|
outline: none;
|
|
}
|
|
.btn-blue-light:focus-visible {
|
|
box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.35), 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);
|
|
}
|
|
.btn-blue-light:disabled, .btn-blue-light.is-disabled {
|
|
opacity: 0.6;
|
|
cursor: not-allowed;
|
|
pointer-events: none;
|
|
box-shadow: none;
|
|
transform: none;
|
|
}
|
|
|
|
/* Alerts */
|
|
.alert-blue {
|
|
padding: 1rem;
|
|
border-radius: 0.5rem;
|
|
background-color: #e7f1ff;
|
|
color: #031633;
|
|
border: 1px solid #cfe2ff;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.text-indigo {
|
|
color: #7c3aed !important;
|
|
}
|
|
|
|
.bg-indigo {
|
|
background-color: #7c3aed !important;
|
|
}
|
|
|
|
.bg-indigo-light {
|
|
background-color: #ede9fe !important;
|
|
}
|
|
|
|
.text-indigo-50 {
|
|
color: #f5f3ff !important;
|
|
}
|
|
|
|
.bg-indigo-50 {
|
|
background-color: #f5f3ff !important;
|
|
}
|
|
|
|
.text-indigo-100 {
|
|
color: #ede9fe !important;
|
|
}
|
|
|
|
.bg-indigo-100 {
|
|
background-color: #ede9fe !important;
|
|
}
|
|
|
|
.text-indigo-200 {
|
|
color: #ddd6fe !important;
|
|
}
|
|
|
|
.bg-indigo-200 {
|
|
background-color: #ddd6fe !important;
|
|
}
|
|
|
|
.text-indigo-300 {
|
|
color: #c4b5fd !important;
|
|
}
|
|
|
|
.bg-indigo-300 {
|
|
background-color: #c4b5fd !important;
|
|
}
|
|
|
|
.text-indigo-400 {
|
|
color: #a78bfa !important;
|
|
}
|
|
|
|
.bg-indigo-400 {
|
|
background-color: #a78bfa !important;
|
|
}
|
|
|
|
.text-indigo-500 {
|
|
color: #8b5cf6 !important;
|
|
}
|
|
|
|
.bg-indigo-500 {
|
|
background-color: #8b5cf6 !important;
|
|
}
|
|
|
|
.text-indigo-600 {
|
|
color: #7c3aed !important;
|
|
}
|
|
|
|
.bg-indigo-600 {
|
|
background-color: #7c3aed !important;
|
|
}
|
|
|
|
.text-indigo-700 {
|
|
color: #6d28d9 !important;
|
|
}
|
|
|
|
.bg-indigo-700 {
|
|
background-color: #6d28d9 !important;
|
|
}
|
|
|
|
.text-indigo-800 {
|
|
color: #5b21b6 !important;
|
|
}
|
|
|
|
.bg-indigo-800 {
|
|
background-color: #5b21b6 !important;
|
|
}
|
|
|
|
.text-indigo-900 {
|
|
color: #4c1d95 !important;
|
|
}
|
|
|
|
.bg-indigo-900 {
|
|
background-color: #4c1d95 !important;
|
|
}
|
|
|
|
.text-indigo-950 {
|
|
color: #2e1065 !important;
|
|
}
|
|
|
|
.bg-indigo-950 {
|
|
background-color: #2e1065 !important;
|
|
}
|
|
|
|
/* Solid button */
|
|
.btn-indigo {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 0.5rem;
|
|
padding: 0.5rem 1rem;
|
|
font-weight: 500;
|
|
border-radius: 0.5rem;
|
|
border: 1px solid transparent;
|
|
cursor: pointer;
|
|
background-color: #7c3aed;
|
|
color: #ffffff;
|
|
transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1), transform 250ms cubic-bezier(0.4, 0, 0.2, 1), filter 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
.btn-indigo:hover {
|
|
filter: brightness(95%);
|
|
box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
|
|
transform: translateY(-2px);
|
|
}
|
|
.btn-indigo:active {
|
|
filter: brightness(90%);
|
|
transform: translateY(0);
|
|
}
|
|
.btn-indigo:focus {
|
|
outline: none;
|
|
}
|
|
.btn-indigo:focus-visible {
|
|
box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.35), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
|
|
}
|
|
.btn-indigo:disabled, .btn-indigo.is-disabled {
|
|
opacity: 0.6;
|
|
cursor: not-allowed;
|
|
pointer-events: none;
|
|
box-shadow: none;
|
|
transform: none;
|
|
filter: none;
|
|
}
|
|
|
|
/* Light button */
|
|
.btn-indigo-light {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 0.5rem;
|
|
padding: 0.5rem 1rem;
|
|
font-weight: 500;
|
|
border-radius: 0.5rem;
|
|
border: 1px solid #ddd6fe;
|
|
cursor: pointer;
|
|
background-color: #ede9fe;
|
|
color: #5b21b6;
|
|
transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1), transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
.btn-indigo-light:hover {
|
|
background-color: #ddd6fe;
|
|
box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);
|
|
transform: translateY(-1px);
|
|
}
|
|
.btn-indigo-light:active {
|
|
background-color: #c4b5fd;
|
|
transform: translateY(0);
|
|
}
|
|
.btn-indigo-light:focus {
|
|
outline: none;
|
|
}
|
|
.btn-indigo-light:focus-visible {
|
|
box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.35), 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);
|
|
}
|
|
.btn-indigo-light:disabled, .btn-indigo-light.is-disabled {
|
|
opacity: 0.6;
|
|
cursor: not-allowed;
|
|
pointer-events: none;
|
|
box-shadow: none;
|
|
transform: none;
|
|
}
|
|
|
|
/* Alerts */
|
|
.alert-indigo {
|
|
padding: 1rem;
|
|
border-radius: 0.5rem;
|
|
background-color: #ede9fe;
|
|
color: #4c1d95;
|
|
border: 1px solid #ddd6fe;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.text-purple {
|
|
color: #9333ea !important;
|
|
}
|
|
|
|
.bg-purple {
|
|
background-color: #9333ea !important;
|
|
}
|
|
|
|
.bg-purple-light {
|
|
background-color: #f3e8ff !important;
|
|
}
|
|
|
|
.text-purple-50 {
|
|
color: #faf5ff !important;
|
|
}
|
|
|
|
.bg-purple-50 {
|
|
background-color: #faf5ff !important;
|
|
}
|
|
|
|
.text-purple-100 {
|
|
color: #f3e8ff !important;
|
|
}
|
|
|
|
.bg-purple-100 {
|
|
background-color: #f3e8ff !important;
|
|
}
|
|
|
|
.text-purple-200 {
|
|
color: #e9d5ff !important;
|
|
}
|
|
|
|
.bg-purple-200 {
|
|
background-color: #e9d5ff !important;
|
|
}
|
|
|
|
.text-purple-300 {
|
|
color: #d8b4fe !important;
|
|
}
|
|
|
|
.bg-purple-300 {
|
|
background-color: #d8b4fe !important;
|
|
}
|
|
|
|
.text-purple-400 {
|
|
color: #c084fc !important;
|
|
}
|
|
|
|
.bg-purple-400 {
|
|
background-color: #c084fc !important;
|
|
}
|
|
|
|
.text-purple-500 {
|
|
color: #a855f7 !important;
|
|
}
|
|
|
|
.bg-purple-500 {
|
|
background-color: #a855f7 !important;
|
|
}
|
|
|
|
.text-purple-600 {
|
|
color: #9333ea !important;
|
|
}
|
|
|
|
.bg-purple-600 {
|
|
background-color: #9333ea !important;
|
|
}
|
|
|
|
.text-purple-700 {
|
|
color: #7e22ce !important;
|
|
}
|
|
|
|
.bg-purple-700 {
|
|
background-color: #7e22ce !important;
|
|
}
|
|
|
|
.text-purple-800 {
|
|
color: #6b21a8 !important;
|
|
}
|
|
|
|
.bg-purple-800 {
|
|
background-color: #6b21a8 !important;
|
|
}
|
|
|
|
.text-purple-900 {
|
|
color: #581c87 !important;
|
|
}
|
|
|
|
.bg-purple-900 {
|
|
background-color: #581c87 !important;
|
|
}
|
|
|
|
.text-purple-950 {
|
|
color: #3b0764 !important;
|
|
}
|
|
|
|
.bg-purple-950 {
|
|
background-color: #3b0764 !important;
|
|
}
|
|
|
|
/* Solid button */
|
|
.btn-purple {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 0.5rem;
|
|
padding: 0.5rem 1rem;
|
|
font-weight: 500;
|
|
border-radius: 0.5rem;
|
|
border: 1px solid transparent;
|
|
cursor: pointer;
|
|
background-color: #9333ea;
|
|
color: #ffffff;
|
|
transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1), transform 250ms cubic-bezier(0.4, 0, 0.2, 1), filter 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
.btn-purple:hover {
|
|
filter: brightness(95%);
|
|
box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
|
|
transform: translateY(-2px);
|
|
}
|
|
.btn-purple:active {
|
|
filter: brightness(90%);
|
|
transform: translateY(0);
|
|
}
|
|
.btn-purple:focus {
|
|
outline: none;
|
|
}
|
|
.btn-purple:focus-visible {
|
|
box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.35), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
|
|
}
|
|
.btn-purple:disabled, .btn-purple.is-disabled {
|
|
opacity: 0.6;
|
|
cursor: not-allowed;
|
|
pointer-events: none;
|
|
box-shadow: none;
|
|
transform: none;
|
|
filter: none;
|
|
}
|
|
|
|
/* Light button */
|
|
.btn-purple-light {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 0.5rem;
|
|
padding: 0.5rem 1rem;
|
|
font-weight: 500;
|
|
border-radius: 0.5rem;
|
|
border: 1px solid #e9d5ff;
|
|
cursor: pointer;
|
|
background-color: #f3e8ff;
|
|
color: #6b21a8;
|
|
transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1), transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
.btn-purple-light:hover {
|
|
background-color: #e9d5ff;
|
|
box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);
|
|
transform: translateY(-1px);
|
|
}
|
|
.btn-purple-light:active {
|
|
background-color: #d8b4fe;
|
|
transform: translateY(0);
|
|
}
|
|
.btn-purple-light:focus {
|
|
outline: none;
|
|
}
|
|
.btn-purple-light:focus-visible {
|
|
box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.35), 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);
|
|
}
|
|
.btn-purple-light:disabled, .btn-purple-light.is-disabled {
|
|
opacity: 0.6;
|
|
cursor: not-allowed;
|
|
pointer-events: none;
|
|
box-shadow: none;
|
|
transform: none;
|
|
}
|
|
|
|
/* Alerts */
|
|
.alert-purple {
|
|
padding: 1rem;
|
|
border-radius: 0.5rem;
|
|
background-color: #f3e8ff;
|
|
color: #581c87;
|
|
border: 1px solid #e9d5ff;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.text-pink {
|
|
color: #db2777 !important;
|
|
}
|
|
|
|
.bg-pink {
|
|
background-color: #db2777 !important;
|
|
}
|
|
|
|
.bg-pink-light {
|
|
background-color: #fce7f3 !important;
|
|
}
|
|
|
|
.text-pink-50 {
|
|
color: #fdf2f8 !important;
|
|
}
|
|
|
|
.bg-pink-50 {
|
|
background-color: #fdf2f8 !important;
|
|
}
|
|
|
|
.text-pink-100 {
|
|
color: #fce7f3 !important;
|
|
}
|
|
|
|
.bg-pink-100 {
|
|
background-color: #fce7f3 !important;
|
|
}
|
|
|
|
.text-pink-200 {
|
|
color: #fbcfe8 !important;
|
|
}
|
|
|
|
.bg-pink-200 {
|
|
background-color: #fbcfe8 !important;
|
|
}
|
|
|
|
.text-pink-300 {
|
|
color: #f9a8d4 !important;
|
|
}
|
|
|
|
.bg-pink-300 {
|
|
background-color: #f9a8d4 !important;
|
|
}
|
|
|
|
.text-pink-400 {
|
|
color: #f472b6 !important;
|
|
}
|
|
|
|
.bg-pink-400 {
|
|
background-color: #f472b6 !important;
|
|
}
|
|
|
|
.text-pink-500 {
|
|
color: #ec4899 !important;
|
|
}
|
|
|
|
.bg-pink-500 {
|
|
background-color: #ec4899 !important;
|
|
}
|
|
|
|
.text-pink-600 {
|
|
color: #db2777 !important;
|
|
}
|
|
|
|
.bg-pink-600 {
|
|
background-color: #db2777 !important;
|
|
}
|
|
|
|
.text-pink-700 {
|
|
color: #be185d !important;
|
|
}
|
|
|
|
.bg-pink-700 {
|
|
background-color: #be185d !important;
|
|
}
|
|
|
|
.text-pink-800 {
|
|
color: #9d174d !important;
|
|
}
|
|
|
|
.bg-pink-800 {
|
|
background-color: #9d174d !important;
|
|
}
|
|
|
|
.text-pink-900 {
|
|
color: #831843 !important;
|
|
}
|
|
|
|
.bg-pink-900 {
|
|
background-color: #831843 !important;
|
|
}
|
|
|
|
.text-pink-950 {
|
|
color: #500724 !important;
|
|
}
|
|
|
|
.bg-pink-950 {
|
|
background-color: #500724 !important;
|
|
}
|
|
|
|
/* Solid button */
|
|
.btn-pink {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 0.5rem;
|
|
padding: 0.5rem 1rem;
|
|
font-weight: 500;
|
|
border-radius: 0.5rem;
|
|
border: 1px solid transparent;
|
|
cursor: pointer;
|
|
background-color: #db2777;
|
|
color: #ffffff;
|
|
transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1), transform 250ms cubic-bezier(0.4, 0, 0.2, 1), filter 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
.btn-pink:hover {
|
|
filter: brightness(95%);
|
|
box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
|
|
transform: translateY(-2px);
|
|
}
|
|
.btn-pink:active {
|
|
filter: brightness(90%);
|
|
transform: translateY(0);
|
|
}
|
|
.btn-pink:focus {
|
|
outline: none;
|
|
}
|
|
.btn-pink:focus-visible {
|
|
box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.35), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
|
|
}
|
|
.btn-pink:disabled, .btn-pink.is-disabled {
|
|
opacity: 0.6;
|
|
cursor: not-allowed;
|
|
pointer-events: none;
|
|
box-shadow: none;
|
|
transform: none;
|
|
filter: none;
|
|
}
|
|
|
|
/* Light button */
|
|
.btn-pink-light {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 0.5rem;
|
|
padding: 0.5rem 1rem;
|
|
font-weight: 500;
|
|
border-radius: 0.5rem;
|
|
border: 1px solid #fbcfe8;
|
|
cursor: pointer;
|
|
background-color: #fce7f3;
|
|
color: #9d174d;
|
|
transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1), transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
.btn-pink-light:hover {
|
|
background-color: #fbcfe8;
|
|
box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);
|
|
transform: translateY(-1px);
|
|
}
|
|
.btn-pink-light:active {
|
|
background-color: #f9a8d4;
|
|
transform: translateY(0);
|
|
}
|
|
.btn-pink-light:focus {
|
|
outline: none;
|
|
}
|
|
.btn-pink-light:focus-visible {
|
|
box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.35), 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);
|
|
}
|
|
.btn-pink-light:disabled, .btn-pink-light.is-disabled {
|
|
opacity: 0.6;
|
|
cursor: not-allowed;
|
|
pointer-events: none;
|
|
box-shadow: none;
|
|
transform: none;
|
|
}
|
|
|
|
/* Alerts */
|
|
.alert-pink {
|
|
padding: 1rem;
|
|
border-radius: 0.5rem;
|
|
background-color: #fce7f3;
|
|
color: #831843;
|
|
border: 1px solid #fbcfe8;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.text-red {
|
|
color: #dc2626 !important;
|
|
}
|
|
|
|
.bg-red {
|
|
background-color: #dc2626 !important;
|
|
}
|
|
|
|
.bg-red-light {
|
|
background-color: #fee2e2 !important;
|
|
}
|
|
|
|
.text-red-50 {
|
|
color: #fef2f2 !important;
|
|
}
|
|
|
|
.bg-red-50 {
|
|
background-color: #fef2f2 !important;
|
|
}
|
|
|
|
.text-red-100 {
|
|
color: #fee2e2 !important;
|
|
}
|
|
|
|
.bg-red-100 {
|
|
background-color: #fee2e2 !important;
|
|
}
|
|
|
|
.text-red-200 {
|
|
color: #fecaca !important;
|
|
}
|
|
|
|
.bg-red-200 {
|
|
background-color: #fecaca !important;
|
|
}
|
|
|
|
.text-red-300 {
|
|
color: #fca5a5 !important;
|
|
}
|
|
|
|
.bg-red-300 {
|
|
background-color: #fca5a5 !important;
|
|
}
|
|
|
|
.text-red-400 {
|
|
color: #f87171 !important;
|
|
}
|
|
|
|
.bg-red-400 {
|
|
background-color: #f87171 !important;
|
|
}
|
|
|
|
.text-red-500 {
|
|
color: #ef4444 !important;
|
|
}
|
|
|
|
.bg-red-500 {
|
|
background-color: #ef4444 !important;
|
|
}
|
|
|
|
.text-red-600 {
|
|
color: #dc2626 !important;
|
|
}
|
|
|
|
.bg-red-600 {
|
|
background-color: #dc2626 !important;
|
|
}
|
|
|
|
.text-red-700 {
|
|
color: #b91c1c !important;
|
|
}
|
|
|
|
.bg-red-700 {
|
|
background-color: #b91c1c !important;
|
|
}
|
|
|
|
.text-red-800 {
|
|
color: #991b1b !important;
|
|
}
|
|
|
|
.bg-red-800 {
|
|
background-color: #991b1b !important;
|
|
}
|
|
|
|
.text-red-900 {
|
|
color: #7f1d1d !important;
|
|
}
|
|
|
|
.bg-red-900 {
|
|
background-color: #7f1d1d !important;
|
|
}
|
|
|
|
.text-red-950 {
|
|
color: #450a0a !important;
|
|
}
|
|
|
|
.bg-red-950 {
|
|
background-color: #450a0a !important;
|
|
}
|
|
|
|
/* Solid button */
|
|
.btn-red {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 0.5rem;
|
|
padding: 0.5rem 1rem;
|
|
font-weight: 500;
|
|
border-radius: 0.5rem;
|
|
border: 1px solid transparent;
|
|
cursor: pointer;
|
|
background-color: #dc2626;
|
|
color: #ffffff;
|
|
transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1), transform 250ms cubic-bezier(0.4, 0, 0.2, 1), filter 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
.btn-red:hover {
|
|
filter: brightness(95%);
|
|
box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
|
|
transform: translateY(-2px);
|
|
}
|
|
.btn-red:active {
|
|
filter: brightness(90%);
|
|
transform: translateY(0);
|
|
}
|
|
.btn-red:focus {
|
|
outline: none;
|
|
}
|
|
.btn-red:focus-visible {
|
|
box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.35), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
|
|
}
|
|
.btn-red:disabled, .btn-red.is-disabled {
|
|
opacity: 0.6;
|
|
cursor: not-allowed;
|
|
pointer-events: none;
|
|
box-shadow: none;
|
|
transform: none;
|
|
filter: none;
|
|
}
|
|
|
|
/* Light button */
|
|
.btn-red-light {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 0.5rem;
|
|
padding: 0.5rem 1rem;
|
|
font-weight: 500;
|
|
border-radius: 0.5rem;
|
|
border: 1px solid #fecaca;
|
|
cursor: pointer;
|
|
background-color: #fee2e2;
|
|
color: #991b1b;
|
|
transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1), transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
.btn-red-light:hover {
|
|
background-color: #fecaca;
|
|
box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);
|
|
transform: translateY(-1px);
|
|
}
|
|
.btn-red-light:active {
|
|
background-color: #fca5a5;
|
|
transform: translateY(0);
|
|
}
|
|
.btn-red-light:focus {
|
|
outline: none;
|
|
}
|
|
.btn-red-light:focus-visible {
|
|
box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.35), 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);
|
|
}
|
|
.btn-red-light:disabled, .btn-red-light.is-disabled {
|
|
opacity: 0.6;
|
|
cursor: not-allowed;
|
|
pointer-events: none;
|
|
box-shadow: none;
|
|
transform: none;
|
|
}
|
|
|
|
/* Alerts */
|
|
.alert-red {
|
|
padding: 1rem;
|
|
border-radius: 0.5rem;
|
|
background-color: #fee2e2;
|
|
color: #7f1d1d;
|
|
border: 1px solid #fecaca;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.text-orange {
|
|
color: #ea580c !important;
|
|
}
|
|
|
|
.bg-orange {
|
|
background-color: #ea580c !important;
|
|
}
|
|
|
|
.bg-orange-light {
|
|
background-color: #ffedd5 !important;
|
|
}
|
|
|
|
.text-orange-50 {
|
|
color: #fff7ed !important;
|
|
}
|
|
|
|
.bg-orange-50 {
|
|
background-color: #fff7ed !important;
|
|
}
|
|
|
|
.text-orange-100 {
|
|
color: #ffedd5 !important;
|
|
}
|
|
|
|
.bg-orange-100 {
|
|
background-color: #ffedd5 !important;
|
|
}
|
|
|
|
.text-orange-200 {
|
|
color: #fed7aa !important;
|
|
}
|
|
|
|
.bg-orange-200 {
|
|
background-color: #fed7aa !important;
|
|
}
|
|
|
|
.text-orange-300 {
|
|
color: #fdba74 !important;
|
|
}
|
|
|
|
.bg-orange-300 {
|
|
background-color: #fdba74 !important;
|
|
}
|
|
|
|
.text-orange-400 {
|
|
color: #fb923c !important;
|
|
}
|
|
|
|
.bg-orange-400 {
|
|
background-color: #fb923c !important;
|
|
}
|
|
|
|
.text-orange-500 {
|
|
color: #f97316 !important;
|
|
}
|
|
|
|
.bg-orange-500 {
|
|
background-color: #f97316 !important;
|
|
}
|
|
|
|
.text-orange-600 {
|
|
color: #ea580c !important;
|
|
}
|
|
|
|
.bg-orange-600 {
|
|
background-color: #ea580c !important;
|
|
}
|
|
|
|
.text-orange-700 {
|
|
color: #c2410c !important;
|
|
}
|
|
|
|
.bg-orange-700 {
|
|
background-color: #c2410c !important;
|
|
}
|
|
|
|
.text-orange-800 {
|
|
color: #9a3412 !important;
|
|
}
|
|
|
|
.bg-orange-800 {
|
|
background-color: #9a3412 !important;
|
|
}
|
|
|
|
.text-orange-900 {
|
|
color: #7c2d12 !important;
|
|
}
|
|
|
|
.bg-orange-900 {
|
|
background-color: #7c2d12 !important;
|
|
}
|
|
|
|
.text-orange-950 {
|
|
color: #431407 !important;
|
|
}
|
|
|
|
.bg-orange-950 {
|
|
background-color: #431407 !important;
|
|
}
|
|
|
|
/* Solid button */
|
|
.btn-orange {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 0.5rem;
|
|
padding: 0.5rem 1rem;
|
|
font-weight: 500;
|
|
border-radius: 0.5rem;
|
|
border: 1px solid transparent;
|
|
cursor: pointer;
|
|
background-color: #ea580c;
|
|
color: #ffffff;
|
|
transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1), transform 250ms cubic-bezier(0.4, 0, 0.2, 1), filter 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
.btn-orange:hover {
|
|
filter: brightness(95%);
|
|
box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
|
|
transform: translateY(-2px);
|
|
}
|
|
.btn-orange:active {
|
|
filter: brightness(90%);
|
|
transform: translateY(0);
|
|
}
|
|
.btn-orange:focus {
|
|
outline: none;
|
|
}
|
|
.btn-orange:focus-visible {
|
|
box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.35), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
|
|
}
|
|
.btn-orange:disabled, .btn-orange.is-disabled {
|
|
opacity: 0.6;
|
|
cursor: not-allowed;
|
|
pointer-events: none;
|
|
box-shadow: none;
|
|
transform: none;
|
|
filter: none;
|
|
}
|
|
|
|
/* Light button */
|
|
.btn-orange-light {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 0.5rem;
|
|
padding: 0.5rem 1rem;
|
|
font-weight: 500;
|
|
border-radius: 0.5rem;
|
|
border: 1px solid #fed7aa;
|
|
cursor: pointer;
|
|
background-color: #ffedd5;
|
|
color: #9a3412;
|
|
transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1), transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
.btn-orange-light:hover {
|
|
background-color: #fed7aa;
|
|
box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);
|
|
transform: translateY(-1px);
|
|
}
|
|
.btn-orange-light:active {
|
|
background-color: #fdba74;
|
|
transform: translateY(0);
|
|
}
|
|
.btn-orange-light:focus {
|
|
outline: none;
|
|
}
|
|
.btn-orange-light:focus-visible {
|
|
box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.35), 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);
|
|
}
|
|
.btn-orange-light:disabled, .btn-orange-light.is-disabled {
|
|
opacity: 0.6;
|
|
cursor: not-allowed;
|
|
pointer-events: none;
|
|
box-shadow: none;
|
|
transform: none;
|
|
}
|
|
|
|
/* Alerts */
|
|
.alert-orange {
|
|
padding: 1rem;
|
|
border-radius: 0.5rem;
|
|
background-color: #ffedd5;
|
|
color: #7c2d12;
|
|
border: 1px solid #fed7aa;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.text-yellow {
|
|
color: #ca8a04 !important;
|
|
}
|
|
|
|
.bg-yellow {
|
|
background-color: #ca8a04 !important;
|
|
}
|
|
|
|
.bg-yellow-light {
|
|
background-color: #fef9c3 !important;
|
|
}
|
|
|
|
.text-yellow-50 {
|
|
color: #fefce8 !important;
|
|
}
|
|
|
|
.bg-yellow-50 {
|
|
background-color: #fefce8 !important;
|
|
}
|
|
|
|
.text-yellow-100 {
|
|
color: #fef9c3 !important;
|
|
}
|
|
|
|
.bg-yellow-100 {
|
|
background-color: #fef9c3 !important;
|
|
}
|
|
|
|
.text-yellow-200 {
|
|
color: #fef08a !important;
|
|
}
|
|
|
|
.bg-yellow-200 {
|
|
background-color: #fef08a !important;
|
|
}
|
|
|
|
.text-yellow-300 {
|
|
color: #fde047 !important;
|
|
}
|
|
|
|
.bg-yellow-300 {
|
|
background-color: #fde047 !important;
|
|
}
|
|
|
|
.text-yellow-400 {
|
|
color: #facc15 !important;
|
|
}
|
|
|
|
.bg-yellow-400 {
|
|
background-color: #facc15 !important;
|
|
}
|
|
|
|
.text-yellow-500 {
|
|
color: #eab308 !important;
|
|
}
|
|
|
|
.bg-yellow-500 {
|
|
background-color: #eab308 !important;
|
|
}
|
|
|
|
.text-yellow-600 {
|
|
color: #ca8a04 !important;
|
|
}
|
|
|
|
.bg-yellow-600 {
|
|
background-color: #ca8a04 !important;
|
|
}
|
|
|
|
.text-yellow-700 {
|
|
color: #a16207 !important;
|
|
}
|
|
|
|
.bg-yellow-700 {
|
|
background-color: #a16207 !important;
|
|
}
|
|
|
|
.text-yellow-800 {
|
|
color: #854d0e !important;
|
|
}
|
|
|
|
.bg-yellow-800 {
|
|
background-color: #854d0e !important;
|
|
}
|
|
|
|
.text-yellow-900 {
|
|
color: #713f12 !important;
|
|
}
|
|
|
|
.bg-yellow-900 {
|
|
background-color: #713f12 !important;
|
|
}
|
|
|
|
.text-yellow-950 {
|
|
color: #422006 !important;
|
|
}
|
|
|
|
.bg-yellow-950 {
|
|
background-color: #422006 !important;
|
|
}
|
|
|
|
/* Solid button */
|
|
.btn-yellow {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 0.5rem;
|
|
padding: 0.5rem 1rem;
|
|
font-weight: 500;
|
|
border-radius: 0.5rem;
|
|
border: 1px solid transparent;
|
|
cursor: pointer;
|
|
background-color: #ca8a04;
|
|
color: #ffffff;
|
|
transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1), transform 250ms cubic-bezier(0.4, 0, 0.2, 1), filter 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
.btn-yellow:hover {
|
|
filter: brightness(95%);
|
|
box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
|
|
transform: translateY(-2px);
|
|
}
|
|
.btn-yellow:active {
|
|
filter: brightness(90%);
|
|
transform: translateY(0);
|
|
}
|
|
.btn-yellow:focus {
|
|
outline: none;
|
|
}
|
|
.btn-yellow:focus-visible {
|
|
box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.35), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
|
|
}
|
|
.btn-yellow:disabled, .btn-yellow.is-disabled {
|
|
opacity: 0.6;
|
|
cursor: not-allowed;
|
|
pointer-events: none;
|
|
box-shadow: none;
|
|
transform: none;
|
|
filter: none;
|
|
}
|
|
|
|
/* Light button */
|
|
.btn-yellow-light {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 0.5rem;
|
|
padding: 0.5rem 1rem;
|
|
font-weight: 500;
|
|
border-radius: 0.5rem;
|
|
border: 1px solid #fef08a;
|
|
cursor: pointer;
|
|
background-color: #fef9c3;
|
|
color: #854d0e;
|
|
transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1), transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
.btn-yellow-light:hover {
|
|
background-color: #fef08a;
|
|
box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);
|
|
transform: translateY(-1px);
|
|
}
|
|
.btn-yellow-light:active {
|
|
background-color: #fde047;
|
|
transform: translateY(0);
|
|
}
|
|
.btn-yellow-light:focus {
|
|
outline: none;
|
|
}
|
|
.btn-yellow-light:focus-visible {
|
|
box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.35), 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);
|
|
}
|
|
.btn-yellow-light:disabled, .btn-yellow-light.is-disabled {
|
|
opacity: 0.6;
|
|
cursor: not-allowed;
|
|
pointer-events: none;
|
|
box-shadow: none;
|
|
transform: none;
|
|
}
|
|
|
|
/* Alerts */
|
|
.alert-yellow {
|
|
padding: 1rem;
|
|
border-radius: 0.5rem;
|
|
background-color: #fef9c3;
|
|
color: #713f12;
|
|
border: 1px solid #fef08a;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.text-green {
|
|
color: #16a34a !important;
|
|
}
|
|
|
|
.bg-green {
|
|
background-color: #16a34a !important;
|
|
}
|
|
|
|
.bg-green-light {
|
|
background-color: #dcfce7 !important;
|
|
}
|
|
|
|
.text-green-50 {
|
|
color: #f0fdf4 !important;
|
|
}
|
|
|
|
.bg-green-50 {
|
|
background-color: #f0fdf4 !important;
|
|
}
|
|
|
|
.text-green-100 {
|
|
color: #dcfce7 !important;
|
|
}
|
|
|
|
.bg-green-100 {
|
|
background-color: #dcfce7 !important;
|
|
}
|
|
|
|
.text-green-200 {
|
|
color: #bbf7d0 !important;
|
|
}
|
|
|
|
.bg-green-200 {
|
|
background-color: #bbf7d0 !important;
|
|
}
|
|
|
|
.text-green-300 {
|
|
color: #86efac !important;
|
|
}
|
|
|
|
.bg-green-300 {
|
|
background-color: #86efac !important;
|
|
}
|
|
|
|
.text-green-400 {
|
|
color: #4ade80 !important;
|
|
}
|
|
|
|
.bg-green-400 {
|
|
background-color: #4ade80 !important;
|
|
}
|
|
|
|
.text-green-500 {
|
|
color: #22c55e !important;
|
|
}
|
|
|
|
.bg-green-500 {
|
|
background-color: #22c55e !important;
|
|
}
|
|
|
|
.text-green-600 {
|
|
color: #16a34a !important;
|
|
}
|
|
|
|
.bg-green-600 {
|
|
background-color: #16a34a !important;
|
|
}
|
|
|
|
.text-green-700 {
|
|
color: #15803d !important;
|
|
}
|
|
|
|
.bg-green-700 {
|
|
background-color: #15803d !important;
|
|
}
|
|
|
|
.text-green-800 {
|
|
color: #166534 !important;
|
|
}
|
|
|
|
.bg-green-800 {
|
|
background-color: #166534 !important;
|
|
}
|
|
|
|
.text-green-900 {
|
|
color: #14532d !important;
|
|
}
|
|
|
|
.bg-green-900 {
|
|
background-color: #14532d !important;
|
|
}
|
|
|
|
.text-green-950 {
|
|
color: #052e16 !important;
|
|
}
|
|
|
|
.bg-green-950 {
|
|
background-color: #052e16 !important;
|
|
}
|
|
|
|
/* Solid button */
|
|
.btn-green {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 0.5rem;
|
|
padding: 0.5rem 1rem;
|
|
font-weight: 500;
|
|
border-radius: 0.5rem;
|
|
border: 1px solid transparent;
|
|
cursor: pointer;
|
|
background-color: #16a34a;
|
|
color: #ffffff;
|
|
transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1), transform 250ms cubic-bezier(0.4, 0, 0.2, 1), filter 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
.btn-green:hover {
|
|
filter: brightness(95%);
|
|
box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
|
|
transform: translateY(-2px);
|
|
}
|
|
.btn-green:active {
|
|
filter: brightness(90%);
|
|
transform: translateY(0);
|
|
}
|
|
.btn-green:focus {
|
|
outline: none;
|
|
}
|
|
.btn-green:focus-visible {
|
|
box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.35), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
|
|
}
|
|
.btn-green:disabled, .btn-green.is-disabled {
|
|
opacity: 0.6;
|
|
cursor: not-allowed;
|
|
pointer-events: none;
|
|
box-shadow: none;
|
|
transform: none;
|
|
filter: none;
|
|
}
|
|
|
|
/* Light button */
|
|
.btn-green-light {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 0.5rem;
|
|
padding: 0.5rem 1rem;
|
|
font-weight: 500;
|
|
border-radius: 0.5rem;
|
|
border: 1px solid #bbf7d0;
|
|
cursor: pointer;
|
|
background-color: #dcfce7;
|
|
color: #166534;
|
|
transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1), transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
.btn-green-light:hover {
|
|
background-color: #bbf7d0;
|
|
box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);
|
|
transform: translateY(-1px);
|
|
}
|
|
.btn-green-light:active {
|
|
background-color: #86efac;
|
|
transform: translateY(0);
|
|
}
|
|
.btn-green-light:focus {
|
|
outline: none;
|
|
}
|
|
.btn-green-light:focus-visible {
|
|
box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.35), 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);
|
|
}
|
|
.btn-green-light:disabled, .btn-green-light.is-disabled {
|
|
opacity: 0.6;
|
|
cursor: not-allowed;
|
|
pointer-events: none;
|
|
box-shadow: none;
|
|
transform: none;
|
|
}
|
|
|
|
/* Alerts */
|
|
.alert-green {
|
|
padding: 1rem;
|
|
border-radius: 0.5rem;
|
|
background-color: #dcfce7;
|
|
color: #14532d;
|
|
border: 1px solid #bbf7d0;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.text-emerald {
|
|
color: #059669 !important;
|
|
}
|
|
|
|
.bg-emerald {
|
|
background-color: #059669 !important;
|
|
}
|
|
|
|
.bg-emerald-light {
|
|
background-color: #d1fae5 !important;
|
|
}
|
|
|
|
.text-emerald-50 {
|
|
color: #ecfdf5 !important;
|
|
}
|
|
|
|
.bg-emerald-50 {
|
|
background-color: #ecfdf5 !important;
|
|
}
|
|
|
|
.text-emerald-100 {
|
|
color: #d1fae5 !important;
|
|
}
|
|
|
|
.bg-emerald-100 {
|
|
background-color: #d1fae5 !important;
|
|
}
|
|
|
|
.text-emerald-200 {
|
|
color: #a7f3d0 !important;
|
|
}
|
|
|
|
.bg-emerald-200 {
|
|
background-color: #a7f3d0 !important;
|
|
}
|
|
|
|
.text-emerald-300 {
|
|
color: #6ee7b7 !important;
|
|
}
|
|
|
|
.bg-emerald-300 {
|
|
background-color: #6ee7b7 !important;
|
|
}
|
|
|
|
.text-emerald-400 {
|
|
color: #34d399 !important;
|
|
}
|
|
|
|
.bg-emerald-400 {
|
|
background-color: #34d399 !important;
|
|
}
|
|
|
|
.text-emerald-500 {
|
|
color: #10b981 !important;
|
|
}
|
|
|
|
.bg-emerald-500 {
|
|
background-color: #10b981 !important;
|
|
}
|
|
|
|
.text-emerald-600 {
|
|
color: #059669 !important;
|
|
}
|
|
|
|
.bg-emerald-600 {
|
|
background-color: #059669 !important;
|
|
}
|
|
|
|
.text-emerald-700 {
|
|
color: #047857 !important;
|
|
}
|
|
|
|
.bg-emerald-700 {
|
|
background-color: #047857 !important;
|
|
}
|
|
|
|
.text-emerald-800 {
|
|
color: #065f46 !important;
|
|
}
|
|
|
|
.bg-emerald-800 {
|
|
background-color: #065f46 !important;
|
|
}
|
|
|
|
.text-emerald-900 {
|
|
color: #064e3b !important;
|
|
}
|
|
|
|
.bg-emerald-900 {
|
|
background-color: #064e3b !important;
|
|
}
|
|
|
|
.text-emerald-950 {
|
|
color: #022c22 !important;
|
|
}
|
|
|
|
.bg-emerald-950 {
|
|
background-color: #022c22 !important;
|
|
}
|
|
|
|
/* Solid button */
|
|
.btn-emerald {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 0.5rem;
|
|
padding: 0.5rem 1rem;
|
|
font-weight: 500;
|
|
border-radius: 0.5rem;
|
|
border: 1px solid transparent;
|
|
cursor: pointer;
|
|
background-color: #059669;
|
|
color: #ffffff;
|
|
transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1), transform 250ms cubic-bezier(0.4, 0, 0.2, 1), filter 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
.btn-emerald:hover {
|
|
filter: brightness(95%);
|
|
box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
|
|
transform: translateY(-2px);
|
|
}
|
|
.btn-emerald:active {
|
|
filter: brightness(90%);
|
|
transform: translateY(0);
|
|
}
|
|
.btn-emerald:focus {
|
|
outline: none;
|
|
}
|
|
.btn-emerald:focus-visible {
|
|
box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.35), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
|
|
}
|
|
.btn-emerald:disabled, .btn-emerald.is-disabled {
|
|
opacity: 0.6;
|
|
cursor: not-allowed;
|
|
pointer-events: none;
|
|
box-shadow: none;
|
|
transform: none;
|
|
filter: none;
|
|
}
|
|
|
|
/* Light button */
|
|
.btn-emerald-light {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 0.5rem;
|
|
padding: 0.5rem 1rem;
|
|
font-weight: 500;
|
|
border-radius: 0.5rem;
|
|
border: 1px solid #a7f3d0;
|
|
cursor: pointer;
|
|
background-color: #d1fae5;
|
|
color: #065f46;
|
|
transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1), transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
.btn-emerald-light:hover {
|
|
background-color: #a7f3d0;
|
|
box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);
|
|
transform: translateY(-1px);
|
|
}
|
|
.btn-emerald-light:active {
|
|
background-color: #6ee7b7;
|
|
transform: translateY(0);
|
|
}
|
|
.btn-emerald-light:focus {
|
|
outline: none;
|
|
}
|
|
.btn-emerald-light:focus-visible {
|
|
box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.35), 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);
|
|
}
|
|
.btn-emerald-light:disabled, .btn-emerald-light.is-disabled {
|
|
opacity: 0.6;
|
|
cursor: not-allowed;
|
|
pointer-events: none;
|
|
box-shadow: none;
|
|
transform: none;
|
|
}
|
|
|
|
/* Alerts */
|
|
.alert-emerald {
|
|
padding: 1rem;
|
|
border-radius: 0.5rem;
|
|
background-color: #d1fae5;
|
|
color: #064e3b;
|
|
border: 1px solid #a7f3d0;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.text-teal {
|
|
color: #0d9488 !important;
|
|
}
|
|
|
|
.bg-teal {
|
|
background-color: #0d9488 !important;
|
|
}
|
|
|
|
.bg-teal-light {
|
|
background-color: #ccfbf1 !important;
|
|
}
|
|
|
|
.text-teal-50 {
|
|
color: #f0fdfa !important;
|
|
}
|
|
|
|
.bg-teal-50 {
|
|
background-color: #f0fdfa !important;
|
|
}
|
|
|
|
.text-teal-100 {
|
|
color: #ccfbf1 !important;
|
|
}
|
|
|
|
.bg-teal-100 {
|
|
background-color: #ccfbf1 !important;
|
|
}
|
|
|
|
.text-teal-200 {
|
|
color: #99f6e4 !important;
|
|
}
|
|
|
|
.bg-teal-200 {
|
|
background-color: #99f6e4 !important;
|
|
}
|
|
|
|
.text-teal-300 {
|
|
color: #5eead4 !important;
|
|
}
|
|
|
|
.bg-teal-300 {
|
|
background-color: #5eead4 !important;
|
|
}
|
|
|
|
.text-teal-400 {
|
|
color: #2dd4bf !important;
|
|
}
|
|
|
|
.bg-teal-400 {
|
|
background-color: #2dd4bf !important;
|
|
}
|
|
|
|
.text-teal-500 {
|
|
color: #14b8a6 !important;
|
|
}
|
|
|
|
.bg-teal-500 {
|
|
background-color: #14b8a6 !important;
|
|
}
|
|
|
|
.text-teal-600 {
|
|
color: #0d9488 !important;
|
|
}
|
|
|
|
.bg-teal-600 {
|
|
background-color: #0d9488 !important;
|
|
}
|
|
|
|
.text-teal-700 {
|
|
color: #0f766e !important;
|
|
}
|
|
|
|
.bg-teal-700 {
|
|
background-color: #0f766e !important;
|
|
}
|
|
|
|
.text-teal-800 {
|
|
color: #115e59 !important;
|
|
}
|
|
|
|
.bg-teal-800 {
|
|
background-color: #115e59 !important;
|
|
}
|
|
|
|
.text-teal-900 {
|
|
color: #134e4a !important;
|
|
}
|
|
|
|
.bg-teal-900 {
|
|
background-color: #134e4a !important;
|
|
}
|
|
|
|
.text-teal-950 {
|
|
color: #042f2e !important;
|
|
}
|
|
|
|
.bg-teal-950 {
|
|
background-color: #042f2e !important;
|
|
}
|
|
|
|
/* Solid button */
|
|
.btn-teal {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 0.5rem;
|
|
padding: 0.5rem 1rem;
|
|
font-weight: 500;
|
|
border-radius: 0.5rem;
|
|
border: 1px solid transparent;
|
|
cursor: pointer;
|
|
background-color: #0d9488;
|
|
color: #ffffff;
|
|
transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1), transform 250ms cubic-bezier(0.4, 0, 0.2, 1), filter 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
.btn-teal:hover {
|
|
filter: brightness(95%);
|
|
box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
|
|
transform: translateY(-2px);
|
|
}
|
|
.btn-teal:active {
|
|
filter: brightness(90%);
|
|
transform: translateY(0);
|
|
}
|
|
.btn-teal:focus {
|
|
outline: none;
|
|
}
|
|
.btn-teal:focus-visible {
|
|
box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.35), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
|
|
}
|
|
.btn-teal:disabled, .btn-teal.is-disabled {
|
|
opacity: 0.6;
|
|
cursor: not-allowed;
|
|
pointer-events: none;
|
|
box-shadow: none;
|
|
transform: none;
|
|
filter: none;
|
|
}
|
|
|
|
/* Light button */
|
|
.btn-teal-light {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 0.5rem;
|
|
padding: 0.5rem 1rem;
|
|
font-weight: 500;
|
|
border-radius: 0.5rem;
|
|
border: 1px solid #99f6e4;
|
|
cursor: pointer;
|
|
background-color: #ccfbf1;
|
|
color: #115e59;
|
|
transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1), transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
.btn-teal-light:hover {
|
|
background-color: #99f6e4;
|
|
box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);
|
|
transform: translateY(-1px);
|
|
}
|
|
.btn-teal-light:active {
|
|
background-color: #5eead4;
|
|
transform: translateY(0);
|
|
}
|
|
.btn-teal-light:focus {
|
|
outline: none;
|
|
}
|
|
.btn-teal-light:focus-visible {
|
|
box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.35), 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);
|
|
}
|
|
.btn-teal-light:disabled, .btn-teal-light.is-disabled {
|
|
opacity: 0.6;
|
|
cursor: not-allowed;
|
|
pointer-events: none;
|
|
box-shadow: none;
|
|
transform: none;
|
|
}
|
|
|
|
/* Alerts */
|
|
.alert-teal {
|
|
padding: 1rem;
|
|
border-radius: 0.5rem;
|
|
background-color: #ccfbf1;
|
|
color: #134e4a;
|
|
border: 1px solid #99f6e4;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.text-cyan {
|
|
color: #0891b2 !important;
|
|
}
|
|
|
|
.bg-cyan {
|
|
background-color: #0891b2 !important;
|
|
}
|
|
|
|
.bg-cyan-light {
|
|
background-color: #cffafe !important;
|
|
}
|
|
|
|
.text-cyan-50 {
|
|
color: #ecfeff !important;
|
|
}
|
|
|
|
.bg-cyan-50 {
|
|
background-color: #ecfeff !important;
|
|
}
|
|
|
|
.text-cyan-100 {
|
|
color: #cffafe !important;
|
|
}
|
|
|
|
.bg-cyan-100 {
|
|
background-color: #cffafe !important;
|
|
}
|
|
|
|
.text-cyan-200 {
|
|
color: #a5f3fc !important;
|
|
}
|
|
|
|
.bg-cyan-200 {
|
|
background-color: #a5f3fc !important;
|
|
}
|
|
|
|
.text-cyan-300 {
|
|
color: #67e8f9 !important;
|
|
}
|
|
|
|
.bg-cyan-300 {
|
|
background-color: #67e8f9 !important;
|
|
}
|
|
|
|
.text-cyan-400 {
|
|
color: #22d3ee !important;
|
|
}
|
|
|
|
.bg-cyan-400 {
|
|
background-color: #22d3ee !important;
|
|
}
|
|
|
|
.text-cyan-500 {
|
|
color: #06b6d4 !important;
|
|
}
|
|
|
|
.bg-cyan-500 {
|
|
background-color: #06b6d4 !important;
|
|
}
|
|
|
|
.text-cyan-600 {
|
|
color: #0891b2 !important;
|
|
}
|
|
|
|
.bg-cyan-600 {
|
|
background-color: #0891b2 !important;
|
|
}
|
|
|
|
.text-cyan-700 {
|
|
color: #0e7490 !important;
|
|
}
|
|
|
|
.bg-cyan-700 {
|
|
background-color: #0e7490 !important;
|
|
}
|
|
|
|
.text-cyan-800 {
|
|
color: #155e75 !important;
|
|
}
|
|
|
|
.bg-cyan-800 {
|
|
background-color: #155e75 !important;
|
|
}
|
|
|
|
.text-cyan-900 {
|
|
color: #164e63 !important;
|
|
}
|
|
|
|
.bg-cyan-900 {
|
|
background-color: #164e63 !important;
|
|
}
|
|
|
|
.text-cyan-950 {
|
|
color: #083344 !important;
|
|
}
|
|
|
|
.bg-cyan-950 {
|
|
background-color: #083344 !important;
|
|
}
|
|
|
|
/* Solid button */
|
|
.btn-cyan {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 0.5rem;
|
|
padding: 0.5rem 1rem;
|
|
font-weight: 500;
|
|
border-radius: 0.5rem;
|
|
border: 1px solid transparent;
|
|
cursor: pointer;
|
|
background-color: #0891b2;
|
|
color: #ffffff;
|
|
transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1), transform 250ms cubic-bezier(0.4, 0, 0.2, 1), filter 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
.btn-cyan:hover {
|
|
filter: brightness(95%);
|
|
box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
|
|
transform: translateY(-2px);
|
|
}
|
|
.btn-cyan:active {
|
|
filter: brightness(90%);
|
|
transform: translateY(0);
|
|
}
|
|
.btn-cyan:focus {
|
|
outline: none;
|
|
}
|
|
.btn-cyan:focus-visible {
|
|
box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.35), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
|
|
}
|
|
.btn-cyan:disabled, .btn-cyan.is-disabled {
|
|
opacity: 0.6;
|
|
cursor: not-allowed;
|
|
pointer-events: none;
|
|
box-shadow: none;
|
|
transform: none;
|
|
filter: none;
|
|
}
|
|
|
|
/* Light button */
|
|
.btn-cyan-light {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 0.5rem;
|
|
padding: 0.5rem 1rem;
|
|
font-weight: 500;
|
|
border-radius: 0.5rem;
|
|
border: 1px solid #a5f3fc;
|
|
cursor: pointer;
|
|
background-color: #cffafe;
|
|
color: #155e75;
|
|
transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1), transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
.btn-cyan-light:hover {
|
|
background-color: #a5f3fc;
|
|
box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);
|
|
transform: translateY(-1px);
|
|
}
|
|
.btn-cyan-light:active {
|
|
background-color: #67e8f9;
|
|
transform: translateY(0);
|
|
}
|
|
.btn-cyan-light:focus {
|
|
outline: none;
|
|
}
|
|
.btn-cyan-light:focus-visible {
|
|
box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.35), 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);
|
|
}
|
|
.btn-cyan-light:disabled, .btn-cyan-light.is-disabled {
|
|
opacity: 0.6;
|
|
cursor: not-allowed;
|
|
pointer-events: none;
|
|
box-shadow: none;
|
|
transform: none;
|
|
}
|
|
|
|
/* Alerts */
|
|
.alert-cyan {
|
|
padding: 1rem;
|
|
border-radius: 0.5rem;
|
|
background-color: #cffafe;
|
|
color: #164e63;
|
|
border: 1px solid #a5f3fc;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
/* Button size modifiers */
|
|
.btn-sm {
|
|
padding: 0.3571428571rem 0.7142857143rem !important;
|
|
font-size: 0.875rem !important;
|
|
border-radius: 0.25rem !important;
|
|
}
|
|
|
|
.btn-lg {
|
|
padding: 1rem 1.5rem !important;
|
|
font-size: 1rem !important;
|
|
border-radius: 1rem !important;
|
|
}
|
|
|
|
/* --------------------------------------------
|
|
Cards / Surfaces
|
|
-------------------------------------------- */
|
|
.card {
|
|
background-color: var(--bg-card);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 0.5rem;
|
|
padding: 1.5rem;
|
|
box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);
|
|
}
|
|
|
|
.card.hoverable {
|
|
transition: box-shadow 400ms cubic-bezier(0.4, 0, 0.2, 1), transform 400ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
.card.hoverable:hover {
|
|
box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.card-soft {
|
|
background-color: var(--bg-surface);
|
|
border: 1px solid var(--border-color);
|
|
}
|
|
|
|
/* --------------------------------------------
|
|
Forms (inputs/selects/textarea/checkbox/radio)
|
|
-------------------------------------------- */
|
|
.form-group {
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.label {
|
|
display: block;
|
|
margin-bottom: 0.25rem;
|
|
font-size: 0.875rem;
|
|
font-weight: 500;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.input {
|
|
width: 100%;
|
|
height: 2.5rem;
|
|
padding: 0.5rem 1rem;
|
|
background-color: var(--bg-surface);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 0.25rem;
|
|
color: var(--text-main);
|
|
transition: border-color 150ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1), background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
.input:focus {
|
|
outline: none;
|
|
border-color: var(--primary);
|
|
}
|
|
.input:focus-visible {
|
|
box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.35);
|
|
}
|
|
.input::-moz-placeholder {
|
|
color: var(--text-light);
|
|
}
|
|
.input::placeholder {
|
|
color: var(--text-light);
|
|
}
|
|
.input:disabled {
|
|
opacity: 0.7;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.input-sm {
|
|
width: 100%;
|
|
height: 2rem;
|
|
padding: 0.5rem 1rem;
|
|
background-color: var(--bg-surface);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 0.25rem;
|
|
color: var(--text-main);
|
|
transition: border-color 150ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1), background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
.input-sm:focus {
|
|
outline: none;
|
|
border-color: var(--primary);
|
|
}
|
|
.input-sm:focus-visible {
|
|
box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.35);
|
|
}
|
|
.input-sm::-moz-placeholder {
|
|
color: var(--text-light);
|
|
}
|
|
.input-sm::placeholder {
|
|
color: var(--text-light);
|
|
}
|
|
.input-sm:disabled {
|
|
opacity: 0.7;
|
|
cursor: not-allowed;
|
|
}
|
|
.input-sm {
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.input-lg {
|
|
width: 100%;
|
|
height: 3.25rem;
|
|
padding: 0.5rem 1rem;
|
|
background-color: var(--bg-surface);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 0.25rem;
|
|
color: var(--text-main);
|
|
transition: border-color 150ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1), background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
.input-lg:focus {
|
|
outline: none;
|
|
border-color: var(--primary);
|
|
}
|
|
.input-lg:focus-visible {
|
|
box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.35);
|
|
}
|
|
.input-lg::-moz-placeholder {
|
|
color: var(--text-light);
|
|
}
|
|
.input-lg::placeholder {
|
|
color: var(--text-light);
|
|
}
|
|
.input-lg:disabled {
|
|
opacity: 0.7;
|
|
cursor: not-allowed;
|
|
}
|
|
.input-lg {
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.textarea {
|
|
width: 100%;
|
|
height: 3.25rem;
|
|
padding: 0.5rem 1rem;
|
|
background-color: var(--bg-surface);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 0.25rem;
|
|
color: var(--text-main);
|
|
transition: border-color 150ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1), background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
.textarea:focus {
|
|
outline: none;
|
|
border-color: var(--primary);
|
|
}
|
|
.textarea:focus-visible {
|
|
box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.35);
|
|
}
|
|
.textarea::-moz-placeholder {
|
|
color: var(--text-light);
|
|
}
|
|
.textarea::placeholder {
|
|
color: var(--text-light);
|
|
}
|
|
.textarea:disabled {
|
|
opacity: 0.7;
|
|
cursor: not-allowed;
|
|
}
|
|
.textarea {
|
|
height: auto;
|
|
min-height: 120px;
|
|
resize: vertical;
|
|
}
|
|
|
|
.select {
|
|
width: 100%;
|
|
height: 2.5rem;
|
|
padding: 0.5rem 1rem;
|
|
background-color: var(--bg-surface);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 0.25rem;
|
|
color: var(--text-main);
|
|
transition: border-color 150ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1), background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
.select:focus {
|
|
outline: none;
|
|
border-color: var(--primary);
|
|
}
|
|
.select:focus-visible {
|
|
box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.35);
|
|
}
|
|
.select::-moz-placeholder {
|
|
color: var(--text-light);
|
|
}
|
|
.select::placeholder {
|
|
color: var(--text-light);
|
|
}
|
|
.select:disabled {
|
|
opacity: 0.7;
|
|
cursor: not-allowed;
|
|
}
|
|
.select {
|
|
-webkit-appearance: none;
|
|
-moz-appearance: none;
|
|
appearance: none;
|
|
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
|
|
background-repeat: no-repeat;
|
|
background-position: right 1rem center;
|
|
background-size: 16px 12px;
|
|
}
|
|
|
|
[data-theme=dark] .select {
|
|
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23cbd5e1' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
|
|
}
|
|
|
|
.input-group {
|
|
display: flex;
|
|
align-items: stretch;
|
|
}
|
|
.input-group .input, .input-group .select {
|
|
border-top-right-radius: 0;
|
|
border-bottom-right-radius: 0;
|
|
}
|
|
.input-group [class^=btn-], .input-group .btn {
|
|
border-top-left-radius: 0;
|
|
border-bottom-left-radius: 0;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* Checkbox / radio */
|
|
.check {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
cursor: pointer;
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
user-select: none;
|
|
color: var(--text-main);
|
|
}
|
|
.check input {
|
|
width: 18px;
|
|
height: 18px;
|
|
margin: 0;
|
|
accent-color: var(--primary);
|
|
}
|
|
.check input:focus-visible {
|
|
outline: none;
|
|
box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.35);
|
|
border-radius: 0.25rem;
|
|
}
|
|
.check .check-label {
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
/* --------------------------------------------
|
|
Tables (token-driven)
|
|
-------------------------------------------- */
|
|
.table-wrap {
|
|
overflow: auto;
|
|
-webkit-overflow-scrolling: touch;
|
|
border-radius: inherit;
|
|
}
|
|
|
|
.table {
|
|
width: 100%;
|
|
border-collapse: separate;
|
|
border-spacing: 0;
|
|
margin: 0;
|
|
}
|
|
.table th, .table td {
|
|
padding: 1rem 1rem;
|
|
text-align: left;
|
|
vertical-align: middle;
|
|
border-bottom: 1px solid var(--border-color);
|
|
}
|
|
.table thead th {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 1;
|
|
background: var(--table-header-bg);
|
|
color: var(--text-muted);
|
|
font-weight: 500;
|
|
text-transform: none;
|
|
letter-spacing: 0.02em;
|
|
font-size: 0.875rem;
|
|
border-bottom: 1px solid var(--border-color);
|
|
}
|
|
.table thead th:first-child {
|
|
border-top-left-radius: 0.5rem;
|
|
}
|
|
.table thead th:last-child {
|
|
border-top-right-radius: 0.5rem;
|
|
}
|
|
.table tbody tr {
|
|
background: transparent;
|
|
transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
.table.striped tbody tr:nth-of-type(odd) {
|
|
background: var(--table-striped-bg);
|
|
}
|
|
.table.hover tbody tr:hover {
|
|
background: var(--table-hover-bg);
|
|
}
|
|
.table.table-sm th, .table.table-sm td {
|
|
padding: 0.7142857143rem 0.7142857143rem;
|
|
}
|
|
.table.table-sm thead th {
|
|
font-size: 0.75rem;
|
|
}
|
|
|
|
/* --------------------------------------------
|
|
Scrollbar
|
|
-------------------------------------------- */
|
|
::-webkit-scrollbar {
|
|
width: 8px;
|
|
height: 8px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: #f8f9fa;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: #dee2e6;
|
|
border-radius: 50rem;
|
|
}
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: #ced4da;
|
|
}
|
|
|
|
/* --------------------------------------------
|
|
Badges
|
|
-------------------------------------------- */
|
|
.badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 0.25em 0.6em;
|
|
font-size: 0.75rem;
|
|
font-weight: 700;
|
|
border-radius: 50rem;
|
|
line-height: 1;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.badge-gray {
|
|
background-color: #f8f9fa;
|
|
color: #343a40;
|
|
border: 1px solid #e9ecef;
|
|
}
|
|
.badge-gray.badge-solid {
|
|
background-color: #6c757d;
|
|
color: #ffffff;
|
|
border-color: transparent;
|
|
}
|
|
|
|
.badge-blue {
|
|
background-color: #e7f1ff;
|
|
color: #052c65;
|
|
border: 1px solid #cfe2ff;
|
|
}
|
|
.badge-blue.badge-solid {
|
|
background-color: #0a58ca;
|
|
color: #ffffff;
|
|
border-color: transparent;
|
|
}
|
|
|
|
.badge-indigo {
|
|
background-color: #ede9fe;
|
|
color: #5b21b6;
|
|
border: 1px solid #ddd6fe;
|
|
}
|
|
.badge-indigo.badge-solid {
|
|
background-color: #7c3aed;
|
|
color: #ffffff;
|
|
border-color: transparent;
|
|
}
|
|
|
|
.badge-purple {
|
|
background-color: #f3e8ff;
|
|
color: #6b21a8;
|
|
border: 1px solid #e9d5ff;
|
|
}
|
|
.badge-purple.badge-solid {
|
|
background-color: #9333ea;
|
|
color: #ffffff;
|
|
border-color: transparent;
|
|
}
|
|
|
|
.badge-pink {
|
|
background-color: #fce7f3;
|
|
color: #9d174d;
|
|
border: 1px solid #fbcfe8;
|
|
}
|
|
.badge-pink.badge-solid {
|
|
background-color: #db2777;
|
|
color: #ffffff;
|
|
border-color: transparent;
|
|
}
|
|
|
|
.badge-red {
|
|
background-color: #fee2e2;
|
|
color: #991b1b;
|
|
border: 1px solid #fecaca;
|
|
}
|
|
.badge-red.badge-solid {
|
|
background-color: #dc2626;
|
|
color: #ffffff;
|
|
border-color: transparent;
|
|
}
|
|
|
|
.badge-orange {
|
|
background-color: #ffedd5;
|
|
color: #9a3412;
|
|
border: 1px solid #fed7aa;
|
|
}
|
|
.badge-orange.badge-solid {
|
|
background-color: #ea580c;
|
|
color: #ffffff;
|
|
border-color: transparent;
|
|
}
|
|
|
|
.badge-yellow {
|
|
background-color: #fef9c3;
|
|
color: #854d0e;
|
|
border: 1px solid #fef08a;
|
|
}
|
|
.badge-yellow.badge-solid {
|
|
background-color: #ca8a04;
|
|
color: #ffffff;
|
|
border-color: transparent;
|
|
}
|
|
|
|
.badge-green {
|
|
background-color: #dcfce7;
|
|
color: #166534;
|
|
border: 1px solid #bbf7d0;
|
|
}
|
|
.badge-green.badge-solid {
|
|
background-color: #16a34a;
|
|
color: #ffffff;
|
|
border-color: transparent;
|
|
}
|
|
|
|
.badge-emerald {
|
|
background-color: #d1fae5;
|
|
color: #065f46;
|
|
border: 1px solid #a7f3d0;
|
|
}
|
|
.badge-emerald.badge-solid {
|
|
background-color: #059669;
|
|
color: #ffffff;
|
|
border-color: transparent;
|
|
}
|
|
|
|
.badge-teal {
|
|
background-color: #ccfbf1;
|
|
color: #115e59;
|
|
border: 1px solid #99f6e4;
|
|
}
|
|
.badge-teal.badge-solid {
|
|
background-color: #0d9488;
|
|
color: #ffffff;
|
|
border-color: transparent;
|
|
}
|
|
|
|
.badge-cyan {
|
|
background-color: #cffafe;
|
|
color: #155e75;
|
|
border: 1px solid #a5f3fc;
|
|
}
|
|
.badge-cyan.badge-solid {
|
|
background-color: #0891b2;
|
|
color: #ffffff;
|
|
border-color: transparent;
|
|
}
|
|
|
|
/* --------------------------------------------
|
|
Chips (component)
|
|
-------------------------------------------- */
|
|
.chip-row {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.chip {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
padding: 0.35rem 0.65rem;
|
|
border-radius: 50rem;
|
|
border: 1px solid var(--border-color);
|
|
background: var(--bg-surface);
|
|
color: var(--text-muted);
|
|
cursor: pointer;
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
user-select: none;
|
|
transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1), background-color 150ms cubic-bezier(0.4, 0, 0.2, 1), color 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
.chip:hover {
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
|
|
color: var(--text-main);
|
|
}
|
|
.chip.is-active {
|
|
background: rgba(var(--primary-rgb), 0.12);
|
|
border-color: rgba(var(--primary-rgb), 0.18);
|
|
color: var(--text-main);
|
|
}
|
|
|
|
/* --------------------------------------------
|
|
Progress (component)
|
|
-------------------------------------------- */
|
|
.progress {
|
|
height: 10px;
|
|
border-radius: 50rem;
|
|
background: var(--bg-surface);
|
|
overflow: hidden;
|
|
border: 1px solid var(--border-color);
|
|
}
|
|
|
|
.progress-bar {
|
|
height: 100%;
|
|
background: var(--primary);
|
|
border-radius: 50rem;
|
|
transition: width 400ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
/* Optional width helpers (keep demo-friendly) */
|
|
.progress-0 {
|
|
width: 0%;
|
|
}
|
|
|
|
.progress-25 {
|
|
width: 25%;
|
|
}
|
|
|
|
.progress-46 {
|
|
width: 46%;
|
|
}
|
|
|
|
.progress-50 {
|
|
width: 50%;
|
|
}
|
|
|
|
.progress-72 {
|
|
width: 72%;
|
|
}
|
|
|
|
.progress-100 {
|
|
width: 100%;
|
|
}
|
|
|
|
/* Variant tones */
|
|
.progress-bar.soft {
|
|
background: rgba(var(--primary-rgb), 0.55);
|
|
}
|
|
|
|
.progress-bar.warn {
|
|
background: rgba(249, 115, 22, 0.55);
|
|
} /* stays as MDI-ish warning tone */
|
|
/* --------------------------------------------
|
|
Buttons: Close / Icon (component)
|
|
-------------------------------------------- */
|
|
.btn-close {
|
|
border: none;
|
|
background: transparent;
|
|
font-size: 1.5rem;
|
|
line-height: 1;
|
|
cursor: pointer;
|
|
color: var(--text-muted);
|
|
padding: 0.25rem 0.5rem;
|
|
border-radius: 0.25rem;
|
|
transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1), color 150ms cubic-bezier(0.4, 0, 0.2, 1), transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
.btn-close:hover {
|
|
background: rgba(0, 0, 0, 0.06);
|
|
color: var(--text-main);
|
|
transform: translateY(-1px);
|
|
}
|
|
.btn-close:active {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
[data-theme=dark] .btn-close:hover {
|
|
background: rgba(255, 255, 255, 0.08);
|
|
}
|
|
|
|
/* --------------------------------------------
|
|
App shell / Sidebar / Drawer / Modal
|
|
-------------------------------------------- */
|
|
.app-wrapper {
|
|
display: flex;
|
|
width: 100%;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.sidebar {
|
|
width: 280px;
|
|
height: 100vh;
|
|
position: sticky;
|
|
top: 0;
|
|
background-color: var(--bg-surface);
|
|
border-right: 1px solid var(--border-color);
|
|
display: flex;
|
|
flex-direction: column;
|
|
transition: width 250ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
.sidebar.collapsed {
|
|
width: 84px;
|
|
}
|
|
|
|
.drawer {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 320px;
|
|
max-width: 88vw;
|
|
height: 100vh;
|
|
z-index: 200;
|
|
background-color: var(--bg-card);
|
|
border-right: 1px solid var(--border-color);
|
|
transform: translateX(-105%);
|
|
transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12);
|
|
}
|
|
.drawer.is-open {
|
|
transform: translateX(0);
|
|
}
|
|
|
|
.main-content {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-width: 0;
|
|
}
|
|
|
|
/* Modal */
|
|
.modal-overlay {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: rgba(0, 0, 0, 0.55);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 500;
|
|
padding: 1.5rem;
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
pointer-events: none;
|
|
transition: opacity 250ms cubic-bezier(0.4, 0, 0.2, 1), visibility 250ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
.modal-overlay.is-active {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
pointer-events: auto;
|
|
}
|
|
|
|
.modal-content {
|
|
background-color: var(--bg-card);
|
|
border-radius: 1rem;
|
|
width: 100%;
|
|
max-width: 640px;
|
|
box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12);
|
|
overflow: hidden;
|
|
border: 1px solid var(--border-color);
|
|
transform: translateY(10px) scale(0.985);
|
|
transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
.modal-overlay.is-active .modal-content {
|
|
transform: translateY(0) scale(1);
|
|
}
|
|
|
|
.modal-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 1rem;
|
|
padding: 1.5rem;
|
|
border-bottom: 1px solid var(--border-color);
|
|
}
|
|
|
|
.modal-title {
|
|
margin: 0;
|
|
font-size: 1.5rem;
|
|
font-weight: 700;
|
|
color: var(--text-main);
|
|
}
|
|
|
|
.modal-body {
|
|
padding: 1.5rem;
|
|
color: var(--text-muted);
|
|
}
|
|
.modal-body p {
|
|
margin: 0;
|
|
}
|
|
|
|
.modal-footer {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: 0.5rem;
|
|
padding: 1rem 1.5rem;
|
|
border-top: 1px solid var(--border-color);
|
|
background: var(--bg-surface);
|
|
}
|
|
|
|
.modal-actions {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.vor-modal-sm {
|
|
max-width: 480px;
|
|
}
|
|
|
|
.vor-modal-md {
|
|
max-width: 640px;
|
|
}
|
|
|
|
.vor-modal-lg {
|
|
max-width: 820px;
|
|
}
|
|
|
|
/* --------------------------------------------
|
|
Accordion
|
|
-------------------------------------------- */
|
|
.accordion-item {
|
|
border-bottom: 1px solid var(--border-color);
|
|
}
|
|
.accordion-item.is-active .accordion-body {
|
|
display: block;
|
|
}
|
|
.accordion-item.is-active .accordion-icon {
|
|
transform: rotate(180deg);
|
|
}
|
|
.accordion-item .accordion-header {
|
|
padding: 1rem;
|
|
cursor: pointer;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
background: none;
|
|
border: none;
|
|
width: 100%;
|
|
color: var(--text-main);
|
|
}
|
|
.accordion-item .accordion-header:hover {
|
|
background-color: var(--bg-surface);
|
|
}
|
|
.accordion-item .accordion-icon {
|
|
transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
.accordion-item .accordion-body {
|
|
padding: 0 1rem 1rem;
|
|
display: none;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
/* --------------------------------------------
|
|
Switch
|
|
-------------------------------------------- */
|
|
.switch {
|
|
--switch-width: 40px;
|
|
--switch-height: 22px;
|
|
position: relative;
|
|
display: inline-block;
|
|
width: var(--switch-width);
|
|
height: var(--switch-height);
|
|
}
|
|
.switch input {
|
|
opacity: 0;
|
|
width: 0;
|
|
height: 0;
|
|
}
|
|
.switch input:checked + .slider {
|
|
background-color: var(--primary);
|
|
}
|
|
.switch input:checked + .slider::before {
|
|
transform: translateX(18px);
|
|
}
|
|
.switch input:focus-visible + .slider {
|
|
box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.35);
|
|
}
|
|
.switch .slider {
|
|
position: absolute;
|
|
cursor: pointer;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background-color: #dee2e6;
|
|
transition: 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
border-radius: 50rem;
|
|
}
|
|
.switch .slider::before {
|
|
position: absolute;
|
|
content: "";
|
|
height: 16px;
|
|
width: 16px;
|
|
left: 3px;
|
|
bottom: 3px;
|
|
background-color: #ffffff;
|
|
transition: 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
border-radius: 50%;
|
|
}
|
|
|
|
/* --------------------------------------------
|
|
Dividers / helpers
|
|
-------------------------------------------- */
|
|
.hr {
|
|
border: none;
|
|
border-top: 1px solid var(--border-color);
|
|
margin: 1.5rem 0;
|
|
}
|
|
|
|
/* --------------------------------------------
|
|
Drawer Modal (off-canvas modal)
|
|
-------------------------------------------- */
|
|
.drawer-modal {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 500;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
background-color: rgba(0, 0, 0, 0.55);
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
pointer-events: none;
|
|
transition: opacity 250ms cubic-bezier(0.4, 0, 0.2, 1), visibility 250ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
.drawer-modal.is-active {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
pointer-events: auto;
|
|
}
|
|
|
|
/* --------------------------------------------
|
|
Drawer Modal (off-canvas modal)
|
|
-------------------------------------------- */
|
|
.drawer-modal {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 500;
|
|
display: flex;
|
|
justify-content: flex-end; /* right default */
|
|
background-color: rgba(0, 0, 0, 0.55);
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
pointer-events: none;
|
|
transition: opacity 250ms cubic-bezier(0.4, 0, 0.2, 1), visibility 250ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
.drawer-modal.is-active {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
pointer-events: auto;
|
|
}
|
|
.drawer-modal.is-left {
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
.drawer-panel {
|
|
width: 520px;
|
|
max-width: 94vw;
|
|
height: 100vh;
|
|
background-color: var(--bg-card);
|
|
box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12);
|
|
display: flex;
|
|
flex-direction: column;
|
|
transition: transform 400ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
/* default: start off-screen right */
|
|
transform: translateX(105%);
|
|
border-left: 1px solid var(--border-color);
|
|
}
|
|
.drawer-modal.is-active .drawer-panel {
|
|
transform: translateX(0);
|
|
}
|
|
.drawer-panel {
|
|
/* left variant */
|
|
}
|
|
.drawer-modal.is-left .drawer-panel {
|
|
transform: translateX(-105%);
|
|
border-left: none;
|
|
border-right: 1px solid var(--border-color);
|
|
}
|
|
.drawer-modal.is-left.is-active .drawer-panel {
|
|
transform: translateX(0);
|
|
}
|
|
|
|
.drawer-panel-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 1.5rem;
|
|
border-bottom: 1px solid var(--border-color);
|
|
}
|
|
|
|
.drawer-panel-body {
|
|
padding: 1.5rem;
|
|
overflow: auto;
|
|
-webkit-overflow-scrolling: touch;
|
|
flex: 1;
|
|
}
|
|
|
|
.drawer-panel-footer {
|
|
padding: 1rem 1.5rem;
|
|
border-top: 1px solid var(--border-color);
|
|
}
|
|
|
|
/* Dark mode tweaks (optional, usually already handled by tokens) */
|
|
[data-theme=dark] .drawer-modal {
|
|
background-color: rgba(0, 0, 0, 0.65);
|
|
}/*# sourceMappingURL=main.css.map */ |