/* Globals */

@font-face {
    font-family: 'Droid Arabic Kufi';
    font-style: normal;
    font-weight: 400;
    src: url("../../vetrina/ttf/droid-kufi-regular.ttf");
	font-display: swap;
}

@font-face {
    font-family: 'Droid Arabic Kufi';
    font-style: normal;
    font-weight: 700;
    src: url("../../vetrina/ttf/droid-kufi-bold.ttf");
	font-display: swap;
}

* {
	font-family: 'Roboto', 'Droid Arabic Kufi';
}

body.debug * {
	outline: dashed 1px rgba(0, 0, 0, 0.1);
}

[v-cloak] {
  display: none;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
	font-family: 'Roboto';
	border-color: var(--input-border-color);
	-webkit-box-shadow: 0 0 0px 1000px var(--input-background) inset;
	transition: background-color 5000s ease-in-out 0s;
	-webkit-text-fill-color: var(--input-color);
}
::-webkit-calendar-picker-indicator {
    filter: var(--calender-icon-color);
}
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' data-prefix='fas' data-icon='angle-down' class='svg-inline--fa fa-angle-down fa-w-10' viewBox='0 0 320 512'%3E%3Cpath fill='%23bbb' d='M143 352L7 216c-9-9-9-24 0-34l23-22c9-10 24-10 34 0l96 96 96-96c10-10 25-10 34 0l23 22c9 10 9 25 0 34L177 352c-9 10-25 10-34 0z'/%3E%3C/svg%3E")!important;
}
.input-group:focus-within{
	box-shadow: 0 0 3pt 2pt var(--input-focus-color);
	border-radius: 10px;
}
.input-group:focus-within input:focus{
	box-shadow :none;
	border-color: var(--input-border-color);
}
.form-control{
	color: var(--input-color);
}
.form-control:focus{
	color: var(--input-color);
}
.form-control::placeholder{
	color: var(--input-plcaeholder-color);
}
.form-control[readonly]{
	background-color: var(--background);
}
p:lang(ar) {
	line-height: 175%;
}

ul:lang(ar) {
	line-height: 200%;
}

body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	background-color: var(--background);
	color: var(--font-color);
	font-family: 'Roboto', sans-serif;
}
body * {
	font-family: 'Roboto', sans-serif;
}
.font-roboto * {
	font-family: 'Roboto', sans-serif;
}
.font-times_new_roman * {
	font-family: 'Times New Roman', sans-serif;
}
.font-arial * {
	font-family: 'Arial', sans-serif;
}
.font-kufam * {
	font-family: 'Kufam', cursive;
}
.font-tajawal * {
	font-family: 'Tajawal', sans-serif;
}
.font-aref-ruqaa * {
	font-family: 'Aref Ruqaa', serif;
}
.font-mada * {
	font-family: 'Mada', sans-serif;
}
.font-alef * {
	font-family: 'Alef', sans-serif;
}
.font-patrick-hand * {
	font-family: 'Patrick Hand', cursive;
}
.font-genos * {
	font-family: 'Genos', sans-serif;
}
.font-cairo * {
	font-family: 'Cairo', sans-serif;
}
.font-amiri * {
	font-family: 'Amiri', serif;
}
.fa, .far, .fas {
    font-family: "Font Awesome 5 Free"!important;
}
.fab {
	font-family: "Font Awesome 5 Brands"!important;
}
a{
	color: var(--link-color);
}
a:hover{
	color: var(--link-hover);
}
#main-content {
	flex: 1;
}

/* Utilities */

.flex {
	display: flex;
}

.flex-row {
	display: flex;
	flex-direction: row;
}

.flex-col {
	display: flex;
	flex-direction: column;
}

.flex-center {
	justify-content: center;
}

.flex-end {
	justify-content: flex-end;
}

.flex-between {
	justify-content: space-between;
}

.flex-wrap {
	flex-wrap: wrap;
}

