@importurl("https://fonts.googleapis.com/css2?family=Inter:wght@300;600&display=swap");

:root{ 
--blue: #131086;
--coffee: #8b4513;
--brown: #cd853f;
--maroon: #a70000;
--red: #ff0000;
--dpink: #ff5252;
--pink : #ff7b7b;
--pastelpink : #ffbaba;
}

html {
	height: 100%;
	min-height:100%;
	font-family: arial;
}

body {
	background: #f2f2f2;
	width:100%;
	margin:0;
	height:100%;
}

b {
	font-family: arial;	
}

button {
	cursor: pointer;
}

select {
	cursor: pointer;
}

input {
	cursor:pointer;
}

input[type="password"]::-ms-reveal {
	display: none;
}

#username-lm:read-only {
	background-color:#cdcdcd;
	color: #626262; 
	border: 1px solid black;
}

textarea {
	cursor:pointer;
}

.navbar-fixed {
	position: relative;
	height: 56px;
	line-height: 56px;
	z-index: 997;
}

.navbar-fixed nav {
	position: fixed;
	height:56px;
}
 
.navbaritem-fixed {
	position: relative;
	height: 56px;
	line-height: 56px;
	z-index: 997;
}

.navbaritem-fixed nav {
	position: fixed;
}

.navbar-pesanan {
	position: relative;
	height: 56px;
	line-height: 56px;
	z-index: 1;
}

.navbar-pesanan nav {
	position: fixed;
	height:56px;
}

.red {
	background-color: #F44336 !important;
}

.red.lighten-5 {
 	background-color: #FFEBEE !important;
}

.red.lighten-4 {
 	background-color: #FFCDD2 !important;
}

.red.lighten-3 {
 	background-color: #EF9A9A !important;
}

.red.lighten-2 {
 	background-color: #E57373 !important;
}

.red.lighten-1 {
 	background-color: #EF5350 !important;
}

.red.darken-1 {
 	background-color: #E53935 !important;
}

.red.darken-2 {
 	background-color: #D32F2F !important;
}

.red.darken-3 {
 	background-color: #D32F2F !important;
}

.red.darken-4 {
 	background-color: #B71C1C !important;
}

.red.accent-1 {
 	background-color: #FF8A80 !important;
}

.red.accent-2 {
 	background-color: #FF5252 !important;
}

.red.accent-3 {
 	background-color: #FF1744 !important;
}

.red.accent-4 {
 	background-color: #D50000 !important;
}

.pink {
 	background-color: #e91e63 !important;
}

.pink.lighten-5 {
 	background-color: #fce4ec !important;
}

.pink.lighten-4 {
 	background-color: #f8bbd0 !important;
}

.pink.lighten-3 {
 	background-color: #f48fb1 !important;
}

.pink.lighten-2 {
 	background-color: #f06292 !important;
}

.pink.lighten-1 {
 	background-color: #ec407a !important;
}

.pink.darken-1 {
 	background-color: #d81b60 !important;
}

.pink.darken-2 {
 	background-color: #c2185b !important;
}

.pink.darken-3 {
 	background-color: #ad1457 !important;
}

.pink.darken-4 {
 	background-color: #880e4f !important;
}

.pink.accent-1 {
 	background-color: #ff80ab !important;
}

.pink.accent-2 {
 	background-color: #ff4081 !important;
}

.pink.accent-3 {
 	background-color: #f50057 !important;
}

.pink.accent-4 {
 	background-color: #c51162 !important;
}

.purple {
 	background-color: #9c27b0 !important;
}

.purple.lighten-5 {
 	background-color: #f3e5f5 !important;
}

.purple.lighten-4 {
 	background-color: #e1bee7 !important;
}

.purple.lighten-3 {
 	background-color: #ce93d8 !important;
}

.purple.lighten-2 {
 	background-color: #ba68c8 !important;
}

.purple.lighten-1 {
 	background-color: #ab47bc !important;
}

.purple.darken-1 {
 	background-color: #8e24aa !important;
}

.purple.darken-2 {
 	background-color: #7b1fa2 !important;
}

.purple.darken-3 {
 	background-color: #6a1b9a !important;
}

.purple.darken-4 {
 	background-color: #4a148c !important;
}

.purple.accent-1 {
 	background-color: #ea80fc !important;
}

.purple.accent-2 {
 	background-color: #e040fb !important;
}

.purple.accent-3 {
 	background-color: #d500f9 !important;
}

.purple.accent-4 {
 	background-color: #aa00ff !important;
}

.deep-purple {
 	background-color: #673ab7 !important;
}

.deep-purple.lighten-5 {
 	background-color: #ede7f6 !important;
}

.deep-purple.lighten-4 {
 	background-color: #d1c4e9 !important;
}

.deep-purple.lighten-3 {
 	background-color: #b39ddb !important;
}

.deep-purple.lighten-2 {
 	background-color: #9575cd !important;
}

.deep-purple.lighten-1 {
 	background-color: #7e57c2 !important;
}

.deep-purple.darken-1 {
	background-color: #5e35b1 !important;
}

.deep-purple.darken-2 {
 	background-color: #512da8 !important;
}

.deep-purple.darken-3 {
 	background-color: #4527a0 !important;
}

.deep-purple.darken-4 {
 	background-color: #311b92 !important;
}

.deep-purple.accent-1 {
 	background-color: #b388ff !important;
}

.deep-purple.accent-2 {
 	background-color: #7c4dff !important;
}

.deep-purple.accent-3 {
 	background-color: #651fff !important;
}

.deep-purple.accent-4 {
 	background-color: #6200ea !important;
}

.indigo {
 	background-color: #3f51b5 !important;
}

.indigo.lighten-5 {
 	background-color: #e8eaf6 !important;
}

.indigo.lighten-4 {
 	background-color: #c5cae9 !important;
}

.indigo.lighten-3 {
 	background-color: #9fa8da !important;
}

.indigo.lighten-2 {
 	background-color: #7986cb !important;
}

.indigo.lighten-1 {
 	background-color: #5c6bc0 !important;
}

.indigo.darken-1 {
 	background-color: #3949ab !important;
}

.indigo.darken-2 {
 	background-color: #303f9f !important;
}

.indigo.darken-3 {
 	background-color: #283593 !important;
}

.indigo.darken-4 {
 	background-color: #1a237e !important;
}

.indigo.accent-1 {
 	background-color: #8c9eff !important;
}

.indigo.accent-2 {
 	background-color: #536dfe !important;
}

.indigo.accent-3 {
 	background-color: #3d5afe !important;
}

.indigo.accent-4 {
 	background-color: #304ffe !important;
}

.blue {
 	background-color: #2196F3 !important;
}

.blue.lighten-5 {
 	background-color: #E3F2FD !important;
}

.blue.lighten-4 {
 	background-color: #BBDEFB !important;
}

.blue.lighten-3 {
 	background-color: #90CAF9 !important;
}

.blue.lighten-2 {
 	background-color: #64B5F6 !important;
}

.blue.lighten-1 {
 	background-color: #42A5F5 !important;
}

.blue.darken-1 {
 	background-color: #1E88E5 !important;
}

.blue.darken-2 {
 	background-color: #1976D2 !important;
}

.blue.darken-3 {
 	background-color: #1565C0 !important;
}

.blue.darken-4 {
 	background-color: #0D47A1 !important;
}

.blue.accent-1 {
 	background-color: #82B1FF !important;
}

.blue.accent-2 {
 	background-color: #448AFF !important;
}

.blue.accent-3 {
 	background-color: #2979FF !important;
}

.blue.accent-4 {
 	background-color: #2962FF !important;
}

.light-blue {
 	background-color: #03a9f4 !important;
}

.light-blue.lighten-5 {
 	background-color: #e1f5fe !important;
}

.light-blue.lighten-4 {
 	background-color: #b3e5fc !important;
}

.light-blue.lighten-3 {
 	background-color: #81d4fa !important;
}

.light-blue.lighten-2 {
 	background-color: #4fc3f7 !important;
}

.light-blue.lighten-1 {
 	background-color: #29b6f6 !important;
}

.light-blue.darken-1 {
 	background-color: #039be5 !important;
}

.light-blue.darken-2 {
 	background-color: #0288d1 !important;
}

.light-blue.darken-3 {
 	background-color: #0277bd !important;
}

.light-blue.darken-4 {
 	background-color: #01579b !important;
}

.light-blue.accent-1 {
 	background-color: #80d8ff !important;
}

.light-blue.accent-2 {
 	background-color: #40c4ff !important;
}

.light-blue.accent-3 {
 	background-color: #00b0ff !important;
}

.light-blue.accent-4 {
 	background-color: #0091ea !important;
}

.cyan {
 	background-color: #00bcd4 !important;
}

.cyan.lighten-5 {
 	background-color: #e0f7fa !important;
}

.cyan.lighten-4 {
 	background-color: #b2ebf2 !important;
}

.cyan.lighten-3 {
 	background-color: #80deea !important;
}

.cyan.lighten-2 {
 	background-color: #4dd0e1 !important;
}

.cyan.lighten-1 {
 	background-color: #26c6da !important;
}

.cyan.darken-1 {
 	background-color: #00acc1 !important;
}

.cyan.darken-2 {
 	background-color: #0097a7 !important;
}

.cyan.darken-3 {
 	background-color: #00838f !important;
}

.cyan.darken-4 {
 	background-color: #006064 !important;
}

.cyan.accent-1 {
 	background-color: #84ffff !important;
}

.cyan.accent-2 {
 	background-color: #18ffff !important;
}

.cyan.accent-3 {
 	background-color: #00e5ff !important;
}

.cyan.accent-4 {
 	background-color: #00b8d4 !important;
}

.teal {
 	background-color: #009688 !important;
}

.teal.lighten-5 {
 	background-color: #e0f2f1 !important;
}

.teal.lighten-4 {
 	background-color: #b2dfdb !important;
}

.teal.lighten-3 {
 	background-color: #80cbc4 !important;
}

.teal.lighten-2 {
 	background-color: #4db6ac !important;
}

.teal.lighten-1 {
 	background-color: #26a69a !important;
}

.teal.darken-1 {
 	background-color: #00897b !important;
}

.teal.darken-2 {
 	background-color: #00796b !important;
}

.teal.darken-3 {
 	background-color: #00695c !important;
}

.teal.darken-4 {
 	background-color: #004d40 !important;
}

.teal.accent-1 {
 	background-color: #a7ffeb !important;
}

.teal.accent-2 {
 	background-color: #64ffda !important;
}

.teal.accent-3 {
 	background-color: #1de9b6 !important;
}

.teal.accent-4 {
 	background-color: #00bfa5 !important;
}

.green {
 	background-color: #4CAF50 !important;
}

.green.lighten-5 {
 	background-color: #E8F5E9 !important;
}

.green.lighten-4 {
 	background-color: #C8E6C9 !important;
}

.green.lighten-3 {
 	background-color: #A5D6A7 !important;
}

.green.lighten-2 {
 	background-color: #81C784 !important;
}

.green.lighten-1 {
 	background-color: #66BB6A !important;
}

.green.darken-1 {
 	background-color: #43A047 !important;
}

.green.darken-2 {
 	background-color: #388E3C !important;
}

.green.darken-3 {
 	background-color: #2E7D32 !important;
}

.green.darken-4 {
 	background-color: #1B5E20 !important;
}

.green.accent-1 {
 	background-color: #B9F6CA !important;
}

.green.accent-2 {
 	background-color: #69F0AE !important;
}

.green.accent-3 {
 	background-color: #00E676 !important;
}

.green.accent-4 {
 	background-color: #00C853 !important;
}

.light-green {
 	background-color: #8bc34a !important;
}

.light-green.lighten-5 {
 	background-color: #f1f8e9 !important;
}

.light-green.lighten-4 {
 	background-color: #dcedc8 !important;
}

.light-green.lighten-3 {
 	background-color: #c5e1a5 !important;
}

.light-green.lighten-2 {
 	background-color: #aed581 !important;
}

.light-green.lighten-1 {
 	background-color: #9ccc65 !important;
}

.light-green.darken-1 {
 	background-color: #7cb342 !important;
}

.light-green.darken-2 {
 	background-color: #689f38 !important;
}

.light-green.darken-3 {
 	background-color: #558b2f !important;
}

.light-green.darken-4 {
 	background-color: #33691e !important;
}

.light-green.accent-1 {
 	background-color: #ccff90 !important;
}

.light-green.accent-2 {
 	background-color: #b2ff59 !important;
}

.light-green.accent-3 {
 	background-color: #76ff03 !important;
}

.light-green.accent-4 {
 	background-color: #64dd17 !important;
}

.lime {
 	background-color: #cddc39 !important;
}

.lime.lighten-5 {
 	background-color: #f9fbe7 !important;
}

.lime.lighten-4 {
 	background-color: #f0f4c3 !important;
}

.lime.lighten-3 {
 	background-color: #e6ee9c !important;
}

