/* CSNE CO., LTD 
By CODE-STUDIO.net */

html,body {
	height: 100%;
	padding-top:0;
	padding-bottom:0;
	background: url(/assets/images/bg-default.jpg) no-repeat center center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
    font-family: "Kanit", sans-serif;
}

#loading-pop {
	display:none;
	position:fixed;
	bottom: 10%;
	left:50%;
	padding:12px 20px;
	margin-left: -58px;
	font-size: 14px;
	background-color:#FFF;
	color:#000;
	border-radius:1.5rem;
	-webkit-box-shadow: 0px 0px 10px 0px rgba(100, 100, 100, 0.7);
	-moz-box-shadow:    0px 0px 10px 0px rgba(100, 100, 100, 0.7);
	box-shadow:         0px 0px 10px 0px rgba(100, 100, 100, 0.7);
	z-index:999999;
}
/* Color */
.bg-fdz {
	background-color: #ff5c00!important;
}
.bg-fs-01 {
    background: rgb(6,2,0);
	background: linear-gradient(180deg, rgba(6,2,0,1) 0%, rgba(0,0,0,1) 100%);
}
.border-fs {
    border: 3px solid transparent;
    background: #ff5c00;
    border-image-slice: 1;
}
.bg-black {
    background-color: #000;
}
.border-fs-o {
    border: 2px solid transparent;
    border-color: rgb(220,157,79);
}

