html, body {
	height: 100%;
}
body{
	background-color:#FFFFFF;
	font-size:16px;
	max-width: 1000px;
	margin: 0 auto;
	overflow-x: hidden;
}
body.full-width{
	width: 100%;
	max-width: 100%;
}
body.home-container{
	background: url('../images/backgrounds/bg-front.jpg') no-repeat center center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}
@media (min-width:1025px){
	.row-eq-height {
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
	}
}
.hide-bullet{
	list-style: none;
}
.choice span {
	border-color: #04042B;
}
p.desc{
	font-size: 16px;
	font-weight: 400;
}
.msg-waiting{
	font-size: 32px;
	color: #ec1384;
	padding: 80px;
}

.activity-answer-box p{
	font-size: 14px;
	font-weight: 400;
}

.fix-w{
	max-width: 1200px;
	margin:0 auto;
}
.navbar-default .navbar-nav > li > a{
	font-size: 14px;
	font-weight: 400;
}


.navbar-default .navbar-nav a.active{
	color: #02b0b7;
}

.navbar-blank .navbar-nav{
	border-radius: 20px 20px 0 0;
}
.navbar-blank .navbar-nav > li > a, .navbar-blank .navbar-nav > li > a:hover, .navbar-blank .navbar-nav > li > a:focus, .navbar-blank .navbar-nav > li > a.active {
	font-size: 14px;
	font-weight: 400;
	color: #FFFFFF;
	padding: 13px 22px;
}
.navbar-blank .navbar-nav > li > a:hover, .navbar-blank .navbar-nav > li > a:focus {
	background: inherit;
}
.navbar-blank.navbar-fixed-bottom .dropdown .dropdown-menu {
	position: inherit;
	width: 350px;
}

/**  Header **/
.text-h-main{
	font-size: 36px;
	font-weight: 600;
}
.text-h-sub{
	font-size: 28px;
	font-weight: 500;
}
.text-h-small{
	font-size: 18px;
	font-weight: 500;
}
.text-h-remark{
	font-size: 16px;
	font-weight: 500;
}
/**  Header **/

.bg-custom-grey{
	background-color: #f8f8f8;
}
.bg-custom-gradient{
	background: url('../images/backgrounds/bg-front.jpg') no-repeat top left fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	color: #FFFFFF;
}


/** Footer **/
.footer-container{
	color: #000000;
	background: #03B1B8;
	min-height:150px;
	padding: 50px 0;
}
.footer-container .text-muted a{
	color: #CCCCCC;
}
/** Footer **/

/** Button **/
a.txt-link{
	font-size: 14px;
	color: white
}
.link-rows a:not(:last-child):after{
	content: "|";
	color: #FFFFFF;
	padding: 20px;
}
.btn-rows button:not(:last-child){
	margin-right: 20px;
}
.btn-custom {
	font-weight:500;
}
.btn-custom.btn-xxs{
	font-size: 14px;
}
.btn-custom.btn-lg{
	font-size: 18px;
}
.btn-custom.btn-xlg{
	font-size: 24px;
	font-weight: 500;
}
.btn-white {
	color: #4b75bd;
	background-color: #FFFFFF;
	border-color: #FFFFFF;
}
.btn-white.btn-inverse{
	color: #FFFFFF;
	background-color: transparent;
	border-color: #FFFFFF;
}
.btn-custom.btn-download{
	background-color: #f1f2f6;
	text-align: left;
	font-size: 14px;
	font-weight: 400;
}
a.btn-custom.btn-download{
	color: #333333;
	white-space: normal;
	line-height: 26px;
}
/** /button **/

/** Logo **/
.page-header-logo-home{
	margin-top: 40px;
	margin-bottom: 50px;
}
.page-header-logo-home img.logo{
	max-width: 350px;
}
.page-header-logo{
	margin-top: 10px;
	margin-bottom: 50px;
}
.page-header-logo img.logo{
	max-width: 250px;
}
.page-header-menu{
	margin-top: 20px;
	margin-bottom: 20px;
}
.page-header-menu img.logo{
	max-width: 180px;
}
/** /logo **/

