@charset "utf-8";

/* 
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

	jQuery Plugin
	
	- jPreloader
	- ImageFill
	- Equalize 
	- SlabText
	- Succint
	- bxSlider 
	- Animated Header
	- Data Image Delivery
	- bgStretcher
	- Bootstrap Modals
	- Bootstrap Collapse
	- Fix Sidebar Menu (go to mobile-menu.css)
	- Tabslet
	- scrollToBySpeed
	- Bootstrap ScrollSpy
	- Bootstrap Affix
	- Responsive Calendar + Calendar Event Popup
	- Bootstrap Tooltip
	- Intense Image Viewer 
	- Slick Slider
	- Unveil
	- Tablesaw
	- Fancybox + mCustomScrollbar (go to jquery-plugin-fancybox.css)
	- Form Validate
	  - Standard Form
	- FileStyle
	- Selectric
	- HTML5 Placeholder
	- Datepicker
	- Dropkick

///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
*/





/*	jPreloader
====================================================================================== */
body {
	display: none;
}

#jpreOverlay {
	background-color: #FFF;
}

#jpreSlide {
	margin-top: -125px;
}

/* Preload Items */
#jpreSlide,
#preload-items,
#preload-items:before, 
#preload-items:after {
	width: 300px;
}

#jpreSlide,
#preload-items {
	height: 250px;
}

#preload-items:before {
    content: '';
    display: block;
    width: 300px;
    height: 200px;
	background-image: url(../images/logo-preload.png);
}

#preload-items:after {
    content: '';
    display: block;
    width: 300px;
    height: 50px;
	background: url(../images/jpreload-loader.gif) no-repeat center center;
}

/* Preload Bar */
#jpreLoader {
	width: 100%; 
}

#jpreLoader,
#jpreBarInner {
    height: 5px;
}

#jpreBar {
	background-color: #fef44b;
}

#jpreBarInner { 
	width: 100%; 
	position: absolute; 
    z-index: -1; 
    top: 0px; 
    left: 0px;
	background-color: #666;   
}

#jprePercentage {
	margin: 10px;
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 12px; 
    color: #666; 
    text-align: right;
}

#jpreButton {
	width: 100px; 
    padding: 5px 10px; 
    margin: auto;
	background: #333;
	font-family: Tahoma, Geneva, sans-serif;
    font-size: 14px;
	text-align: center; 
    color: #FFF; 
	cursor: pointer;
}





/* ImageFill
====================================================================================== */
/* Class for parent element */
.imgfill {}





/* Equalize
====================================================================================== */
/* Selector for parent element */
.equal-parent {}
.equal-subparent {}

/* Selector for equalize height element */
.equal-child {}
.equal-subchild {}





/* SlabText
====================================================================================== */
/* Selector */
.h-fit {}

.slabtexted .slabtext {
	display: -moz-inline-box;
	display: inline-block;
	white-space: nowrap;
}
		
.slabtextinactive .slabtext {
	display: inline;
	white-space: normal;
	font-size: 1em !important;
	letter-spacing: inherit !important;
	word-spacing: inherit !important;
	*letter-spacing: 0 !important;
	*word-spacing: 0 !important;
}
		
.slabtextdone .slabtext {
	display:block;
}





/* Succint
====================================================================================== */
/* Selector for truncating multiple lines of text */
.limit-text {}






/* bxSlider
====================================================================================== */
/* Main Style
--------------------------------------------------------------------------------------------------------------------- */
/* Reset and Layout 
------------------------------------------------------------ */
.bx-wrapper {
	position: relative;
	margin: 0 auto;
	/*margin: 0 auto 60px;*/
	padding: 0;
	*zoom: 1;
}

.bx-wrapper img {
	max-width: 100%;
	display: block;
}

/* Theme 
------------------------------------------------------------ */
/*.bx-wrapper .bx-viewport {
	-moz-box-shadow: 0 0 5px #ccc;
	-webkit-box-shadow: 0 0 5px #ccc;
	box-shadow: 0 0 5px #ccc;
	border: solid #fff 5px;
	left: -5px;
	background: #fff;
}*/

.bx-wrapper .bx-pager,
.bx-wrapper .bx-controls-auto {
	position: absolute;
	bottom: -30px;
	width: 100%;
}

/* Loader 
------------------------------------------------------------ */
.bx-wrapper .bx-loading {
	min-height: 50px;
	background: url(../images/bx_loader.gif) center center no-repeat #fff;
	height: 100%;
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2000;
}

/* Pager 
------------------------------------------------------------ */
.bx-wrapper .bx-pager {
	text-align: center;
	font-size: .85em;
	font-family: Arial;
	font-weight: bold;
	color: #666;
	padding-top: 20px;
}

.bx-wrapper .bx-pager .bx-pager-item,
.bx-wrapper .bx-controls-auto .bx-controls-auto-item {
	display: inline-block;
	*zoom: 1;
	*display: inline;
}

.bx-wrapper .bx-pager.bx-default-pager a {
	background: #666;
	text-indent: -9999px;
	display: block;
	width: 10px;
	height: 10px;
	margin: 0 5px;
	outline: 0;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
}

.bx-wrapper .bx-pager.bx-default-pager a:hover,
.bx-wrapper .bx-pager.bx-default-pager a.active {
	background: #000;
}

/* Direction Controls (Next/Prev) 
------------------------------------------------------------ */
.bx-wrapper .bx-prev {
	left: 10px;
	background: url(../images/controls.png) no-repeat 0 -32px;
}

.bx-wrapper .bx-next {
	right: 10px;
	background: url(../images/controls.png) no-repeat -43px -32px;
}

.bx-wrapper .bx-prev:hover {
	background-position: 0 0;
}

.bx-wrapper .bx-next:hover {
	background-position: -43px 0;
}

.bx-wrapper .bx-controls-direction a {
	position: absolute;
	top: 50%;
	margin-top: -16px;
	outline: 0;
	width: 32px;
	height: 32px;
	text-indent: -9999px;
	z-index: 9999;
}

.bx-wrapper .bx-controls-direction a.disabled {
	display: none;
}

/* Auto Controls (Start/Stop) 
------------------------------------------------------------ */
.bx-wrapper .bx-controls-auto {
	text-align: center;
}

.bx-wrapper .bx-controls-auto .bx-start {
	display: block;
	text-indent: -9999px;
	width: 10px;
	height: 11px;
	outline: 0;
	background: url(../images/controls.png) -86px -11px no-repeat;
	margin: 0 3px;
}

.bx-wrapper .bx-controls-auto .bx-start:hover,
.bx-wrapper .bx-controls-auto .bx-start.active {
	background-position: -86px 0;
}

.bx-wrapper .bx-controls-auto .bx-stop {
	display: block;
	text-indent: -9999px;
	width: 9px;
	height: 11px;
	outline: 0;
	background: url(../images/controls.png) -86px -44px no-repeat;
	margin: 0 3px;
}

.bx-wrapper .bx-controls-auto .bx-stop:hover,
.bx-wrapper .bx-controls-auto .bx-stop.active {
	background-position: -86px -33px;
}

/* Pager with Auto-Controls Hybrid Layout 
------------------------------------------------------------ */
.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager {
	text-align: left;
	width: 80%;
}

.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-controls-auto {
	right: 0;
	width: 35px;
}

/* Image Caption 
------------------------------------------------------------ */
.bx-wrapper .bx-caption {
	position: absolute;
	bottom: 0;
	left: 0;
	background: #666\9;
	background: rgba(80, 80, 80, 0.75);
	width: 100%;
}

.bx-wrapper .bx-caption span {
	color: #fff;
	font-family: Arial;
	display: block;
	font-size: .85em;
	padding: 10px;
}

/* Sample Slider
--------------------------------------------------------------------------------------------------------------------- */
/* Container */
.sample-bxslider-container {
	margin-top: 100px;
}
/* Selector */
.sample-bxslider {}

/* Caption
------------------------------------------------------------ */
.sample-bxslider .slider-item-title  {
	display: block;
	position: absolute; 
	z-index: 9999;
	top: 50px; left: 0;
	background-color: #FFF;
	font-size: 7.143em;
	filter: Alpha(opacity=0); /* lt-ie9 */
	opacity: 0;
}

.sample-bxslider .slider-item-title.active  {
	-webkit-transform: translateX(50px);
		 -ms-transform: translateX(50px);
		 	   transform: translateX(50px);
	/*left: 50px;*/
	filter: Alpha(opacity=100); /* lt-ie9 */
	opacity: 1;
}

/* Prev + Next Button
------------------------------------------------------------ */
.sample-bxslider-container .slider-prev, 
.sample-bxslider-container .slider-next {
	position: absolute;
	z-index: 9999;
	top: 50%;
	margin-top: -24px;
}

.sample-bxslider-container .slider-prev {
	left: 0;
}

.sample-bxslider-container .slider-next {
	right: 0;
}

.sample-bxslider-container .slider-prev .bx-prev,
.sample-bxslider-container .slider-next .bx-next {
	display: block;
	width: 48px; 
	line-height: 48px;
	border-radius: 50%;
	background-color: #FFF; /* lt-ie9 */
	background-color: rgba(255,255,255,0.65);
	text-align: center;
	-webkit-transition: all 0.3s ease 0s;
			   transition: all 0.3s ease 0s;
}

.sample-bxslider-container .slider-prev .bx-prev.disabled,
.sample-bxslider-container .slider-next .bx-next.disabled {
	filter: Alpha(opacity=0); /* lt-ie9 */
	opacity: 0;
	visibility: hidden;
}

.sample-bxslider-container .slider-prev .bx-prev span,
.sample-bxslider-container .slider-next .bx-next span {
	font-size: 30px;
	color: #333;
	line-height: 1;
	vertical-align: middle;
}

/* Pager
------------------------------------------------------------ */
.sample-bxslider-container .slider-pager {
	height: 10px;
	margin: 10px 0; 
}

.sample-bxslider-container .slider-pager .bx-pager {
	text-align: center;
}

.sample-bxslider-container .slider-pager .bx-pager .bx-pager-item {
	display: inline-block;
}

.sample-bxslider-container .slider-pager .bx-pager .bx-pager-item .bx-pager-link {
	display: inline-block;
	background: #333333;
	text-indent: -9999px;
	display: block;
	width: 10px;
	height: 10px;
	margin: 0 5px;
	border-radius: 5px;
	-webkit-transition: all 0.3s ease 0s;
			   transition: all 0.3s ease 0s;
}

.sample-bxslider-container .slider-pager .bx-pager .bx-pager-item .bx-pager-link.active {
	background: #FF0000;	
}

/* Sample Mobile Carousal (1,2,...)  
--------------------------------------------------------------------------------------------------------------------- */
/* Container */
.sample-mobile-carousal {
	margin-bottom: 30px;
}
/* Selector */
.mobile-carousal1,
.mobile-carousal2 {}

/* Title  
------------------------------------------------------------ */
.sample-mobile-carousal .carousal-title {
	font-size: 24px;
}

/* Pager >>> CSS for Multiple Selector 
------------------------------------------------------------ */
.sample-mobile-carousal .bx-controls {
	height: 10px;
	margin-bottom: 20px;
}

.sample-mobile-carousal .bx-controls .bx-pager {
	position: static;
	bottom: 0;
	padding-top: 0;
	text-align: center;
}

.sample-mobile-carousal .bx-controls .bx-pager .bx-pager-item {
	display: inline-block;
}

.sample-mobile-carousal .bx-controls .bx-pager .bx-pager-item .bx-pager-link {
	display: inline-block;
	background-color: #000; 
	text-indent: -9999px;
	display: block;
	width: 10px;
	height: 10px;
	margin: 0 5px;
	border-radius: 5px;
	-webkit-transition: all 0.3s ease 0s;
			   transition: all 0.3s ease 0s;
}

.sample-mobile-carousal .bx-controls .bx-pager .bx-pager-item .bx-pager-link.active {
	background: #F00;	
}

/* More  
------------------------------------------------------------ */
.sample-mobile-carousal .carousal-more {
	display: block;
	padding: 5px 0;
	background-color: #069;
	font-size: 16px;
	color: #FFF;
	text-align: center;
	-webkit-transition: all 0.3s ease 0s;
			   transition: all 0.3s ease 0s;
}

.sample-mobile-carousal .carousal-more:hover {
	background-color: #036;
	color: #FFF;
}

/* FB App Slider
--------------------------------------------------------------------------------------------------------------------- */
/* Container */
.fbapp-bxslider-container {
	position: relative;
	/*padding: 0 20px;*/
	background-color: #FFF;
}
/* Selector */
.fbapp-bxslider {}

/* Tab Title
------------------------------------------------------------ */
.fbapp-bxslider li a {
	display: block;
	padding: 5px 10px;
	border-bottom: solid 3px transparent;
	font-size: 16px;
	color: #333;
	text-align: center;
}

.fbapp-bxslider li.active a {
	border-bottom: solid 3px #F00;
}

/* Prev + Next Button
------------------------------------------------------------ */
.fbapp-bxslider-container .slider-prev, 
.fbapp-bxslider-container .slider-next {
	position: absolute;
	z-index: 9999;
	top: 50%;
	margin-top: -12px;
}

.fbapp-bxslider-container .slider-prev {
	left: 0;
}

.fbapp-bxslider-container .slider-next {
	right: 0;
}

.fbapp-bxslider-container .slider-prev .bx-prev,
.fbapp-bxslider-container .slider-next .bx-next {
	display: block;
	width: 21px; 
	line-height: 21px;
	/*background-color: #FFF; 
	background-color: rgba(255,255,255,0.65);*/
	text-align: center;
	-webkit-transition: all 0.3s ease 0s;
			   transition: all 0.3s ease 0s;
}

.fbapp-bxslider-container .slider-prev .bx-prev.disabled,
.fbapp-bxslider-container .slider-next .bx-next.disabled {
	filter: Alpha(opacity=0); /* lt-ie9 */
	opacity: 0;
	visibility: hidden;
}

.fbapp-bxslider-container .slider-prev .bx-prev span,
.fbapp-bxslider-container .slider-next .bx-next span {
	font-size: 16px;
	color: #999;
	line-height: 1;
	vertical-align: middle;
}





/* Animated Header
======================================================================================  */
#sitehead {
	position: fixed;
	z-index: 10000; top: 0; left: 0;
	width: 100%;
	height: 100px;
	background: #036;
	/* Fix Flashing Element in Chrome */
	-webkit-transform: translateZ(0);
		 -ms-transform: translateZ(0);
		 	   transform: translateZ(0);
}

.lt-ie10 #sitehead {
	position: static;
}

#sitehead header {
	/*overflow: hidden;*/
}

#sitehead header h1 {
	float: left;
}

#sitehead header h1 a {
	display: block;
	width: 150px;
	height: 50px;
	background-image: url(../images/logo.svg);
	background-size: auto 100%;
	background-repeat: no-repeat;
}

.lt-ie9 #sitehead header h1 a {
	background-image: url(../images/logo.png);
}

#sitehead header #desktop-menu {
	float: right;
	margin-top: 7px; /* Middle Balance for Left Logo */
}

#sitehead header #desktop-menu ul {
	overflow: hidden;
}

#sitehead header #desktop-menu ul li {
	float: left;
	margin-left: 20px;
}

#sitehead header #desktop-menu ul li a {
	font-size: 18px;
	color: #CCC;
}

#sitehead header #desktop-menu ul li a:hover {
	color: #F00;
}

/* After Page scroll */
#sitehead.shrink {
	height: 50px;
}

#sitehead.shrink header h1 a {
	width: 90px;
	height: 30px;
}

#sitehead.shrink header #desktop-menu {
	margin-top: 1px; /* Middle Balance for Left Logo */
}

#sitehead.shrink header #desktop-menu ul li a {
	font-size: 14px;
}

/* Element Transition */
#sitehead,
#sitehead header h1 a,
#sitehead header #desktop-menu ul li a {
	-webkit-transition: all 0.3s ease 0s;
			   transition: all 0.3s ease 0s;
}

