/* Custom Stylesheet */
/**

 * Made By laporanku.co.id
 */

 @font-face {
 	font-family: Nunito;
 	src: url(../../../asset2/font/Nunito-Regular.ttf);
 }

 body {
 	font-family: "Nunito";
 }


 :root {
 	/*--bg-1: linear-gradient(90deg, #0BE994, #10B4AD);*/
 	--bg-1: #FF4A85;
 	/*--bg-2: linear-gradient(90deg, #EE7435, #E27DA1);*/
 	--bg-2: #E2E5E5;
 	/*--bg-3: linear-gradient(90deg, #0BE994, #10B4AD);*/
 	--bg-3: #FF4A85;
 	--bg-header: #FF4A8598; 
 	--bg-active-categori: #FF4A8570;  	
 }


 /* Color */

 .bg-pasarsayur {
 	background: var(--bg-1)!important;
 }

 .bg-header {
 	background: var(--bg-header)!important;
 }

 .bg-pasarsayur2 {
 	background: var(--bg-2)!important;
 }
 .bg-pasarsayur3 {
 	background: var(--bg-3)!important;
 }
 
  li.hd.star.selected {
    color: #ffffff!important;
}

 /* End Color */
 
 
 /* Kategori */

 .kategori.active {
 	background-color: var(--bg-active-categori)!important;
 	color: white;
 }

 /* End Kategori */ 
 


 /* Custom CheckBox */

 .checkboxGroup {
 	background-color: #fff;
 	display: block;
 	margin: 10px 0;
 	position: relative;
 	border-radius: 50px;
 }

 .checkboxGroup .label {
 	padding: 12px 20px;
 	width: 100%;
 	display: block;
 	text-align: left;
 	color: #3C454C;
 	cursor: pointer;
 	position: relative;
 	z-index: 1;
 	transition: color 200ms ease-in;
 	overflow: hidden;
 	border-radius: 15px;
 	/*border-radius: 50px;*/
 }

 .label::before {
 	width: 10px;
 	height: 10px;
 	border-radius: 50%;
 	content: '';
 	/*background: var(--bg-3);*/
 	position: absolute;
 	left: 50%;
 	top: 50%;
 	transform: translate(-50%, -50%) scale3d(1, 1, 1);
 	transition: all 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
 	opacity: 0;
 	z-index: -1;
 }

 .label::after {
 	width: 32px;
 	height: 32px;
 	content: '';
 	border: 2px solid #D1D7DC;
 	background-color: #fff;
 	background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.414 11L4 12.414l5.414 5.414L20.828 6.414 19.414 5l-10 10z' fill='%23fff' fill-rule='nonzero'/%3E%3C/svg%3E ");
 	background-repeat: no-repeat;
 	background-position: 2px 3px;
 	border-radius: 50%;
 	z-index: 1;
 	position: absolute;
 	right: 10px;
 	top: 50%;
 	transform: translateY(-50%);
 	cursor: pointer;
 	transition: all 200ms ease-in;
 }

 .checkboxGroup input:checked ~ .label {
 	color: #000;
 }

 .checkboxGroup input:disabled ~ .label {
 	cursor: default;
 	color: #ccc;
 	background-color: #E6E7E8;
 }        

 .checkboxGroup input:checked ~ .label:before  {
 	transform: translate(-50%, -50%) scale3d(56, 56, 1);
 	opacity: 1;
 }

 .checkboxGroup input:checked ~ .label:after {
 	background-color: var(--bg-1);
 	border-color: var(--bg-2);
 }

 .checkboxGroup input {
 	width: 32px;
 	height: 32px;
 	order: 1;
 	z-index: 1;
 	position: absolute;
 	right: 30px;
 	top: 50%;
 	transform: translateY(-50%);
 	cursor: pointer;
 	visibility: hidden;
 }

 .checkbox {
 	/*padding: 0 16px;*/
 	max-width: 550px;
 	/*margin: 50px auto;*/
 	font-size: 18px;
 	font-weight: 600;
 	line-height: 20px;
 	box-sizing: border-box;
 }

 .checkbox *, *::before, *::after {
 	box-sizing: inherit;
 }

 /* End Custom CheckBox */