.banner-container{
	background: url('../images/backgrounds/bg-front.jpg') no-repeat center center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	min-height:500px;
}
.banner-container-small{
	background: url('../images/backgrounds/bg-front.jpg') no-repeat center center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	min-height:150px;
}
.banner-container .banner-h2{
	font-size: 24px;
	color: #FFFFFF;
	margin-top: 100px;
}
.banner-container-small .banner-h2{
	font-size: 24px;
	color: #FFFFFF;
	margin-top: 20px;
	margin-bottom: 40px;
}
.banner-item-img img{
	max-width: 100%;
}

.menu-container{
	background-color: #02b0b7;
	min-height:100px;
}


/** Panel **/
.panel.panel-white{
	border: 5px solid #FFFFFF;
	background-color: #ecf3f9;
}
.panel.panel-transparent{
	border: 5px solid rgba(255, 255, 255, 0.2);
	background: transparent;
	color: #FFFFFF;
}
.panel.panel-big{
	border-radius: 15px;
}
.panel-big .panel-body p{
	text-indent: 50px;
}
.panel.panel-big .panel-body{
	border-radius: 15px;
	padding: 60px;
}
/** /panel **/

.txt-home{
	font-family:'Roboto', 'Sarabun', Helvetica Neue, Helvetica, Arial, sans-serif;
	font-size: 20px;
	font-weight:400;
}

/** Timeline **/
.timeline-icon::after{
	content: none;
}
.timeline-container::after {
	width: 5px;
}
.timeline::before, .timeline::after {
	content: none;
}
.timeline-content {
	margin-bottom: 0px;
}
/** /timeline **/

.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/** Panel **/
.panel-custom{
	border: 0px;
	box-shadow: none;
}
.panel-custom .panel-heading.active {
	background-color: #02b0b7;
	border-radius: 10px;
}
.panel-custom .panel-heading {
	background-color: #e8e9ee;
	border-radius: 10px;
}
.panel-custom .panel-heading.active .panel-title > a{
	color: #FFFFFF;
}
.panel-custom .panel-heading .panel-title > a{
	color: #000000;
}
.panel-group .panel-custom .panel-heading + .panel-collapse > .panel-body, .panel-group .panel-custom .panel-heading + .panel-collapse > .list-group {
    border-top: 0px;
}

/** /panel **/

.list.list-icons li{
	border-bottom: 1px solid #CCCCCC;
	padding: 6px 0;
}
.list.list-icons li.active{
	color:#000000;
	cursor: pointer;
}
.list.list-icons li.inactive{
	color:#CCCCCC;
}
.list.list-icons li.active-menu{
	color:#03B1B8;
}