.lime.lighten-2 {
 	background-color: #dce775 !important;
}

.lime.lighten-1 {
 	background-color: #d4e157 !important;
}

.lime.darken-1 {
 	background-color: #c0ca33 !important;
}

.lime.darken-2 {
 	background-color: #afb42b !important;
}

.lime.darken-3 {
 	background-color: #9e9d24 !important;
}

.lime.darken-4 {
 	background-color: #827717 !important;
}

.lime.accent-1 {
 	background-color: #f4ff81 !important;
}

.lime.accent-2 {
 	background-color: #eeff41 !important;
}

.lime.accent-3 {
 	background-color: #c6ff00 !important;
}

.lime.accent-4 {
 	background-color: #aeea00 !important;
}

.yellow {
 	background-color: #ffeb3b !important;
}

.yellow.lighten-5 {
 	background-color: #fffde7 !important;
}

.yellow.lighten-4 {
 	background-color: #fff9c4 !important;
}

.yellow.lighten-3 {
 	background-color: #fff59d !important;
}

.yellow.lighten-2 {
 	background-color: #fff176 !important;
}

.yellow.lighten-1 {
 	background-color: #ffee58 !important;
}

.yellow.darken-1 {
 	background-color: #fdd835 !important;
}

.yellow.darken-2 {
 	background-color: #fbc02d !important;
}

.yellow.darken-3 {
 	background-color: #f9a825 !important;
}

.yellow.darken-4 {
 	background-color: #f57f17 !important;
}

.yellow.accent-1 {
 	background-color: #ffff8d !important;
}

.yellow.accent-2 {
 	background-color: #ffff00 !important;
}

.yellow.accent-3 {
 	background-color: #ffea00 !important;
}

.yellow.accent-4 {
 	background-color: #ffd600 !important;
}

.amber {
 	background-color: #ffc107 !important;
}

.amber.lighten-5 {
 	background-color: #fff8e1 !important;
}

.amber.lighten-4 {
 	background-color: #ffecb3 !important;
}

.amber.lighten-3 {
 	background-color: #ffe082 !important;
}

.amber.lighten-2 {
 	background-color: #ffd54f !important;
}

.amber.lighten-1 {
 	background-color: #ffca28 !important;
}

.amber.darken-1 {
 	background-color: #ffb300 !important;
}

.amber.darken-2 {
 	background-color: #ffa000 !important;
}

.amber.darken-3 {
 	background-color: #ff8f00 !important;
}

.amber.darken-4 {
 	background-color: #ff6f00 !important;
}

.amber.accent-1 {
 	background-color: #ffe57f !important;
}

.amber.accent-2 {
 	background-color: #ffd740 !important;
}

.amber.accent-3 {
 	background-color: #ffc400 !important;
}

.amber.accent-4 {
 	background-color: #ffab00 !important;
}

.orange {
 	background-color: #ff9800 !important;
}

.orange.lighten-5 {
 	background-color: #fff3e0 !important;
}

.orange.lighten-4 {
 	background-color: #ffe0b2 !important;
}

.orange.lighten-3 {
 	background-color: #ffcc80 !important;
}

.orange.lighten-2 {
 	background-color: #ffb74d !important;
}

.orange.lighten-1 {
 	background-color: #ffa726 !important;
}

.orange.darken-1 {
 	background-color: #fb8c00 !important;
}

.orange.darken-2 {
 	background-color: #f57c00 !important;
}

.orange.darken-3 {
 	background-color: #ef6c00 !important;
}

.orange.darken-4 {
 	background-color: #e65100 !important;
}

.orange.accent-1 {
 	background-color: #ffd180 !important;
}

.orange.accent-2 {
 	background-color: #ffab40 !important;
}

.orange.accent-3 {
 	background-color: #ff9100 !important;
}

.orange.accent-4 {
 	background-color: #ff6d00 !important;
}

.deep-orange {
 	background-color: #ff5722 !important;
}

.deep-orange.lighten-5 {
 	background-color: #fbe9e7 !important;
}

.deep-orange.lighten-4 {
 	background-color: #ffccbc !important;
}

.deep-orange.lighten-3 {
 	background-color: #ffab91 !important;
}

.deep-orange.lighten-2 {
 	background-color: #ff8a65 !important;
}

.deep-orange.lighten-1 {
 	background-color: #ff7043 !important;
}

.deep-orange.darken-1 {
 	background-color: #f4511e !important;
}

.deep-orange.darken-2 {
 	background-color: #e64a19 !important;
}

.deep-orange.darken-3 {
 	background-color: #d84315 !important;
}

.deep-orange.darken-4 {
 	background-color: #bf360c !important;
}

.deep-orange.accent-1 {
 	background-color: #ff9e80 !important;
}

.deep-orange-text.text-accent-1 {
  color: #ff9e80 !important;
}

.deep-orange.accent-2 {
 	background-color: #ff6e40 !important;
}

.deep-orange.accent-3 {
 	background-color: #ff3d00 !important;
}

.deep-orange.accent-4 {
 	background-color: #dd2c00 !important;
}

.brown {
 	background-color: #795548 !important;
}

.brown.lighten-5 {
 	background-color: #efebe9 !important;
}

.brown.lighten-4 {
 	background-color: #d7ccc8 !important;
}

.brown.lighten-3 {
 	background-color: #bcaaa4 !important;
}

.brown.lighten-2 {
 	background-color: #a1887f !important;
}

.brown.lighten-1 {
 	background-color: #8d6e63 !important;
}

.brown.darken-1 {
 	background-color: #6d4c41 !important;
}

.brown.darken-2 {
 	background-color: #5d4037 !important;
}

.brown.darken-3 {
 	background-color: #4e342e !important;
}

.brown.darken-4 {
 	background-color: #3e2723 !important;
}

.blue-grey {
 	background-color: #607d8b !important;
}

.blue-grey.lighten-5 {
 	background-color: #eceff1 !important;
}

.blue-grey.lighten-4 {
 	background-color: #cfd8dc !important;
}

.blue-grey.lighten-3 {
 	background-color: #b0bec5 !important;
}

.blue-grey.lighten-2 {
 	background-color: #90a4ae !important;
}

.blue-grey.lighten-1 {
 	background-color: #78909c !important;
}

.blue-grey.darken-1 {
 	background-color: #546e7a !important;
}

.blue-grey.darken-2 {
 	background-color: #455a64 !important;
}

.blue-grey.darken-3 {
 	background-color: #37474f !important;
}

.blue-grey.darken-4 {
 	background-color: #263238 !important;
}

.grey {
 	background-color: #9e9e9e !important;
}

.grey.lighten-5 {
 	background-color: #fafafa !important;
}

.grey.lighten-4 {
 	background-color: #f5f5f5 !important;
}

.grey.lighten-3 {
 	background-color: #eeeeee !important;
}

.grey.lighten-2 {
 	background-color: #e0e0e0 !important;
}

.grey.lighten-1 {
 	background-color: #bdbdbd !important;
}

.grey.darken-1 {
 	background-color: #757575 !important;
}

.grey.darken-2 {
 	background-color: #616161 !important;
}

.grey.darken-3 {
 	background-color: #424242 !important;
}

.grey.darken-4 {
 	background-color: #212121 !important;
}

.black {
 	background-color: #000000 !important;
}

.black-text {
  color: #000000 !important;
}

.white {
	background-color: #FFF !important;
}

.white-text {
	color: #FFF !important;
}

nav {
	color: #fff;
	background-color: #ee6e73;
	width: 100%;
	-webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);
	box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);
}

nav .nav-wrapper {
	position: relative;
	line-height: 56px;
} 

nav .navitem-wrapper {
	position: relative;
	height: 90px;
	line-height: 35px;
} 

.container {
	width: 93%;
	margin: 0 auto;
	max-width: 1280px;
}

.nav-upper {
	width:100%;
}

.nav-lower {
	width:100%;
}

.lower-content {
	width: 100%;
	border-collapse:collapse;
	border-spacing:0;
}

.navbaritem-nav {
	float: right;
	overflow: hidden;
	display: -ms-flexbox;
	display: flex;
	flex-direction: column;
	padding-left: 0;
	margin-bottom: 0;
	list-style: none;
	flex-direction: row;
	margin-top: 0.5rem;
	font-size: 1rem;
} 

.navbar-nav {
	float: right;
	overflow: hidden;
	display: -ms-flexbox;
	display: flex;
	flex-direction: column;
	padding-left: 0;
	margin-bottom: 0;
	list-style: none;
	flex-direction: row;
	font-size: 1.1rem;
} 

.nama {
	font-size: 1.6rem;
	line-height: 100%;
	margin: 0.7rem 0 0 0;
	font-weight: 400;
	float: left;
	font-family: arial;
	cursor:pointer;
	background:none;
	border:none;
	color:white;
}

.mar {
	margin-right: 20px;
}

.page-footer {
	padding-top: 20px;
	color: #fff;
	background-color: #ee6e73;
}

.white {
	background-color: #fff !important;
}

footer {
	position: fixed;
	z-index: 997;
	left: 0;
	bottom: 0;
	width: 100%;
}

article, aside, footer, header, nav, section {
	display: block;
}

.page-footer .footer-copyright {
	overflow: hidden;
	min-height: 45px;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: justify;
	-webkit-justify-content: space-between;
	-ms-flex-pack: justify;
	justify-content: space-between;
	padding: 0px 0px;
	color: rgba(255,255,255,0.8);
	background-color: rgba(51,51,51,0.08);
}

small {
	font-size: 68%;
}

.right {
	float: right !important;
	margin-top: 4px;
}

.white-text {
	color: #fff !important;
}

a {
	text-decoration: none;
	color: white;
	text-decoration: none;
	-webkit-tap-highlight-color: transparent;
	background-color: transparent;
	-webkit-text-decoration-skip: objects;
}

.nav-button {
	border: none;
	background: none;
	color:white;
	width: 100%;
	font-size: 15px;
	padding: 5px 0px 5px 5px;
}

.menubars {
	background: none;
	border:none;
	color:white;
	margin: 0.6rem 10px 0 0;
	float:left;
	display:inline-block;
	font-size: 1.5rem;
	width: 1.8rem;
}

.navbar-badge {
	font-size: .6rem;
	font-weight: 300;
	padding: 2px 4px;
	top: 63%;
}

.badge-danger {
	color: #dc3545;
	background-color: #fff;
}

