:root {

    /* อ้างอิงการใช้สีจาก https://dequeuniversity.com/rules/axe/4.10/color-contrast */

    /* font family */
    --customize-font-family: Noto Sans Thai, Noto Sans;

    --customize-container: 1400px;

    /* header */
    --customize-header-height: 80px;
    --customize-header-sub-height: 55px;
    --customize-sticky-distance-top: 30px;
    --customize-sticky-distance-bottom: 30px;

    --customize-color-white: 255, 255, 255;
    --customize-color-black: 35, 35, 35;
    --customize-color-black-dark: 0, 0, 0;

    --customize-color-gray-light: 247, 247, 247;
    /* 244,244,244 */
    --customize-color-gray: 147, 147, 147;
    --customize-color-gray-dark: 89, 89, 89;

    --customize-color-green: 12, 177, 75;
    --customize-color-red: 212, 22, 48;
    --customize-color-red-on-dark: 247, 91, 113;
    --customize-rgb-text-color-not-found: 220, 220, 220;

    /* alert */
    --customize-color-alert-success: 45, 106, 238;
    /* 12, 177, 75 */
    --customize-color-alert-fail: 212, 22, 48;

    /* row col */
    --customize-row-and-column-gap: 10px;

    /* form */
    --customize-field-alert-border-color: 212, 22, 48;
    --customize-field-alert-bg-color: 212, 22, 48;

    --customize-input-border-color-on-light: 0, 0, 0;
    --customize-input-border-color-on-light-focus: 12, 177, 75;

    --customize-input-border-color-on-dark: 255, 255, 255;
    --customize-input-border-color-on-dark-focus: 12, 177, 75;

    /* loading */
    --customize-color-loading-white: 255, 255, 255;
    --customize-bg-color-img: 230, 230, 230;
    /* 220,220,220 */

    /* transition */
    --customize-transition-duration: 0.5s;
    --customize-transition-duration-slow: 1s;
    --customize-transition-duration-fast: 0.3s;
    --customize-transition-all: all 0.5s ease;
    --customize-transition-all-slow: all 1s ease;
    --customize-transition-all-fast: all 0.3s ease;

    /* text */
    --customize-text-link: 138, 116, 61;
    --customize-text-link-hover: 12, 177, 75;

    /* btn */
    --customize-btn-height: 50px;
    --customize-btn-width: 50px;
    /* square */
    --customize-btn-line-height: 50px;
    --customize-btn-border-radius: 10px;

    /* border */
    --customize-border-color-on-white: 230, 230, 230;
    --customize-border-color-white: 255, 255, 255;
    --customize-border-color-black: 0, 0, 0;
    --customize-border-color-gray: 147, 147, 147;
    --customize-border-color-gray-light: 230, 230, 230;
    /* 244,244,244 / 215,215,215 */

    /* table */
    --customize-table-border-radius: 20px;

    /* card */
    --customize-card-border-radius: 20px;
    --customize-card-inner-border-radius: 15px;
    --customize-card-inner-padding: 5px;
    --customize-card-gap: 10px;
    --customize-card-padding: 30px;
    /* 40px */
    --customize-card-padding-short: 15px;
    /* 20px */

    /* img */
    --customize-img-small-border-radius: 10px;
    --customize-img-small-inner-border-radius: 8px;
    --customize-img-small-inner-padding: 2px;

    --customize-col-12: 100%;
    --customize-col-11: calc((100% / 12) * 11);
    --customize-col-10: calc((100% / 12) * 10);
    --customize-col-9: calc((100% / 12) * 9);
    --customize-col-8: calc((100% / 12) * 8);
    --customize-col-7: calc((100% / 12) * 7);
    --customize-col-6: calc((100% / 12) * 6);
    --customize-col-5: calc((100% / 12) * 5);
    --customize-col-4: calc((100% / 12) * 4);
    --customize-col-3: calc((100% / 12) * 3);
    --customize-col-2: calc((100% / 12) * 2);
    --customize-col-1: calc((100% / 12));

    --customize-padding-content-top: 50px;
    --customize-padding-content-bottom: 50px;

    /* bootstrap */
    /* --bs-modal-width: 500px; */
    --bs-modal-margin: 30px !important;

    /* social */
    --social-facebook-color: 9, 102, 255;
    --social-facebook-color-hover: 0, 81, 198;
    --social-facebook-on-color: 255, 255, 255;
    --social-facebook-color1: 9, 102, 255;
    --social-facebook-color2: 9, 102, 255;
    --social-facebook-color3: 9, 102, 255;

    --social-messenger-color: 0, 132, 255;
    --social-messenger-color-hover: 0, 117, 204;
    --social-messenger-on-color: 255, 255, 255;
    --social-messenger-color1: 0, 132, 255;
    --social-messenger-color2: 0, 132, 255;
    --social-messenger-color3: 0, 132, 255;

    --social-instagram-color: 207, 27, 90;
    --social-instagram-color-hover: 0, 81, 198;
    --social-instagram-on-color: 255, 255, 255;
    --social-instagram-color1: 90, 32, 102;
    --social-instagram-color2: 207, 27, 90;
    --social-instagram-color3: 235, 127, 40;

    --social-tiktok-color: 30, 30, 30;
    --social-tiktok-color-hover: 50, 50, 50;
    --social-tiktok-on-color: 255, 255, 255;
    --social-tiktok-color1: 30, 30, 30;
    --social-tiktok-color2: 30, 30, 30;
    --social-tiktok-color3: 30, 30, 30;

    --social-youtube-color: 204, 0, 0;
    --social-youtube-color-hover: 147, 2, 2;
    --social-youtube-on-color: 255, 255, 255;
    --social-youtube-color1: 204, 0, 0;
    --social-youtube-color2: 204, 0, 0;
    --social-youtube-color3: 204, 0, 0;

    --social-line-color: 37, 175, 0;
    --social-line-color-hover: 32, 147, 0;
    --social-line-on-color: 255, 255, 255;
    --social-line-color1: 37, 175, 0;
    --social-line-color2: 37, 175, 0;
    --social-line-color3: 37, 175, 0;

    /* quotation status * สำหรับบนพื้นหลังสีอ่อน */
    --quotation-status-pending-color: 231, 146, 22;
    /* 255,152,0 */
    --quotation-status-approved-color: 12, 177, 75;
    --quotation-status-cancel-color: 212, 22, 48;
    /* quotation status * สำหรับบนพื้นหลังสีเข้ม */
    --quotation-status-pending-color-on-dark: 231, 146, 22;
    /* 255,152,0 */
    --quotation-status-approved-color-on-dark: 12, 177, 75;
    --quotation-status-cancel-color-on-dark: 247, 91, 113;

    /* form */
    --field-height: 50px;
    --field-line-height: 50px;
    --field-border-radius: 10px;

}