.activity-box{
	font-size: 18px;
	font-weight: 500;
	color: #04042B;
	padding: 0 20px;
	background-color: #FFFFFF;
	border: 5px solid #04042B;
}
.activity-box h2{ 
	font-family:'Roboto', 'Kanit', Helvetica Neue, Helvetica, Arial, sans-serif;
	font-size: 22px;
	font-weight: 400;
	color: #EC008D;
	text-align: right;
	border: 0px dashed #02b0b7;
	margin-bottom: 20px;
	background: linear-gradient(to right, #F683C8, #FFFFFF);
}
.activity-answer-box{
	font-size: 18px;
	font-weight: 500;
	color: #04042B;
	padding: 0 20px;
	background-color: #FFFFFF;
	border: 5px solid #04042B;
	min-height:410px;
}
.activity-answer-box h2{ 
	font-family:'Roboto', 'Kanit', Helvetica Neue, Helvetica, Arial, sans-serif;
	font-size: 22px;
	font-weight: 400;
	color: #EC008D;
	text-align: right;
	border: 0px dashed #02b0b7;
	margin-bottom: 20px;
	background: linear-gradient(to right, #F683C8, #FFFFFF);
}
.activity-answer-box .embed-responsive{
	overflow: auto;
	overflow-x: hidden;
}
.activity-answer-box-sub{
	background-color: rgb(255,255,255, 0.1);
	padding: 0 30px;
}
.panel[class*="bg-"] .panel-title {
	color: #04042B;
}

.sign{
	font-size: 14px;
	font-weight: 300;
	padding: 5px;
	margin: 5px 10px;
}

.bg-sign-1{ background-color: #bc4736; }
.bg-sign-2{ background-color: #12551f; }
.bg-sign-3{ background-color: #5f7f7a; }
.bg-sign-4{ background-color: #e5b054; }
.bg-sign-5{ background-color: #9f0d92; }
.bg-sign-6{ background-color: #88232b; }

.bg-sign-1.closed{ color: #bc4736; }
.bg-sign-2.closed{ color: #12551f; }
.bg-sign-3.closed{ color: #5f7f7a; }
.bg-sign-4.closed{ color: #e5b054; }
.bg-sign-5.closed{ color: #9f0d92; }
.bg-sign-6.closed{ color: #88232b; }

.sign.open{ color: #FFFFFF; }

.emo-box{
	height: 60px;
	padding: 10px 0 0 60px;
}
.emo-box.active, .emo-color{
	color:#02b0b7;
}
.emo-ok{
	background: url('../images/backgrounds/emo-ok.png') no-repeat;
	background-size:50px 50px;
}
.emo-normal{
	background: url('../images/backgrounds/emo-normal.png') no-repeat;
	background-size:50px 50px;
}
.emo-depress{
	background: url('../images/backgrounds/emo-depress.png') no-repeat;
	background-size:50px 50px;
}
.emo-ok.active{
	background: url('../images/backgrounds/emo-ok-active.png') no-repeat;
	background-size:50px 50px;
}
.emo-normal.active{
	background: url('../images/backgrounds/emo-normal-active.png') no-repeat;
	background-size:50px 50px;
}
.emo-depress.active{
	background: url('../images/backgrounds/emo-depress-active.png') no-repeat;
	background-size:50px 50px;
}

.modal_dark, .modal_dark .modal-body, .modal_dark .modal-footer{
	background-color: #111343;
}
.modal_dark .modal-content{
	box-shadow: none;
}
.modal_popup_m4t6{
	border: 5px solid #111343;
}
.modal_popup_m4t6 .modal-body{
	text-align: center;
	color: #111343;
	font-size: 18px;
}
.modal_popup_m4t6 .modal-body .answer{
	font-size: 24px;
	font-weight: 600;
}
.bold-message{
	background-color: #01B1B8;
	padding: 20px;
	margin: 50px auto;
	width: 50%;
	text-align: center;
	color: #FFFFFF;
	font-size: 26px;
	border-radius: 20px;
}

.selectable-demo-list {
	width: 80%;
}
.selectable-demo-list.inline.selected{
	width: 80%;
	min-height: 150px;
	background-color: #0A0831;
}
.selectable-demo-list.inline{
	width: 80%;
}
.selectable-demo-list.inline li {
	float: left;
	margin: 10px;
}
.selectable-demo-list > li + li {
	margin-top: 10px;
}
.selectable-demo-list > .ui-sortable-handle, .selectable-demo-list > .ui-selectee, .ui-handle-excluded {
	border: 1px dashed #111343;
	font-size: 14px;
}

.underline-dash{
	border-bottom: 2px dashed #AEAEAE;
}

.file-preview {
	width: 800px;
	max-width: 100%;
	text-align: center;
	margin: 20px auto;
}
.file-upload-indicator, .file-actions{
	display: none;
}

.plc-box-border{
	border: 1px dashed #CCCCCC;
	padding: 20px 10px 0 10px;
}

.plc .select2-container--focus{
	background: #03B1B8;
}

.plc-sub-room{
	background: #EFEFEF;
	border: 1px dashed #CCCCCC;
	border-radius: 5px;
	padding: 10px;
	text-align: center;
}
.plc-sub-room.active{
	background: #03B1B8;
	color: #FFFFFF;
}
.plc-topic-pinned-container{
	background: #EFEFEF;
	min-height:150px;
	padding: 50px 0;
}
.plc-topic-pinned{
	border: 1px solid #CCCCCC;
	border-top: 0;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
}
.plc-topic-pinned .header{
	padding: 10px;
	border: 0;
	background: #03B1B8;
	color:#FFFFFF;
}
.plc-topic-pinned .topic{
	padding: 10px;
	border-top: 1px solid #CCCCCC;
}
.plc-topic-list .media{
	border-bottom: 1px solid #CCCCCC;
	padding: 20px;
}
.plc-topic-list .img-lg{
	width: 50px!important;
	height: 50px!important;
}
.plc-topic-border {
	border: 1px dashed #CCCCCC;
	padding: 30px;
}
.plc-comment{
	border-bottom: 1px dashed #CCCCCC;
	margin-bottom: 20px;
	min-height: 50px;
}
.plc-image{
	border: 5px solid #CCCCCC;
	margin: 40px 0;
}

.fab-menu-bottom-left.reached-bottom, .fab-menu-bottom-right.reached-bottom {
	bottom: 0px;
}
.fab-menu-bottom-left, .fab-menu-bottom-right {
	bottom: 0px;
}
.fab-menu-btn.btn-float > i {
	left:30px;
}
.fab-menu-btn.btn-float {
	width:350px;
}

.media-chat .media{
	margin-top: 10px;
}
.media-chat .media:last-child{
	margin-bottom: 10px;
}
.media-chat .media .chat-time{
	color: #CCCCCC;
	font-size: 12px;
	padding-top: 11px;
	vertical-align: bottom;
}
.media-chat .chat-date{
	color: #CCCCCC;
	font-size: 12px;
	text-align: center;
}
.media-chat .media.other-chat{
	text-align: left;
}
.media-chat .media.my-chat{
	text-align: right;
}
.media-chat .media .chat{
	padding: 10px 20px;
	border-radius: 20px;
	width: max-content;
	max-width: 200px;
}
.media-chat .media.my-chat .chat{
	color: #FFFFFF;
	background-color: #9F6FC9;
	float: right;
	margin-left: 10px;
}
.media-chat .media.other-chat .chat{
	color: #000000;
	background-color: #EFEFEF;
	float: left;
	margin-right: 10px;
}
.media-chat-box .dropdown-menu.dropdown-content{
	border-radius: 0;
}
.media-chat-footer .form-control {
	border: 1px solid #FFFFFF;
	border-bottom: 1px solid #DDDDDD;
	border-radius: 0;
}
.navbar-nav > li > .dropdown-menu .media-list {
	max-height: 340px;
	min-height: 340px;
	overflow-y: auto;
}
.navbar-blank.navbar-fixed-bottom.media-chat-box .dropdown .dropdown-menu{
	border-radius: 0px;
}
.navbar-nav.media-chat-box > li > a > .label, .navbar-nav > li > a > .badge {
	width: 0px;
	height: 13px;
	border-radius: 50%;
	border-color: #FFFFFF;
	background-color: #FFFFFF;
}
.avatar{
	max-width: 100%;
	border-radius: 100%;
}

.plan-image{
	border: 5px solid #CCCCCC;
	margin: 10px 0;
}
ul.plan-list{
	list-style: none;
	padding-left: 0;
}
.plan-list li{
	padding: 20px 0;
	border-bottom: 2px dashed #CCCCCC;
}
.modal-content.more-radius{
	border-radius: 25px;
}