:root {
    --theme-color1: #826485;
    --theme-color1h: #fbd570;
    --theme-color2: #1c577f;
    --theme-color2h: #d24f3f;
    --theme-color3: #A2FF69;
    --theme-color3h: #8171eb;
    --theme-color4: #1c577f;
    --theme-color4h: #67a8cc;
    --theme-color5: #c2a459;
    --theme-color5h: #8171eb;
    --theme-color6: #e0deec;
    --theme-color6h: #8171eb;
    --theme-color7: #4E2755;
    --theme-color7h: #c2a459;
    --theme-color8: #ffffff;
    --theme-color8h: #8171eb;

    --theme-font1: Kanit;
    --theme-font2: Kanit;
    --theme-font3: Sarabun;

    --theme-bg-footer: #826485;
    --theme-bg-navbar: #ffffff;
    --theme-active-navbar: #fbd570;
    --primary-font: var(--theme-font1);
    --secondary-font: var(--theme-font2);

    --font-menu: var(--theme-font1);
    --font-menu-size: 16px;
    --font-logo-header: 30px;
    --form-invalid: #CE041C;
}
.bgcolor1 { background-color: var(--theme-color1)!important; }
.bgcolor1h { background-color: var(--theme-color1h)!important; }
.bgcolor2 { background-color: var(--theme-color2)!important; }
.bgcolor2h { background-color: var(--theme-color2h)!important; }
.bgcolor3 { background-color: var(--theme-color3)!important; }
.bgcolor3h { background-color: var(--theme-color3h)!important; }
.bgcolor4 { background-color: var(--theme-color4)!important; }
.bgcolor4h { background-color: var(--theme-color4h)!important; }
.bgcolor5 { background-color: var(--theme-color5)!important; }
.bgcolor5h { background-color: var(--theme-color5h)!important; }
.bgcolor6 { background-color: var(--theme-color6)!important; }
.bgcolor6h { background-color: var(--theme-color6h)!important; }
.bgcolor7 { background-color: var(--theme-color7)!important; }
.bgcolor7h { background-color: var(--theme-color7h)!important; }
.bgcolor8 { background-color: var(--theme-color8)!important; }
.bgcolor8h { background-color: var(--theme-color8h)!important; }

.btn-theme1 { background-color: var(--theme-color1)!important; border: solid var(--theme-color1)!important;}
.btn-theme1:hover { background-color: var(--theme-color1h)!important; border: solid var(--theme-color1h)!important;}
.btn-theme2 { background-color: var(--theme-color2)!important; border: solid var(--theme-color2)!important;}
.btn-theme2:hover { background-color: var(--theme-color2h)!important; border: solid var(--theme-color2h)!important;}
.btn-theme3 { background-color: var(--theme-color3)!important; border: solid var(--theme-color3)!important;}
.btn-theme3:hover { background-color: var(--theme-color3h)!important; border: solid var(--theme-color3h)!important;}
.btn-theme4 { background-color: var(--theme-color4)!important; border: solid var(--theme-color4)!important;}
.btn-theme4:hover { background-color: var(--theme-color4h)!important; border: solid var(--theme-color4h)!important;}
.btn-theme5 { background-color: var(--theme-color5)!important; border: solid var(--theme-color5)!important;}
.btn-theme5:hover { background-color: var(--theme-color5h)!important; border: solid var(--theme-color5h)!important;}
.btn-theme6 { background-color: var(--theme-color6)!important; border: solid var(--theme-color6)!important;}
.btn-theme6:hover { background-color: var(--theme-color6h)!important; border: solid var(--theme-color6h)!important;}
.btn-theme7 { background-color: var(--theme-color7)!important; border: solid var(--theme-color7)!important;}
.btn-theme7:hover { background-color: var(--theme-color7h)!important; border: solid var(--theme-color7h)!important;}
.btn-theme8 { background-color: var(--theme-color8)!important; border: solid var(--theme-color8)!important;}
.btn-theme8:hover { background-color: var(--theme-color8h)!important; border: solid var(--theme-color8h)!important;}

