@charset "UTF-8";
/* @import url(//fonts.googleapis.com/earlyaccess/notosansthai.css); */
@font-face {
	font-family: 'notosansthai';
	src: url('../fonts/NotoSansThaiUI-Regular.ttf');
 }

body{
	font-family: 'notosansthai', sans-serif;
}
#product_listz{
	position: absolute;
}
.select_none{	
	pointer-events: none;
}

.list-group-item{
 background-color: white;
}

#lineChart{
	font-family: 'notosansthai', sans-serif;
}
input[type='file']{
	font-family: 'notosansthai', sans-serif;
}
.img-center{
	display: block;
    margin: auto;
}.bg-pink {
	background-color: #FFBF08 !important;
	font-family: 'notosansthai', sans-serif;

}
.btn{
	font-family: 'notosansthai', sans-serif;
}
.btnc-right{
	float: right;
	margin-right:5px;
}
.dataTables_filter{
	float: right;
}
.form-control
{
	font-family: 'notosansthai', sans-serif;
}
.bg-white{
	background-color: #ffffff;
	font-family: 'notosansthai', sans-serif;
}
.bg-gray{
	background-color: #B4B4C6;
	font-family: 'notosansthai', sans-serif;
}
.bg-purple{
	background-color: #CC99FF;
	font-family: 'notosansthai', sans-serif;
}
.text-pink {
	color: #f2d43d !important;
	font-family: 'notosansthai', sans-serif;
}

.text-enable {
	color: #27d709 !important;
	font-family: 'notosansthai', sans-serif;
}

.text-yello {
	color: #FFDF00 !important;
	font-family: 'notosansthai', sans-serif;
}
.div#label_1_1{
	color: #f2d43d !important;
	font-size: 15px;
	font-family: 'notosansthai', sans-serif;
}
/*=======================*/
/*===== Buttons css =======*/
/*=======================*/
.iconsetting{
	font-size: 80px;
	color: darkgrey;
}
.btn-pink {
	color: #fff !important;
	background-color: #f2d43d !important;
	border-color: #f2d43d !important;
	cursor:pointer;
}

.btn-pink:hover {
	color: #000 !important;
	background-color: #f2d43d !important;
	border-color: #f2d43d !important;
	font-weight:bold;
}

.btn-pink:focus,.btn-pink.focus {
	box-shadow: 0 0 0 2px rgba(21,212,190,0.5);
}

.btn-pink.disabled,.btn-pink:disabled {
	background-color: #ffcce0 !important;
	border-color: #ffcce0 !important;
}

.btn-pink:active,.btn-pink.active,.show>.btn-pink.dropdown-toggle {
	color: #fff !important;
	background-color: #f2d43d !important;
	background-image: none;
	border-color: #f2d43d !important;
}
.btn-circle {
	
		display: inline-block;
    font-weight: normal;
    line-height: 2.5;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    user-select: none;
    border: 1px solid transparent;
    padding: .5rem 1rem;
    font-size: 1rem;
    border-radius: .25rem;
    transition: all 0.2s ease-in-out;
	 border-radius: 50%;

}
.btn-circle:focus,.btn-circle.focus {
	box-shadow: 0 0 0 2px #5BFFF6;
}
.zoomA {
	
	transition-duration: 1s;
	transition-timing-function: ease;
 }
 .zoomA:hover {
	transform: scale(3);
 }
 .cardproduct-green{
	 background-color: #4ad991;
 }
 .cardproduct-blue{
	background-color: #7e96ff;
}
.cardproduct-red{
	background-color: #ff7285;
}
.cardproduct-gray{
	background-color: #B4B4C6;
}
.cardproduct-yello{
	background-color: #FFB901;
}
.cardproduct-purple{
	background-color: #CC99FF;
}
.cardproduct-green, .cardproduct-blue, .cardproduct-red, .cardproduct-gray, .cardproduct-yello,.cardproduct-purple{
	border-radius: 15px;
	padding: 20px;
	width: auto;
	height: auto;
	color : white;
	text-align: left;
	/* text-indent: 5em;
	text-size-adjust: 1rem; */
 }
 .icon{
	font-size: 50px;
	text-align: center;
 }
 .cardproduct-green.h4{
	
	color : white;

 }
 .card.gallery{
	box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
	transition: 0.3s;
	
 }
 .status.gray{
	background: #808080;
	color: #ffffff ;
	border-radius: 20px;
	padding: .1rem 1rem;
	
}
.status.enable{
	background: #C0FFC2;
	color: #00A306 ;
	border-radius: 20px;
	padding: .1rem 1rem;
	
}

