/* Specific */
html,body {margin:0px !important;}
body {background:#ececec;font-size:2em;}
.title {color:#0fb6b3;font-size:110%;}

/*****************************/
/* Project Customization */
/*****************************/

x {color:#0fb6b3;font-weight:bold;}

h2 {font-size:130%;margin-bottom:-12px;font-weight:normal;line-height:150% !important;}

h3 {font-size:120%;}
big {font-size:160%;}
label {font-size:110%;margin-left:15px;padding:8px;}
input[type=radio], input[type=checkbox] {margin-right:10px;}
bu {font-weight:bold;text-decoration:underline;}
.fa-1x {font-size:170%;}
.form-group input[type=text].form-control {color:#666;margin:auto;}
.form-group textarea {width:80%;height:150px;font-size:1.4em;}

.valid-pass .myst .mys-alert {
	display:none !important;
}
.mys-oe {display:none;}
	.mys-oe div {margin-bottom:0px;padding-bottom:0px; }
	.mys-oe-div {position:relative;top:-25px;margin-bottom:-25px;}
	.mys-oe input[type=text] {border:none !important;border-bottom:2px solid white !important;color:white !important;background:none;font-size:100%;}
	.mys-oe input[type=text]::placeholder {color:#ccc;}
.myshd {margin-bottom:15px;font-weight:bold;height:40px;}
.myshd div {padding:7px;}
.myschk {text-align:center;}

.tbinput {padding:5px 15px;border-bottom:1px solid #666;} /* gentbinput */
.btn-tab {
	margin-top:50px;
}
	.btn-tab a {
		color:white;
		font-size:120%;
	}

/* Valid */
.valid-fail {
	color:red;
}

.myst-darkgreen {background:#0b9206;color:white;vertical-align:middle;}
.myst-green {background:#91A61D;color:white;vertical-align:middle;}
.myst-red {background:#d22501;color:white;vertical-align:middle;}
.myst-yellow {background:#eeaa56;color:white;vertical-align:middle;}
.myst-grey {background:#a5bab5;color:white;vertical-align:middle;}
.red {color:#d22501;}
.green {color:#91A61D;}
.white {color:#fff;}
.yellow {color:#ff0;}

div.inline {float:left;display:inline-block;}
div.attrlabel {width:92%;}

.row-label {font-size:150%;font-weight:bold;padding:0px 10px;display:block;}

/* Tool */
#tool {
	position:fixed;z-index:1000;
	bottom:5px;
	right:5px;
}
#tool button {
	display:block;
	margin:15px;
}
#menu-section {
	position:fixed;
	width:200px;
	bottom:5px;
	right:55px;
}
	#menu-section ul {
		list-style-type:none;
	}

/* Btn */
.btn-circle.btn-xxl {
	width:100px;height:100px;
	padding:10px 16px;
	border-radius:55px;
}

/* Input */
input[type=text].form-control, .single-line {
	border: 1px solid #afd0ff;
	padding:10px;
	height:55px !important;
	font-size:130%;
	color:#281058;
}
input[type=text].form-control:focus {
	border: 2px solid #9fb0ee;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

/* Wickedpicker */
div.wickedpicker {
	width:150px;
}
.wickedpicker__close {
	font-size:250%;
}

/* Select2 */
.select2-container--default { margin-top:15px; }
.select2-dropdown {
	box-shadow: 10px 10px 5px grey;
	border:2px solid #aaa;
}
span.select2-selection__choice__remove {
	font-size:300%;
	line-height:50%;
	float:left;
}
li.select2-selection__choice {
	font-size:120%;
}
.select2-container .select2-selection--multiple .select2-selection__rendered {
	white-space:normal !important;
}
.select2-results__option {
	margin:10px 0px;
	font-size:120%;
}
select {
	color:black;
	margin-top:15px;
}


/* Form */
.form-fa {display:inline-block;}
div.form-radio input[type=radio], div.form-checkbox input[type=checkbox] {
	display:none;
}
div.form-radio .form-check, div.form-checkbox .form-check {
	display:none;
}
div.form-radio .form-uncheck, div.form-checkbox .form-uncheck {
	display:block;
}

div.active.form-radio .form-check, div.active.form-checkbox .form-check {
	display:block;
}
div.active.form-radio .form-uncheck, div.active.form-checkbox .form-uncheck {
	display:none;
}

		
/* image upload */
.img-thumbnail {
	width:320px;
	height:240px;
}
.img-thumbnail img {
	margin:0px;
}
.thumbnail-separate {
	clear:both;
	height:15px;
}
.lightBoxGallery .col-xs-4 {
    height: 120px;
    margin: 0;
    padding: 0;
}
.lightBoxGallery .col-xs-4 img {
	width: 100%;
    height: 100%;
}
.video-thumbnail { 
	object-fit: initial;
	width:100% !important;
	height:240px !important;
	padding: 4px;
    border: 1px solid #ddd;
    border-radius: 4px;
}
.lightbox-remove {
	background: #d8540c;
    color: white;
    padding: 0px 5px;
    width: 75px;
    cursor: pointer;
    position: absolute;
    bottom: 0;
    margin: auto;
    border-radius: 25px;
    left: 0;
    right: 0;
    text-align: center;
}
.imagePreview {
    width: 100%;
    height: 120px;
    background-position: center center;
	background:url(../asset/default_upimg.png);
	background-color:#fff;
    background-size: cover;
  	background-repeat:no-repeat;
    display: inline-block;
  	box-shadow:0px -3px 6px 2px rgba(0,0,0,0.2);
}
.btn-primary
{
	display:block;
	border-radius:0px;
	box-shadow:0px 4px 6px 2px rgba(0,0,0,0.2);
	margin-top:-5px;
}
.imgUp
{
  	margin-bottom:15px;
}
.imgUp .imagePreview {
	background-size: contain !important;background-position: center;background-repeat: no-repeat;
}
.del
{
	position:absolute;
	top:0px;
	right:15px;
	width:30px;
	height:30px;
	text-align:center;
	line-height:30px;
	background-color:rgba(255,255,255,0.6);
	cursor:pointer;
}
.imgAdd
{
	width:30px;
	height:30px;
	color:#aaa;
	text-align:center;
	line-height:30px;
	margin-top:0px;
	cursor:pointer;
	font-size:15px;
}
label.selectfile {
	padding:0px;
	font-size:100%;
	margin:0px;
}

/* TouchSpin */
input.touchspin {
	padding:10px;
	color:inherit;
	font-size:120%;
	margin:15px -15px;;
}
.bootstrap-touchspin-postfix {
	color:black;
}

/* Tab */
.tabs-container .nav-tabs > li {
	border-left:1px solid #999;
}
.tabs-container .nav-tabs > li.active {
	background:#82c7eb;
}
.tabs-container .nav-tabs > li.mys-completed {
	border-left:none;
	border-bottom:2px solid #5cb85c;
}
.tabs-container .nav-tabs > li.mys-completed a {
	color:#5cb85c;
}

#header {background:white;width:100%;}
.header-logo {display:inline-table;width:300px;padding-left:30px;}
h1#logo {padding:0px;margin:0px;}
nav {display:inline-block;font-weight:bold;position:relative;top:35px;left:-5px;}
nav div {display:table-cell;margin:0;font-size:105%;color:gray;text-align:left;cursor:default;padding:5px;border-left:2px solid #ddd;}
nav div.navactive {border-bottom:10px solid #0fb6b3;color:black;}
nav div span {display:block;padding:0 10px;}
#step4 {width:200px;}
#step1, #steps {border-left:none;}
#steps {vertical-align:bottom;}
.attrAnswer {width:360px;}
.question p {font-size:65%;font-weight:normal;}

.features {display:inline-block;width:100%;background:white;}
.container {background:white;width:100%;min-width:300px;padding:0px;}
.status {display:none;}

/* Select2 */
ul.select2-selection__rendered {
	font-size:100%;
	color:#666;
}

/* Memo Input */
input.memo {
	background:none;
	border:none;
	border-bottom:2px solid white;
	color:white !important;
	font-size:110%;
	width:85%;
}
input.memo::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #ccc;
}
input.memo::-moz-placeholder { /* Firefox 19+ */
  color: #ccc;
}
input.memo:-ms-input-placeholder { /* IE 10+ */
  color: #ccc;
}
input.memo:-moz-placeholder { /* Firefox 18- */
  color: #ccc;
}

/* Star Rating */
.br-theme-fontawesome-stars .br-widget a::after {font-size:150%;}
.br-wrapper {float:left;margin-right:10px;}
.br-label {float:left;display:inline-block;padding:2px 4px;color:white;font-size:130%;}
.br-label-good {background:#66aa33;}
.br-label-bad {background:#aa6633;}

.ui-state-error, .ui-icon-alert {
	font-size:110%;
	margin-bottom:10px;
	background:#f6412d;
	color:white;
}

/* Quote */
div.quote {font-style:italic;font-size:95%;margin:5px;}
div.row-info {padding-bottom:15px;}
div.myst {padding:20px 0;font-size:110%;}
div.mystrow {border-bottom:black 1px solid;padding:0 15px;}
span.mysscore {font-size: 70%;position:relative;top:-10%;left:5px;display:block;}

div#showtitle {min-height:10px;width:100%;margin-left:70px;}

div.stepno {width: 70px;vertical-align:top;float:left;}

div#signature {border:black 1px solid;}

div.flex {
	/*flex: 1px*/
}

div.button-nav {
	margin:30px 10px;
	position:relative;
	top:-5px;
}

/*****************************/
/* Overwrite
/*****************************/

p {
	margin:10px 0;
}

.flex-parent {
	display:flex;
}

/*****************************/
/* Main
/*****************************/


#main {
	-webkit-box-shadow: 10px 10px 20px -10px rgba(0,0,0,0.75);
	-moz-box-shadow: 10px 10px 20px -10px rgba(0,0,0,0.75);
	box-shadow: 10px 10px 20px -10px rgba(0,0,0,0.75);
	background:#f8f8f8;
	display:flex !important;
}
input.submit {border:none;background:url(../asset/next.png) no-repeat;width:208px;height:50px;font-size:0px;cursor:pointer;}
input.send {border:none;background:url(../asset/submit.png) no-repeat;width:208px;height:50px;font-size:0px;cursor:pointer;}

div.previousData {
	margin: 10px;
    background: #ccc;
    padding: 10px;
}
div.qlang {display:inline-block;text-align: justify;text-justify: inter-word;min-width:300px;}
div.qlang p {font-weight:normal;}
div.instruct {
	position:relative;
	vertical-align:top;
	background:#00b0a5;
	padding:20px;
	color:white;
	font-weight:bold;
	font-size:1.2em;
	padding-right:10px;
	height:100%;
}
	div.instruct h3 {
		font-family:cloudbold;
		font-size:1.6em;
		font-weight:normal;
		margin-top:0px;
	}
	div.instruct ul {
		padding-right:80px;
	}
.attrQuestion {
	display:inline-block;
	width:75%;
	color:#037673;
	font-size:1.5em;
}
.attrOption {
	display:inline-block;
	width:40%;
	vertical-align:top;
}


.ui-state-error, .ui-icon-alert {
	font-size:110%;
	margin-bottom:10px;
	background:#f6412d;
	color:white;
	box-shadow:0px 5px 15px #999;
	border-radius:7px;
	margin:15px;
}
div.ui-state-error span.ui-icon {
	position:relative;
	top:5px !important;
	font-weight:bold;
}

div.h3 {
	color:#0fb6b3;
	margin-left:20px;
}

#contact {display:none;min-width:300px;width:40%;}
#contactinfo, #contactlogo {float:left;}
div#contactlogo {position:absolute;top:50px;right:50px;}
span.contacttitle {width:80px;display:inline-block;}
span.contactnumber {width:180px;display:inline-block;}

/**********************************
/* IMPORT CUSTOM FONT */

@font-face {
    font-family: 'cloudbold';
    src: url('font/cloud-bold-webfont.eot');
    src: url('font/cloud-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/cloud-bold-webfont.woff2') format('woff2'),
         url('font/cloud-bold-webfont.woff') format('woff'),
         url('font/cloud-bold-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'cloud_lightlight';
    src: url('font/cloud-light-webfont.eot');
    src: url('font/cloud-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/cloud-light-webfont.woff2') format('woff2'),
         url('font/cloud-light-webfont.woff') format('woff'),
         url('font/cloud-light-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}


* {
  font-family: 'Pridi', sans-serif ;
}


/****************************/
/* Content
/****************************/

div.content {
	margin-left:0px;
}

div.question {
	font-weight:bold;margin-top:20px;cursor:default;font-size:1.2em;
}
	div.question span {
		font-size:1.3em;
	}

a:link, a:visited, a:hover, a:active {text-decoration:none;}

div.errors {display:none;}
div.other {}
div.hidden {display:none;}

div.clear {clear:both;margin-bottom:5px;margin-left:30px;padding:6px;min-width:150px;width:100%;}
div.active {background: #999;}
div.myst-red div.active {background:white;color:#d22501;}
div.myst-green div.active {background:white;color:#91A61D;}

div.disable {}

div.h1 { min-width:100px;border-top:5px solid #1d9ac5;border-bottom:5px solid #1d9ac5;font-size:2em;color:#1d9ac5;background:#dff7ff;font-weight:bold;padding:15px 10px;}
div.h2 {
	font-size:1.2em;
}
div.h3 {
	font-size:1.3em;
}

span.error {}
span.other {color:#39f;font-weight:bold;position:relative;top:10px;}

tr.grid_th {cursor:default;height:25px;}
tr.grid td {padding:3px;padding-right:10px;border-bottom:1px solid #aaa;text-align:left;padding-bottom:10px;}
tr.grid:hover {background:#ddd;}
td.grid_select {cursor:pointer;}
td.grid_select:hover {background:#ffd;}

input[type	].dginput {width:250px;height:50px;height:60px;font-size:120%;border:1px solid #59f;margin:10px 0;padding:8px;}
input[type=text] {height:40px;}
input[type=text]:focus {}
input[type=text].allowadd {width:400px;height:50px;display:inline;margin-left:0.5em;}
textarea {}
textarea:focus {}

/* Precode */
div.pretag {float:left;padding:5px;border:1px solid red;color:black;font-size:1.4em;
background: #febbbb; /* Old browsers */
background: -moz-linear-gradient(top, #febbbb 0%, #fe9090 45%, #ff5c5c 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#febbbb), color-stop(45%,#fe9090), color-stop(100%,#ff5c5c)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #febbbb 0%,#fe9090 45%,#ff5c5c 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #febbbb 0%,#fe9090 45%,#ff5c5c 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #febbbb 0%,#fe9090 45%,#ff5c5c 100%); /* IE10+ */
background: linear-gradient(to bottom, #febbbb 0%,#fe9090 45%,#ff5c5c 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#febbbb', endColorstr='#ff5c5c',GradientType=0 ); /* IE6-9 */;margin:5px;cursor:pointer;}

span.red {color:red;}

ul.circle {
    list-style-type: square !important;
	padding-left:3em;
}

/*********************************/
/* Form
/*********************************/

/*input[type=radio], input[type=checkbox] {
  appearance: none;
  -moz-appearance: none;
  outline: none;
	border: 0px;
	z-index:3;
    width: 1.5em;
    height: 1.5em;
	vertical-align:middle;
}*/
form {
	padding:5px;
}
form select {
	width:40%;
}

.sclclock {min-width:50px !important;}


div.i-checks {
	font-size:1.3em;
	margin-bottom:5px;
}
	div.i-checks  div {
		margin-right:8px;
	}

div.imgblock {display: inline-block;height:auto;text-align:center;}
div.imgblock input[type=checkbox], div.imgblock input[type=radio] {display:none;position:relative;left:65px;}
div.imgblock img {padding:10px;}
div.imgblock span {width:60%;margin:auto;}
div.imgblockoth {width:160px !important;}
div.imgblockoth div.other {display:table;}
div.imgblockoth input.other {margin-left:20px !important;}
div.imgactive img {border:10px solid black;padding:0px;}
div.imgactive span {color:#f30;padding:0px;background:#fc9;padding:5px;}

input[type=button]#nextp {font-size:1em;}
input[type=button]#prevp {font-size:1em;}

/*******************************/
/* Special class
/*******************************/
.fullheight {
	height:100% !important;
}
.fullwidth {
	width:100% !important;
}
.inline-block {
	display:inline-block;
}
.margin {
	margin:15px;
}
.margin-tb {
	margin:15px 0px;
}
.margin-lr {
	margin:0px 15px;
}
.padding {
	padding:15px;
}
.padding-tb {
	padding:15px 0px;
}
.padding-lr {
	padding:0px 15px;
}
#skel-layers-inactiveWrapper {
	display:none;
}
.btm15 {
	margin-bottom:15px;
}
.nopdmg {
	margin:0px !important;
	padding:0px !important;
}
.nomg {
	margin:0px !important;
}

@media all and (min-width: 1024px) {
	nav div {min-width:120px;}
	#footer-wrapper {
		background:#666;
		color:white;
		font-size:80%;
		padding:15px;
	}
		#footer-wrapper a {
			color:white;
		}
	.pc {
		display:block;
	}
	.mb {
		display:none;
	}
}

@media all and (min-width: 200px) and (max-width: 1023px) {
	body {font-size:1.5em;}
	h1 {font-size:24px;}
	div.stepno {display:none;}
	div.content {margin-left:0px;}

	/* Decrease margin for mobile */
	form {padding:0px 10px;}
	#col-left {padding:0px;}
	div.mystrow {padding:0px;}
	.tabs-container .panel-body {padding:0px;}

	#footer-wrapper {
		background:#666;
		color:white;
		font-size:1.1em;
		padding:15px;
	}
		#footer-wrapper a {
			color:white;
		}
	#main {margin-left:0px;}
	#showtitle {margin-left:0px !important;}
	#step1, #step2, #step3, #step4 {display:none;}
	.features {display:block !important;width:100%;}
	.instruct {display:block !important;width:100%;}
	.attrQuestion {
		display:block;
		width:100%;
	}
	.attrOption {
		width:100%;
	}
	tr.grid td {
		padding-bottom:12px;
	}
	.pc {
		display:none;
	}
	.mb {
		display:block;
	}
	div.instruct {
		height:auto;
	}
	#main div.row:only-child {
		margin:0;
	}
	#empid {
		width:90%;
		margin:0 0 0 20px;
	}
	.button-nav {
		margin-left:20px !important;
	}

	/* Clock */ 
	.clockpicker-align-left.popover > .arrow {
		left:150px;
	}
}