html {
	scroll-behavior: smooth;
}

body {
	font-family: 'Quicksand', sans-serif;
}

.navbarproduct {
	border-bottom: 1px solid #e0e0e0;
	background: white;
}

.navbar-right {
	margin-right: 10px;
}

.nav-item.product a {
	transition: 0.4s;
	color: rgb(50, 205, 50);
	font-weight: 600;
}

.nav-item.product a:hover {
	padding-left: 20px;
	transition: 0.4s;
	background: white;
	border-radius: 5px;
	color: black;
}

.nav-item.user a {
	color: rgb(50, 205, 50);
}

.nav-item.user.selected a {
	color: red;
}

.nav-item.user.selected a:hover {
	color: red;
	box-shadow: none;
	background-color: transparent;
	border-radius: 0px;
	background: #f4f6f9;
}

.nav-item.user a:hover {
	padding-left: 15px;
	transition: 0.5s;
	border-radius: 5px;
	color: black;
	background: #f4f6f9;
}

.center {
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: 20%;
}

.fastarindex {
	margin-top: -9px;
}

.penjualanindex {
	font-weight: 600;
	font-size: 12px;
}

.fa.fa-star.index {
	font-size: 11px;
}

.judul {
	color: rgb(50, 205, 50);
}

.carousel-item {
	position: relative;
	padding-top: 56.25%;
	height: 100%;
	object-fit: contain;
	border-radius: 8px !important;

}

.carousel-item img {
	position: absolute;
	border-radius: 8px !important;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.carousel-inner {
	border-radius: 8px;
	box-shadow: 0px 0px 5px #999;
}


/* Style buttons */
.btnn {
	background-color: DodgerBlue;
	/* Blue background */
	border: none;
	/* Remove borders */
	color: white;
	/* White text */
	padding: 12px 16px;
	/* Some padding */
	font-size: 16px;
	/* Set a font size */
	cursor: pointer;
	/* Mouse pointer on hover */
}

/* Darker background on mouse-over */
.btnn:hover {
	background-color: RoyalBlue;
}

.sign {
	background-color: red;
	border-color: white;
	border-radius: 20px;
	font-weight: 700;
}

.iconbar {
	position: relative;
	float: left;
	/* Float links side by side */
	text-align: center;
	/* Center-align text */
	width: 25%;
	/* Equal width (5 icons with 20% width each = 100%) */
	padding: 20px 25px;
	/* Some top and bottom padding */
	margin-left: 850px;
	margin-top: -50px;
}

.sticky-top {
	padding-left: 50px;
	padding-right: 50px;
}

.card {
	border-style: none;
	border-width: 0px;
}

.judulatas {
	display: block;
	border-style: solid;
	border-width: 2px;
	border-color: black;
	border-radius: 7px;
	width: 335px;
	text-align: center;
	background-color: rgb(50, 205, 50);
	color: white;
}

.checked {
	color: #fdcc0d;
}


.carousel-caption h5 {
	text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
	font-size: 18px;
}

/* ---------- Product Menu ---------- */
.productimage {
	width: 350px;
	height: 350px;
	border-style: solid;
	border-width: 1.5px;
	border-color: black;
	border-radius: 8px;
	object-fit: cover;
}

.imgproducts {
	width: auto;
	max-width: 100%;
	height: auto;
	padding: 12px;
	border: none !important;
	border-radius: 16px !important;
}

.productdesk {
	margin-left: 50px;
}

.infoproduct {
	font-size: 26px;
	font-weight: bold;
	text-align: left;
	margin-bottom: 0px;
}

#infoproduct p {
	padding: 5px 10px;
	font-size: 14px;
}

.price {
	color: rgb(50, 205, 50);
	font-size: 18px;
	font-weight: 700;
}

.formproduct {
	margin-top: -20px;
	margin-left: 0px;
}

.terjualketerangan {
	font-weight: 400;
	font-style: normal;
	font-size: 13px;
	color: rgb(108, 114, 124);
}

.terjualketeranganangka {
	font-weight: 600;
	color: rgb(50, 205, 50);
}

.terjualketerangan::before {
	content: "";
	display: inline-block;
	vertical-align: middle;
	width: 4px;
	height: 4px;
	margin: 0px 8px;
	border-radius: 50%;
	background-color: rgb(108, 114, 124);
}

.stocksisa {
	color: rgb(108, 114, 124);
	font-weight: 600;
	font-size: 12px;
	margin-left: 38px;
}

.fa.fa-star.product {
	font-size: 14px;
}

.jumlahproductpage {
	font-weight: 600;
}

.fa.fa-question-circle.product {
	color: rgb(50, 205, 50);
	font-size: 25px;
}

.tersisa {
	color: red;
	font-weight: 700;
}

.mulaibertanya {
	border: 1px solid rgb(224, 224, 224);
	padding: 10px;
	margin-left: 10px;
	margin-right: 10px;
	border-radius: 4px;
}

.mulaibertanya .labelbertanya {
	float: right;
}

.kolomdiskusi {
	padding: 20px;
}

.kolomperdiskusi {
	border: 1px solid rgb(224, 224, 224);
	border-radius: 4px;
	margin-left: 10px;
	margin-right: 10px;
}

.discussion.product {
	margin-bottom: 60px;
	resize: none;
}