@media (max-width: 767px) {
	#sitehead header h1 {
		position: absolute;
		z-index: 1; top: 25px; left: 0;
	}
	
	#sitehead.shrink header h1 {
		top: 10px;
	}
}



/* Data Image Delivery
====================================================================================== */
/* Selector */
.data-img {}





/* bgStretcher
====================================================================================== */
.bgstretcher ul, .bgstretcher ul li {
	position: absolute;
	top: 0; left: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bgstretcher ul li {
	background: url(../images/bx_loader.gif) no-repeat center center;
}

.bgstretcher ul li a .image-path {
	visibility: hidden;
}

.bgstretcher {
	overflow: hidden;
	position: fixed;
	z-index: 1; top: 0; left: 0;
	width: 100%;
}

.bgstretcher-area,
.bgstretcher-page {
	height: 100%;
}

/* Library Slider
--------------------------------------------------------------------------------------------------------------------- */
/* Container - Set Height */
#sample-bg-slider-container {
	height: 50%;
}
/* Selector */
#sample-bg-slider { 
	height: 100%; 
	position: relative;
}

/* Title
------------------------------------------------------------ */
#sample-bg-slider ul li a .bg-slider-title {
	position: absolute; 
	z-index: 1; 
	bottom: 30px; right: 60px;
	padding: 10px 30px;
	background-color: #FFF;
	font-size: 36px;
	color: #666;
	-webkit-transition: all 0.3s ease 0s;
			   transition: all 0.3s ease 0s;
}

#sample-bg-slider ul li.bgs-current a .bg-slider-title {
	-webkit-transform: translateX(30px);
		 -ms-transform: translateX(30px);
		 	   transform: translateX(30px);
}

/* Prev/Next Button
------------------------------------------------------------ */
#sample-bg-slider .bg-slider-prev,
#sample-bg-slider .bg-slider-next { 
	position: absolute; 
	z-index: 1; 
	top: 50%;
	margin-top: -21px;
	padding: 10px 30px;
	width: 100px; 
	background-color: #FFF;
	text-align: center;
	cursor: pointer;
}

#sample-bg-slider .bg-slider-prev { 
	left: 30px;
}

#sample-bg-slider .bg-slider-next { 
	right: 30px;
}

/* Pager
------------------------------------------------------------ */
#sample-bg-slider .bg-slider-pager { 
	height: 10px;
}

#sample-bg-slider .bg-slider-pager ul li { 
	display: inline-block;
	margin-right: 15px;
}

#sample-bg-slider .bg-slider-pager ul li a { 
	display: block;
	background-color: #FFF; /* lt-ie9 */
	background-color: rgba(255, 255, 255, 0.5);
	text-indent: -9999px;
	display: block;
	width: 10px;
	height: 10px;
	border-radius: 5px;
	-webkit-transition: all 0.3s ease 0s;
			   transition: all 0.3s ease 0s;
}

#sample-bg-slider .bg-slider-pager ul li.showPage a { 
	background: #56f5d1;	
}





/* Bootstrap Modals
======================================================================================  */
/* Full Screen
--------------------------------------------------------------------------------------------------------------------- */
/* Backdrop
------------------------------------------------------------ */
.fullscreen-modal-active .modal-backdrop {
	background-color: #FFF; /* lt-ie9 */
	background-color: rgba(255,255,255,0);
}

/* Main Container (BG Color + Animate)
------------------------------------------------------------ */
.fullscreen-modal {
	background-color: #FFF;
}

.fullscreen-modal.gallery {
	background-color: rgba(0,0,0,0.95);
}

.fullscreen-modal.notice {
	background-color: rgba(0,0,0,0.75);
}

.fullscreen-modal.mobile-menu {
	background-color: rgba(255,255,255,0.95);
}

.lt-ie9 .fullscreen-modal.gallery,
.lt-ie9 .fullscreen-modal.notice {
	background-color: transparent;
	background-image: url(../images/bootstrap-modal-overlay.png);
}

.fullscreen-modal.modal {
	z-index: 10001;
}

.fullscreen-modal.modal.fade .modal-dialog {
	-webkit-transform: translate(0,0);
		 -ms-transform: translate(0,0);
		 	   transform: translate(0,0);
}

.fullscreen-modal.modal.in .modal-dialog {
	-webkit-transform: translate(0,0);
		 -ms-transform: translate(0,0);
		 	   transform: translate(0,0);
}

.fullscreen-modal .modal-dialog {
  position: relative;
  width: auto;
  margin: 0;
}

@media (min-width: 768px) {
	.fullscreen-modal .modal-dialog {
	  width: auto;
	  margin: 0 auto;
	}
} /* End Mediaquerie */

/* Close Button
------------------------------------------------------------ */
.fullscreen-modal .modal-close {
	position: absolute; 
	z-index: 1;
	top: 10px; right: 0;
	width: 40px;
	height: 40px;
	border: solid 2px transparent;
	border-radius: 50%;
	color: #CCC;
	text-align: center;
	line-height: 32px;
	cursor: pointer;
}

.fullscreen-modal.gallery .modal-close {
	border-color: transparent;
	color: #666;
}

.fullscreen-modal .modal-close:hover {
	border-color: #666;
}

.fullscreen-modal.gallery .modal-close:hover {
	border-color: #CCC;
}

.fullscreen-modal .modal-close span {
	font-size: 32px;
}

.fullscreen-modal .modal-close:hover span {
	color: #666;
}

.fullscreen-modal.gallery .modal-close:hover span {
	color: #CCC;
}

/* Transition */
.fullscreen-modal .modal-close,
.fullscreen-modal .modal-close span {
	-webkit-transition: all 0.3s ease 0s;
			   transition: all 0.3s ease 0s;
}

@media (max-width: 767px) {
	.fullscreen-modal .modal-close {
		right: 10px;
	}
}

/* Content
------------------------------------------------------------ */
/* Single Horizontal Image */
.fullscreen-modal .modal-horizontal-img {
	width: 90%;
	height: auto;
}

/* Single Vertical Image */
.fullscreen-modal .modal-vertical-img {
	max-width: 100%;
	height: auto;
}

/* Text + Image */
.fullscreen-modal .article-content {
	padding-top: 75px;
	padding-bottom: 75px;
}

/* Scroll Down Gallery */
.fullscreen-modal .scrolldown-gallery {
	padding-top: 75px;
	padding-bottom: 45px;
}

.fullscreen-modal .scrolldown-gallery li {
	margin-bottom: 30px;
	text-align: center;
}

@media (max-width: 767px) {
	.fullscreen-modal .modal-vertical-img {
		width: 90%;
	}
		
	.fullscreen-modal .scrolldown-gallery li {
		margin-bottom: 20px;
	}
} /* End Mediaquerie */

.fullscreen-modal .scrolldown-gallery li img {
	max-width: 100%;
	height: auto;
}

/* Notice
--------------------------------------------------------------------------------------------------------------------- */
.fullscreen-modal .modal-notice {
	width: auto;
	text-align: center;
}

/* Animate
------------------------------------------------------------ */
.fullscreen-modal.modal.fade .modal-dialog.modal-notice {
	-webkit-transform: translate(0,0);
		 -ms-transform: translate(0,0);
		 	   transform: translate(0,0);
}

.fullscreen-modal.modal.in .modal-dialog.modal-notice {
	-webkit-transform: translate(0,30px);
		 -ms-transform: translate(0,30px);
		 	   transform: translate(0,30px);
}

.lt-ie9 .fullscreen-modal.modal.in .modal-dialog.modal-notice {
	margin-top: 30px;
}

/* Container
------------------------------------------------------------ */
.fullscreen-modal .modal-notice .status-notice {
	position: relative;
	display: inline-block;
	padding: 20px;
	margin-left: 20px;
	margin-right: 20px;
	background-color: #FFF;
	border-radius: 3px;
	-webkit-box-shadow: 0 5px 10px -5px #000;
				box-shadow: 0 5px 10px -5px #000;
}

.fullscreen-modal .modal-notice .status-notice .icon,
.fullscreen-modal .modal-notice .status-notice .detail {
	display: inline-block;
}

/* Close Button
------------------------------------------------------------ */
.fullscreen-modal .modal-notice .status-notice .notice-close {
	position: absolute;
	z-index: 1;
	top: 5px;
	right: 5px;
	width: 25px;
	height: 25px;
	border: solid 1px #FFF;
	border-radius: 50%;
	line-height: 20px;
	-webkit-transition: all 0.3s ease 0s;
			   transition: all 0.3s ease 0s;
	cursor: pointer;
}

.fullscreen-modal .modal-notice .status-notice .notice-close:hover {
	border-color: #333;
}

.fullscreen-modal .modal-notice .status-notice .notice-close span {
	font-size: 18px;
	line-height: 1;
	color: #999;
}

.fullscreen-modal .modal-notice .status-notice .notice-close:hover span {
	color: #333;
}

.fullscreen-modal .modal-notice .status-notice .notice-close,
.fullscreen-modal .modal-notice .status-notice .notice-close span {
	-webkit-transition: all 0.3s ease 0s;
			   transition: all 0.3s ease 0s;
}

/* Icon
------------------------------------------------------------ */
.fullscreen-modal .modal-notice .status-notice .icon {
	width:53px;
}

/* Detail
------------------------------------------------------------ */
.fullscreen-modal .modal-notice .status-notice .detail {
	line-height: 53px;
}

.fullscreen-modal .modal-notice .status-notice .detail p {
	display: inline-block;
	vertical-align: middle;
	margin-left: 20px;
	font-size: 16px;
	line-height: 1.6;
}

@media (max-width: 767px) {
	.fullscreen-modal .modal-notice .status-notice .icon {
		margin-bottom: 10px;
	}
	
	.fullscreen-modal .modal-notice .status-notice .detail p {
		margin-left: 0;
	}
} /* End Mediaquerie */





/* Bootstrap Collapse
======================================================================================  */

/* HTML structure
------------------------------------------------------------

<div id="accordion1">

	<div class="panel">
	
		<div class="control">
			<a data-toggle="collapse" data-parent="#sample-accordion" href="#collapse1"></a>
		</div><!-- Control -->
		
		<div id="collapse1" class="collapse in">
			<div class="content"></div>
		</div><!-- Content -->
		
	</div><!-- Collapse Child -->
	
</div><!-- Collapse Parent -->

------------------------------------------------------------ */


/* Sample Accordion
--------------------------------------------------------------------------------------------------------------------- */
/* Collapse Parent
------------------------------------------------------------ */
#sample-accordion {}

/* Collapse Child
------------------------------------------------------------ */
#sample-accordion .panel {
	margin-bottom: 0;
	background-color: transparent;
	border: none;
	border-radius: 0;
	-webkit-box-shadow: 0 0 0 #000000;
	box-shadow: 0 0 0 #000000;
}

/* Control
------------------------------------------------------------ */
#sample-accordion .control {
	padding-bottom: 15px;
	margin-bottom: 15px;
	border-bottom: solid 1px #CCCCCC;
}

#sample-accordion .control a, 
#sample-accordion .control a span {
	display: block;
	-webkit-transition: all 0.3s ease 0s;
			   transition: all 0.3s ease 0s;
}

#sample-accordion .control a {
	position: relative;
	padding-right: 30px;
	font-size: 24px;
	color: #F00;
}

#sample-accordion .control a.collapsed {
	color: #333;
}

#sample-accordion .control a span {
	position: absolute;
	z-index: 1;
	top: 8px; right: 5px;
	font-size: 16px;
	color: #CCCCCC;
	
}

#sample-accordion .control a.collapsed span {
	-webkit-transform: rotate(-90deg);
		 -ms-transform: rotate(-90deg);
		 	   transform: rotate(-90deg);
}

/* Content
------------------------------------------------------------ */
#sample-accordion .content {
	margin-bottom: 20px;
}

/* Accordion for Fix Sidebar Menu (Goto mobile-menu.css)
--------------------------------------------------------------------------------------------------------------------- */





/* Tabslet
======================================================================================  */
.tabs-content.loading  {
	background: url(../images/bx_loader.gif) no-repeat center center;
}

/* Sample - Content Not Equalize
--------------------------------------------------------------------------------------------------------------------- */
/* Selector */
#sample-tabslet {
	background-color: #FFF;
}

/* Control 
------------------------------------------------------------ */
#sample-tabslet .tabs-control li a {
	display: block;
	padding: 10px 0;
	background-color: #666;
	color: #FFF;
	text-align: center;
	-webkit-transition: all 0.3s ease 0s;
			   transition: all 0.3s ease 0s;
}

#sample-tabslet .tabs-control li.active a {
	background-color: #FFF;
	color: #666;
}

/* Content 
------------------------------------------------------------ */
#sample-tabslet .tabs-content {}

/* Sample - Content Equalize
--------------------------------------------------------------------------------------------------------------------- */
/* Selector */
#sample-equalize-tabslet {
	background-color: #FFF;
}

/* Control 
------------------------------------------------------------ */
#sample-equalize-tabslet .tabs-control li a {
	display: block;
	padding: 10px 0;
	background-color: #666;
	color: #FFF;
	text-align: center;
	-webkit-transition: all 0.3s ease 0s;
			   transition: all 0.3s ease 0s;
}

#sample-equalize-tabslet .tabs-control li.active a {
	background-color: #FFF;
	color: #666;
}

/* Content 
------------------------------------------------------------ */
#sample-equalize-tabslet .tabs-content {}

#sample-equalize-tabslet .tabs-content p {
	background-color: #069;
	color: #FFF;
}





/* scrollToBySpeed
======================================================================================  */
/* no css */





/* Bootstrap ScrollSpy
======================================================================================  */
/* Sample
--------------------------------------------------------------------------------------------------------------------- */
.scrollspy-nav {
	position: fixed;
	z-index: 1;
	top: 0; left: 0;
	background-color: #000;
}

.scrollspy-nav ul li {}

.scrollspy-nav ul li a {
	color: #FFF;
	-webkit-transition: all 0.3s ease 0s;
			   transition: all 0.3s ease 0s;
}

/*.scrollspy-nav ul li a:hover {
	background-color: #000;
}*/

.scrollspy-nav ul li.active a {
	color: #F00;
}





/* Bootstrap Affix
======================================================================================  */
.affix {
    position: fixed;
    top: 15px; /* อย่างน้อยต้อง 1px ขึ้นไป (0px ไม่ได้เพราะ Affix จะแสดงผลไม่ถูกต้อง) */
}
.affix-top {
    position: static;
}
.affix-bottom {
    position: absolute;
}





/* Responsive Calendar
======================================================================================  */
#calendar {
	background-color: #FFF;
	border-bottom: solid 4px #bbbbbb;
	margin-bottom: 10px;
}

/* Month Head
--------------------------------------------------------------------------------------------------------------------- */
#calendar-month-head {
	padding: 10px 20px 0 20px;
}

/* Prev/Next
------------------------------------------------------------ */
#month-prev, 
#month-next, 
#day-prev, 
#day-next {}

#month-next {
	text-align: right;
}

#month-prev, 
#month-next {
	line-height: 36px;
}

#month-prev a, 
#month-next a {
	display: inline-block;
	vertical-align: middle;
	padding-top: 2px;
	color: #00b685;
	-webkit-transition: all 0.3s ease 0s;
			   transition: all 0.3s ease 0s;
}

#month-prev a:hover, 
#month-next a:hover {
	color: #333;
}

#month-prev a span, 
#month-next a span {
	font-size: 20px;
}

/* Month + Year
------------------------------------------------------------ */
#month-bxslider {}

#month-bxslider li {
	text-align: center;
}

#month-bxslider li span {
	display: block;
	padding-top: 5px;
	font-size: 18px;
}

/* Day Head
--------------------------------------------------------------------------------------------------------------------- */
#calendar-day-head { 
	padding: 0 20px;
}

#calendar-day-head .row { 
	overflow: hidden;
}

#calendar-day-head .row div { 
	float: left;
	width: 14.28571428%;
	text-align: center;
}

#calendar-day-head .row div span { 
	font-size: 16px;
}

