/* import font */
/*
@import url(/lib/font/Kanit/kanit.css);
@import url(/lib/font/Sarabun/sarabun.css);
@import url(./green-theme/tokens.css);
@import url(./green-theme/theme.light.css);
@import url(./green-theme/colors.module.css);
@import url(./green-theme/typography.module.css); */
/* @import url(theme.light.css) (prefers-color-scheme: light); */



@import url(/lib/font/Kanit/kanit.css);
@import url(/lib/font/Sarabun/sarabun.css);
@import url(./blue-theme/tokens.css);
@import url(./blue-theme/theme.light.css);
@import url(./blue-theme/colors.module.css);
@import url(./blue-theme/typography.module.css);

body, table, a {
    font-family: Kanit, Helvetica, sans-serif;
    font-style: normal;
    font-weight: normal;
    font-size: 18px;
    letter-spacing: 0.5px;
    color: #484848;
}
/*** 
 *
 * Others style
 ***/

 /* navbar & nav-link */

 /*
 a.nav-link {
    color: var(--color-on-primary-container);
}

a.nav-link:hover, a.nav-link:visited, a.nav-link:active  {
    color: var(--color-tertiary);
}
*/
a {
    color: var(--color-primary);
}

a:hover, a:active {
    color: var(--color-tertiary);
}

.navbar .navbar-nav a.nav-link {
color: var(--color-primary);
}

.navbar .navbar-nav a.nav-link:hover {
    color: var(--color-tertiary);
}

.navbar .navbar-nav a.nav-link.active, .navbar .navbar-nav a.nav-link:active {
    color: var(--color-tertiary);
}




 /* button */
.btn-default {
    background-color: var(--color-primary);
    border-radius: 20px;
    color: var(--color-on-primary);
}

/* Override bootstrap button */
.btn-secondary {
    background-color: var(--color-secondary);
    border-radius: 20px;
    color: var(--color-on-secondary);
}

.btn-tertiary {
    background-color: var(--color-tertiary) !important;
    border-radius: 20px !important;
    color: var(--color-on-tertiary) !important;
}

.btn-rounded {
    border-color: var(--color-primary);
    border-width: 2px;
    border-radius: 40px;
}

.btn-circle {
    width: 40px;
    height: 40px;
    /* border-color: var(--color-primary); */
    border-width: 2px;
    border-radius: 50%;
}
.btn-shadow {
    box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);
}

.btn-default:hover {
    background-color: var(--color-primary-container);
    color: var(--color-on-primary-container);
}

.btn-secondary:hover {
    background-color: var(--color-secondary-container);
    color: var(--color-on-secondary-container);
}

.btn-tertiary:hover {
    background-color: var(--color-tertiary-container) !important;
    color: var(--color-on-tertiary-container) !important;
}

.btn-rounded:hover, .btn-circle:hover {
    background-color: var(--color-primary);
    color: var(--color-on-primary);
}

/* horizontal rule */
hr.hr-primary {
    border: 0;
    height: 1px;
    background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 105, 109, 0.75), rgba(0, 0, 0, 0));
}

hr.hr-secondary {
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(74, 99, 100, 0.75), rgba(0, 0, 0, 0));
}

hr.hr-tertiary {
    border: 0;
    height: 1px;
    background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(78, 95, 125, 0.75), rgba(0, 0, 0, 0));
}

.hr-title {
    line-height: 1em;
    position: relative;
    outline: 0;
    border: 0;
    color: #00696d; /* black; */
    text-align: center;
    height: 1.5em;
    opacity: 1; /* 0.5; */
}
.hr-title:before {
    content: "";
    background: linear-gradient(to right, transparent, #00696d, transparent);
    position: absolute;
    left: 0;
    top: 70%;
    width: 100%;
    height: 1px;
}
.hr-title:after {
    content: attr(data-content);
    position: relative;
    display: inline-block;
    /* color: black; */
    padding: 0 0.5em;
    /* line-height: 0.5em; */
    color: #00696d; /* #818078; */
    background-color: #fcfcfa;

    /* font-family: normal; */
    font-weight: 400px;
    font-size: 28px;
    line-height: 32px; /* 18px; /* 36px;*/
    letter-spacing: 0px;
}