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

    .width0p,
    .tbWidth-0pct {
        width: 0%
    }

    .width1p,
    .tbWidth-1pct {
        width: 1%
    }

    .width2p,
    .tbWidth-2pct {
        width: 2%
    }

    .width3p,
    .tbWidth-3pct {
        width: 3%
    }

    .width4p,
    .tbWidth-4pct {
        width: 4%
    }

    .width5p,
    .tbWidth-5pct {
        width: 5%
    }

    .width6p,
    .tbWidth-6pct {
        width: 6%
    }

    .width7p,
    .tbWidth-7pct {
        width: 7%
    }

    .width8p,
    .tbWidth-8pct {
        width: 8%
    }

    .width9p,
    .tbWidth-9pct {
        width: 9%
    }

    .width10p,
    .tbWidth-10pct {
        width: 10%
    }

    .width11p,
    .tbWidth-11pct {
        width: 11%
    }

    .width12p,
    .tbWidth-12pct {
        width: 12%
    }

    .width13p,
    .tbWidth-13pct {
        width: 13%
    }

    .width14p,
    .tbWidth-14pct {
        width: 14%
    }

    .width15p,
    .tbWidth-15pct {
        width: 15%
    }

    .width16p,
    .tbWidth-16pct {
        width: 16%
    }

    .width17p,
    .tbWidth-17pct {
        width: 17%
    }

    .width18p,
    .tbWidth-18pct {
        width: 18%
    }

    .width19p,
    .tbWidth-19pct {
        width: 19%
    }

    .width20p,
    .tbWidth-20pct {
        width: 20%
    }

    .width21p,
    .tbWidth-21pct {
        width: 21%
    }

    .width22p,
    .tbWidth-22pct {
        width: 22%
    }

    .width23p,
    .tbWidth-23pct {
        width: 23%
    }

    .width24p,
    .tbWidth-24pct {
        width: 24%
    }

    .width25p,
    .tbWidth-25pct {
        width: 25%
    }

    .width26p,
    .tbWidth-26pct {
        width: 26%
    }

    .width27p,
    .tbWidth-27pct {
        width: 27%
    }

    .width28p,
    .tbWidth-28pct {
        width: 28%
    }

    .width29p,
    .tbWidth-29pct {
        width: 29%
    }

    .width30p,
    .tbWidth-30pct {
        width: 30%
    }

    .width31p,
    .tbWidth-31pct {
        width: 31%
    }

    .width32p,
    .tbWidth-32pct {
        width: 32%
    }

    .width33p,
    .tbWidth-33pct {
        width: 33%
    }

    .width34p,
    .tbWidth-34pct {
        width: 34%
    }

    .width35p,
    .tbWidth-35pct {
        width: 35%
    }

    .width36p,
    .tbWidth-36pct {
        width: 36%
    }

    .width37p,
    .tbWidth-37pct {
        width: 37%
    }

    .width38p,
    .tbWidth-38pct {
        width: 38%
    }

    .width39p,
    .tbWidth-39pct {
        width: 39%
    }

    .width40p,
    .tbWidth-40pct {
        width: 40%
    }

    .width41p,
    .tbWidth-41pct {
        width: 41%
    }

    .width42p,
    .tbWidth-42pct {
        width: 42%
    }

    .width43p,
    .tbWidth-43pct {
        width: 43%
    }

    .width44p,
    .tbWidth-44pct {
        width: 44%
    }

    .width45p,
    .tbWidth-45pct {
        width: 45%
    }

    .width46p,
    .tbWidth-46pct {
        width: 46%
    }

    .width47p,
    .tbWidth-47pct {
        width: 47%
    }

    .width48p,
    .tbWidth-48pct {
        width: 48%
    }

    .width49p,
    .tbWidth-49pct {
        width: 49%
    }

    .width50p,
    .tbWidth-50pct {
        width: 50%
    }

    .width51p,
    .tbWidth-51pct {
        width: 51%
    }

    .width52p,
    .tbWidth-52pct {
        width: 52%
    }

    .width53p,
    .tbWidth-53pct {
        width: 53%
    }

    .width54p,
    .tbWidth-54pct {
        width: 54%
    }

    .width55p,
    .tbWidth-55pct {
        width: 55%
    }

    .width56p,
    .tbWidth-56pct {
        width: 56%
    }

    .width57p,
    .tbWidth-57pct {
        width: 57%
    }

    .width58p,
    .tbWidth-58pct {
        width: 58%
    }

    .width59p,
    .tbWidth-59pct {
        width: 59%
    }

    .width60p,
    .tbWidth-60pct {
        width: 60%
    }

    .width61p,
    .tbWidth-61pct {
        width: 61%
    }

    .width62p,
    .tbWidth-62pct {
        width: 62%
    }

    .width63p,
    .tbWidth-63pct {
        width: 63%
    }

    .width64p,
    .tbWidth-64pct {
        width: 64%
    }

    .width65p,
    .tbWidth-65pct {
        width: 65%
    }

    .width66p,
    .tbWidth-66pct {
        width: 66%
    }

    .width67p,
    .tbWidth-67pct {
        width: 67%
    }

    .width68p,
    .tbWidth-68pct {
        width: 68%
    }

    .width69p,
    .tbWidth-69pct {
        width: 69%
    }

    .width70p,
    .tbWidth-70pct {
        width: 70%
    }

    .width71p,
    .tbWidth-71pct {
        width: 71%
    }

    .width72p,
    .tbWidth-72pct {
        width: 72%
    }

    .width73p,
    .tbWidth-73pct {
        width: 73%
    }

    .width74p,
    .tbWidth-74pct {
        width: 74%
    }

    .width75p,
    .tbWidth-75pct {
        width: 75%
    }

    .width76p,
    .tbWidth-76pct {
        width: 76%
    }

    .width77p,
    .tbWidth-77pct {
        width: 77%
    }

    .width78p,
    .tbWidth-78pct {
        width: 78%
    }

    .width79p,
    .tbWidth-79pct {
        width: 79%
    }

    .width80p,
    .tbWidth-80pct {
        width: 80%
    }

    .width81p,
    .tbWidth-81pct {
        width: 81%
    }

    .width82p,
    .tbWidth-82pct {
        width: 82%
    }

    .width83p,
    .tbWidth-83pct {
        width: 83%
    }

    .width84p,
    .tbWidth-84pct {
        width: 84%
    }

    .width85p,
    .tbWidth-85pct {
        width: 85%
    }

    .width86p,
    .tbWidth-86pct {
        width: 86%
    }

    .width87p,
    .tbWidth-87pct {
        width: 87%
    }

    .width88p,
    .tbWidth-88pct {
        width: 88%
    }

    .width89p,
    .tbWidth-89pct {
        width: 89%
    }

    .width90p,
    .tbWidth-90pct {
        width: 90%
    }

    .width91p,
    .tbWidth-91pct {
        width: 91%
    }

    .width92p,
    .tbWidth-92pct {
        width: 92%
    }

    .width93p,
    .tbWidth-93pct {
        width: 93%
    }

    .width94p,
    .tbWidth-94pct {
        width: 94%
    }

    .width95p,
    .tbWidth-95pct {
        width: 95%
    }

    .width96p,
    .tbWidth-96pct {
        width: 96%
    }

    .width97p,
    .tbWidth-97pct {
        width: 97%
    }

    .width98p,
    .tbWidth-98pct {
        width: 98%
    }

    .width99p,
    .tbWidth-99pct {
        width: 99%
    }

    .width100p,
    .tbWidth-100pct {
        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;
    }

    /* === for editor start  === */

    .alignleft {
        text-align: left
    }

    .alignright {
        text-align: right
    }

    .aligncenter {
        text-align: center
    }

    .alignjustify {
        text-align: justify
    }

    .styleunderline {
        text-decoration: underline
    }

    .stylebold {
        font-weight: 700
    }

    .styleitalic {
        font-style: italic
    }

    .font-size-8px {
        font-size: 8px
    }

    .font-size-10px {
        font-size: 10px;
    }

    .font-size-12px {
        font-size: 12px
    }

    .font-size-14px {
        font-size: 14px
    }

    .font-size-16px {
        font-size: 16px
    }

    .font-size-18px {
        font-size: 18px
    }

    .font-size-22px {
        font-size: 22px
    }

    .font-size-24px {
        font-size: 24px
    }

    .font-size-36px {
        font-size: 36px
    }

    .font-family-andale_mono {
        font-family: "andale mono", monospace
    }

    .font-family-arial {
        font-family: arial, helvetica, sans-serif
    }

    .font-family-arial_black {
        font-family: "arial black", sans-serif
    }

    .font-family-book_antiqua {
        font-family: "book antiqua", palatino, serif
    }

    .font-family-comic_sans_ms {
        font-family: "comic sans ms", sans-serif
    }

    .font-family-courier_new {
        font-family: "courier new", courier, monospace
    }

    .font-family-georgia {
        font-family: georgia, palatino, serif
    }

    .font-family-helvetica {
        font-family: helvetica, arial, sans-serif
    }

    .font-family-impact,
    .font-family-symbol {
        font-family: impact, sans-serif
    }

    .font-family-tahoma {
        font-family: tahoma, arial, helvetica, sans-serif
    }

    .font-family-terminal {
        font-family: terminal, monaco, monospace
    }

    .font-family-times_new_roman {
        font-family: "times new roman", times, serif
    }

    .font-family-trebuchet_ms {
        font-family: "trebuchet ms", geneva, sans-serif
    }

    .font-family-verdana {
        font-family: verdana, geneva, sans-serif
    }

    .font-family-webdings {
        font-family: webdings
    }

    .font-family-wingdings {
        font-family: wingdings, "zapf dingbats"
    }


    table[class^=tbWidth-] {
        table-layout: fixed;
    }

    .tbHeight-auto {
        height: auto
    }

    .tbHeight-30px {
        height: 30px
    }


    .tbHeight-50px {
        height: 50px
    }

    .tbHeight-100px {
        height: 100px
    }

    .tbHeight-150px {
        height: 150px
    }

    .tbHeight-200px {
        height: 200px
    }

    .tbHeight-250px {
        height: 250px
    }

    .tbHeight-300px {
        height: 300px
    }

    .tbHeight-350px {
        height: 350px
    }

    .tbHeight-400px {
        height: 400px
    }

    .tbHeight-450px {
        height: 450px
    }

    .tbHeight-500px {
        height: 500px
    }

    :where(.table_wrapper1, .table_wrapper2):has(.tbWidth-100px) {
        width: min(100px, 100%);
    }

    :where(.table_wrapper1, .table_wrapper2):has(.tbWidth-200px) {
        width: min(200px, 100%);
    }

    :where(.table_wrapper1, .table_wrapper2):has(.tbWidth-300px) {
        width: min(300px, 100%);
    }

    :where(.table_wrapper1, .table_wrapper2):has(.tbWidth-500px) {
        width: min(500px, 100%);
    }

    :where(.table_wrapper1, .table_wrapper2):has(.tbWidth-1000px) {
        width: min(1000px, 100%);
    }

    :where(.table_wrapper1, .table_wrapper2):has(.tbWidth-1500px) {
        width: min(1500px, 100%);
    }

    [data-color="#BFEDD2"] {
        color: #bfedd2
    }

    [data-color="#FBEEB8"] {
        color: #fbeeb8
    }

    [data-color="#F8CAC6"] {
        color: #f8cac6
    }

    [data-color="#ECCAFA"] {
        color: #eccafa
    }

    [data-color="#C2E0F4"] {
        color: #c2e0f4
    }

    [data-color="#2DC26B"] {
        color: #2dc26b
    }

    [data-color="#F1C40F"] {
        color: #f1c40f
    }

    [data-color="#E03E2D"] {
        color: #e03e2d
    }

    [data-color="#B96AD9"] {
        color: #b96ad9
    }

    [data-color="#3598DB"] {
        color: #3598db
    }

    [data-color="#169179"] {
        color: #169179
    }

    [data-color="#E67E23"] {
        color: #e67e23
    }

    [data-color="#BA372A"] {
        color: #ba372a
    }

    [data-color="#843FA1"] {
        color: #843fa1
    }

    [data-color="#236FA1"] {
        color: #236fa1
    }

    [data-color="#ECF0F1"] {
        color: #ecf0f1
    }

    [data-color="#CED4D9"] {
        color: #ced4d9
    }

    [data-color="#95A5A6"] {
        color: #95a5a6
    }

    [data-color="#7E8C8D"] {
        color: #7e8c8d
    }

    [data-color="#34495E"] {
        color: #34495e
    }

    [data-color="#000000"] {
        color: #000
    }

    [data-color="#ffffff"] {
        color: #fff
    }

    [data-bgcolor="#BFEDD2"] {
        background-color: #bfedd2
    }

    [data-bgcolor="#FBEEB8"] {
        background-color: #fbeeb8
    }

    [data-bgcolor="#F8CAC6"] {
        background-color: #f8cac6
    }

    [data-bgcolor="#ECCAFA"] {
        background-color: #eccafa
    }

    [data-bgcolor="#C2E0F4"] {
        background-color: #c2e0f4
    }

    [data-bgcolor="#2DC26B"] {
        background-color: #2dc26b
    }

    [data-bgcolor="#F1C40F"] {
        background-color: #f1c40f
    }

    [data-bgcolor="#E03E2D"] {
        background-color: #e03e2d
    }

    [data-bgcolor="#B96AD9"] {
        background-color: #b96ad9
    }

    [data-bgcolor="#3598DB"] {
        background-color: #3598db
    }

    [data-bgcolor="#169179"] {
        background-color: #169179
    }

    [data-bgcolor="#E67E23"] {
        background-color: #e67e23
    }

    [data-bgcolor="#BA372A"] {
        background-color: #ba372a
    }

    [data-bgcolor="#843FA1"] {
        background-color: #843fa1
    }

    [data-bgcolor="#236FA1"] {
        background-color: #236fa1
    }

    [data-bgcolor="#ECF0F1"] {
        background-color: #ecf0f1
    }

    [data-bgcolor="#CED4D9"] {
        background-color: #ced4d9
    }

    [data-bgcolor="#95A5A6"] {
        background-color: #95a5a6
    }

    [data-bgcolor="#7E8C8D"] {
        background-color: #7e8c8d
    }

    [data-bgcolor="#34495E"] {
        background-color: #34495e
    }

    [data-bgcolor="#000000"] {
        background-color: #000
    }

    [data-bgcolor="#ffffff"],
    [data-bgcolor="#FFFFFF"] {
        background-color: #fff
    }

    .tableCenter{
        margin-left: auto;
        margin-right: auto;
    }

    .tableRight{
        margin-left: auto;
    }

    table.tbBorder-1,
    table.tbBorder-1>thead>tr>th,
    table.tbBorder-1>tr>th,
    table.tbBorder-1>tbody>tr>th,
    table.tbBorder-1>tbody>tr>td,
    table.tbBorder-1>tr>td {
        border: 1px solid var(--main_table_border_color, #d4d4d4) !important;
    }

    table.tbBorder-2,
    table.tbBorder-2>thead>tr>th,
    table.tbBorder-2>tr>th,
    table.tbBorder-2>tbody>tr>th,
    table.tbBorder-2>tbody>tr>td,
    table.tbBorder-2>tr>td {
        border: 2px solid var(--main_table_border_color, #d4d4d4) !important;
    }

    table.tbBorder-3,
    table.tbBorder-3>thead>tr>th,
    table.tbBorder-3>tr>th,
    table.tbBorder-3>tbody>tr>th,
    table.tbBorder-3>tbody>tr>td,
    table.tbBorder-3>tr>td {
        border: 3px solid var(--main_table_border_color, #d4d4d4) !important;
    }

    table.tbBorder-4,
    table.tbBorder-4>thead>tr>th,
    table.tbBorder-4>tr>th,
    table.tbBorder-4>tbody>tr>th,
    table.tbBorder-4>tbody>tr>td,
    table.tbBorder-4>tr>td {
        border: 4px solid var(--main_table_border_color, #d4d4d4) !important;
    }

    table.tbBorder-5,
    table.tbBorder-5>thead>tr>th,
    table.tbBorder-5>tr>th,
    table.tbBorder-5>tbody>tr>th,
    table.tbBorder-5>tbody>tr>td,
    table.tbBorder-5>tr>td {
        border: 5px solid var(--main_table_border_color, #d4d4d4) !important;
    }

    table.tbWidth-10pct[class*="tbBorder-"] {
        width: 10%;
    }

    table.tbWidth-20pct[class*="tbBorder-"] {
        width: 20%;
    }

    table.tbWidth-30pct[class*="tbBorder-"] {
        width: 30%;
    }

    table.tbWidth-40pct[class*="tbBorder-"] {
        width: 40%;
    }

    table.tbWidth-50pct[class*="tbBorder-"] {
        width: 50%;
    }

    table.tbWidth-60pct[class*="tbBorder-"] {
        width: 60%;
    }

    table.tbWidth-70pct[class*="tbBorder-"] {
        width: 70%;
    }

    table.tbWidth-80pct[class*="tbBorder-"] {
        width: 80%;
    }

    table.tbWidth-90pct[class*="tbBorder-"] {
        width: 90%;
    }

    table.tbWidth-100pct[class*="tbBorder-"] {
        width: 100%;
    }


    /* === for editor end  === */
}