/* Day Body
--------------------------------------------------------------------------------------------------------------------- */
#calendar-day-body {
	padding: 10px 20px 20px 20px;
}

#calendar-day-body .day-table { 
	border: solid 1px #CCC;
	border-bottom: none;
}

#calendar-day-body .day-table .day-row { 
	overflow: hidden;
	border-bottom: solid 1px #CCC;
}

#calendar-day-body .day-table .day-row .day-item { 
	float: left;
	width: 14.28571428%;
	text-align: center;
}

/* Calendar Event Popup 
--------------------------------------------------------------------------------------------------------------------- */
#calendar-day-body .day-table .day-row .day-item .calendar-tooltip { 
	display: block;
	border-right: solid 1px #CCC;
	line-height: 30px;
	cursor: auto;
}

@media (max-width: 360px) {
	#calendar-day-body .day-table .day-row .day-item .calendar-tooltip { 
		line-height: 30px;
	}
}

#calendar-day-body .day-table .day-row .day-item .calendar-tooltip.last { 
	border-right: none;
}

/* Day Status
------------------------------------------------------------ */
#calendar-day-body .day-table .day-row .day-item .calendar-tooltip.day { 
	position: relative;
}

#calendar-day-body .day-table .day-row .day-item .calendar-tooltip.day:before { 
	content: '';
	position: absolute;
	z-index: 1;
	bottom: 0; left: 0;
	width: 100%;
	height: 3px;
	background-color: #333;
}

#calendar-day-body .day-table .day-row .day-item .calendar-tooltip.blank { 
	background-color: #EEE;
}

#calendar-day-body .day-table .day-row .day-item .calendar-tooltip.event { 
	background-color: #00b685;
	cursor: pointer;
}

/* Number Style
------------------------------------------------------------ */
#calendar-day-body .day-table .day-row .day-item .calendar-tooltip > span { 
	display: inline-block;
	vertical-align: middle;
	font-size: 12px;
	color: #333;
}

#calendar-day-body .day-table .day-row .day-item .calendar-tooltip.event > span { 
	color: #FFF;
}

/* Popup Style
------------------------------------------------------------ */
.calendar-tooltip__detail {
	/*visibility: hidden;
	filter: Alpha(opacity=0); 
	opacity: 0;*/
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	background-color: #333;
	color: #FFF;
	-webkit-transition: all 0.3s ease 0s;
			   transition: all 0.3s ease 0s;
	cursor: auto;
}

.calendar-tooltip.active .calendar-tooltip__detail {
	display: block;
	/*visibility: visible;
	filter: Alpha(opacity=100);
	opacity: 1;*/
}

/* Event List */
.calendar-tooltip__detail ul {
	display: inline-block;
	padding: 15px;
	line-height: 1.6;
	text-align: left;
}

.calendar-tooltip__detail ul li {
	position: relative;
	margin-bottom: 5px;
}

.calendar-tooltip__detail ul li:last-child {
	margin-bottom: 0;
}

.calendar-tooltip__detail ul li a,
.calendar-tooltip__detail ul li span {
	display: block;
	font-size: 12px;
}

.calendar-tooltip__detail ul li a {
	padding-left: 20px;
	color: #FFF;
	-webkit-transition: all 0.3s ease 0s;
			   transition: all 0.3s ease 0s;
}

.calendar-tooltip__detail ul li a:hover {
	color: #00b685;
}

.calendar-tooltip__detail ul li span {
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	color: #00b685;
}

/* Close Event Button */
.calendar-tooltip__detail-close {
	display: none;
	position: absolute;
	z-index: 2;
	top: 5px;
	right: 7px;
	width: 27px;
	text-align: center;
	cursor: pointer;
}

.calendar-tooltip__detail-close span {
	font-size: 24px;
	color: #00b685;
	line-height: 1;
}





/* Bootstrap Tooltip
======================================================================================  */

/* โครงสร้าง HTML
---------------------------------------------------------------------------------------------------------------------
<a class="sample-tip" href="#" data-toggle="tooltip" data-placement="top" title="TEXT"><span>9</span></a>	
<div class="tooltip top">
	<div class="tooltip-inner">TEXT</div>
	<div class="tooltip-arrow"></div>
</div>
--------------------------------------------------------------------------------------------------------------------- */

/* Sample CSS
---------------------------------------------------------------------------------------------------------------------
.tooltip .tooltip-inner {}
.tooltip.top .tooltip-arrow {}
.tooltip.bottom .tooltip-arrow {}
.tooltip.left .tooltip-arrow {}
.tooltip.right .tooltip-arrow {}
--------------------------------------------------------------------------------------------------------------------- */





/* Intense Image Viewer 
======================================================================================  */
.intense {
	/*cursor: url("../images/intense-image-viewer-cursor.png") 25 25, auto;*/
}

.lt-ie10 .intense {
	display: none !important;
}

.lt-ie10 .fancybox-gallery.intense-replace {
	display: block !important;
}

/* Pseudo Preload */
.intense-preload {
	display: none;
	position: fixed;
	z-index: 1;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #000000;
	background-color: rgba(0,0,0,0.85);
	background-image: url(../images/fancybox_loading.gif);
	background-repeat: no-repeat;
	background-position: center center;
}





/* SlickSlider
======================================================================================  */
.slick-slider {
	position: relative;
	display: block;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-ms-touch-action: none;
	touch-action: none;
	-webkit-tap-highlight-color: transparent;
}

.slick-list {
	position: relative;
	overflow: hidden;
	display: block;
	margin: 0;
	padding: 0;
}

.slick-list:focus {
	outline: none;
}

.slick-loading .slick-list {
	background: white url(../images/slick-loader.gif) center center no-repeat;
}

.slick-list.dragging {
	cursor: pointer;
	cursor: hand;
}

.slick-slider .slick-list, .slick-track, .slick-slide, .slick-slide img {
	-webkit-transform: translate3d(0, 0, 0);
	-moz-transform: translate3d(0, 0, 0);
	-ms-transform: translate3d(0, 0, 0);
	-o-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}

.slick-track {
	position: relative;
	left: 0;
	top: 0;
	display: block;
	zoom: 1;
}

.slick-track:before, .slick-track:after {
	content: "";
	display: table;
}

.slick-track:after {
	clear: both;
}

.slick-loading .slick-track {
	visibility: hidden;
}

.slick-slide {
	float: left;
	height: 100%;
	min-height: 1px;
	display: none;
}

.slick-slide img {
	display: block;
}

.slick-slide.slick-loading img {
	display: none;
}

.slick-slide.dragging img {
	pointer-events: none;
}

.slick-initialized .slick-slide {
	display: block;
}

.slick-loading .slick-slide {
	visibility: hidden;
}

.slick-vertical .slick-slide {
	display: block;
	height: auto;
	border: 1px solid transparent;
}

/* Arrows */
.slick-prev, .slick-next {
	position: absolute;
	display: block;
	height: 20px;
	width: 20px;
	line-height: 0;
	font-size: 0;
	cursor: pointer;
	background: transparent;
	color: transparent;
	top: 50%;
	margin-top: -10px;
	padding: 0;
	border: none;
	outline: none;
}

.slick-prev:focus, .slick-next:focus {
	outline: none;
}

.slick-prev.slick-disabled:before, .slick-next.slick-disabled:before {
	opacity: 0.25;
}

.slick-prev:before, .slick-next:before {
    font-family: arrowIcon;
	font-size: 20px;
	line-height: 1;
	color: #F00;
	opacity: 0.85;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.slick-prev {
	left: -25px;
}

.slick-prev:before {
	content: "\e60c";
}

.slick-next {
	right: -25px;
}

.slick-next:before {
	content: "\e60f";
}

/* Dots */
.slick-slider {
	/*margin-bottom: 30px;*/
}

.slick-dots {
	position: absolute;
	bottom: -45px;
	list-style: none;
	display: block;
	text-align: center;
	padding: 0px;
	width: 100%;
}

.slick-dots li {
	position: relative;
	display: inline-block;
	height: 20px;
	width: 20px;
	margin: 0px 5px;
	padding: 0px;
	cursor: pointer;
}

.slick-dots li button {
	border: 0;
	background: transparent;
	display: block;
	height: 20px;
	width: 20px;
	outline: none;
	line-height: 0;
	font-size: 0;
	color: transparent;
	padding: 5px;
	cursor: pointer;
}

.slick-dots li button:focus {
	outline: none;
}

.slick-dots li button:before {
	position: absolute;
	top: 0;
	left: 0;
	content: "\e602";
	width: 20px;
	height: 20px;
    font-family: bulletIcon;
	font-size: 6px;
	line-height: 20px;
	text-align: center;
	color: black;
	opacity: 0.25;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.slick-dots li.slick-active button:before {
	opacity: 0.75;
}

/* Sample only!!! */
/* Active item in Center Mode */
.sample-slick .slick-center div {
	color: #F00;
}





/* Unveil
======================================================================================  */
/* Selector */
.lazyload {
	filter: Alpha(opacity=0);
	opacity: 0;
}





/* Tablesaw
======================================================================================  */
.dialog-content,
.dialog-background {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	display: none;
}
.dialog-background {
	background: #aaa;
	background-color: rgba(0,0,0,.4);
	z-index: 99999;
	height: 100%;
	bottom: 0;
}
.dialog-content {
	margin: 1em;
	background: #fff;
	padding: 1em 2em;
	max-width: 30em;
	box-shadow: 0 1px 2px #777;
	z-index: 100000;
}
/*
	IE8+ issue with centering dialog
	https://github.com/filamentgroup/dialog/issues/6
	requires Respond.JS for IE8
*/
@media (min-width: 30em) {
	.dialog-content {
		width: 30em;
	}
}
.dialog-open,
.dialog-background-open {
	display: block;
}
.dialog-background-trans {
	background: transparent;
}

@media (min-width: 32em){
	.dialog-content {
		margin: 4em auto 1em;
	}
}

/*! Tablesaw - v0.1.3 - 2014-05-27
* https://github.com/filamentgroup/tablesaw
* Copyright (c) 2014 Filament Group; Licensed MIT */

table.tablesaw {
  empty-cells: show;
  max-width: 100%;
  width: 100%;
}

.tablesaw {
  border-collapse: collapse;
  width: 100%;
}

/* Structure */

.tablesaw {
  border: 0;
  padding: 0;
}

.tablesaw th,
.tablesaw td {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: .5em .7em;
}

.tablesaw thead tr:first-child th {
  padding-top: .9em;
  padding-bottom: .7em;
}

.tablesaw-enhanced .tablesaw-bar .btn {
  border: 1px solid #ccc;
  background: none;
  background-color: #fafafa;
  -webkit-box-shadow: 0 1px 0 rgba(255,255,255,1);
  box-shadow: 0 1px 0 rgba(255,255,255,1);
  color: #4a4a4a;
  clear: both;
  cursor: pointer;
  display: block;
  font: bold 20px/1 sans-serif;
  margin: 0;
  padding: .5em .85em .4em .85em;
  position: relative;
  text-align: center;
  text-decoration: none;
  text-transform: capitalize;
  text-shadow: 0 1px 0 #fff;
  width: 100%;
  /* Theming */
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba( 255,255,255,.1 )), color-stop(50%, rgba( 255,255,255,.1 )), color-stop(55%, rgba( 170,170,170,.1 )), to(rgba( 120,120,120,.15 )));
  background-image: -webkit-linear-gradient(top, rgba( 255,255,255,.1 ) 0%, rgba( 255,255,255,.1 ) 50%, rgba( 170,170,170,.1 ) 55%, rgba( 120,120,120,.15 ) 100%);
  background-image: linear-gradient( top, rgba( 255,255,255,.1 ) 0%, rgba( 255,255,255,.1 ) 50%, rgba( 170,170,170,.1 ) 55%, rgba( 120,120,120,.15 ) 100% );
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  border-radius: .25em;
  opacity: 1;
}

.tablesaw-enhanced .tablesaw-bar a.btn,
.tablesaw-enhanced .tablesaw-bar button.btn,
.tablesaw-enhanced .tablesaw-bar [type="submit"].btn {
  color: #1c95d4;
}

.tablesaw-enhanced .tablesaw-bar .btn:hover {
  text-decoration: none;
}

/* Default radio/checkbox styling horizonal controlgroups. */

.tablesaw-bar .btn-selected:not(.ui-disabled):not(.btn-checkbox) {
  background-color: #29abe2;
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba( 25,25,100,.25 )), to(rgba( 255,255,255,0 )));
  background-image: -webkit-linear-gradient(top, rgba( 25,25,100,.25 ) 0%, rgba( 255,255,255,0 ) 70%);
  background-image: linear-gradient( top, rgba( 25,25,100,.25 ) 0%, rgba( 255,255,255,0 ) 70% );
  color: #fff;
  -webkit-box-shadow: inset 0 2px 8px rgba(0,0,0,.1);
  box-shadow: inset 0 2px 8px rgba(0,0,0,.1);
  text-shadow: 0 -1px 0 rgba(0,0,0,.3);
}

.ie-lte8 .tablesaw-bar .btn-selected {
  background-color: #29abe2;
  color: #fff;
}

.ie-lte8 .tablesaw-bar .btn-selected.ui-disabled,
.ie-lte8 .tablesaw-bar .btn-selected.btn-checkbox {
  background-color: #fafafa;
  color: #4d4d4d;
}

.tablesaw-enhanced .tablesaw-bar .btn:not(.ui-disabled):active {
  background-color: #ddd;
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba( 100,100,100,.35 )), to(rgba( 255,255,255,0 )));
  background-image: -webkit-linear-gradient(top, rgba( 100,100,100,.35 ) 0%, rgba( 255,255,255,0 ) 70%);
  background-image: linear-gradient( top, rgba( 100,100,100,.35 ) 0%, rgba( 255,255,255,0 ) 70% );
}

.ie-lte8 .tablesaw-bar .btn:active {
  background-color: #ddd;
}

.ie-lte8 .tablesaw-bar .btn.ui-disabled:active {
  background-color: #fafafa;
}

.tablesaw-enhanced .tablesaw-bar .btn:not(.ui-disabled):hover,
.tablesaw-enhanced .tablesaw-bar .btn:not(.ui-disabled):focus {
  /*color: #208de3;
  background-color: #fff;*/
  color: #666;
  background-color: transparent;
  outline: none;
}

.tablesaw-bar .btn:not(.ui-disabled):focus {
  -webkit-box-shadow: 0 0 .35em #4faeef !important;
  box-shadow: 0 0 .35em #4faeef !important;
}

.tablesaw-bar .btn.btn-checkbox:not(.ui-disabled) input:focus+* {
  color: #208de3;
}

.ie-lte8 .tablesaw-bar .btn:hover,
.ie-lte8 .tablesaw-bar .btn:focus {
  color: #208de3;
  background-color: #fff;
  border-color: #aaa;
  outline: none;
}

.ie-lte8 .tablesaw-bar .btn.ui-disabled:hover,
.ie-lte8 .tablesaw-bar .btn.ui-disabled:focus {
  color: #4d4d4d;
  background-color: #fafafa;
  border-color: #ccc;
  outline: auto;
}

.tablesaw-bar .btn-group > .btn:hover+.btn {
  border-left-color: #aaa;
}

.tablesaw-bar .ui-disabled {
  opacity: .5 !important;
}

.tablesaw-bar .btn-select select,
.tablesaw-bar .btn-checkbox input {
  background: none;
  border: none;
  display: block;
  position: absolute;
  font-weight: inherit;
  left: 0;
  top: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  min-height: 1em;
}

.tablesaw-bar .btn-select select,
.tablesaw-bar .btn-checkbox input {
  opacity: 0;
  display: inline-block;
  color: transparent;
}

.tablesaw-bar .btn select option {
  background: #fff;
  color: #000;
  font-family: sans-serif;
}

.ie-lte8 .tablesaw-bar .btn-select select,
.ie-lte8 .tablesaw-bar .btn-checkbox input {
  filter: alpha(opacity=0);
}

