/*
image : 
https://www.flaticon.com/packs/social-media-236
https://www.flaticon.com/packs/miscellany-texts-and-badges-32
https://www.flaticon.com/packs/delivery-178
https://www.flaticon.com/packs/e-commerce-99
https://www.flaticon.com/packs/management-2
color : https://colorhunt.co/palette/00a19dfff8e5ffb344e05d5d
407BFF
storyset
<a href="https://storyset.com/money">Money illustrations by Storyset</a>
<a href="https://storyset.com/water">Water illustrations by Storyset</a>
https://storyset.com/illustration/online-groceries/rafiki/animate
https://storyset.com/illustration/discount/rafiki/animate
*/

@font-face {
	font-family: 'JosefinSans';
	font-style: normal;
	font-weight: 400;
	src: local('JosefinSans'), local('JosefinSans-Regular'), url(../fonts/JosefinSans-Regular.ttf) format('truetype');
}

.page {
	/* font-family: 'JosefinSans', sans-serif !important; */
	font-family: 'Mulish', sans-serif !important;
}

.splash-page {
	background-color: #343F56;
}

.alif-main-menu-list {
	margin-bottom: 5px;
}

.alif-main-menu-list-icon {
	height: 80px !important;
}

.alif-page {
	/* background-color: #548CA8; */
	/* background-color: #CDF0EA; */
	background-color: #FAF3F3;
	color: #334257;
}

.alif-splash {
	background-image: url("img/splash.jpg");
	background-repeat: no-repeat;
	/* background-position: right top;
    margin-right: 200px;
    background-attachment: fixed; */
	height: 100%;
	width: 100%;
}

.alif-menu-button {
	/* background-color: #334257; */
	/* background-color: #FFBCBC; */
	background-color: #476072;
	text-align: center;
	color: #EEEEEE;
	font-size: large;
}

.alif-dzikir-title {
	text-align: center;
	/* font-weight: bold; */
	font-size: 15pt;
}

.alif-dzikir-arabic {
	font-family: 'Amiri';
	text-align: right;
	font-size: 15pt;
	line-height: 2;
}

.alif-dzikir-arabic.taawudz {
	text-align: center !important;
	font-size: 16pt !important;
	font-weight: bold;
}

.alif-dzikir-translate {
	text-align: justify;
	font-size: 10pt;
}



/* Slider / Banner */

.demo-swiper .swiper-slide {
	font-size: 25px;
	font-weight: 300;
	display: flex;
	justify-content: center;
	align-items: center;
	background: #fff;
	color: #000;
}

.demo-swiper .swiper-slide {
	box-sizing: border-box;
	border: 1px solid #ddd;
	background: #fff;
}

.demo-swiper {
	/* margin: 0px 0 35px; */
	font-size: 18px;
	height: 180px;
}

.swiper-slide-alif {
	border-radius: 5px 5px;
	border-style: none;
	background-position: center !important;
	background-repeat: no-repeat !important;
	background-size: cover !important;
}

.demo-swiper.demo-swiper-auto .swiper-slide {
	width: 85%;
}

.demo-card-header-pic .card-header {
	height: 40vw;
	background-size: cover;
	background-position: center;
	color: #fff;
}

.demo-card-header-pic .card-content-padding .date {
	color: #8e8e93;
}

/* Order tabbar */

.order-tabbar {
	background-color: #fff;
	color: #000;
}

.order-tabbar .toolbar-inner .tab-link {
	color: #000;
}

.order-tabbar .toolbar-inner .tab-link-active {
	color: #00A19D;
}

/* Table */

.w3-border-blue,
.w3-hover-border-blue:hover {
	border-color: #2196F3 !important;
}

.w3-pale-blue,
.w3-hover-pale-blue:hover {
	color: #000 !important;
	background-color: #ddffff !important;
}

.w3-leftbar {
	border-left: 6px solid #ccc !important;
	border-left-color: rgb(204, 204, 204);
}

.w3-border-bottom {
	border-bottom: 1px solid #007875 !important;
	border-bottom-color: #007875;
}

.atable {
	border-collapse: collapse;
}


:root {
	/* --primary-color: #47648B;
	--primary-light-color:#50709c;
	--secondary-color: #484A51;
	--tertiary-color:#2BAAB1; */
	--primary-color: #2B7A0B;
	/* --primary-color: #005555; */
	--primary-light-color: #5BB318;
	--secondary-color: #F8B400;
	--tertiary-color: #FF6363;
	/* 005555 */
}

.bg-custom-primary {
	background-color: var(--primary-color) !important;
}

.bg-custom-secondary {
	background-color: var(--secondary-color) !important;
}

.bg-custom-tertiary {
	background-color: var(--tertiary-color) !important;
}

.bg-custom-4 {
	background-color: var(--primary-light-color);
}

.border-custom-primary {
	border-color: var(--primary-color) !important;
}

.border-custom-secondary {
	border-color: var(--secondary-color) !important;
}

.border-custom-tertiary {
	border-color: var(--tertiary-color) !important;
}

