html {
    margin: 0 !important;
}

/* -- CSS Variable -- */

:root {
    --base-font-size: 1.000rem;     /* 16px */
    --base-line-height: calc(var(--base-font-size) + 0.5rem);   /* 24px */
    --bs-body-font-family: 'Inter', sans-serif;

    --bs-primary: #000000;
    --bs-primary-rgb: 0, 0, 0;
    --bs-primary-hover: rgb(201,141,0);
    --btn-primary-color: #FFFFFF;

    --bs-secondary: #E84158;
    --bs-secondary-rgb: 232, 65, 88;
    --bs-secondary-hover: #911929;
    --btn-secondary-color: #FFFFFF;

    --gray-100: rgb(239, 239, 239);
    --gray-200: rgb(200,200,200);
    --gray-300: rgb(175,175,175);
    --gray-400: rgb(150,150,150);
    --gray-500: rgb(125,125,125);
    --gray-600: rgb(100,100,100);
    --gray-700: rgb(75,75,75);
    --gray-800: rgb(50,50,50);
    --gray-900: rgb(25,25,25);

}

/* -- Font family -- */

body                                                                    { font-family: var(--bs-body-font-family); }
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6  { font-family: var(--bs-body-font-family); }
.h1, .h2, .h3, .h4, .h5, .h6                                            { font-family: var(--bs-body-font-family); }

/* -- Font size -- */

.extra-small    { font-size: calc(var(--base-font-size) * 0.750) !important; line-height: 1.6 !important; } /* 12px */
.small          { font-size: calc(var(--base-font-size) * 0.875) !important; line-height: 1.6 !important; } /* 14px */

body            { font-size: calc(var(--base-font-size) * 1.000) !important; line-height: 1.6 !important; } /* 16px */

h6, .h6, .fs-6  { font-size: calc(var(--base-font-size) * 1.125) !important; line-height: 1.6 !important; } /* 18px */
h5, .h5, .fs-5  { font-size: calc(var(--base-font-size) * 1.250) !important; line-height: 1.6 !important; } /* 20px */
h4, .h4, .fs-4  { font-size: calc(var(--base-font-size) * 1.500) !important; line-height: 1.6 !important; } /* 24px */
h3, .h3, .fs-3  { font-size: calc(var(--base-font-size) * 1.750) !important; line-height: 1.2 !important; } /* 28px */
h2, .h2, .fs-2  { font-size: calc(var(--base-font-size) * 2.000) !important; line-height: 1.2 !important; } /* 32px */
h1, .h1, .fs-1  { font-size: calc(var(--base-font-size) * 2.250) !important; line-height: 1.2 !important; } /* 36px */

.display-6      { font-size: calc(var(--base-font-size) * 2.500) !important; line-height: 1.2 !important; } /* 40px */
.display-5      { font-size: calc(var(--base-font-size) * 2.750) !important; line-height: 1.2 !important; } /* 44px */
.display-4      { font-size: calc(var(--base-font-size) * 3.000) !important; line-height: 1.2 !important; } /* 48px */
.display-3      { font-size: calc(var(--base-font-size) * 3.250) !important; line-height: 1.2 !important; } /* 52px */
.display-2      { font-size: calc(var(--base-font-size) * 3.500) !important; line-height: 1.2 !important; } /* 56px */
.display-1      { font-size: calc(var(--base-font-size) * 3.750) !important; line-height: 1.2 !important; } /* 60px */

/* -- Colors -- */

.bg-gray-100    { background-color: var(--gray-100); }
.bg-gray-200    { background-color: var(--gray-200); }
.bg-gray-300    { background-color: var(--gray-300); }
.bg-gray-400    { background-color: var(--gray-400); }
.bg-gray-500    { background-color: var(--gray-500); }
.bg-gray-600    { background-color: var(--gray-600); }
.bg-gray-700    { background-color: var(--gray-700); }
.bg-gray-800    { background-color: var(--gray-800); }
.bg-gray-900    { background-color: var(--gray-900); }

.text-gray-100  { color: var(--gray-100); }
.text-gray-200  { color: var(--gray-200); }
.text-gray-300  { color: var(--gray-300); }
.text-gray-400  { color: var(--gray-400); }
.text-gray-500  { color: var(--gray-500); }
.text-gray-600  { color: var(--gray-600); }
.text-gray-700  { color: var(--gray-700); }
.text-gray-800  { color: var(--gray-800); }
.text-gray-900  { color: var(--gray-900); }


/*/ -- Btn -- /*/

.btn {
    --bs-btn-border-radius: 25px;
    --bs-btn-font-size: calc(var(--base-font-size) * 1.125);
    --bs-btn-line-height: 24px;
    --bs-btn-padding-x: 1rem;
    --bs-btn-padding-y: 0.5rem;
}