[site="BaanAmphur"] {

    /* primary */
    --customize-color-primary: 182, 11, 25;
    --customize-color-on-primary: 255, 255, 255;
    --customize-color-primary-hover: 250, 18, 40;
    --customize-color-on-primary-hover: 255, 255, 255;
    --customize-color-hl-on-primary: 35, 35, 35;

    /* primary light */
    --customize-color-primary-light: 249, 236, 237;
    --customize-color-on-primary-light: 182, 11, 25;
    --customize-color-primary-light-hover: 249, 236, 237;
    --customize-color-on-primary-light-hover: 182, 11, 25;

    /* secondary */
    --customize-color-secondary: 6, 23, 92;
    /* 36, 60, 149 */
    --customize-color-on-secondary: 255, 255, 255;
    --customize-color-secondary-hover: 0, 15, 56;
    --customize-color-on-secondary-hover: 255, 255, 255;
    --customize-color-hl-on-secondary: 12, 177, 75;

    /* secondary light */
    --customize-color-secondary-light: 226, 235, 255;
    --customize-color-on-secondary-light: 6, 23, 92;
    --customize-color-secondary-light-hover: 226, 235, 255;
    --customize-color-on-secondary-light-hover: 6, 23, 92;

    /* secondary 2 */
    --customize-color-secondary-2: 45, 106, 238;
    --customize-color-on-secondary-2: 255, 255, 255;
    --customize-color-secondary-2-hover: 45, 106, 238;
    --customize-color-on-secondary-2-hover: 255, 255, 255;

    /* secondary light 2 */
    --customize-color-secondary-light-2: 235, 240, 255;
    --customize-color-on-secondary-light-2: 45, 106, 238;
    --customize-color-secondary-light-2-hover: 235, 240, 255;
    --customize-color-on-secondary-light-2-hover: 45, 106, 238;

    /* loading */
    --customize-color-loading: 255, 255, 255;
    --customize-color-loading-on-light: 12, 177, 75;
    --customize-color-loading-on-dark: 12, 177, 75;

    /* primary dark */
    --customize-color-primary-dark: 25, 46, 31;
    --customize-color-on-primary-dark: 255, 255, 255;
    --customize-color-primary-dark-hover: 25, 46, 31;
    --customize-color-on-primary-dark-hover: 255, 255, 255;
    --customize-color-hl-on-primary-dark: 35, 35, 35;

}