.kolomreplydiskusi {
	padding-top: 10px;
	padding-bottom: 10px;
}

.kolomkomentar {
	margin-left: -5px;
}

.kolomkomentar i {
	font-size: 13px;
	font-weight: 600;
	font-style: normal;
}

.textareareply {
	resize: none;
}

.adapertanyaanproduct {
	color: #999;
	font-size: 14px;
	font-weight: 500;
	margin-left: 10px;
	"

}

.profile-circle-komentar {
	border: none !important;
	width: 38px;
	height: 38px;
	background: transparent;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	-webkit-border-radius: 99em;
	-moz-border-radius: 99em;
	border-radius: 99em;
	box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
	vertical-align: middle;
	object-fit: cover;
}

.kolomreply {
	background-color: rgb(244, 244, 244);
	padding-left: 60px;
	padding-right: 60px;
	padding-top: 20px;
	padding-bottom: 20px;
}

.kolomreplynonuser {
	padding-left: 40px !important;
	padding-right: 40px !important;
	padding-top: 10px;
}

.tanggalpostdiskusi::before {
	content: "";
	display: inline-block;
	vertical-align: middle;
	width: 4px;
	height: 4px;
	margin: 0px 8px;
	border-radius: 50%;
	background-color: rgb(108, 114, 124);
}

.tanggalpostdiskusi {
	font-size: 13px;
	color: #999;
}

/* ---------- End of Product Menu ---------- */

/* --------- Button Section --------- */
.wishlistbtn {
	text-align: center;
	/* Center-align text */
	border-style: none;
	border-width: 2px;
	padding: 2px;
	border-radius: 5px;
	margin-top: 5px;
	margin-left: 10px;
}

.wishlistbtn.sudah {
	color: red;
}

.numberCircle.sudah {
	margin-left: 25px;
	margin-top: -38px;
}

.wishlistbtn.sudah:hover {
	color: rgb(50, 205, 50);
	border-bottom: 2px solid rgb(50, 205, 50);
}

.wishlistbtn.belum {
	color: rgb(50, 205, 50);
}

.wishlistbtn.belum:hover {
	color: red;
	border-bottom: 2px solid rgb(50, 205, 50);
}

.wishlistbtn:hover {
	text-decoration: none;
}

.buybtn {
	border-radius: 25px;
	border: none;
	box-shadow: 0px 0px 4px rgb(50, 205, 50);
	padding-top: 9px;
	padding-bottom: 9px;
	padding-left: 20px;
	padding-right: 20px;
	/* width: 130px; */
	/* height: 50px; */
	color: rgba(0, 0, 0, 0.7) !important;
	/* background-color: white; */
	font-weight: 700;
	float: left;
	/* Float links side by side */
	text-align: center;
	/* Center-align text */
	margin-left: 40px;
}

.buybtn:hover {
	background-color: rgb(50, 205, 50) !important;
	color: white !important;
}

.updatebtn {
	border-radius: 6px;
	border: none;
	font-size: 12px;
	color: rgb(50, 205, 50);
	background-color: white;
	font-weight: bold;
	float: left;
	/* Float links side by side */
	text-align: center;
	/* Center-align text */
}

.updatebtn:hover {
	background-color: rgb(50, 205, 50);
	color: white;
}

.updatebtn:focus {
	box-shadow: 0px 0px 5px rgb(50, 205, 50);
}

.cartbtn {
	border-radius: 5px;
	border: 1px solid black;
	width: 210px;
	height: 40px;
	color: white;
	background-color: rgb(50, 205, 50);
	font-weight: 700;
}

.trashbtn {
	position: absolute;
	margin-left: 100%;
	color: black;
	font-size: 20px;
}

.trashbtn:hover {
	color: rgb(50, 205, 50);
}

.tablinks {}

.tablinks:hover {
	background: #f1f1f1;
}

.tablinks.active {
	background: #f1f1f1;
	color: rgb(50, 205, 50);
}

/* ---------- End of Button Section ---------- */

/* Style the tab */
.tab {
	font-size: 14px;
	overflow: hidden;
}

/* Style the buttons that are used to open the tab content */
.tab button {
	background-color: inherit;
	float: left;
	border: none;
	outline: none;
	cursor: pointer;
	padding: 10px 13px;
	transition: 0.3s;
}

/* Create an active/current tablink class */
.tab button.active {
	border-bottom: 1px solid #ccc;
}

/* Style the tab content */
.tabcontent {
	display: none;
	padding: 6px 12px;
	border-top: none;
}

.jumlah {
	border-top: none;
	border-left: none;
	border-right: none;
	border-bottom-width: 1.5px;
	width: 50px;
	text-align: center;
}

.jumlah:focus {
	box-shadow: none;
	outline: none;
}

.jumlah::-webkit-inner-spin-button,
.jumlah::-webkit-outer-spin-button {
	-webkit-appearance: none !important;
	margin: 0 !important;
}

.jumlah {
	-moz-appearance: textfield;
}

.navbar-nav.logoweb {
	margin-right: 10px;
}

ul.navbar-nav.navs {
	padding-left: 5px;
}

.modal-header {
	border-bottom-style: none;
}

.teks {
	width: 200px;
	height: 27px;
	font-size: 14px;
}

.col-form-label {
	margin-left: 10px;
	font-size: 14px;
}