.linkColor1 { color: var(--theme-color1)!important; }
.linkColor1:hover { color: var(--theme-color1h)!important; }
.linkColor2 { color: var(--theme-color2)!important; }
.linkColor2:hover { color: var(--theme-color2h)!important; }
.linkColor3 { color: var(--theme-color3)!important; }
.linkColor3:hover { color: var(--theme-color3h)!important; }
.linkColor4 { color: var(--theme-color4)!important; }
.linkColor4:hover { color: var(--theme-color4h)!important; }
.linkColor5 { color: var(--theme-color5)!important; }
.linkColor5:hover { color: var(--theme-color5h)!important; }
.linkColor6 { color: var(--theme-color6)!important; }
.linkColor6:hover { color: var(--theme-color6h)!important; }
.linkColor7 { color: var(--theme-color7)!important; }
.linkColor7:hover { color: var(--theme-color7h)!important; }
.linkColor8 { color: var(--theme-color8)!important; }
.linkColor8:hover { color: var(--theme-color8h)!important; }

.fcolor1 { color: var(--theme-color1)!important; }
.fcolor2 { color: var(--theme-color2)!important; }
.fcolor3 { color: var(--theme-color3)!important; }
.fcolor4 { color: var(--theme-color4)!important; }
.fcolor5 { color: var(--theme-color5)!important; }
.fcolor6 { color: var(--theme-color6)!important; }
.fcolor7 { color: var(--theme-color7)!important; }
.fcolor8 { color: var(--theme-color8)!important; }

.borderColor1 { border: 1px solid var(--theme-color1); }
.borderColor2 { border: 1px solid var(--theme-color2); }
.borderColor3 { border: 1px solid var(--theme-color3); }
.borderColor4 { border: 1px solid var(--theme-color4); }
.borderColor5 { border: 1px solid var(--theme-color5); }
.borderColor6 { border: 1px solid var(--theme-color6); }
.borderColor7 { border: 1px solid var(--theme-color7); }
.borderColor8 { border: 1px solid var(--theme-color8); }

