@import url('https://fonts.googleapis.com/css?family=Fjalla+One');
@import url('https://fonts.googleapis.com/css?family=Kanit');
@import url('https://fonts.googleapis.com/css?family=Sarabun');


.sarabun {
    font-weight: normal;
    font-family: 'Sarabun', sans-serif;
}

.athelas {
    font-family: 'Athelas Regular';
    font-weight: normal;
}

/* TEXT WEIGHT */
.text-bold{
    font-weight: 800;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Sarabun', sans-serif;
}

.site-title {
    font-size: 2rem;

}

.bg-blue {
    background-color: #0e68b1;
}

.text-blue {
    color: #0e68b1;
}

.text-blue-dark {
    color: #31328a;
}

.bg-light-green {
    background-color: #8dc63f;
}

.bg-dark-green {
    background-color: #005e20;
}

.text-green {
    color: #8dc53f;
}

.text-dark-green {
    color: #005e20;
}

.bg-black {
    background-color: #000000;
}

.bg-gray {
    background-color: #f6f6f6;
}

.bg-transparent {
    background-color: transparent;
}


.green-circle {
    background-color: #8dc63f;
    color: #ffffff;
    border-radius: 50%;
    text-align: center;
    vertical-align: middle;
    line-height: 85px !important;
    width: 85px;
    height: 85px;

}

.custom-style-card {
    border: none !important;
    border-radius: 0rem !important;
}

.text-fja {
    font-family: 'Fjalla One', sans-serif;
    letter-spacing: 0.05rem;
    font-size: 1.25rem;
}

.pts-16 {
    font-size: 1.33rem;
}

.navbar-expand-lg .navbar-nav .dropdown-menu {
    border-radius: 0;
}

.dropdown-item:hover {
    background-color: #000 !important;
    color:#8DC63F !important;
}

