:root {
    --color-khaki: #bb8f44;
    --color-khaki-hover: #cea050;
    --color-lightblue: #66c4c5;
    --color-black: #1c1c1c;
    --sl-red: #f9cd13;

    --color-yellow: #f9cd13;
    --color-blue: #132f60;
}

body{
  background-color: #fff;
}

img {
    max-width: 100%;
}

iframe{
    max-width: 100%;
}

a {
    color: var(--color-khaki);
    text-decoration: none;
}

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

.color-red{color: var(--color-khaki) !important;}
.color-khaki{color: var(--color-khaki) !important;}
.color-gray{color: gray !important;}

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

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

html[lang="ar"] ul {
    padding-right: 0;
}

html[lang="en"] .flip-en{
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
}
.rotate180{
    transform: rotate(180deg);
}
html[lang="ar"] .rotate180-ar{
    transform: rotate(180deg);
}
::-webkit-scrollbar-track {
    width: 6px;
    -webkit-box-shadow: none;
    box-shadow: none;
    background-color: #fff;
}
::-webkit-scrollbar {
    width: 6px;
    background-color: #F5F5F5;
}
::-webkit-scrollbar-thumb {
    width: 6px;
    border-radius: .25rem;
    -webkit-box-shadow: none;
    box-shadow: none;
    background-color: #d1d1d1;
}
body::-webkit-scrollbar {
    all: unset;
    border-radius: 0;
}
body::-webkit-scrollbar-thumb {
    border-radius: 0;
}
body::-webkit-scrollbar-track {
    background-color: #f2f2f2;
}
.overview-buttons .prices .actual-price,
.associatedItem .actual-price, 
.catalog-product-price {
    color: var(--color-khaki);
    font-weight: bold;
    font-size: 28px;
}
.product-details-page .product-tabs .nav-link.active::after, 
#pills-mobile-tab .nav-item .nav-link.active::after {
    background: var(--color-khaki);
}

@media(min-width: 992px){
    html[lang="en"] .offset-lg-2-opposite-ar {
        margin-left: 16.666667%;
    }
    html[lang="ar"] .offset-lg-2-opposite-ar {
        margin-right: 16.666667%;
    }
}

.mark, mark {
    padding: .2em;
    background-color: #ffce39;
}

@media(max-width: 767.98px){
    .h1, h1 {
        font-size: 2rem;
    }
}

/* ------ body -------- */
body{
    background-color: white;
    /*background: url("images/body-bg.png") center center repeat #f8f8f8;*/
}
html[lang="ar"] body{
    text-align: right;
}

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

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

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

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

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

/* ===========================================================================
Utilities
============================================================================*/
/* ---------- Display ---------- */
.overflow-hidden {
    overflow: hidden !important;
}

@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;
    }
}

/* --------- Grid ---------- */
@media(min-width: 475px) and (max-width: 767px){
    .col-475px-to-767px-6{
        flex: 0 0 50%;
        max-width: 50%;
    }
}