.fsize5 { font-size: 5px!important; }
.fsize6 { font-size: 6px!important; }
.fsize7 { font-size: 7px!important; }
.fsize8 { font-size: 8px!important; }
.fsize9 { font-size: 9px!important; }
.fsize10 { font-size: 10px!important; }
.fsize11 { font-size: 11px!important; }
.fsize12 { font-size: 12px!important; }
.fsize13 { font-size: 13px!important; }
.fsize14 { font-size: 14px!important; }
.fsize15 { font-size: 15px!important; }
.fsize16 { font-size: 16px!important; }
.fsize17 { font-size: 17px!important; }
.fsize18 { font-size: 18px!important; }
.fsize19 { font-size: 19px!important; }
.fsize20 { font-size: 20px!important; }
.fsize21 { font-size: 21px!important; }
.fsize22 { font-size: 22px!important; }
.fsize23 { font-size: 23px!important; }
.fsize24 { font-size: 24px!important; }
.fsize25 { font-size: 25px!important; }
.fsize26 { font-size: 26px!important; }
.fsize27 { font-size: 27px!important; }
.fsize28 { font-size: 28px!important; }
.fsize29 { font-size: 29px!important; }
.fsize30 { font-size: 30px!important; }
.fsize31 { font-size: 31px!important; }
.fsize32 { font-size: 32px!important; }
.fsize33 { font-size: 33px!important; }
.fsize34 { font-size: 34px!important; }
.fsize35 { font-size: 35px!important; }
.fsize36 { font-size: 36px!important; }
.fsize37 { font-size: 37px!important; }
.fsize38 { font-size: 38px!important; }
.fsize39 { font-size: 39px!important; }
.fsize40 { font-size: 40px!important; }
.fsize41 { font-size: 41px!important; }
.fsize42 { font-size: 42px!important; }
.fsize43 { font-size: 43px!important; }
.fsize44 { font-size: 44px!important; }
.fsize45 { font-size: 45px!important; }
.fsize46 { font-size: 46px!important; }
.fsize47 { font-size: 47px!important; }
.fsize48 { font-size: 48px!important; }
.fsize49 { font-size: 49px!important; }
.fsize50 { font-size: 50px!important; }
.fsize51 { font-size: 51px!important; }
.fsize52 { font-size: 52px!important; }
.fsize53 { font-size: 53px!important; }
.fsize54 { font-size: 54px!important; }
.fsize55 { font-size: 55px!important; }
.fsize56 { font-size: 56px!important; }
.fsize57 { font-size: 57px!important; }
.fsize58 { font-size: 58px!important; }
.fsize59 { font-size: 59px!important; }
.fsize60 { font-size: 60px!important; }
.fsize61 { font-size: 61px!important; }
.fsize62 { font-size: 62px!important; }
.fsize63 { font-size: 63px!important; }
.fsize64 { font-size: 64px!important; }
.fsize65 { font-size: 65px!important; }
.fsize66 { font-size: 66px!important; }
.fsize67 { font-size: 67px!important; }
.fsize68 { font-size: 68px!important; }
.fsize69 { font-size: 69px!important; }
.fsize70 { font-size: 70px!important; }
.fsize71 { font-size: 71px!important; }
.fsize72 { font-size: 72px!important; }
.fsize73 { font-size: 73px!important; }
.fsize74 { font-size: 74px!important; }
.fsize75 { font-size: 75px!important; }
.fsize76 { font-size: 76px!important; }
.fsize77 { font-size: 77px!important; }
.fsize78 { font-size: 78px!important; }
.fsize79 { font-size: 79px!important; }
.fsize80 { font-size: 80px!important; }
.fsize81 { font-size: 81px!important; }
.fsize82 { font-size: 82px!important; }
.fsize83 { font-size: 83px!important; }
.fsize84 { font-size: 84px!important; }
.fsize85 { font-size: 85px!important; }
.fsize86 { font-size: 86px!important; }
.fsize87 { font-size: 87px!important; }
.fsize88 { font-size: 88px!important; }
.fsize89 { font-size: 89px!important; }
.fsize90 { font-size: 90px!important; }
.fsize91 { font-size: 91px!important; }
.fsize92 { font-size: 92px!important; }
.fsize93 { font-size: 93px!important; }
.fsize94 { font-size: 94px!important; }
.fsize95 { font-size: 95px!important; }
.fsize96 { font-size: 96px!important; }
.fsize97 { font-size: 97px!important; }
.fsize98 { font-size: 98px!important; }
.fsize99 { font-size: 99px!important; }
.fsize100 { font-size: 100px!important; }


.borderRadius15 {
    border-radius: 1.5em;
    -webkit-border-radius: 1.5em;
    -moz-border-radius: 1.5em;
    overflow: hidden;
    border: 3px solid var(--theme-color7);
    border-spacing:0.25em;
}
.btnRadius30 {
    border-radius: 40px!important;
    -webkit-border-radius: 40px!important;
    -moz-border-radius: 40px!important;
    overflow: hidden;
    border: 3px solid var(--theme-color7)!important;
    background: var(--theme-color7)!important;
    border-spacing:0.25em;
}
.bg-important {
    background-color: rgba(130, 100, 133, 0.4);
}
.timeline-container .the-timeline::after {
    background-color: var(--theme-color7) !important;
    z-index: -1;
}
.timeline-container .timeline-content {
    background-color: var(--theme-color7) !important;
    color: white;
}
.timeline-container .timeline-content h4 {
    color: #A2FF69;
}
.timeline-container .timeline-content p {
    color: white;
}

.timeline-container .timeline-right::before {
    border: medium solid var(--theme-color7)!important;
    border-width: 10px 10px 10px 0!important;
    border-color: transparent var(--theme-color7) transparent transparent!important;
}
.timeline-container .timeline-left::before {
    border: medium solid var(--theme-color7)!important;
    border-width: 10px 0 10px 10px!important;
    border-color: transparent transparent transparent var(--theme-color7) !important;
}