@charset "UTF-8";
/* CSS Document */

body{
	width:100%;
	height:100%;
	font-family:'thaisans_neue_lightregular';
	font-size:20px;
	font-weight:normal;
	letter-spacing:1px;
	color:#fff;

	background-image: url(../img/bg.jpg);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100% 100%;
    background-attachment: fixed
	}
img{
	border:none;}
.clear{ clear:both;}
.warpper{
	width:98%;
	height:100%;
	margin:auto;
	
	}
.header{
	width:100%;
	margin-top:12px;
	height:auto;
	}
.subject{
	float:left;
	clear:none;
	margin:10px 0 10px 0;
	background:#1077b9;
	border:1px solid #1077b9;
	border-radius:30px;
	padding:5px 20px 5px 20px;
	font-family:'thaisans_neue_lightregular';
	font-size:25px;
	line-height:35px;
	color:#fff;
	}
.start{

	clear:none;
	margin:10px 0 10px 0;
	background:#1077b9;
	border:1px solid #1077b9;
	border-radius:30px;
	padding:5px 20px 5px 20px;
	font-family:'thaisans_neue_lightregular';
	font-size:25px;
	line-height:35px;
	color:#fff;
	}	
.logo{
	float:right;
	clear:none;
	margin-top:15px;
	margin-right:10px;
	}
/*---------form equipment---------------*/
.form-box{
	width:90%;
	height:auto;
	margin:auto;
	padding-top:30px;
	
	}
.form-box-centent{
	width:100%;
	height:100%;
	margin:auto;
	padding-top:0px;
	max-width:950px;
	}
.title-text{
	font-size:25px;
	line-height:35px;
	margin-bottom:10px;
	}
input[type=text].name, 
input[type=text].phone, 
input[type=text].id, 
input[type=text].calendar, 
input[type=date].calendar,  
input[type=password].password ,  
input[type=text].reference ,
input[type=text].career
{
	width:90%;
	
	height:auto;
	background:none;
	border:1px solid #fff;
	border-radius:10px;
	font-family:'thaisans_neue_lightregular';
	font-size:20px;
	letter-spacing:1px;
	color:#fff;
	line-height:25px;
	padding:5px 10px 5px 60px;
	margin-bottom:40px;
	}
	
	
input[type=date].calendar {
	background:url(../img/calendar-ic.jpg) left center no-repeat;
}
input[type=text].name{
	background:url(../img/man-ic.jpg) left center no-repeat;
	}
input[type=text].phone{
	background:url(../img/mobile-ic.jpg) left center no-repeat;
	}
input[type=text].id{
	background:url(../img/id-ic.jpg) left center no-repeat;
	}
input[type=text].calendar{
	background:url(../img/calendar-ic.jpg) left center no-repeat;
	}
input[type=password].password{
	background:url(../img/pass-ic.jpg) left center no-repeat;
	}

input[type=text].reference{
	background:url(../img/reference-ic.jpg) left center no-repeat;
	}
	
	
.back-bt, .next-bt{
	width:100px;
	height:100px;
	background:none;
	float:left;
	clear:none;
	border:1px solid #fff;
	border-radius:50px;
	font-family:'thaisans_neue_lightregular';
	letter-spacing:1px;
	font-size:20px;
	color:#fff;
	line-height:50px;
	text-align:center;
	cursor:pointer;
	margin-top:00px;
	margin-right:0px;
	}
.next-bt{
	float:right;
	clear:none;
	}
/*---- vehicle ----*/
.vehicle-box{
	width:180px;
	height:180px;
	/*background:#fff;
	border:1px solid #09F;
	border-radius:100px;*/
	background:url(../img/vehicle-bg.png) center no-repeat;
	padding:0px 0 0 0px;
	float:left;
	clear:none;
	margin:20px 10px 20px 20px;
	cursor:pointer;
	}
.border_add{
	border: solid 5px #C4060A; 
	border-radius: 94px; 
	background-color:#1767BB;
	}	
.vehicle-pic-mux, .vehicle-pic-vcross, .vehicle-pic-4door, .vehicle-pic-2door, .vehicle-pic-spark, .vehicle-pic-max-vcross, .vehicle-pic-cab4, .vehicle-pic-space, .vehicle-pic-x-series
, .vehicle-pic-newvcross, .vehicle-pic-hi4, .vehicle-pic-hi2, .vehicle-pic-newspark
{
	width:160px;
	height:120px;
	margin-top:25px;
	margin-left:10px;
	background:url(../img/mu-x.png) center no-repeat;
	background-size:97%;}
.vehicle-pic-max-vcross{
	background:url(../img/car-03.png) center no-repeat;
	background-size:95%;
	}
.vehicle-pic-vcross{
	background:url(../img/car-04.png) center no-repeat;
	background-size:95%;
	margin-top:30px;
	}	
.vehicle-pic-4door{
	background:url(../img/car-02.png) center no-repeat;
	background-size:90%;
	margin-top:30px;
	}
.vehicle-pic-2door{
	background:url(../img/car-01.png) center no-repeat;
	background-size:90%;
	margin-top:30px;
	}
.vehicle-pic-spark{
	background:url(../img/car-08.png) center no-repeat;
	background-size:90%;
	margin-top:30px;
	}
.vehicle-pic-cab4{
	background:url(../img/car-05.png) center no-repeat;
	background-size:90%;
	margin-top:30px;
	}