.tombollogin {
	margin-left: 170px;
}

.tombolkecil {
	font-size: 14px;
	text-align: center;
	width: 70px;
	font-weight: 600;
	margin-right: 5px;
}

.col-form-label {
	margin-top: -5px;
}

.jumbutrun a img {
	display: inline-block;
	float: left;
	margin-top: -30px;
	margin-right: 20px;
	width: 120px;
	height: auto;
}

.jumbutrun a {
	text-decoration: none;
	color: black;
}

.registrationdivider {
	margin-top: -35px;
	border-top: 5px solid rgb(50, 205, 50);
	box-shadow: 0px 2px 10px #999;
}

.registrationform {
	background-color: white;
	box-shadow: 0px 2px 5px #999;
	border-radius: 5px;
	position: relative;
}

.centerlah {
	text-align: center;
	display: block;
}

.labelfont {
	font-size: 14px;
}

.labelfont.password {}

.formregistration {
	padding-left: 18px;
	width: 350px;
	height: 30px;
}

.judulregistration {
	text-align: center;
	font-size: 30px;
	font-weight: 700;
	border-bottom-style: solid;
	border-bottom-width: 2px;
}

.agama {
	font-size: 14px;
	border-radius: 5px;
	padding-left: 3px;
}

.agama:focus {
	outline: none;
}

.fab:hover {
	text-decoration: none;
}

/* .fas:hover {
	text-decoration: none;
	color: rgb(50,205,50);
} */

.aboutheader {
	text-align: center;
	font-size: 35px;
	font-weight: 800;
}

.aboutjudul {
	text-align: left;
	color: rgb(50, 205, 50);
	font-size: 25px;
	font-weight: 700;
	display: inline;
	padding: 15px;
}

.aboutisi {
	margin-left: 30px;
	padding: 15px;
	/*border: 2px solid black; */
	border-radius: 10px;
	text-align: justify;
}

.fa-home {
	border-radius: 10px;
	background-color: white;
	padding-left: 10px;
}

.close:focus {
	outline: none;
	text-decoration: none;
}

.formss {
	margin-left: 600px;
}

div.dropdown {
	color: #555;
	margin: -5px -22px 0 13px;
	width: 143px;
	position: relative;
	height: 17px;
	text-align: left;
}

div.submenu {
	position: absolute;
	z-index: 100;
	width: 135px;
	display: none;
	margin-left: 5px;
	margin-top: -15px;
	padding: 40px 0 5px;
	border-radius: 6px;
}

.dropdown li a {
	color: #555555;
	display: block;
	font-weight: bold;
	padding: 6px 15px;
	cursor: pointer;
	text-decoration: none;
}

.dropdown li a:hover {
	background: #155FB0;
	color: #FFFFFF;
	text-decoration: none;
}

a.account {
	font-size: 11px;
	line-height: 16px;
	color: #555;
	position: absolute;
	z-index: 110;
	display: block;
	padding: 11px 0 0 20px;
	height: 28px;
	width: 121px;
	margin: -11px 0 0 -10px;
	text-decoration: none;
	cursor: pointer;
}

a.accounts {
	font-size: 11px;
	line-height: 16px;
	color: #555;
	position: absolute;
	z-index: 110;
	display: block;
	padding: 11px 0 0 20px;
	height: 28px;
	width: 121px;
	margin: -11px 0 0 -10px;
	text-decoration: none;
	cursor: pointer;
}

.root {
	width: 160px;
	list-style: none;
	font-size: 11px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
	background: #fff;
	padding: 10px 0 10px 0;
	border-radius: 5px 5px 5px 5px;
	margin-top: 21px;
	margin-left: -90px;
}

.root:before {
	content: '';
	display: inline-block;
	border-left: 7px solid transparent;
	border-right: 7px solid transparent;
	border-bottom: 7px solid #ccc;
	border-bottom-color: #ffffff;
	position: absolute;
	color: #ffffff;
	top: 54px;
	left: 17px;
}

.profile-circle {
	width: 38px;
	height: 38px;
	background: transparent;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	-webkit-border-radius: 99em;
	-moz-border-radius: 99em;
	border-radius: 99em;
	box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
	vertical-align: middle;
	object-fit: cover;
}

.tup {
	text-align: center;
	border-top-right-radius: 8px;
	border-top-left-radius: 8px;
}

.bottum {
	text-align: center;
	border-bottom-right-radius: 8px;
	border-bottom-left-radius: 8px;
}

.dendicom {
	display: none;
}

.navs li:hover {
	background-color: white;
	border-radius: 6px;
}

.navs li a {
	color: white;
}

.navs li:hover a {
	color: black;
}

.button {
	border-radius: 6px;
	background-color: #f4511e;
	border: none;
	color: #FFFFFF;
	text-align: center;
	font-size: 15px;
	transition: all 0.5s;
	cursor: pointer;
	margin: 5px;
}

.button span {
	cursor: pointer;
	display: inline-block;
	position: relative;
	transition: 0.5s;
}

.button span:after {
	content: '\00bb';
	position: absolute;
	opacity: 0;
	top: 0;
	right: -20px;
	transition: 0.5s;
}

.button:hover span {
	padding-right: 25px;
}

.button:hover span:after {
	opacity: 1;
	right: 0;
}