.tablesaw-enhanced .tablesaw-bar .btn.btn-select {
  color: #4d4d4d;
  padding-right: 2.5em;
  min-width: 7.25em;
  text-align: left;
  text-indent: 0;
}

.ie-lte8 .tablesaw-bar .btn-select {
  min-width: 6.1em;
}

.tablesaw-bar .btn.btn-small,
.tablesaw-bar .btn.btn-micro {
  display: inline-block;
  width: auto;
  height: auto;
  position: relative;
  top: 0;
}

.tablesaw-bar .btn.btn-small {
  font-size: 17px;
  line-height: 19px;
  padding: .3em 1em .3em 1em;
}

.tablesaw-bar .btn.btn-micro {
  font-size: 13px;
  padding: .4em .7em .25em .7em;
}

.tablesaw-bar .btn-checkbox.btn-small {
  padding-left: 2em;
}

.tablesaw-bar .btn-checkbox.btn-micro {
  padding-left: 1.8em;
}

.tablesaw-enhanced .tablesaw-bar .btn-checkbox,
.tablesaw-enhanced .tablesaw-bar .btn-select {
  text-align: left;
}

.tablesaw-enhanced .tablesaw-bar .btn-checkbox {
  padding-left: 2.35em;
}

.tablesaw-bar .btn-checkbox:after,
.tablesaw-bar .btn-select:after {
  background: #e5e5e5;
  background: rgba(0,0,0,.1);
  -webkit-box-shadow: 0 2px 2px rgba(255,255,255,.25);
  box-shadow: 0 2px 2px rgba(255,255,255,.25);
  content: " ";
  display: block;
  position: absolute;
}

.tablesaw-bar .btn-checkbox:after {
  left: .5em;
  top: 50%;
  margin-top: -.575em;
  height: 1.15em;
  width: 1.15em;
  background-color: #eee;
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba( 0,0,0,.15 )), to(rgba( 255,255,255,0 )));
  background-image: -webkit-linear-gradient(top, rgba( 0,0,0,.15 ) 0%, rgba( 255,255,255,0 ) 70%);
  background-image: linear-gradient( top, rgba( 0,0,0,.15 ) 0%, rgba( 255,255,255,0 ) 70% );
  background-repeat: none;
  border-radius: .25em;
  -webkit-box-shadow: 0 1px 0 rgba(255,255,255,1), inset 0 1px 5px rgba(100,100,100,.15);
  box-shadow: 0 1px 0 rgba(255,255,255,1), inset 0 1px 5px rgba(100,100,100,.15);
}

.ie-lte8 .tablesaw-bar .btn-checkbox:after {
  border: 1px solid #ccc;
}

.tablesaw-bar .btn-checkbox.btn-small:after {
  left: .3em;
}

.tablesaw-bar .btn-checkbox.btn-micro:after {
  left: .25em;
}

.tablesaw-bar .btn-select.btn-small,
.tablesaw-bar .btn-select.btn-micro {
  padding-right: 1.5em;
}

.tablesaw-bar .btn-select:after {
  background: none;
  background-repeat: no-repeat;
  background-position: .25em .45em;
  content: "\25bc";
  font-size: .55em;
  padding-top: 1.2em;
  padding-left: 1em;
  left: auto;
  right: 0;
  margin: 0;
  top: 0;
  bottom: 0;
  width: 1.8em;
}

.tablesaw-bar .btn-select.btn-small:after,
.tablesaw-bar .btn-select.btn-micro:after {
  width: 1.2em;
  font-size: .5em;
  padding-top: 1em;
  padding-right: .5em;
  line-height: 1.65;
  background: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  border-left-width: 0;
}

.tablesaw-bar .btn-selected.btn-checkbox:after {
  -webkit-box-shadow: 0 1px 0 rgba(255,255,255,1), inset 0 1px 5px rgba(0,75,115,.45);
  box-shadow: 0 1px 0 rgba(255,255,255,1), inset 0 1px 5px rgba(0,75,115,.45);
  background-color: #34a3de;
  color: #fff;
  -webkit-background-size: 115% 115%;
  background-size: 115% 115%;
  background-position: -1px -1px;
}

/* Themes */

/* Simplified */

.tablesaw-bar .btn-group .btn.theme-simple,
.tablesaw-bar .btn-group .btn.theme-simple:first-child,
.tablesaw-bar .btn-group .btn.theme-simple:last-child,
.tablesaw-bar .btn.theme-simple {
  border: none;
  border-radius: 0;
  margin-bottom: .35em;
  margin-top: .35em;
}

.tablesaw-bar .btn.theme-simple {
  background: transparent;
  border-width: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
  display: block;
  font-weight: normal;
}

.tablesaw-bar .btn.theme-simple.btn-selected {
  font-weight: bold;
}

.tablesaw-bar .btn.theme-simple:not(.ui-disabled):hover,
.tablesaw-bar .btn.theme-simple:not(.ui-disabled):focus {
  background: transparent;
}

.tablesaw-bar .btn.theme-simple:active {
  background: none;
}

.tablesaw-bar .btn.theme-simple.ruled {
  border-width: 1px 0;
}

.tablesaw-bar .btn.theme-simple+.theme-simple {
  border-top: none;
  border-radius: 0;
}

/* Column navigation buttons for swipe and columntoggle tables */

.tablesaw-bar .tablesaw-advance {
  position: relative;
  top: -2.6em;
}

.tablesaw-advance .btn {
  -webkit-appearance: none;
  -moz-appearance: none;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  text-shadow: 0 1px 0 #fff;
  border-radius: .25em;
}

.tablesaw-advance .btn.btn-micro {
  font-size: .8125em;
  padding: .4em .7em .25em .7em;
}

.tablesaw-bar .tablesaw-advance a.tablesaw-nav-btn {
  display: inline-block;
  overflow: hidden;
  width: 1.8em;
  height: 1.8em;
  background-position: 50% 50%;
  margin-left: .5em;
}

.tablesaw-advance a.tablesaw-nav-btn.disabled {
  opacity: .25;
  cursor: default;
  pointer-events: none;
}

/* Table Toolbar */

.tablesaw-bar {
  clear: both;
  font-family: sans-serif;
}

.tablesaw-bar.mode-swipe,
.tablesaw-bar.mode-columntoggle {
  margin-top: -2em;
  position: relative;
  top: 2em;
}

.tablesaw-toolbar {
  font-size: .875em;
}

.tablesaw-toolbar label {
  padding: .5em 0;
  clear: both;
  display: block;
  color: #888;
  margin-right: .5em;
  text-transform: uppercase;
}

.tablesaw-bar .btn,
.tablesaw-enhanced .tablesaw-bar .btn {
  margin-top: .5em;
  margin-bottom: .5em;
}

.tablesaw-bar .btn-select,
.tablesaw-enhanced .tablesaw-bar .btn-select {
  margin-bottom: 0;
}

.tablesaw-bar .tablesaw-toolbar .btn {
  margin-left: .4em;
  margin-top: 0;
  text-transform: uppercase;
  border: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  background: transparent;
  font-family: sans-serif;
  font-size: 1em;
  padding-left: .3em;
}

.tablesaw-bar .tablesaw-toolbar .btn-select {
  min-width: 0;
}

.tablesaw-bar .tablesaw-toolbar .btn-select:after {
  padding-top: .9em;
}

.tablesaw-bar .tablesaw-toolbar select {
  color: #888;
  text-transform: none;
  background: transparent;
}

.tablesaw-toolbar ~ table {
  clear: both;
}

.tablesaw-toolbar .a11y-sm {
  clip: rect(0 0 0 0);
  height: 1px;
  overflow: hidden;
  position: absolute;
  width: 1px;
}

@media (min-width: 24em) {
  .tablesaw-toolbar .a11y-sm {
    clip: none;
    height: auto;
    width: auto;
    position: static;
    overflow: visible;
  }
}

@media (min-width: 40em) {
  .tablesaw-bar.mode-swipe,
  .tablesaw-bar.mode-columntoggle {
    margin-top: 0;
    top: 0;
  }

  .tablesaw-bar .tablesaw-advance {
    position: static;
  }

  .tablesaw-bar {
    margin-top: 0;
    position: static;
  }
}



table.tablesaw tbody th {
  font-weight: bold;
}

table.tablesaw thead th,
table.tablesaw thead td {
  color: #444;
  font-size: .9em;
}

.tablesaw th,
.tablesaw td {
  line-height: 1em;
  text-align: left;
  vertical-align: middle;
}

.tablesaw td,
.tablesaw tbody th {
  vertical-align: middle;
  font-size: 1.17em;
  /* 19px */
}

.tablesaw td .btn,
.tablesaw tbody th .btn {
  margin: 0;
}

