:root {
    --stext-23: 23px;
    --stext-20: 20px;
    --stext-18: 18px;
    --stext-16: 16px;
    --stext-14: 14px;
    --stext-12: 12px;
    --stext-10: 10px;
    --ftext-regular: "Sarabun Regular";
    --ftext-medium: "Sarabun Medium";
    --ftext-semiBold: "Sarabun SemiBold";
    --ftext-bold: "Sarabun Bold";
    --fweight-700: 700;
    --fweight-600: 600;
    --fweight-500: 500;
    --fweight-400: 400;
    --neutral-100: #262626
    --neutral-90: #5B5C6A;
    --neutral-80: #EAEAEA;
    --neutral-70: #DCDCDC;
    --neutral-40: #EEEEEE;
    --neutral-20: #F5F5F7;
    --neutral-10: #FAFAFC;
    --neutral-0: #FFFFFF;
    --T-PlaceHolder: #CCCCCC;
    --primary-100: #16BFBF;
    --primary-90: #18D1D1;
    --primary-80: #1AE6E6;
    --primary-70: #1CF7F7;
    --primary-40: #2FFFFF;
    --primary-20: #7EFFFF;
    --primary-10: #B5FFFF;
    --primary-0: #D8FFFF;
    --second-100: #213569;
    --second-90: #4D6AB6;
    --second-80: #6683D0;
    --second-70: #8AA3E5;
    --second-40: #A9BAE7;
    --second-20: #CFD9F4;
    --second-10: #E2E6FF;
    --second-0: #E4EAFC;
    --approve-100: #13AF77;
    --approve-80: #71BE73;
    --approve-10: #E7F7F1;
    --disapprove-100: #D92D20;
    --disapprove-80: #DC3545;
    --disapprove-10: #FFE8E8;
    --waiting-100: #DC8535;
    --waiting-80: #F3C244;
    --waiting-10: #FFF8E0;
    --icon-100: #426AD2;
    --icon-80: #4976E9;
    --icon-10: #5B5C6A;
    --text_color-table: #5B5C6A;
}

/*----------------------- Headline -----------------------*/
.headline_se-23 {
    font-family: var(--ftext-semiBold);
    font-size: var(--stext-23);
    font-weight:var(--fweight-600);
}
.headline_me-23 {
    font-family: var(--ftext-medium);
    font-size: var(--stext-23);
    font-weight:var(--fweight-500);
}


.headline_se-20 {
    font-family: var(--ftext-semiBold);
    font-size: var(--stext-20);
    font-weight:var(--fweight-600);
}
.headline_me-20 {
    font-family: var(--ftext-medium);
    font-size: var(--stext-20);
    font-weight:var(--fweight-500);
}


.headline_se-18 {
    font-family: var(--ftext-semiBold);
    font-size: var(--stext-18);
    font-weight:var(--fweight-600);
}
.headline_me-18 {
    font-family: var(--ftext-medium);
    font-size: var(--stext-18);
    font-weight:var(--fweight-500);
}


.headline_se-16 {
    font-family: var(--ftext-semiBold);
    font-size: var(--stext-16);
    font-weight:var(--fweight-600);
}
.headline_me-16 {
    font-family: var(--ftext-medium);
    font-size: var(--stext-16);
    font-weight:var(--fweight-500);
}
/*----------------------- Headline -----------------------*/


/*----------------------- Paragraph -----------------------*/
.paragraph_me-18 {
    font-family: var(--ftext-medium);
    font-size: var(--stext-18);
    font-weight:var(--fweight-500);
}
.paragraph_re-18 {
    font-family: var(--ftext-regular);
    font-size: var(--stext-18);
    font-weight:var(--fweight-400);
}


.paragraph_me-16 {
    font-family: var(--ftext-medium);
    font-size: var(--stext-16);
    font-weight:var(--fweight-500);
}
.paragraph_re-16 {
    font-family: var(--ftext-regular);
    font-size: var(--stext-16);
    font-weight:var(--fweight-400);
}
/*----------------------- Paragraph -----------------------*/


/*----------------------- Label -----------------------*/
.label_me-18 {
    font-family: var(--ftext-medium);
    font-size: var(--stext-18);
    font-weight:var(--fweight-500);
}
.label_re-18 {
    font-family: var(--ftext-regular);
    font-size: var(--stext-18);
    font-weight:var(--fweight-400);
}


