/* ========================================================== *
 * Mdot KliknClean  V2.0
 * Copyright 2021 by KliknClean
 * Author : Lukman | Binsar | Andi

/* ========================================================== *

[Table of contents]
1. base layout css

1. Typography

	1px 	0.06rem
	2px		0.13rem
	3px		0.19rem
	4px		0.3rem
	5px		0.3rem
	6px		0.4rem
	8px		0.5rem
	10px	0.6rem
	12px	0.8rem
	14px	0.9rem
	15px	0.9rem
	16px	1rem
	18px	1.1rem
	20px	1.3rem
	24px	1.5rem
	25px	1.6rem
	28px	1.8rem
	32px	2rem
	36px	2rem
	40px	3rem
	44px	3rem
	48px	3rem
	50px	3rem
	56px	4rem
	64px	4rem
	72px	5rem
	75px	5rem
	80px	5rem
	90px	6rem
	100px	6rem

/* =============================
 	Icons
===============================*/

@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.0/font/bootstrap-icons.css");

/* =============================
 	Typography
===============================*/

h1, .h1 				{font-size: 3rem;}
h2, .h2 				{font-size: 2rem;}
h3, .h3 				{font-size: 1.8rem;}
h4, .h4 				{font-size: 1.5rem;}
h5, .h5 				{font-size: 1.3rem;}
h6, .h6  				{font-size: 1rem;}
.TitlePage 				{padding: 1.25rem;text-align: center;color: #1a1a1a;font-size: 1.0rem;font-weight: bolder;}
.h5titles 				{color: #1a1a1a;font-size: 1.0rem;font-weight: bolder; margin-top:1rem;}

/* =============================
 	KNC Color
===============================*/

/* FullColor */
.knc-yellowlight		{color:#FFDD00;}
.knc-yellow				{color:#ffc107;}
.knc-bluelight			{color:#54BDC8;}
.knc-bluedark			{color:#16375E;}
.knc-red				{color:#F31A47;}
.knc-green				{color:#28a745;}

/* Monochrome */
.knc-1a 				{color:#1a1a1a;}
.knc-3a  				{color:#3a3a3a;}
.knc-5a  				{color:#5a5a5a;}
.knc-7a  				{color:#7a7a7a;}
.knc-9a  				{color:#9a9a9a;}
.knc-ea  				{color:#aeaeae;}
.knc-ea  				{color:#eaeaea;}
.knc-fa  				{color:#fafafa;}
.knc-f57  				{color:#F5F7F7;}

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

a 						{color: #54BDC8;}
.mb6r					{margin-bottom:6rem;}

/* =============================
 	Button
===============================*/

.btn-knc  				{color: #fff;background-color: #54BDC8;border:1px solid #54BDC8!important;}
.btn-knc:focus, .btn-knc:focus-visible{box-shadow: none!important;}
.btn-voucher  			{color: #fff;background-color: #54BDC8;border-color: #54BDC8;border-radius:0 !important;font-weight:bolder; }
.btn-gift  				{color: #fff;background-color: #6CCFA1;border-color: #6CCFA1;}
.btn-rating  			{color: #fff;background-color: #6CB333;border-color: #6CB333; font-size:0.7rem;}
.btn-edit  				{color: #54BDC8 !important}
.btn-knc-line  			{color: #54BDC8; background-color: #fff; border-color: #54BDC8;}
.btn-topup  			{color: #5a5a5a; background-color: #fff; border-color: #eaeaea; border-radius:1rem; padding: .3rem .5rem;font-size: .875rem;line-height: 1.2;}
.btn-address  			{margin-top:0.6rem; margin-bottom:0.6rem;}
.btn-link  				{color: #1a1a1a;}
.btn-link:hover,
.btn-link:focus,
.btn-link:acive  		{color: #54BDC8;}
.btn-allpromo 			{color: #1a1a1a; background-color: #fff;border-color: #d5d5d5;border-radius: 1.5rem;padding: 0.2rem 0.625rem;font-size: 0.75rem;float: right;}
.btn-promo 				{color: #fff;background-color: #FF9100;border-color: #FF9100;font-size: 0.75rem;
border-radius:1.5rem; padding:0.25rem 0.75rem;}
.btn-use				{color: #fff;background-color: #FF9100;border-color: #FF9100;font-size: 0.75rem; border-radius:1.5rem; padding:0.25rem 0.75rem; height:1.875rem;}
.btn-order 				{ border-radius:0 !important; height:3.75rem; width:100%; line-height:2.688rem; font-weight:bolder;}

.btn:hover 				{color: #fff !important;background-color: #16375E !important;border-color: #16375E !important;}
.btn:focus				{box-shadow: 0 0 0 0.2rem rgba(22, 55, 94, 0.3);}



/* =============================
 	base layout css
===============================*/

body 					{background:#F5F7F7!important;padding:0!important;}
.container 				{max-width:30rem;}
.boxwhite 				{background:#fff;}
.borderbtm 	 			{border-bottom:1px dashed #eaeaea;}
.badge-utama 			{background:#28a745; color:#fff;}
.badge-diskon 			{background:#F31A47; color:#fff;}
.gvprice 				{}


.border_btm 			{border-bottom: 1px dashed rgba(0,0,0,.1)}
.hmcategori 			{font-size: 0.7rem;}

.emptyscr		 		{ padding-top:1.25rem;}
.emptyscr img 		 	{display:block; margin:0 auto;}
.emptyscr p 			{font-size:0.875rem; color:#9a9a9a; text-align:center;}


/* =============================
 	Bootstrap
===============================*/

.form-control 			{border:0 !important;outline:0 !important;border-bottom: 1px solid #eaeaea !important; padding:0 !important;}
.form-control:focus 	{color: #1a1a1a !important;border-color: #54BDC8 !important;box-shadow: none !important;}
label 					{margin-bottom:0 !important; font-size:0.8rem}
.form-check				{margin-top: 50px;}
.form-check-input		{margin-top: .4rem;width: 15px;height: 15px;}
.list-group-item 		{border: 1px dashed rgba(0,0,0,.125)}
.list-group-flush>.list-group-item:last-child {border-bottom-width: 1px;}
/*.list-group-flush>.list-group-item:last-child {border-bottom-width: 0rem;}*/



/* =============================
 	Header
===============================*/

ul.home-share 					{list-style:none; margin:0 !important; padding:0 !important; }
ul.home-share li 				{display:inline-block; margin-left:0.5rem !important;}
ul.home-share li a 				{display:block; border-radius:50%; width:2.25rem; height:2.25rem; line-height: 2rem; text-align: center;font-size: 1.25rem; border:1px solid #eee;}
ul.home-share li a.instagram 	{color: #fff!important; background: #d6249f;background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%);}
ul.home-share li a.whatsapp 	{color: #fff!important; background:#2ba63b;}
ul.home-share li a.twitter 		{color: #fff!important; background:#37b1e2;}
ul.home-share li a:hover 		{ opacity: 0.5;}

/* =============================
 	Home Pages
===============================*/
/*Home*/
.sprofile   				{background:#fff; padding:0.5rem 0rem; font-size:0.75rem;}
.sprofile h3				{margin:0 !important; padding:0 !important;font-size:1rem; font-weight:bolder;}
.sprofile p 				{margin:0 !important; padding:0 !important;}
.sprofile strong 		{margin:0 !important; padding:0 !important; font-size:0.70rem;}
.sprofile img 			{border-radius:50%;}
.pro_pict img 			{margin-top:1.5rem;}
.sprofile i.fa 			{color:#8a8a8a;}
.sprofile .btn-topup 	{margin-top:auto!important;margin-bottom: auto!important;}
.sprofile .btn-topup{font-size: .846rem!important}
/**
.sprofile   				{font-size:1rem; margin-bottom: 40px;}
.sprofile .card          {border-radius: 0!important;}
.sprofile .card-img-overlay {height: 90%; padding: 15px!important}
.sprofile h3				{margin:0 !important; padding:0 !important;font-size:1rem; font-weight:bolder;}
.sprofile p 				{margin:0 !important; padding:0 !important;}
.sprofile strong 		{margin:0 !important; padding:0 !important; font-size:1rem;}
.profile-img 			{border-radius:50%;}
.pro_pict img 			{}
.sprofile i.fa 			{color:#8a8a8a;}
.box-profile            {height: 100%;color: white;}

.sklikpoin   			{background:#fff; padding:0.5rem 0rem; font-size:0.75rem;}
.sklikpoin h3			{margin:0 !important; padding:0 !important;font-size:1rem; font-weight:bolder;}
.sklikpoin p 			{margin:0 !important; padding:0 !important;}
.sklikpoin strong 		{margin:0 !important; padding:0 !important; font-size:0.70rem;}
.sklikpoin img 			{border-radius:50%;}

.box-profile-menu       {margin-left: 0; margin-right: 0;width: 100%;position: relative;bottom:10px; border-radius: 10px;box-shadow: 1px 1px 5px rgb(0 0 0 / 0.2); padding-top: 1rem;padding-bottom: 1rem; font-size: 0.75rem}
**/

/*Promo*/
div.tabpromo 			{overflow: auto;white-space: nowrap;}
div.tabpromo a 			{display: inline-block;color: #1a1a1a;text-align: center;text-decoration: none; background:#fff; border:0.063rem solid #dadada; padding:0.2rem 0.75rem; border-radius:1.25rem; 	font-size:0.75rem; margin-top:0.5rem;}
div.tabpromo a:hover,
div.tabpromo a:focus {background-color: #54BDC8; border:0.063rem solid #54BDC8; color:#fff;}
div.tabpromo a.active{background-color: #54BDC8; border:0.063rem solid #54BDC8; color:#fff;}

/*Promo*/
.spro_top 				{border-bottom:1px dashed #eaeaea; padding:0.313rem 0rem;}
.sp_wallet				{border-right:1px dashed #eaeaea;}
.sp_prepaid 			{margin-left:0.313rem !important;}
.spro_btm  				{padding:0;}
.spro_top_btm .col 		{padding:0.188rem 0rem;}

/**
.spro_top_left 			{border-top:1px dashed #eaeaea; border-left:1px dashed #eaeaea;}
.spro_left 			    {border-left:1px dashed #eaeaea;}
**/

.promoknc 				{ position:relative;margin-bottom:0.75rem;}
.slidePromo				{padding-top:5rem; }
.promoall 				{position:absolute; right:0; bottom:0; z-index:999;}
.promoall a 			{font-size:0.75rem; border-radius:20px; padding:0.1rem 0.7rem; margin:0;}


/*Promo*/

.homegv 				{padding: 0 !important; margin:0 !important;}
.homegv p,
.homegv small 			{margin:0 !important; padding:0 !important; line-height:1.2;}
.homegv .list-group-flush>.list-group-item:last-child {border-bottom:0 !important;}



/*Video*/
.svideo h3 				{font-size:1rem; }
.svideo .bviewall 		{color:#54BDC8; text-decoration: underline; margin-right:0; font-size:0.875rem;float:right;}

/* Video Lebih Dekat */

.ListVideo 				{}
.ListVideo h3 			{font-size:1.0rem; font-weight:bolder;}


/*Blog*/
.sblog 					{background:#fff; padding:0;overflow: hidden;}
.sblog h3 				{font-size:1rem;}
.sblog .bviewall 		{color:#54BDC8; text-decoration: underline; margin-right:0.5rem; font-size:0.875rem;float:right;}

.blogs .bviewall 		{color:#54BDC8; text-decoration: underline; margin-right:0.5rem; font-size:0.875rem;float:right;}
.sblog .item h5 		{color: #000 !important;font-size:0.938rem !important;}
.sblog .item p 			{font-size:0.813rem; margin:0 !important; padding:0 !important;}
.sblog .card 			{ border-radius:0.5rem !important;}
.sblog .item a:hover    {text-decoration:none !important;}
.sblog  .card-body 		{padding: 0.5rem !important; padding-top:0rem !important; min-height:7rem !important;}
.blog-link {right: 20px; top: 20px; position: absolute;display: block;z-index: 900 !important}
/**
.blog-iframe            {padding-top: 70%;position: relative;overflow: hidden;width: 100%;}
.sblog > div > iframe   {position: absolute;top: 0;left: 0;bottom: 0;right: 0;width: 100%;height: 100%;margin: 0;border: 0;}
@media only screen and (max-width: 600px) {
  .blog-iframe            {padding-top: 70%;position: relative;overflow: hidden;width: 100%;}
}
*/
.blog-iframe  iframe   {width: 100%;height: 270px;margin: 0;border: 0;padding-right: 0}
@media only screen and (max-width: 600px) {
}

/* =============================
 	Services
===============================*/

.rservice  						{padding-top:0.9rem;padding-right:0.9rem;padding-right:0.9rem;}
.sl-gutters						{padding-right: 0rem !important;}
.sr-gutters 					{padding-left: 0rem !important;}
.rservice .col-4 				{margin-bottom: 0.9rem; position:relative;}
.MenuService .card-img-overlay 	{padding: 0rem;}
.MenuService					{position:relative;}
.MenuService h5					{position:absolute; bottom:0; font-size:0.7rem; margin:0 auto; display:block; text-align:center; text-shadow: 0rem 0.063rem 0.25rem #000; padding:0.313rem; width:100%;}
.MenuService h5	span 			{ text-shadow:none !important; font-weight:bolder;}
.MenuService span.new			{position:absolute; top:0; right:0; font-size:0.625rem; display:block; background:rgba(255, 0, 0, 0.9); color:#fff; padding:0.313rem; border-bottom-left-radius:0.5rem;}
span.disinfektan 				{position:absolute; top:0; right:0; font-size:0.625rem; display:block; background:rgba(0, 237, 50, 0.5); color:#fff; padding:0.313rem; border-bottom-left-radius:0.5rem;}
.MenuService  .card-title 		{margin-bottom: 0.313rem; color:#fff;}
.MenuService .fixed-bottom 		{z-index: 900 !important;}


/* =============================
 	Modal Services
===============================*/

h5.modal-title 					{color: #1a1a1a!important;font-size: 1rem!important;font-weight: bolder; line-height:1;}
.modal-header  					{border-bottom:none !important;}
.modal-body 					{padding-top:0 !important;}
.modal-footer 					{margin:0 !important; padding:0;padding-bottom: .6rem !important;border-top: 0!important;justify-content: center!important;}
.modal-header .close 			{padding:0 !important; margin: 0 auto;}



/* =============================
 	Tabs
===============================*/
.PrepaidTabs .nav-tabs  		{background: #fff !important; border-radius: 0 important;}
#tabs .nav-tabs .nav-link 		{border: 1px solid transparent; color:#1a1a1a;font-size: 1rem;}
#tabs .nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active 		{color: #54BDC8 !important;background-color: transparent;border-color: transparent transparent #eaeaea;border-bottom: 1px solid !important;font-size: 1rem;font-weight: bolder;}
#tabs {width: 100%}

/* =============================
 	Cust Profile
===============================*/

.custpro 						{padding-top:0.8rem; border-bottom:1px dashed #eaeaea;}
.custpro img 					{border-radius:50%; float:left; margin-right:0.3rem;}
.custpro h3						{margin:0 !important; padding:0 !important;font-size:1.1rem; font-weight:bolder;}
.custpro p 						{margin:0 !important; padding:0 !important; font-size:0.8rem;}
.custpro 						{}
.custTop 						{border-bottom:1px dashed #eaeaea; padding:0.313rem 0rem;}
.custBtm  						{padding:0;}
.custBtm .col 					{padding:0.188rem 0rem;}

/* =============================
 	Order Pages
===============================*/
/* List Order Pages
.ListOrder 						{background:#fff; padding:0.625rem 0;}
.ListOrder 	h5 					{font-size:0.8rem;margin:0 !important; padding:0 !important;}
.ListOrder 	p 					{font-size:0.75rem; margin:0 !important; padding:0 !important;}
.ListOrder 	a 					{font-size:0.75rem; color:#54BDC8; font-weight:bolder; text-decoration:underline;}
.OrderTabs .nav-tabs  			{background: #fff !important; border-radius: 0 important;}*/



a.ListOrder						{display:block; padding-top:1rem !important;}
a.ListOrder:hover				{ text-decoration:none !important;}
a.ListOrder	img 				{float:left; margin-right:0.5rem; border-radius: 0.3rem;}
a.ListOrder h5 					{font-size:0.9rem;margin:0 !important; padding:0 !important;}
a.ListOrder  p 					{font-size:0.7rem; margin:0 !important; padding:0 !important;}
a.ListOrder  small 				{font-size:0.7rem; margin:0 !important; padding:0 !important; color:#7a7a7a;}
.StOrder 						{font-size:0.8rem;}

/* Detail Order Pages */
.OrderDetail 					{display:block !important;}
.OrderDetail img 				{border-radius:0.3rem; margin-right:0.5rem;}
.OrderDetail h3 				{font-size:1rem; font-weight:bolder; margin:0; padding:0;}
.OrderDetail p					{margin:0 !important; padding:0 !important;}
.OrderDetail hr 				{margin-top:0.5rem !important;margin-bottom:0.5rem !important;}

.titleOrder img					{float:left; margin-left:0.625rem;}
.titleOrder p 					{padding:0 !important; margin:0 !important;}
.jdlorder						{font-size:1rem; font-weight:bolder;}
.sttsorder						{font-size:0.8rem;}
.tglorder						{font-size:0.8rem;}

.statusOrder					{font-size:0.8rem;}
.statusOrder small 				{font-size:0.7rem;}


/* Detail Order Pages */
.HelperDetail 					{display:block !important;}
.imghelper 						{border-radius:0.3rem;}
.HelperDetail h3 				{font-size:1rem; font-weight:bolder; margin:0; padding:0;}
.HelperDetail p					{margin:0 !important; padding:0 !important;}
.HelperDetail hr 				{margin-top:0.5rem !important;margin-bottom:0.5rem !important;}

.statusHelper small 			{font-size:0.7rem;}
.statusHelper p 	 			{font-size:0.8rem; margin-top:0.3rem;}

.CtnDinamis h3 					{font-size:1rem; font-weight:bolder; margin:0; padding:0;}
.CtnDinamis p					{margin:0 !important; padding:0 !important; font-size:0.8rem;}
.modal-content 					{border:0 !important;border-radius: 0rem !important;}

/* Order Popup */
.ListCarWash 					{border-bottom: 1px dashed #eaeaea !important;}
.ListCarWash p  				{padding:0 !important; margin:0 !important;}
.ListCarWash p strong 			{font-size:1rem;}

.BoxListServices 				{border-bottom:1px dashed #eee; padding:0.5rem 0rem;}
.ListServices					{border-bottom: 1px dashed #eaeaea !important;}
.ListServices p 				{margin:0 !important; padding:0 !important; font-weight:bolder; font-size:0.875rem;}
.counter 						{margin-top: .5rem!important; float:right !important; display:block; padding-right:2%;}
input.count 					{width:2rem; text-align:center; border:none; font-size:1rem; font-weight:bolder;}
.btn-circle 					{width:1.8rem; height: 1.8rem;padding: 0.313rem 0rem;border-radius: 0.938rem;text-align: center;border: 0.125rem solid #54BDC8;color:#54BDC8;margin-top:0; font-size:1rem; line-height: 1rem;padding:0 !important;}

.btn-circle-disable 			{border: 0.125rem solid #98A0A0;color:#98A0A0;}






/* =============================
 	Order Form
===============================*/

.orderforms 					{padding:0.6rem 0rem; background:#fff;}
.imglayanan 					{border-radius:0.313rem;}
.orderforms h3 					{font-size:1.125rem; font-weight:bolder; color:#1a1a1a; margin-bottom:1.25rem;}
.orderforms p,
.orderforms a 					{margin:0 !important; padding:0 !important; }
.orderbtnbox 					{border-top:1px solid #eaeaea; height:3.75rem;}
.orderbtnbox p 					{margin:0; padding:0; color:#5a5a5a;}
.orderbtnbox p strong			{margin:0; padding:0; color:#FF9100; font-weight:bold;}
.orderbtnbox a					{font-size:0.875rem;}
.term 							{line-height:1.5 !important; margin:0 !important; padding:0 !important; font-size:0.875rem;}
.term a 						{color:#54BDC8; text-decoration: underline;}
.listItem 						{padding:0.5rem 0rem 0.5rem 0.5rem;}
.listItem .fa-trash-alt 		{color:#aeaeae;}


/* =============================
 	Review Rating
===============================*/


.reviewapp h5 					{ font-size:1rem; font-weight:bolder;}
.reviewapp p 					{font-size:0.7rem;}
.StarReview 					{ font-size:1.5rem;}

.StarReview  .Stdefault 		{ color:#dadada;}
.StarReview  .Stactive 			{ color:#FF9100;}

.pesansaya h5 					{ font-size:1rem; font-weight:bolder; color:#1a1a1a;}

.tipHelper ul 					{ margin:0; padding:0;}
.tipHelper ul li 				{list-style:none; display:inline-block;}
.tipHelper ul li a 				{display: block; background: #fff;padding: 0.25rem 0.75rem;color: #5a5a5a;border-radius: 1rem;border: 1px solid #eaeaea;margin: 0.25rem; font-size:0.75rem;
font-weight:bolder;}
.tipHelper ul li a:hover,
.tipHelper ul li a:focus,
.tipHelper ul li a:active 		{background:#54BDC8; color:#fff; text-decoration:none;}
.tipHelper h5 					{font-size:1rem; font-weight:bolder; color:#1a1a1a;}





/* =============================
 	Kode Promo
===============================*/

.kodepromo .form-control 		{border-bottom: none !important;}
.kodepromo .form-control,
.kodepromo .form-control:focus 	{border-top: none;border-left: none;border-right: none;border-bottom: none;border-radius: 0;background: none;outline: none;box-shadow: none;padding: 0;}

.address .form-check			{margin:0rem; padding-left:0 !important;}
.address .form-check-label 		{padding-right:1rem !important;}
.address .form-check-input		{width: 15px;height: 15px; margin-top: 15% !important; margin-left: -1.75rem;}

.listadd h5			 			{font-weight:bolder;}
.listadd p			 			{margin-bottom:0.313rem;}
.listadd a			 			{color:#1a1a1a; font-size:0.875rem;}
.listadd a:hover				{color:#54BDC8; text-decoration:underline;}
.listadd  span.utama 			{background-color:#6CB333; border-color:#e57502; color:#fff;padding:0.063rem 0.25rem; font-size:1rem; font-weight:normal;}



/* =============================
 	Promo Pages
===============================*/

/* List Promo */
.ListPromo 				{}
.ListPromo h1 			{font-size:1.0rem; font-weight:bolder;}
.ListPromo h2 			{font-size:0.75rem;}
.ListPromo h3 			{font-size:1.0rem; font-weight:bolder;}
.ListPromo p 			{font-size:0.75rem;}
.ListPromo a 			{font-size:0.75rem;}
.ListPromo .card-body 	{padding: 0.625rem;}

/* Detail Promo */
.DetailPromo .card		{border: none !important;}
.DetailPromo h3 		{font-size:1.25rem; font-weight:bolder;}
.PromoTextBold			{font-weight:bold;font-size: 0.875rem;}
.PromoDesc table th		{padding-left:1.25rem}


/* =============================
 	Durasi Pembersihan
===============================*/

.hoursList a			{font-weight:bolder;}
.hoursList .list-group-item {padding: 0.25rem;}
p.info-list  			{font-size:0.75rem; line-height:1.1 !important;}



/* =============================
 	Jadwal Pembersihan
===============================*/
/* Date */
.datepicker				{background:#fafafa; color:#1a1a1a;}
.month 					{width: 100%;text-align: center;}
.month ul 				{margin: 0;padding:0;}
.month ul li 			{color: #1a1a1a; font-size: 1rem; list-style:none; padding:0.625rem 0rem;}
.month .prev 			{float: left; padding-top: 0.5rem; padding-left:0.5rem !important}
.month .next 			{float: right;padding-top: 0.5rem; padding-right:0.625rem !important}
.weekdays 				{margin: 0; padding: 10px 0;}
.weekdays li 			{display: inline-block; width: 13.1%;color: #666;text-align: center; font-size:0.75rem; font-weight:bolder;}
.days 					{padding: 0.5rem 0;margin: 0;}
.days li 				{list-style-type: none;display: inline-block;width: 13.1%;text-align: center;margin-bottom: 5px;font-size:0.75rem;color: #777;}
.days li .active 		{ padding: 0.313rem 0.5rem !important;background: #54BDC8;color: #fff !important; border-radius: 50%;}
.days li .today 		{ padding: 0.375rem 0.5rem !important;background: #F8E184;color: #1a1a1a !important; border-radius: 50%;}


/* Add media queries for smaller screens */
@media screen and (max-width:720px) 	{.weekdays li, .days li {width: 13.1%;}}
@media screen and (max-width: 420px) 	{.weekdays li, .days li {width: 13.1%;} .days li .active {padding: 0.125rem;}}
/* Add media queries for smaller screens */
@media screen and (max-width:720px) {.weekdays li, .days li {width: 13.1%;}}
@media screen and (max-width: 420px) {.weekdays li, .days li {width: 13.1%;}.days li .active {padding: 0.125rem;}}

/*
@media screen and (max-width:720px) 	{
    .weekdays li, .days li {width: 13.1%;}
}
@media screen and (max-width: 420px) 	{.weekdays li, .days li {width: 13.1%;} .days li .active {padding: 0.125rem;}}

@media screen and (max-width:720px) {.weekdays li, .days li {width: 13.1%;}}
@media screen and (max-width: 420px) {.weekdays li, .days li {width: 13.1%;}.days li .active {padding: 0.125rem;}.sprofile{margin-bottom: 50px;}}
@media screen and (max-width: 320px) 	{
    .box-profile-menu{bottom:0px!important;font-size: 0.586rem; padding-top: 0.5rem!important;padding-bottom: 0.5rem!important;}
    .box-profile-menu img {width: 25px!important;}
    .rservice{}
    .sprofile {font-size: 0.75rem;margin-bottom: 25px;}
    .sprofile strong {font-size: 0.75rem;}
    .tutorialSlider img{height: 70vh!important; }
}
*/

/* Hours*/
.titletime, .titleListCleaner {font-size:0.875rem; display:block;}
.titletime p span, .titleListCleaner p span {font-weight:bold; color:#54BDC8;}
.choosetime  			{color:gray;padding:0.313rem 0.375rem !important; margin-bottom:20% !important; text-align:center; border: 1px solid #54BDC8;border-radius: 0.313rem;
                         cursor:pointer; display:block; font-weight:normal;; font-size:0.875rem;}
.choosetime:hover 		{color: #fff !important;background-color: #54BDC8 !important;border: solid 1px #54BDC8 !important; text-decoration:none;}
.choosetime:focus 		{color: #fff !important;background-color: #54BDC8 !important;border: solid 1px #54BDC8 !important; text-decoration:none;}
.choosetime.ctactive 	{color: #fff !important;background-color: #54BDC8 !important;border: solid 1px #54BDC8 !important; text-decoration:none;}
#time_slot .col-2, .titletime, .titleListCleaner {padding-left: 7px !important; padding-right: 7px !important;}
@media(max-width:570px){
    .choosetime{padding:0.1rem !important;margin-bottom: 25%;}
    #time_slot .col-2, .titletime, .titleListCleaner {padding-left: 5px !important; padding-right: 5px !important;}
}
@media(max-width:320px){
    .choosetime{font-size: 0.675rem;}
    #time_slot .col-2, .titletime, .titleListCleaner {padding-left: 3px !important; padding-right: 3px !important;}
}

/* =============================
 	Brand ID
===============================*/

.brandsID ul 			{ margin:0; padding:0;}
.brandsID ul li 		{list-style:none; display:inline-block;}
.brandsID ul li a 		{display: block; background: #fff;padding: 0.25rem 0.75rem !important;color: #5a5a5a;border-radius: 1rem;border: 1px solid #eaeaea;margin: 0.25rem !important; font-size:0.75rem; font-weight:bolder;}
.brandsID ul li a:hover,
.brandsID ul li a:focus,
.brandsID ul li a:active{background:#54BDC8; color:#fff; text-decoration:none;}

.brandsID h5,
.BoxunitAC h5 			{ font-size:1rem; font-weight:bolder; color:#1a1a1a;}
.Caption p 			{ font-size:0.6rem;}


/* =============================
 	Paket Pages
===============================*/

.ItemPaket 						{background:#fff; padding:0.625rem 0;}
.ItemPaket .col-8 				{}
.ItemPaket img 					{ margin-top:-0.313rem;}
.ItemPaket .col-8 p 			{margin:0; padding:0; font-size:0.75rem;}
.ItemPaket .col-4  				{text-align:center !important;}

/* =============================
 	Prepaid Pages
===============================*/

.ItemPrepaid 					{background:#fff; padding:0.625rem 0;}
.ItemPrepaid .col-8 			{}
.ItemPrepaid img 				{margin-top:-0.313rem;}

.ItemPrepaid .col-8 p,.ItemPrepaid .col-12 p  			{margin:0; padding:0; font-size:0.75rem;}
.ItemPrepaid .col-4  			{text-align:center !important;}

/* =============================
 	Profile Pages
===============================*/

.profile 						{background:#fff; padding:0.5rem 0rem;}
.profile img 					{border-radius:50%;}
.profile i.fa 					{color:#8a8a8a;}
.profile p 						{margin:0 !important; padding:0 !important;}

.wallpre 						{border-top:1px dotted #EAEAEA; background:#fff; padding:0.5rem 0rem;}
.wallpre p 						{margin:0 !important; padding:0 !important; font-size:0.75rem;}
.wallpre .btn 					{float:right;}

.MenuList 						{margin:0 !important; padding:0 !important;}
span.ListName					{font-size:0.938rem;color:#1a1a1a; padding-left:0.5rem;}
span.ListResult 				{font-size:0.75rem;color:#9a9a9a !important;}
.badge-new 						{color: #fff;background-color: #F31A47; font-weight:normal !important; line-height:1.0}

/* =============================
 	Klikpoin
===============================*/

.infoklik .card-body 		{padding: 0.625rem;}
.infopoin p strong 			{display:block; border-bottom:1px solid #eee; padding-bottom:0.25rem;}
p.knama 					{margin-bottom:0 !important;font-size:0.875rem;}
p.kpoin 					{margin-top:0rem !important; font-size:0.875rem;}
.infopoin .btn-sm 			{font-size:0.75rem;}


.ListKlikpoin				{}
.ListKlikpoin h3 			{font-size:1.0rem; font-weight:bolder;}
.ListKlikpoin p 			{font-size:0.875rem;}
.ListKlikpoin a 			{font-size:0.75rem;}
.ListKlikpoin .card-body 	{padding: 0.625rem;}

.DetailKlikpoin .card		{border: none !important;}
.DetailKlikpoin h3 			{font-size:1rem; font-weight:bolder;}
.KlikTextBold				{font-weight:bold;font-size: 0.875rem;}
.KlikDesc table th			{padding-left:1.25rem}

.HistKlik					{}
.HistKlik p 				{font-size:0.8125rem;}
.HistKlik p span 			{font-size:0.75rem !important; font-weight:bolder;}
.HistKlik small 			{font-size:0.6875rem; color:#8a8a8a;}
.HistKlik .card-body 		{padding: 0.625rem;}





/* =============================
 	DetailVoucher
===============================*/

.GiftVoucher				{}
.GiftVoucher h1 			{font-size:1rem; font-weight:bolder;}
.GiftVoucher h2 			{font-size:0.875rem;}
.GiftVoucher h3 			{font-size:1rem; font-weight:bolder;}
.GiftVoucher p 				{font-size:0.875rem;}
.GiftVoucher a 				{font-size:0.75rem;}
.GiftVoucher .card-body 	{padding: 0.625rem;}

.DetailVoucher 				{border: none !important;}
.DetailVoucher h3 			{font-size:1rem; font-weight:bolder;}
.salinkode .btn-sm 			{font-size:0.75rem; }
p.kodevoucher				{font-size: 0.875rem;}


.BeliVoucher h3 			{font-size:1rem; font-weight:bolder;}
.BeliVoucher p 				{font-size:0.875rem;}
.BeliVoucher a 				{font-size:0.75rem;}
.BeliVoucher .card-body 	{padding: 0.625rem;}



/* =============================
 	Klikwallet
===============================*/

.infowallet .card-body 	{padding: 0.625rem;}
.topupWallet .card-body {padding: 0.625rem;}

.mywallet p 			{font-size:0.75rem; margin:0; padding: 0;}
.mywallet img 			{ margin: 0; padding: 0;}
.mywallet p strong 	    {font-size:1rem;}
.mywallet small         { font-size: 0.75rem; font-style: italic;  margin:0; padding: 0;}


.HisWall h5              {font-size:1rem; font-weight: bolder; padding: 0.5rem 0rem;}
.HistWallet p 			{font-size:0.875rem;}
.HistWallet small 		{font-size:0.75rem; color:#8a8a8a;}
.HistWallet p span 		{font-size:0.75rem !important; font-weight:bolder;}
.HistWallet .card-body 	{padding: 0.625rem;}


.topupWallet .form-control, .topupWallet .form-control:focus{
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: 1px solid #eaeaea;
    border-radius: 0;
    background: none;
    outline: none;
    box-shadow: none;
    padding: 0;
}

.formWallet .input-group-text  {background-color: none !important;  border: none !important;}

/* =============================
 	myprepaid
===============================*/

.infopre 				{padding: 0.625rem;}

.myprepaid p 			{font-size:0.831rem; margin:0; padding: 0;}
.myprepaid img 			{ margin: 0; padding: 0;}
.myprepaid p strong 	{font-size:0.813rem;}
.myprepaid small        {font-size: 0.75rem; font-style: italic;  margin:0; padding: 0;}


.HisPre h5              {font-size:1rem; font-weight: bolder; padding: 0.5rem 0rem;}
.ListPre 				{padding: 0.625rem;}
.ListPre p 				{font-size:0.875rem;}
.ListPre small 			{font-size:0.75rem; color:#8a8a8a;}
.ListPre p span 		{font-size:0.75rem !important; font-weight:bolder;}
.ListPre .card-body 	{padding: 0.625rem;}


.prepaid-list h5 		{ display:block; color:#1a1a1a; font-weight:bold; font-size:1.125rem;}
.prepaid-list p 		{margin: 0 !important; font-size: 0.875rem; color:#1a1a1a;}
.prepaid-list small p 	{line-height: 1.2; font-size: 0.75rem;}
.prepaid-list .list-group-item {padding-bottom: 0.625rem; }


/* =============================
 	Membership
===============================*/

.membership .card 		{border:0 !important; background:none !important;}
.membership .progress 	{height: 0.5rem;font-size: .75rem; margin-top:0.5rem;}
.membership .tier 		{margin:0; padding:0;}
.mnames img 			{border-radius:50%;}
.mdeal 					{font-size:0.8rem; background-color: rgb(0 0 0 / 20%); border-radius:1rem; padding:0.13rem; text-align:center;}

.membership .owl-item img { width:auto !important;}
.membership .owl-theme .owl-dots,
.membership .owl-theme .owl-nav {text-align: center;}

.mbenefit h3,
.mhowitworks h3,
.mtos h3			 	{font-size:1rem; font-weight:bolder;}

.mhowitworks .card,
.mtos .card				{border: none !important;border-radius:  0 !important;}

.mhowitworks .card-header,
.mtos .card-header 		{border-bottom:none !important; }


/* =============================
 	Referral Friend
===============================*/
.hiw h3 				{font-size:1rem; font-weight:bolder;}
.number_circle 			{width:2rem; height:2rem; border-radius:2rem; line-height:2; background:#eaeaea; text-align:center;}
.referralTos h3			{font-size:1rem; font-weight:bolder;}
.referralTos ol li 		{margin-bottom:0.5rem;}
.HisRefer  				{padding-top:0.3rem;padding-bottom:0.3rem;}
.HisRefer p 			{margin:0 !important; }


.copycode .form-control {border: 1px solid #ced4da !important; padding:0.5rem !important; max-width:7rem;}

.inputcopy .input-group-text { border-radius:0 !important;}
.copycode .form-control {border-top-left-radius: 3px;border-bottom-left-radius: 3px;}


.referralTos h3,
.referralHis h3 		{font-size:1rem; font-weight:bolder;}
.referralTos .card 		{border: none !important;border-radius:0 !important;}
.referralTos .card-header {border-bottom:none !important; }


/* =============================
 	Add New Address
===============================*/

.ListAdds h5 			{font-size:1rem; font-weight:bold; color:#1a1a1a !important;}
.ListAdds p 			{margin:0 !important;}
p.egaddress 			{margin:0 !important; padding:0 !important; font-size:0.8rem; color:#7a7a7a;}
.iframemaps 			{}
.mitramaps 				{background:#DDFFDB; padding:0.3rem; padding-bottom:0rem;}
.mitramaps p 			{padding-bottom:0.5rem;line-height:1.1;color:#006730;font-size:0.8rem; }


/* =============================
 	Change Address
===============================*/

.DetailAdds h5 			{font-size:1rem; font-weight:bold; color:#1a1a1a !important;}
.DetailAdds p 			{font-size:0.9rem; margin:0 !important;}

/* =============================
 	Contact Us
===============================*/
.ContactMenu 			{width: 100%;margin:0 !important; padding: 0 !important;}
.ContactMenuList 		{display: block ; position:relative; padding:1rem; background:#fff; height:5rem; color:#777; border-bottom:1px dashed #eaeaea;}
.ContactMenuList h3 	{font-size:0.9rem; font-weight:bolder; color:#1a1a1a; margin:0; padding:0;}
.ContactMenuList p 		{font-size:0.75rem; color:#7a7a7a; font-style:italic;margin:0; padding:0;}
.ContactRightBtn        { background-color:#fff !important; text-align:center; border:1px solid #54BDC8; color:#54BDC8; width:4rem; border-radius:0.3rem; font-size:0.7rem;}

/* =============================
 	Term of Use
===============================*/
.tos h3 				{font-size:1.5rem; margin-top:1rem; font-weight:bolder;}
.tos h5 				{font-size:1.2rem; margin-top:1rem; font-weight:bolder;}
.tos ol li 				{font-size:0.875rem;}
.tos ul li              {font-size:0.875rem;}
.tos table  			{font-size:0.875rem;}
.tostable thead,
.tostable th,
.tostable td 			{border-top: 1px dashed #eaeaea;}
.tostable thead th 		{border-bottom: 1px dashed #eaeaea;}
.tos  p  				{font-size:0.875rem;}

.tos .HeadingPage 		{color:#16375E; font-size:1.25rem; font-weight:bolder; text-align:left; padding:0.625rem 0;}
.modal-full 			{min-width: 100%;margin: 0;}
.modal-full .modal-content {min-height: 100vh;}


/* =============================
 	Online Payment
===============================*/

.OnlinePayment .list-group-item {padding: 0.625rem 0rem;}
.OnlinePayment .imgbox 			{width:70px; display:inline-block; padding-left:0.5rem; margin-right:0.5rem; text-align:center;}
.OnlinePayment  span 			{font-size:0.875rem; margin-left:1rem;}

/* =============================
 	Apps Alert
===============================*/

.alert-apps    			{background-color:rgb(23 162 184 / 70%); margin-bottom:0rem !important; }
.alert-apps        		{padding: 0.313rem; border-radius:0rem !important;}
.alert-apps small 		{text-shadow: 0rem 0.063rem 0.125rem #16375E; line-height:2;}
.alert-apps .close 		{padding: 0.313rem 0.75rem;}
.alert-apps  			{color:#fff;}
.alert-apps span  		{color:#fff;text-shadow: 0rem 0.063rem 0.125rem #16375E;}
.btn-apps  				{color: #000 !important;background-color: #fff;border-color: #fff; padding:0.125rem 0.313rem; border-radius:0.25rem; font-size:0.75rem; margin-left:0.313rem; font-weight:bolder;}
.insblogbtn 			{color: #1a1a1a;background-color: #fff;border-color: #eaeaea;margin-left: 1rem;font-size: 0.625rem;font-weight: bold;}


/* =============================
 	Login Alert
===============================*/

.alert-login 			{color:#fff;background-color:rgba(84, 189, 200, 0.9); border-color:#54BDC8; padding:0.3rem 0.5rem !important; margin-bottom: 0rem !important; border-radius:0 !important;}
.alert-login hr 		{border-top-color:#54BDC8}
.alert-login 			{color:#fcff00; font-size:0.8rem;}
.alert-login a 			{color:#fff; margin-left:0.3rem; text-decoration:underline;}
.alert-instagram .fa 	{ margin-right:0.2rem;}
.alert 					{position: relative; border: 1px solid transparent;}
.alert-apps span  		{color:#fff;text-shadow: 0rem 0.063rem 0.125rem #16375E;}
.alert-login  .close 	{float: right;font-size: 1.5rem; margin-top:0 !important;line-height:0.6; color:#fff;text-shadow: 0rem 0.063rem 0.125rem #16375E;}

/* =============================
 	Login
===============================*/

.login 						{}
.login h3					{font-size:1.25rem;font-weight: bolder;}
.login label				{font-weight: bolder;font-size:0.875rem;}
.login p 					{font-size:0.8125rem;}
.login small 				{font-style:italic;}

/* =============================
 	Send OTP
===============================*/

.sendOTP h5					{font-size:1rem; text-align:center;}
.sendOTP .btn-wa 			{border-radius: 1.25rem !important;}
.sendOTP .btn-knc 			{border-radius: 1.25rem !important;}

/* =============================
 	Input OTP
===============================*/

.inputOTp h5					{font-size:1rem; padding-top:1rem;}
.inputOTp .form-group			{}
.inputOTp .form-group input		{width:2.5rem;  height:2.5rem; text-align:center !important; border: none; border-bottom:1px solid #aeaeae !important;}
.inputOTp p  					{display:block;}
.inputOTp p strong 				{display:block;}


.inputOTp .resend p,
.inputOTp .resend a 			{margin:0 !important; }
.inputOTp .resend a				{color:#54BDC8; font-weight:bolder; text-decoration:underline;}
.inputOTp p span 				{ font-weight:bold;}
.inputOTp .resend p 			{display:block !important;}
.pnumber 						{font-size:1.5rem;}

/* =============================
 	Blog
===============================*/

.blogs 							{padding:0.625rem 0rem;}
.blogs h3 						{font-size:1.25rem; font-weight:bolder;}
.blogs .card 					{border:none !important;}
.blogs .bviewall 				{color:#54BDC8; text-decoration: underline; margin-right:0.5rem; font-size:0.875rem;float:right;}
.blogs .item h5 				{color: #000 !important;font-size:0.938rem !important;}
.blogs .item p 					{font-size:0.813rem; margin:0 !important; padding:0 !important;}
.blogs .card 					{ border-radius:0.5rem !important;}
.blogs .item a:hover      		{text-decoration:none !important;}

.hmcategori 					{font-size: 0.625rem;background: rgba(59, 145, 49, 0.81) !important;color: #fff;padding: 1px 3px;}

.blogs  .card-body 				{padding: 0.5rem !important; padding-top:0rem !important; min-height:7rem !important;}

.categories 					{background:#fff !important; padding-top:0rem !important; height:100% !important;}
.categories .card 				{border:none !important;}

.boxblog 						{background:#fff !important; padding:0.625rem 0rem; height:100% !important;}
.boxblog h3 					{font-size:1rem !important; font-weight:bolder;}
.boxblog .card 					{border:none !important;}
.boxblog .nav-item 				{}

.dblogs .tdb_single_categories	{font-size: 0.625rem; color: #fff; padding: 3px 6px 4px;background: #F31A47 !important; margin:0 !important;}
.dblogs h1 						{font-size:1.5rem; margin-top:0.5rem;}
.dblogs h2 						{font-size:1.125rem;}
.dblogs .copy-img 				{}
.dblogs .feature-img 			{margin:1rem 0rem;}
.dblogs p						{ font-size:1rem}
.dblogs p a						{ font-size:1rem; color:#54BDC8 !important;}

.related 						{}
.related h3 					{font-size:1.25rem;color:#000;}
.related .card 					{border:none !important;}
.related a  				 	{font-size:1rem; color:#333 !important;}
.related .item a:hover      	{text-decoration:none !important;}
.related img 					{border-radius:0.25rem;}
.related .bviewall 				{color:#54BDC8; text-decoration: underline; margin-right:0.5rem; font-size:0.875rem;font-weight:bolder;float:right;}
.related .item h5 				{color: #000 !important; font-weight:bolder;font-size: 0.875rem !important;}
.related .item p 				{font-size:0.813rem; margin:0 !important; padding:0 !important;}
.related  .card-body 			{padding: 0.5rem !important; min-height:6.5rem !important;}


.topmenu .fa					{float:left; font-size:1.25rem !important; margin-right:1rem;}
.topmenu a.btnback 				{color:#54BDC8 !important;}
.topmenu h3						{text-align:left !important; font-size:1rem !important; color:#333; overflow: hidden; text-overflow: ellipsis;letter-spacing: inherit;font-size: inherit;}
h3.dblogscat 					{font-size:0.813rem !important; }
h3.dblogscat  a					{color:#54BDC8 !important;}
h3.dblogscat  a:hover			{color:#16375E !important; text-decoration:none !important;}


ul.share-buttons 				{list-style:none; margin:0 !important; padding:0 !important; }
ul.share-buttons li 			{ display:inline-block; margin:0.5rem !important;}
ul.share-buttons li a 			{ display:block; border-radius: 50%; width:2.5rem; height:2.5rem;;text-align: center;line-height: 2.5rem; font-size: 1rem;}
ul.share-buttons li a .fa 		{ color:#fff !important;}
ul.share-buttons li a.facebook 	{background: #135CB6!important;}
ul.share-buttons li a.twitter 	{background: #00ACED!important;}
ul.share-buttons li a.emails 	{background: #16375E!important;}
ul.share-buttons li a.instagram {background: #E84E89!important;}
ul.share-buttons li a.whatsapp 	{background: #1FB381!important;}
.sharepost h5 					{font-size:0.813rem;color:#000; font-weight:bolder;}

.blogcat .card 					{border:none !important;}
.badgecat						{font-size: 0.625rem; color: #fff; padding: 3px 6px 4px;background: #F31A47 !important;}
.ftrtitle 						{text-align: left !important; padding:1rem 0.5rem !important;left:0 !important;
bottom: 0 !important;text-align: left !important; width:100% !important;
background: rgb(0,0,0);background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 60%);}

.ftrtitle h5 					{text-shadow: 0.125rem 0.125rem 0.25rem #000;}
ol.ftr_ind li 					{background-color: #fff; opacity: .5;}

ol.ftr_ind .carousel-indicators .active {background-color: #FF8000 !important;}



a.listcat 						{color: #555; border: 1px solid #54BDC8;display: inline-block; border-radius: 1.25rem; padding: 0 0.5rem;margin: 0.25rem;font-size: 0.9rem;}
a.listcat span 					{color: #54BDC8; font-weight:bolder;}
a.listcat:hover 			    {background-color:#54BDC8; color:#fff; text-decoration:none;}
a.listcat:hover span 			{color: #fff;}
.blogitem 						{padding-bottom:0.5rem !important;}

.bcategori 						{font-size: 0.625rem; position:absolute; left:0.938rem; top:0rem;background: rgba(59, 145, 49, 0.81) !important; color: #fff; padding: 1px 3px;}


.bdate 							{font-size: 0.6875rem; color:#aaa;}
.blogitem h5					{font-size:0.938rem; color:#1a1a1a; margin-bottom: 0 !important; margin-bottom:0.25rem !important;}
.blogitem a:hover				{text-decoration:none;}
.blogitem .card-body 			{padding:0 !important;}
.navblog a.nav-link				{color:#555;}
.navblog a.nav-link.active		{border-bottom: 0.125rem solid !important;}


/* =============================
 	Footer
===============================*/
footer .row				{padding:0 !important; background-color:#fff;}
footer .container		{padding:0 !important;}
footer .col				{margin:0 !important; padding:0 !important;}

.BtmNav 			 	{margin:0; padding:0;}
.BtmNavList a 		 	{color:#777 !important; font-size:0.75rem; display:block;text-decoration:none; padding:0.3rem 0 !important;}
.BtmNavList a:hover  	{color:#777 !important; background:#eaeaea; text-decoration:none;}
.BtmNavList a.active 	{ background-color:#F5F7F7; color:#54BDC8 !important;}
.copyright   			{font-size:0.75rem; color:#9a9a9a;}

.icon_nav 				{width: 20px;height: 20px;background-size: cover;margin:0 auto;display:block;}
.icon-home 				{background-image:url("/frontend/img/mobile/menu/Home.svg");}
.icon-home:hover,
.icon-home:focus,
.icon-home.active,
.icon-home:active 		{background-image:url("/frontend/img/mobile/menu/Home-Active.svg");}

.icon-order 			{background-image:url("/frontend/img/mobile/menu/Order.svg");}
.icon-order:hover,
.icon-order:focus,
.icon-order.active,
.icon-order:active		{background-image:url("/frontend/img/mobile/menu/Order-Active.svg");}

.icon-paket 			{background-image:url("/frontend/img/mobile/menu/Paket.svg");}
.icon-paket:hover,
.icon-paket:focus,
.icon-paket.active,
.icon-paket:active		{background-image:url("/frontend/img/mobile/menu/Paket-Active.svg");}

.icon-prepaid 			{background-image:url("/frontend/img/mobile/menu/Prepaid.svg");}
.icon-prepaid:hover,
.icon-prepaid:focus,
.icon-prepaid.active,
.icon-prepaid:active 	{background-image:url("/frontend/img/mobile/menu/Prepaid-Active.svg");}

.icon-profile 			{background-image:url("/frontend/img/mobile/menu/Profile.svg");}
.icon-profile:hover,
.icon-profile:focus,
.icon-profile.active,
.icon-profile:active	{background-image:url("/frontend/img/mobile/menu/Profile-Active.svg");}

.btn-secondary 			{color: #292b2c !important;background-color: #fff !important;border-color: #ccc !important;text-align:left !important;}




.counter 				{margin-top: .5rem!important; float:right !important; display:block; padding-right:2%;}
.counter .form-control[readonly] {background-color: #fff !important;bottom: 5px !important;}

input.count 			{ width:2rem; text-align:center; border:none; font-size:1rem; font-weight:bolder;}
.btn-circle 			{width:1.875rem; height: 1.875rem;padding: 0.313rem 0rem;border-radius: 0.938rem;text-align: center;font-size: 0.75rem;line-height: 1.2;
border: 0.125rem solid #54BDC8;color:#54BDC8;
margin-top:-0.188rem;}

.btn-circle-disable 	{border: 0.125rem solid #98A0A0;color:#98A0A0;}
.timeline 				{position: relative;border-color: rgba(160, 175, 185, .15);padding: 0;margin: 0}
.tl-item 				{border-radius: 3px;position: relative;display: -ms-flexbox;display: flex}
.tl-item>* 				{padding: 10px}
.tl-item:last-child .tl-dot:after {display: none}
.tl-item.active .tl-dot:before {border-color: #54BDC8;box-shadow: 0 0 0 4px rgba(68, 139, 255, .2)}
.tl-item:last-child .tl-dot:after {display: none}
.tl-item.active .tl-dot:before {border-color: #98A0A0;}
.tl-dot 				{position: relative;border-color: rgba(160, 175, 185, .15)}
.tl-dot:after,
.tl-dot:before 			{content: '';position: absolute;border-color: inherit;border-width: 2px;border-style: solid;border-radius: 50%;width: 10px;height: 10px;top: 15px;left: 50%;transform: translateX(-50%)}

.tl-dot:after 			{width: 0;height: auto;top: 25px;bottom: -15px;border-right-width: 0;border-top-width: 0;border-bottom-width: 0;border-radius: 0}
tl-item.active .tl-dot:before {background:#54BDC8;}
.tl-dot 				{position: relative;border-color: rgba(160, 175, 185, .15)}

.tl-dot:after,
.tl-dot:before {
    content: '';
    position: absolute;
    border-color: inherit;
    border-width: 2px;
    border-style: solid;
    border-radius: 50%;
    width: 10px;
    height: 10px;
    top: 15px;
    left: 50%;
    transform: translateX(-50%)
}

.tl-dot:after {
    width: 0;
    height: auto;
    top: 25px;
    bottom: -15px;
    border-right-width: 0;
    border-top-width: 0;
    border-bottom-width: 0;
    border-radius: 0
}


.b-warning {border-color: #98A0A0 !important}
.b-primary {border-color: #98A0A0 !important}
.b-danger {border-color: #f54394 !important;}






/** ------------ Custom ------------- */
.animate-bottom {
  position: relative;
  animation: animatebottom 0.4s;
}
.modal.show.animate-bottoms {
  position: relative;
  animation: animatebottomclose 0.4s;
}
@keyframes animatebottom {
  from {
    bottom: -300px;
    opacity: 0;
  }
  to {
    bottom: 0;
    opacity: 1;
  }
}
.modal-dialog{
	width: 100%;
	z-index: 1051 !important;
	left: 50% !important;
	-webkit-transform: translateX(-50%) !important;
	transform: translateX(-50%) !important;
}
.modal.show .modal-dialog {
	position: absolute;
	bottom: 0;
	margin: 0;
    overflow: hidden;
    max-width: 30rem;
}
.animate-bottom-close {
  position: relative;
  animation: animatebottomclose 3s;
  animation-direction: alternate;
}
@keyframes animatebottomclose {
  20% {bottom: -500px;}
}
.modal-open .modal{
    overflow: hidden;
}

/*Datepicker style*/
#datepicker{ margin:0;width:100%; }
.ui-widget.ui-widget-content {width: 100%;background-color: #fafafa;}
table.ui-datepicker-calendar { height: 100px !important; }
.ui-state-default{ font-size: .8rem;}

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active {
    border: 1px solid transparent !important;
    border-radius: 50% !important;
    background: none;
    margin: 0 auto;
}

.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {
    background: #F8E184 !important;
    color: #1a1a1a !important;
}

.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover {
    color: #fff !important;
    background: #54BDC8 !important;
    text-align: center !important;
}

.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default,
.ui-button,
html .ui-button.ui-state-disabled:hover,
html .ui-button.ui-state-disabled:active {
    color: #5a5a5a;
}

.ui-state-default{
    font-weight: normal !important;
}
.ui-datepicker td span, .ui-datepicker td a {
    text-align: center !important;
}
.ui-datepicker td {
    text-align: center !important;
}
.ui-widget-header{
    border: none !important;
    background: #fafafa !important;
}
.ui-datepicker td span, .ui-datepicker td a {
    height: 30px;
    width: 30px;
    line-height: 24px;
}
.ui-datepicker-next span {
    background-position: -32px 0 !important;
}
.ui-datepicker-prev span {
    background-position: -96px 0 !important;
}
.ui-widget.ui-widget-content {
    border: 0px !important;
}
.ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br {
    border-bottom-right-radius: 0 !important;
}
.ui-corner-all, .ui-corner-bottom, .ui-corner-left, .ui-corner-bl {
    border-bottom-left-radius: 0 !important;
}
.ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr {
    border-top-right-radius: 0 !important;
}
.ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl {
    border-top-left-radius: 0 !important;
}
.ui-widget-content {
    border: 0 !important;
}
/*End Datepicker style*/

.itemsbox_btn{
    background-color: white !important;
    border-radius: 50px !important;
    border: 2px solid grey;
    color:grey;
    padding: 0px !important;
    height:30px !important;
    width:30px !important;
    font-size:15px !important;
    vertical-align: center;
    box-shadow: none !important;
    margin: 0 !important;
}
.counter .form-control[readonly] {background-color: #fff !important;}
input.count{padding-left: 0 !important;padding-right: 0 !important; width: 30px !important;}

.bootstrap-touchspin-down::before { font-family: "Font Awesome 5 Free"; font-weight: 700; content: "\f068"; }
.bootstrap-touchspin-up::before { font-family: "Font Awesome 5 Free"; font-weight: 700; content: "\f067"; }

.count-input{
    border: 0px solid #b2c7de;
    width: 40px !important;
    border-radius: 5px !important;
    text-align: center !important;
    height: 32px !important;
    margin:0 !important;
    padding:0 !important;
}
.counter .form-control[readonly]:focus{border:0px !important;outline: none !important; box-shadow: none !important}

input[type=number] {
  -moz-appearance: textfield;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

#fixed-bottom{ z-index: 1031!important;min-height: 45px;}

/**
.loadingD {display: none;position: fixed;z-index: 1051;top: 0;left: 0;height: 100%;width: 100%;background: rgba( 0, 0, 0, .5 ) url('/img/icons/loadingd.gif') 50% 50% no-repeat;}*/
.loadingD {display: none;position: fixed;z-index: 1051;top: 0;left: 0;height: 100%;width: 100%;background: rgba( 0, 0, 0, .5 ) 50% 50% no-repeat;text-align: center;}
body.loading .loadingD {
    display: flex;justify-content: center;
}
#spinnerLoading{
    display: block;
    margin: auto;
    width: 50px;
    height: 50px;
    top: 50%;
}

/* =============================
 	Login
===============================*/

.login 						{}
.login h3					{font-size:1.25rem;font-weight: bolder;}
.login label				{font-weight: bolder;font-size:0.875rem;}
.login p 					{font-size:0.8125rem;}
.login small 				{font-style:italic;}

/* =============================
 	Send OTP
===============================*/

.sendOTP h5					{font-size:1rem; text-align:center;}
.sendOTP .btn-wa 			{border-radius: 1.25rem !important;}
.sendOTP .btn-knc 			{border-radius: 1.25rem !important;}
.inputOTp .form-group input	{width:3rem;  height:2rem; text-align:center !important; border-radius:0.313rem; border:1px solid #54BDC8;}

/* =============================
 	Input OTP
===============================*/

.inputOTp h5					{font-size:0.875rem;text-align:center !important;}
.inputOTp .form-group			{display:block; margin:0 auto; width:13rem;}
.inputOTp .form-group input		{width:3rem;  height:2.375rem; text-align:center !important; border-radius:0.313rem; border:1px solid #54BDC8;}
.inputOTp p strong 				{ text-align:center; display:block;}

.inputOTp .resend p,
.inputOTp .resend a 			{font-size:0.875rem; margin:0 !important; }
.inputOTp .resend a				{color:#54BDC8; font-weight:bolder; text-decoration:underline;}

.inputOTp p span 				{ font-weight:bold;}

/* =============================
 	Input OTP
===============================*/

.inputPin h5					{font-size:0.875rem;text-align:center !important;}
.inputPin .form-group			{display:block; margin:0 auto; width:17rem;}
.inputPin .form-group input		{width:2.5rem;  height:2.375rem; text-align:center !important; border-radius:0.313rem; border:1px solid #54BDC8;}
.inputPin p strong 				{ text-align:center; display:block;}

.inputPin .resend p,
.inputPin .resend a 			{font-size:0.875rem; margin:0 !important; }
.inputPin .resend a				{color:#54BDC8; font-weight:bolder; text-decoration:underline;}
.inputPin p span 				{ font-weight:bold;}

/**
.ListVideo .imgSection          {height: 150px; overflow: hidden;}
.ListVideo .imgSection a        {position: absolute;top: 0;height: 150px; width:100%}
.ListVideo .imgSection a img    {height: auto;max-width: 100%; vertical-align: middle;position: absolute;top: -50%;}
.ListVideo .imgSection img.playButton       {vertical-align: middle;top: 0;left: 0;bottom: 0;right: 0;width: 70px; display: flex; align-items: center;margin:auto;}
**/

.ListVideo .imgSection          {height: 250px;overflow: hidden;}
.ListVideo .imgSection a        {}
.ListVideo .imgSection a img    {position: absolute;top: -9999px;bottom: -9999px;left: -9999px;right: -9999px;margin: auto;width: 100%;}
.ListVideo .imgSection img.playButton       {vertical-align: middle;top: 0;left: 0;bottom: 0;right: 0;width: 70px; display: flex; align-items: center;margin:auto;}

hr {
    border-style: dashed;
}
.OrderConfirm p { margin-bottom: 0.5rem}

input::placeholder {
    /* Firefox, Chrome, Opera */
    /* padding-left: 10px; */
}
#formWallet input{padding-left: 15px !important; }
.KonfirmasiOrderGift{height: 45px;}

/* =============================
 	Hydro Cleaning
===============================*/
.BoxListVacuum 			{border-bottom:1px solid #eee; padding:0.5rem 0rem;}
.ListVacuum p { margin:0 !important; padding:0 !important; font-weight:bolder; font-size:0.875rem;}

/* Pest Control */
.ListPest 						{border-bottom: 1px dashed #eaeaea !important;}
.ListPest p  					{padding:0 !important; margin:0 !important;}
.ListPest p strong 				{font-size:1rem;}
.ListPest .counter              {bottom: 0;position: absolute;right: 0;}

.topupWallet .input-group-text 	{background-color:#fff !important; border: none !important; border-bottom:1px solid #eaeaea !important; text-align:left !important;}

.avatar-circle 				{width: 2.5rem; height: 2.5rem; background-color:#54BDC8 ;text-align: center;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;}
.initials 					{position: relative;top: 0.125rem;font-size: 1rem;line-height: 2.3rem;color: #fff;/* font-weight: bolder; */}

/**
::-webkit-scrollbar { display: none; }
html, body {
  -ms-overflow-style: none;  /* IE and Edge
  scrollbar-width: none;  /* Firefox
}
*/

/* =============================
 	---
===============================*/
.address-home{background:#EFFFE2;}
.address-home a{color:#212529;font-size: 0.857rem;font-weight: bold;}
.address-home .textAddressName{}
.address-home .textAddressDefault, .address-home .textAddressDefaults{font-size: 0.8rem;padding-left: 23px;}

.box-disabled, .box-disabled h5{color:#999999!important;}
.box-disabled .noteDisabled {color:red!important;}

#textBookedDate, #promoCode, #textDuration{font-weight: normal;;}

.switch {position: relative;display: inline-block;width: 40px;height: 15px;}
.switch input {opacity: 0;width: 0;height: 0;}
.slider {position: absolute;cursor: pointer;top: 0;left: 0;right: 0;bottom: 0;background-color: #ccc;-webkit-transition: .4s;transition: .4s;}
.slider:before {position: absolute;content: "";height: 25px;width: 25px;left: 0px;bottom: -5px;background-color: #ccc;-webkit-transition: .4s;transition: .4s;}
input:checked + .slider {background-color: #54BDC8;}
input:focus + .slider {box-shadow: 0 0 1px #54BDC8;}
input:checked + .slider:before {-webkit-transform: translateX(15px);-ms-transform: translateX(15px);transform: translateX(15px);background-color: #54BDC8;}
/* Rounded sliders */
.slider.round {border-radius: 34px;}
.slider.round:before {border-radius: 50%;}

.plus-button {
	border: 2px solid #54BDC8;
	background-color: #54BDC8;
	font-size: 16px;
	height: 1.7rem;
	width: 1.7rem;
	border-radius: 999px;
	position: relative;
}
.plus-button:after,
.plus-button:before {
    content: "";
    display: block;
    background-color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.plus-button:before {
    height: 1em;
    width: 0.2em;
}
.plus-button:after {
    height: 0.2em;
    width: 1em;
}
.plus-button--small {
	font-size: 12px;
}
.plus-button--large {
	font-size: 22px;
}

.numSchedule{color: gray}

#assignedCleaner .photo{height: 45px; overflow-y: hidden;border-radius: 50%;}
#assignedCleaner input[type="radio"]:checked{background-color: #54BDC8 !important}
#assignedCleaner .bi-star-fill{ font-size: 0.867rem;top: 1.482rem;position: absolute;margin-left: 3px;color: green;}

.selectedCleaner{ cursor: pointer;}

.tutorial_list a span{color:#007bff!important}
.tutorial_btn_nav {position: fixed; bottom: 0px;left: 0;right: 0;z-index: 1032;}
.tutorialSlider img{height: 75vh; }

.bg-notif{background: #EFFFE2!important;}
.bg-info{background: #FFFCEC!important;}
.bg-info p, .bg-info span{font-size: 0.767rem;}
.btn-cancel, .btn-cancel:hover {   border: 1px solid #54BDC8!important;  color: #54BDC8!important;background-color: #fff!important; }
.btn-cancel:focus, .btn-cancel:focus-visible{box-shadow: none!important;}
@media screen and (max-width: 420px) {
    .confirmTitle, .confirmTitle .btn{font-size: 0.856rem!important;}
}
@media screen and (max-width: 320px) {
    .confirmTitle > div { flex: 0 0 100%!important;max-width: 100%!important;}
    .btn-knc, .btn-cancel{font-size: 0.856rem!important;}
    .guest small {font-size: 75%!important;}
    .sprofile .btn-topup{font-size: .846rem!important}
    .sprofile .pro_pict img{width: 40px!important; height: 40px!important;}
}

.icon-tnc{font-size: 70px;color:#54BDC8}

.switch-round {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch-round input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider-round {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider-round:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider-round {
  background-color: #54BDC8;
}

input:focus + .slider-round {
  box-shadow: 0 0 1px #54BDC8;
}

input:checked + .slider-round:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider-round.round {
  border-radius: 34px;
}

.slider-round.round:before {
  border-radius: 50%;
}

.display-table{
  display: table;
  height: 100%;
}
.display-cell{
  display: table-cell;
  vertical-align: middle;
}
.confirm_tnc{font-size: 0.898rem;}

.info_building_content {margin-bottom: 0!important;}

.btn-guest, .guest img, .sp_wallet p {margin-top:auto!important; margin-bottom: auto!important;}
.guest .col-10{ justify-content: right; }

/***.accordion-body > ol {padding-left: 25px!important;}**/


#service_title{font-weight: bold;}
#service_content{font-size: 0.85rem;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.show-animate{white-space: normal!important; overflow: auto!important;}
#readMore{}
.description{
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.textAddressDefault{
    display: -webkit-box!important;
    max-width: 100%;
    margin: 0 auto;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.starIcon{margin-left: 5px; margin-bottom: 4px;}