.main, .header, .footer {
	width: 100%;
	max-width: 800px;
	margin: 0 auto;
	padding: 2rem;
 }
 
 .header {
	text-align: center;
	margin: calc(1rem + 4vw) auto calc(1rem + 2vw);
	padding-top: 4rem;
 }
 
 .footer {
	padding: 20vw 0 3rem;
	opacity: 1;
	font-size: 1rem;
	text-align: center;
 }
 
 .footer a, .footer a:visited {
	color: white;
	margin: 0 1rem;
	border: none;
 }
 
 .footer a:hover, .footer a:visited:hover {
	border-bottom: 2px solid #f2d43d;
 }
 
 .accordion-tabs {
	color: #0c1333;
	background-color: #fff;
	border-radius: 6px;
	box-shadow: 0 0 12px rgba(0, 0, 0, 0.2), 0 0 0 8px #f2d43d, 0 0 200px 30px rgba(0, 126, 255, 0.31);
 }
 
 .tabs-tab-list {
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
 }
 
 .tabs-tab-list li {
	margin: 0;
 }
 
 .tabs-trigger {
	border-bottom: none;
	color: #666;
	display: none;
	font-weight: normal;
	margin: 0 5px 0 1px;
	padding: 15px 20px;
	text-decoration: none;
 }
 
 .tabs-trigger:hover {
	border-bottom: none;
	color: #000;
 }
 
 .tabs-trigger.is-selected, .tabs-trigger.is-selected:hover, .tabs-trigger.is-selected:focus {
	border-bottom: 2px solid #000;
	color: #000;
 }
 
 .tabs-trigger:active {
	outline: none;
 }
 
 .tabs-panel {
	display: block;
	margin: 0;
	padding: 0;
 }
 
 .tabs-panel:not(:first-of-type) {
	border-top: 2px solid #eee;
 }
 
 .tabs-panel:not(:last-child) {
	border-bottom: 1px solid #eee;
 }
 
 .tabs-panel:not(:last-child) {
	border-bottom: none;
 }
 
 .tabs-panel .content {
	margin-top: 10px;
	padding: 20px;
 }
 
 .tabs-panel.is-hidden .content {
	display: none;
 }
 
 .tabs-panel:active, .tabs-panel:focus {
	outline: none;
 }
 
 .is-initialized.tabs-allowed .tabs-panel {
	display: inherit;
 }
 
 .accordeon-trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	cursor: pointer;
	padding: 15px 20px;
 }
 
 .accordeon-trigger-icon {
	pointer-events: none;
 }
 
 @media (min-width: 40em) {
	.tabs-allowed .accordeon-trigger {
	  display: none;
	}
	.tabs-allowed .tabs-trigger {
	  display: block;
	}
	.tabs-allowed .tabs-panel {
	  display: none;
	}
	.tabs-allowed .tabs-panel.is-hidden {
	  display: none;
	}
	.tabs-allowed .tabs-panel {
	  border-top: 2px solid #eee;
	}
	.tabs-allowed .tabs-tab-list {
	  margin-bottom: -2px;
	}
 }
 
 .accordeon-trigger-icon {
	display: inline-block;
	float: right;
	width: 22px;
	height: 22px;
 }
 
 .accordeon-trigger-icon svg {
	margin: 0;
 }
 
 [aria-expanded="true"] .vert {
	display: none;
 }
 
 .label--open, .label--close {
	display: block;
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
 }
 
 .label--close {
	display: none;
 }
 
 .is-open .label--open {
	display: none;
 }
 
 .is-open .label--close {
	display: block;
 }
.status.click{
	
	cursor: pointer;
	user-select: none;
}
.status.gray{
	background: #B4B4C6;
	color: rgb(0, 0, 0)  ;
	border-radius: 20px;
	padding: .1rem 1rem;
	
}
.status.disable{
	background: #FFB5BF;
	color: #FD0E2E ;
	border-radius: 20px;
	padding: .1rem 1rem;
	
}
.status.yello{
	background: #ffdf8f;
	color: rgb(255, 145, 0) ;
	border-radius: 20px;
	padding: .1rem 1rem;
	
}

.status.blue{
	background: #a2b3ff;
	color: #002fff ;
	border-radius: 20px;
	padding: .1rem 1rem;
}

.status-gray{
	background: #B4B4C6;
	color: #FFF;
	box-shadow: 0px 1px 8px rgba(0, 0, 0, 0.25);
	border-radius: 20px;
	padding: .1rem 1rem;
}

.status-yello{
	background: #F9B33D;
	color: #FFF;
	box-shadow: 0px 1px 8px rgba(0, 0, 0, 0.25);
	border-radius: 20px;
	padding: .1rem 1rem;
}

.status-green{
	background: #A7DE31;
	color: #FFF;
	box-shadow: 0px 1px 8px rgba(0, 0, 0, 0.25);
	border-radius: 20px;
	padding: .1rem 1rem;
}