.label_me-16 {
    font-family: var(--ftext-medium);
    font-size: var(--stext-16);
    font-weight:var(--fweight-500);
}
.label_re-16 {
    font-family: var(--ftext-regular);
    font-size: var(--stext-16);
    font-weight:var(--fweight-400);
}


.label_me-14 {
    font-family: var(--ftext-medium);
    font-size: var(--stext-14);
    font-weight:var(--fweight-500);
}
.label_re-14 {
    font-family: var(--ftext-regular);
    font-size: var(--stext-14);
    font-weight:var(--fweight-400);
}


.label_me-12 {
    font-family: var(--ftext-medium);
    font-size: var(--stext-12);
    font-weight:var(--fweight-500);
}
.label_re-12 {
    font-family: var(--ftext-regular);
    font-size: var(--stext-12);
    font-weight:var(--fweight-400);
}

/*----------------------- Label -----------------------*/


/*----------------------- Button -----------------------*/
.button_re-18 {
    font-family: var(--ftext-regular);
    font-size: var(--stext-18);
    font-weight:var(--fweight-400);
}
.button_re-16 {
    font-family: var(--ftext-regular);
    font-size: var(--stext-16);
    font-weight:var(--fweight-400);
}
.button_re-14 {
    font-family: var(--ftext-regular);
    font-size: var(--stext-14);
    font-weight:var(--fweight-400);
}
/*----------------------- Button -----------------------*/

.T-PlaceHolder {
    color: var(--T-PlaceHolder);
}

/*----- color Neutral -----*/
.color_neutral-100 {
    color: var(--neutral-100);
}
.color_neutral-90 {
    color: var(--neutral-90);
}
.color_neutral-80 {
    color: var(--neutral-80);
}
.color_neutral-70 {
    color: var(--neutral-70);
}
.color_neutral-40 {
    color: var(--neutral-40);
}
.color_neutral-20 {
    color: var(--neutral-20);
}
.color_neutral-10 {
    color: var(--neutral-10);
}
.color_neutral-0 {
    color: var(--neutral-0);
}
/*----- color Neutral -----*/


/*----- color Primary -----*/
.color_primary-100 {
    color: var(--primary-100);
}
.color_primary-90 {
    color: var(--primary-90);
}
.color_primary-80 {
    color: var(--primary-80);
}
.color_primary-70 {
    color: var(--primary-70);
}
.color_primary-40 {
    color: var(--primary-40);
}
.color_primary-20 {
    color: var(--primary-20);
}
.color_primary-10 {
    color: var(--primary-10);
}
.color_primary-0 {
    color: var(--primary-0);
}
/*----- color Primary -----*/


/*----- color Second -----*/
.color_second-100 {
    color: var(--second-100);
}
.color_second-90 {
    color: var(--second-90);
}
.color_second-80 {
    color: var(--second-80);
}
.color_second-70 {
    color: var(--second-70);
}
.color_second-40 {
    color: var(--second-40);
}
.color_second-20 {
    color: var(--second-20);
}
.color_second-10 {
    color: var(--second-10);
}
.color_second-0 {
    color: var(--second-0);
}
/*----- color Second -----*/


/*----- color Approve -----*/
.color_approve-100 {
    color: var(--approve-100);
}
.color_approve-80 {
    color: var(--approve-80);
}
.color_approve-10 {
    color: var(--approve-10);
}
/*----- color Approve -----*/


/*----- color Disapprove -----*/
.color_disapprove-100 {
    color: var(--disapprove-100);
}
.color_disapprove-80 {
    color: var(--disapprove-80);
}
.color_disapprove-10 {
    color: var(--disapprove-10);
}
/*----- color Approve -----*/


/*----- color Waiting -----*/
.color_waiting-100 {
    color: var(--waiting-100);
}
.color_waiting-80 {
    color: var(--waiting-80);
}
.color_waiting-10 {
    color: var(--waiting-10);
}
/*----- color Approve -----*/


/*----- color Icon -----*/
.color_icon-100 {
    color: var(--icon-100);
}
.color_icon-80 {
    color: var(--icon-80);
}
.color_icon-10 {
    color: var(--icon-10);
}
/*----- color Approve -----*/

.btn_primary {
    width: 140px;
    height: 34px;
    border-radius: 5px;
    color: var(--neutral-0);
    background-color: var(--second-70);
}

