html {
    margin: 0 !important;
}

/* -- CSS Variable -- */

:root {
    --base-font-size: 1.125rem; /* 18px */
    --base-line-height: 1.6;
    --bs-body-font-family: 'Raleway', sans-serif;
    --bs-heading-font-family: 'Sora', sans-serif;
    --bs-display-font-family: 'Sora', sans-serif;

    --bs-font-weight-bold: 800;
    --bs-font-weight-medium: 600;
    --bs-font-weight-normal: 400;
    --bs-font-weight-light: 200;
    --bs-font-weight-thin: 100;

    --bs-primary: #3E69B3;
    --bs-primary-rgb: 62, 105, 179;
    --bs-primary-hover: #304e81;
    --btn-primary-color: #FFFFFF;

    --bs-secondary: #F5557C;
    --bs-secondary-rgb: 245, 85, 124;
    --bs-secondary-hover: #c24665;
    --btn-secondary-color: #1F1F1F;

    --bs-black: #1F1F1F;
    --bs-black-rgb: 31, 31, 31;
    --bs-white: #FFFFFF;
    --bs-white-rgb: 255, 255, 255;

    /* --gray-100: rgb(239, 239, 239); */
    /* --gray-200: rgb(240,242,244); */
    --gray-300: rgb(240, 242, 244);
    /* --gray-400: rgb(150,150,150); */
    --gray-500: rgb(166, 166, 166);
    /* --gray-600: rgb(100,100,100); */
    --gray-700: rgb(40, 40, 40);
    /* --gray-800: rgb(50,50,50); */
    /* --gray-900: rgb(40, 40, 40); */

    --bs-link-color: #3E69B3;
    --bs-link-color-rgb: 62, 105, 179;

    --bs-heading-font-weight: 400;
    --bs-heading-line-height: 1.2;
    --bs-display-font-weight: 400;
    --bs-display-line-height: 1.2;

    --bs-gold: #BBAB81;
    --bs-gold-rgb: rgb(187, 171, 129);
    --bs-gold-hover: #8d8162;
    --btn-gold-color: #1F1F1F;

    --bs-border-radius-lg: 24px;
    --bs-border-radius: 12px;
    --bs-border-radius-sm: 8px;

}

/* -- Font family -- */

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

/* -- Font size -- */

.extra-small    { font-size: 0.875rem !important; line-height: var(--base-line-height) !important; } /* 14px */
.small          { font-size: 1rem !important; line-height: var(--base-line-height) !important; } /* 16px */

body            { font-size: var(--base-font-size) !important; line-height: var(--base-line-height) !important; } /* 18px */

h6, .h6  { font-size: var(--base-font-size) !important; line-height: var(--bs-heading-line-height) !important; } /* 18px */
h5, .h5  { font-size: 1.25rem !important; line-height: var(--bs-heading-line-height) !important; } /* 20px */
h4, .h4  { font-size: 1.375rem !important; line-height: var(--bs-heading-line-height) !important; } /* 22px */
h3, .h3  { font-size: 1.625rem !important; line-height: var(--bs-heading-line-height) !important; } /* 26px */
h2, .h2  { font-size: 2.5rem !important; line-height: var(--bs-heading-line-height) !important; } /* 40px */
h1, .h1  { font-size: 3.75rem !important; line-height: var(--bs-heading-line-height) !important; } /* 60px */

.fs-6  { font-size: var(--base-font-size) !important; } /* 18px */
.fs-5  { font-size: 1.25rem !important; } /* 20px */
.fs-4  { font-size: 1.375rem !important; } /* 22px */
.fs-3  { font-size: 1.625rem !important; } /* 26px */
.fs-2  { font-size: 2.5rem !important; } /* 40px */
.fs-1  { font-size: 3.75rem !important; } /* 60px */

.display-7      { font-size: 1.125rem !important; line-height: 1.3 !important; } /* 18px */
.display-6      { font-size: 1.25rem !important; line-height: var(--bs-display-line-height) !important; } /* 20px */
.display-5      { font-size: 1.625rem !important; line-height: var(--bs-display-line-height) !important; } /* 26px */
.display-4      { font-size: 2.5rem !important; line-height: var(--bs-display-line-height) !important; } /* 40px */
.display-3      { font-size: 3.75rem !important; line-height: 1.1 !important; } /* 60px */
.display-2      { font-size: 5rem !important; line-height: 1.1 !important; } /* 80px */
.display-1      { font-size: 7.5rem !important; line-height: 1 !important; } /* 120px */