.flex-grow {
	flex-grow: 1;
}

.align-start {
	align-items: flex-start;
}

.align-center {
	align-items: center;
}

.align-end {
	align-items: flex-end;
}

.text-break {
	word-break: break-word;
}

.truncate {
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.max960 {
	max-width: 940pt;
}

.max740 {
	max-width: 640pt;
}

.w100 {
	width: 100%;
}

.pad-sides {
	padding-left: 24pt;
	padding-right: 24pt;
}

.mb-24 {
	margin-bottom: 24pt;
}

.mt-24 {
	margin-top: 24pt;
}

.mb-40 {
	margin-bottom: 40pt;
}

.mt-40 {
	margin-top: 40pt;
}

.flip-h {
	-webkit-transform: scaleX(-1);
	transform: scaleX(-1);
}

.flip-h-ar:lang(ar) {
	transform: scaleX(-1);
}

/*
	Bootstrap breakpoints (for reference)

	// Small devices (landscape phones, 576px and up)
	@media (min-width: 576px) { ... }

	// Medium devices (tablets, 768px and up)
	@media (min-width: 768px) { ... }

	// Large devices (desktops, 992px and up)
	@media (min-width: 992px) { ... }

	// Extra large devices (large desktops, 1200px and up)
	@media (min-width: 1200px) { ... }
*/

/* X-and-up Attributes */

@media (min-width: 576px) {
	[hidden-sm] {
		display: none !important;
	}
}

@media (min-width: 767px) {
	[hidden-md] {
		display: none !important;
	}
}

@media (min-width: 992px) {
	[hidden-lg] {
		display: none !important;
	}
}

@media (min-width: 1200px) {
	[hidden-xl] {
		display: none !important;
	}
}

/* X-and-down Attributes */

@media (max-width: 575px) {
	[hidden-sm-down] {
		display: none !important;
	}
}

@media (max-width: 766px) {
	[hidden-md-down] {
		display: none !important;
	}
}

@media (max-width: 991px) {
	[hidden-lg-down] {
		display: none !important;
	}
}

@media (max-width: 1199px) {
	[hidden-xl-down] {
		display: none !important;
	}
}

/* header */

.header .circular-btn {
	width: 36pt;
	color: var(--header-font-color); /* Blue Gray 600 */
	height: 36pt;
	cursor: pointer;
	display: flex;
	columns: red;
	border-radius: 50%;
	justify-content: center;
	transition-property: *;
	transition-duration: 0.25s;
}

.header .circular-btn i {
	color:var(--header-icon-color)
}

@media (hover: hover) {
	.header .circular-btn:hover{
		background: var(--header-background-hover);
	}
}

/* Menu */

.menu {
	display: flex;
	flex-direction: row;
	justify-content: center;
}

.menu .top-level-item {
	font-size: 14pt;
	color: inherit;
	text-decoration: none !important;
	min-width: 74pt;
	max-width: 148pt;
	text-align: center;
	transition-property: background;
	transition-duration: 0.2s;
	user-select: none;
}


.menu .item-hover {
	color: var(--header-font-color);
}
.menu .item-hover:hover {
	background: var(--header-background-hover);
	/* color: var(--header-hover); */
}

/* Breadcrumbs */

a.breadcrumbs {
	color:inherit;
	text-decoration: none;
}

a:hover.breadcrumbs {
	color:inherit;
	opacity: 60%;
}

/* Footer */

.footer {
	padding: 12pt 0 36pt;
	color: var(--footer-font-color);
	background: var(--footer-background);
	font-size: 11pt;
	padding-bottom: 130px;
}

.footer .title {
	color: var(--footer-title-font-color);
	font-size: 18.2px;
	font-weight: 700;
	margin-top: 24pt;
}

.footer .company-links a {
	display: block;
	font-size: 11pt;
	line-height: 175%;
	color: var(--footer-font-color);
}

.footer .legal-documents a {
	display: block;
	font-size: 11pt;
	line-height: 175%;
	color: var(--footer-font-color);
}

.footer-text {
	cursor: text;
}

.footer-text a {
	color: var(--footer-title-font-color);
}

.footer .partner-logo {
	height: 32px;
	width: 88%;
	margin-bottom: 16px;
	object-fit: contain;
}

.footer .partner-logo-container {
 	padding: 0px 0px 0px 15px;
}

.footer .partner-logo-frame {
	height: 60pt;
	padding: 0pt;
}

.footer .partner-logo:lang(en) {
	margin-right: 16px;
}

.footer .partner-logo:lang(ar) {
	margin-left: 16px;
}

.footer p {
	margin: 0;
}

.footer .social-icon {
	text-decoration: none !important;
}
.social-icon img{
	filter: var(--white-icon-color);
}

.ltr {
	direction: ltr !important;
	text-align: left !important;
}

.text-break {
	word-break: break-word;
}

/* Breadcrumbs */

.breadcrumbs > i {
	padding: 0 4pt 0;
}

.breadcrumbs > * {
	color: var(--gray-dark);
}

.breadcrumbs > a {
	transition-property: *;
	transition-duration: 0.1s;
	border-bottom: solid 1px rgba(0, 0, 0, 0);
}

.breadcrumbs > a:hover {
	text-decoration: none;
	color: var(--primary);
	border-bottom: solid 1px var(--primary-dark);
}

.desktop-menu-wrapper {
	display: flex;
	justify-content: center;
	z-index: 11;
}

.desktop-menu {
	z-index: 11;
	padding: 12pt;
	max-width: 89vw;
	box-shadow: 0 4pt 6pt rgba(0, 0, 0, 0.2);
	background: var(--dropdown-menu-background);
	border-top: solid 1pt var(--seperator);
	border-radius: 4pt;
	display: flex;
	color: var(--font-color)
}

.desktop-menu:not(.expanded) {
	flex-direction: column;
}

.desktop-menu.expanded {
	flex-wrap: wrap;
	flex-direction: row;
}

.desktop-menu.expanded .item.level-1 {
	margin-bottom: 8pt;
}

.desktop-menu.expanded .item {
	flex: 1 1 0px;
}

.desktop-menu .item > .label {
	cursor: default;  /* fallback */
	padding: 8pt 16pt 8pt;
	min-width: 64pt;
	text-align: center;
	white-space: nowrap;
	user-select: none;
}

.desktop-menu .item > .label:lang(ar) {
	line-height: 1.75;
}

.desktop-menu .item.link > .label {
	cursor: pointer;
}

.desktop-menu .item.level-1 > .label {
	text-align: center;
}

.desktop-menu .item.level-1.has-children > .label {
	color: var(--gray-dark);
	font-weight: bold;
}

.desktop-menu .item.level-2 > .label {
	padding-top: 2pt;
	padding-bottom: 2pt;
}

.desktop-menu .item.link.level-1 > .label:hover {
	background: var(--dropdown-menu-background-hover);
}

.desktop-menu .item.link.level-2 > .label:hover {
	color: var(--header-hover);
}

.showable .desktop-menu {
	position: absolute;
	transition-property: top, opacity, left;
	transition-duration: 0.1s;
	overflow: auto;
	max-height: 70vh;
}

.showable:not(.show) .desktop-menu {
	top: -8pt;
	opacity: 0;
	pointer-events: none;
}

.showable.show .desktop-menu {
	top: 0;
	opacity: 1;
}

iframe.ql-video {
    width: 480pt;
    max-width: 100%;
    min-height: 256pt;
}

.static-page-content img {
	max-width: 100%;
}

.ql-align-center {
	text-align: center;
}

.ql-align-left {
	text-align: left;
}

.ql-align-right {
	text-align: right;
}


/* promotions */
.promotion-tags{
	z-index: 1;
	white-space: nowrap;
}
.product-image .promotion-tags{
    top: -15px;
}
.checkout .product-image .promotion-tags{
    top: -20px;
}
.layout-left .checkout .product-image .promotion-tags{
    left: -10px;
}
.layout-right .checkout .product-image .promotion-tags{
    right: -10px;
}

.layout-right .product-image .promotion-tags{
    left: -10px;
}
.layout-left .product-image .promotion-tags{
    right: -10px;
}

.promotion-tags .badge.badge-primary{
    background-color: var(--red);
}

.price > span {
	display: inline-block;
}
.promotions .promotion-bg{
    padding: 40px 0;
    text-align: center;
    min-height: 145px;
    background-size: cover;
    background-color: var(--promotion-background);
    border-radius: 10px;
}
.promotions > div{
	margin-bottom: 26pt;
}
.promotions > div:last-child{
    margin-bottom: 0;
}
.product .price{
    color: #212529;
}
.promotions .promotion-bg h3{
    font-size: 20px;
}
.product .promotions .promotion-bg h2 span.red{
    color: var(--red);
}
.layout-left .product .promotions .promotion-bg h2 > span:after{
    content: " and ";
	color: #212529;
}
.layout-right .product .promotions .promotion-bg h2 > span:after{
    content: " و ";
	color: #212529;
}
.product .promotions .promotion-bg h2 > span:last-child:after{
    content: "";
}


.static-pages-checkout-link span:after{
	content: ", ";
}
.static-pages-checkout-link span:last-child:after{
	content: "";
}


.checkout .promotions .promotion-bg h3{
    font-size: 12px;
}
.checkout .promotions .promotion-bg h2{
    font-size: 32px;
}
.promotions .promotion-bg .price{
    font-size: 16px;
}
.promotions .promotion-bg .price > span{
    margin: 0 8px;
    color: #000;
}
.promotions .promotion-bg .price span.old-price{
    margin: 0 8px;
    color: #455a64;
}
.promotions .items-list{
    background: var(--card-background);
	color: var(--font-color);
	border: 1px solid var(--seperator);
	padding: 40px 0px 0px;
	margin-top: -40px;
	border-radius: 10px;
}
.promotions .items-list.round img{
    border-radius: var(--card-round);
}
.promotions .items-list.sharp img{
    border-radius: var(--card-sharp);
}

.color-red{
	color: var(--pink-tone-1);
}

.modal-body{
	background-color: var(--background);
}

#share-app .dialog .dialog-body{
	background-color: var(--background-light);
}
#share-app .dialog .dialog-bg{
	background: rgba(0,0,0,var(--overlay-opacity-value));
}

#share-app .dialog .dialog-body .dialog-body-content .text{
	background-color: var(--input-background);
	border: 1px solid var(--input-border-color);
	color: var(--input-color);
}
#share-app .dialog .dialog-body .dialog-body-content .text-button .btn-inline{
	color: var(--primary);
	background-color: var(--background);
}
#share-app .dialog .dialog-body .dialog-body-content .text-button .btn-inline:hover{
	color: var(--primary-dark);
	background-color: var(--background);
}

.slick-prev:before,
.slick-next:before,
.slick-dots li button:before{
	color: var(--font-color)!important;
}

.imageBackground{
	width: 100%;
    height: 100%;
}
.pointer{
	cursor: pointer;
}
.slick-slide img {
	min-width: calc(100% - 10px);
	margin: 0 10px;
}
.slick-slider .slick-track,
.slick-slider .slick-list,
.slick-slider .slick-dots {
	direction: ltr;
}

.aspect-ratio {
	aspect-ratio: 3 / 4;
}

hr {
	border-color: var(--seperator);
}

.grecaptcha-badge {
    visibility: hidden;
}

.force-ltr {
	direction: ltr;
}

.sr-only {
	left: 0px !important;
	right: 0px !important;
}