/* --------------------------------------------------------------- */
/* ----------------------------- fill ---------------------------- */
/* --------------------------------------------------------------- */

.fill-color-white {
    --customize-btn-bg: 255, 255, 255;
    --customize-btn-color: 35, 35, 35;
    --customize-btn-hover-bg: 240, 240, 240;
    --customize-btn-hover-color: 35, 35, 35;
    --customize-btn-active-bg: 255, 255, 255;
    --customize-btn-active-color: 35, 35, 35;
}

.fill-color-black {
    --customize-btn-bg: 0, 0, 0;
    --customize-btn-color: 255, 255, 255;
    --customize-btn-hover-bg: 12, 12, 12;
    --customize-btn-hover-color: 255, 255, 255;
    --customize-btn-active-bg: 0, 0, 0;
    --customize-btn-active-color: 255, 255, 255;
}

.fill-color-gray {
    --customize-btn-bg: 150, 150, 150;
    --customize-btn-color: 255, 255, 255;
    --customize-btn-hover-bg: 45, 45, 45;
    --customize-btn-hover-color: 255, 255, 255;
    --customize-btn-active-bg: 150, 150, 150;
    --customize-btn-active-color: 255, 255, 255;
    /* --customize-btn-bg : 94,94,94;
    --customize-btn-color : 255,255,255;
    --customize-btn-hover-bg : 45,45,45;
    --customize-btn-hover-color : 255,255,255;
    --customize-btn-active-bg : 94,94,94;
    --customize-btn-active-color : 255,255,255; */
}

.fill-color-gray-light {
    --customize-btn-bg: 230, 230, 230;
    /* 224,224,224 */
    --customize-btn-color: 12, 12, 12;
    --customize-btn-hover-bg: 193, 193, 193;
    --customize-btn-hover-color: 12, 12, 12;
    --customize-btn-active-bg: 230, 230, 230;
    --customize-btn-active-color: 12, 12, 12;
}

.fill-color-red {
    --customize-btn-bg: 212, 22, 48;
    --customize-btn-color: 255, 255, 255;
    --customize-btn-hover-bg: 150, 10, 48;
    --customize-btn-hover-color: 255, 255, 255;
    --customize-btn-active-bg: 150, 10, 48;
    --customize-btn-active-color: 255, 255, 255;
}

.fill-color-red-light {
    --customize-btn-bg: 212, 22, 48;
    --customize-btn-color: 255, 255, 255;
    --customize-btn-hover-bg: 150, 10, 48;
    --customize-btn-hover-color: 255, 255, 255;
    --customize-btn-active-bg: 150, 10, 48;
    --customize-btn-active-color: 255, 255, 255;
}

/* --------------------------------------------------------------- */
/* --------------------------- outline --------------------------- */
/* --------------------------------------------------------------- */

.outline-color-white {
    --customize-btn-bg: 255, 255, 255;
    --customize-btn-border-color: 255, 255, 255;
    --customize-btn-color: 255, 255, 255;
    --customize-btn-hover-bg: 255, 255, 255;
    --customize-btn-hover-border-color: 255, 255, 255;
    --customize-btn-hover-color: 35, 35, 35;
    --customize-btn-active-bg: 240, 240, 240;
    --customize-btn-active-border-color: 240, 240, 240;
    --customize-btn-active-color: 35, 35, 35;
}