.badge {
	display: inline-block;
	padding: 0.25em 0.4em;
	font-size: 75%;
	font-weight: 700;
	line-height: 1;
	text-align: center;
	white-space: nowrap;
	vertical-align: baseline;
	border-radius: 0.25rem;
	transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.search {
	width:87.2%;
	position:relative;
	height: 24.5px;
	outline:none;
	border: none;
	text-indent:2px;
}

.search:focus {
	border : #a70000;
	outline:none;
}

.search-button {
	position:absolute;
	top:55.5%;
	width:7%;
	right: 17%;
	height: 24px;
	padding:5px;
	background: var(--pink);
	border:none;
	color:white;
}

.filter-bar {
	visibility:hidden;
	display : flex;
	justify-content:left;
	padding: 60px 0 45px 0;
	position:fixed;
	background:white;
	left:0;
	height:100%;
	width: 25%;
}

.filter-bar.close{
	visibility: visible;
	z-index:996;
}

.open-filter {
	visibility: visible;
	z-index:996;
}

.filter-content {
	width:100%;	
	padding-left:10px;
	padding-right:10px;
}

.filter-select {
	width:100%;
	padding:4px;
	margin-bottom: 23px;
}

.filter-select:focus {
	outline:none;
}

.filter-btns {
	width:calc(100% - 20px);
	position:absolute;
	bottom:109px;
	display:flex;
	justify-content:center;
}

.filter-btn {
	width:calc((100% - 5px)/2);
	margin-right:0;
	height:30px;
}

.cancelfilter {
	border : 1px solid #ff7b7b;
	background:white;
}

.applyfilter {
	background : var(--pink);
	color:white;
	border:none;
}

.product {
	width:100%;
}

.product-page {
	height:100%;
	width:100%;
}

.product-container {
	width:calc(100% - 20%);
	position:relative;
	left:10%;
	right:10%;
	justify-content: center;
}

.product-page-container {
	width:calc(100% - 20%);
	position:relative;
	left:10%;
	right:10%;
	justify-content: center;
}

.space {
	width:10%;
}

.product-content {
	display : grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
	padding:37px 9px 7px 9px;
	grid-column-gap: 10px;
	grid-row-gap:5px;
	width:100%;
}

.item {
	background:white;
	margin-bottom: 8px;
	-webkit-box-shadow: 0 1px 1px 0 rgba(0,0,0,0.14), 0 1px 1px -2px rgba(0,0,0,0.12), 0 0px 1px 0 rgba(0,0,0,0.2);
	box-shadow: 0 1px 1px 0 rgba(0,0,0,0.14), 0 1px 1px -2px rgba(0,0,0,0.12), 0 0px 1px 0 rgba(0,0,0,0.2);
}

.item-img {
	width: 100%;
	height: auto;
	object-fit: cover;
	cursor:pointer;	
}

.item-box {
	padding: 2px 5px 8px 5px;
}

.namaitem {
	margin-top:0;
	margin-bottom:0;
	font-size: 15px;
	cursor:pointer;
	height:39px;
}

.item-grid {
	width:100%;
	border-collapse:collapse;
	border-spacing:0;
}

.predisc{
	margin-top:0;
	margin-bottom:0;
	color:#9c9c9c;
	cursor: pointer;
	font-size: 18px;
}	

.rp, .harga, .pers {
	margin-top:0;
	margin-bottom:0;
	height:38px;
	color:#ff0000;
	cursor: pointer;
}

.harga {
	font-size: 18px;
}

.rp {
	color: #ff0000;
}

.rp, .pers {
	font-size: 18px;
}

.diskonfo {
	font-size: 11px;
	background: var(--pink);
	color:white;
	padding: 5px;
}

.order {
	border: 1px solid #FFCBA5;
	background: #F44336;
	color: white;
	width: 100%;
	border-radius: 5px;
	font-size: 80%;
	padding: 8px;
}

.popupbg {
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	background-color: black; 
	visibility : hidden;
	transition: all 0.5 linear;
	-webkit-transition: same!
	-moz-transition: same!
	-o-transition: same!
}

.open-popupbg {
	visibility : visible;
	opacity : 0.7;
	z-index : 998;
}

.spopupbg {
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	background-color: black; 
	visibility : hidden;
	transition: all 0.5 linear;
	-webkit-transition: same!
	-moz-transition: same!
	-o-transition: same!
}

.open-spopupbg {
	visibility : visible;
	opacity : 0.7;
	z-index : 1000;
}

.filterbg {
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	background-color: black; 
	visibility : hidden;
	transition: all 0.5 linear;
	-webkit-transition: same!
	-moz-transition: same!
	-o-transition: same!
}

.filterbg.close {
	visibility : visible;
	opacity : 0.7;
	z-index : 995;
}

.popup {
	width :22%;
	height : auto;
	background : #F3C3B0;
	position : fixed;
	text-align : center;
	border-radius : 6px;
	transform : translate (-50px, -50px) scale(0,1);
	top :0;
	left : 0;
	right:0;
	margin:auto;
	color: #333;
	visibility : hidden;
	border-top : black solid 1px;
	border-left : black solid 1px;
	font-family:arial;
}

.open-popup {
	visibility : visible;
	transform : translate (-50px, -50px) scale(1);
	top :20%;
	position : fixed;
	text-align : center;
	z-index : 999;
}

.delpopup {
	width : 20%;
	/* height : 200px; */
	background: #F0B49D;
	border-radius : 6px;
	position : fixed;
	text-align : center;
	transform : translate (-50px, -50px) scale(0,1);
	top :0;
	left : 0;
	right: 0;
	margin:auto;
	color: #333;
	box-shadow: 0 5px 30px rgba(0, 0, 0, 0.2);
	visibility : hidden;
	z-index : 999 ;
}

.delpopupheader {
	background : #a21408 ;
	width : 100%;
	height : 22px;
	padding-top:0;
}	

.open-delpopup {
	visibility : visible;
	transform : translate (-50px, -50px) scale(1);
	top :30%;
}

.canceldel {
	border : 1px solid #a21408;
	width : 45%;
	margin-top : 14px;
	margin-bottom : 14px;
	height : 40px;
}

.savedel {
	background : #a21408;
	width : 45%;
	border : 1px black;
	color : white;	
	margin-top : 14px;
	margin-bottom : 14px;
	margin-left:10px;
	height : 40px;	
	margin-left:5px;
}

.userpopup {
	width :22%;
	height : auto;
	background : #F3C3B0;
	position : fixed;
	text-align : center;
	border-radius : 6px;
	transform : translate (-50px, -50px) scale(0,1);
	top :0;
	left : 0;
	right:0;
	margin:auto;
	color: #333;
	visibility : hidden;
	border-top : black solid 1px;
	border-left : black solid 1px;
	font-family:arial;
}

.open-userpopup {
	visibility : visible;
	transform : translate (-50px, -50px) scale(1);
	top :20%;
	position : fixed;
	text-align : center;
	z-index : 999;
}

.expopup {
	width : 18%;
	height : auto;
	background : #efefef;
	position : fixed;
	text-align : center;
	border-radius : 6px;
	transform : translate (-50px, -50px) scale(0,1);
	top :0;
	left : 0;
	right:0;
	margin:auto;
	color: #333;
	visibility : hidden;
	border-top : black solid 1px;
	border-left : black solid 1px;
	font-family:arial;
}

.open-expopup {
	visibility : visible;
	transform : translate (-50px, -50px) scale(1);
	top :20%;
	position : fixed;
	text-align : center;
	z-index : 1001;
}

#expopupheader {
	background : #efefef ;
	width : 100%;
	margin-bottom : 8px;
	z-index: 10;
	text-align : right;
	border-top-right-radius : 6px;
	border-top-left-radius : 6px;
}

.namaitempop {
	font-weight : bolder;
	color: black;
	font-size : 20px;
	text-shadow : 0 0 3px #F3CEB0;
	width:100%;
	display:block;
	padding:0 2px;
}

.hrgitempop {
	font-weight : bolder;
	font-size : 20px;
	text-shadow : 0 0 3px #F3CEB0;
	color: #ff0000;	
	display:block;
}

.hrgitempop-with-style {
	color: #9c9c9c;
	text-decoration: line-through;
}

.hrgitempop-with-extra-style {
	color: #ff0000;
}

.hargaitem-with-style {
	color: #9c9c9c!important;
	text-decoration: line-through;
	margin-bottom:0px!important;
}

.harganetitem-with-extra-style {
	color: #ff0000;
}

#popupheader {
	background : #E5A186 ;
	width : 100%;
	margin-bottom : 10px;
	z-index: 10;
	text-align : right;
	border-top-right-radius : 6px;
	border-top-left-radius : 6px;
}

.qtyminus, .qtyplus {
	border-radius : 100px;
	border: 1px solid #ff7b7b;
	font-size : 22px;
	padding : 7px 15px;
	background:#ff7b7b;
	color:white;
}

.qty {
	font-size : 16px;
	margin: 0 6px;
	font-weight : bolder;
	text-align: center;
	white-space: nowrap;
	border: 1px solid #ff7b7b;
	padding:5px 0;
}

.qty:focus {
	outline : none;
}

.satuansel {
	width:100%;
	padding: 5px;
}

.satuansel:focus {
	outline: #D2B48C;
}

.popuptbl {
	width:94%;
	margin-left:10px;
	margin-bottom:25px;
	border-collapse:collapse;
}

.cancelitem {
	border : 1px solid #ff7b7b;
	width : 40%;
	height : 40px;
	margin-top: 5px;
	margin-bottom: 15px;
	font-weight: bolder;
	background: white;
}

.saveitem {
	background : var(--pink);
	width : 40%;
	border : 1px black;
	color : white;	
	height : 40px;
	margin-top: 5px;
	margin-bottom: 15px;
	font-weight: bolder;
}

.cancel-btn {
	border : 1px solid #9c9c9c;
	width : 40%;
	height : 40px;
	margin-top: 5px;
	margin-bottom: 15px;
	font-weight: bolder;
}

.save-btn {
	background : #9c9c9c;
	width : 40%;
	border : 1px black;
	color : white;	
	height : 40px;
	margin-top: 5px;
	margin-bottom: 15px;
	font-weight: bolder;
}

#form-order {
	height:calc(100% - 68px);
}

.keranjang {
	width:100%;
	display: flex;
	justify-content: center;
	margin-top: 10px;
	height: calc(100% - 80px);	
}

.keranjang-two {
	width:100%;
	display: flex;
	justify-content: center;
	margin-top: 10px;
	height: calc(100% - 72px);	
}

.keranjang-container {
	width:80%;
	background: white;
	-webkit-box-shadow: 0px 0px 0px 0 rgba(0,0,0,0.14), 0 0px 0px 0px rgba(0,0,0,0.12), 0 0px 5px 0 rgba(0,0,0,0.2);
	box-shadow: 0px 0px 0px 0 rgba(0,0,0,0.14), 0 0px 0px 0px rgba(0,0,0,0.12), 0 0px 5px 0 rgba(0,0,0,0.2);
	height: calc(100% - 60px);
	overflow-y:scroll;
}

.keranjang-container-two {
	width:80%;
	background: white;
	-webkit-box-shadow: 0px 0px 0px 0 rgba(0,0,0,0.14), 0 0px 0px 0px rgba(0,0,0,0.12), 0 0px 5px 0 rgba(0,0,0,0.2);
	box-shadow: 0px 0px 0px 0 rgba(0,0,0,0.14), 0 0px 0px 0px rgba(0,0,0,0.12), 0 0px 5px 0 rgba(0,0,0,0.2);
	height: 100%;
}

.cart-header {
	height:45px;
}

.cart-content {
	width: 100%;
	height: calc(100% - 227px);	
	overflow-y:scroll;
	border-top: 1px solid black;
	padding-top: 12px;
}

.cart-content-two {
	width: 100%;
	height: calc(100% - 227px);	
	overflow-y:scroll;
	border-top: 1px solid black;
	padding-top: 12px;
}

input[type="checkbox"] {
	transform: scale(1.3);
}

.check-width {
	width:5%;
}

.namakeranjang {
	padding-left:7px;
	font-size: 20px;
	margin-top: 10px;
	margin-bottom: 7px;
	float:left;
	width: calc(50% - 7px);
}

.cart-sel {
	float:right;
	margin-top:10px;
	margin-bottom:7px;
	width: 50%;
}

.cart-user {
	padding: 4px 3.5px;
	margin: 0 10px 6.5px 10px;
	float:right;
}

.cart-user:focus {
	outline:none;
	border:1px solid black;
	background: none;
}

.cart-row{
	width:100%;
	border-spacing: 0;
	border-collapse: collapse;
	margin-bottom: 10px;
	font-size:14.5px;
}

.cartfo {
	padding-left:10px;
}

.cart-item {
	font-size:18px;
}

.pesanan-item {
	font-size:18px;
}

.cartimg-width {
	width:8%;
}

.cart-image{
	width: 100%; 
	height: 80px; 
	object-fit: fill;
	cursor:pointer;
}

.cart-hide{
	display:block;
}

.cart-qty {
	font-size : 15px;
	margin: 0;
	font-weight : 500;
	text-align: center;
	white-space: nowrap;
	border: 1px solid #ff7b7b;
	width:30%;
	padding:9px 0 6px 0;
}

.cart-qty:focus {
	outline : none;
}

.cartminus, .cartplus {
	border: 1px solid #ff7b7b;
	font-size : 18px;
	width:10%;
	padding: 5px 5px;
	background:#ff7b7b;
	color:white;
	border-radius:10px;
}

.hide {
	display:none;
}

.hide-pc{
	display : none;
}

.hide-pc-tbl{
	display : none;
}

.cart-unit {
	width:20%;
	padding: 9px 0 6px 0;
	font-size : 15px;
	text-align: center;
	border: 1px solid #ff7b7b;
	background:white;
}

.cart-unit:focus {
	outline:none;
	border: 1px solid #ff7b7b;
}

.cart-price {
	color: #ff0000;
	font-weight:bolder;
	font-size: 16px;
}

.btn-del {
	margin-bottom: 10px;
	font-size:16.5px;
	background: #e70000;
	border: aliceblue;
	color: white;
	padding: 3px 9px;
	margin-right:2px;
}

.cart-footer {
	width:80%;
	padding: 0;
	border-top: 1px solid black;
	position:absolute;
	background:white;
	-webkit-box-shadow: 0px 0px 0px 0 rgba(0,0,0,0.14), 0 0px 0px 0px rgba(0,0,0,0.12), 0 0px 5px 0 rgba(0,0,0,0.2);
	box-shadow: 0px 0px 0px 0 rgba(0,0,0,0.14), 0 0px 0px 0px rgba(0,0,0,0.12), 0 0px 5px 0 rgba(0,0,0,0.2);
}

.cart-footer-two {
	width:100%;
	padding: 0;
	border-top: 1px solid black;
	position: sticky;
		bottom: 0;
	background:white;
	-webkit-box-shadow: 0px 0px 0px 0 rgba(0,0,0,0.14), 0 0px 0px 0px rgba(0,0,0,0.12), 0 0px 5px 0 rgba(0,0,0,0.2);
	box-shadow: 0px 0px 0px 0 rgba(0,0,0,0.14), 0 0px 0px 0px rgba(0,0,0,0.12), 0 0px 5px 0 rgba(0,0,0,0.2);
}

.cart-footer-in {
	width:100%;
	border-spacing: 0;
	border-collapse: collapse;
}