.srcs[type=text] {
	margin-left: 20px;
	width: 250px;
	height: 30px;
	box-sizing: border-box;
	border: 1px solid white;
	border-radius: 16px;
	font-size: 14px;
	caret-color: transparent;
	background-color: transparent;
	padding: 12px 20px 12px 40px;
	-webkit-transition: width 0.4s ease-in-out;
	transition: width 0.4s ease-in-out;
	color: white;
}

.srcs[type=text]::-webkit-input-placeholder {}

.srcs[type=text]:-ms-input-placeholder {}

.srcs[type=text]:-moz-placeholder {}

.srcs[type=text]::-moz-placeholder {}

.srcs[type=text].product {
	border: 1px solid rgb(50, 205, 50);
	font-weight: 600;
	color: rgb(50, 205, 50);
}

.srcs[type=text]:focus {
	width: 200%;
	outline: none;
	border: 1px solid rgb(50, 205, 50);
	box-shadow: 0px 0px 5px #999;
}

.srcs::placeholder {
	/* Chrome, Firefox, Opera, Safari 10.1+ */
	color: rgb(50, 205, 50);
	opacity: 1;
	/* Firefox */
}

.srcs:-ms-input-placeholder {
	/* Internet Explorer 10-11 */
	color: rgb(50, 205, 50);
}

.srcs::-ms-input-placeholder {
	/* Microsoft Edge */
	color: rgb(50, 205, 50);
}

.srcss[type=text] {
	display: none;
	margin-left: 20px;
	width: 250px;
	height: 30px;
	box-sizing: border-box;
	border: 1px solid white;
	border-radius: 16px;
	font-size: 14px;
	caret-color: transparent;
	background-color: transparent;
	padding: 12px 20px 12px 40px;
	-webkit-transition: width 0.4s ease-in-out;
	transition: width 0.4s ease-in-out;
	color: white;
}

.srcss[type=text]::-webkit-input-placeholder {}

.srcss[type=text]:-ms-input-placeholder {}

.srcss[type=text]:-moz-placeholder {}

.srcss[type=text]::-moz-placeholder {}

.srcss[type=text].product {
	border: 1px solid rgb(50, 205, 50);
	font-weight: 600;
	color: rgb(50, 205, 50);
}

.srcss[type=text]:focus {
	width: 200%;
	outline: none;
	border: 1px solid rgb(50, 205, 50);
	box-shadow: 0px 0px 5px #999;
}

.srcss::placeholder {
	/* Chrome, Firefox, Opera, Safari 10.1+ */
	color: rgb(50, 205, 50);
	opacity: 1;
	/* Firefox */
}

.srcss:-ms-input-placeholder {
	/* Internet Explorer 10-11 */
	color: rgb(50, 205, 50);
}

.srcss::-ms-input-placeholder {
	/* Microsoft Edge */
	color: rgb(50, 205, 50);
}

.header {
	background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url(../images/geforce.jpg);
	background-size: cover;
	margin-top: -75px;
}

