.aball{
	overflow-x:scroll;
	-ms-overflow-x:hidden;
	-ms-overflow-y:hidden;
}


.seemap{
	position:absolute;
	bottom:20px;
	right:20px;
	}

.user-box{
	padding: 10px 15px;
	box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
	}

.user-box .name{
	padding-left:25px;
	font: 14px/25px 'kanit', Arial, sans-serif;
	background:url(../images/Group18246.png) 0 50% no-repeat;
	}
.user-box .name a{
	color:#000;
}		

.hscroll-none::-webkit-scrollbar {
     display:none;
}


.topname{
	margin:0;
	padding: 18px 0px;
	position:relative;
	text-align:center;
	font: 23px/20px 'kanit', Arial, sans-serif;
	/* font-weight: bold; */
	color:#fff;
	background: #006CBE;
	-webkit-border-bottom-right-radius: 20px;
	-webkit-border-bottom-left-radius: 20px;
	-moz-border-radius-bottomright: 20px;
	-moz-border-radius-bottomleft: 20px;
	border-bottom-right-radius: 20px;
	border-bottom-left-radius: 20px;
}
.topname .arrow{
	position:absolute;
	top: 16px;
	left: 16px;
}
.topname .arrow img{
	max-width:100%;
	height:auto;
}


.topname .user-add{
	position:absolute;
    top: 21px;
    right: 16px;
}


.btn-cc{
	text-align:center;
	}
.btn-cc img{
	max-width:100%;
	height:auto;
	}	
/**********************************/
.aumper{
	padding: 10px 0 15px 0;
	font: 16px/22px 'kanit', Arial, sans-serif;
	}
.mini-pin{
	margin: 3px 0;
	padding:6px 0;
	padding-left: 30px;
	padding-right: 8px;
	background: url(../images/map-pin-mini.png) 14px 50% no-repeat;
	border: 1px solid #ccc;
	border-radius: 4px;
	font: 14px/22px 'kanit', Arial, sans-serif;
	text-align: center;
	}
.mini-pin-2{
	height: 25px;
	margin: 2px 7px;
	padding: 2px 0;
	padding-left: 30px;
	padding-right: 15px;
	background: url(../images/map-pin-mini.png) 11px 50% no-repeat;
	border: 1px solid #ccc;
	border-radius: 4px;
	font: 14px/21px 'kanit', Arial, sans-serif;
	}		
		
.mid{
	padding: 15px 5px;
}


.mid .title{
	text-align:center;
	padding:15px 25px;
	font: 20px/25px 'kanit', Arial, sans-serif;
}


.pet-list .op-text a {

    color: #000;
}

.mid input[type=text], select{
  width: 100%;
  padding: 10px 15px;
  margin: 3px 0;
  margin-bottom:15px;
  display: inline-block;
  border: 1px solid #fff;
  border-radius: 100px;
  box-sizing: border-box;
  font-size:16px;
  -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;	
	
   background:#fff;


}

select {
    background-image: url(../images/arrow-down.png);
    background-position: right 1rem center;
    background-repeat: no-repeat;
    background-size: auto;
    padding-right: 2.5rem;
}

.mid .content{
	position:relative;

}

.mid .content .title{
	padding-bottom:15px;
	font: 21px/24px 'kanit', Arial, sans-serif;
	color:#fff;
}

.mid .content .detail{
	padding-bottom:15px;
	font: 17px/24px 'kanit', Arial, sans-serif;
	color:#fff;
}

.mid .content .text-w{
	padding-left:15px;
	padding-bottom:15px;
	font: 16px/20px 'tahoma', Arial, sans-serif;
	color:#fff;
}

.btn-all{
	position:relative;
	/* bottom: -39px; */
	font: 18px/20px 'kanit', Arial, sans-serif;
	color:#fff;
	width:max-content;
	/* margin:0 8px; */
	padding: 6px 26px;
	background: #9a479c;
	-webkit-border-radius: 7px;
	-moz-border-radius: 7px;
	border-radius: 7px;
}
.nif{
	background:#AFAFAF;

}

.btn-all a{
	display:inline-block;
	width:100%;
	height:auto;
	color:#fff;
}


.btn-dis{
	background:#C1C1C1;

}