.check-marg {
	padding-left:22px;
	width: 25%;
}

.in-catatan {
	width:100%;
	height:30px;
	resize:none;
	text-indent:2px;
}

.cart-note {
	font-size:14px;
}

.in-catatan:focus {
	outline:none;
	border:1px solid black;
}

.checkout-btn {
	background : var(--pink);
	border:none;
	padding:5px;
	width:100%;
	color: white;
	height: 40px;
	font-weight: bolder;
	margin-top:15px;
}

.total-cart {
	color : #F44336;
	font-weight: bolder;
}

.user {
	height:calc(100% - 97px);
	width:100%;
	display: flex;
	justify-content: center;
	margin-top: 20px;
	margin-bottom: 20px;
}

.user-container {
	width:80%;
	background: white;
	-webkit-box-shadow: 0px 0px 0px 0 rgba(0,0,0,0.14), 0 0px 0px 0px rgba(0,0,0,0.12), 0 0px 5px 0 rgba(0,0,0,0.2);
	box-shadow: 0px 0px 0px 0 rgba(0,0,0,0.14), 0 0px 0px 0px rgba(0,0,0,0.12), 0 0px 5px 0 rgba(0,0,0,0.2);
	height: calc(100% - 47px);
}

.user-header {
	background: var(--pink);
}

.passtbl {
	width:calc(100% - 15px);
	margin-left: 5px;
	margin-top: 10px;
	margin-bottom: 35px;	
}

.username {
	color: black;
	font-weight: bolder;
	padding: 18px 0 18px 10px;
	margin-top:0;
	font-family:arial;
	font-size: 25px;
	background: var(--pink);
	width:calc(100% - 10px);
}

.tambah-user {
	margin-top:0;
	border-radius: 6px;
	font-family:arial;
	float:right;
	padding:7px;
	background:white;
	border:1px solid black;
}

.tambahpopup {
	width : 55%;
	height : auto;
	background : #efefef;
	position : fixed;
	text-align : center;
	border-radius : 6px;
	transform : translate (-50px, -50px) scale(0,1);
	top :0;
	left : 0;
	right:0;
	color: #333;
	visibility : hidden;
	border-top : black solid 1px;
	border-left : black solid 1px;
	font-family:arial;
	margin:auto;
	padding:5px;
}

.open-tambahpopup {
	visibility : visible;
	transform : translate (-50px, -50px) scale(1);
	top :15%;
	position : fixed;
	text-align : center;
	z-index : 999;
}

.tambah-akun {
	font-size: 30px;
	text-align:left;
	font-weight: 520;
	margin-bottom:0;
	margin-top:10px;
}

.user-new {
	text-align:left;
	margin-top:20px;
}

#usernamebaru {
	background: none;
	border: none;
	border-bottom: 1.5px solid black;
	margin-left: 5px;
	width: calc(100% - 47px);
	font-size:16px;
}

#usernamebaru:focus {
	outline:none;
	border:none;
	border-bottom: 1.5px solid black;
}

.user-tbl {
	max-height:25vh;
	overflow:auto;
	border-bottom: 1.5px solid #c0c0c0;
}

.list-user {
	width: 100%;
	border-spacing:0;
	font-size:14px;
}

.list-user thead {
	display: table-header-group;
	vertical-align: middle;
	border-color: inherit;
}

.list-user th {
	border-bottom: 1.5px solid #c0c0c0;
	padding: 5px 2px;
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	background: #efefef;
	vertical-align: middle;
	font-size:15px;
}

.list-user td {
	border-bottom: 1.5px solid #c0c0c0;
	padding: 10px 0;
}

.user-content{
	width:100%;
	border-spacing: 0;
	border-collapse: collapse;
	margin-bottom: 10px;
	margin-top: 17px;
}

.user-content tr{
	border-bottom: 1px solid #dedede;
	cursor:pointer;
}

.user-name {
	margin-left: 8px;
	font-size:18px;
}

.in-user {
	padding: 5px;
	width: calc(100% - 25px);
}

.in-pass {
	height: 24px;
	width: 100%;
	margin: 10px 0 5px 0;
	padding-right: 31px;
}

.eyeiconpop {
	font-size:18px;
	position:absolute;
	left:90%;
	background:white;
}

.searchhistory {
	width:80%;
	position:absolute;
	height: calc(100% - 72px);	
}

.pesanan {
	width:100%;
	display: flex;
	justify-content: center;
	margin-top: 12px;
	height: calc(100% - 72px);		
}

.pesanan-container {
	width:100%;
	background: white;
	-webkit-box-shadow: 0px 0px 0px 0 rgba(0,0,0,0.14), 0 0px 0px 0px rgba(0,0,0,0.12), 0 0px 5px 0 rgba(0,0,0,0.2);
	box-shadow: 0px 0px 0px 0 rgba(0,0,0,0.14), 0 0px 0px 0px rgba(0,0,0,0.12), 0 0px 5px 0 rgba(0,0,0,0.2);
	height: calc(100% - 60px);
}

.pesanan-head {
	text-indent: 10px;
	padding-bottom: 10px;
	border-bottom: 1px solid black;
	font-size: 20px;
	margin-top: 6px;
	margin-bottom: 0px;
	padding-top: 9px;
}

.tabs {
	position: relative;
	margin: 0;
	background:#F44336 ;
	width:100%;
	height: calc(100% - 60px);	
}

.tabs::before,
.tabs::after {
	content: "";
	display: table;
}

.tabs::after {
	clear: both;
}

.filter-pesanan-mb {
	position: initial;
	display: none;
	grid-template-columns:1fr 1fr;
	line-height: 1.75em;
	height: 4em;
	padding: 0;
	background: var(--pink);
	color: #fff;
	top: 0;
	transition: all 0.25s;
	text-align:center;
	font-weight:bolder;
	font-family:Arial;
	color: white;
	border-bottom: 0;
	transition: all 0.35s;
	z-index: 1;
	top: -0.1rem;
	padding-top:5px;
}

.pesanan-lower-mb {
	position: relative;
	display: none;
	grid-template-columns:1fr 1fr 1fr;
	line-height: 1.75em;
	height: 2.5em;
	padding: 0;
	background: var(--pink);
	color: #fff;
	top: 0;
	transition: all 0.25s;
	text-align:center;
	font-weight:bolder;
	font-family:Arial;
	-webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px 0px rgba(0,0,0,0.12);
	box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px 0px rgba(0,0,0,0.12);
	color: white;
	border-bottom: 0;
	transition: all 0.35s;
	z-index: 0;
	top: 0rem;
	padding-top:5px;
	padding-left:14px;
	padding-right:14px;
	padding-bottom:20px;
}

.filter-tgl {
	position: relative;
	display: grid;
	grid-template-columns:1fr 1fr 1fr 1fr 1fr;
	line-height: 1.75em;
	height: 4em;
	padding: 0;
	background: var(--pink);
	color: #fff;
	top: 0;
	transition: all 0.25s;
	text-align:center;
	font-weight:bolder;
	font-family:Arial;
	-webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);
	box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);
	color: white;
	border-bottom: 0;
	transition: all 0.35s;
	z-index: 1;
	top: -0.1rem;
	padding-top:5px;
}

.pesanan-select{
	background: white;
	color:black;
	padding:5px;
	border:1px solid black;
	border-radius:5px;
	margin-top:17px;
	width:calc(100% - 6px);
	padding: 0 3px;
	height: 25px;
}

.pesanan-select:focus {
	outline:none;
	border:1px solid black;
}

.form-cari {
	width:76%;
}

.cari-btn {
	background:#0fd2e1;
	color:white;
	padding:3px 25px;
	border:1px solid white;
	border-radius : 5px;
	margin-top:17px;
}

.cari-btn-mb {
	background:#0fd2e1;
	color:white;
	padding:3px 3px;
	border:1px solid white;
	border-radius : 5px;
	height: 25px;
}

.tab-content {
	z-index: 1;
	top: 3.75em;
	left: 0;
	padding: 0rem;
	background: #e97878;
	color: #2c3e50;
	border-bottom: 0.25rem solid #bdc3c7;
	opacity: 0;
	transition: all 0.35s;
	width: 100%;
	overflow: auto;
	height: calc(100% - 50px);	
	z-index: 1;
	opacity: 1;
	transition: all 0.35s;
}

.pesananfil-tgl {
	text-align:center;
	width:80%;
	padding-top:3px;
}

.pesanan-row{
	width:100%;
	border-spacing: 0;
	border-collapse: collapse;
	margin: 0 ;		
	margin-top: 5px;
	border-top: 1px solid lightgray;
	border-bottom: 1px solid lightgray;
	background: #fff;
}

.pesanan-row tr{
	border-bottom: 1px solid lightgray;
}

.pesanan-date {
	margin:10px;
	font-size: 17px;
}

.pesanan-inv {
	margin:10px;
	font-size: 17px;
}

.pesananimg-width {
	width:9.5%;
	padding-left:10px;
}

.pesanan-image{
	width: 100%; 
	height: 90px; 
	object-fit: fill;
	border:1px solid black;
}

.pesanan-unit, .pesanan-x, .pesananhrg-satuan {
	font-size: 16px;
	margin-left: 10px;
}

.pesanan-price {
	font-size: 20px;
	color: black; 
}

.pesanan-tots {
	margin:10px;
	font-size: 20px;
}

.pesanan-total {
	margin:10px;
	font-size: 20px;
	color: #F44336;
}

.pesanan-rp {
	vertical-align:top;
	font-size: 20px;
	padding-top:29px;
}

.pesanan-ppn {
	margin:10px;
	font-size: 20px;
}

.pesanan-width {
	width : 70%;
	padding-right:5px;
}

.pagePC-content {
	width:100%;
	background:white;
	-webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);
	box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);
	margin-top: 15px;
	padding-top:12px;
	margin-bottom: 60px;
	display: grid;
	grid-template-columns: 20% 31% 49%;
}

.image-container {
	height:100%;
	padding-left:5px;
}

.image-wrapper {
	position : relative;
}

.custom-controls {
	position: absolute;
	top: 50%;
	width:100%;
	left: 0;
	right: 0;
	transform: translateY(-50%);
	text-align: center;
}

img.img-responsive.main-img {
	width:100%;
	height: 310px;
	object-fit:cover;
}

img.img-responsive.other-img {
	width:100%;
	height: 95px;
	object-fit:cover;
}

/* a.mainimg-box { */
	/* width: 98%; */
/* } */

a.otherimg-box {
	width: calc(94.5% / 3);
}

#custom-prev-button {
	display: inline-block;
	padding: 8px 15px;
	float:left;
	opacity: 0.8;
	border-radius:10px;
	border:1px solid black;
}

#custom-next-button {
	display: inline-block;
	padding: 8px 15px;
	float:right;
	opacity: 0.8;
	border-radius:10px;	
	border:1px solid black;
}

.page-info {
	background: white;
	margin-left:15px;
}

.product-name {
	font-size: 22px;
	margin-bottom:0;
}

.disc-price {
	font-size: 24px;
	margin-top:5px;
	color:#F44336;
	margin-bottom: 16px;
}

.product-price {
	font-size: 27px;
	margin-top:5px;
	color:#F44336;
	margin-bottom: 0px;
}

.cart-btn {
	padding: 10px;
	width: calc(50% - 20px);
	font-size:15px;
	background-color:rgba(255,0,0,0.1);
	border: 1px solid #F44336;
	margin-right: 10px;
	margin-bottom: 10px;
}

.buy-btn {
	padding: 11.5px;
	width: 200px;
	font-size:15px;
	color: white;
	background:#F44336;
	border: 1px solid gray;
}

.page-qty {
	width: 100%;
	margin-top:5px;
	margin-bottom: 26px;
	text-align:left;
}

.page-unit {
	width:20%;
	padding: 2px;
	font-size : 16px;
	text-align: center;
	border: 1px solid #ff7b7b;
	margin-left: 10px;
	background:white;
	padding: 5px 0;
}

.page-unit:focus {
	outline:none;
	border: 1px solid #ff7b7b;
}

.page-sisa {
	width:100%;
	text-align:left;
	font-weight: bolder;
	font-size: 16px;
	margin-top: 10px;
	margin-bottom:15px;
}

.page-konversi {
	margin:0;
	font-size: 14px;
	width:100%;
	border-collapse:collapse;
}

.btn-margin {
	display : none;
}

input.pesananfil-tgl:focus, input.in-user:focus, input.in-pass:focus {
	border: 1px solid red;
	outline:none;
}

.hide-text {
	font-size:14px;
}

.passawal {
	margin:10px 0 15px 0;
}

.z-hide {
	z-index: 0;
}

.pagination-div {
	padding-bottom:80px;
	display:flex;
	justify-content: center;
}

.pagination {
	display: inline-block;
	width:100%;
	text-align:center;
}

