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

    .word_break_all {
        word-break: break-all;
    }

    .nowrap,
    .noWrap {
        white-space: nowrap;
    }
}