/********************************/
.timeline{
	padding: 15px 15px;
	background:#fff;
	-webkit-border-radius: 22px;
	-moz-border-radius: 22px;
	border-radius: 22px;
	background:#fff;
	}

.timeline .keed{
	font: 21px/24px 'kanit', Arial, sans-serif;
	color:#828282;
	background:url(../images/keed.png) top left no-repeat;
	}

.timeline .keed .text-box{
	position:relative;
	font: 16px/22px 'kanit', Arial, sans-serif;
	color:#828282;
	padding:12px 0;
	padding-left:30px;
	
	}	
	
.timeline .keed .active{
	font: 16px/22px 'kanit', Arial, sans-serif;
	color:#279B05;

	}
.timeline .keed .date{
	font: 15px/22px 'kanit', Arial, sans-serif;
	color:#828282;

	}		


.timeline .keed .text-box .pass{
	position:absolute;
		left:0;
	width:23px;
	height:23px;
	background:url(../images/pass.png);
	}

.timeline .keed .text-box .wait{
	position:absolute;
		left:0;
	width:23px;
	height:23px;
	background:url(../images/wait.png);
	}

/********************************/
.popup-1{
	position:absolute;
		left:25px; right:25px;
	padding:30px 30px;
	background:#fff;
	-webkit-border-radius: 22px;
	-moz-border-radius: 22px;
	border-radius: 22px;
	text-align:center;
	}
	
.popup-1 .close{
	position:absolute;
		top:15px;
		right:15px;
	
}
	
.popup-1 .text-pop-1{
	font: 19px/20px 'kanit', Arial, sans-serif;
	padding-bottom:15px;
	}

.popup-1 .btn-pop{
	font: 19px/20px 'kanit', Arial, sans-serif;
	color:#fff;
	width:100%;
	margin:0 8px;
	margin-bottom:15px;
	padding: 18px 15px;
	background:#FE6402;
	-webkit-border-radius: 100px;
	-moz-border-radius: 100px;
	border-radius: 100px;
}

.popup-1 .btn-pop a{
	display:inline-block;
	width:100%;
	height:auto;
	color:#fff;
}	


/**************************************/
.card-box{
	margin:0 -20px;
}
.user-card{
	width:320px;
	min-height:193px;
	padding:12px;
	
	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
	border-radius: 12px;
	background:#fff url(../images/card.png) 50% 50% no-repeat;
	background-size:100% auto;
	
	box-shadow: 1px 2px 6px rgba(0,0,0, 0.15);
    -moz-box-shadow: 1px 2px 6px rgba(0,0,0, 0.15);
    -webkit-box-shadow: 1px 2px 6px rgba(0,0,0, 0.15);
	}

.user-card .u-name {
    padding-bottom: 15px;
    font: 21px/20px 'kanit', Arial, sans-serif;
    color: #000;
}

.user-card .u-address{
    padding-bottom: 15px;
    font: 17px/20px 'kanit', Arial, sans-serif;
    color: #000;
}

.user-card .u-detail{
    padding-bottom: 15px;
    font: 17px/20px 'kanit', Arial, sans-serif;
    color: #000;
}
.user-card .u-num{
	text-align:right;
    font: 21px/20px 'kanit', Arial, sans-serif;
	padding-right:15px;
	background:url(../images/left-arrow.png) 100% 5px no-repeat;
}
.user-card .u-orange{
    color:#FE6402;
	
}
.user-card .u-red{
    color:#FF0000;
}

.user-card .u-green{
    color:#279B05;
	background: none;
}

.user-card .u-date{
    padding-bottom:0px;
    font: 14px/24px 'kanit', Arial, sans-serif;
    color: #000;
}


.user-card-add{
	width:320px;
	min-height:193px;
	
	padding:12px;
	background:#FBFBFB;
	
	text-align:center;
	
	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
	border-radius: 12px;
	
	box-shadow: 1px 2px 6px rgba(0,0,0, 0.15);
    -moz-box-shadow: 1px 2px 6px rgba(0,0,0, 0.15);
    -webkit-box-shadow: 1px 2px 6px rgba(0,0,0, 0.15);
	}
.user-card-add .pic{
	
padding-top: 20px;
	}	