.outline-color-black,
.outline-color-gray-to-black:hover {
    --customize-btn-bg: 0, 0, 0;
    --customize-btn-border-color: 0, 0, 0;
    --customize-btn-color: 0, 0, 0;
    --customize-btn-hover-bg: 0, 0, 0;
    --customize-btn-hover-border-color: 0, 0, 0;
    --customize-btn-hover-color: 255, 255, 255;
    --customize-btn-active-bg: 12, 12, 12;
    --customize-btn-active-border-color: 0, 0, 0;
    --customize-btn-active-color: 255, 255, 255;
}

.outline-color-gray,
.outline-color-gray-to-black {
    --customize-btn-bg: 150, 150, 150;
    --customize-btn-border-color: 180, 180, 180;
    --customize-btn-color: 150, 150, 150;
    --customize-btn-hover-bg: 150, 150, 150;
    --customize-btn-hover-border-color: 150, 150, 150;
    --customize-btn-hover-color: 255, 255, 255;
    --customize-btn-active-bg: 45, 45, 45;
    --customize-btn-active-border-color: 20, 65, 65;
    --customize-btn-active-color: 255, 255, 255;
    /* --customize-btn-bg : 94,94,94;
    --customize-btn-border-color : 180,180,180;
    --customize-btn-color : 94,94,94;
    --customize-btn-hover-bg : 94,94,94;
    --customize-btn-hover-border-color : 94,94,94;
    --customize-btn-hover-color : 255,255,255;
    --customize-btn-active-bg : 45,45,45;
    --customize-btn-active-border-color : 20,65,65;
    --customize-btn-active-color : 255,255,255; */
}

.outline-color-gray-light {
    --customize-btn-bg: 224, 224, 224;
    --customize-btn-border-color: 224, 224, 224;
    --customize-btn-color: 12, 12, 12;
    --customize-btn-hover-bg: 224, 224, 224;
    --customize-btn-hover-border-color: 224, 224, 224;
    --customize-btn-hover-color: 12, 12, 12;
    --customize-btn-active-bg: 193, 193, 193;
    --customize-btn-active-border-color: 193, 193, 193;
    --customize-btn-active-color: 12, 12, 12;
}

.outline-color-red {
    --customize-btn-bg: 212, 22, 48;
    --customize-btn-border-color: 212, 22, 48;
    --customize-btn-color: 212, 22, 48;
    --customize-btn-hover-bg: 212, 22, 48;
    --customize-btn-hover-border-color: 212, 22, 48;
    --customize-btn-hover-color: 35, 35, 35;
    --customize-btn-active-bg: 240, 240, 240;
    --customize-btn-active-border-color: 240, 240, 240;
    --customize-btn-active-color: 35, 35, 35;
}

.outline-color-red-light {
    --customize-btn-bg: 224, 224, 224;
    --customize-btn-border-color: 224, 224, 224;
    --customize-btn-color: 12, 12, 12;
    --customize-btn-hover-bg: 224, 224, 224;
    --customize-btn-hover-border-color: 224, 224, 224;
    --customize-btn-hover-color: 12, 12, 12;
    --customize-btn-active-bg: 193, 193, 193;
    --customize-btn-active-border-color: 193, 193, 193;
    --customize-btn-active-color: 12, 12, 12;
}

/* --------------------------------------------------------------- */
/* ----------------------------- fill ---------------------------- */
/* --------------------------------------------------------------- */

.fill-color-primary {
    --customize-btn-bg: var(--customize-color-primary);
    --customize-btn-color: var(--customize-color-on-primary);
    --customize-btn-hover-bg: var(--customize-color-primary-hover);
    --customize-btn-hover-color: var(--customize-color-on-primary-hover);
    --customize-btn-active-bg: var(--customize-color-primary);
    --customize-btn-active-color: var(--customize-color-on-primary);
}

.fill-color-primary-light {
    --customize-btn-bg: var(--customize-color-primary-light);
    --customize-btn-color: var(--customize-color-on-primary-light);
    --customize-btn-hover-bg: var(--customize-color-primary-light-hover);
    --customize-btn-hover-color: var(--customize-color-on-primary-light-hover);
    --customize-btn-active-bg: var(--customize-color-primary-light);
    --customize-btn-active-color: var(--customize-color-on-primary-light);
}

