body {
	font-family: 'Kanit', "Roboto", sans-serif;
	font-size: 14px;
	line-height: 1.538462;
	color: #3C3B3B;
}

h1, h2, h3, h4 { margin-bottom: 15px; font-weight: 500; color: #3C3B3B; text-transform: none; }
h1 { font-size: 24px; }
h2 { font-size: 20px; }
h3 { font-size: 18px; }
h4 { font-size: 16px; }
p { color: #3C3B3B; line-height: inherit; }

a:hover { text-decoration: none; }

.line-through { text-decoration: line-through; }

.btn {
	font-size: 14px;
	border: none;
	-webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
	-moz-box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
	box-shadow: 0 2px 2px 0
	rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
}
.btn-success { background-color: #14C729; }
.btn-success:hover, .btn-success.hover { background-color: #14DB2B; }
html .btn-primary { background-color: #0073C2; }
.btn-info { background-color: #83bbe1; }
.btn-info:hover, .btn-info.hover { background-color: #5faadd; }
html .btn-quaternary { background-color: #AFAFAF; }
html .btn-quaternary:hover, html .btn-quaternary.hover { background-color: #bbb; }

.btn.disabled, .btn:disabled { cursor: default; }
html .btn-primary.disabled, html .btn-primary:disabled, html .btn-primary:disabled:active,
.btn-info.disabled, .btn-info:disabled, .btn-info:disabled:active {
	background-color: #bbb !important;

	-webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12) !important;
	-moz-box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12) !important;
	box-shadow: 0 2px 2px 0
	rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12) !important;
}

.progress { background-color: #D9D9D9; }
.progress-bar-success { background-color: #14C729; }
html .progress-bar-primary {  background-color: #0073C2; }

.table td, .table th { padding: 5px 10px; }

.list li { margin-bottom: 0; }

.bg-color-blue { background-color: rgba(0, 115, 194, 0.82); }

.alert { padding: 5px 15px; }

.a_card { color: rgba(112, 112, 112, 0.47); }
.card { border-color: rgba(112, 112, 112, 0.47); }
.card-body { padding: 10px; }
.card-title { font-size: 15px; }
.card-text { font-size: 11px; }

.post-author img { max-width: 100%; max-height: none; }

.modal-footer { justify-content: center; }

.form-control:not(.form-control-sm):not(.form-control-lg) { font-size: 14px; }
.form-control-plaintext { color: inherit; }

.has-error .form-control { border-color: #dc3545; }
.has-error .checkbox, .has-error .checkbox-inline, .has-error .control-label, .has-error .help-block, .has-error .radio, .has-error .radio-inline, .has-error.checkbox label, .has-error.checkbox-inline label, .has-error.radio label, .has-error.radio-inline label { color: #dc3545; }

html .bg-color-primary, html .bg-primary { background-color: #0073C2 !important; }

.has-feedback { position: relative; }
.has-feedback .form-control { padding-right: 42.5px; }
.form-horizontal .has-feedback .form-control-feedback { right: 15px; }
.form-control-feedback {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 2;
	display: block;
	width: 34px;
	height: 34px;
	line-height: 34px;
	text-align: center;
	pointer-events: none;
	color: #7d7d8e;
}

#header .header-top { min-height: 30px; }
#header .header-top.header-top-default { background: #F2F2F2; }
#header .header-nav-top .nav > li > a, #header .header-nav-top .nav > li > span { padding: 0 10px; }
#header .header-nav-main nav > ul > li > a { font-size: 18px; font-weight: normal; }
#header, #header .header-nav-top .nav > li > a, #header .header-nav-top .nav > li > span { color: #292828; font-size: 14px; }
#header .logo_title { padding-left: 10px; }
#header .logo_title .t1 { font-size: 25px; font-weight: 500; color: #0071C5; }
#header .logo_title .t2 { font-size: 19px; font-weight: 400; color: rgba(41, 40, 40, 0.51); }

#footer { background: #006FC8; border: none; color: #fff; padding: 20px 0; }
#footer h4 { font-weight: 500; }
#footer .social { padding: 15px 0; font-size: 24px; }
#footer .copyright { color: #5CA1DD; }

/*===== Vertical Timeline =====*/
  #conference-timeline {
      position: relative;
      max-width: 100%;
      width: 100%;
      margin: 0 auto;
  }

  #conference-timeline .conference-center-line {
      position: absolute;
      width: 3px;
      height: 100%;
      top: 0;
      left: 30%;
      margin-left: -2px;
      background: #DFDFDF;
  }

  #conference-timeline .conference-timeline-content {
      padding-top: 0px;
      padding-bottom: 0px;
  }

  .timeline-article {
      width: 100%;
      height: 100%;
      position: relative;
      overflow: hidden;
      margin: 0 0 25px 0;
  }

  .timeline-article .content-left {
      position: relative;
      width: auto;
      padding: 5px 5px;
      text-align: right;
      left: 0%;
      width: 75px;
  }

  .timeline-article .content-right {
      position: relative;
      width: auto;
      padding: 5px 5px;
      text-align: left;
      right: 13%;
      width: 190px;
  }

  .timeline-article p {
      margin: 0 0 0 0px;
      padding: 0;
      font-weight: 400;
      color: #242424;
      position: relative;
  }

  .timeline-article .content-left-container {
      float: left;
  }

  .timeline-article .content-right-container {
      float: right;
  }

  .timeline-article .meta-date {
      position: absolute;
      top: 0;
      left: 30%;
      width: 62px;
      height: 62px;
      margin-left: -31px;
      color: #fff;
      border-radius: 100%;
  }

  .timeline-article .meta-date .date,
  .timeline-article .meta-date .month {
      display: block;
      text-align: center;
  }

  .timeline-article .meta-date .date {
      /*
      font-size: 20px;
      line-height: 40px;
      color: #B0B0B0;
      background: white;
      padding: 0px 0px;
      margin-top: -4px;
      */
      font-size: 20px;
      line-height: 40px;
      width: 40px;
      color: #B0B0B0;
      background: white;
      padding: 0px 0px;
      margin-top: -4px;
      display: block;

      position: absolute;
      left: 10px;
      z-index: 999;
  }

  .timeline-article .meta-date .month {
      font-size: 18px;
      line-height: 10px;
  }
  /*===== // Vertical Timeline =====*/

.ub_title1 { color: #006FC8; }
.ub_title2 { color: #fff; background: #0073C2; }

.ub_bg1 { background: #F6F6F6; }

.ub_error_msg { font-size: 90%; }

.ub_course_list .card-title { text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap; }
.ub_course_list .card-text { height: 35px; overflow-y: hidden; color: #A09898; margin-bottom: 15px; }
.ub_course_list .card-text2 { font-size: 11px; color: #696969; }

.ub_course_list2 .ub_row { padding: 0 0 25px 0; margin-bottom: 7.5px; border-bottom: solid 1px rgba(0, 0, 0, 0.06); }
.ub_course_list2 .ub_img { float: left; width: 100px; }
.ub_course_list2 .ub_content { margin-left: 110px; }
.ub_course_list2 .ub_name { color: #3C3B3B; line-height: 18px; margin-bottom: 0; }
.ub_course_list2 .ub_detail { font-size: 11px; color: #A09898; margin-bottom: 0; }

.ub_cart .cart_row { padding: 15px 0; border-bottom: solid 1px #eee; }
.ub_cart .cart_img { float: left; width: 150px; }
.ub_cart .cart_price { float: right; }
.ub_cart .cart_content { margin-left: 165px; margin-right: 150px; }
.ub_cart .cart_name { margin-bottom: 0; }
.ub_cart .cart_detail { font-size: 11px; color: #A09898; margin-bottom: 10px; }
.ub_cart .cart_delete { font-size: 11px; color: #676767; }
.ub_cart .cart_footer { padding-top: 15px; }
.ub_cart .cart_total { margin-bottom: 0; }

.ub_payment_list { list-style: none; margin: 0; padding: 0; }
.ub_payment_list > li { border: solid 1px #C7C7C7; border-radius: 10px; padding: 15px; margin-bottom: 15px; cursor: pointer; }
.ub_payment_list > li.active { border-color: #14c729; background: #e2f9e5; }
.ub_payment_list .payment_img { float: right; height: 80px; }
.ub_payment_list .payment_name { margin: 0; padding-top: 15px; }
.ub_payment_list .payment_detail { margin: 0; }

.ub_timeline { list-style: none; margin: 0; padding: 0; }
.ub_timeline > li { position: relative; padding: 10px 10px 10px 50px; border-bottom: solid 1px #e0e5e9; cursor: pointer; }
.ub_timeline > li:hover, .ub_timeline > li.active { background: aliceblue; }
.ub_timeline > li:before { content: ""; position: absolute; top: 0; bottom: 0; left: 30px; width: 1px; background: #e0e5e9; }
.ub_timeline > li:after { content: ""; position: absolute; top: 12px; left: 20px; width: 20px; height: 20px; background: #fff; border-radius: 50%; box-shadow: 0 0 0 2px #fff, 0 0 0 4px #e0e5e9; }
.ub_timeline > li.visited:after { background: #14C729; }

.ub_choice { list-style: none; margin: 0; padding: 0; }
.ub_choice > li {
	border: solid 1px #F7F7F7; border-radius: 5px; padding: 15px 15px 15px 50px; margin-bottom: 15px; cursor: pointer; position: relative;
	-webkit-box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);
	-moz-box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);
	box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);
}
.ub_choice > li.active, .ub_choice > li:hover { background-color: #54E370; border-color: #54E370; }
.ub_choice > li:before { content: ""; position: absolute; top: 15px; left: 15px; width: 24px; height: 24px; border: solid 1px #707070; border-radius: 50%; }
.ub_choice > li.active:before { background-color: #7B7676; }

@media (max-width: 768px) {
	#header .logo_title .t1 { font-size: 16px; }
	#header .logo_title .t2 { font-size: 12px; }
	#header, #header .header-nav-top .nav > li > a, #header .header-nav-top .nav > li > span { font-size: 12px; }

	.ub_cart .cart_content { margin: 0; padding-top: 5px; clear: both; }

	.ub_payment_list .payment_img { width: 120px; height: auto; }
	.ub_payment_list .payment_name { padding-top: 0; }
}





  /*===== Vertical Timeline =====*/

  #conference-timeline {
      position: relative;
      max-width: 100%;
      width: 100%;
      margin: 0 auto;
  }

  #conference-timeline .conference-center-line {
      position: absolute;
      width: 3px;
      height: 100%;
      top: 0;
      left: 30%;
      margin-left: -2px;
      background: #DFDFDF;
      z-index: -1;
  }

  #conference-timeline .conference-timeline-content {
      padding-top: 0px;
      padding-bottom: 0px;
  }

  .timeline-article {
      width: 100%;
      height: 100%;
      position: relative;
      overflow: hidden;
      margin: 25px 0;
  }

  .timeline-article .content-left {
      position: relative;
      width: auto;
      padding: 5px 5px;
      text-align: right;
      left: 0%;
      width: 85px;
  }

  .timeline-article .content-right {
      position: relative;
      width: auto;
      padding: 5px 5px;
      text-align: left;
      right: 13%;
      width: 217px;
      height: 53px;
  }

  .timeline-article p {
      margin: 0 0 0 5px;
      padding: 0;
      font-weight: 400;
      color: #242424;
      font-size: 20px;
      line-height: 24px;
      position: relative;
  }

  .timeline-article .content-left-container {
      float: left;
  }

  .timeline-article .content-right-container {
      float: right;
  }

  .timeline-article .meta-date {
      position: absolute;
      top: 0;
      left: 30%;
      width: 62px;
      height: 62px;
      margin-left: -31px;
      color: #fff;
      border-radius: 100%;
  }

  .timeline-article .meta-date .date,
  .timeline-article .meta-date .month {
      display: block;
      text-align: center;
      font-weight: 900;
  }

  .timeline-article .meta-date .date {

        /*
    font-size: 20px;
      line-height: 40px;
      color: #B0B0B0;
      background: white;
      padding: 0px 0px;
      margin-top: -4px;
      */

    font-size: 20px;
    line-height: 40px;
    width: 40px;
    color: #B0B0B0;
    background: white;
    padding: 0px 0px;
    margin-top: -4px;
    display: block;

    position: absolute;
    left: 10px;
    z-index: 999;
  }

  .timeline-article .meta-date .month {
      font-size: 18px;
      line-height: 10px;
  }
  /*===== // Vertical Timeline =====*/