.tablesaw thead {
  border: 1px solid #e5e5e4;
  background: #e2dfdc;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#e2dfdc));
  background-image: -webkit-linear-gradient(top, #fff, #e2dfdc);
  background-image: linear-gradient(to bottom, #fff, #e2dfdc);
}

.tablesaw thead th {
  font-weight: 100;
  color: #777;
  text-transform: uppercase;
  text-shadow: 0 1px 0 #fff;
  text-align: left;
}

.tablesaw thead tr:first-child th {
  font-weight: normal;
  font-family: sans-serif;
  border-right: 1px solid #e4e1de;
}

/* Table rows have a gray bottom stroke by default */

.tablesaw tbody tr {
  border-bottom: 1px solid #dfdfdf;
}

.tablesaw caption {
  text-align: left;
  margin-bottom: 1.4em;
  opacity: 50%;
}

/* Stack */

.tablesaw-cell-label-top {
  text-transform: uppercase;
  font-size: .9em;
  font-weight: normal;
}

.tablesaw-cell-label {
  font-size: .65em;
  text-transform: uppercase;
  color: #888;
  font-family: sans-serif;
}

@media (min-width: 40em) {
  .tablesaw td {
    line-height: 2em;
  }
}

/* Table rows have a gray bottom stroke by default */

.tablesaw-stack tbody tr {
  border-bottom: 1px solid #dfdfdf;
}

.tablesaw-stack td .tablesaw-cell-label,
.tablesaw-stack th .tablesaw-cell-label {
  display: none;
}

/* Mobile first styles: Begin with the stacked presentation at narrow widths */

@media only all {
  /* Show the table cells as a block level element */

  .tablesaw-stack td,
  .tablesaw-stack th {
    text-align: left;
    display: block;
  }

  .tablesaw-stack tr {
    clear: both;
    display: table-row;
  }

  /* Make the label elements a percentage width */

  .tablesaw-stack td .tablesaw-cell-label,
  .tablesaw-stack th .tablesaw-cell-label {
    display: block;
    padding: 0 .6em 0 0;
    min-width: 30%;
    display: inline-block;
  }

  /* For grouped headers, have a different style to visually separate the levels by classing the first label in each col group */

  .tablesaw-stack th .tablesaw-cell-label-top,
  .tablesaw-stack td .tablesaw-cell-label-top {
    display: block;
    padding: .4em 0;
    margin: .4em 0;
  }

  .tablesaw-cell-label {
    display: block;
  }

  /* Avoid double strokes when stacked */

  .tablesaw-stack tbody th.group {
    margin-top: -1px;
  }

  /* Avoid double strokes when stacked */

  .tablesaw-stack th.group b.tablesaw-cell-label {
    display: none !important;
  }
}

@media (max-width: 39.9375em) {
  .tablesaw-stack thead td,
  .tablesaw-stack thead th {
    display: none;
  }

  .tablesaw-stack tbody td,
  .tablesaw-stack tbody th {
    clear: left;
    float: left;
    width: 100%;
  }
}

/* Media query to show as a standard table at 560px (35em x 16px) or wider */

@media (min-width: 40em) {
  .tablesaw-stack tr {
    display: table-row;
  }

  /* Show the table header rows */

  .tablesaw-stack td,
  .tablesaw-stack th,
  .tablesaw-stack thead td,
  .tablesaw-stack thead th {
    display: table-cell;
    margin: 0;
  }

  /* Hide the labels in each cell */

  .tablesaw-stack td .tablesaw-cell-label,
  .tablesaw-stack th .tablesaw-cell-label {
    display: none !important;
  }
}

.tablesaw-fix-persist {
  table-layout: fixed;
}

/* see Gruntfile.js for grunticon selector */

.btn.tablesaw-columntoggle-btn {
  float: right;
}

.btn.tablesaw-columntoggle-btn span {
  text-indent: -9999px;
  display: inline-block;
}

.tablesaw-columntoggle-btnwrap .dialog-content {
  padding: 0;
}

.tablesaw-columntoggle tbody td {
  line-height: 1.5;
}

/* Remove top/bottom margins around the fieldcontain on check list */

.tablesaw-columntoggle-popup fieldset {
  margin: 0;
}

/* Hide all prioritized columns by default */

@media only all {
  .tablesaw-columntoggle th.tablesaw-priority-6,
  .tablesaw-columntoggle td.tablesaw-priority-6,
  .tablesaw-columntoggle th.tablesaw-priority-5,
  .tablesaw-columntoggle td.tablesaw-priority-5,
  .tablesaw-columntoggle th.tablesaw-priority-4,
  .tablesaw-columntoggle td.tablesaw-priority-4,
  .tablesaw-columntoggle th.tablesaw-priority-3,
  .tablesaw-columntoggle td.tablesaw-priority-3,
  .tablesaw-columntoggle th.tablesaw-priority-2,
  .tablesaw-columntoggle td.tablesaw-priority-2,
  .tablesaw-columntoggle th.tablesaw-priority-1,
  .tablesaw-columntoggle td.tablesaw-priority-1 {
    display: none;
  }
}

.tablesaw-columntoggle-btnwrap {
  position: relative;
  float: right;
}

.tablesaw-columntoggle-btnwrap .dialog-content {
  top: 0 !important;
  right: 1em;
  left: auto !important;
  width: 12em;
  max-width: 18em;
  margin: -.5em auto 0;
}

.tablesaw-columntoggle-btnwrap .btn-group .btn.theme-simple:first-child {
  margin-top: 0;
  border-top-right-radius: .5em;
  border-top-left-radius: .5em;
}

.tablesaw-columntoggle-btnwrap .btn-group .btn.theme-simple:last-child {
  border-bottom-right-radius: .5em;
  border-bottom-left-radius: .5em;
}

.tablesaw-columntoggle-btnwrap .btn-group .btn.theme-simple {
  margin-bottom: .1em;
  margin-top: .1em;
}

.tablesaw-columntoggle-btnwrap .dialog-content:focus {
  outline-style: none;
}

.dialog-table-coltoggle {
  border-radius: .5em;
}

/* Preset breakpoints if "" class added to table */

/* Show priority 1 at 320px (20em x 16px) */

@media screen and (min-width: 20em) {
  .tablesaw-columntoggle th.tablesaw-priority-1,
  .tablesaw-columntoggle td.tablesaw-priority-1 {
    display: table-cell;
  }
}

/* Show priority 2 at 480px (30em x 16px) */

@media screen and (min-width: 30em) {
  .tablesaw-columntoggle th.tablesaw-priority-2,
  .tablesaw-columntoggle td.tablesaw-priority-2 {
    display: table-cell;
  }
}

/* Show priority 3 at 640px (40em x 16px) */

@media screen and (min-width: 40em) {
  .tablesaw-columntoggle th.tablesaw-priority-3,
  .tablesaw-columntoggle td.tablesaw-priority-3 {
    display: table-cell;
  }

  .tablesaw-columntoggle tbody td {
    line-height: 2;
  }
}

/* Show priority 4 at 800px (50em x 16px) */

@media screen and (min-width: 50em) {
  .tablesaw-columntoggle th.tablesaw-priority-4,
  .tablesaw-columntoggle td.tablesaw-priority-4 {
    display: table-cell;
  }
}

/* Show priority 5 at 960px (60em x 16px) */

@media screen and (min-width: 60em) {
  .tablesaw-columntoggle th.tablesaw-priority-5,
  .tablesaw-columntoggle td.tablesaw-priority-5 {
    display: table-cell;
  }
}

/* Show priority 6 at 1,120px (70em x 16px) */

@media screen and (min-width: 70em) {
  .tablesaw-columntoggle th.tablesaw-priority-6,
  .tablesaw-columntoggle td.tablesaw-priority-6 {
    display: table-cell;
  }
}

@media only all {
  .tablesaw-swipe .tablesaw-cell-persist {
    border-right: 1px solid #e4e1de;
  }

  .tablesaw-swipe .tablesaw-cell-persist {
    -webkit-box-shadow: 3px 0 4px -1px #e4e1de;
    box-shadow: 3px 0 4px -1px #e4e1de;
  }

  /* Unchecked manually: Always hide */

  .tablesaw-swipe th.tablesaw-cell-hidden,
  .tablesaw-swipe td.tablesaw-cell-hidden,
  .tablesaw-columntoggle th.tablesaw-cell-hidden,
  .tablesaw-columntoggle td.tablesaw-cell-hidden {
    display: none;
  }

  /* Checked manually: Always show */

  .tablesaw-columntoggle th.tablesaw-cell-visible,
  .tablesaw-columntoggle td.tablesaw-cell-visible {
    display: table-cell;
  }
}

/* Vertical Button Grouping (default) */

.tablesaw-columntoggle-popup .btn-group {
  margin: 0;
  padding: 0;
}

.tablesaw-columntoggle-popup .btn-group .btn {
  margin: 0;
}

.tablesaw-columntoggle-popup .btn-group > .btn {
  margin-top: 0;
  border-radius: 0;
  border-top-width: 0;
  width: 100%;
}

.tablesaw-columntoggle-popup .btn-group > .btn:first-child {
  border-top-width: 1px;
  border-top-left-radius: .25em;
  border-top-right-radius: .25em;
}

.tablesaw-columntoggle-popup .btn-group > .btn:last-child {
  border-bottom-left-radius: .25em;
  border-bottom-right-radius: .25em;
}

.tablesaw-sortable,
.tablesaw-sortable thead,
.tablesaw-sortable thead tr,
.tablesaw-sortable thead tr th {
  position: relative;
}

.tablesaw-sortable thead tr th {
  padding-right: 1.6em;
  vertical-align: top;
}

.tablesaw-sortable th.sortable-head,
.tablesaw-sortable tr:first-child th.sortable-head {
  padding: 0;
}

.tablesaw-sortable th.sortable-head button {
  padding-top: .9em;
  padding-bottom: .7em;
  padding-left: .6em;
  padding-right: 1.6em;
}

.tablesaw-sortable .sortable-head button {
  min-width: 100%;
  color: inherit;
  background: transparent;
  border: 0;
  padding: 0;
  text-align: left;
  font: inherit;
  text-transform: inherit;
  position: relative;
}

.tablesaw-sortable .sortable-head.sortable-ascending button:after,
.tablesaw-sortable .sortable-head.sortable-descending button:after {
  width: 7px;
  height: 10px;
  content: "\0020";
  position: absolute;
  right: .5em;
}

.tablesaw-sortable .not-applicable:after {
  content: "--";
  display: block;
}

.tablesaw-sortable .not-applicable span {
  display: none;
}

.tablesaw-sortable-switch {
  float: left;
  width: 100%;
}

@media (min-width: 40em) {
  .tablesaw-sortable-switch {
    width: auto;
  }
}

.tablesaw-advance {
  display: block;
  float: right;
}

.tablesaw-advance.minimap {
  margin-right: .4em;
}

.tablesaw-advance-dots {
  float: left;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tablesaw-advance-dots li {
  display: table-cell;
  margin: 0;
  padding: .4em .2em;
}

.tablesaw-advance-dots li i {
  width: .25em;
  height: .25em;
  background: #555;
  border-radius: 100%;
  display: inline-block;
}

.tablesaw-advance-dots-hide {
  opacity: .25;
  cursor: default;
  pointer-events: none;
}

.tablesaw-modeswitch {
  clear: both;
}

.tablesaw-sortable-switch + .tablesaw-modeswitch {
  border-top: 1px solid #eae8e6;
}

@media (min-width: 40em) {
  .tablesaw-modeswitch {
    float: left;
    clear: none;
  }

  .tablesaw-sortable-switch + .tablesaw-modeswitch {
    border-top: none;
  }
}



/* Edit Tablesaw
--------------------------------------------------------------------------------------------------------------------- */
/* Container */
.datatable {}

/* Table Style (Not Stack)
------------------------------------------------------------ */
.datatable .tablesaw {
	background-color: #CCC;
}

/* Header */
.datatable .tablesaw thead {
	border: solid 1px #999;
  	background: none;
}

.datatable .tablesaw thead tr:first-child th {
	border-right: solid 1px #999;
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 16px;
	color: #666;
	text-transform: none;
	text-shadow: none;
}

.datatable .tablesaw-sortable th.sortable-head button {
    padding: 15px 40px 15px 20px;
}

/* Content */
.datatable .tablesaw tbody {
	background-color: #FFF;
}

.datatable .tablesaw td {
	padding: 10px 20px;
	border: solid 1px #999;
	font-size: 14px;
	color: #666;
	line-height: 1.6;
}

@media (max-width: 39.9375em) {
	.datatable {
		padding: 0 20px;
	}
	
	.datatable .tablesaw,
	.datatable .tablesaw tbody {
		background-color: transparent;
	}
	
	.datatable .tablesaw thead,
	.datatable .tablesaw td {
		border: none;
	}
	
	.datatable .tablesaw td:first-child {
		padding: 10px 0;
	}
	
	.datatable .tablesaw td {
		padding: 0 0 10px 0;
	}
}

/* Table Style (Stack)
------------------------------------------------------------ */
.datatable .tablesaw-stack tbody tr {
	border-bottom: 1px solid #F00;
}

.datatable .tablesaw-cell-label {
	font-family: Tahoma, Geneva, sans-serif;
    font-size: 14px;
    color: #666;
    text-transform: none;
}

@media only all {
	.datatable .tablesaw-stack td .tablesaw-cell-label,
	.datatable .tablesaw-stack th .tablesaw-cell-label {
		padding: 0 20px 0 0;
		min-width: 40%;
		max-width: 40%;
	}
}

/* Sort Control
------------------------------------------------------------ */
/* Text Style */
.datatable .tablesaw-toolbar {
	font-size: 14px;
}

.datatable .tablesaw-toolbar label {
	clear: both;
	display: block;
	padding: 0;
	margin: 0 0 10px 0;
	font-weight: normal;
	color: #333;
	text-transform: uppercase;
}

/* Select Arrow */
.datatable .tablesaw-bar .tablesaw-toolbar .btn-select:after {
	width: auto;
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 10px;
	padding-top: 7px;
	padding-right: 8px;
	line-height: 1;
	background: none;
	-webkit-box-shadow: none;
	box-shadow: none;
	border-left-width: 0;
}

/* Select Box */
.datatable .tablesaw-bar .btn.btn-small {
	line-height: 1;
	padding: 0;
}

.datatable .tablesaw-bar .tablesaw-toolbar .btn {
	margin-top: -5px;
	margin-left: 15px;
}

.tablesaw-enhanced .datatable .tablesaw-bar .btn {
	border-radius: 0;
}

.tablesaw-enhanced .datatable .tablesaw-bar .btn.btn-select {
	color: #666;
	padding: 5px 25px 5px 10px;
	min-width: 100px;
	border: solid 1px #CCC;
	background-color: #FFF;
	font-size: 14px;
	font-weight: normal;
	text-transform: none;
	text-shadow: none;
	text-align: left;
	text-indent: 0;
}

/* Sort Table Arrow */
.datatable .tablesaw-sortable .sortable-head.sortable-ascending button:after {
	background-image: url(../images/sort-up-arrow.png);
	background-repeat: no-repeat;
}

.datatable .tablesaw-sortable .sortable-head.sortable-descending button:after {
	background-image: url(../images/sort-down-arrow.png);
	background-repeat: no-repeat;
}

.lt-ie9 .datatable .tablesaw-sortable .sortable-head.sortable-ascending button:after,
.lt-ie9 .datatable .tablesaw-sortable .sortable-head.sortable-descending button:after{
	background-image: none;
}

.datatable .tablesaw-sortable .sortable-head.sortable-ascending button:after,
.datatable .tablesaw-sortable .sortable-head.sortable-descending button:after {
	content: "";
	position: absolute;
	top: 19px;
	right: 15px;
	width: 14px;
	height: 8px;
}





/*	Fancybox v2.1.5
====================================================================================== */
.fancybox-wrap,
.fancybox-skin,
.fancybox-outer,
.fancybox-inner,
.fancybox-image,
.fancybox-wrap iframe,
.fancybox-wrap object,
.fancybox-nav,
.fancybox-nav span,
.fancybox-tmp
{
	padding: 0;
	margin: 0;
	border: 0;
	outline: none;
	vertical-align: top;
}

.fancybox-wrap {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 8020;
	cursor: auto;
}

.fancybox-skin {
	position: relative;
	background: #f9f9f9;
	color: #444;
	text-shadow: none;
	-webkit-border-radius: 4px;
	   -moz-border-radius: 4px;
	        border-radius: 4px;
}

.fancybox-opened {
	z-index: 8030;
}

.fancybox-opened .fancybox-skin {
	-webkit-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
	   -moz-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
	        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}

.fancybox-outer, .fancybox-inner {
	position: relative;
}

.fancybox-inner {
	overflow: hidden;
}

.fancybox-type-iframe .fancybox-inner {
	-webkit-overflow-scrolling: touch;
}

.fancybox-error {
	color: #444;
	font: 14px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;
	margin: 0;
	padding: 15px;
	white-space: nowrap;
}

.fancybox-image, .fancybox-iframe {
	display: block;
	width: 100%;
	height: 100%;
}

.fancybox-image {
	max-width: 100%;
	max-height: 100%;
}

#fancybox-loading, .fancybox-prev span, .fancybox-next span {
	background-image: url(../images/fancybox_sprite.png);
}

#fancybox-loading {
	position: fixed;
	top: 50%;
	left: 50%;
	margin-top: -22px;
	margin-left: -22px;
	background-position: 0 -108px;
	opacity: 0.8;
	cursor: pointer;
	z-index: 8060;
}

#fancybox-loading div {
	width: 44px;
	height: 44px;
	background: url(../images/fancybox_loading.gif) center center no-repeat;
}

.fancybox-close {
	position: absolute; bottom: 20px; left: 50%; margin-left: -20px;
	width: 40px; height: 40px;
	background: url(../images/fancybox-close-button.png) no-repeat 0 0;
	cursor: pointer;
	z-index: 8040;
}

.fancybox-close:active {
	background-position: 0 -40px;
}

.fancybox-nav {
	position: absolute;
	top: 0;
	width: 40%;
	height: 100%;
	cursor: default;
	text-decoration: none;
	background: transparent url(../images/blank.gif); /* helps IE */
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	z-index: 8040;
}

/* 
	Outside Prev/Next Button
	ถ้ากำหนดให้ปุ่ม Prev/Next อยู่ด้านนอกรูป 
	จะทำให้เมื่อเวลาเอาเมาส์ไปวางบนรูป แล้วจะ Scroll เปลี่ยนรูปไม่ได้ 
*/

.fancybox-prev { 
	left: -60px; 
}

.fancybox-next { 
	right: -60px; 
}

.fancybox-nav span { 
	position: absolute; top: 50%; margin-top: -42px;
	width: 30px; height: 84px;
	cursor: pointer;
	z-index: 8040;
	visibility: visible; 
	opacity: 0.5; 
	filter: alpha(opacity:50); /* for IE8 */ 
	transition: opacity 0.5s ease 0s;
	-webkit-transition: opacity 0.5s ease 0s;
}

.fancybox-prev span {
	left: 0;
	background: url(../images/fancybox-prev-arrow.png) no-repeat 0 0;
}

.fancybox-next span {
	right: 0;
	background: url(../images/fancybox-next-arrow.png) no-repeat 0 0;
}

.fancybox-nav:hover span { 
	opacity: 1; 
	filter: alpha(opacity:100); /* for IE8 */ 
}

.fancybox-nav:active span { 
	background-position: 0 -84px;
}

.fancybox-tmp {
	position: absolute;
	top: -99999px;
	left: -99999px;
	visibility: hidden;
	max-width: 99999px;
	max-height: 99999px;
	overflow: visible !important;
}

/* Overlay helper */

.fancybox-lock {
    overflow: hidden !important;
    width: auto;
}

.fancybox-lock body {
    overflow: hidden !important;
}

.fancybox-lock-test {
    overflow-y: hidden !important;
}

.fancybox-overlay {
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
	display: none;
	z-index: 8010;
	background: url(../images/fancybox_overlay.png);
	cursor: pointer;
}

.fancybox-overlay-fixed {
	position: fixed;
	bottom: 0;
	right: 0;
}

.fancybox-lock .fancybox-overlay {
	overflow: auto;
	overflow-y: scroll;
}

/* Title helper */

.fancybox-title {
	visibility: hidden;
	font: normal 13px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;
	position: relative;
	text-shadow: none;
	z-index: 8050;
}

.fancybox-opened .fancybox-title {
	visibility: visible;
}

.fancybox-title-float-wrap {
	position: absolute;
	bottom: 0;
	right: 50%;
	margin-bottom: -35px;
	z-index: 8050;
	text-align: center;
}

.fancybox-title-float-wrap .child {
	display: inline-block;
	margin-right: -100%;
	padding: 2px 20px;
	background: transparent; /* Fallback for web browsers that doesn't support RGBa */
	background: rgba(0, 0, 0, 0.8);
	-webkit-border-radius: 15px;
	   -moz-border-radius: 15px;
	        border-radius: 15px;
	text-shadow: 0 1px 2px #222;
	color: #FFF;
	font-weight: bold;
	line-height: 24px;
	white-space: nowrap;
}

.fancybox-title-outside-wrap {
	position: relative;
	margin-top: 10px;
	color: #fff;
	text-align: center;
}

.fancybox-title-inside-wrap {
	padding-top: 10px;
}

.fancybox-title-over-wrap {
	position: absolute;
	bottom: 0;
	left: 0;
	color: #fff;
	padding: 10px;
	background: #000;
	background: rgba(0, 0, 0, .8);
}

/*Retina graphics!*/
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
	   only screen and (min--moz-device-pixel-ratio: 1.5),
	   only screen and (min-device-pixel-ratio: 1.5){

	#fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span {
		background-image: url(../images/fancybox_sprite@2x.png);
		background-size: 44px 152px; /*The size of the normal image, half the size of the hi-res image*/
	}

	#fancybox-loading div {
		background-image: url(../images/fancybox_loading@2x.gif);
		background-size: 24px 24px; /*The size of the normal image, half the size of the hi-res image*/
	}
}



/*	Edit Fancybox
--------------------------------------------------------------------------------------------------------------------- */
/* Fancybox Preload
------------------------------------------------------------ */
#fancybox-loading {
	opacity: 1;
}

/* Fancybox Utility Style
------------------------------------------------------------ */
.fancybox-hide { 
	display: none; 
}

/* Customize Wrapping Element
------------------------------------------------------------ */
.fancybox-custom .fancybox-skin {
	box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.5);
	border: solid 5px #F00;
	border-radius: 0px;
}

/* Social Link at Title
------------------------------------------------------------ */
.fancybox-title a { display: block; float: right; color: #0FF; }

/* Pagination
------------------------------------------------------------ */
#fancybox-pagination {
	position: fixed; bottom: 60px; right: 9px;
	width: 100%; padding: 0; margin: 0;
	list-style: none; text-align: center;
	z-index: 99999;
}
#fancybox-pagination li { display: inline; padding: 0 5px; }
#fancybox-pagination li label {
	width: 12px; height: 12px;
	border-radius: 100%;
	display: inline-block;
	background-color: rgba(0, 0, 0, 0.6);
	cursor: pointer;
}
#fancybox-pagination li.active label {
	background-color: white;
}		

/* Customize Close, Prev, Next Button
------------------------------------------------------------ */
.fancybox-custom-button-wrap .fancybox-skin {
	box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.5);
	border: solid 10px #FFF;
	border-radius: 0px;
}