.fill-color-secondary,
.fill-color-secondary-light-to-dark:hover {
    --customize-btn-bg: var(--customize-color-secondary);
    --customize-btn-color: var(--customize-color-on-secondary);
    --customize-btn-hover-bg: var(--customize-color-secondary-hover);
    --customize-btn-hover-color: var(--customize-color-on-secondary-hover);
    --customize-btn-active-bg: var(--customize-color-secondary);
    --customize-btn-active-color: var(--customize-color-on-secondary);
}

.fill-color-secondary-light,
.fill-color-secondary-light-to-dark {
    --customize-btn-bg: var(--customize-color-secondary-light);
    --customize-btn-color: var(--customize-color-on-secondary-light);
    --customize-btn-hover-bg: var(--customize-color-secondary-light-hover);
    --customize-btn-hover-color: var(--customize-color-on-secondary-light-hover);
    --customize-btn-active-bg: var(--customize-color-secondary-light);
    --customize-btn-active-color: var(--customize-color-on-secondary-light);
}

.fill-color-secondary-2 {
    --customize-btn-bg: var(--customize-color-secondary-2);
    --customize-btn-color: var(--customize-color-on-secondary-2);
    --customize-btn-hover-bg: var(--customize-color-secondary-2-hover);
    --customize-btn-hover-color: var(--customize-color-on-secondary-2-hover);
    --customize-btn-active-bg: var(--customize-color-secondary-2);
    --customize-btn-active-color: var(--customize-color-on-secondary-2);
}

.fill-color-secondary-light-2 {
    --customize-btn-bg: var(--customize-color-secondary-light-2);
    --customize-btn-color: var(--customize-color-on-secondary-light-2);
    --customize-btn-hover-bg: var(--customize-color-secondary-light-2-hover);
    --customize-btn-hover-color: var(--customize-color-on-secondary-light-2-hover);
    --customize-btn-active-bg: var(--customize-color-secondary-light-2);
    --customize-btn-active-color: var(--customize-color-on-secondary-light-2);
}

/* --------------------------------------------------------------- */
/* --------------------------- outline --------------------------- */
/* --------------------------------------------------------------- */

.outline-color-primary {
    --customize-btn-bg: var(--customize-color-primary);
    --customize-btn-border-color: var(--customize-color-primary);
    --customize-btn-color: var(--customize-color-primary);
    --customize-btn-hover-bg: var(--customize-color-primary-hover);
    --customize-btn-hover-border-color: var(--customize-color-primary-hover);
    --customize-btn-hover-color: var(--customize-color-on-primary-hover);
    --customize-btn-active-bg: var(--customize-color-primary);
    --customize-btn-active-border-color: var(--customize-color-primary);
    --customize-btn-active-color: var(--customize-color-on-primary);
}

.outline-color-primary-light {
    --customize-btn-bg: var(--customize-color-primary-light);
    --customize-btn-border-color: var(--customize-color-primary-light);
    --customize-btn-color: var(--customize-color-primary-light);
    --customize-btn-hover-bg: var(--customize-color-primary-light-hover);
    --customize-btn-hover-border-color: var(--customize-color-primary-light-hover);
    --customize-btn-hover-color: var(--customize-color-on-primary-light-hover);
    --customize-btn-active-bg: var(--customize-color-primary-light);
    --customize-btn-active-border-color: var(--customize-color-primary-light);
    --customize-btn-active-color: var(--customize-color-on-primary-light);
}

.outline-color-secondary {
    --customize-btn-bg: var(--customize-color-secondary);
    --customize-btn-border-color: var(--customize-color-secondary);
    --customize-btn-color: var(--customize-color-secondary);
    --customize-btn-hover-bg: var(--customize-color-secondary-hover);
    --customize-btn-hover-border-color: var(--customize-color-secondary-hover);
    --customize-btn-hover-color: var(--customize-color-on-secondary-hover);
    --customize-btn-active-bg: var(--customize-color-secondary);
    --customize-btn-active-border-color: var(--customize-color-secondary);
    --customize-btn-active-color: var(--customize-color-on-secondary);
}

.outline-color-secondary-light {
    --customize-btn-bg: var(--customize-color-secondary-light);
    --customize-btn-border-color: var(--customize-color-secondary-light);
    --customize-btn-color: var(--customize-color-secondary-light);
    --customize-btn-hover-bg: var(--customize-color-secondary-light-hover);
    --customize-btn-hover-border-color: var(--customize-color-secondary-light-hover);
    --customize-btn-hover-color: var(--customize-color-on-secondary-light-hover);
    --customize-btn-active-bg: var(--customize-color-secondary-light);
    --customize-btn-active-border-color: var(--customize-color-secondary-light);
    --customize-btn-active-color: var(--customize-color-on-secondary-light);
}