.pagination li {
	list-style-type: none;
	border-radius: 2px;
	text-align: center;
	vertical-align: top;
	height: 30px;
	display: inline-block;
	border:1px solid #c3c3c3;
	background:white;
}

.pagination li.disabled a {
	cursor: default;
	color: #999;
}

.pagination li a {
	color: #444;
	display: inline-block;
	font-size: 1.2rem;
	padding: 0 10px;
	line-height: 30px;
}

.pagination li.active {
	background-color: #ee6e73;
}

.pagination li.active a {
	color:white;
}

i.fa.fa-user-circle {
	font-size: 30px;
}

.landscape-message {
	display: none;
	justify-content:center;
	height: 100%;
	width:100%;
	text-align:center;
}		

.landscape-msg {
	margin:auto;
	width:100%;
	font-weight:bolder;
}

i.fa.fa-rotate-left {
	font-size: 26px;
	margin-left:5px;
}

.waves-effect {
	position: relative;
	cursor: pointer;
	display: inline-block;
	overflow: hidden;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
	vertical-align: middle;
	z-index: 1;
	-webkit-transition: .3s ease-out;
	transition: .3s ease-out;
}


@media screen and (max-width:768px){
	.hide-text{
		display:none;
	}
	nav .navitem-wrapper {
		height:77px;
	}
	.nav-lower {
		padding-left:5px;
	}
	.navbaritem-fixed {
		height:38px;
		line-height:38px;
	}
	.navbar-fixed {
		height:44px;	
		line-height:44px;	
	}
	.navbar-fixed nav {
		height:47px;
	}
	.navbar-pesanan {
		height: 47px;
		line-height: 47px;
	}
	.navbar-pesanan nav {
		height:47px;
	}
	.nama {
		text-align:left;
		width:calc(100% - 2rem - 10px);
	}
	.mar {
		margin-right: 10px;
	}
	.product-content{
		grid-template-columns: 1fr 1fr 1fr;
	}
	.namaitem {
		font-size: 85%;
	}
	.hide{
		display:none;
	}
	.order{
		font-size:75%;
	}
	.harga, .rp, .pers, .predisc{
		font-size:100%;
	}
	.popup, .userpopup, .delpopup {
		width: 80%;
	}
	.expopup {
		width: 80%;
	}
	.tambahpopup {
		width: 90%;
	}
	.filter-btn {
		font-size:12px;
		margin-right:0;
	}
	.filter-bar {
		width:50%;
		right:0;
		left:50%;
	}
	#form-order {
		height:100%;
	}
	.keranjang{
		width: 100%;
		margin-top: 10px;
		padding-left: 10px;
		padding-right: 10px;
		padding-bottom: 32px;
		height:100%;
	}
	.keranjang-two{
		width: 100%;
		height:100%;
		margin-top:0;
	}
	.keranjang-container {
		width:100%;
		height: calc(100% - 25px);
		margin-bottom: 0;
	}
	.keranjang-container-two {
		width:100%;
		height: 100%;
		margin-bottom: 0;
		margin-top:0;
	}
	table#listcart td {
		padding-bottom:8px;
	}
	.namakeranjang {
		margin-bottom:0;
	}
	.cart-user {
		margin-bottom: 3px;
	}
	.cart-btn {
		width:calc(50% - 20px);
	}
	.cart-footer {
		width:calc(100% - 20px);
	}
	.cart-footer-two {
		padding-bottom:45px;
	}
	.cart-content-two {
		height: calc(100% - 47px);
	}
	.hide-mb {
		display:none;
	}
	.hide-pc {
		display : block;
	}
	.hide-pc-tbl {
		display : table;
	}
	.cart-image {
		width: 100%;
		height: 72px;
	}
	.cart-sisa, .cart-item,
	.cart-price, .pesanan-item {
		font-size:90%;
	}
	.cart-sisa {
		font-size: 62%;
		text-align:center;
	}
	.cart-qty {
		text-align:center;
	}
	.cart-unit,.cart-qty, .page-unit 	{
		font-size:82%;
	}
	.cart-unit, .cart-qty, .page-unit{
		width: 25%;
	}
	.cartfo {
		padding-left:5px;
	}
	.cartminus, .cartplus {
		width:14%
	}	
	.cart-note {
		font-size: 90%;
	}
	.user-container {
		width:100%;
		height: 100%;
		margin-bottom: 0;
	}
	.user {
		width: calc(100% - 9.2px);
		margin-top: 10px;
		padding-left: 9.2px;
		padding-bottom:10px;
	}
	.user-name {
		font-size:95%;
	}
	.akun .container {
		font-size:90%;
	}
	.searchhistory {
		width:calc(100% - 16px);
	}
	.pesanan {
		width: 100%;
		margin-top: 10px;
		padding-left: 6px;
		padding-right: 6px;
		padding-bottom:10px;
	}
	.pesanan-container {
		width:100%;
	}
	.filter-tgl{
		grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
	}
	.pesananfil-tgl {
		width: 93%;
	}
	.pesanan-image {
		width: 100%;
		height: 72px;
	}
	.pesanan-qty, .pesanan-unit, .pesanan-x, .pesananhrg-satuan,
	.pesanan-price, .pesanan-total, .pesanan-ppn, .pesanan-rp {
		font-size:90%;
	}
	.pesanan-date, .pesanan-inv {
		font-size:82%;		
	}
	 .pesanan-tots {
		 font-size: 85%;
	 }
	.pesanan-unit, .pesanan-x, .pesananhrg-satuan {
		margin-left:0;
	}
	.cart-footer {
		font-size:85%;
	} 
	.btn-del {
		margin-right:10px;
	}
	.cart-footer-in {
		font-size:90%;
	}
	.disc-price {
		font-size:20px;
	}
	.product-price {
		font-size:24px;
	}
	.filter-pesanan-mb {
		display:grid;
	}
	.pesanan-lower-mb {
		display:grid;
		padding-left:5px;
		padding-right:5px;
	}
	.pesanan-select {
		margin-top:0;
		padding: 0 3px 0 1px;
		width: calc(100% - 4px);
	}
	.tabs {
		max-height : calc(100% - 42px);
	}
}	

@media only screen and (min-height:1px) and (max-height: 502px) {
	img.img-responsive.main-img {
		height: 139px!important;
	}
}	

@media only screen and (min-height:475px) and (max-height: 484px) {
	.product-page {
		height: calc(100% - 12px);
	}
}

@media only screen and (min-height:485px) and (max-height: 494px) {
	.product-page {
		height: calc(100% - 20px);
	}
}

@media only screen and (min-height:495px) and (max-height: 502px) {
	.product-page {
		height: calc(100% - 30px);
	}
}	

@media only screen and (min-height:503px) and (max-height: 520px) {
	.product-page {
		height: calc(100% - 52px);
	}
	img.img-responsive.main-img {
		height: 139px!important;
	}
}	

@media only screen and (min-height:521px) and (max-height: 526px) {
	.product-page {
		height: calc(100% - 60px);
	}
}

@media only screen and (min-height:528px) and (max-height:535px) {
	.product-page {
		height: calc(100% - 47px);
	}
}	

@media only screen and (min-height:536px) and (max-height:540px) {
	.product-page {
		height:90%;
	}
}	

@media only screen and (min-width:1px) and (max-width: 640px) {
	.pesanan-select {
		margin-top:0;
	}
	.tab-content {
		height: calc(100% - 47px - 2.5em);
	}
	.checkout-btn {
		margin-top:0;
	}
	.product-container {
		width : 100%;
		left:0;
		right:0;
	}
	.product-page-container {
		width : calc(100% - 14px);
		left:7px;
		right:7px;
	}
	.product-content {
		padding-top:50px;
	}
	.filter-btns {
		bottom:96px;
	}
	.check-width {
		width:7%;
	}
}	

@media only screen and (min-width:1px) and (max-width: 1920px) { 
	p.predisc.discprice {
		height:38px;
	}
	.td-space {
		padding-bottom:calc(20px + 58px);
	}
}

@media only screen and (min-width:1px) and (max-width: 329px) { 
	.popup, .userpopup, .delpopup {
		width: 95%;
	}
}

@media only screen and (min-width:330px) and (max-width: 375px) { 
	.popup, .userpopup, .delpopup {
		width: 93%;
	}
}

@media only screen and (min-width:381px) and (max-width: 427px) { 
	.popup, .userpopup, .delpopup {
		width: 75%;
	}
	.expopup {
		width: 75%;
	}
}

@media only screen and (min-width:428px) and (max-width: 505px) { 
	.popup, .userpopup, .delpopup {
		width: 65%;
	}
	.expopup {
		width: 65%;
	}
}

@media only screen and (min-width:506px) and (max-width: 541px) { 
	.popup, .userpopup, .delpopup {
		width: 60%;
	}
	.expopup {
		width: 60%;
	}
}

@media only screen and (min-width:542px) and (max-width: 601px) { 
	.popup, .userpopup, .delpopup {
		width: 55%;
	}
	.expopup {
		width: 55%;
	}
}

@media only screen and (min-width:602px) and (max-width: 639px) { 
	.popup, .userpopup, .delpopup {
		width: 50%;
	}
	.expopup {
		width: 50%;
	}
}

@media only screen and (min-width:640px) and (max-width: 680px) { 
	.popup, .userpopup, .delpopup {
		width: 45%;
	}
	.expopup {
		width: 45%;
	}
}

@media only screen and (min-width:681px) and (max-width: 816px) { 
	.popup, .userpopup, .delpopup {
		width: 40%;
	}
	.expopup {
		width: 40%;
	}
}

@media only screen and (min-width:817px) and (max-width: 952px) { 
	.popup, .userpopup, .delpopup {
		width: 35%;
	}
	.expopup {
		width: 35%;
	}
}

@media only screen and (min-width:953px) and (max-width: 1160px) { 
	.popup, .userpopup, .delpopup {
		width: 30%;
	}
	.expopup {
		width: 30%;
	}
}

@media only screen and (min-width:1161px) and (max-width: 1404px) { 
	.popup, .userpopup, .delpopup {
		width: 25%;
	}
	.expopup {
		width: 25%;
	}
}

@media only screen and (min-width:475px) and (max-width: 505px) { 
	.item-img {
		height:auto;
	}
}

@media only screen and (min-width:1px) and (max-width: 315px) { 
	.expopup {
		width: 80%;
	}
	a.otherimg-box {
		width: calc(93.8% / 3);
	}
	.page-unit {
		width: 28%;
	}
}

@media only screen and (min-width:305px) and (max-width: 365px) { 
	.search {
		width: 82%;
		padding-right:2px;
	}
	.search-button {
		width: 11%;
		right:26%;
		top:57%;
	}
}

@media only screen and (min-width:366px) and (max-width: 768px) { 
	.search {
		width: 82.5%;
		padding-right:2px;
	}
	.search-button {
		width: 11%;
		right:25.6%;
		top:57.5%;
	}
}

@media only screen and (min-width:769px) and (max-width: 830px) { 
	.namaitem {
		height : 54px;
	}
}

@media only screen and (min-width:1px) and (max-width: 304px) { 
	button.nav-button.cart {
		padding:0;
	}
	.search {
		width: 79.5%;
	}
	.search-button {
		width: 11%;
		right:28%;
	}
	.container {
		width: 96%;
	}
	.mar {
		margin-right: 5px;
	}	
	.in-pass{
		width : 80%;
	}
	.in-user{
		width : 93%;
	}
	.tambah-user {
		display:block;
		float:none;
		margin-top:5px;
	}
	.cartimg-width {
		width:15%;
	}
	span.cart-price.disc {
		display: block;
	}
	span.cart-hide {
		display:none;
	}
	.passtbl {
			width:100%;
	}
	.saveitem {
		width: 45%;
	}
	.cancelitem {
		width: 45%;
	}
}

@media only screen and (min-width:1px) and (max-width: 292px) { 
	.namakeranjang {
		width: 100%;
		float:none;
	}
	.cart-sel {
		width:100%;
		float:none;
	}
	.cart-user {
		float:none;
		padding: 4px 2.5px;
	}
}

@media only screen and (min-width:1px) and (max-width: 306px) { 
	.cart-unit {
		width: 26%;
	}
}

@media only screen and (min-width:1px) and (max-width: 374px) {
	.badge {
		font-size: 63%;
	}
	.popup, .userpopup {
		width:95%;
		top:15%;
	}
}

@media only screen and (min-width:375px) and (max-width: 414px) {
	.popup {
		width:90%;
	}
}	

@media only screen and (min-width:1px) and (max-width: 359px) {
	.pesananimg-width {
		width:24%;
		padding-left:5px;
	}
}	

@media only screen and (min-width:360px) and (max-width: 426px) {
	.pesananimg-width {
		width:20%;
		padding-left:5px;
	}
}	

@media only screen and (min-width:279px) and (max-width: 284px) {
	.cartminus, .cartplus {
		width:12.5%;
	}
	.check-marg {
		padding-left:5px!important;
	}
}