.dropdown-item:first-child {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.navbar-dark .navbar-nav .nav-link {
    color: rgb(255, 255, 255);
}

.top-banner {
    width: 100%;
    padding-left: 0;
    padding-right: 0;
    margin-left: auto;
    margin-right: auto;

}

.content {
    background-color: #f6f6f6;
    margin-top: -27px;
    min-height: 220px;
}

.txt-title {
    padding-top: 15px;
    font-weight: bold;
    font-family: 'Sarabun', sans-serif;
}

.txt-box {
    font-family: 'Sarabun', sans-serif;
    padding-top: 20px;
}

.txt-input{
    border-radius: 0px;
    background-color: #CBCBCB;
}
.txt-input:focus
{
    border-color: white;
    box-shadow: #cacaca;
    border-radius: 0px;
    background-color: #CBCBCB;
}

.img-box {
    margin: auto;
    width: 100%;
    padding: 10px;
    margin-top: auto;
    margin-bottom: auto;
    margin-left: auto;
    margin-right: auto;
    display: block;
}


@media (min-width: 576px) {
    .img-box {
        margin-top: 0;
    }

}

@media (min-width: 768px) {
    .img-box {
        margin-top: 0;
    }
}

@media (min-width: 992px) {
    .img-box {
        margin-top: 40px;
    }
}

@media (min-width: 1200px) {
    .img-box {
        margin-top: 50px;
    }
}

.bg-blue-img {
    background-image: url("/img/bg-01.jpg");
    width: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

}

.bt-primary {
    color: #FFFFFF;
    border: 1px solid #2484ef;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
    font-size: 12px;
    font-family: 'Sarabun', sans-serif;
    padding: 10px 10px 10px 10px;
    text-decoration: none;
    display: inline-block;
    text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.3);
    font-weight: bold;
    color: #FFFFFF;
    background-color: #58A1F3;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#58A1F3), to(#1f6bc1));
    background-image: -webkit-linear-gradient(top, #58A1F3, #1f6bc1);
    background-image: -moz-linear-gradient(top, #58A1F3, #1f6bc1);
    background-image: -ms-linear-gradient(top, #58A1F3, #1f6bc1);
    background-image: -o-linear-gradient(top, #58A1F3, #1f6bc1);
    background-image: linear-gradient(to bottom, #58A1F3, #1f6bc1);
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#58A1F3, endColorstr=#1f6bc1);
}

.bt-primary:hover {
    color: #FFFFFF;
    border: 1px solid #0f6dd6;
    background-color: #2886f0;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#2886f0), to(#185395));
    background-image: -webkit-linear-gradient(top, #2886f0, #185395);
    background-image: -moz-linear-gradient(top, #2886f0, #185395);
    background-image: -ms-linear-gradient(top, #2886f0, #185395);
    background-image: -o-linear-gradient(top, #2886f0, #185395);
    background-image: linear-gradient(to bottom, #2886f0, #185395);
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#2886f0, endColorstr=#185395);
}

.bt-default {
    color: #005E20;
    border: 1px solid #e1e1e1;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
    font-size: 12px;
    font-family: 'Sarabun', sans-serif;
    padding: 10px 10px 10px 10px;
    text-decoration: none;
    display: inline-block;
    text-shadow: 0px 0px 0 rgba(0, 0, 0, 0.3);
    font-weight: bold;
    color: #005E20;
    background-color: #FDFDFD;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#FDFDFD), to(#ACACAC));
    background-image: -webkit-linear-gradient(top, #FDFDFD, #ACACAC);
    background-image: -moz-linear-gradient(top, #FDFDFD, #ACACAC);
    background-image: -ms-linear-gradient(top, #FDFDFD, #ACACAC);
    background-image: -o-linear-gradient(top, #FDFDFD, #ACACAC);
    background-image: linear-gradient(to bottom, #FDFDFD, #ACACAC);
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#FDFDFD, endColorstr=#ACACAC);
}

.bt-default:hover {
    color: #005E20;
    border: 1px solid #cacaca;
    background-color: #CBCBCB;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#CBCBCB), to(#939393));
    background-image: -webkit-linear-gradient(top, #CBCBCB, #939393);
    background-image: -moz-linear-gradient(top, #CBCBCB, #939393);
    background-image: -ms-linear-gradient(top, #CBCBCB, #939393);
    background-image: -o-linear-gradient(top, #CBCBCB, #939393);
    background-image: linear-gradient(to bottom, #CBCBCB, #939393);
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#CBCBCB, endColorstr=#939393);
}

.bt-default-blue {
    color: #0e68b1;
    border: 1px solid #e1e1e1;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
    font-size: 12px;
    font-family: 'Sarabun', sans-serif;
    padding: 10px 10px 10px 10px;
    text-decoration: none;
    display: inline-block;
    text-shadow: 0px 0px 0 rgba(0, 0, 0, 0.3);
    font-weight: bold;
    color: #0e68b1;
    background-color: #FDFDFD;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#FDFDFD), to(#ACACAC));
    background-image: -webkit-linear-gradient(top, #FDFDFD, #ACACAC);
    background-image: -moz-linear-gradient(top, #FDFDFD, #ACACAC);
    background-image: -ms-linear-gradient(top, #FDFDFD, #ACACAC);
    background-image: -o-linear-gradient(top, #FDFDFD, #ACACAC);
    background-image: linear-gradient(to bottom, #FDFDFD, #ACACAC);
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#FDFDFD, endColorstr=#ACACAC);
}

.bt-default-blue:hover {
    color: #0e68b1;
    border: 1px solid #cacaca;
    background-color: #CBCBCB;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#CBCBCB), to(#939393));
    background-image: -webkit-linear-gradient(top, #CBCBCB, #939393);
    background-image: -moz-linear-gradient(top, #CBCBCB, #939393);
    background-image: -ms-linear-gradient(top, #CBCBCB, #939393);
    background-image: -o-linear-gradient(top, #CBCBCB, #939393);
    background-image: linear-gradient(to bottom, #CBCBCB, #939393);
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#CBCBCB, endColorstr=#939393);
}


/* User menu class */
.user-menu{
    background-color: #464646;
    height: 90px;
    padding-bottom: 10px;
}
.user-submenu{
    margin-bottom: 0;
    margin-right: 14px;
    font-weight: normal;
    font-family: 'Sarabun', sans-serif;
    color:white;
}
.user-submenu:hover{
    
    text-decoration: none;
    font-weight: normal;
    font-family: 'Sarabun', sans-serif;
    color:#91C443;
}
/* user menu */
.page-title{
    color:#0e68b1;    
    font-weight: bold;
    font-family: 'Sarabun', sans-serif;
    padding-top: 30px;
    padding-left: 30px;
}
.page-breadcrumb{
    font-size: 17px;
    font-weight: normal;
    font-family: 'Sarabun', sans-serif;
    padding-left: 30px;
    padding-bottom: 30px;
}
.cat-icon{
    width: 50px;
    height: 50px;
}
.sub-menu{
    text-align: center;
    font-weight: normal;
    font-family: 'Sarabun', sans-serif;

}
.sub-menu a{
    color: #000000;
    text-decoration: none;

}

.cat-title{
    text-decoration: none;
    color:#0f6dd6;
    font-weight: 800;
    font-family: 'Sarabun', sans-serif;
}
.cat-title:hover{
    text-decoration: none;
    color:#0f6dd6;
    font-weight: 800;
    font-family: 'Sarabun', sans-serif;
}
.cat-thumbnail{
    width: 75px;
    height:75px;
}

.topic-link{
    color:black;
}
.topic-link:hover{
    text-decoration: none;
}


/* post */
.post-title{
    color:#0f6dd6;
    font-size: 1.714em;
    font-weight: 400;
    font-family: 'Sarabun', sans-serif;
    line-height: 120%;
    padding: 27px 0px 9px 0px;
    word-wrap: break-word;
}
/* post */
table > thead{
    font-weight: normal;
    font-family: 'Sarabun', sans-serif;
}
table > tbody{
    font-weight: normal;
    font-family: 'Sarabun', sans-serif;
}


/* social button */
.btn-facebook{
    padding: .25rem .5rem;
    color:#ffffff;
    background-color: #4267B2;
}

.btn-twitter{
    padding: .25rem .5rem;
    color:#ffffff;
    background-color: #1DA1F2;
}

.btn-line{
    padding: .25rem .5rem;
    color:#ffffff;
    background-color:#03C95B ;
    
}

/* overide bootstrap */
.form-control{
    background-color: #f6f6f6;
    border-radius: 0px;
}
.page-link{
    border: 0px solid #dee2e6;
}
.page-link {
    color:#000000;
}
.page-link:hover {
    color:#000000;
}
.page-item.active .page-link {
    text-decoration:underline;
    z-index: 1;
    color: #007bff;
    background-color: #ffffff;
    border-color: none;
}

/* Form style */
.form-section{
    color: #0f6dd6;
    font-weight: bold;
    font-family: 'Sarabun', sans-serif;
}
label{
    font-weight: normal;
    font-family: 'Sarabun', sans-serif;
}

/* topic */
.topic-bottom{
    /* position: absolute; */
    bottom: 0;
    width: 100%;
    padding-bottom: 20px;
}
.topic-author{
    color: #91C443;
    font-weight: normal;
    font-family: 'Sarabun', sans-serif;
}
.topic-comment-title{
    color: #ffffff;
    font-weight: normal;
    font-family: 'Sarabun', sans-serif;
}
.comment-title{
    color: #91C443;
    font-weight: normal;
    font-family: 'Sarabun', sans-serif;
}

.comment-detail{
    /* color: #91C443; */
    padding-top: 20px;
    padding-bottom: 20px;
    font-weight: normal;
    font-family: 'Sarabun', sans-serif;
}
.comment-bottom{
    /* position: absolute; */
    bottom: 0;
    width: 100%;
    padding-bottom: 20px;
}
.comment-user{
    color: #0f6dd6;
    font-weight: normal;
    font-family: 'Sarabun', sans-serif;
}
.box-comment{
    margin-bottom: 20px;
    padding: 25px;
    border-radius: 0;
    min-height: 150px; 
    width:100%; 
    background-color: #f6f6f6;
}

.box-reply{
    margin-bottom: 20px;
    padding: 25px;
    border-radius: 0;
    min-height: 300px; 
    width:100%; 
    background-color:#0e68b1;
}

.seminar-link:hover{
    text-decoration: none;
}

.seminar-banner{

    padding-top: 10%;
    padding-bottom: 10%;
    /* margin-top: 9%; */
    /* margin-bottom: 5%; */
}
.seminar-header{
    margin-top: -5%;
    justify-content: center;
    text-align: center;
}

.seminar-poster{
    margin-top: 5%;
    justify-content: center;
    text-align: center;
}
.seminar-title{
    margin-top:4%;
    justify-content: center;
    text-align: center;
}
.seminar-detail{
    padding-top: 5%;
    padding-bottom: 5%;
}
.seminar-ticket{
    padding-bottom: 5%;
}
.seminar-file{
    padding-bottom: 5%;
}
.seminar-register{
    padding-bottom: 5%;
}

.text-white a{ color:#FFF !important;}