/* Close Button */
.fancybox-custom-close {
	display: block; 
	position: absolute; 
	z-index: 8040;
	top: 5px; 
	right: 10px;
	/*width: 32px;
	height: 32px;
	border-radius: 50%;
	background-color: #333;
	background-color: rgba(0,0,0,0.5);*/
	margin-top: -3px;
	font-size: 32px;
	color: #000;
	text-align: center;
	text-decoration: none;
	line-height: 1;
	-webkit-transition: all 0.3s ease 0s;
			   transition: all 0.3s ease 0s;
}

.fancybox-custom-close:hover {
	/*background-color: rgba(0,0,0,0.75);
	color: #FFF;*/
	color: #000;
}

.fancybox-custom-close:active { 
	-webkit-transform: scale(0.85,0.85);
		 -ms-transform: scale(0.85,0.85);
		 	   transform: scale(0.85,0.85);
}

/* Field Button */
.fancybox-custom-nav {
	position: absolute; 
	z-index: 8040;
	top: 0;
	width: 50%; 
	height: 100%;
	background: transparent url('../images/blank.gif'); /* helps IE */
	text-decoration: none;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	cursor: default;
}

/* Field Button Position */
.fancybox-custom-prev { left: 0; }	
.fancybox-custom-next { right: 0; }

/* Prev/Next Button */
.fancybox-custom-nav span {
	display: block; 
	position: absolute; 
	z-index: 8040;
	bottom: 5px;
	padding: 5px 10px;
	background: #333; /* lt-ie9 */
	background-color: rgba(0,0,0,0.5);
	color: #999; 
	text-decoration: none; 
	text-align: center;
	visibility: visible; 
	cursor: pointer;
	-webkit-transition: all 0.3s ease 0s;
			   transition: all 0.3s ease 0s;
}

.fancybox-custom-nav span:hover { 
	background-color: rgba(0,0,0,0.75);
	color: #FFF;
}

.fancybox-custom-nav span:active { 
	-webkit-transform: scale(0.85,0.85);
		 -ms-transform: scale(0.85,0.85);
		 	   transform: scale(0.85,0.85);
}

/* Prev/Next Button Position */
.fancybox-custom-prev span { right: 3px; }
.fancybox-custom-next span { left: 3px; }

/* Inline 960 x 600 px
------------------------------------------------------------ */
.fancybox-inline-wrap .fancybox-skin {
	box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
	border-radius: 0px;
	background-color: #FFFFFF;
}
.fancybox-inline-content {
	width: 975px; /* 960px + 10px for Scrollbar margin */ 
	height: 600px;
}





/*	mCustomScrollbar
====================================================================================== */
/* basic scrollbar styling + vertical scrollbar */
.mCSB_container{
	width:auto;
	margin-right:15px;
	overflow:hidden;
}
.mCSB_container.mCS_no_scrollbar{
	margin-right:0;
}
.mCS_disabled>.mCustomScrollBox>.mCSB_container.mCS_no_scrollbar,
.mCS_destroyed>.mCustomScrollBox>.mCSB_container.mCS_no_scrollbar{
	margin-right:30px;
}
.mCustomScrollBox>.mCSB_scrollTools{
	width:16px;
	height:100%;
	top:0;
	right:0;
}
.mCSB_scrollTools .mCSB_draggerContainer{
	position:absolute;
	top:0;
	left:0;
	bottom:0;
	right:0; 
	height:auto;
}
.mCSB_scrollTools a+.mCSB_draggerContainer{
	margin:20px 0;
}
.mCSB_scrollTools .mCSB_draggerRail{
	width:2px;
	height:100%;
	margin:0 auto;
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
	border-radius:10px;
}
.mCSB_scrollTools .mCSB_dragger{
	cursor:pointer;
	width:100%;
	height:30px;
}
.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
	width:4px;
	height:100%;
	margin:0 auto;
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
	border-radius:10px;
	text-align:center;
}
.mCSB_scrollTools .mCSB_buttonUp,
.mCSB_scrollTools .mCSB_buttonDown{
	display:block;
	position:relative;
	height:20px;
	overflow:hidden;
	margin:0 auto;
	cursor:pointer;
}
.mCSB_scrollTools .mCSB_buttonDown{
	top:100%;
	margin-top:-40px;
}
/* horizontal scrollbar */
.mCSB_horizontal>.mCSB_container{
	height:auto;
	margin-right:0;
	margin-bottom:30px;
	overflow:hidden;
}
.mCSB_horizontal>.mCSB_container.mCS_no_scrollbar{
	margin-bottom:0;
}
.mCS_disabled>.mCSB_horizontal>.mCSB_container.mCS_no_scrollbar,
.mCS_destroyed>.mCSB_horizontal>.mCSB_container.mCS_no_scrollbar{
	margin-right:0;
	margin-bottom:30px;
}
.mCSB_horizontal.mCustomScrollBox>.mCSB_scrollTools{
	width:100%;
	height:16px;
	top:auto;
	right:auto;
	bottom:0;
	left:0;
	overflow:hidden;
}
.mCSB_horizontal>.mCSB_scrollTools a+.mCSB_draggerContainer{
	margin:0 20px;
}
.mCSB_horizontal>.mCSB_scrollTools .mCSB_draggerRail{
	width:100%;
	height:2px;
	margin:7px 0;
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
	border-radius:10px;
}
.mCSB_horizontal>.mCSB_scrollTools .mCSB_dragger{
	width:30px;
	height:100%;
}
.mCSB_horizontal>.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
	width:100%;
	height:4px;
	margin:6px auto;
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
	border-radius:10px;
}
.mCSB_horizontal>.mCSB_scrollTools .mCSB_buttonLeft,
.mCSB_horizontal>.mCSB_scrollTools .mCSB_buttonRight{
	display:block;
	position:relative;
	width:20px;
	height:100%;
	overflow:hidden;
	margin:0 auto;
	cursor:pointer;
	float:left;
}
.mCSB_horizontal>.mCSB_scrollTools .mCSB_buttonRight{
	margin-left:-40px;
	float:right;
}
.mCustomScrollBox{
	-ms-touch-action:none; /*MSPointer events - direct all pointer events to js*/
}

/* default scrollbar colors and backgrounds (default theme) */
.mCustomScrollBox>.mCSB_scrollTools{
	opacity:0.75;
	filter:"alpha(opacity=75)"; -ms-filter:"alpha(opacity=75)"; /* old ie */
}
.mCustomScrollBox:hover>.mCSB_scrollTools{
	opacity:1;
	filter:"alpha(opacity=100)"; -ms-filter:"alpha(opacity=100)"; /* old ie */
}
.mCSB_scrollTools .mCSB_draggerRail{
	background:#000; /* rgba fallback */
	background:rgba(0,0,0,0.4);
	filter:"alpha(opacity=40)"; -ms-filter:"alpha(opacity=40)"; /* old ie */
}
.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
	background:#fff; /* rgba fallback */
	background:rgba(255,255,255,0.75);
	filter:"alpha(opacity=75)"; -ms-filter:"alpha(opacity=75)"; /* old ie */
}
.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{
	background:rgba(255,255,255,0.85);
	filter:"alpha(opacity=85)"; -ms-filter:"alpha(opacity=85)"; /* old ie */
}
.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{
	background:rgba(255,255,255,0.9);
	filter:"alpha(opacity=90)"; -ms-filter:"alpha(opacity=90)"; /* old ie */
}
.mCSB_scrollTools .mCSB_buttonUp,
.mCSB_scrollTools .mCSB_buttonDown,
.mCSB_scrollTools .mCSB_buttonLeft,
.mCSB_scrollTools .mCSB_buttonRight{
	background-image:url(mCSB_buttons.png);
	background-repeat:no-repeat;
	opacity:0.4;
	filter:"alpha(opacity=40)"; -ms-filter:"alpha(opacity=40)"; /* old ie */
}
.mCSB_scrollTools .mCSB_buttonUp{
	background-position:0 0;
	/* 
	sprites locations are 0 0/-16px 0/-32px 0/-48px 0 (light) and -80px 0/-96px 0/-112px 0/-128px 0 (dark) 
	*/
}
.mCSB_scrollTools .mCSB_buttonDown{
	background-position:0 -20px;
	/* 
	sprites locations are 0 -20px/-16px -20px/-32px -20px/-48px -20px (light) and -80px -20px/-96px -20px/-112px -20px/-128px -20px (dark) 
	*/
}
.mCSB_scrollTools .mCSB_buttonLeft{
	background-position:0 -40px;
	/* 
	sprites locations are 0 -40px/-20px -40px/-40px -40px/-60px -40px (light) and -80px -40px/-100px -40px/-120px -40px/-140px -40px (dark) 
	*/
}
.mCSB_scrollTools .mCSB_buttonRight{
	background-position:0 -56px;
	/* 
	sprites locations are 0 -56px/-20px -56px/-40px -56px/-60px -56px (light) and -80px -56px/-100px -56px/-120px -56px/-140px -56px (dark) 
	*/
}
.mCSB_scrollTools .mCSB_buttonUp:hover,
.mCSB_scrollTools .mCSB_buttonDown:hover,
.mCSB_scrollTools .mCSB_buttonLeft:hover,
.mCSB_scrollTools .mCSB_buttonRight:hover{
	opacity:0.75;
	filter:"alpha(opacity=75)"; -ms-filter:"alpha(opacity=75)"; /* old ie */
}
.mCSB_scrollTools .mCSB_buttonUp:active,
.mCSB_scrollTools .mCSB_buttonDown:active,
.mCSB_scrollTools .mCSB_buttonLeft:active,
.mCSB_scrollTools .mCSB_buttonRight:active{
	opacity:0.9;
	filter:"alpha(opacity=90)"; -ms-filter:"alpha(opacity=90)"; /* old ie */
}

/*scrollbar themes*/
/*dark (dark colored scrollbar)*/
.mCS-dark>.mCSB_scrollTools .mCSB_draggerRail{
	background:#000; /* rgba fallback */
	background:rgba(0,0,0,0.15);
}
.mCS-dark>.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
	background:#000; /* rgba fallback */
	background:rgba(0,0,0,0.75);
}
.mCS-dark>.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{
	background:rgba(0,0,0,0.85);
}
.mCS-dark>.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
.mCS-dark>.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{
	background:rgba(0,0,0,0.9);
}
.mCS-dark>.mCSB_scrollTools .mCSB_buttonUp{
	background-position:-80px 0;
}
.mCS-dark>.mCSB_scrollTools .mCSB_buttonDown{
	background-position:-80px -20px;
}
.mCS-dark>.mCSB_scrollTools .mCSB_buttonLeft{
	background-position:-80px -40px;
}
.mCS-dark>.mCSB_scrollTools .mCSB_buttonRight{
	background-position:-80px -56px;
}
/*light-2*/
.mCS-light-2>.mCSB_scrollTools .mCSB_draggerRail{
	width:4px;
	background:#fff; /* rgba fallback */
	background:rgba(255,255,255,0.1);
	-webkit-border-radius:1px;
	-moz-border-radius:1px;
	border-radius:1px;
}
.mCS-light-2>.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
	width:4px;
	background:#fff; /* rgba fallback */
	background:rgba(255,255,255,0.75);
	-webkit-border-radius:1px;
	-moz-border-radius:1px;
	border-radius:1px;
}
.mCS-light-2.mCSB_horizontal>.mCSB_scrollTools .mCSB_draggerRail{
	width:100%;
	height:4px;
	margin:6px 0;
}
.mCS-light-2.mCSB_horizontal>.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
	width:100%;
	height:4px;
	margin:6px auto;
}
.mCS-light-2>.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{
	background:rgba(255,255,255,0.85);
}
.mCS-light-2>.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
.mCS-light-2>.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{
	background:rgba(255,255,255,0.9);
}
.mCS-light-2>.mCSB_scrollTools .mCSB_buttonUp{
	background-position:-32px 0;
}
.mCS-light-2>.mCSB_scrollTools .mCSB_buttonDown{
	background-position:-32px -20px;
}
.mCS-light-2>.mCSB_scrollTools .mCSB_buttonLeft{
	background-position:-40px -40px;
}
.mCS-light-2>.mCSB_scrollTools .mCSB_buttonRight{
	background-position:-40px -56px;
}
/*dark-2*/
.mCS-dark-2>.mCSB_scrollTools .mCSB_draggerRail{
	width:4px;
	background:#000; /* rgba fallback */
	background:rgba(0,0,0,0.1);
	-webkit-border-radius:1px;
	-moz-border-radius:1px;
	border-radius:1px;
}
.mCS-dark-2>.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
	width:4px;
	background:#000; /* rgba fallback */
	background:rgba(0,0,0,0.75);
	-webkit-border-radius:1px;
	-moz-border-radius:1px;
	border-radius:1px;
}
.mCS-dark-2.mCSB_horizontal>.mCSB_scrollTools .mCSB_draggerRail{
	width:100%;
	height:4px;
	margin:6px 0;
}
.mCS-dark-2.mCSB_horizontal>.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
	width:100%;
	height:4px;
	margin:6px auto;
}
.mCS-dark-2>.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{
	background:rgba(0,0,0,0.85);
}
.mCS-dark-2>.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
.mCS-dark-2>.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{
	background:rgba(0,0,0,0.9);
}
.mCS-dark-2>.mCSB_scrollTools .mCSB_buttonUp{
	background-position:-112px 0;
}
.mCS-dark-2>.mCSB_scrollTools .mCSB_buttonDown{
	background-position:-112px -20px;
}
.mCS-dark-2>.mCSB_scrollTools .mCSB_buttonLeft{
	background-position:-120px -40px;
}
.mCS-dark-2>.mCSB_scrollTools .mCSB_buttonRight{
	background-position:-120px -56px;
}
/*light-thick*/
.mCS-light-thick>.mCSB_scrollTools .mCSB_draggerRail{
	width:4px;
	background:#fff; /* rgba fallback */
	background:rgba(255,255,255,0.1);
	-webkit-border-radius:2px;
	-moz-border-radius:2px;
	border-radius:2px;
}
.mCS-light-thick>.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
	width:6px;
	background:#fff; /* rgba fallback */
	background:rgba(255,255,255,0.75);
	-webkit-border-radius:2px;
	-moz-border-radius:2px;
	border-radius:2px;
}
.mCS-light-thick.mCSB_horizontal>.mCSB_scrollTools .mCSB_draggerRail{
	width:100%;
	height:4px;
	margin:6px 0;
}
.mCS-light-thick.mCSB_horizontal>.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
	width:100%;
	height:6px;
	margin:5px auto;
}
.mCS-light-thick>.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{
	background:rgba(255,255,255,0.85);
}
.mCS-light-thick>.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
.mCS-light-thick>.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{
	background:rgba(255,255,255,0.9);
}
.mCS-light-thick>.mCSB_scrollTools .mCSB_buttonUp{
	background-position:-16px 0;
}
.mCS-light-thick>.mCSB_scrollTools .mCSB_buttonDown{
	background-position:-16px -20px;
}
.mCS-light-thick>.mCSB_scrollTools .mCSB_buttonLeft{
	background-position:-20px -40px;
}
.mCS-light-thick>.mCSB_scrollTools .mCSB_buttonRight{
	background-position:-20px -56px;
}
/*dark-thick*/
.mCS-dark-thick>.mCSB_scrollTools .mCSB_draggerRail{
	width:4px;
	background:#000; /* rgba fallback */
	background:rgba(0,0,0,0.1);
	-webkit-border-radius:2px;
	-moz-border-radius:2px;
	border-radius:2px;
}
.mCS-dark-thick>.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
	width:6px;
	background:#000; /* rgba fallback */
	background:rgba(0,0,0,0.75);
	-webkit-border-radius:2px;
	-moz-border-radius:2px;
	border-radius:2px;
}
.mCS-dark-thick.mCSB_horizontal>.mCSB_scrollTools .mCSB_draggerRail{
	width:100%;
	height:4px;
	margin:6px 0;
}
.mCS-dark-thick.mCSB_horizontal>.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
	width:100%;
	height:6px;
	margin:5px auto;
}
.mCS-dark-thick>.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{
	background:rgba(0,0,0,0.85);
}
.mCS-dark-thick>.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
.mCS-dark-thick>.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{
	background:rgba(0,0,0,0.9);
}
.mCS-dark-thick>.mCSB_scrollTools .mCSB_buttonUp{
	background-position:-96px 0;
}
.mCS-dark-thick>.mCSB_scrollTools .mCSB_buttonDown{
	background-position:-96px -20px;
}
.mCS-dark-thick>.mCSB_scrollTools .mCSB_buttonLeft{
	background-position:-100px -40px;
}
.mCS-dark-thick>.mCSB_scrollTools .mCSB_buttonRight{
	background-position:-100px -56px;
}
/*light-thin*/
.mCS-light-thin>.mCSB_scrollTools .mCSB_draggerRail{
	background:#fff; /* rgba fallback */
	background:rgba(255,255,255,0.1);
}
.mCS-light-thin>.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
	width:2px;
}
.mCS-light-thin.mCSB_horizontal>.mCSB_scrollTools .mCSB_draggerRail{
	width:100%;
}
.mCS-light-thin.mCSB_horizontal>.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
	width:100%;
	height:2px;
	margin:7px auto;
}
/*dark-thin*/
.mCS-dark-thin>.mCSB_scrollTools .mCSB_draggerRail{
	background:#000; /* rgba fallback */
	background:rgba(0,0,0,0.15);
}
.mCS-dark-thin>.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
	width:2px;
	background:#000; /* rgba fallback */
	background:rgba(0,0,0,0.75);
}
.mCS-dark-thin.mCSB_horizontal>.mCSB_scrollTools .mCSB_draggerRail{
	width:100%;
}
.mCS-dark-thin.mCSB_horizontal>.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
	width:100%;
	height:2px;
	margin:7px auto;
}
.mCS-dark-thin>.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{
	background:rgba(0,0,0,0.85);
}
.mCS-dark-thin>.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
.mCS-dark-thin>.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{
	background:rgba(0,0,0,0.9);
}
.mCS-dark-thin>.mCSB_scrollTools .mCSB_buttonUp{
	background-position:-80px 0;
}
.mCS-dark-thin>.mCSB_scrollTools .mCSB_buttonDown{
	background-position:-80px -20px;
}
.mCS-dark-thin>.mCSB_scrollTools .mCSB_buttonLeft{
	background-position:-80px -40px;
}
.mCS-dark-thin>.mCSB_scrollTools .mCSB_buttonRight{
	background-position:-80px -56px;
}
/*custom-bar*/
.mCS-custom-bar>.mCSB_scrollTools .mCSB_draggerRail{
	width:4px;
	background:#000; /* rgba fallback */
	background:rgba(0,0,0,0.1);
	-webkit-border-radius:1px;
	-moz-border-radius:1px;
	border-radius:1px;
}
.mCS-custom-bar>.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
	width:4px;
	background:#FF0000; /* rgba fallback */
	background:rgba(255,0,0,1);
	-webkit-border-radius:1px;
	-moz-border-radius:1px;
	border-radius:1px;
}
.mCS-custom-bar.mCSB_horizontal>.mCSB_scrollTools .mCSB_draggerRail{
	width:100%;
	height:4px;
	margin:6px 0;
}
.mCS-custom-bar.mCSB_horizontal>.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
	width:100%;
	height:4px;
	margin:6px auto;
}
.mCS-custom-bar>.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{
	background:rgba(255,0,0,1); /* hover color */
}
.mCS-custom-bar>.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
.mCS-custom-bar>.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{
	background:rgba(255,0,0,1); /* active color */
}
.mCS-custom-bar>.mCSB_scrollTools .mCSB_buttonUp{
	background-position:-112px 0;
}
.mCS-custom-bar>.mCSB_scrollTools .mCSB_buttonDown{
	background-position:-112px -20px;
}
.mCS-custom-bar>.mCSB_scrollTools .mCSB_buttonLeft{
	background-position:-120px -40px;
}
.mCS-custom-bar>.mCSB_scrollTools .mCSB_buttonRight{
	background-position:-120px -56px;
}