/* ------- Smartphone Mode ------- */
@media (max-width:768px) {
	.dendicom {
		display: inline-block;
		position: absolute;
		float: left;
		font-weight: 600;
		font-size: 25px;
		color: white;
		margin-top: 10px;
		margin-left: 15px;
	}

	.srcss[type=text] {
		display: inline-block !important;
		margin-top: 15px;
		position: absolute;
		width: 40%;
		margin-left: 15px;
	}

	.srcss[type=text]:focus {
		width: 40% !important;
		color: white;
		border: 2px solid rgb(50, 205, 50);
	}

	.fa.fa-star.index {
		font-size: 10px;
	}

	.nav-item.product a {
		padding-left: 10px;
	}

	.infoproduct {
		font-size: 15px;

		font-weight: 700;
		text-align: left;
		margin-bottom: 0px;
	}

	.fa.fa-star.product {
		font-size: 10px;
	}

	.terjualketerangan {
		font-size: 10px;
	}

	.price {
		color: rgb(50, 205, 50);
		font-size: 14px;
		font-weight: 600;
	}

	.stocksisa {
		font-size: 9px;
		margin-left: 15px;
	}

	.jumlah {
		border-top: none;
		border-left: none;
		border-right: none;
		margin-left: 1px;
		font-size: 12px;
		border-bottom-width: 1px;
		width: 40px;
		text-align: center;
	}

	.jumlahproductpage {
		font-size: 12px;
		font-weight: 600;
	}

	.adapertanyaanproduct {
		font-size: 12px;
	}

	.fa.fa-question-circle.product {
		font-size: 17px;
	}

	::-webkit-input-placeholder {
		/* Chrome/Opera/Safari */
		font-size: 12px;
	}

	::-moz-placeholder {
		/* Firefox 19+ */
		font-size: 12px;
	}

	:-ms-input-placeholder {
		/* IE 10+ */
		font-size: 12px;
	}

	:-moz-placeholder {
		/* Firefox 18- */
		font-size: 12px;
	}

	/* .nav-item.product a:hover {
		padding-left: 15px;
		transition: 0.5s;
		background: transparent !important;
		border-radius: 5px;
		color: rgb(50,205,50) !important;
	} */

	.fotodiskusi {
		padding-left: 20px;
	}

	.buybtn {
		height: 38px;
		font-size: 10px;
		margin-top: 0px;
		margin-left: 20px;
	}

	.wishlistbtn {
		font-size: 22px !important;
	}

	.numberCircle.sudah {
		margin-left: 16px !important;
		margin-top: -30px !important;
	}

	.tablinks,
	.tabcontent {

		font-size: 11px;
	}

	.tab button {
		padding: 10px 10px !important;
	}

	div.dropdown.android {
		color: #555;
		margin: -5px -22px 0 13px;
		width: 28px;
		position: relative;
		height: 17px;
		text-align: left;
	}

	a.account {
		margin-top: -35px;
		margin-left: 10px !important;
	}

	a.account.android {
		width: 28px;
		margin-top: -36px;
		margin-left: 10px !important;
	}

	div.submenu {
		margin-top: -36px;
		margin-left: -8px;
	}

	div.submenu {
		margin-top: -36px;
		margin-left: -100px;
	}

	.profile-circle {
		position: relative;
		width: 28px;
		height: 28px;
	}

	.root {
		margin-left: 10px !important;
	}

	.root:before {
		left: 138px;
	}

	nav.navbarproduct {
		background: black !important;
	}

	.srcs[type=text] {
		display: none;
	}

	.shoppingcart {
		display: none;
	}

	.shoppingcarts {
		display: inline-block !important;
		position: absolute;
		margin-top: 20px;
		left: 70%;
		/* left: -5px;
		margin-top: -25px; */
	}

	.cartlist a {
		font-size: 20px !important;
	}

	.trashbtn {
		position: absolute;
		margin-left: 90%;
		margin-top: 8px;
		color: rgb(50, 205, 50);
		font-size: 15px;
	}

	.numberCircle {
		margin-top: -32px !important;
		margin-left: 14px !important;
	}

	.ringkasancheckout {
		position: relative !important;
		display: block;
		padding-left: 28px;
		padding-right: 28px;
		padding-top: 10px;
		padding-bottom: 10px;
		border: none;
		outline: none;
		width: 100%;
		border-radius: 8px;
		background-color: white;
	}

	.btnbuy {
		position: relative;
		border-radius: 7px !important;
		height: 25px !important;
		left: 0% !important;
		right: 0% !important;
		background: rgb(50, 205, 50);
		color: white;
		width: 100% !important;
	}

	.log-in {
		display: none;
	}

	.log-in.android {
		display: inline-block !important;
		position: absolute !important;
		justify-content: center !important;
		width: 60px !important;
		height: 30px !important;
		font-size: 12px !important;
		margin-top: 15px !important;
		left: 65% !important;
	}

	.mulaibertanya {
		height: 90px;
	}

	.kolomdiskusi {
		padding-left: 0px !important;
		padding-right: 0px !important;
		padding-top: 20px !important;
		padding-bottom: 20px !important;
	}

	.kolomkomentar {
		padding-left: 35px;
	}

	.kolomreply {
		padding-left: 40px !important;
		padding-right: 40px !important;
		padding-top: 10px;
		padding-bottom: 10px;
	}

	.textareareply {
		margin-left: 15px;
	}

	.carousel-caption {
		background: none !important;
		box-shadow: none;
		top: 0px !important;
	}

	.carousel-caption h5 {
		font-size: 10px;
	}

	.transactionid {
		font-size: 9px !important;
	}

	.vl {
		margin-left: 2px !important;
		margin-right: -5px;
		border-left: 1px solid rgba(0, 0, 0, .1);
		height: 500px;
	}

	.ketwaktucountdown {
		font-weight: 700 !important;
		font-size: 28px !important;
	}

	.imgproduct {
		height: 150px !important;
	}

	.breakspacecart {
		margin-bottom: 240px;
	}

	.rowactionadminuser {
		position: absolute;
		margin-top: -25px;
		margin-left: 60px !important;
	}

	.transactionketharga {
		font-size: 12px;
	}

	.transactionharga {
		font-size: 12px !important;
	}

	.cartnamaproduct {
		font-size: 13px !important;
	}

	.carthargaproduct {
		font-size: 12px !important;
	}

	.cartjumlah {
		font-size: 12px !important;
	}

	.jumlahtransaksibarang {
		font-size: 12px !important;
		margin-top: -21px !important;
		margin-left: 50px !important;
		height: 25px;
		width: 40px !important;
	}

	.pembayaranpengirimandiv {
		font-size: 11px !important;
	}

	.pembayaranketpengiriman {
		font-size: 12px !important;
	}
}

@media only screen and (min-device-width: 480px) and (max-device-width: 768px) and (orientation: landscape) {
	.log-in.android {
		left: 80% !important;
	}

	.srcss[type=text] {
		margin-left: 0px !important;
		left: 25%;
	}

	.shoppingcarts {
		left: 80% !important;
	}

}