@media only screen and (min-width:1px) and (max-width: 292px) {
	.cart-content-two {
		height: calc(100% - 75px);
	}
}	

@media only screen and (min-width:1px) and (max-width: 426px) {
	.space {
		display:none;
	}
	.product-content {
		width:calc(100% - 10px);
	}
	.product-content{
		grid-template-columns: 50% 50%;
	}
	.pesanan-width {
		width:45%
	}
	.pesananhrg-width {
		width:32%;
	}
}

@media only screen and (min-width:427px) and (max-width: 485px) {
	.pesananimg-width {
		width:18%;
	}
	.pesanan-width {
		width:47%
	}
	.pesananhrg-width {
		width:32%;
	}
}	

@media only screen and (min-width:581px) and (max-width: 640px) {
	.pesananimg-width {
		width:13%;
	}
	.pesanan-width {
		width:47%
	}
	.pesananhrg-width {
		width:38%;
	}
}

@media only screen and (min-width:486px) and (max-width: 580px) {
	.pesananimg-width {
		width:15%;
	}
	.pesanan-width {
		width:47%
	}
	.pesananhrg-width {
		width:35%;
	}
}

@media only screen and (min-width:427px) and (max-width: 640px) {
	.space {
		display:none;
	}
	.product-content {
		width:100%;
	}
}

@media only screen and (min-width:769px) and (max-width: 1320px) {
	.rp, .pers, .harga, .predisc {
		font-size:100%;
	}
}	

@media only screen and (min-width:769px) and (max-width: 962px) {	
	.product-content{
		grid-template-columns: 1fr 1fr 1fr 1fr;
	}	
}

@media only screen and (min-width:963px) and (max-width: 1320px) {	
	.product-content{
		grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
	}	
}

@media only screen and (min-width:769px) and (max-width: 867px) {	
	.item-img {
		height: auto;
	}
}

@media only screen and (min-width:520px) and (max-width: 640px) {
	.product-page {
		height: calc(100% - 60px);
	}
}
	
@media only screen and (min-width:1px) and (max-width: 640px) {
	.product-container {
		height: calc(100% - 54px);
	}
	.pagePC-content {
		width: 100%;
		display: block;
		padding-left:0;
		padding-right:0;
		margin-bottom: 0;
		padding-top:7px;
		margin-top:15px;
	}
	.image-container {
		height: 207px;
	}
	img.img-responsive.main-img {
		height:207px;
		object-fit:scale-down;
	}
	.page-info {
		margin-left:10px;
		margin-right:10px;
	}
	.page-name {
		margin-top: 15px;
	}
	.page-qty {
		width:100%;
		margin-bottom:25px;
		text-align:center;
	}
	.page-konversi {
		text-align:left;
	}
	input#qty {
		width: 33%;
	}
	.page-unit {
		font-size:16px;
	}
	.page-sisa {
		text-align:center;
		margin-top:0;
		margin-bottom:5px;
	}
	.page-btn {
		margin-bottom: 0px;
	}
	.cart-btn {
		margin-bottom:17px;
	}
	.mainimg-box {
		width: 98%;
	}
	.otherimg-box {
		width: calc(94.5% / 3);
	}
	img.img-responsive.other-img { 
		width:100%;
	}
}	

@media only screen and (min-width:1px) and (max-width: 282px) {
	.check-marg {
		width:27%;
	}
}

@media only screen and (min-width:1px) and (max-width: 292px) {
	.namakeranjang {
		margin-bottom:0;
	}
	.cart-sel {
		margin-top:5px;
	}
	.cart-header {
		height: 65px;
	}
	.keranjang {
		padding-bottom:45px;
	}
}

@media only screen and (min-width:305px) and (max-width: 380px) {
	.cartimg-width {
		width:15%;
	}
}

@media only screen and (min-width:381px) and (max-width: 421px) {
	.cartimg-width {
		width:12%;
	}
}

@media only screen and (min-width:422px) and (max-width: 483px) {
	.cartimg-width {
		width:10%;
	}
}

@media only screen and (min-width:626px) and (max-width: 685px) {
	.cartimg-width {
		width:7%;
	}
}

@media only screen and (min-width:686px) and (max-width: 720px) {
	.cartimg-width {
		width:6.5%;
	}
}

@media only screen and (min-width:721px) and (max-width: 768px) {
	.cartimg-width {
		width:6%;
	}
}

@media only screen and (min-width:309px) and (max-width: 319px) {
	.cart-unit, .cart-qty {
		width:24%;
	}
}	

@media only screen and (min-width:285px) and (max-width: 320px) {
	.check-marg {
		padding-left:6.5px;
		padding-top: 5px;
	}
}	

@media only screen and (min-width:321px) and (max-width: 340px) {
	.check-marg {
		padding-left:8px;
		padding-top: 5px;
	}
}

@media only screen and (min-width:325px) and (max-width: 328px) {
	input#qty {
		width:31%!important;
	}
}	

@media only screen and (min-width:341px) and (max-width: 374px) {
	.check-marg {
		padding-left:8px;
	}
}

@media only screen and (min-width:375px) and (max-width: 424px) {
	.check-marg {
		padding-left:11px;
	}
}

@media only screen and (min-width:375px) and (max-width: 424px) {
	.check-marg {
		padding-left:11px;
	}
}

@media only screen and (min-width:425px) and (max-width: 452px) {
	.check-marg {
		padding-left:14px;
	}
}

@media only screen and (min-width:453px) and (max-width: 474px) {
	.check-marg {
		padding-left:16px;
	}
}

@media only screen and (min-width:475px) and (max-width: 482px) {
	.check-marg {
		padding-left:17px;
	}
}

@media only screen and (min-width:483px) and (max-width: 516px) {
	.check-marg {
		padding-left:20px;
	}
}

@media only screen and (min-width:517px) and (max-width: 540px) {
	.check-marg {
		padding-left:21px;
	}
}

@media only screen and (min-width:541px) and (max-width: 580px) {
	.check-marg {
		padding-left:23px;
	}
}

@media only screen and (min-width:541px) and (max-width: 580px) {
	.check-marg {
		padding-left:25px;
	}
}

@media only screen and (min-width:581px) and (max-width: 613px) {
	.check-marg {
		padding-left:25px;
	}
}

@media only screen and (min-width:614px) and (max-width: 630px) {
	.check-marg {
		padding-left:26px;
	}
}

@media only screen and (min-width:631px) and (max-width: 640px) {
	.check-marg {
		padding-left:27px;
	}
}

@media only screen and (min-width:641px) and (max-width: 680px) {
	.check-marg {
		padding-left:18px;
	}
}

@media only screen and (min-width:769px) and (max-width: 865px) {
	.check-marg {
		padding-left:9px;
	}
}

@media only screen and (min-width:866px) and (max-width: 1093px) {
	.check-marg {
		padding-left:12px;
		padding-top: 5px;
	}
}	

@media only screen and (min-width:1094px) and (max-width: 1280px) {
	.check-marg {
		padding-left:15.5px;
		padding-top: 5px;
	}
}

@media only screen and (min-width:1px) and (max-width: 314px) {
	.qtyminus, .qtyplus {
		padding: 3px 8px;
	}	
	.keranjang{
		padding-left: 5px;
		padding-right: 5px;
	}	
	.keranjang-container {
		height: calc(100% - 35px);
	}	
	.cart-content {
		height: calc(100% - 245px);
	}
	.cart-footer {
		width:calc(100% - 10px);
	}
}

@media only screen and (min-width:769px) and (max-width: 1080px) {
	p.namaitem {
		height:54px;
	}
}

@media only screen and (min-width:769px) and (max-width: 980px) {
	.keranjang-container-two {
		width:89%;
	}
	.cart-footer {
		width:89%;	
	}
}

@media only screen and (min-width:769px) and (max-width: 866px) {
	.cart-content-two {
		height:calc(100% - 248px);
	}
}	

@media only screen and (min-width:867px) and (max-width: 882px) {
	.cart-content-two {
		height:calc(100% - 256px);
	}
}	


@media only screen and (min-width:1px) and (max-width: 326px) {
	input#search-mb {
		vertical-align :middle;
	}
	.del-button {
		top:56.5%;
		height:25px;
	}
	.search-button {
		top:57%;
		height:25px;
	}
	.nav-button {
		padding: 5px 0 5px 0;
	}
}	

@media only screen and (min-width:315px) and (max-width: 324px) {
	.qtyminus, .qtyplus {
		padding: 7px 14px;
	}
	.cart-content {
		height: calc(100% - 255px);
	}
}


@media only screen and (min-width:641px) and (max-width: 686px) {
	.page-unit {
		font-size: 16px;
	}
}	

@media only screen and (min-width:687px) and (max-width: 870px) {
	.page-unit {
		font-size: 16px;
	}
}	

@media only screen and (min-width:871px) and (max-width: 1240px) {
	.page-unit {
		font-size: 16px;
	}
}	

@media only screen and (min-width:641px) and (max-width: 686px) {
	.pagePC-content {
		grid-template-columns: 38% 62%;
	}	
	.pesananimg-width {
		width: 11%;
	}
	.pesanan-width {
		width:51%;
	}
	.pesananhrg-width {
		width:32%;
	}
}	

@media only screen and (min-width:687px) and (max-width: 736px) {
	.pesananimg-width {
		width: 12.5%;
	}
	.pesanan-width {
		width:55%;
	}
}	


@media only screen and (min-width:737px) and (max-width: 768px) {
	.pesananimg-width {
		width: 11%;
	}
	.pesanan-width {
		width:55%;
	}
}	


@media only screen and (min-width:769px) and (max-width: 784px) {
	.pesananimg-width {
		width: 17.5%;
	}
	.pesanan-width {
		width:55%;
	}
}	

@media only screen and (min-width:785px) and (max-width: 848px) {
	.pesananimg-width {
		width: 16%;
	}
	.pesanan-width {
		width:55%;
	}
}

@media only screen and (min-width:849px) and (max-width: 919px) {
	.pesananimg-width {
		width: 14%;
	}
	.pesanan-width {
		width:55%;
	}
}

@media only screen and (min-width:920px) and (max-width: 1027px) {
	.pesananimg-width {
		width: 13%;
	}
	.pesanan-width {
		width:55%;
	}
}

@media only screen and (min-width:1027px) and (max-width: 1080px) {
	.pesananimg-width {
		width: 12%;
	}
	.pesanan-width {
		width:55%;
	}
}

@media only screen and (min-width:1081px) and (max-width: 1163px) {
	.pesananimg-width {
		width: 11.5%;
	}
	.pesanan-width {
		width:55%;
	}
}

@media only screen and (min-width:1164px) and (max-width: 1280px) {
	.pesananimg-width {
		width: 11%;
	}
	.pesanan-width {
		width:55%;
	}
}

@media only screen and (min-width:1536px) and (max-width: 1700px) {
	.pesananimg-width {
		width: 8.5%;
	}
}	

@media only screen and (min-width:1701px) and (max-width: 1980px) {
	.pesananimg-width {
		width: 7.5%;
	}
}	

@media only screen and (min-width:641px) and (max-width: 751px) {
	.product-container {
		padding: 0 10px;
	}
	.pagePC-content {
		padding-right: 7px;	
		grid-template-columns: 38% 62%;	
	}	
	.qty {
		width: 37%;
	}
	.product-page-container {
		left:4%;
		right:4%;
		width:calc(100% - 8%);
	}
}		

@media only screen and (min-width:641px) and (max-width: 768px) {
	.tab-content {
		height: calc(100% - 55px - 2.5em);
	}	
}	

@media only screen and (min-width:687px) and (max-width: 752px) {
	.pagePC-content {
		grid-template-columns: 35% 62.5%;
	}	
}	

@media only screen and (min-width:752px) and (max-width: 1241px) {	
	.qty {
		width: 37%;
	}
	.qtyplus, .qtyminus {
		padding: 5px 10px;
	}
}	

@media only screen and (min-width:752px) and (max-width: 768px) {
	.pagePC-content {
		grid-template-columns: 44% 54%;
	}	
	.product-page-container {
		left : 5%;
		right: 5%;
		width : calc(100% - 10%);
	}
	img.img-responsive.main-img {
		height:297px;
	}
}	

@media only screen and (min-width:769px) and (max-width: 820px) {
	img.img-responsive.main-img {
		height:304px;
	}
}	

@media only screen and (min-width:769px) and (max-width: 1241px) {
	.pagePC-content {
		grid-template-columns: 32% 40% 28%;
	}	
}		

@media only screen and (min-width:1441px) and (max-width: 1945px) {
	a.otherimg-box {
		width: calc(94% / 3);
	}
}

@media only screen and (min-height:1px) and (max-height: 456px) {
	.filter-select {
		margin-bottom: 0;
	}
}