/* Tabs */

 .tabs .tab a:hover, .tabs .tab a.active {
 	background-color: transparent;
 	color: #015CAB;
 }

 .tabs .tab a {
 	color: #015CAB;
 	display: block;
 	width: 100%;
 	height: 100%;
 	padding: 0 24px;
 	font-size: 14px;
 	text-overflow: ellipsis;
 	overflow: hidden;
 	-webkit-transition: color .28s ease, background-color .28s ease;
 	transition: color .28s ease, background-color .28s ease;
 }


 .tabs .tab a:focus, .tabs .tab a:focus.active {
 	background-color: unset;
 	outline: none;
 }
 


 .tabs .indicator {
 	position: absolute;
 	bottom: 0;
 	height: 2px;
 	background-color: #015CAB;
 	will-change: left, right;
 }

/* End Tabs */





 /* dropdown sort */

 .dropdown-menu .active>a {
 	background-color:#015CAB;
 	color:#ffffff!important;
 }

 /* end dropdown */




 /* dash-add-cart */


 .qty .count {
 	color: #000;
 	display: inline-block;
 	vertical-align: top;
 	font-size: 16px;
 	font-weight: 700;
 	padding: 0 2px;
 	min-width: 40px;
 	text-align: center;
 }
 .qty .plus {
 	cursor: pointer;
 	display: inline-block;
 	vertical-align: top;
 	color: white;
 	width: 25px;
 	height: 25px;
 	font: 25px/1 Arial,sans-serif;
 	text-align: center;
 	border-radius: 50%;
 	background: #042D45;
 }
 .qty .minus {
 	cursor: pointer;
 	display: inline-block;
 	vertical-align: top;
 	color: white;
 	width: 25px;
 	height: 25px;
 	font: 23px/1 Arial,sans-serif;
 	text-align: center;
 	border-radius: 50%;
 	background-clip: padding-box;
 	background: #042D45;
 } 

 .dash_qty {
 	display: inline-block;
 }


 .dash_qty .dash_count {
 	color: #000;
 	vertical-align: top;
 	font-size: 16px;
 	font-weight: 700;
 	padding: 0 2px;
 	min-width: 40px;
 	text-align: center;
 }
 .dash_qty .dash_plus {
 	cursor: pointer;
 	display: inline-block;
 	vertical-align: top;
 	color: white;
 	width: 100%;
 	height: 28px;
 	font: 22px/1 Arial,sans-serif;
 	text-align: center;
 	border-radius: 0px 13px 13px 0px;
 	line-height: normal;
 }
 .dash_qty .dash_minus {
 	cursor: pointer;
 	display: inline-block;
 	vertical-align: top;
 	color: white;
 	width: 100%;
 	height: 28px;
 	font: 22px/1 Arial,sans-serif;
 	text-align: center;
 	border-radius: 50%;
 	background-clip: padding-box;
 	border-radius: 13px 0px 0px 13px;
 	line-height: normal;
 }


 /* end-dash-add-cart */




 /* button */

 .btn-circle.btn-xl {
 	width: 60px;
 	height: 60px;
 	padding: 5px;
 	font-size: 24px;
 	line-height: 1.33;
 	border-radius: 50px;
 	display: inline-block;
 } 

 .btn{
 	border: none;
 	border-radius: 10px;
 	display: inline-block;
 	line-height: 12px;
 	outline: 0;
 	height: 42px;
 	color:#000000!important;
 }

 .btn a{
 	color:#000000!important;
 }

 .btn-cart{
 	border: none;
 	border-radius: 15px;
 	display: inline-block;
 	line-height: 12px;
 	outline: 0;
 	height: 42px;
 	color:#ffffff!important;
 }

 .btn-cart a{
 	color:#ffffff!important;
 }

 .btn-emp{
 	border: none;
 	border-radius: 10px;
 	display: inline-block;
 	line-height: 12px;
 	outline: 0;
 	height: 42px;
 }

 .btn-emp a{
 	color:#ffffff!important;
 }

 .btn:hover {
 	background-color: #FFBA48;
 }
 .primary-btn {
 	background: #01B14F;
 }
 .btn-image {
 	font-size: 20px;
 	height: 30px;
 	line-height: 30px;
 	text-decoration: none;
 	color: #fff;
 	background-color: #26a69a;
 	text-align: center;
 	letter-spacing: .5px;
 	-webkit-transition: .2s ease-out;
 	-moz-transition: .2s ease-out;
 	-o-transition: .2s ease-out;
 	-ms-transition: .2s ease-out;
 	transition: .2s ease-out;
 	cursor: pointer;
 	border: none;
 	border-radius: 50px;
 	display: inline-block;
 	width:45px;
 	height:50px;
 	line-height: 30px;
 	outline: 0;
 	padding: 0 1rem;
 	text-transform: none;
 	vertical-align: middle;
 	-webkit-tap-highlight-color: transparent;
 }

 .btn-image:hover {
 	background-color: #2bbbad;
 }

 /* End button */



 /* Navigation Next button promo */

 #swipper-nav-promo > div.btn.swiper-button-prev{
 	left: 0px;
 }


 #swipper-nav-promo > div.btn.swiper-button-prev:after{
 	font-size: 1.5rem;
 	color: #ffffff;
 }


 #swipper-nav-promo > div.btn.swiper-button-next{
 	right: 0px;
 }


 #swipper-nav-promo > div.btn.swiper-button-next:after{
 	font-size: 1.5rem;
 	color: #ffffff;
 }



 #swipper-nav-kategori > div.btn.swiper-button-prev{
 	left: 0px;
 }


 #swipper-nav-kategori > div.btn.swiper-button-prev:after{
 	font-size: 1.5rem;
 	color: #ffffff;
 }


 #swipper-nav-kategori > div.btn.swiper-button-next{
 	right: 0px;
 }


 #swipper-nav-kategori > div.btn.swiper-button-next:after{
 	font-size: 1.5rem;
 	color: #ffffff;
 }


 /* End Navigation Next button promo */






 /* Footer Check Out */


 .icon-bar {
 	position: fixed;
 	bottom: 0;
 	left: 0;
 	right: 0;
 	z-index: 10;  width: 100%; /* Full-width */
 	background-color: #FFFFFF; /* Dark-grey background */
 	overflow: auto; /* Overflow due to float */
 }

 .icon-bar a {
 	text-align: center; /* Center-align text */
 	transition: all 0.3s ease; /* Add transition for hover effects */
 	color: white; /* White text color */
 	font-size: 15px; /* Increased font size */
 }

 .icon-bar p {
 	text-align: center; /* Center-align text */
 	color: white; /* White text color */
 	font-size: 10px; /* Increased font size */
 }

 .active {
 	background-color: none; /* Add an active/current color */
 } 

 .icon-bar {
 	position: fixed;
 	bottom: 0;
 	left: 0;
 	right: 0;
 	z-index: 10;  width: 100%; /* Full-width */
 	background-color: #FFFFFF; /* Dark-grey background */
 	overflow: auto; /* Overflow due to float */
 }

 .icon-bar a {
 	float: left; /* Float links side by side */
 	text-align: center; /* Center-align text */
 	width: 20%; /* Equal width (5 icons with 20% width each = 100%) */
 	padding: 1px; /* Some top and bottom padding */
 	transition: all 0.3s ease; /* Add transition for hover effects */
 	color: white; /* White text color */
 	font-size: 30px; /* Increased font size */
 }

 .icon-bar p {
 	text-align: center; /* Center-align text */
 	color: white; /* White text color */
 	font-size: 10px; /* Increased font size */
 }

 .icon-bar a:hover {
 	background-color: none; /* Add a hover color */
 }

 .active {
 	background-color: none; /* Add an active/current color */
 }

 /* END Footer Check Out */



 /* Footer Check Out */

 .icon-bar2 {
 	position: fixed;
 	display: block;
 	bottom: 0;
 	left: 0;
 	right: 0;
 	z-index: 10;  
 	width: 100%; /* Full-width */
 	/*background-color: #FFFFFF;*/
 	overflow: auto; /* Overflow due to float */
 	color: white;
 }

 .icon-bar2 a {
 	float: left; /* Float links side by side */
 	text-align: center; /* Center-align text */
 	width: 100%; /* Equal width (5 icons with 20% width each = 100%) */
 	padding: 1px; /* Some top and bottom padding */
 	transition: all 0.3s ease; /* Add transition for hover effects */
 	color: white; /* White text color */
 	font-size: 30px; /* Increased font size */
 }

 .icon-bar2 p {
 	text-align: center; /* Center-align text */
 	color: #000000; /* White text color */
 	font-size: 14px; /* Increased font size */
 }

 .icon-bar2 a:hover {
 	background-color: none; /* Add a hover color */
 }

 .active {
 	background-color: none; /* Add an active/current color */
 }

 /* END Footer Check Out */




 /* Label Alert */


 .label-primary {
 	border-radius: 10px;
 	padding: 8px;
 	background-color: #1f91f3;
 }

 .label-success {
 	border-radius: 10px;
 	padding: 8px;
 	background-color: #2b982b;
 }

 .label-info {
 	border-radius: 10px;
 	padding: 8px;
 	background-color: #00b0e4;
 }

 .label-warning {
 	border-radius: 10px;
 	padding: 8px;
 	background-color: #ff9600;
 }

 .label-danger {
 	border-radius: 10px;
 	padding: 8px;
 	background-color: #fb483a;
 }


 /* End Label Alert */


 nav {
 	color: #039AC5;
 	background-color: #ee6e73;
 	width: 100%;
 	height: 55px;
 	position: fixed;
 	z-index: 99;
 	top: 0;
 	left: 0;
 	right: 0;
 }

 .icon-block {
 	padding: 0 15px;
 }
 .icon-block .material-icons {
 	font-size: inherit;
 }



 /* Font Size */

 .text-small1 {
 	font-size: 0.6em;
 }
 .text-small3 {
 	font-size: 0.5em;
 }
 .text-small2 {
 	font-size: 0.8em;
 }
 .text-small3 {
 	font-size: 1.4em;
 }
 .text-small {
 	font-size: 0.9em;
 	font-weight: 100;
 }
 .text-small i {
 	font-size: 1.4rem;
 }

 .text-medium {
 	font-size: 18px;
 }
 .text-medium2 {
 	font-size: 25px;
 }
 .text-medium3 {
 	font-size: 30px;
 }


 /* End Font Size */



 /* Colors */

 .accent-text:link, .accent-text:visited {
 	color: #FF4081 !important;
 }
 .accent-color {
 	background-color: #00968d !important;
 	border-radius: 50px;
 }
 .accent-border {
 	border-color: #FF4081 !important;
 }
 .primary-text {
 	color: #2196F3 !important;
 }
 .primary-color {
 	background: #039AC5;
 }
 .primary-border {
 	border-color: #2196F3 !important;
 }
 .grey-blue {
 	background-color: #f1f4f5;
 }
 .text-color {
 	color: #042D45 !important;
 }
 .text-color-utama {
 	color: #29b6f6 !important;
 }
 .text-light {
 	font-weight: 400;
 	color: #B2B2B4;
 }
 .transparent {
 	background-color: transparent !important;
 }
 .no-shadow {
 	box-shadow: none;
 }

 /* End Colors */




 /* Grid */

 .width-100 {
 	width: 100% !important;
 }
 .m-0 {
 	margin: 0px !important;
 }
 .m-10 {
 	margin: 10px !important;
 }
 .m-20 {
 	margin: 20px !important;
 }
 .m-b-10 {
 	margin-bottom: 10px !important;
 }
 .m-b-20 {
 	margin-bottom: 20px !important;
 }
 .m-b-30 {
 	margin-bottom: 30px !important;
 }
 .m-b-40 {
 	margin-bottom: 40px !important;
 }
 .m-t-0 {
 	margin-top: 0px !important;
 }
 .m-t-10 {
 	margin-top: 10px !important;
 }
 .m-t-15 {
 	margin-top: 15px !important;
 }
 .m-t-20 {
 	margin-top: 20px !important;
 }
 .m-t-30 {
 	margin-top: 30px !important;
 }
 .m-t-40 {
 	margin-top: 40px !important;
 }
 .m-r-5 {
 	margin-right: 5px !important;
 }
 .m-r-20 {
 	margin-right: 20px !important;
 }
 .m-r-10 {
 	margin-right: 10px !important;
 }
 .m-r-40 {
 	margin-right: 40px !important;
 }
 .m-l-0 {
 	margin-left: 0px !important;
 }
 .m-l-10 {
 	margin-left: 10px !important;
 }
 .m-l-20 {
 	margin-left: 20px !important;
 }
 .m-l-30 {
 	margin-left: 30px !important;
 }
 .m-l-r-20 {
 	margin-left: 20px !important;
 	margin-right: 20px !important;
 }
 .m-l-r-10 {
 	margin-left: 10px !important;
 	margin-right: 10px !important;
 }
 .m-l-r-0 {
 	margin-left: 0px !important;
 	margin-right: 0px !important;
 }
 .avb-5em {
 	padding-bottom: 5em !important;
 }
 .p-0 {
 	padding: 0px !important;
 }
 .p-5 {
 	padding: 5px !important;
 }
 .p-10 {
 	padding: 10px !important;
 }
 .p-15 {
 	padding: 15px !important;
 }
 .p-20 {
 	padding: 20px !important;
 }
 .p-t-0 {
 	padding-top: 10px !important;
 }
 .p-t-10 {
 	padding-top: 10px !important;
 }
 .p-t-20 {
 	padding-top: 20px !important;
 }
 .p-t-40 {
 	padding-top: 40px !important;
 }
 .p-b-0 {
 	padding-bottom: 0px !important;
 }
 .p-b-10 {
 	padding-bottom: 10px !important;
 }
 .p-b-20 {
 	padding-bottom: 20px !important;
 }
 .p-b-40 {
 	padding-bottom: 40px !important;
 }
 .m-l-0 {
 	margin-left: 0 !important;
 }
 .m-b-0 {
 	margin-bottom: 0 !important;
 }
 .p-l-r-10 {
 	padding-left: 10px !important;
 	padding-right: 10px !important;
 }
 .p-l-r-20 {
 	padding-left: 20px !important;
 	padding-right: 20px !important;
 }
 .p-l-20 {
 	padding-left: 20px !important;
 }
 .p-l-r-50 {
 	padding-left: 50px !important;
 	padding-right: 50px !important;
 }
 .p-l-r-20 {
 	padding-left: 20px !important;
 	padding-right: 20px !important;
 }
 .p-r-20 {
 	padding-right: 20px !important;
 }

 /* End Grid */



 /* Back Layer */

 .login-form,
 .signup-form {
 	padding: 10px;
 	margin: 20px;
 	border-radius: 20px;
 	background-color: rgba(255, 255, 255, 0.8);
 	top: 56px;
 	left: 0;
 	right: 0;
 	z-index: 99;
 	text-align: center;
 	margin-top: 75px;
 }
 .header-form {
 	border-radius: 50px 50px 0px 0px;
 	background-color: #ffffff;
 	max-height: 3px;
 }
 .login-form h1,
 .signup-form h1 {
 	margin-top: 0;
 	margin-bottom: 30px;
 	text-align: center;
 }


 /* End Back Layer */




 /* Search Bar */

 .search {
 	position: relative;
 	display: flex;
 	margin: 20px;
 }

 /* End Search Bar */



 /* Modal */

 .modal.bottom-sheet{
 	max-height: 70%;
 }

 /* End Modal */