/* -- Font weight -- */

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

.fw-bold    { font-weight: var(--bs-font-weight-bold); }
.fw-medium  { font-weight: var(--bs-font-weight-medium); }
.fw-normal  { font-weight: var(--bs-font-weight-normal); }
.fw-light   { font-weight: var(--bs-font-weight-light); }
.fw-thin    { font-weight: var(--bs-font-weight-thin); }

/* -- 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 {
    &:not(.btn-sm):not(.btn-lg) {
        --bs-btn-font-size: 14px;
        --bs-btn-line-height: 20px;
        --bs-btn-border-width: 2px;
        --bs-btn-border-radius: 28px;
        --bs-btn-padding-x: 2rem;
        --bs-btn-padding-y: 1rem;
        --bs-btn-font-weight: var(--bs-font-weight-medium);
    }

    &.btn-sm {
        --bs-btn-font-size: 14px;
        --bs-btn-line-height: 20px;
        --bs-btn-border-width: 2px;
        --bs-btn-border-radius: 28px;
        --bs-btn-padding-x: 2.5rem;
        --bs-btn-padding-y: 1rem;
        --bs-btn-font-weight: var(--bs-font-weight-medium);
    }

    &.btn-lg {
        --bs-btn-font-size: 14px;
        --bs-btn-line-height: 20px;
        --bs-btn-border-width: 2px;
        --bs-btn-border-radius: 28px;
        --bs-btn-padding-x: 2.5rem;
        --bs-btn-padding-y: 1rem;
        --bs-btn-font-weight: var(--bs-font-weight-medium);
    }
}

.btn-primary {

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

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

}

.btn-secondary {
 
    &:not(.light):not(.lighter) {
        color: var(--bs-black);
        border-color: transparent !important;
        background: 
            linear-gradient(to right, var(--bs-white), var(--bs-white)), 
            linear-gradient(-90deg, rgba(62, 105, 179, 1) 0%, rgba(245, 85, 124, 1) 100%); 
        background-clip: padding-box, border-box;
        background-origin: padding-box, border-box;
        color: var(--bs-black);

        &:hover {
            color: var(--bs-white) !important;
            background: 
                linear-gradient(-90deg, rgba(62, 105, 179, 1) 0%, rgba(245, 85, 124, 1) 100%),
                linear-gradient(-90deg, rgba(62, 105, 179, 1) 0%, rgba(245, 85, 124, 1) 100%); 
            background-clip: padding-box, border-box;
            background-origin: padding-box, border-box;
        }
    }

    &.lighter {
        color: var(--bs-black);
        border-color: transparent !important;
        background: 
            linear-gradient(to right, rgb(240, 242, 244), rgb(240, 242, 244)), 
            linear-gradient(-90deg, rgba(62, 105, 179, 1) 0%, rgba(245, 85, 124, 1) 100%); 
        background-clip: padding-box, border-box;
        background-origin: padding-box, border-box;
        color: var(--bs-black);

        &:hover {
            color: var(--bs-white) !important;
            background: 
                linear-gradient(-90deg, rgba(62, 105, 179, 1) 0%, rgba(245, 85, 124, 1) 100%),
                linear-gradient(-90deg, rgba(62, 105, 179, 1) 0%, rgba(245, 85, 124, 1) 100%); 
            background-clip: padding-box, border-box;
            background-origin: padding-box, border-box;
        }
    }

    &.light {
        color: var(--bs-white) !important;
        border-color: transparent !important;
        background: 
            linear-gradient(to right, var(--bs-black), var(--bs-black)), 
            linear-gradient(-90deg, rgba(62, 105, 179, 1) 0%, rgba(245, 85, 124, 1) 100%); 
        background-clip: padding-box, border-box;
        background-origin: padding-box, border-box;
        color: var(--bs-black);

        &:hover {
            color: var(--bs-white) !important;
            background: 
                linear-gradient(-90deg, rgba(62, 105, 179, 1) 0%, rgba(245, 85, 124, 1) 100%),
                linear-gradient(-90deg, rgba(62, 105, 179, 1) 0%, rgba(245, 85, 124, 1) 100%); 
            background-clip: padding-box, border-box;
            background-origin: padding-box, border-box;
        }
    }

}

/*/ -- 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;
}

/*/ -- Icon -- /*/

.bi::before, [class*=" bi-"]::before, [class^=bi-]::before {
    vertical-align: -0.18em !important;
}