.user-card-add .pic img{
	max-width:100%;
	height:auto;
	
	}
.user-card-add .text{
	padding-left: 24px;
	width: 260px;
	margin:0 auto;
	margin-top: 15px;
	font: 18px/24px 'kanit', Arial, sans-serif;
	background:url(../images/plus-circle.png) 0 50% no-repeat;
	color:#FE6402;
	}		
/******************************************/
.u-history{
	padding:15px;
	box-shadow: 1px 2px 6px rgba(0,0,0, 0.15);
    -moz-box-shadow: 1px 2px 6px rgba(0,0,0, 0.15);
    -webkit-box-shadow: 1px 2px 6px rgba(0,0,0, 0.15);
	
	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
	border-radius: 12px;
}
.u-history .title{
    padding-bottom: 15px;
    font: 21px/20px 'kanit', Arial, sans-serif;
    color: #000;
}

.u-history .h-tb{

}

.u-history .h-tb .t-head{
	padding:7px 5px;
	background:#228DF8;
	font: 15px/20px 'kanit', Arial, sans-serif;
    color: #FFF;
	text-align:center;
	-webkit-border-radius: 100px;
	-moz-border-radius: 100px;
	border-radius: 100px;

}

.u-history .h-tb ul{
	margin:0;
	padding:0 5px;
    color: #fff;


}

.u-history .h-tb ul li{
	margin:0;
	padding:8px 0;
	font: 15px/20px 'kanit', Arial, sans-serif;
    color: #000;
	border-bottom:#E1E1E1 1px solid;
	list-style:none;

}

.u-history .h-orange{
    color:#FE6402;
	
}
.u-history .h-red{
    color:#FF0000;
}

.u-history .h-green{
    color:#279B05;
}


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

.user-bill{
	padding:15px;
	background: url(../images/bill-bg.png) bottom center no-repeat;
	background-size:100% auto;

	}

.user-bill .bill-top{
    padding-bottom: 10px;
    font: 18px/20px 'kanit', Arial, sans-serif;
    color: #000;
}

.user-bill .bill-mid{
    padding-bottom: 5px;
    font: 15px/20px 'kanit', Arial, sans-serif;
    color: #000;
	border-bottom:#ddd 1px solid;
}
.user-bill .bill-mid span{
	padding-right:5px;
}

.user-bill .bill-total{
	margin-top:10px;
	text-align:center;

}

.user-bill .bill-total .ttb-1{
    padding-bottom: 5px;
    font: 16px/20px 'kanit', Arial, sans-serif;
    color: #000;
}
.user-bill .bill-total .ttb-2{
    padding-bottom: 15px;
    font: 37px/37px 'kanit', Arial, sans-serif;
    color:#FE6402;
}


/******************************/
.bank-box{
	margin-top:20px;
	padding: 15px 10px;
	background:#fff;
	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
	border-radius: 12px;
	background:#fff;
	}
.bank-box .bank-top{
    padding-bottom: 10px;
    font: 18px/20px 'kanit', Arial, sans-serif;
    color: #000;
}

.bank-box .bank-mid{

}

.bank-box .bank-logo{

}

.bank-box .bank-logo img{
	width:100%;
	height:auto;

}

.bank-box .bank-name{
	width:max-content;
	padding-left:5px;
	padding-right:5px;
    padding-bottom: 15px;
    font: 13px/17px 'kanit', Arial, sans-serif;
    color: #000;
}

.bank-box .bank-qr{
	text-align:center;

}
.bank-box .bank-qr img{
	width:100%;
	height:auto;
}

/********************************/
.top4{
    padding-bottom: 5px;
    font: 17px/20px 'kanit', Arial, sans-serif;
    color: #fff;
}

.mid4{
    padding-bottom: 15px;
}

.mid4 .block{
	padding:5px;
	background:#fff;
	-webkit-border-radius: 7px;
	-moz-border-radius: 7px;
	border-radius: 7px;
	
	box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}


.mid4 .block .textbox-block{
	width:80%;	
}
.mid4 .block .calendar-block{
	text-align:right;
	padding-top:7px;
	padding-right:7px;
}
.mid4 .block input{
	border:none;	
}

.mid4 .form-control {
	border:none;
	-webkit-border-radius: 7px;
	-moz-border-radius: 7px;
	border-radius: 7px;
}