.btn-primary {
    --bs-btn-color: var(--btn-primary-color);
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-color: var(--btn-primary-color);
    --bs-btn-hover-bg: var(--bs-primary-hover);
    --bs-btn-hover-border-color: var(--bs-primary-hover);
    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
    --bs-btn-active-color: var(--btn-primary-color);
    --bs-btn-active-bg: var(--bs-primary-hover);
    --bs-btn-active-border-color: var(--bs-primary-hover);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--btn-primary-color);
    --bs-btn-disabled-bg: var(--bs-primary);
    --bs-btn-disabled-border-color: var(--bs-primary);
}

.btn-outline-primary {
    --bs-btn-color: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-color: var(--btn-primary-color);
    --bs-btn-hover-bg: var(--bs-primary-hover);
    --bs-btn-hover-border-color: var(--bs-primary-hover);
    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
    --bs-btn-active-color: var(--btn-primary-color);
    --bs-btn-active-bg: var(--bs-primary-hover);
    --bs-btn-active-border-color: var(--bs-primary-hover);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--bs-primary);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--bs-primary);
    --bs-gradient: none;
}

.btn-secondary {
    --bs-btn-color: var(--btn-secondary-color);
    --bs-btn-bg: var(--bs-secondary);
    --bs-btn-border-color: var(--bs-secondary);
    --bs-btn-hover-color: var(--btn-secondary-color);
    --bs-btn-hover-bg: var(--bs-secondary-hover);
    --bs-btn-hover-border-color: var(--bs-secondary-hover);
    --bs-btn-focus-shadow-rgb: var(--bs-secondary-rgb);
    --bs-btn-active-color: var(--btn-secondary-color);
    --bs-btn-active-bg: var(--bs-secondary-hover);
    --bs-btn-active-border-color: var(--bs-secondary-hover);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--btn-secondary-color);
    --bs-btn-disabled-bg: var(--bs-secondary);
    --bs-btn-disabled-border-color: var(--bs-secondary);
}

.btn-outline-secondary {
    --bs-btn-color: var(--bs-secondary);
    --bs-btn-border-color: var(--bs-secondary);
    --bs-btn-hover-color: var(--btn-secondary-color);
    --bs-btn-hover-bg: var(--bs-secondary-hover);
    --bs-btn-hover-border-color: var(--bs-secondary-hover);
    --bs-btn-focus-shadow-rgb: var(--bs-secondary-rgb);
    --bs-btn-active-color: var(--btn-secondary-color);
    --bs-btn-active-bg: var(--bs-secondary-hover);
    --bs-btn-active-border-color: var(--bs-secondary-hover);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--bs-secondary);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--bs-secondary);
    --bs-gradient: none;
}

/*/ -- Progress bar -- /*/

.progress-bar {
    color: #FFFFFF;
    background-color: var(--bs-primary);
}

/*/ -- Accordion -- /*/

.accordion {
    --bs-accordion-color: var(--bs-body-color);
    --bs-accordion-bg: transparent;
    --bs-accordion-active-color: var(--bs-body-color);
    --bs-accordion-active-bg: transparent;
    --bs-accordion-border-radius: 0;
    --bs-accordion-inner-border-radius: 0;
    --bs-accordion-btn-padding-x: 1.25rem;
    --bs-accordion-btn-padding-y: 0.75rem;
    --bs-accordion-btn-focus-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    --bs-accordion-body-padding-x: 1.25rem;
    --bs-accordion-body-padding-y: 1.25rem;
}

.accordion-button:not(.collapsed) { box-shadow: none; }
.accordion-body { padding-top: 0; }

/*/ -- Extra -- /*/

.table-layout-fixed {
    table-layout: fixed;
}

.colors-table tbody div {
    width: 250px;
    padding: 20px;
    margin: 10px 0;
    border-radius: 10px;
}

.tooltip {
    /* --bs-tooltip-zindex: ???;
    --bs-tooltip-max-width: ???;
    --bs-tooltip-padding-x: ???;
    --bs-tooltip-padding-y: ???;
    --bs-tooltip-margin: ???; */
    --bs-tooltip-font-size: calc(var(--base-font-size) * 0.750); 
    --bs-tooltip-line-height: calc(var(--base-line-height) * 0.750);
    --bs-tooltip-color: var(--bs-black);
    --bs-tooltip-bg: var(--gray-100);
    --bs-tooltip-opacity: 1;
    /* --bs-tooltip-border-radius: ???;
    --bs-tooltip-arrow-width: ???;
    --bs-tooltip-arrow-height: ???; */
}

/*//-- Badge tooltip --//*/

.badge-tooltip {
    color: var(--bs-primary);
    cursor: help;
}

/*/ -- Card -- /*/

.card {
    --bs-card-spacer-y: 1.5rem;
    --bs-card-spacer-x: 1.5rem;
    --bs-card-border-radius: 20px;
}