/* ------- Tablet Mode ------- */
@media (min-width:768px) and (max-width:1024px) {
	.srcs[type=text] {
		width: 185px;
	}

	.srcs[type=text]:focus {
		width: 185px;
		outline: none;
		border: 2px solid rgb(50, 205, 50);
	}

	.cartlist a {
		font-size: 20px !important;
	}

	.trashbtn {
		position: absolute;
		margin-left: 90%;
		margin-top: 8px;
		color: rgb(50, 205, 50);
		font-size: 15px;
	}

	.numberCircle {
		margin-top: -32px !important;
		margin-left: 14px !important;
	}

	.shoppingcart {
		left: 60px;
		margin-top: 10px;
	}

	a.account {
		margin-left: 30px;
		margin-top: -30px;
	}

	.profile-circle {
		margin-left: -20px;
		margin-top: -5px;
		width: 30px;
		height: 30px;
	}

	.ringkasancheckout {
		position: absolute !important;
		display: block;
		padding-left: 28px;
		padding-right: 28px;
		padding-top: 10px;
		padding-bottom: 10px;
		border: none;
		outline: none;
		width: 100%;
		border-radius: 8px;
		background-color: white;
	}

	.ringkasancheckout p.ringkasan {
		color: black;
		font-size: 12px !important;
		font-weight: 700;
		margin-bottom: -10px !important;
		text-align: center;
	}

	.ringkasancheckout p.keterangantotalharga {
		display: inline-block;
		float: left;
		font-size: 9px !important;
		/* display: block !important; */
		/* text-align: center !important; */
		/* left: 50%; !important;
		right: 50%; !important; */
	}

	.ringkasancheckout p.totalharga {
		display: inline-block;
		float: right;
		color: rgb(50, 205, 50);
		font-size: 9px !important;
		font-weight: 700;
		text-align: center;
	}

	.btnbuy {
		position: relative;
		height: 25px !important;
		left: 0% !important;
		right: 0% !important;
		background: rgb(50, 205, 50);
		color: white;
		font-size: 10px;
		font-weight: 700;
		height: 10px;
		width: 100% !important;
	}
}


ul li {
	margin-bottom: 5px;
}

.log-in.android {
	display: none;
}

.log-in {
	background-color: transparent;
	border-radius: 16px;
}

.log-in:hover {
	background-color: transparent;
}

.log-in:active {
	outline: none;
	box-shadow: none !important;
	background-color: transparent;
}

.log-in.white {
	border: 1px solid white;
}

.log-in.white a {
	text-decoration: none;
	color: white;
	font-weight: 600;
}

.log-in.green {
	border: 1px solid rgb(50, 205, 50);
	color: rgb(50, 205, 50);
	font-weight: 600;
	width: 65px;
	text-align: center;
	outline-width: 2px;
}

.log-in.green:focus {
	box-shadow: 0px 0px 4px rgb(50, 205, 50);
}

.log-in.green a {
	/* text-decoration: none;
	color: rgb(50,205,50);
	font-weight: 600; */
}

.catalog h1 {
	font-size: 26px;
	font-weight: bold;
	color: rgb(50, 205, 50);
	text-align: center;
}

.catalog .row .productcatalog {
	padding: 5px;
	margin-top: 20px;
	margin-left: 0px;
	border-radius: 5px;
}

.catalog .row .productcatalog:hover {
	box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.45);
	-moz-box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.45);
	-webkit-box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.45);
}

.imgproduct {
	width: 100%;
	height: 200px;
	object-fit: contain;
}

.catalogcardproduct {
	padding-left: 5px;
	padding-right: 5px;
	margin-top: -20px;
	text-decoration: none;
	text-align: center;
}

.catalogcardproduct a {
	text-decoration: none;
	text-align: center;
}

.catalogcardproduct a h3 {
	color: black;
	font-size: 14px;
	font-weight: 600;
}

.catalogcardproduct h5 {
	margin-top: -2px;
	font-size: 14px;
	font-weight: 600;
	text-align: center;
	color: rgb(50, 205, 50);
}

/* ------------ Login Section ------------ */
.modal-content {
	box-shadow: 0px 2px 10px black;
}

.modal-title {
	font-size: 19px;
	font-weight: bold;
	color: rgb(50, 205, 50);
}

.modal-body {
	margin-top: -18px;
	padding-left: 25px;
	padding-right: 25px;
}

.loginmodal label {
	color: rgba(0, 0, 0, 0.7);
	font-weight: 600;
	font-size: 13px;
}

.loginmodal p {
	font-size: 10px;
	font-weight: 600;
	color: rgba(0, 0, 0, 0.50);
}

.loginmodal input:focus {
	border: 2px solid rgb(50, 205, 50);
	transition: 0.8s;
	box-shadow: none;
}

.loginmodal input {
	font-size: 12px;
	font-weight: bold;
	height: 30px;
	border-radius: 8px;
}

.input-group.mb-2 input[type=number]::-webkit-inner-spin-button,
.input-group.mb-2 input[type=number]::-webkit-outer-spin-button {
	-webkit-appearance: none !important;
	margin: 0 !important;
}

.input-group.mb-2 input[type=number] {
	-moz-appearance: textfield;
}

.input-group-text.login {
	font-size: 12px;
	font-weight: bold;
	height: 30px;
	font-weight: bold;
}

.loginbutton {
	margin-top: 15px;
	color: white;
	font-weight: bold;
	background: rgb(50, 205, 50);
	border: none;
	border-radius: 8px;
	height: 30px;
	width: 100%;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.45);
}

.daftarlink {
	margin-top: 10px;
	color: rgba(0, 0, 0, 0.35);
	font-size: 12px !important;
	font-weight: 600;
}

.daftarlink a {
	text-decoration: none;
	font-weight: 700;
}