/**********************************************/
.popup-1{
	position:absolute;
	left:25px;
	right:25px;
	padding: 44px 30px 20px 30px;
	background:#fff;
	-webkit-border-radius: 9px;
	-moz-border-radius: 9px;
	border-radius: 9px;
	text-align:center;
	box-shadow: rgba(17, 17, 26, 0.1) 0px 0px 16px;
	}
	
.popup-1 .close{
	position:absolute;
	top: 7px;
	right: 7px;
	padding: 9px;
	box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
	-webkit-border-radius: 50px;
	-moz-border-radius: 50px;
	border-radius: 50px;
}


.popup-1 .text-big{
	font: 23px/23px 'kanit', Arial, sans-serif;
	padding-bottom:5px;
	}

.popup-1 .text-title{
	font: 17px/20px 'kanit', Arial, sans-serif;
	padding-bottom:15px;
	}	

.popup-1 .text-title-2{
	font: 17px/20px 'kanit', Arial, sans-serif;
	padding-bottom:5px;
	text-align:left;
	}
.popup-1 .text-title-3{
	font: 14px/20px 'kanit', Arial, sans-serif;
	padding-bottom:0px;
	text-align:left;
	}
.popup-1 .text-title-3 span{
	font-weight:bold;
	}				
	
.popup-1 .text-pop-1{
	font: 17px/20px 'kanit', Arial, sans-serif;
	background: url(../images/bell.png) 0 13% no-repeat;
	padding-left:30px;
	padding-bottom:15px;
	}
.popup-1 .btn-pop img{
	margin-top:-10px;
	}	


.popup-1 .btn-pop{
	font: 19px/20px 'kanit', Arial, sans-serif;
	color:#fff;
	margin: 0 48px;
	margin-bottom:15px;
	padding: 12px 15px;
	background: #02b201;
	-webkit-border-radius: 100px;
	-moz-border-radius: 100px;
	border-radius: 100px;
	box-shadow: rgba(0, 0, 0, 0.45) 0px 25px 20px -20px;
}

.popup-1 .btn-pop a{
	display:inline-block;
	width:100%;
	height:auto;
	color:#fff;
}	
/*********************************************/

.e-total{
	}
.e-total .top{
	font: 18px/20px 'kanit', Arial, sans-serif;
	}
.e-total .e-select{
	padding-top:15px;
	}
.e-total .status{
	
	}				
	
.e-total .status img{
	max-width:100%;
	height:auto;
	padding:0 1px;
	
	}		
	
/******************************/
.pet-pic{
	height: auto;	
	}
.pet-pic img{
	max-width:100%;
	height:auto;
	}	


/******************************/	
	
.pet-list{
	padding: 12px 8px;
	margin-bottom:20px;
	-webkit-border-radius: 7px;
	-moz-border-radius: 7px;
	border-radius: 7px;
	background:#fff;
	box-shadow: 0px 0px 6px 4px rgba(0, 0, 0, 0.05);
	}
.pet-list .op-pet{
	width: 120px;
	height:73px;
	margin: 0 5px;
	-webkit-border-radius: 100px;
	-moz-border-radius: 100px;
	border-radius: 100px;
	overflow:hidden;
	background:#f5f5f5;
	}
.pet-list .op-pet img{
	max-width:100%;
	height:auto;
	height: 100% !important;
	width: 100%;
	object-fit: cover;
}

.pet-list .op-text{
	padding-left: 7px;
	font: 15px/21px 'kanit', Arial, sans-serif;
	color: #000;
}
	
.pet-list .op-text span{
	color:#2057a4;
	
}
.pet-list .op-text span.wait{
	color:#FF7700;
	
}		
	
.pet-list .op-box{
	padding:10px 0;
	
}

.pet-list .op-btn{
	padding: 3px 11px;
	margin:5px;
	font: 13px/20px 'kanit', Arial, sans-serif;
	color:#000;
	border:#ddd 1px solid;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}	
.pet-list .op-btn a{
	color:#000;
}
	
@media (min-width: 320px) and (max-width: 375px) {
.pet-list .op-text{
	font: 13px/20px 'kanit', Arial, sans-serif;
}
		
}