* {
	box-sizing:border-box;
}
body {
	font-family:'prompt';
	margin:0; padding:0;
}
:focus {
	outline:none;
}
input[type=text], input[type=tel], input[type=date], input[type=email], input[type=number], input[type=password] {
    margin:0; padding:10px 12px;
    border:1px solid #bfbfbf;
    width:100%; border-radius:5px;
}
.inputGroup2 {
    display:table; margin-bottom:10px;
}
.inputGroup2 input[type=text] {
    display:table-cell;
    border-radius:4px 0 0 4px;
    width:100%; position:relative;
}
.inputGroup2 .titleGroup2 {
    display:table-cell;
    padding:6px 12px;
    color: #555;
    text-align: center;
    background-color: #FFF;
    border: 1px solid #ccc;
    border-left:none;
    border-radius:0 4px 4px 0;
    font-size:14px;
    width:1%;
}
.inputGroup2 .titleGroup2 button {
    display:table-cell; background-color:#FFF;
    border:none;
}
select {
	width:100%; font-family:'prompt';
	border:none; background-color:transparent;
	font-size:16px
}
button {
	margin:0; padding:10px 12px;
    border:1px solid #bfbfbf;
    width:100%; border-radius:5px;
	cursor:pointer;
}

.bg_img {
	background-size:cover;
	background-position:center center;
	background-repeat:no-repeat;
}

.inputGroup2 {
    display:table; margin-bottom:10px;
}
.inputGroup2 input[type=text] {
    display:table-cell;
    border-radius:4px 0 0 4px;
    width:100%; position:relative;
}
.inputGroup2 .titleGroup2 {
    display:table-cell;
    padding:6px 12px;
    color: #555;
    text-align: center;
    background-color: #FFF;
    border: 1px solid #ccc;
    border-left:none;
    border-radius:0 4px 4px 0;
    font-size:14px;
    width:1%;
}
.inputGroup2 .titleGroup2 button {
    display:table-cell; background-color:#FFF;
    border:none;
}

.alert-block {
	position:fixed; width:100%; height:100%;
	top:0; left:0; background-color:rgba(1,1,1,0.8);
	z-index:9; display:none;
}
.alert-block .alert-content {
	position:absolute; width:80%;
	transform:translate(-50%, -50%); left:50%; top:50%;
	background-color:#FFFFFF; padding:10px; text-align:center;
	border-radius:5px;	
}

.bg-login {
	background-image:url(images/bg.jpg);
	
	background-position:center;
	background-repeat:no-repeat;
	background-size:cover;
	position:fixed;
	width:100%; height:100%;
	/*background-position: -100px 0;
	width:100vw; height:100vh;*/
}
.bg-login .bg-overflow {
	height:100%;
}
.logo {
	text-align:center; padding:20px 0 20px 0;
}
.logo img {
	border-radius:15px;
	width:100px;
}

.form {
	
}
.form-login .row {
	text-align:center;
}
.form-login .row input {
	font-size:23px; width:80%;
	background-color:rgba(255,255,255,0.8);
}
.form-login .row-btn {
	text-align:center; padding:50px 0;
}
.btn-login {
	background-color:#dd264a;
	border:2px solid #DDDDDD; color:#FFFFFF;
	cursor:pointer;
}

.form-process .row {
	text-align:center; margin-bottom:10px;
}
.form-process .row input {
	width:80%;
	background-color:rgba(255,255,255,0.8);
}
.form-process .row select {
	font-size:23px; width:80%;
	background-color:rgba(255,255,255,0.8);
}
.form-process .row .percen-block {
	width:80%; height:49px; margin:0 auto;
	background-color:rgba(255,255,255,0.8);
	border-radius:5px;
}
.form-process .row .percen-block .percen-data {
	background-color:#fcf101; height:100%;
	border-radius:5px; text-align:right;
	font-size:23px;
}
.form-process .row .percen-block .percen-data .percen-title {
	height:100%;
	border-radius:5px; line-height:49px; text-align:right;
	font-size:23px; padding:0 10px;
}

.form-process .row button {
	width:80%;
	background-color:#dd264a;
	border:1px solid #DDDDDD; color:#FFFFFF;
	cursor:pointer;
}