.border-custom-4 {
	border-color: var(--primary-light-color);
}

/* 4675A9 */
.color-custom-1 {
	color: var(--primary-color);
}

.color-custom-2 {
	color: var(--secondary-color);
}

.color-custom-3 {
	color: var(--tertiary-color);
}

.color-custom-4 {
	color: var(--primary-light-color);
}

.color-custom-5 {
	color: #F58840;
}

.alif-head-image {
	background-size: cover;
	border-radius: 50px;
	position: absolute;
	width: 50px;
	height: 50px;
	right: 0;
	margin-top: -60px;
	z-index: 98;
	box-shadow: 0 5px 30px 0 rgba(0, 0, 0, .11), 0 5px 15px 0 rgba(0, 0, 0, .02) !important;
}


.blink {
	animation: fade 3000ms infinite;
	-webkit-animation: fade 3000ms infinite;
}

/* 
HEADER
*/


.main-primary-header {
	height: 130px;
	width: 100%;
	border-bottom-left-radius: 0px;
	border-bottom-right-radius: 75px;
	top: 0;
	z-index: -1;
	position: absolute;
	overflow: hidden;
	background-color: var(--primary-color);
}

.main-secondary-header {
	height: 135px;
	width: 100%;
	border-bottom-left-radius: 0px;
	border-bottom-right-radius: 75px;
	top: 0;
	z-index: -1;
	position: absolute;
	overflow: hidden;
	background-color: #F6CA15;
}

.primary-header {
	height: 70px;
	width: 100%;
	border-bottom-left-radius: 0px;
	border-bottom-right-radius: 75px;
	top: 0;
	z-index: -1;
	position: absolute;
	overflow: hidden;
	background-color: var(--primary-color);
}

.secondary-header {
	height: 75px;
	width: 100%;
	border-bottom-left-radius: 0px;
	border-bottom-right-radius: 75px;
	top: 0;
	z-index: -1;
	position: absolute;
	overflow: hidden;
	background-color: #F6CA15;
}

/* CATEGORY CARDS
https://osumstudio.com/envato/purposeapp/
*/

.category-cards {
	margin: 0 -6.5px;
	display: flex;
	flex-wrap: wrap;
	box-sizing: border-box;
}

.category-card-inner {
	width: calc(33.33% - 13px);
	height: 133px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: center;
	text-align: center;
	padding: 15px;
	margin: 7px 6.5px;
	box-sizing: border-box;
	background: #ffffff;
	border-radius: 8px;
	position: relative;
	border-color: #ddd !important;
	box-shadow: inset 0 0 0 1px #ddd;
}

/* border-color: #002410; */
/* box-shadow: inset 0 0 0 1px var(--primary-color); */

.categories-v2 .category-card-inner {
	width: 100%;
	height: 100%;
	border-radius: 100%;
	background: var(--theme-bg);
	transform: rotate(28deg);
	padding: 15px 20px;
	margin: 0;
}

.category-card-inner img {
	position: absolute;
	left: 50%;
	top: 36%;
	transform: translate(-50%, -50%);
	transition: all .3s ease;
}

.category-card-inner img+img {
	opacity: 0;
	visibility: hidden;
}

.category-card-inner span {
	font-size: 14px;
	font-weight: 700;
	color: var(--color37-to-a1);
	margin-bottom: 8px;
}

.categories-v2 .category-card-inner span {
	font-size: 12px
}

.category-card-inner.selected {
	background: var(--cate-selected-bg);
	box-shadow: inset 0 0 0 1px var(--cate-selected-bg);
}

.category-card-inner.selected img {
	opacity: 0;
	visibility: hidden;
}

.category-card-inner.selected img+img {
	visibility: visible;
	opacity: 1;
}

.category-card-inner.selected span {
	color: var(--color-white-x)
}

.password-input-toggle {
	position: absolute;
	width: 24px;
	height: 24px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	top: 50%;
	transform: translateY(-50%);
	right: 0px;
	opacity: .55
}

.password-input-toggle svg {
	fill: currentColor;
	width: 100%;
	height: 100%;
	display: block;
	object-fit: contain
}

.password-old-toggle {
	position: absolute;
	width: 24px;
	height: 24px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	top: 50%;
	transform: translateY(-50%);
	right: 0px;
	opacity: .55
}

.password-old-toggle svg {
	fill: currentColor;
	width: 100%;
	height: 100%;
	display: block;
	object-fit: contain
}

.password-new-toggle {
	position: absolute;
	width: 24px;
	height: 24px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	top: 50%;
	transform: translateY(-50%);
	right: 0px;
	opacity: .55
}

.password-new-toggle svg {
	fill: currentColor;
	width: 100%;
	height: 100%;
	display: block;
	object-fit: contain
}


@media (min-width: 768px) {

	body {
		max-width: 480px;
		margin: 0 auto;
		background: #fff;
		min-height: 100vh;
	}
	
	.pui-bottom-nav{
		max-width: 450px;
		margin: 0 auto;
	}

}