.status-blue{
	background: #78C1E3;
	color: #FFF;
	box-shadow: 0px 1px 8px rgba(0, 0, 0, 0.25);
	border-radius: 20px;
	padding: .1rem 1rem;
}

.status-warn{
	background: #FFA646;
	color: #FFF;
	box-shadow: 0px 1px 8px rgba(0, 0, 0, 0.25);
	border-radius: 20px;
	padding: .1rem 1rem;
}

.status-red{
	background: #E94800;
	color: #FFF;
	box-shadow: 0px 1px 8px rgba(0, 0, 0, 0.25);
	border-radius: 20px;
	padding: .1rem 1rem;
}

.status-sky{
	background: #78C1E3;
	color: #FFF;
	box-shadow: 0px 1px 8px rgba(0, 0, 0, 0.25);
	border-radius: 20px;
	padding: .1rem 1rem;
}


.member.all{
	background: #ffff8b;
	color: #ffcc00 ;
	border-radius: 20px;
	padding: .1rem 1rem;
	
}
.member.vip{
	background: #ffa9a9;
	color: #ff0000 ;
	border-radius: 20px;
	padding: .1rem 1rem;
	
}
.member.gen{
	background: #ffcc99;
	color: #ff7700 ;
	border-radius: 20px;
	padding: .1rem 1rem;
	
}
.text-red{
	color: red;
}
.text-green{
	color: green;
}
.shipping-card {
	min-height: 90px;
   padding: 10px 20px;
   border: 1px solid #e2e2e2;
   border-radius: 8px;
}

.shipping-img {
	max-height: 40px;
	margin:auto 0;
}

.img-cart img {
    max-height: 110px;
}

.fa-create {
    background: #c7c7c7;
    padding: 4px 6px;
    color: #757575;
    border-radius: 50px;
}

.modal button.close {
    padding: 4px 5px;
    background: #727C8E;
    border-radius: 20px;
}

.state-frame .state-5 {
	position: relative;
}

.state-frame .state-5:after {
	content:'';
	position: absolute;
	left:30px;
	top:21px;
	width:8px;
	height: 8px;
	border:1px solid #f2d43d;
	border-radius: 8px;
	background:#f2d43d;
}

.state-frame .state-5:before {
	content:'';
	position: absolute;
	right:8px;
	top:21px;
	width:8px;
	height: 8px;
	border:1px solid #f2d43d;
	border-radius: 8px;
	background:#f2d43d;
}

.state-frame .state-5 hr {
	border-color:#f2d43d;
	border-width: 1.5px;
}

.state-frame .state-img .img {
	border-radius: 30px;
	padding: 9px;
	height: 40px;
	width: 40px;
	display:flex;
	align-items: center;
}

.state-frame .state-img #state-1.img div {
	width: 100%;
	height: 100%;
	background: url('../img/tl_cart_gray.png') no-repeat;
	background-position: center center;
	background-size: contain;
}

.state-frame .state-img.active #state-1.img div {
	width: 100%;
	height: 100%;
	background: url('../img/tl_cart_white.png') no-repeat;
	background-position: center center;
	background-size: contain;
}

.state-frame .state-img #state-2.img div {
	width: 100%;
	height: 100%;
	background: url('../img/tl_box_gray.png') no-repeat;
	background-position: center center;
	background-size: contain;
}

.state-frame .state-img.active #state-2.img div {
	width: 100%;
	height: 100%;
	background: url('../img/tl_box_white.png') no-repeat;
	background-position: center center;
	background-size: contain;
}

.state-frame .state-img #state-3.img div {
	width: 100%;
	height: 100%;
	background: url('../img/tl_car_gray.png') no-repeat;
	background-position: center center;
	background-size: contain;
}

.state-frame .state-img.active #state-3.img div {
	width: 100%;
	height: 100%;
	background: url('../img/tl_car_white.png') no-repeat;
	background-position: center center;
	background-size: contain;
}

.state-frame .state-img #state-4.img div {
	width: 100%;
	height: 100%;
	background: url('../img/tl_payment_gray.png') no-repeat;
	background-position: center center;
	background-size: contain;
}

.state-frame .state-img.active #state-4.img div {
	width: 100%;
	height: 100%;
	background: url('../img/tl_payment_white.png') no-repeat;
	background-position: center center;
	background-size: contain;
}

.state-frame .state-img .img img {
	max-width: 22px;
}