/* Form Validate
======================================================================================  */
/* Main Style
--------------------------------------------------------------------------------------------------------------------- */
.help-block {
    display: inline;
    padding-left: 6px;
	font-size: 0.857em;
}

span.form-error.help-block {
position: relative;
    display: block;
    color: #CC0000;
    margin: 20px 0 5px 0;
    padding: 0 15px 0 25px;
}

span.form-error.help-block:before,
span.form-error.help-block:after {
	display: block;
	position: absolute;
	z-index: 1;
}

span.form-error.help-block:before {
	content: "\e602";
	top: -3px;
	left: 0;
	font-family: 'noticeIcon';
	font-size: 16px;
}

span.form-error.help-block:after {
	content: '';
	top: -12px;
	left: 0;
	width: 100%;
	height: 1px;
	background-color: #999;
}

div.form-error {
    padding: 6px 12px;
    line-height: 180%;
    background: #ffe5ed;
    border-radius: 4px;
    margin-bottom: 22px;
    color: darkred;
}

textarea.valid,
input.valid {
    background: url(../images/valid.png) no-repeat right center #FFF;
    border-color: #52aa27 !important;
}

textarea.error,
input.error {
    background: url(../images/error.png) no-repeat right center #FFF;
}

.form-suggest-element {
    padding: 4px;
}

form.validating-server-side .server-validation {
    background: url(../img/ajax-loader.gif?v=2) no-repeat center right #FFF;
    opacity: 0.5;
}

.max-chars {
    background: #EEE;
    color: #999;
}

.form-help {
    padding-left: 6px;
    font-size: 90%;
    color: #888;
}

/* Form Style
--------------------------------------------------------------------------------------------------------------------- */
.form-container {
	padding: 0;
}

.form-container fieldset {}

.form-container legend {
	display: block;
	padding: 0;
	margin: 0 0 15px 0;
	border-bottom: none;
	font-size: 1.714em;
	color: #666666;
}

.form-container .form-item {
	padding: 6px 15px;
	background-color: #FFF;
	border: solid 1px #999999;
	border-radius: 2px;
	color: #333333;
}

/* for Sample Form in sample1.php and 06_form_for_using.php */
#user-registration.form-container .form-item,
#sample-validation.form-container .form-item {
	margin-bottom: 20px;
}

.form-container .form-item.calendar {
	width: 40%;
}

.form-container .form-item.calendar,
.form-container .form-item.check-inout {
	padding: 8px 15px 4px 15px;
}

.form-container .form-item.blank {
	padding: 0;
	background-color: transparent;
	border: none;
}

.form-container .form-item.dmy {
	margin-left: -10px;
}

.form-container .form-item.has-success {
	border-color: #52aa27;
}

.form-container .form-item.has-error {
	border-color: #CC0000;
}

.form-container .form-item .input-label {
	display: block;
	margin: 0 0 5px 0;
	font-size: 1.143em;
	font-weight: normal;
	color: #666666;
}

.form-container .form-item.calendar .input-label,
.form-container .form-item.check-inout .input-label {
	display: inline-block;
	margin: 0 10px 0 0;
}

@media (max-width: 767px) {

	.form-container .form-item.calendar {
		width: 100%;
	}
	
	.form-container .form-item.calendar .input-label,
	.form-container .form-item.check-inout .input-label {
		display: block;
		margin: 0 0 5px 0;
	}

}

.form-container .form-item.has-success .input-label,
.form-container .form-item.regislogin.has-success .input-label {
	color: #52aa27;
}

.form-container .form-item.has-error .input-label,
.form-container .form-item.regislogin.has-error .input-label {
	color: #CC0000;
}

.form-container .form-item .input-label span {
	font-size: 0.75em; 
	/* 
		Parent Element(.input-label) มี  font-size: 1.143em; = 16px = 100%
		ดังนั้นต้องการ font-size: 12px; = 12/16 = 0.75em
	*/
	color: #CC0000;
}

.form-container .form-item.has-success .input-label span {
	filter: Alpha(opacity=0); /* lt-ie9 */
	opacity: 0;
}

.form-container .form-item .input-caution {
	display: block;
	margin-bottom: 10px;
	font-size: 0.857em;
	color: #CC0000;
}

.form-container .form-item.has-success .input-caution {
	/*color: #52aa27;*/
	display: none;
}

.form-container .form-item,
.form-container .form-item .input-label,
.form-container .form-item .input-label span,
.form-container .form-item .input-caution {
	-webkit-transition: all 0.3s ease 0s;
			   transition: all 0.3s ease 0s;
}

.form-container .form-item textarea,
.form-container .form-item input[type="text"],
.form-container .form-item input[type="email"],
.form-container .form-item input[type="password"],
.form-container .form-item input[type="search"],
.form-container .form-item input[type="tel"],
.form-container .form-item input[type="time"],
.form-container .form-item input[type="url"],
.form-container .form-item input[type="file"] {
	display: block;
	width: 100%;
	max-width: 100%;
	padding: 0;
	margin-bottom: 5px;
	background-color: transparent;
	border: none;
	/* ไม่กำหนด color ที่ input โดยตรงเพราะทำให้ color ของ css placeholder ไม่ทำงาน  */
}

.form-container .form-item.calendar input[type="text"],
.form-container .form-item.check-inout input[type="text"] {
	padding-top: 2px;
	padding-bottom: 1px;
}

/* Not Validate
------------------------------------------------------------ */
.form-container .form-item.notvalid textarea,
.form-container .form-item.notvalid input[type="text"],
.form-container .form-item.notvalid input[type="search"],
.form-container .form-item.notvalid input[type="tel"],
.form-container .form-item.notvalid input[type="url"] {
}

/* User Login
------------------------------------------------------------ */
.form-container .form-item.userlogin .input-label {
	top: 10px; left: 15px;
	font-size: 1em;
	color: #999999;
}

.form-container .form-item.userlogin input[type="text"],
.form-container .form-item.userlogin input[type="password"] {
	font-size: 1.143em;
}

.forgot-password {
	display: inline-block;
	float: right;
	color: #666666;
}

.forgot-password:hover {
	color: #333333;
}

.userlogin-submit {
	width: 100%;
	padding: 10px 0;
	margin-bottom: 15px;
	background-color: #999999;
	font-size: 1.714em;
	color: #FFF;
}

.userlogin-submit:hover {
	background-color: #666666;
}

.regis-now {
	margin: 15px 0;
	text-align: center;
}

.regis-now span,
.regis-now button {
	margin: 0 5px;
}

.regis-now span {
	display: inline-block;
}

.regis-now button {
	padding: 5px 10px;
	border: solid 1px #999999;
	background-color: transparent;
}

.regis-now button:hover {
	border: solid 1px #666666;
	color: #333333;
}

/* Radio + Checkbox
------------------------------------------------------------ */
.form-container .form-item.circleradio,
.form-container .form-item.squareradio,
.form-container .form-item.tickbox,
.form-container .form-item.ie8-tickform {}

.lt-ie9 .form-container .form-item.circleradio,
.lt-ie9 .form-container .form-item.squareradio,
.lt-ie9 .form-container .form-item.tickbox {
	display: none;
}

.form-container .form-item .selection-title {
	display: block;
	padding: 0 0 10px 0;
	margin: 0 0 15px 0;
	border-bottom: solid 1px #CCCCCC;
	font-size: 1.143em;
	color: #666666;
}

.form-container .form-item .selection-label {
	display: inline-block;
	padding: 0 0 0 25px;
	margin-right: 15px;
	margin-bottom: 0;
	font-size: 1em;
	font-weight: normal;
	color: #666666;
	cursor: pointer;
}

.form-container .form-item.circleradio input[type="radio"],
.form-container .form-item.squareradio input[type="radio"],
.form-container .form-item.tickbox input[type="checkbox"] {
	display: none;
}

.form-container .form-item.circleradio input[type="radio"] + .selection-label, 
.form-container .form-item.circleradio input[type="radio"]:checked + .selection-label,
.form-container .form-item.squareradio input[type="radio"] + .selection-label,
.form-container .form-item.squareradio input[type="radio"]:checked + .selection-label, 
.form-container .form-item.tickbox input[type="checkbox"] + .selection-label,
.form-container .form-item.tickbox input[type="checkbox"]:checked + .selection-label {
	background-repeat: no-repeat;
	background-position: 0 4px;
}

/* Circle Radio */
.form-container .form-item.circleradio input[type="radio"] + .selection-label {
	background-image: url(../images/circle-radio.png); 
}

.form-container .form-item.circleradio input[type="radio"]:checked + .selection-label {
	background-image: url(../images/circle-selected-radio.png); 
}

/* Square Radio */
.form-container .form-item.squareradio input[type="radio"] + .selection-label {
	background-image: url(../images/chk-box.png); 
}

.form-container .form-item.squareradio input[type="radio"]:checked + .selection-label {
	background-image: url(../images/square-selected-radio.png); 
}

/* Check Box */
.form-container .form-item.tickbox input[type="checkbox"] + .selection-label {
	background-image: url(../images/chk-box.png); 
}

.form-container .form-item.tickbox input[type="checkbox"]:checked + .selection-label {
	background-image: url(../images/chk-selected-box.png); 
}

/* Radio + Checkbox for IE8
------------------------------------------------------------ */
.modern .form-container .form-item.ie8-tickform {
	display: none; /* Not Show in Modern Browser */
}

.lt-ie9 .form-container .form-item.ie8-tickform {
	display: block; /* Show in IE8 */
}

.form-container .form-item.ie8-tickform ul {
	overflow: hidden;
}

.form-container .form-item.ie8-tickform ul li {
	overflow: hidden;
	float: left;
	margin-right: 15px;
	margin-bottom: 0;
}

.form-container .form-item.ie8-tickform ul li input[type="radio"],
.form-container .form-item.ie8-tickform ul li input[type="checkbox"],
.form-container .form-item.ie8-tickform ul li label {
	display: block;
	float: left;
	cursor: pointer;
}

.form-container .form-item.ie8-tickform ul li input[type="radio"],
.form-container .form-item.ie8-tickform ul li input[type="checkbox"] {
	margin: 5px 10px 0 0;
}

.form-container .form-item.ie8-tickform ul li label {
	margin: 0;
	font-size: 1em;
	font-weight: normal;
	color: #666666;
}

@media (max-width: 767px) {
	.form-container .form-item .selection-label,
	.form-container .form-item.ie8-tickform ul li {
		margin-right: 15px;
		margin-bottom: 10px;
	}
}

@media (min-width: 768px) {
	.form-container .form-item .selection-label,
	.form-container .form-item.ie8-tickform ul li {
		margin-right: 15px;
		margin-bottom: 0;
	}
}

@media (min-width: 992px) {
	.form-container .form-item .selection-label,
	.form-container .form-item.ie8-tickform ul li {
		margin-right: 15px;
		margin-bottom: 0;
	}
}

@media (min-width: 1200px) {
	.form-container .form-item .selection-label,
	.form-container .form-item.ie8-tickform ul li {
		margin-right: 15px;
		margin-bottom: 0;
	}
}



/* Standard Form
--------------------------------------------------------------------------------------------------------------------- */
.std-form-item {
	margin-bottom: 15px;
}

/* Label
------------------------------------------------------------ */
.std-form-item label {
	display: block;
	padding-top: 6px;
	margin-bottom: 5px;
	font-size: 1.143em;
	font-weight: normal;
}

.std-form-item label.choice {
	padding-top: 0;
	margin-bottom: 10px;
}

.std-form-item label span {
	font-size: 0.75em;
	color: #CC0000;
}

/* Input
------------------------------------------------------------ */
.std-form-frame {
	padding: 10px 15px;
	margin-bottom: 5px;
	background-color: #FFF;
	border: solid 1px #999;
	border-radius: 2px;
}

.std-form-frame input,
.std-form-frame textarea {
	width: 100%;
	max-width: 100%;
	padding: 0;
	border: none;
	color: #333;
}