@media only screen and (min-height:1px) and (max-height: 269px) {
	.userpopup {
		top:8%;
	}
	i.fa.fa-eye.eyeiconpop.lama {
		top: 22.5% !important;
	}
	i.fa.fa-eye.eyeiconpop.baru {
		top: 41% !important;
	}
	i.fa.fa-eye.eyeiconpop.konfirmasi {
		top: 59.5% !important;		
	}
	.image-container {
		height: 273px!important;
	}
	img.img-responsive.main-img {
		height: 259px!important;
		object-fit: cover!important;
	}
	i.fa.fa-user-circle {
		font-size: 150%;
	}
}	

@media only screen and (min-height:270px) and (max-height: 305px) {
	.userpopup {
		top:12%;
	}
}	

@media only screen and (min-height:1px) and (max-height: 352px) {
	.user{
		overflow: auto;
		height: 110%;
		padding-bottom:52px;
	}	
}

@media only screen and (min-height:326px) and (max-height: 342px) {
	.popup {
		top:2.5%;
	}
}

@media only screen and (min-height:343px) and (max-height: 380px) {
	.popup {
		top:7.5%;
	}
}	

@media only screen and (min-height:1px) and (max-height: 380px) {
	.tambahpopup {
		top: 4.5%;
	}
	.saveitem {
		margin-top:0;
	}
	.cancelitem {
		margin-top:0;
	}
	.popuptbl {
		margin-bottom:7px;
	}
	.tambah-akun {
		margin-top:0px;
	}
	.user-new {
		margin-top: 5px;
	}
	.passawal {
		margin-top: 10px;
		margin-bottom:10px;
	}
	.passtbl {
		margin-top:0px;
		margin-bottom:10px;
	}
	.in-pass{
		margin: 10px 0 5px 0;
	}
	.filter-bar {
		padding-top: 47px;
	}
	.filter-content {
		height:160%;
		overflow:auto;
	}
	.filter-btns {
		top : calc(100% - 16px);
	}
	.filter-bar.close {
		overflow-y:auto;
	}
	.filter-btns {
		bottom:0!important;
	}
	.check-marg {
		padding-left:16px;
	}
	.keranjang {
		height: 150%;
		overflow-y:scroll;
	}
	.keranjang-two {
		height: 150%;
		overflow-y:scroll;
	}
	.cart-content {
		height: calc(100% - 268px);
	}
	.cartimg-width {
		width:7%;
	}
	.pesanan {
		height:150%;
	}
	.tabs {
		max-height: calc(100% - 26px) ;
	}
	.tab-content {
		height: calc(100% - 24px - 5em);
	}
	.keranjang-container {
		height: calc(100% - 19px);
	}
}	

@media only screen and (min-width:1px) and (max-width: 290px) {
	.cart-btn {
		height: 70px;
		vertical-align:bottom;
	}
	input#qty {
		width: 30%;
	}
}	

@media only screen and (min-width:291px) and (max-width: 449px) {
	.cart-btn {
		height: 60px;
		vertical-align:bottom;
	}
}	

@media only screen and (min-width:641px) and (max-width: 922px) {
	.cart-btn {
		height: 60px;
		vertical-align:bottom;
	}
}	

@media only screen and (min-height:381px) and (max-height: 428px) {
	.popup, .userpopup {
		top: 9.7%;
	}
	.tambahpopup {
		top: 3%;
	}
}	

@media only screen and (min-height:429px) and (max-height: 480px) {
	.popup, .userpopup {
		top: 15%;
	}
	.tambahpopup {
		top: 7%;
	}
}

@media only screen and (min-height:481px) and (max-height: 543px) {
	.tambahpopup {
		top: 10%;
	}
	.keranjang-container {
		height: calc(100% - 50px);
	}
}	

@media only screen and (min-height:649px) and (max-height: 657px) {
	.checkout-btn {
		margin-top: 4px;
	}
}

@media only screen and (min-height:450px) and (max-height: 474px) {
	.product-page {
		height:105%;
	}	
}

@media only screen and (min-height:475px) and (max-height: 514px) {
	.product {
		height:100%;
	}	
}

@media only screen and (min-height:227px) and (max-height: 249px) {
	.product-page {
		height:140%;
	}
	.cart-btn {
		margin-bottom:15px;
	}
}	

@media only screen and (min-height:250px) and (max-height: 279px) {
	.product-page {
		height:130%;
	}
	.filter-content p {
		font-size:90%;
	}
	.filter-select {
		font-size:86%;	
	}
	.cart-btn {
		margin-bottom:10px;
	}
	.tambah-akun {
		font-size:150%;
	}
	.tambahpopup {
		top:3%;
	}
	.list-user th {
		font-size:90%;
	}
	.list-user td {
		font-size:88%;
	}
	.popup {
		width : 60%;
		top:3%;	
	}
	.popuptbl {
		font-size: 90%;
	}
	.popuptbl tr:nth-child(3) {
		font-size:88%;
	}
	.cancelitem, .saveitem {
		font-size: 89%;	
		height: 35px;
	}
	.namaitempop, .hrgitempop {
		font-size: 110%;	
	}
}

@media only screen and (min-height:280px) and (max-height: 306px) {
	.product-page {
		height:110%;
	}
	.cart-btn {
		margin-bottom:10px;
	}
}

@media only screen and (min-height:307px) and (max-height: 317px) {
	.product-page {
		height:100%;
	}
	.cart-btn {
		margin-bottom:5px;
	}
}

@media only screen and (min-height:318px) and (max-height: 328px) {
	.product-page {
		height:calc(100% - 10px);
	}
	.cart-btn {
		margin-bottom:5px;
	}
}

@media only screen and (min-height:329px) and (max-height: 339px) {
	.product-page {
		height:calc(100% - 20px);
	}
	.cart-btn {
		margin-bottom:5px;
	}
}

@media only screen and (min-height:340px) and (max-height: 350px) {
	.product-page {
		height:calc(100% - 30px);
	}
	.cart-btn {
		margin-bottom:5px;
	}
}	

@media only screen and (min-height:351px) and (max-height: 358px) {
	.product-page {
		height:calc(100% - 40px);
	}
	.cart-btn {
		margin-bottom:5px;
	}
}	

@media only screen and (min-height:359px) and (max-height: 366px) {
	.product-page {
		height:calc(100% - 47px);
	}
	.cart-btn {
		margin-bottom:5px;
	}
}	

@media only screen and (min-height:1px) and (max-height: 379px) {
	.image-container {
		height: 250px!important;
	}
	img.img-responsive.main-img {
		height: 242px!important;
		object-fit: cover!important;
	}
	.page-name {
		margin-top:5px;
	}
	.product-name, .product-price {
		font-size:108%;
	}
	.disc-price {
		font-size:93%;
	}
	.page-konversi {
		font-size:80%;
	}
	.page-sisa {
		font-size:80%;
	}
	.qtyminus, .qtyplus {
		font-size:80%;
		padding:7px 12px;
	}
	.qty, .page-unit {
		font-size:75%;	
	}
	.cart-btn {
		font-size:75%;	
		padding:7px;
	}
}


@media only screen and (min-height:380px) and (max-height: 390px) {
	.image-container {
		height: 262px!important;
	}
	img.img-responsive.main-img {
		height: 249px!important;
		object-fit: cover!important;
	}
	.cart-btn {
		margin-bottom:0;
	}
	.page-name {
		margin-top:5px;
	}
	.product-name, .product-price {
		font-size:115%;
	}
	.disc-price {
		font-size:100%;
	}
	.page-sisa {
		font-size:80%;
	}
	.qtyminus, .qtyplus {
		font-size:85%;
		padding:7px 12px;
	}
	.qty, .page-unit {
		font-size:80%;	
	}
	.cart-btn {
		font-size:85%;	
		padding:7px;
		margin-bottom:15px;
	}
}


@media only screen and (min-height:391px) and (max-height: 449px) {
	.cart-btn {
		margin-bottom:0;
	}
	.page-name {
		margin-top:5px;
	}
	.product-name, .product-price {
		font-size:115%;
	}
	.disc-price {
		font-size:100%;
	}
	.page-sisa {
		font-size:90%;
	}
	.qtyminus, .qtyplus {
		font-size:90%;
		padding:7px 12px;
	}
	.qty, .page-unit {
		font-size:85%;	
	}
	.cart-btn {
		font-size:90%;	
		padding:7px;
		margin-bottom:15px;
	}
}

@media only screen and (min-height:450px) and (max-height: 527px) {
	.image-container {
		height:135px;
	}
	.cart-btn {
		margin-bottom:0;
	}
	.page-name {
		margin-top:5px;
	}
	.product-name, .product-price {
		font-size:115%;
	}
	.disc-price {
		font-size:100%;
	}
	.page-sisa {
		font-size:90%;
	}
	.qtyminus, .qtyplus {
		font-size:90%;
		padding:7px 12px;
	}
	.qty, .page-unit {
		font-size:85%;	
	}
	.cart-btn {
		font-size:90%;	
		padding:7px;
		margin-bottom:15px;
	}
}

@media only screen and (min-height:520px) and (max-height: 527px) {
	img.img-responsive.main-img {
		height:135px;
	}
}	

@media only screen and (min-height:528px) and (max-height: 550px) {
	img.img-responsive.main-img {
		height:135px;
	}
	.image-container {
		height:135px;
	}
	.cart-btn {
		margin-bottom:15px;
	}
	.page-name {
		margin-top:5px;
	}
	.product-name, .product-price {
		font-size:115%;
	}
	.disc-price {
		font-size:100%;
	}
	.page-sisa {
		font-size:90%;
	}
}

@media only screen and (min-height:551px) and (max-height: 560px) {
	.product-page {
		height: 105%;
	}
}	

@media only screen and (min-height:561px) and (max-height: 570px) {
	.product-page {
		height: 103%;
	}
}

@media only screen and (min-height:572px) and (max-height: 592px) {
	img.img-responsive.main-img {
		height:150px;
	}
	.image-container {
		height:150px;
	}
	.cart-btn {
		margin-bottom:15px;
	}
}

@media only screen and (min-height:593px) and (max-height: 615px) {
	img.img-responsive.main-img {
		height:175px;
	}
	.image-container {
		height:175px;
	}
	.cart-btn {
		margin-bottom:15px;
	}
}

@media only screen and (min-height:615px) and (max-height: 636px) {
	img.img-responsive.main-img {
		height:190px;
	}
	.image-container {
		height:190px;
	}
	.cart-btn {
		margin-bottom:15px;
	}
}	

@media only screen and (min-height:645px) and (max-height: 655px) {
	.product-container {
		height:90%;
	}
	img.img-responsive.main-img {
		height:215px;
	}
	.image-container {
		height:215px;
	}
}	

@media only screen and (min-height:656px) and (max-height: 667px) {
	.product-container {
		height:88.5%;
	}
	img.img-responsive.main-img {
		height:222px;
	}
	.image-container {
		height:222px;
	}
}

@media only screen and (min-height:668px) and (max-height: 695px) {
	.product-container {
		height:86%;
	}
	img.img-responsive.main-img {
		height:235px;
	}
	.image-container {
		height:235px;
	}
}

@media only screen and (min-height:696px) and (max-height: 725px) {
	.product-container {
		height:83%;
	}
}

@media only screen and (min-height:726px) and (max-height: 751px) {
	.product-container {
		height:80%;
	}
}

@media only screen and (min-height:752px) and (max-height: 779px) {
	.product-container {
		height:77%;
	}
}

@media only screen and (min-height:780px) and (max-height: 825px) {
	.product-container {
		height:74%;
	}
}

@media only screen and (min-height:826px) and (max-height: 866px) {
	.product-container {
		height:71%;
	}
}

@media only screen and (min-height:867px) and (max-height: 898px) {
	.product-container {
		height:66%;
	}
}

@media only screen and (min-height:899px) and (max-height: 924px) {
	.product-container {
		height:63%;
	}
}

@media only screen and (min-width:1px) and (max-width: 364px) {
	.cart-qty {
		width:20%;
	}
}

@media only screen and (min-width:769px) and (max-width: 1024px) {
	.filter-bar {
		width: 35%
	}
}

@media only screen and (min-width:769px) and (max-width: 845px) {
	.cartimg-width {
		width:12%;
	}
}	

@media only screen and (min-width:846px) and (max-width: 1045px) {
	.cartimg-width {
		width:10%;
	}
}	

@media only screen and (min-width:1372px) and (max-width: 1472px) {
	.cartimg-width {
		width:7.5%;
	}
}

@media only screen and (min-width:1473px) and (max-width: 1531px) {
	.cartimg-width {
		width:7%;
	}
}

@media only screen and (min-width:1532px) and (max-width: 1738px) {
	.cartimg-width {
		width:6.5%;
	}
}

@media only screen and (min-width:1739px) and (max-width: 1920px) {
	.cartimg-width {
		width:6%;
	}
}	

@media screen and (min-width:1946px) {
	a.otherimg-box {
		width: calc(95% / 3);
	}
}

