/* ========================= ========================= ========================= ========================= ========================= =========================
***
* please make sure all inline css inside @layer inline_style {}
***
* please make sure all inline css inside @layer inline_style {}
* please make sure all inline css inside @layer inline_style {}
* Use CSS @layer
* Use CSS @layer
* Use CSS @layer
***
 ========================= ========================= ========================= ========================= ========================= =========================*/

/* ========================= ========================= ========================= ========================= ========================= =========================
***
* use base.css to reset the browser style and style basic tag, some class cannot be classify also include in base css, color variable also set in base.css for global use
***
* then use @layer plugin to include all plugin related css
* then use @layer components to include all components such as button, modal, card, accordion, etc
* then use @layer layout to put style the layout. @layer layout also include header footer, mobile menu and body area styling
* then use @layer custom to put style for special styling
* then use @layer pages to put style for specific pages. eg index page has index.css with @layer pages
* then use @layer inline_style for inline_style class
* then use @layer media_query to put style for mobile and responsive design
* last use @layer print to put style for print version

* make sure all style is in last least one @layer{write your style} in order to fullfill the layer rules
* make sure all style is in last least one @layer{write your style} in order to fullfill the layer rules
* make sure all style is in last least one @layer{write your style} in order to fullfill the layer rules
* make sure all style is in last least one @layer{write your style} in order to fullfill the layer rules

* dont use px as font size unit in this project because this project uses aaa function so use rem as font size unit!!!!!!!!!!!!!!!!!!!!!!
* dont use px as font size unit in this project because this project uses aaa function so use rem as font size unit!!!!!!!!!!!!!!!!!!!!!!
* dont use px as font size unit in this project because this project uses aaa function so use rem as font size unit!!!!!!!!!!!!!!!!!!!!!!
***
 ========================= ========================= ========================= ========================= ========================= =========================*/

@layer inline_style {
    .display_none {
        display: none;
    }

    .disable {
        display: none;
    }

    .text_left {
        text-align: left;
    }

    .text_center {
        text-align: center;
    }

    .text_right {
        text-align: right;
    }

    .text_justify {
        text-align: justify;
    }

    .red_tag {
        color: #c20000;
    }

    .width1p {
        width: 1%
    }

    .width2p {
        width: 2%
    }

    .width3p {
        width: 3%
    }

    .width4p {
        width: 4%
    }

    .width5p {
        width: 5%
    }

    .width6p {
        width: 6%
    }

    .width7p {
        width: 7%
    }

    .width8p {
        width: 8%
    }

    .width9p {
        width: 9%
    }

    .width10p {
        width: 10%
    }

    .width11p {
        width: 11%
    }

    .width12p {
        width: 12%
    }

    .width13p {
        width: 13%
    }

    .width14p {
        width: 14%
    }

    .width15p {
        width: 15%
    }

    .width16p {
        width: 16%
    }

    .width17p {
        width: 17%
    }

    .width18p {
        width: 18%
    }

    .width19p {
        width: 19%
    }

    .width20p {
        width: 20%
    }

    .width21p {
        width: 21%
    }

    .width22p {
        width: 22%
    }

    .width23p {
        width: 23%
    }

    .width24p {
        width: 24%
    }

    .col_3,
    .width25p {
        width: 25%
    }

    .width26p {
        width: 26%
    }

    .width27p {
        width: 27%
    }

    .width28p {
        width: 28%
    }

    .width29p {
        width: 29%
    }

    .width30p {
        width: 30%
    }

    .width31p {
        width: 31%
    }

    .width32p {
        width: 32%
    }

    .width33p {
        width: 33%
    }

    .width34p {
        width: 34%
    }

    .width35p {
        width: 35%
    }

    .width36p {
        width: 36%
    }

    .width37p {
        width: 37%
    }

    .width38p {
        width: 38%
    }

    .width39p {
        width: 39%
    }

    .width40p {
        width: 40%
    }

    .width41p {
        width: 41%
    }

    .width42p {
        width: 42%
    }

    .width43p {
        width: 43%
    }

    .width44p {
        width: 44%
    }

    .width45p {
        width: 45%
    }

    .width46p {
        width: 46%
    }

    .width47p {
        width: 47%
    }

    .width48p {
        width: 48%
    }

    .width49p {
        width: 49%
    }

    .col_6,
    .width50p {
        width: 50%
    }

    .width51p {
        width: 51%
    }

    .width52p {
        width: 52%
    }

    .width53p {
        width: 53%
    }

    .width54p {
        width: 54%
    }

    .width55p {
        width: 55%
    }

    .width56p {
        width: 56%
    }

    .width57p {
        width: 57%
    }

    .width58p {
        width: 58%
    }

    .width59p {
        width: 59%
    }

    .width60p {
        width: 60%
    }

    .width61p {
        width: 61%
    }

    .width62p {
        width: 62%
    }

    .width63p {
        width: 63%
    }

    .width64p {
        width: 64%
    }

    .width65p {
        width: 65%
    }

    .width66p {
        width: 66%
    }

    .width67p {
        width: 67%
    }

    .width68p {
        width: 68%
    }

    .width69p {
        width: 69%
    }

    .width70p {
        width: 70%
    }

    .width71p {
        width: 71%
    }

    .width72p {
        width: 72%
    }

    .width73p {
        width: 73%
    }

    .width74p {
        width: 74%
    }

    .col_9,
    .width75p {
        width: 75%
    }

    .width76p {
        width: 76%
    }

    .width77p {
        width: 77%
    }

    .width78p {
        width: 78%
    }

    .width79p {
        width: 79%
    }

    .width80p {
        width: 80%
    }

    .width81p {
        width: 81%
    }

    .width82p {
        width: 82%
    }

    .width83p {
        width: 83%
    }

    .width84p {
        width: 84%
    }

    .width85p {
        width: 85%
    }

    .width86p {
        width: 86%
    }

    .width87p {
        width: 87%
    }

    .width88p {
        width: 88%
    }

    .width89p {
        width: 89%
    }

    .width90p {
        width: 90%
    }

    .width91p {
        width: 91%
    }

    .width92p {
        width: 92%
    }

    .width93p {
        width: 93%
    }

    .width94p {
        width: 94%
    }

    .width95p {
        width: 95%
    }

    .width96p {
        width: 96%
    }

    .width97p {
        width: 97%
    }

    .width98p {
        width: 98%
    }

    .width99p {
        width: 99%
    }

    .col_12,
    .width100p {
        width: 100%
    }

    .hidden-item {
        display: none;
    }

    .hide {
        display: none;
    }

    .fontsize_1_23_rem {
        font-size: 1.23rem;
    }

    .fontsize_1_6_rem {
        font-size: 1.6rem;
    }
    .word_break_all{
        word-break: break-all;
    }
}