/* xxl */
@media (min-width: 1400px) {

    :root {

        /* font size */
        --customize-default-font-size: 15px;
        --customize-default-line-height: 25px;
        --customize-small-font-size: 13px;
        --customize-small-line-height: 20px;
        --customize-smallest-font-size: 11px;
        --customize-smallest-line-height: 15px;
        --customize-h0-font-size: 50px;
        --customize-h0-line-height: 70px;
        --customize-h1-font-size: 35px;
        --customize-h1-line-height: 55px;
        --customize-h2-font-size: 25px;
        --customize-h2-line-height: 40px;
        --customize-h3-font-size: 20px;
        --customize-h3-line-height: 30px;
        --customize-h4-font-size: 18px;
        --customize-h4-line-height: 30px;
        --customize-h5-font-size: 16px;
        --customize-h5-line-height: 25px;
        --customize-h6-font-size: 16px;
        --customize-h6-line-height: 25px;

    }

}

/* xxl - 1 */
@media (min-width:1500px) and (max-width: 1599.98px) {

    :root {

        /* container */
        --customize-container: 1240px;

    }

}

/* xxl - 2 */
@media (min-width: 1400px) and (max-width: 1499.98px) {

    :root {

        /* container */
        --customize-container: 1240px;

    }

}

/* xxl - 1 และ 2 */
@media (min-width: 1400px) and (max-width: 1599.98px) {

    :root {

        /* font size */
        --customize-default-font-size: 15px;
        --customize-default-line-height: 25px;
        --customize-small-font-size: 12px;
        --customize-small-line-height: 20px;
        --customize-smallest-font-size: 10px;
        --customize-smallest-line-height: 20px;
        --customize-h0-font-size: 30px;
        --customize-h0-line-height: 45px;
        --customize-h1-font-size: 30px;
        --customize-h1-line-height: 45px;
        --customize-h2-font-size: 22px;
        --customize-h2-line-height: 35px;
        --customize-h3-font-size: 18px;
        --customize-h3-line-height: 30px;
        --customize-h4-font-size: 16px;
        --customize-h4-line-height: 25px;
        --customize-h5-font-size: 16px;
        --customize-h5-line-height: 25px;
        --customize-h6-font-size: 16px;
        --customize-h6-line-height: 25px;

    }
}

/* xl */
@media (min-width: 1200px) and (max-width: 1399.98px) {

    :root {

        /* container */
        --customize-container: 1140px;

    }

}

/* lg */
@media (min-width: 992px) and (max-width: 1199.98px) {

    :root {

        /* container */
        --customize-container: 960px;

    }

}

/* xl - lg */
@media (min-width: 992px) and (max-width: 1399.98px) {

    :root {

        /* font size */
        --customize-default-font-size: 13px;
        --customize-default-line-height: 25px;
        --customize-small-font-size: 12px;
        --customize-small-line-height: 20px;
        --customize-smallest-font-size: 10px;
        --customize-smallest-line-height: 20px;
        --customize-h0-font-size: 28px;
        --customize-h0-line-height: 45px;
        --customize-h1-font-size: 28px;
        --customize-h1-line-height: 45px;
        --customize-h2-font-size: 20px;
        --customize-h2-line-height: 35px;
        --customize-h3-font-size: 18px;
        --customize-h3-line-height: 30px;
        --customize-h4-font-size: 16px;
        --customize-h4-line-height: 25px;
        --customize-h5-font-size: 16px;
        --customize-h5-line-height: 25px;
        --customize-h6-font-size: 16px;
        --customize-h6-line-height: 25px;

    }

}