/* ---------- End of Login Section ---------- */

/* ---------- Footer Section ---------- */
.footer {
	box-shadow: 0px 2px 30px #999;
}

.insta {
	background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
	-webkit-background-clip: text;
	/* Also define standard property for compatibility */
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.facebook {
	color: #3b5998;
}

.twitter {
	color: #00aced;
}

.youtube {
	color: #c4302b;
}

.copyright {
	margin-top: 10px;
	padding-top: 2px;
	padding-bottom: 10px;
	padding-left: 50px;
	color: #f9f9f9;
	font-size: 14px;
	font-weight: 600;
	box-shadow: 0px 1px 2px #dee2e6;
	margin-bottom: -20px;
}

.footertitle {
	display: table;
	font-size: 18px;
	font-weight: 700;
	color: #1d82db;
	margin-bottom: -15px;
	padding-bottom: 0px;
}

.footercontactus {
	font-size: 12px;
	color: white;
	font-weight: 500;
	font-style: normal;
	text-decoration: none;
	text-align: left;
	display: inline-block !important;
}

.tentangweb h5 {
	color: #f9f9f9;
	text-shadow: 0px 0px 1px #999;
}

.tentangweb p {
	font-size: 12px;
	text-align: justify;
	color: #f9f9f9;
}

.followus .row a {
	font-size: 25px;
}

.support a {
	display: block;
	text-decoration: none;
	color: #f9f9f9;
	font-size: 12px;
	font-weight: 500;
}

.arrow-right {
	display: inline-block;
	float: left;
	width: 0;
	height: 0;
	margin-right: 10px;
	margin-top: 3px;
	border-top: 6px solid transparent;
	border-bottom: 6px solid transparent;
	border-left: 6px solid rgb(50, 205, 50);
}

/* ------------ End of Footer Section ------------ */

/* --------- Cart Section --------- */
.numberCircle {
	position: absolute;
	margin-top: -35px;
	margin-left: 19px;
	justify-content: center !important;
	border-radius: 50%;
	width: 20px;
	height: 20px;
	text-align: center;
	font: 10px Arial, sans-serif;
}

.numberCircle.green {
	background: white;
	box-shadow: 0px 0px 5px rgb(50, 205, 50);
	color: rgb(50, 205, 50);
}

.numberCircle.white {
	background: rgb(50, 205, 50);
	box-shadow: 0px 0px 5px black;
	color: white;
}

.shoppingcart {
	position: absolute;
	margin-left: 80%;
}

.shoppingcarts {
	display: none;
}

.cartlist a {
	color: white;
	outline: none;
	text-decoration: none;
	font-size: 25px;
}

.cartlists {
	display: inline-block;
}

.cartlists a {
	display: inline-block;
	color: white;
	outline: none;
	text-decoration: none;
	font-size: 25px;
}

.fas.fa-shopping-cart.product {
	color: rgb(50, 205, 50);
}

.cartproduct {
	padding: 12px;
}

.cartproduct:hover {
	padding: 11px;
	border: 1px solid #f2f2f2;
	border-radius: 8px;
}

.cartproduct.pembayaran:hover {
	padding: 12px;
	border: none;
	border-radius: 8px;
}

.hargacart {
	font-weight: bold;
	box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.45);
	-moz-box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.45);
	-webkit-box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.45);
	display: inline-block;
	background-color: #f1f1f1;
	padding-left: 8px;
	padding-right: 8px;
	font-weight: 700;
	font-size: 20px;
}

.ringkasancheckout {
	position: absolute;
	display: inline-block;
	padding-left: 28px;
	padding-right: 28px;
	padding-top: 10px;
	padding-bottom: 10px;
	border: none;
	outline: none;
	width: 100%;
	border-radius: 8px;
	background-color: white;
	box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.45);
	-moz-box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.45);
	-webkit-box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.45);
}

.ringkasancheckout p.ringkasan {
	padding-top: 6px;
	color: black;
	font-size: 15px;
	font-weight: 600;
	text-align: center;
}

.keterangantotalharga {
	float: left;
	color: #999;
	font-size: 13px;
	font-weight: 400;
	margin-top: 0px;
	margin-bottom: 0px;
}

p.totalharga {
	display: inline-block;
	float: right;
	color: rgb(50, 205, 50);
	font-size: 14px;
	font-weight: 600;
	text-align: center;
}

p.totalharga.checkout {
	display: inline-block;
	float: right;
	color: rgb(50, 205, 50);
	font-size: 13px;
	font-weight: 700;
	text-align: center;
	margin-bottom: -10px;
}

.btnbuy {
	border-radius: 8px;
	height: 30px;
	margin-bottom: 5px;
	justify-content: center !important;
	left: 0% !important;
	right: 0% !important;
	font-weight: 700;
	text-align: center !important;
	background: rgb(50, 205, 50);
	color: white !important;
	width: 100%;
}

.btnbuy:hover {
	color: white;
}

.breakspacecart {
	margin-bottom: 350px;
}

.breakspacecart1 {
	margin-bottom: 90px;
}

.cartnamaproduct {
	font-weight: 700;
	font-size: 18px;
	color: black;
}

.cartjumlah {
	font-size: 14px;
	font-weight: 600;
	margin-top: -10px;
}

