/*------------------------------------------------------------------
[Table of contents]
1. Color
2. Font
3. Gutter
4. Border
5. Shadow
6. Customized
------------------------------------------------------------------*/

/*---------------------------------
1. Color
---------------------------------*/

:root {
    --c-color-01:#e38ce0; 
    --c-color-02:#f0cd59;   
    
    --c-bg-01:rgb(201,201,201); background: linear-gradient(0deg, rgba(201,201,201,1) 0%, rgba(240,240,240,1) 100%);
    --c-bg-02:#f0cd59;
}

.color-01 {
    color: var(--c-color-01);
}
.color-02 {
    color: var(--c-color-02);
}

.modal-backdrop.show {
   background-color: black;
   opacity: 0.8;
}

html.bg-dark {
    background: rgb(25 32 57);
    background: linear-gradient(0deg, rgb(28 35 63) 0%, rgb(28 35 63) 100%);
}

html {
    font-family:'Work Sans' ,'thongterm';
    background: var(--c-bg-01);
}

b, strong {
    font-weight: 600;
}
a.icon-blue:hover {
    color:var(--c-blue);
}
.icon-blue,.icon-hover-blue a:hover,.icon-hover-blue .active>a {
    color:var(--c-blue);
}
a.icon-green:hover {
    color:var(--c-green);
}
.icon-green,.icon-hover-green a:hover,.icon-hover-green .active>a {
    color:var(--c-green);
}
a.icon-yellow:hover {
    color:var(--c-yellow);
}
.icon-yellow,.icon-hover-yellow a:hover,.icon-hover-yellow .active>a {
    color:var(--c-yellow);
}
a.icon-orange:hover {
    color:var(--c-orange);
}
.icon-orange,.icon-hover-orange a:hover,.icon-hover-orange .active>a {
    color:var(--c-orange);
}
a.icon-purple:hover {
    color:var(--c-purple);
}
.icon-purple,.icon-hover-purple a:hover,.icon-hover-purple .active>a {
    color:var(--c-purple);
}
a.icon-black-gray:hover {
    color:var(--c-black-gray);
}
.icon-black-gray,.icon-hover-black-gray a:hover,.icon-hover-black-gray .active>a {
    color: var(--c-black-gray);
}
.bg-dark .icon-black-gray,.icon-hover-black-gray a:hover,.icon-hover-black-gray .active>a {
    color: var(--white);
}
a.icon-prime:hover {
    color:var(--c-primary);
}
.icon-prime,.icon-hover-prime a:hover,.icon-hover-prime .active>a {
    color: var(--c-primary);
}


/*---------------------------------
2. Font
---------------------------------*/


body {
    color:var(--c-black-gray);
    font-family:'Work Sans' ,'thongterm';
}

html:lang(th) body {
    font-family:'Work Sans' ,'thongterm';
}
html:lang(en) body {
    font-family:'Work Sans' ,'thongterm';
}
:lang(th) h1,:lang(th) h2,:lang(th) h3,:lang(th) h4,:lang(th) h5,:lang(th) h6,:lang(th) .h1,:lang(th) .h2,:lang(th) .h3,:lang(th) .h4,:lang(th) .h5,:lang(th) .h6,:lang(en) a {
    font-family:'Work Sans' ,'thongterm';
    font-weight:500;
    line-height: 1.5;
    margin-bottom:0;
}
:lang(en) h1,:lang(en) h2,:lang(en) h3,:lang(en) h4,:lang(en) h5,:lang(en) h6,:lang(en) .h1,:lang(en) .h2,:lang(en) .h3,:lang(en) .h4,:lang(en) .h5,:lang(en) .h6,:lang(en) li>a {
    font-family:'Work Sans' ,'thongterm';
    font-weight:500;
}

h1,h2,h3,h4,h5,h6,p,.h1,.h2,.h3,.h4,.h5,.h6 {
    font-family:'Work Sans' ,'thongterm';
}

h1 {
    font-size:1.6rem;
} 
h2 {
    font-size:1.2rem;
} 
h1 .h1 {
    font-size:1.6rem;
}

form {
    font-family:'Work Sans' ,'thongterm';
}

table {
    font-family:'Work Sans' ,'thongterm';
}

.dropdown svg {
    width: 16px;
}

.dropdown .nav-link svg {
    width: 24px;
}

/*---------------------------------
3. Gutter
---------------------------------*/


.invisible.edit-mode {
    visibility: visible!important;
    width: 20px;
    color: var(--c-dark-gray) !important;
}
.l-h-normal {
    line-height:normal;
}
.m-section {
    margin:var(--std-section-margin);
}
.mt-section,.my-section {
    margin-top:var(--std-section-margin);
}
.mr-section,.mx-section {
    margin-right:var(--std-section-margin);
}
.mb-section,.my-section {
    margin-bottom:var(--std-section-margin);
}
.ml-section,.mx-section {
    margin-left:var(--std-section-margin);
}
.m-sub-section {
    margin:var(--std-sub-section-margin);
}
.mt-sub-section,.my-sub-section {
    margin-top:var(--std-sub-section-margin);
}
.mr-sub-section,.mx-sub-section {
    margin-right:var(--std-sub-section-margin);
}
.mb-sub-section,.my-sub-section {
    margin-bottom:var(--std-sub-section-margin);
}
.ml-sub-section,.mx-sub-section {
    margin-left: var(--std-sub-section-margin);
}
.modal-title {
    margin-bottom: 10px;
}

/*---------------------------------
4. Border
---------------------------------*/

/*---------------------------------
5. Shadow
---------------------------------*/

/*---------------------------------
6. Customized
---------------------------------*/