.state-frame .state-img.active .img {
	border-radius: 30px;
	padding: 9px;
	background:linear-gradient(to left, #f2d43d 0%, #f2d43d 25%, #f2d43d 100%) !important;
}

.state-frame .state-context {
	color:#a0a0a0;
	font-size: 0.8em;
	text-align: center;
	font-weight: normal;
}

.state-frame .active .state-context {
	font-size:0.8em;
	font-weight: bold;
	text-align: center;
	color:black;
}

.state-frame .active .state-date {
	font-size:0.7em;
	font-family: 'roboto';
	text-align: center;
	color:black;
}

.state-frame .state-line {
	margin-top:19px;
	border-top:2px solid #e1e1e1;
	margin-left: 6px;
	margin-right: 6px;
}

.state-frame .state-line.active {
	border-color:#f2d43d;
}

.tracking-frame {
	background:#F5F5F5;
	border:1px solid rgba(112,112,112,10%);
	padding:14px;
}

.tracking-frame .tracking-box {
	position: relative;
	display: flex;
}

.tracking-frame .tracking-box .tracking-timeline {
	position: relative;
	padding: 0 10px;
	margin-right: 1.2em;
	margin-left: 1.2em;
}

.tracking-frame .tracking-box .tracking-timeline:after {
	content: ' ';
	position: absolute;
	top:0px;
	left:4.99px;
	border:1px solid gray;
	background:gray;
	width:7px;
	height:7px;
	border-radius: 7px;
	z-index: 2;
}

.tracking-frame .tracking-box .tracking-timeline:before {
	z-index: 1;
	content: ' ';
	border-left:2px solid gray;
	position: absolute;
	top:0px;
	left:7.95px;
	height: 100%;
}

.tracking-frame .tracking-box:last-child .tracking-timeline:before {
	border-color: transparent;
}

.tracking-frame .tracking-box .tracking-event {
	display:flex;
	flex-direction: column;
}

.icon-frame-rp{
	position: absolute;
	left:60%; 
	top:5%;
}

.circle-icon-rp{
    padding:30px;
    border-radius: 50%;
}

.circle-icon-rp-box{
    padding:22px;
    border-radius: 50%;
}

.css-widget-shadow{
	/*start ------------*/
	width: [object Object]px; 
	height: [object Object]px; 
	box-shadow: 0 3px 0 rgba(0, 0, 0, 0.1)  ; 
	-webkit-box-shadow: 0 3px 0 rgba(0, 0, 0, 0.1)  ; 
	-moz-box-shadow: 0 3px 0 rgba(0, 0, 0, 0.1)  ; 
}

.css-box-shadow{
	/*start ------------*/
	width: [object Object]px; 
	height: [object Object]px; 
	border-radius:20px; 
	box-shadow: 2px 17px 7px rgba(0, 0, 0, 0.3)  ; 
	-webkit-box-shadow: 2px 17px 7px rgba(0, 0, 0, 0.3)  ; 
	-moz-box-shadow: 2px 17px 7px rgba(0, 0, 0, 0.3)  ; 
}

.icon-frame-rp-box{
	position: absolute;
	right:120%; 
	top:15%;
}

.css-box-shadow2{
	/*start ------------*/
	width: [object Object]px; 
	height: [object Object]px;
	border-radius:20px;  
	box-shadow: -3px 4px 0 rgba(0, 0, 0, 0.1)  ; 
	-webkit-box-shadow: -3px 4px 0 rgba(0, 0, 0, 0.1)  ; 
	-moz-box-shadow: -3px 4px 0 rgba(0, 0, 0, 0.1)  ; 

}

.circle-icon-rp-qd{
	padding:10px;
	border-radius: 50%;
}

.avatar {
	vertical-align: middle;
	width: 50px;
	height: 50px;
	border-radius: 50%;
  }
.spincreament-sub {
	font-weight: bold
}



 
  .header-fixed > table > tbody { display:block; max-height:450px; overflow-y:scroll; }
  .header-fixed > table thead > table tbody tr { display:block; width:100%; table-layout:fixed; }
  
  
@media ( min-width:1280px )   {

}

@media ( max-width:1280px ) /* md */ {
	.circle-icon-rp{
		padding:20px;
		border-radius: 50%;
	}
	.icon-frame-rp-box{
		position: absolute;
		right:110%; 
		top:-40%;
	}
}

@media ( max-width:768px ) /* sm */ {
	.circle-icon-rp{
		padding:25px;
		border-radius: 50%;
	}
	.icon-frame-rp-box{
		position: absolute;
		right:120%; 
		top:10%;
	}

}

@media  (max-width:500px ) /* mobile */ {

}


@media only screen and (min-width: 300px) and (max-width:399px ) /* mobile */ {
	.circle-icon-rp{
		padding:20px;
		border-radius: 50%;
	}
	.icon-frame-rp-box{
		display: none;
	}
	.chart-container {
		position: relative;
		/*position: relative;*/
		margin: auto;
		width:800px;
	}
}



@media  (min-width: 400px) and (max-width:500px ) /* mobile */ {
	.circle-icon-rp{
		padding:25px;
		border-radius: 50%;
	}
	.icon-frame-rp-box{
		display: none;
	}
	.chart-container {
		position: relative;
		/*position: relative;*/
		margin: auto;
		width:800px;
	}
	  
}