/* ===========================================================================
Variables
============================================================================*/

:root {
    --sl-red: #e3617b;
    --sl-black: #474745;
    --colorHighlight1: #e5617b;
}

/* ===========================================================================
Reset
============================================================================*/
img {
    max-width: 100%;
}

iframe {
    max-width: 100%;
}

ul {
    margin: 0;
    padding: 0;
}

/* ===========================================================================
Typography
============================================================================*/
/* ------ body -------- */
body{
    background-color: white;
}
html[lang="ar"] body {
    text-align: right;
}

a {
    color: var(--sl-black);
    text-decoration: none;
    outline: none;
}
a:hover {
    color: black;
    text-decoration: none;
}

.bold {
    font-weight: bold !important;
}

.underlined {
    text-decoration: underline !important;
}

.line-through {
    text-decoration: line-through !important;
}

h1,h2,h3,h4,h5,h6{
    line-height: 1.3;
}

@media(max-width: 767.98px) {
    h1, .h1 {
        font-size: 30px;
    }
    h2, .h2 {
        font-size: 24px;
    }
    h3, .h3 {
        font-size: 20px;
    }
    h4, .h4 {
        font-size: 17px;
    }
    h5, .h5 {
        font-size: 14px;
    }
}


/* ===========================================================================
Layout
============================================================================*/
/* ----- container ----- */
@media(min-width: 1200px) {
    .container {
        max-width: 1100px;
    }
}

@media(min-width: 1250px) {
    .container {
        max-width: 1150px;
    }
}

@media(min-width: 1350px) {
    .container {
        max-width: 1200px;
    }
}

@media(min-width: 1400px) {
    .container {
        max-width: 1300px;
    }
}

@media(min-width: 1900px) {
    .container {
        max-width: 1620px;
    }
}


/* ===========================================================================
Utilities
============================================================================*/
.pointer-events-none{
    pointer-events: none;
}

/* ---------- Colors ---------- */
.color-red{color: var(--sl-red) !important;}
.color-gray{color: gray !important;}
.color-pink{color: #e45f7a !important;}


/* ---------- Mirror ---------- */
html[lang="ar"] .mirror-on-rtl {
    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    filter: FlipH;
    -ms-filter: "FlipH";
}
html[lang="ar"] .bi.mirror-on-rtl::before {
    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    filter: FlipH;
    -ms-filter: "FlipH";
}

  
/* ---------- Border Radius ---------- */
.br-50{
    border-radius: 50px;
}
.br-20{
    border-radius: 20px;
}
.br-10{
    border-radius: 10px;
}
.br-7{
    border-radius: 7px;
}

/* ---------- Display ---------- */
@media(min-width: 1200px){
    .hide-1200-and-up{
        display: none !important;
    }
}
@media(max-width: 1199.98px){
    .hide-lower-than-1200{
        display: none !important;
    }
}

@media(min-width: 768px){
    .hide-768-and-up{
        display: none !important;
    }
}
@media(max-width: 767.98px){
    .hide-lower-than-768{
        display: none !important;
    }
}

html[lang="ar"] .visible-en-only {
    display: none !important;
}
html[lang="en"] .visible-ar-only {
    display: none !important;
}

/* ---------- Badge ---------- */
.badge {
	font-size: 12px;
	padding: 5px 10px;
	border-radius: 0;
}

.badge-success {
	color: #36a165;
	background-color: #e7f6ee;
}


/* ---------- Size ---------- */
.fs-20{font-size: 20px !important;}
.fs-13{font-size: 13px !important;}

/* ---------- Margin Padding ---------- */


/* ----------- Forms ---------- */
.field-validation-error {
	color: red;
}





/* ------ unorganised ------ */
.overview-buttons .prices .actual-price,
.associatedItem .actual-price, 
.catalog-product-price {
    color: var(--sl-red);
    font-size: 22px;
}
.product-details-page .product-tabs .nav-link.active::after, 
#pills-mobile-tab .nav-item .nav-link.active::after {
    background: var(--sl-red);
}