@charset "UTF-8";

/**
* 01 - common
* 02 - header
* 03 - footer
* 04 - Row, Section, Line
* 99 - Layout Resposive
*/




/*------------------------------------------------------------------------
* 01 - Common HTML
*------------------------------------------------------------------------*/
BODY {
  background: #f2f2f2;
  font: 500 15px/24px 'Sarabun', sans-serif;
  color: #333;
}
.container {
  position: relative;
  padding-bottom: 100px;
  min-height: 100%;
}
/* .page {
  padding: 30px 0 0 0;
} */
.wrap {
  padding: 0 30px;
  max-width: 960px;
}



/*------------------------------------------------------------------------
* 02 - Header
*   # Logo
*   # Navigator
*------------------------------------------------------------------------*/
.header {
  position: relative;
  background: #fff;
  color: #333333;
  z-index: 1000;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
.header .inner {position: relative;}
.header a {color: #333333;}

/** 02.1 - logo -----*/
.header .logo {
  padding: 12px 0;
  text-align: center;
  font-size: 0;
  line-height: 0;
}
.header .logo img {
  width: 100px;
}

/** 02.2 - Main Navigator -----*/
.main-nav { text-align: center; }
.main-nav li {
  display: inline-block;
  margin: 0 18px;
}
.main-nav a {
  position: relative;
  display: block;
  padding: 5px 0 8px 0;
}
.main-nav a:hover { color: #000; }
.main-nav a.active {
  padding-bottom: 6px;
  border-bottom: solid 2px #5c2c84;
  font-weight: 700;
  color: #000;
}
.main-nav li a.active:after {
  content: '';
  display: block;
  position: absolute;
  bottom: -10px;
  left: 50%;
  margin-left: -10px;
  width: 0; 
  height: 0; 
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid #5c2c84;
}

/** 02.3 - mobile toggle -----*/
.menu-toggle {
  display: none;
  position: absolute;
  top: 10px;
  left: 0;
  width: 50px;
  height: 44px;
  font-size: 20px;
  line-height: 100%;
  z-index: 100;
  /* transform: translateY(-50%); */
}
.menu-toggle .inner {
  position: absolute;
  top: 30%;
  left: 30%;
  width: 40%;
  height: 40%;
}
.menu-toggle .line {
	position: absolute;
	height: 2px;
	width:100%;
	background: rgba(0,0,0, 0.3);
	border-radius: 8px;
	transition: all cubic-bezier(0.26, 0.1, 0.27, 1.55) 0.35s;
}
.menu-toggle .top {top:18%;}
.menu-toggle .middle {top:48%;}
.menu-toggle .bottom {top:78%;}
.menu-toggle.close .line {background: #000;}
.menu-toggle.close .top {
	transform:rotate(45deg);
	top:48%;
}
.menu-toggle.close .middle,
.menu-toggle.close .bottom {
	transform:rotate(-45deg);
	top:48%;
}


/*------------------------------------------------------------------------
* 03 - Footer
*------------------------------------------------------------------------*/
.copyright {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 10px 0 15px;
  width: 100%;
  background: #ddd;
  text-align: center;
  font-size: 14px;
  line-height: 20px;
  color: #333;
}
.copyright a {
  /* text-decoration: underline; */
  color: #000;
}




/*------------------------------------------------------------------------
* 04 - 
*------------------------------------------------------------------------*/
.page-title {
  padding: 30px 0;
}
.page-title .title,
.page-title .subtitle {
  text-align: center;
  font-size: 32px;
  line-height: 40px;
  font-weight: 700;
  color: #5c2c84
}
/* .page-title.has-subtitle {
  padding: 30px 0 30px 0;
} */
.page-title.has-subtitle .title {
  font-size: 18px;
  line-height: 32px;
  color: #000;
}
.page-title .line {
  float: none;
  margin: 15px auto 0 auto;
  width: 120px;
  height: 4px;
  background: #ddd;
}

.h-title h4 {
  margin-bottom: 5px;
  font-size: 18px;
  line-height: 32px;
  font-weight: 700;
}

.page-message .wrap {
  max-width: 640px;
}
.message {
  text-align: center;
  font-size: 16px;
  line-height: 28px;
}
.message .icon {
  margin: 20px 0;
  font-size: 104px;
  color: #aaa;
}
.message .icon-complete { color: #66cc00; }
.message .icon-error { color: #f00; }
.message .title {
  margin-bottom: 5px;
  font-weight: 700;
  font-size: 24px;
  line-height: 40px;
  color: #000;
}
.message .btn {
  display: inline-block;
  margin-top: 20px;
  padding: 0 20px;
  border-radius: 20px;
  background: #39c;
  font-size: 13px;
  line-height: 30px;
  font-weight: 700;
  color: #fff;
}


/*------------------------------------------------------------------------
* 05 - Register Form
*------------------------------------------------------------------------*/

.page-register .wrap {
  max-width: 800px;
}
.content-block,
.login-form fieldset,
.page-register .duck-form fieldset {
  padding: 40px 50px 50px 50px;
  border-radius: 15px;
  background-color: #fff;
  box-shadow: 0 1px 5px rgba(0,0,0,0.1);
}
.content-block {
  position: relative;
}
.content-block .print-btn {
  position: absolute;
  top: 25px;
  right: 40px;
  display: block;
  padding: 3px 15px;
  border-radius: 20px;
  background-color: #39c;
  font-weight: 700;
  font-size: 13px;
  line-height: 20px;
  color: #fff;
  text-shadow: 1px 1px 3px rgba(0,0,0,0.1);
}
.login-form .wrap {
  max-width: 540px;
}
.login-form fieldset {
  padding-top: 10px;
}

.page-register-step1 .wrap {
  max-width: 560px;
}
.f-head {
  margin: 15px 0 5px 0;
}
.f-head.mt10 {margin-top: 25px;}
.f-head h4 {
  font-size: 20px;
  line-height: 32px;
  font-weight: 700;
  color: #5c2c84;
}
.f-head a.edit {
  display: inline-block;
  font-size: 12px;
  /* font-weight: 400; */
  color: #39c;
}
.f-head a.edit:before {
  content: ' - (';
  color: #999;
}
.f-head a.edit:after {
  content: ')';
  color: #999;
}


.register-form {
  margin-bottom: 15px;
}
.register-form .col {
  max-width: none;
}

/**
* 05.1 - Register step navigator
*/
.register-step {
  position: relative;
  float: none;
  margin: auto;
  max-width: 610px;
}
.register-step ul:after {content: "";display: table;clear: both;}
.register-step ul {
  z-index: 50;
}
.register-step li {
  position: relative;
  float: left;
  width:  25%;
}
.register-step span {
  position: relative;
  display: block;
  padding-bottom: 15px;
  text-align: center;
  font-size: 14px;
  line-height: 16px;
  color: #666;
  z-index: 10;
}
.register-step span:before {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 50%;
  width: 100%;
  height: 4px;
  background: #cccccc;
  z-index: -1;
}
.register-step li:last-child span:before {display: none;}
.register-step .pass-step span:before {
  background: #ffcc00;
}
.register-step span:after {
  content: '';
  display: block;
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);

  border-radius: 10px;
  border: solid 2px #cccccc;
  width: 18px;
  height: 18px;
  background: #cccccc;
}
.register-step .pass-step span:after {
  border-color: #ffcc00;
  background: #ffcc00;
}
.register-step .current span {
  font-weight: 700;
  color: #000;
}
.register-step .current span:after {
  border-color: #ffcc00;
  background: #fff;
}

/**
* 05.2 - 
*/
.register-selector {
  float: none;
  margin: 30px auto 0 auto;
  max-width: 320px;
  text-align: center;
}
.page-registered-landing .register-selector {
  margin-top: 0;
}
.register-selector li+li {
  margin-top: 15px;
}
.register-selector a {
  display: block;
  padding: 8px 20px;
  border-radius: 20px;
  background: #ffcc00;
  font-weight: bold;
  color: #000;
}
.register-selector a.grade10 {
  background: #ffcccc;
}


/**
* 05.3 - Register List
*/
.regis-search {
  /* float: none; */
  margin: 0 auto 20px auto;
  /* width: 500px; */
  text-align: center;
}
.regis-search input,
.regis-search select {

  border: solid 1px #ddd;
  background: #fff;
  font-size: 12px;
  line-height: 20px;
}
.regis-search input {
  padding: 3px 10px;
  border-radius: 3px;
  width: 200px;
}
.regis-search select {
  height: 28px;
  width: 200px;
}
.regis-search button {
  border-radius: 4px;
  background: #39c;
  height: 27px;
  width: 32px;
  color: #fff;
}

.regis-list {
  border-bottom: solid 1px #ccc;
  background-color: #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,0.2);
  font-size: 14px;
}
.regis-list col.regis-code {width: 80px;}
.regis-list col.regis-name {}
.regis-list col.regis-type {width: 40%;}
.regis-list col.regis-more {width: 95px;}
.regis-list th {
  padding: 5px 0 5px 15px;
  background: #222;
  text-align: left;
  font-weight: 700;
  font-size: 13px;
  
  color: #fff;
}
.regis-list td {
  text-align: left;
  padding: 10px 0 11px 15px;
}
.regis-list tr+tr {
  border-top: solid 1px #e7e7e7;
}
.regis-list tbody tr:nth-child(2n) td {
  background: #f7f7f7;
}
.regis-list tr:hover td {
  background: #ffffcc !important;
  color: #000;
}
.regis-list a.view {
  display: inline-block;
  padding: 0 10px 2px 10px;
  border-radius: 3px;
  background: #3399cc;
  font-size: 12px;
  line-height: 20px;
  color: #669900;
  color: #fff;
}
.regis-list .wait-comfirm {
  display: block;
  font-size: 12px;
  line-height: 14px;
  color: #900;
}


/**
* 05.4 - Image uploader
*/
.image-uploader {
  padding-bottom: 10px;
}
.image-uploader + .image-uploader {
  margin-top: 20px;
  border-top: solid 1px #eee;
  padding-top: 30px;
}
.image-uploader .row {
  position: relative;
  padding-left: 180px;
  min-height: 150px;
}
.image-uploader .upload-preview {
  float: none;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 10px;
  width: 150px;
  height: 150px;
  background: url(core/photo.png) no-repeat center #f2f2f2;
  
  -webkit-background-size: contain;
     -moz-background-size: contain;
       -o-background-size: contain;
          background-size: contain;
  box-shadow: inset 1px 1px 3px rgba(0,0,0,0.3);
  overflow: hidden;
}
.image-uploader .preload {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0, 0.3);
}
.image-uploader .preload .bar {
  position: absolute;
  top: 50%;
  left: 50%;
  /* border: solid 1px #ccc; */
  border-radius: 10px;
  width: 70%;
  background-color: #222;
  transform: translate(-50%, -50%);
  box-shadow: 0 1px 8px rgba(0,0,0, 0.3);
}
.image-uploader .preload .bar-percent {
  border-radius: 5px;
  width: 60%;
  height: 6px;
  background-color: #66cc00;
}
.image-uploader .title {
  font-weight: 700;
  font-size: 17px;
  color: #5c2c84;
}
.image-uploader .description {
  font-size: 14px;
}
.image-uploader .description em {
  display: inline-block;
  font-weight: 700;
  color: #000;
}
.image-uploader .upload-btn {
  position: relative;
  margin-top: 12px;
}
.image-uploader .btn-upload,
.image-uploader .btn-preview {
  display: inline-block;
  margin: 3px 0;
  padding: 0 20px;
  border-radius: 20px;
  background: #39c;
  font-weight: 700;
  font-size: 13px;
  color: #fff;
}
.image-uploader input[type=file] {
  position: absolute;
  top: 0;
  left: 0;
  padding: 0;
  width: 125px !important;
  height: 22px;
  font-size: 0;
  line-height: 0;
  opacity: 0.0;
  filter: opacity(0);
}
.image-uploader .btn-upload {
  background-color: #669900;
}
.image-uploader .btn-preview {
  display: none;
}
.image-uploader.has-file .btn-preview {
  display: inline-block;
}

/**
* 05.5 - Profile summary
*/
.row-profile {
  margin-bottom: 30px;
  position: relative;
  padding-left: 180px;
}
.row-profile .profile-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 150px;
  height: 200px;
  font-size: 0;
  line-height: 0;
  background-position: top;
  background-repeat: no-repeat;
  -webkit-background-size: cover;
     -moz-background-size: cover;
       -o-background-size: cover;
          background-size: cover;
  overflow: hidden;
}
.row-profile .profile-image figure {
  display: none;
}
.row-profile .profile-image img {
  width: 100%;
}
.row-profile .profile-detail {
  display: table;
  width: 100%;
}
.row-profile .profile-detail .set {
  display: table-row;
}
.row-profile .profile-detail .label,
.row-profile .profile-detail .info {
  display: table-cell;
  width: auto;
  font-size: 13px;
}
.row-profile .profile-detail .label {
  width: 130px;
}
.row-profile .profile-detail .info {
  /* font-weight: 700; */
  color: #900;
}
.row-profile .f-head h4 {
  font-size: 17px;
}

.docs-gallery-title h4 {
  margin: 10px 0;
  text-align: center;
  color: #000;
}
.docs-gallery-title h4 a.edit {
  display: block;
  line-height: 14px;
}
.docs-gallery-title h4 a.edit:after {
  content: ') - ';
}
.row-docs-gallery .col {
  margin: 0 0 12px 0;
  padding: 0;
}
.row-docs-gallery .inner {
  margin: 0 6px;
  padding: 10px;
  box-shadow: 0 1px 5px rgba(0,0,0, 0.3);
  background-color: #fff;
}
.row-docs-gallery h5 {
  margin-bottom: 6px;
  font-weight: 700;
  font-size: 13px;
  line-height: 18px;
}
.row-docs-gallery .img {
  width: 100%;
  height: 200px;
  background-position: top;
  background-repeat: no-repeat;
  -webkit-background-size: cover;
     -moz-background-size: cover;
       -o-background-size: cover;
          background-size: cover;
  overflow: hidden;
}



/*------------------------------------------------------------------------
* 06 - Registered Account
*------------------------------------------------------------------------*/

/**
* 06.2 - registered list
*/

/** 06.2.1 - empty list */
.page-registered-list .content-block {
  float:none;
  margin: auto;
  max-width: 630px;
}
.page-registered-list .icon {
  color: #ddd !important;
}
.page-registered-list .title {
  color: #666 !important;
}





/*------------------------------------------------------------------------
* 07 - Homepage
*------------------------------------------------------------------------*/
.page-home .h-title,
.page-home .btn-set {
  text-align: center;
}
.page-home .btn-set {
  margin-bottom: 40px;
}
.page-home .btn {
  display: inline-block;
  margin-top: 20px;
  padding: 0 20px;
  border-radius: 20px;
  background: #39c;
  font-size: 13px;
  line-height: 30px;
  font-weight: 700;
  color: #fff;
}
.page-home .register-selector {
  margin-top: 0;
}