@media only screen and (min-width: 768px) {
	.logo {
		/*padding-bottom:150px;*/
	}
	.logo img {
		width:145px;
	}
	
	.form-login .row input {
		width:70%;
	}
	.form .row-btn {
		padding-top:150px;
	}
	
	.form-process .row input, .form-process .row select, .form-process .row .percen-block, .form-process .row button {
		width:70%;
	}
}

@media only screen and (min-width: 1200px) {
	.form-login .row input {
		width:35%;
	}
	.form-process .row input, .form-process .row select, .form-process .row .percen-block, .form-process .row button {
		width:35%;
	}
}

@media only screen and (min-width: 1600px) {
	.form-login .row input {
		width:20%;
	}
	.form-process .row input, .form-process .row select, .form-process .row .percen-block, .form-process .row button {
		width:20%;
	}
}


.user_status {
	background-color:rgba(255,255,255,0.9);
	padding:10px; border-radius:5px;
	width:80%; margin:0 auto 20px auto;
}
.user_status .row {
	margin-bottom:10px;
}
.user_status .row .label {
	font-size:12px; color:#404040;
}
.user_status .row .title, .user_status .row select#car_id {
	font-weight:600; font-size:18px;
}
.user_status .row select#car_id {
	
}
.user_search {
	width:80%; margin:0 auto;
}
@media only screen and (min-width: 768px) {
	.user_status {
		width:70%;
		padding:20px;
	}
	.user_status .row .title, .user_status .row select#car_id {
		font-size:22px;
	}
	.user_search {
		width:70%; padding-bottom:10px;
	}
}
@media only screen and (min-width: 1200px) {
	.user_status, .user_search {
		width:35%;
	}
}
@media only screen and (min-width: 1600px) {
	.user_status, .user_search {
		width:20%;
	}
}

.user_status .row .gallery {
	overflow:hidden; margin-top:5px;
}
.user_status .row .gallery .gallery-list {
	width:32%; height:100px;
	float:left; 
	margin:1px;
	box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.05);
	position:relative; border-radius:5px;
}
.user_status .row .gallery .gallery-list:hover {
	opacity:0.9; cursor:pointer;
}
.user_status .row .gallery .gallery-list:nth-child(1) {
	padding:5px;
}
.user_status .row .gallery .gallery-list .gallery-title {
	position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);
}
.user_status .row .gallery .gallery-list .gallery-title .title {
	font-size:16px; padding:0;
}
.user_status .row .gallery .gallery-list .gallery-title .icon {
	font-size:30px; text-align:center;
}
.user_status .row .gallery .gallery-list .gallery-option {
	position:relative; background-color:rgba(255,255,255,0.4);
	width:100%; height:26px; border-radius:5px 5px 0 0;
}
.user_status .row .gallery .gallery-list .gallery-option .gallery-icon:nth-child(1) {
	position:absolute; top:3px; right:28px;
	font-size:20px;
}
.user_status .row .gallery .gallery-list .gallery-option .gallery-icon:nth-child(2) {
	position:absolute; top:3px; right:3px;
}

.row-list_service {
	
}
.row-list_service .list {
	overflow:hidden;
}
.row-list_service .list.active {
	color:#00cc33;
}
.row-list_service .list.pass {
	color:#666666;
}

.row-list_service .list .title-service {
	float:left;
}
.row-list_service .list .time {
	float:right;
}
.row-estimate {
	margin-bottom:10px;
}
.row-estimate .estimate-remain, .row-estimate .estimate-finish {
	overflow:hidden;
}
.row-estimate .estimate-remain .title, .row-estimate .estimate-finish .title {
	float:left;
}
.row-estimate .estimate-remain .time, .row-estimate .estimate-finish .time {
	float:right;
}

.popup-gallery {
	position:fixed; top:0; left:0;
	width:100%; height:100%;
	background-color:rgba(1,1,1,0.8);
	z-index:12; display:none;
}
.popup-gallery .popup-content {
	position:absolute; top:50%; left:50%;
	transform:translate(-50%, -50%);
}
.popup-gallery .popup-content .icon {
	color:#FFFFFF; margin-bottom:5px;
	text-align:right;
}
.popup-gallery .popup-content .icon .close-popup_gallery {
	cursor:pointer;
}
.popup-gallery .popup-content .img img {
	max-width:100%;
}