.vehicle-pic-space{
	background:url(../img/car-06.png) center no-repeat;
	background-size:90%;
	margin-top:30px;
	}
.vehicle-pic-x-series{
	background:url(../img/car-09.png) center no-repeat;
	background-size:96%;
	margin-top:30px;
	}
	
.vehicle-pic-newvcross{
	background:url(../img/car-10.png) center no-repeat;
	background-size:90%;
	margin-top:30px;
	}
.vehicle-pic-hi4{
	background:url(../img/car-11.png) center no-repeat;
	background-size:90%;
	margin-top:30px;
	}
.vehicle-pic-hi2{
	background:url(../img/car-12.png) center no-repeat;
	background-size:90%;
	margin-top:30px;
	}
.vehicle-pic-newspark{
	background:url(../img/car-13.png) center no-repeat;
	background-size:90%;
	margin-top:30px;
	}	
	
/* sub-vehicle-type--------------*/
select{
	width:98%;
	height:auto;
	background:none;
	border:1px solid #fff;
	border-radius:10px;
	font-family:'thaisans_neue_lightregular';
	font-size:25px;
	letter-spacing:1px;
	color:#06F;
	line-height:35px;
	padding:5px 10px 5px 60px;
	margin-bottom:40px;
	background-color:none;
	background-color:#fff;
	}
/* satisfaction ------------------*/
.sale-info{
	width:50%;
	height:auto;
	float:right;
	clear:none;
	padding-top:0px;
	}
.sale-pic{
	width:100%;
	height:auto;
	margin:auto;
	}
.sale-name{
	width:auto;
	height:auto;
	font-family:'thaisans_neue_lightregular';
	font-size:25px;
	line-height:28px;
	text-align:center;
	margin:auto;
	padding-top:5px;
	}
.cutomer-info{
	width:45%;
	height:auto;
	border:1px solid #fff;
	font-family:'thaisans_neue_lightregular';
	font-size:20px;
	float:left;
	clear:none;
	}
.customer-info-title{
	width:100%;
	height:auto;
	background:#fff;
	font-family:'thaisans_neue_lightregular';
	font-size:20px;
	line-height:30px;
	text-align:center;
	color:#06C;
	}
.customer-info-detail{
	padding:10px 10px 10px 10px;
	font-family:'thaisans_neue_lightregular';
	font-size:20px;
	line-height:26px;
	color:#fff;
	}
.cutomer-satis-box{
	width:25%;
	height:auto;
	float:left;
	clear:none;
	}
.cutomer-satis-ic-great, .cutomer-satis-ic-good, .cutomer-satis-ic-fine, .cutomer-satis-ic-bad {
	width:77px;
	height:77px;
	border:1px solid #6CF;
	border-radius:40px;
	background:url(../img/great-ic.png) center no-repeat;
	background-color:#6CF;
	cursor:pointer;
	float:left;
	clear:none;
	}
.cutomer-satis-ic-good{
	background:url(../img/good-ic.png) center no-repeat;
	background-color:#6CF;
	}
.cutomer-satis-ic-fine{
	background:url(../img/fine-ic.png) center no-repeat;
	background-color:#6CF;
	}
.cutomer-satis-ic-bad{
	background:url(../img/bad-ic.png) center no-repeat;
	background-color:#6CF;
	}
.cutomer-satis-ic-great:active, .cutomer-satis-ic-good:active, .cutomer-satis-ic-fine:active, .cutomer-satis-ic-bad:active{
	border:1px solid #06C;
	border-radius:40px;
	background-color:#06C;
	}
	

.customer-satis-text{
	font-family:'thaisans_neue_lightregular';
	font-size:24px;
	line-height:26px;
	float:left;
	clear:none;
	margin-left:10px;
	padding-top:10px;
	}
	
.avatar img {
    border-radius: 50%;
}

                               
.bt_modal{ 
	text-align:left; 
	width:90%; 
	height:56px; 
	border-radius:10px; 
	color:#146BD3; 
	background-color:#F9F9F9; 
}

input:focus {
    outline:none;
}

.sm-ot {
margin-left: 150px;
margin-top: 8px;
border-radius: 25px;
border: 1px solid #E800FF;
padding: 2px; 
width: 400px;
height: 50px; 
cursor: pointer;
}

.sm-continue {
margin-left: 150px;
margin-top: 8px;
border-radius: 25px;
border: 1px solid #00FD5C;
padding: 2px; 
width: 60%;
height: 50px; 
cursor: pointer;
margin-left:15%;
}

.sm-login {

margin-top: 8px;
border-radius: 25px;
border: 1px solid #FFFFFF;
padding: 2px; 
width: 70%;
height: 50px; 
cursor: pointer;
margin-left:15%;
}

.sm-logout {
margin-top: -56px;
float:right;
margin-right:14%;
border-radius: 25px;
border: 1px solid #F0FF00;
padding: 2px; 
width: 80px;
height: 50px; 
cursor: pointer;

}

.sm-welcome {

border-radius: 25px;
border: 1px solid #F0FF00;
padding: 2px; 
width: 400px;
height: 100px; 
cursor: pointer;

}

.bt-bottm{
	clear:both;  width:100%; bottom:20px; position:fixed; 
}
.b-left{
	float:left; width:100px;
	cursor:pointer;
	}
.b-right{
	float:right; width:100px; margin-right:60px;
	cursor:pointer;
}