@media screen and (min-width:1550px) {
	.product-page-container {
		left : 20%;
		right: 20%;
		width : calc(100% - 40%);
	}
	.pagePC-content { 
		width: 100%;
		grid-template-columns: 30% 59% 10%;
	}
}

@media screen and (min-width: 1px) and (max-width:640px)	{
	@media screen and (min-height: 572px) and (max-height: 582px) {
		.product-page {
			height:calc(100% - 52px);
		}
	}	
}	

@media screen and (min-width: 1px) and (max-width:640px)	{
	@media screen and (min-height: 583px) and (max-height: 592px) {
		.product-page {
			height:calc(100% - 60px);
		}
	}	
}

@media screen and (min-width: 1px) and (max-width:640px)	{
	@media screen and (min-height: 593px) and (max-height: 604px) {
		.product-page {
			height:calc(100% - 45px);
		}
	}	
}

@media screen and (min-width: 1px) and (max-width:640px)	{
	@media screen and (min-height: 605px) and (max-height: 1080px) {
		.product-page {
			height:calc(100% - 65px);
		}
	}	
}

@media screen and (min-width: 1px) and (max-width:640px)	{
	@media screen and (min-height: 655px) and (max-height: 664px) {
		.image-container {
			height:225px;
		}
		img.img-responsive.main-img {
			height:227px;
		}
	}	
}

@media screen and (min-width: 1px) and (max-width:640px)	{
	@media screen and (min-height: 665px) and (max-height: 675px) {
		.image-container {
			height:235px;
		}
		img.img-responsive.main-img {
			height:245px;
		}
	}	
}

@media screen and (min-width: 1px) and (max-width:640px)	{
	@media screen and (min-height: 680px) and (max-height: 684px) {
		.image-container {
			height:245px;
		}
		img.img-responsive.main-img {
			height:255px;
		}
	}	
}

@media screen and (min-width: 1px) and (max-width:640px)	{
	@media screen and (min-height: 685px) and (max-height: 698px) {
		.image-container {
			height:255px;
		}
		img.img-responsive.main-img {
			height:265px;
		}
	}	
}

@media screen and (min-width: 1px) and (max-width:640px)	{
	@media screen and (min-height: 699px) and (max-height: 711px) {
		.image-container {
			height:270px;
		}
		img.img-responsive.main-img {
			height:280px;
		}
	}	
}

@media screen and (min-width: 1px) and (max-width:640px)	{
	@media screen and (min-height: 712px) and (max-height: 728px) {
		.image-container {
			height:285px;
		}
		img.img-responsive.main-img {
			height:295px;
		}
	}	
}

@media screen and (min-width: 1px) and (max-width:640px)	{
	@media screen and (min-height: 729px) and (max-height: 743px) {
		.image-container {
			height:300px;
		}
		img.img-responsive.main-img {
			height:310px;
		}
	}	
}

@media screen and (min-width: 1px) and (max-width:640px)	{
	@media screen and (min-height: 744px) and (max-height: 758px) {
		.image-container {
			height:315px;
		}
		img.img-responsive.main-img {
			height:325px;
		}
	
	
	}	
}

@media screen and (min-width: 1px) and (max-width:640px)	{
	@media screen and (min-height: 759px) and (max-height: 780px) {
		.image-container {
			height:330px;
		}
		img.img-responsive.main-img {
			height:340px;
		}
	}	
}

@media screen and (min-width: 1px) and (max-width:640px)	{
	@media screen and (min-height: 781px) and (max-height: 804px) {
		.image-container {
			height:350px;
		}
		img.img-responsive.main-img {
			height:360px;
		}
	}	
}

@media screen and (min-width: 1px) and (max-width:640px)	{
	@media screen and (min-height: 805px) and (max-height: 826px) {
		.image-container {
			height:375px;
		}
		img.img-responsive.main-img {
			height:385px;
		}
	}	
}

@media screen and (min-width: 1px) and (max-width:640px)	{
	@media screen and (min-height: 827px) and (max-height: 842px) {
		.image-container {
			height:400px;
		}
		img.img-responsive.main-img {
			height:410px;
		}
	}	
}

@media screen and (min-width: 1px) and (max-width:640px)	{
	@media screen and (min-height: 843px) and (max-height: 856px) {
		.image-container {
			height:413px;
		}
		img.img-responsive.main-img {
			height:425px;
		}
	}	
}

@media screen and (min-width: 1px) and (max-width:640px)	{
	@media screen and (min-height: 857px) and (max-height: 1080px) {
		.image-container {
			height:428px;
		}
		img.img-responsive.main-img {
			height:438px;
		}
	}	
}

@media screen and (min-width: 641px) and (max-width: 750px)	{
	img.img-responsive.main-img {
		height: 300px!important;
	}
	
}	

@media screen and (min-width: 769px) and (max-width: 820px)	{
	@media screen and (min-height: 1px) and (max-height: 2080px) {
		.pagePC-content { 
			width: 100%;
			grid-template-columns: 44% 55%;
		}
		.page-sisa {
			text-align:center;
		}
	}	 
}

@media screen and (min-width: 769px) and (max-width: 820px)	{
	@media screen and (min-height: 315px) and (max-height: 322px) {
		.image-container {
			height: 244px!important;
		}
		.page-qty {
			margin-bottom:12px;
		}
		.cart-btn {
			margin-bottom:10px;	
		}
		.product-page {
			height: calc(100% + 5px);
		}
		img.img-responsive.main-img {
			height: 244px!important;
		}
	}
}	

@media screen and (min-width: 769px) and (max-width: 820px)	{
	@media screen and (min-height: 323px) and (max-height: 332px) {
		.page-qty {
			margin-bottom:12px;
		}
		.cart-btn {
			margin-bottom:15px;	
		}
		.product-page {
			height: calc(100% + 10px);
		}
		img.img-responsive.main-img {
			height: 244px!important;
		}
	}
}

@media screen and (min-width: 769px) and (max-width: 820px)	{
	@media screen and (min-height: 1px) and (max-height: 318px) {
		.popup {
			width:45%;
			top:4%;
		}
		.popuptbl tr:nth-child(1), .popuptbl tr:nth-child(2)	{
			font-size: 92%;
		}
		.popuptbl tr:nth-child(3) {
			font-size: 85%;	
		}
		.saveitem, .cancelitem {
			margin-top:5px;
			margin-bottom:12px;
		}
		#popupheader {
			margin-bottom:10px;
		}
	}
}
		 
@media screen and (min-width: 769px) and (max-width: 820px)	{
	@media screen and (min-height: 319px) and (max-height: 332px) {
		.popup {
			width:45%;
			top:4%;
		}
	}
}		 

@media screen and (min-width: 769px) and (max-width: 820px)	{
	@media screen and (min-height: 1px) and (max-height: 352px) {
		.user-container { 
			height: calc(100% - 10px);
		}
		.users {
			overflow:auto;
			height:calc(100% - 64px);
		}
	}	 
}

@media screen and (min-width: 279px) and (max-width: 290px)	{
	.form-cari {
		width:64%;
	}
	.search-button {
		right:30%;
		height:24px;
	}
	
}	

@media screen and (min-width: 817px) and (max-width: 900px)	{
	i.fa.fa-eye.eyeiconpop.lama {
		left:87.5%!important;
	}
	i.fa.fa-eye.eyeiconpop.baru {
		left:87.5%!important;	
	}
	i.fa.fa-eye.eyeiconpop.konfirmasi {	
		left:87.5%!important;	
	}
}

@media screen and (min-width: 1px) and (max-width: 304px)	{
	@media screen and (min-height: 1px) and (max-height: 380px) {
		i.fa.fa-eye.eyeiconpop.lama {
			top:21.5%!important;
			left:87.5%!important;
		}
		i.fa.fa-eye.eyeiconpop.baru {
			top:39.7%!important;	
			left:87.5%!important;	
		}
		i.fa.fa-eye.eyeiconpop.konfirmasi {
			top:58%!important;		
			left:87.5%!important;	
		}
	}
}	

@media screen and (min-width: 769px) and (max-width: 820px)	{
	@media screen and (min-height: 1px) and (max-height: 380px) {
		i.fa.fa-eye.eyeiconpop.lama {
			top:21.5%!important;
		}
		i.fa.fa-eye.eyeiconpop.baru {
			top:39.7%!important;	
		}
		i.fa.fa-eye.eyeiconpop.konfirmasi {
			top:58%!important;		
		}
	}
}	 

@media screen and (min-width: 769px) and (max-width: 820px)	{
	@media screen and (min-height: 353px) and (max-height: 2080px) {
		.user {
			height: calc(100% - 97px);
		} 
		.user-container { 
			height: calc(100% - 41px);
		}
		.users {
			overflow:auto;
			height:calc(100% - 66px);
		}
	}	 
}

@media screen and (min-width: 821px) and (max-width: 920px)	{
	@media screen and (min-height: 1px) and (max-height: 2080px) {
		.pagePC-content { 
			width: 100%;
			grid-template-columns: 39% 60%;
		}
		img.img-responsive.main-img {
			height: 305px;
		}
		.page-sisa {
			text-align:center;
		}
		.search-button {
			top: 55.5%;
			height:24px;
		}
	}	 
}

@media screen and (min-width: 1241px) and (max-width: 1549px)	{
	.product-page-container {
		left : 20%;
		right: 20%;
		width : calc(100% - 40%);
	}
	.pagePC-content {
		grid-template-columns : 40% 58%;
	}
}	

@media screen and (min-width: 900px) and (max-width: 1280px)	{
	@media screen and (min-height: 1px) and (max-height: 1080px) {
		.keranjang-two {
			height: calc(100% - 75px);
		}
		.product-page-container {
			left : 10%;
			right: 10%;
			width : calc(100% - 20%);
		}
		img.img-responsive.main-img {
			height:303px;
		}
	}
}	

@media screen and (min-width: 900px) and (max-width: 1080px)	{
	@media screen and (min-height: 1px) and (max-height: 1080px) {
		.pagePC-content { 
			width: 100%;
			grid-template-columns: 39% 60% !Important;
		}
	}
}	

@media screen and (min-width: 1081px) and (max-width: 1280px)	{
	@media screen and (min-height: 1px) and (max-height: 1080px) {
		.pagePC-content { 
			width: 100%;
			grid-template-columns: 30% 60% 8%!Important;
		}
	}
}

@media screen and (min-width: 1281px) and (max-width: 1920px)	{
	@media screen and (min-height: 1px) and (max-height: 900px) {
		.product-page-container {
			left : 20%;
			right: 20%;
			width : calc(100% - 40%);
		}
		.pagePC-content { 
			width: 100%;
			grid-template-columns: 33% 62% !Important;
		}
		img.img-responsive.main-img {
			height:309px;
		}
	}
}	

@media screen and (min-width: 1020px) and (max-width: 1280px)	{
	@media screen and (min-height: 1px) and (max-height: 900px) {
		img.img-responsive.main-img {
			height:300px;
		}
	}
}	

@media screen and (min-width: 327px) and (max-width: 343px)	{
	.form-cari {
		width:74%;
	}
}	

@media screen and (min-width: 640px) and (max-width: 768px)	{
	.search-button {
		right:26.2%;
	}
}

@media screen and (min-width: 1px) and (max-width: 768px)	{	
	.cartfo {
		width:48%;
	}
	.hide-LPC {
		display:none;
	}
}

@media screen and (min-width: 769px) and (max-width: 1079px)	{	
	.cartfo {
		width:51%;
	}
	.hide-LPC {
		display:none;
	}
}

@media screen and (min-width: 1045px) and (max-width: 1079px)	{
	.cartimg-width {
		width:10%;
	}
	.check-width {
		width:8%;
	}
	.check-marg {
		padding-left:26px;
	}
}	

@media screen and (min-width: 1080px) and (max-width: 1199px) {	
	.check-width {
		width:4%;
	}
	.check-marg {
		padding-left:26px;
	}
	.cartimg-width {
		width:4.5%;
	}
	.cartfo {
		width: 15%;
	}
	.hide-LPC {
		width: 20%;
		vertical-align:top;
	}
	input#qty {
		width:35%;
	}
	.cartminus, .cartplus {
		width: 15%;
	}
	.cart-unit {
		width:25%;
	}
	.delclass {
		width: 15%;	
	}
	.HidePC {
		display:none;	
	}
}

@media screen and (min-width: 1200px) {	
	.check-width {
		width:3%;
	}
	.check-marg {
		padding-left:26px;
	}
	.cartimg-width {
		width:3.7%;
	}
	.cartfo {
		width: 14%;
	}
	.hide-LPC {
		width: 20%;
		vertical-align:top;
	}
	.delclass {
		width: 10%;	
	}
	.HidePC {
		display:none;	
	}
}

@media screen and (min-width: 1375px) {	
	.cartfo {
		padding-right:10px;
		width: 12%;	
	}
	.cartimg-width {
		width:3%;
	}
}

@media only screen and (min-width:1px) and (max-width: 480px) {
	.container {
		width:98%;
	}
}