.btn_primary-outline {
    width: 140px;
    height: 34px;
    border-radius: 5px;
    color: var(--neutral-90);
    background-color: var(--neutral-0);
    border: 1px solid var(--second-70);
}

/*----------------------------- responsive mobile -----------------------------*/

@media (min-width: 200px) and (max-width: 767px) {
    /*----------------------- Headline -----------------------*/
    .headline_se-23 {
        font-family: var(--ftext-semiBold);
        font-size: var(--stext-21);
        font-weight:var(--fweight-600);
    }
    .headline_me-23 {
        font-family: var(--ftext-medium);
        font-size: var(--stext-21);
        font-weight:var(--fweight-500);
    }


    .headline_se-20 {
        font-family: var(--ftext-semiBold);
        font-size: var(--stext-18);
        font-weight:var(--fweight-600);
    }
    .headline_me-20 {
        font-family: var(--ftext-medium);
        font-size: var(--stext-18);
        font-weight:var(--fweight-500);
    }


    .headline_se-18 {
        font-family: var(--ftext-semiBold);
        font-size: var(--stext-16);
        font-weight:var(--fweight-600);
    }
    .headline_me-18 {
        font-family: var(--ftext-medium);
        font-size: var(--stext-16);
        font-weight:var(--fweight-500);
    }


    .headline_se-16 {
        font-family: var(--ftext-semiBold);
        font-size: var(--stext-14);
        font-weight:var(--fweight-600);
    }
    .headline_me-16 {
        font-family: var(--ftext-medium);
        font-size: var(--stext-14);
        font-weight:var(--fweight-500);
    }
    /*----------------------- Headline -----------------------*/

    /*----------------------- Paragraph -----------------------*/
    .paragraph_me-18 {
        font-family: var(--ftext-medium);
        font-size: var(--stext-16);
        font-weight:var(--fweight-500);
    }
    .paragraph_re-18 {
        font-family: var(--ftext-regular);
        font-size: var(--stext-16);
        font-weight:var(--fweight-400);
    }


    .paragraph_me-16 {
        font-family: var(--ftext-medium);
        font-size: var(--stext-14);
        font-weight:var(--fweight-500);
    }
    .paragraph_re-16 {
        font-family: var(--ftext-regular);
        font-size: var(--stext-14);
        font-weight:var(--fweight-400);
    }
    /*----------------------- Paragraph -----------------------*/

    /*----------------------- Label -----------------------*/
    .label_me-18 {
        font-family: var(--ftext-medium);
        font-size: var(--stext-16);
        font-weight:var(--fweight-500);
    }
    .label_re-18 {
        font-family: var(--ftext-regular);
        font-size: var(--stext-16);
        font-weight:var(--fweight-400);
    }


    .label_me-16 {
        font-family: var(--ftext-medium);
        font-size: var(--stext-14);
        font-weight:var(--fweight-500);
    }
    .label_re-16 {
        font-family: var(--ftext-regular);
        font-size: var(--stext-14);
        font-weight:var(--fweight-400);
    }


    .label_me-14 {
        font-family: var(--ftext-medium);
        font-size: var(--stext-12);
        font-weight:var(--fweight-500);
    }
    .label_re-14 {
        font-family: var(--ftext-regular);
        font-size: var(--stext-12);
        font-weight:var(--fweight-400);
    }


    .label_me-12 {
        font-family: var(--ftext-medium);
        font-size: var(--stext-10);
        font-weight:var(--fweight-500);
    }
    .label_re-12 {
        font-family: var(--ftext-regular);
        font-size: var(--stext-10);
        font-weight:var(--fweight-400);
    }
    /*----------------------- Label -----------------------*/

    /*----------------------- Button -----------------------*/
    .button_re-18 {
        font-family: var(--ftext-regular);
        font-size: var(--stext-16);
        font-weight:var(--fweight-400);
    }
    .button_re-16 {
        font-family: var(--ftext-regular);
        font-size: var(--stext-14);
        font-weight:var(--fweight-400);
    }
    .button_re-14 {
        font-family: var(--ftext-regular);
        font-size: var(--stext-12);
        font-weight:var(--fweight-400);
    }
    /*----------------------- Button -----------------------*/
}

/*----------------------------- responsive mobile -----------------------------*/