.jumlah.cart {
	display: inline-block;
	float: left;
	margin-left: -4px;
	width: 60px;
}

.carthargaproduct {
	font-weight: 600;
	font-size: 15px;
	color: rgb(50, 205, 50);
}



/* --------- End of Cart Section --------- */

/* --------- User Dashboard ---------- */
.table-user {
	font-size: 14px;
}

.editbtn {
	float: right;
}

.navbardashboarduser {
	padding-left: 6%;
	padding-right: 8%;
}

.navbardashboarduser ul.navbar-nav li.nav-item {}

a.itemnavbardashboarduser {
	background-color: #f1f1f1;
	padding: 13px;
	box-shadow: 0px 2px 5px #999
}

a.itemnavbardashboarduser:hover {
	text-decoration: none;
	color: black;
}

.userphotoprofile {
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 40px;
	width: 200px;
	height: 200px;
	object-fit: cover;
	border-radius: 50%;
}

.gambar img:hover {
	display: block !important;
	opacity: 100;
	cursor: pointer;
	opacity: 0.5;
	z-index: 501;
	transition: 0.3s;
}

.userEditKodePos::-webkit-inner-spin-button,
.userEditKodePos::-webkit-outer-spin-button {
	-webkit-appearance: none !important;
	margin: 0 !important;
}

.userEditKodePos {
	-moz-appearance: textfield;
}

/* --------- End of User Dashboard ---------- */

/* --------- User Change Password Dashboard ---------- */
.h1password {
	padding-top: 20px;
	text-align: center;
	font-weight: 700;
	font-size: 23px;
	color: rgb(50, 205, 50);
}

/* --------- End of User Change Password Dashboard ---------- */

/* --------- Checkout Verification ---------- */
.alamatcheckout {
	padding: 20px;
	margin-top: 8px;
	box-shadow: 0px 0px 2px #999;
	border-radius: 8px;
}

.alamatketerangan {
	text-align: center;
	font-size: 15px;
	font-weight: 600;
}

.namaalamat {
	margin-top: -6px;
	font-size: 14px;
	font-weight: 600;
}

.nomorhpcheckout {
	font-size: 14px;
	font-weight: 500;
}

.keteranganalamat {
	font-size: 14px;
	font-weight: 500;
	color: #rgba(0, 0, 0, 0.40);
}

.pengiriman {
	position: absolute;
	margin-top: 20px;
	left: 60%;
}

.form-control.pengirimanrajaongkir {
	font-size: 13px;
}

.labelpengiriman {
	font-weight: 600;
}

.tablecheckout2 {
	margin-top: -13px;
}

/* --------- End of Checkout Verification ---------- */

/* --------- Transaction ---------- */
.transactionid {
	margin-left: 15px;
	margin-top: 5px;
	margin-bottom: -8px;
	font-weight: 500;
	font-size: 14px;
}

.vl {
	margin-left: 13px;
	border-left: 1px solid rgba(0, 0, 0, .1);
	height: 500px;
}

.transactionketharga {
	font-weight: 600;
	font-style: normal;
	float: right;
	margin-bottom: 0px;
}

.transactionharga {
	font-size: 15px;
	font-style: normal;
	font-weight: 500;
	color: rgb(50, 205, 50);
}

.pembayaranpengirimandiv {
	font-size: 15px;
}

.pembayaranketpengiriman {
	font-size: 17px;
	font-weight: 600;
}

.jumlahtransaksibarang {
	margin-top: -28px;
	margin-left: 70px;
	border-top: none;
	border-left: none;
	border-right: none;
	border-bottom-width: 1.5px;
	width: 50px;
	text-align: center
}

.jumlahtransaksibarang:focus {
	box-shadow: none;
	outline: none;
}

.jumlahtransaksibarang::-webkit-inner-spin-button,
.jumlahtransaksibarang::-webkit-outer-spin-button {
	-webkit-appearance: none !important;
	margin: 0 !important;
}

.jumlahtransaksibarang {
	-moz-appearance: textfield;
}

.ketnamaproduct {
	font-weight: 700;
	font-size: 20px;
	color: black;
}

.kethargaproduct {
	font-weight: 700;
	font-size: 15px;
	color: rgb(50, 205, 50);
}

.carapembayaran {
	font-size: 14px;
	text-align: left;
}

.card.mx-auto.panduan {
	/* height: 410px;  */
	border: 1px solid #e0e0e0;
	margin-bottom: 20px;
}

.card-header.panduan {
	font-size: 15px;
	font-weight: 700;
	text-align: center;
}

.ketsegeraselesaikan {
	font-weight: 600;
	text-align: center;
}

.divwaktucountdown {
	border-radius: 5px;
	border: 1px solid #e0e0e0;
	padding: 25px;
	text-align: center;
	display: table;
	margin: 0 auto;
}

.ketwaktucountdown {
	font-weight: 700;
	font-size: 40px;
	color: rgb(50, 205, 50);
}

/* --------- End of Transaction ---------- */


/* --------- Admin ---------- */
.adminnamakurir {
	margin-top: 10px;
	color: rgb(50, 205, 50);
	font-weight: 600;
	font-size: 28px;
	text-align: center;
}

.img-circle.elevation-2 {
	height: 2.1rem;
	object-fit: cover;
}

/* --------- End of Admin ---------- */