.std-warning {
	font-size: 0.857em;
	color: #CC0000;
}

/* Radio/Tickbox Choice
------------------------------------------------------------ */
.form-container .std-form-item .form-item.circleradio,
.form-container .std-form-item .form-item.squareradio,
.form-container .std-form-item .form-item.tickbox,
.form-container .std-form-item .form-item.ie8-tickform {
	margin-bottom: 0;
}

@media (max-width: 767px) {
	.std-form-item {
		margin-bottom: 10px;
	}
	
	.std-form-item label {
		padding-top: 0;
	}
}

@media (min-width: 768px) {
	.std-form-item {
		margin-bottom: 10px;
	}
	
	.std-form-item label {
		padding-top: 0;
	}
}

@media (min-width: 992px) {
	.std-form-item {
		margin-bottom: 15px;
	}
	
	.std-form-item label {
		padding-top: 6px;
	}
}

@media (min-width: 1200px) {
	.std-form-item {
		margin-bottom: 15px;
	}
	
	.std-form-item label {
		padding-top: 6px;
	}
}





/* FileStyle
======================================================================================  */
.form-file {
	padding: 15px;
	margin-bottom: 15px;
	background-color: #FFF;
	border: solid 1px #999999;
	border-radius: 2px;
}

.form-file .bootstrap-filestyle {
	overflow: hidden;
}

.form-file .bootstrap-filestyle input[type="text"],
.form-file .bootstrap-filestyle label {
	display: block;
}

.form-file .bootstrap-filestyle label {
	float: left;
	padding: 5px 15px;
	background-color: #eeeeee;
	border: solid 1px #CCCCCC;
	font-size: 1.143em;
	-webkit-transition: all 0.3s ease 0s;
			   transition: all 0.3s ease 0s;
}

.form-file .bootstrap-filestyle label i {
	color: #FF0000;
}

.form-file .bootstrap-filestyle input[type="text"] {
	float: right;
	width: 73%;
	padding: 0;
	margin: 7px 0;
	border: none;
	color: #333333;
	background-color: #FFF;
}

@media (max-width: 767px) {
	.form-file .bootstrap-filestyle input[type="text"] {
		float: none;
		width: 100%;
		margin: 0 0 15px 0;
		text-align: center;
	}
	
	.form-file .bootstrap-filestyle label {
		float: none;
	}
}

@media (min-width: 768px) {
	.form-file .bootstrap-filestyle input[type="text"] {
		width: 68%;
	}
}

@media (min-width: 992px) {
	.form-file .bootstrap-filestyle input[type="text"] {
		width: 68%;
	}
}

@media (min-width: 1200px) {
	.form-file .bootstrap-filestyle input[type="text"] {
		width: 73%;
	}
}





/* Selectric
======================================================================================  */
/* Selector */
.custom-select {}

/* Selectric Wrapper
--------------------------------------------------------------------------------------------------------------------- */
.selectricWrapper { 
	position: relative; 
	margin: 0; 
	cursor: pointer; 
}

.selectricDisabled { 
	filter: alpha(opacity=50); 
	opacity: 0.5; 
	cursor: default; 
	-webkit-touch-callout: none; 
	-webkit-user-select: none; 
	-moz-user-select: none; 
	-ms-user-select: none; 
	user-select: none; 
}

.selectricOpen { 
	z-index: 9999; 
}

.selectricHideSelect { 
	position: relative; 
	overflow: hidden; 
}

.selectricHideSelect select { 
	position: absolute; 
	left: -100%; 
}

/* Select Box
--------------------------------------------------------------------------------------------------------------------- */
.selectric { 
	position: relative; 
	background: #FFF; 
	border: solid 1px #999999; 
	border-radius: 2px; 
	-webkit-transition: all 0.3s ease 0s;
			   transition: all 0.3s ease 0s;
}

.select-page__selectbox .selectric {
    border-right: none;
    border-radius: 2px 0px 0px 2px; 
}

.selectric .label { 
	display: block; 
	padding: 14px 15px; 
	margin: 0 30px 0 0; 
	font-size: 14px;
	line-height: 1;
	font-weight: normal;
	color: #333333; 
	text-align: left;
	white-space: nowrap; 
	overflow: hidden; 
}

.select-page__selectbox .selectric .label {
    min-width: 55px;
	padding: 10px 5px 10px 15px;
    text-align: center;
}

/* Open */
.selectricOpen .selectric { 
	z-index: 9999; 
	border-color: #666666;
	background: #FFF; 
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

/* Hover */
.selectricHover .selectric { 
	border-color: #666666; 
}

/* Button */
.selectric .button { 
	position: absolute; right: 0; top: 0; 
	width: 36px;
	height: 44px; 
	background: url(../images/select-arrow.png) no-repeat center center;
	font-size: 0px;
}

.select-page__selectbox .selectric .button { 
	height: 34px; 
}

.selectricHover .selectric .button { 
	background: url(../images/select-active-arrow.png) no-repeat center center;
}

.selectricTempShow { 
	position: absolute !important; 
	visibility: hidden !important; 
	display: block !important; 
}

/* Select Items
--------------------------------------------------------------------------------------------------------------------- */
.selectricItems { 
	display: none; 
	position: absolute; z-index: 9998; 
	top: 100%; left: 0;
	overflow: auto;
	margin-top: -1px;
	background: #FFF; 
	border: 1px solid #666666; 
	border-radius: 0 0 2px 2px;
}

.selectricItems ul,
.selectricItems li {
	list-style: none; 
	padding: 0; 
	margin: 0; 
	font-size: 1em; 
	line-height: 1;
}

.selectricItems li { 
	display: block; 
	padding: 5px; 
	color: #666666; 
	cursor: pointer; 
    text-align: left;
}
.selectricItems li.selected { 
	color: #FFF; 
	background: #666666; 
}

.selectricItems li:hover { 
	color: #FFF; 
	background: #666666; 
}

.selectricOpen .selectricItems { 
	display: block; 
}

/* Customize Select Width
--------------------------------------------------------------------------------------------------------------------- */
/* Date Month Year
------------------------------------------------------------ */
.date-select,
.month-select,
.year-select {
	display: inline-block;
	margin-left: 10px;
}

.date-select .selectric {
	width: 63px;
}

.month-select .selectric {
	width: 83px;
}

.year-select .selectric {
	width: 90px;
}

/* Province
------------------------------------------------------------ */
.province-select .selectric {
	width: 200px;
}





/* HTML5 Placeholder
======================================================================================  */
/* Placeholder Color Text */
.placeholder { 
	color: #aaa; 
}





/* Datepicker
======================================================================================  */
.datepicker {
  top: 0;
  left: 0;
  padding: 10px;
  margin-top: 10px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}

.datepicker:before {
  content: '';
  display: inline-block;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 7px solid #ccc;
  border-bottom-color: rgba(0, 0, 0, 0.2);
  position: absolute;
  top: -7px;
  left: 6px;
}

.datepicker:after {
  content: '';
  display: inline-block;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid #FFF;
  position: absolute;
  top: -6px;
  left: 7px;
}

.datepicker.dropdown-menu {
	-webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
				box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
}

.datepicker > div {
  display: none;
}

.datepicker table {
  width: 100%;
  margin: 0;
}

.datepicker td,
.datepicker th {
  text-align: center;
  width: 32px;
  height: 32px;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
}

.datepicker td.day:hover {
  background: #eeeeee;
  cursor: pointer;
}

.datepicker td.day.disabled {
  color: #eeeeee;
}

.datepicker td.old,
.datepicker td.new {
  color: #999999;
}

.datepicker td.active,
.datepicker td.active:hover {
  /*color: #FFF;
  background-color: #006dcc;
  background-image: -moz-linear-gradient(top, #0088cc, #0044cc);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0044cc));
  background-image: -webkit-linear-gradient(top, #0088cc, #0044cc);
  background-image: -o-linear-gradient(top, #0088cc, #0044cc);
  background-image: linear-gradient(to bottom, #0088cc, #0044cc);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0044cc', GradientType=0);
  border-color: #0044cc #0044cc #002a80;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  *background-color: #0044cc;*/
  /* Darken IE7 buttons by default so they stand out more given they won't have borders */

  /*filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
  color: #fff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);*/
}

.datepicker td.active:hover,
.datepicker td.active:hover:hover,
.datepicker td.active:focus,
.datepicker td.active:hover:focus,
.datepicker td.active:active,
.datepicker td.active:hover:active,
.datepicker td.active.active,
.datepicker td.active:hover.active,
.datepicker td.active.disabled,
.datepicker td.active:hover.disabled,
.datepicker td.active[disabled],
.datepicker td.active:hover[disabled] {
	background-color: #666;
	color: #FFF;
  /*color: #FFF;
  background-color: #0044cc;
  *background-color: #003bb3;*/
}

.datepicker td.active:active,
.datepicker td.active:hover:active,
.datepicker td.active.active,
.datepicker td.active:hover.active {
  /*background-color: #003399 \9;*/
}

.datepicker td span {
  display: block;
  width: 31%;
  height: 54px;
  line-height: 54px;
  float: left;
  margin: 2px;
  cursor: pointer;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}

.datepicker td span:hover {
  background: #eeeeee;
}

.datepicker td span.active {
  /*color: #FFF;
  background-color: #006dcc;
  background-image: -moz-linear-gradient(top, #0088cc, #0044cc);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0044cc));
  background-image: -webkit-linear-gradient(top, #0088cc, #0044cc);
  background-image: -o-linear-gradient(top, #0088cc, #0044cc);
  background-image: linear-gradient(to bottom, #0088cc, #0044cc);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0044cc', GradientType=0);
  border-color: #0044cc #0044cc #002a80;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  *background-color: #0044cc;*/
  /* Darken IE7 buttons by default so they stand out more given they won't have borders */

  /*filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
  color: #fff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);*/
}

.datepicker td span.active:hover,
.datepicker td span.active:focus,
.datepicker td span.active:active,
.datepicker td span.active.active,
.datepicker td span.active.disabled,
.datepicker td span.active[disabled] {
	background-color: #666;
	color: #FFF;
  /*color: #FFF;
  background-color: #0044cc;
  *background-color: #003bb3;*/
}

.datepicker td span.active:active,
.datepicker td span.active.active {
 /* background-color: #003399 \9;*/
}

.datepicker td span.old {
  color: #999999;
}

.datepicker th.switch {
  width: 145px;
}

.datepicker th.next,
.datepicker th.prev {
  font-size: 21px;
}

.datepicker thead tr:first-child th {
  cursor: pointer;
}

.datepicker thead tr:first-child th:hover {
  background: #eeeeee;
}

.input-append.date .add-on i,
.input-prepend.date .add-on i {
  display: block;
  cursor: pointer;
  width: 16px;
  height: 16px;
}





/* Dropkick
======================================================================================  */
.dk-select, .dk-select *, .dk-select *:before, .dk-select *:after, .dk-select-multi, .dk-select-multi *, .dk-select-multi *:before, .dk-select-multi *:after {
	-prefix-box-sizing: border-box;
	-prefix-box-sizing: border-box;
	box-sizing: border-box;
}

.dk-select, .dk-select-multi {
	position: relative;
	display: inline-block;
	vertical-align: middle;
	width: 100%;
	cursor: pointer;
}

/* Main Select Wrapper
--------------------------------------------------------------------------------------------------------------------- */
.dk-selected {
	white-space: nowrap;
	overflow: hidden;
	position: relative;
	background-color: white;
	border: 1px solid #999999;
	border-radius: 2px;
	padding: 10px 15px;
	color: #333333;
	-prefix-text-overflow: ellipsis;
	text-overflow: ellipsis;
	transition: all 0.3s ease 0s;
}

.select-page__selectbox .dk-selected {
    min-width: 86px;
    padding: 7px 15px 5px 0px;
    border-right: none;
    border-radius: 2px 0px 0px 2px;
}

/* Select Arrow
--------------------------------------------------------------------------------------------------------------------- */
.dk-selected:after {
	content: '';
	display: block;
	position: absolute;
	right: 0;
}

.dk-selected:after {
	top: 0;
	width: 36px;
	height: 100%;
	background-image: url(../images/select-arrow.png);
	background-repeat: no-repeat;
	background-position: center center;
}

.dk-selected-disabled {
	color: #BBBBBB;
}

.dk-select .dk-select-options {
	position: absolute;
	display: none;
	left: 0;
}

.dk-select-open-up .dk-select-options {
	border-radius: 2px 2px 0 0;
	margin-bottom: -1px;
	bottom: 100%;
}

.dk-select-open-down .dk-select-options {
	border-radius: 0 0 2px 2px;
	margin-top: -1px;
	top: 100%;
}

.dk-select-multi .dk-select-options {
	max-height: 10em;
}

.dk-select-options {
	width: 100%;
	z-index: 100;
	background-color: white;
	border: 1px solid #CCCCCC;
	border-radius: 0.4em;
	overflow-x: hidden;
	max-height: 10.5em;
	list-style: none;
	padding: 0.25em 0;
	margin: 0;
}

/* List Selected */
.dk-option-selected {
	background-color: #666666;
	color: #fff;
}

.dk-select-options-highlight .dk-option-selected {
	background-color: transparent;
	color: inherit;
}

.dk-option {
	padding: 0 0.5em;
}

.select-page__selectbox .dk-option {
	padding: 0px 5px;
    text-align: left;
}

/* List Hover */
.dk-select-options .dk-option-highlight {
	background-color: #666666;
	color: #fff;
}

.dk-select-options .dk-option-disabled {
	color: #BBBBBB;
	background-color: transparent;
}

.dk-optgroup {
	border: solid #CCCCCC;
	border-width: 1px 0;
	padding: 0.25em 0;
	margin-top: 0.25em;
}

.dk-optgroup + .dk-option {
	margin-top: 0.25em;
}

.dk-optgroup + .dk-optgroup {
	border-top-width: 0;
	margin-top: 0;
}

.dk-optgroup:nth-child(2) {
 padding-top: 0;
 border-top: none;
 margin-top: 0;
}

.dk-optgroup:last-child {
	border-bottom-width: 0;
	margin-bottom: 0;
	padding-bottom: 0;
}

.dk-optgroup-label {
	padding: 0 0.5em 0.25em;
	font-weight: bold;
	width: 100%;
}

.dk-optgroup-options {
	list-style: none;
	padding-left: 0;
}

.dk-optgroup-options li {
	padding-left: 1.2em;
}

.dk-select-open-up .dk-selected {
	border-top-left-radius: 0;
	border-top-right-radius: 0;
	border-color: #3297fd;
}

.dk-select-open-down .dk-selected {
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
	border-color: #FFF;
}

/* Active Select Arrow */
.dk-select-open-up .dk-selected:after, .dk-select-open-down .dk-selected:after {
	background-image: url(../images/select-active-arrow.png);
}

/* Active Select Border */
.dk-select-open-up .dk-select-options, .dk-select-open-down .dk-select-options, .dk-select-multi:focus .dk-select-options {
	display: block;
	border-color: #666666;
}

.dk-select-multi:hover, .dk-select-multi:focus {
	outline: none;
}

/* Select Hover/Focus */
.dk-selected:hover, .dk-selected:focus {
	outline: none;
	border-color: #666666;
}

/* Select Arrow Hover/Focus */
.dk-selected:hover:after, .dk-selected:focus:after {
	background-image: url(../images/select-active-arrow.png);
}

.dk-select-disabled {
	opacity: 0.6;
	color: #BBBBBB;
	cursor: not-allowed;
}

.dk-select-disabled .dk-selected:hover, .dk-select-disabled .dk-selected:focus {
	border-color: inherit;
}


.dk-select-disabled .dk-selected:hover:after, .dk-select-disabled .dk-selected:focus:after {
	border-left-color: inherit;
}

select[data-dkcacheid] {
	display: none;
}





/* XXXXX
======================================================================================  */
/* XXXXX
--------------------------------------------------------------------------------------------------------------------- */
/* XXXXX
------------------------------------------------------------ */