/* Assets */
.page-text-title {
	background: rgb(255,115,0);
	background: linear-gradient(180deg, rgba(255,115,0,1) 0%, rgba(255,61,0,1) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 0rem!important;
}
.page-text-color {
    background: rgb(255,255,255);
	background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0.9) 100%);
	text-shadow: -1px 1px 1px rgba(100,100,100,0.6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.page-main-title {
    text-align: center;
    background: rgb(255,115,0);
	background: linear-gradient(180deg, rgba(255,115,0,1) 0%, rgba(255,61,0,1) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-top: 2rem;
    margin-bottom: 1rem;
}
.page-main-title .title {
    font-weight: bold;
    margin-bottom: 0rem;
}
.box-panel {
    background-color: rgb(30, 30, 30);
    padding: 0.25rem 0.5rem;
    border-radius: 1rem;
}

.navbar-member .dropdown-menu {
    min-width: 230px;
}
.member-listgroup i {
    display: inline-block;
    width: 20px;
}
.navbar-account-info {
    display: inline-block;
    line-height: 24px;
    padding-right: 0.4rem;
    margin-right: 0.4rem;
}
.navbar-account-info span {
    height: 100%;
    margin-right: 0.2rem;
}
.navbar-account-info i {
    text-align: center;
    width: 26px;
    line-height: 24px;
}
.dropdown-member .fal, .dropdown-member .fas {
    display: inline-block;
    width:22px;
}
.dropdown-image {
	max-width: 30px;
	border-radius: 50%;
	padding-left: 0.25rem;
}
.profile-picture {
	width:40px;
}
.profile-menu {
	font-size:0.9rem;
}
.profile-menu a {
	text-decoration: none;
}
.profile-menu i {
	text-align: center;
	width:24px;
}

/* Itemshop */
.itemshop .img-product {
	width:100%;
	border-radius:1rem;
}

/* Category */
.category-panel {
	width:100%;
	display:block;
	overflow: hidden;
    border-radius: 5px;
	transition: all 0.3s ease-in-out;
	color:#FFF;

    border: 3px solid transparent;
    background: #fe9c00;
    border-image-slice: 1;
}
.category-panel:hover {
	transform: translateY(-5%);
	text-decoration:none;
	color:#FFF;
}
.category-panel .category-details {
    width: 100%;
	padding:10px 16px 6px 16px;
	background: rgb(255,72,0);
	background: linear-gradient(180deg, rgba(255,72,0,1) 0%, rgba(255,61,0,1) 100%);
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}
.category-panel .category-details .category-name {
	width:100%;
	font-weight:500;
	font-size:1.2rem;
    color:#fff;
}
.category-panel .category-details .category-description {
	width:100%;
	font-weight:300;
	font-size:12px;
}

.category-header {
	width:100%;
	height: 340px;
	background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.category-header .category-details {
	color: #FFFFFF;
	text-align: center;
    width: 100%;
	padding:10px 16px 12px 16px;
	background: rgb(0,0,0);
	background: linear-gradient(0deg, rgba(0,0,0,0.9023984593837535) 0%, rgba(0,0,0,0) 100%);
}
.category-header .category-details .category-name {
	color: #FFFFFF;
	width:100%;
	font-weight:500;
	font-size:3rem;
}
.category-header .category-details .category-description {
	color: #FFFFFF;
	width:100%;
	font-weight:300;
	font-size:1rem;
}

/* Product */
.product-panel {
	display: inline-block;
	transition: all 0.2s ease-in-out;
	width:100%;
	box-shadow: 0 0.0625rem 0.125rem 0 rgba(0,0,0,.1);
    border-radius: 5px;
	margin:0.2rem 0;
	
	border: 3px solid transparent;
    background: rgb(255,72,0);
	background: linear-gradient(180deg, rgba(255,72,0,1) 0%, rgba(255,61,0,1) 100%);
    border-image-slice: 1;
}
.product-panel:hover {
	text-decoration:none;
	transform: translateY(-2%);
}
.product-panel .product-image img {
	-webkit-border-top-left-radius: 5px;
	-webkit-border-top-right-radius: 5px;
	-moz-border-radius-topleft: 5px;
	-moz-border-radius-topright: 5px;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;

	box-shadow: 0 0.0625rem 0.125rem 0 rgba(0,0,0,.1);
	width:100%;
}
.product-panel .product-details {
	
	-webkit-border-bottom-right-radius: 5px;
	-webkit-border-bottom-left-radius: 5px;
	-moz-border-radius-bottomright: 5px;
	-moz-border-radius-bottomleft: 5px;
	border-bottom-right-radius: 5px;
	border-bottom-left-radius: 5px;
	padding:4px;
}
.product-panel .product-name {
	padding:8px 8px 1px 8px;
	color: rgb(236, 236, 236);
	text-shadow: 0px 1px 0 #000;
	font-weight:500;
	font-size:1.15rem;
	width:100%;
}
.product-panel .product-description {
	padding:2px 8px 5px 8px;
	color: #EEE;
	font-weight:300;
	font-size:12px;
	width:100%;
}
.product-panel .product-price {
	padding:6px 8px;
	color: #ffffff;
	font-weight:300;
	font-size:0.8rem;
	width:100%;
}
.product-panel .product-price b {
	font-size:1.2rem;
	font-weight:700;
}
.product-panel .product-added {
	padding: 0px 8px 2px 8px;
	font-weight:100;
	color:#FFF;
	font-size:12px;
}
.item-row {
	background: #000;
	color:#FFF;
	border-radius:5px;
	transition: all 0.2s ease-in-out;
}
.item-row:hover {
	text-decoration:none;
	transform: translateY(-2%);
}
.item-row .img-fluid {
	max-height:60px;
	border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;
}
.item-row .product-details {
	padding-left:10px;
}
.item-row .product-name {
	font-weight:500;
}
.item-row .product-description {
	font-weight:300;
	font-size:11px;
}
.item-row .product-price {
	padding-right:12px;
}
.item-row .product-added {
	color:#9e9e9e;
	padding-right:12px;
	font-size:9px;
	font-weight:300;
}

/* BTN */
.btn-fs {
    background: rgb(254,154,0);
	background: linear-gradient(180deg, rgba(254,154,0,1) 0%, rgba(236,97,0,1) 100%);
    border-color: rgb(30, 30, 30);
    border: 1px solid #fe9c00;
    color: rgb(10, 10, 10);
}
.btn-fs:hover {
    border-color: rgb(180, 108, 0);
    color: rgb(50, 50, 50);
}
.input-fs {
    border-color: rgb(30, 30, 30);
    background-color: rgb(14, 14, 14) ;
    color: #FFF;
}
.input-fs:focus {
    border-color: rgb(30, 30, 30);
    background-color: rgb(50, 50, 50) ;
    color: #FFF;
}
/* Footer */
footer {
    color: #FFF;
    padding: 1.75rem 0.25rem;
    margin-top: 3rem;
    background-color: rgb(14, 12, 5);
}
footer a {
    color:#FFF;
    text-decoration: none;
}
footer a:hover {
    color: #FFF;
    text-decoration: underline;
}

.hover-upper {
	transition: all 0.2s ease-in-out;
}
.hover-upper:hover {
	transform: translateY(-4%);
}
.a-hover-none:hover {
	text-decoration:none;
}
.cursor-notallowed { cursor: not-allowed; }
.cursor-pointer { cursor: pointer; }

.input-group-prepend {
	border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;
    border: 1px solid #696969;
}

/* Font */
.font-kanit { font-family:"Kanit"!important; }
.font8 { font-size:8px!important; }
.font10 { font-size:10px!important; }
.font12 { font-size:12px!important; }
.font13 { font-size:13px!important; }
.font14 { font-size:14px!important; }
.font16 { font-size:16px!important; }
.font18 { font-size:18px!important; }
.font20 { font-size:20px!important; }
.font24 { font-size:24px!important; }
.font26 { font-size:26px!important; }
.font28 { font-size:28px!important; }
.font30 { font-size:30px!important; }
.font40 { font-size:40px!important; }
.font50 { font-size:50px!important; }

.font25per { font-size:25%!important; }
.font35per { font-size:35%!important; }
.font50per { font-size:50%!important; }
.font60per { font-size:60%!important; }
.font70per { font-size:70%!important; }
.font80per { font-size:80%!important; }
.font100per { font-size:100%!important; }
.font120per { font-size:120%!important; }
.font150per { font-size:150%!important; }
.font200per { font-size:200%!important; }
.font250per { font-size:250%!important; }
.font300per { font-size:300%!important; }
.font350per { font-size:350%!important; }
.font400per { font-size:400%!important; }
.font450per { font-size:450%!important; }
.font500per { font-size:500%!important; }