/* md */
@media (min-width: 768px) and (max-width: 991.98px) {

    :root {

        /* container */
        --customize-container: 720px;

        /* font size */
        --customize-default-font-size: 14px;
        --customize-default-line-height: 25px;
        --customize-small-font-size: 12px;
        --customize-small-line-height: 20px;
        --customize-smallest-font-size: 10px;
        --customize-smallest-line-height: 20px;
        --customize-h0-font-size: 30px;
        --customize-h0-line-height: 45px;
        --customize-h1-font-size: 30px;
        --customize-h1-line-height: 45px;
        --customize-h2-font-size: 22px;
        --customize-h2-line-height: 35px;
        --customize-h3-font-size: 18px;
        --customize-h3-line-height: 30px;
        --customize-h4-font-size: 16px;
        --customize-h4-line-height: 25px;
        --customize-h5-font-size: 16px;
        --customize-h5-line-height: 25px;
        --customize-h6-font-size: 16px;
        --customize-h6-line-height: 25px;

    }

}

/* sm - xs */
@media (max-width: 767.98px) {
    :root {

        /* header */
        --customize-header-height: 70px;
        --customize-header-sub-height: 50px;

        /* table */
        --customize-table-border-radius: 15px;

        /* card */
        --customize-card-border-radius: 15px;
        --customize-card-inner-border-radius: 13px;
        --customize-card-inner-padding: 2px;

    }
}

/* sm */
@media (min-width: 576px) and (max-width: 767.98px) {

    :root {

        /* container */
        --customize-container: 540px;

        /* font size */
        --customize-default-font-size: 14px;
        --customize-default-line-height: 25px;
        --customize-small-font-size: 12px;
        --customize-small-line-height: 20px;
        --customize-smallest-font-size: 10px;
        --customize-smallest-line-height: 20px;
        --customize-h0-font-size: 28px;
        --customize-h0-line-height: 45px;
        --customize-h1-font-size: 28px;
        --customize-h1-line-height: 45px;
        --customize-h2-font-size: 20px;
        --customize-h2-line-height: 30px;
        --customize-h3-font-size: 18px;
        --customize-h3-line-height: 30px;
        --customize-h4-font-size: 16px;
        --customize-h4-line-height: 25px;
        --customize-h5-font-size: 16px;
        --customize-h5-line-height: 25px;
        --customize-h6-font-size: 16px;
        --customize-h6-line-height: 25px;

    }

}

/* xs */
@media (max-width: 575.98px) {

    :root {

        /* container */
        --customize-container: 100%;

        /* font size */
        --customize-default-font-size: 14px;
        --customize-default-line-height: 25px;
        --customize-small-font-size: 12px;
        --customize-small-line-height: 20px;
        --customize-smallest-font-size: 10px;
        --customize-smallest-line-height: 20px;
        --customize-h0-font-size: 25px;
        --customize-h0-line-height: 40px;
        --customize-h1-font-size: 25px;
        --customize-h1-line-height: 40px;
        --customize-h2-font-size: 18px;
        --customize-h2-line-height: 30px;
        --customize-h3-font-size: 18px;
        --customize-h3-line-height: 30px;
        --customize-h4-font-size: 14px;
        --customize-h4-line-height: 25px;
        --customize-h5-font-size: 14px;
        --customize-h5-line-height: 25px;
        --customize-h6-font-size: 14px;
        --customize-h6-line-height: 25px;

        /* card */
        --customize-card-padding: 20px;
        --customize-card-padding-short: 10px;

    }

}

/* xs custom */
@media (max-width: 399.98px) {

    :root {

        /* container */
        --customize-container: 100%;

        /* font size */
        --customize-default-font-size: 12px;
        --customize-default-line-height: 25px;
        --customize-small-font-size: 10px;
        --customize-small-line-height: 15px;
        --customize-smallest-font-size: 10px;
        --customize-smallest-line-height: 15px;
        --customize-h0-font-size: 22px;
        --customize-h0-line-height: 35px;
        --customize-h1-font-size: 22px;
        --customize-h1-line-height: 35px;
        --customize-h2-font-size: 16px;
        --customize-h2-line-height: 30px;
        --customize-h3-font-size: 16px;
        --customize-h3-line-height: 30px;
        --customize-h4-font-size: 12px;
        --customize-h4-line-height: 25px;
        --customize-h5-font-size: 12px;
        --customize-h5-line-height: 25px;
        --customize-h6-font-size: 12px;
        --customize-h6-line-height: 25px;

        /* card */
        --customize-card-padding: 20px;
        --customize-card-padding-short: 10px;

    }

}