body{
    padding-top: 0 !important;
}
#tblGoldRate > thead > tr > th > div,
#tblGoldRate > thead > tr > th > div > span,
#tblGoldRate > tbody > tr > td,
#tblGoldRate > tbody > tr > td > span,
h1.header-separator,
h2.headerOuncePrice,
.column-item-number,
.column-item-price > b,
h2.bOuncePrice,
#pLastUpdated {
    font-size: calc(13px + (26 - 13) * ((80vw - 300px) / (1900 - 300))) !important;
}
.bOuncePrice > img#imgOunceIncDec {
    width: calc(18px + (36 - 18) * ((80vw - 300px) / (1900 - 300))) !important;
    height: calc(18px + (36 - 18) * ((80vw - 300px) / (1900 - 300))) !important;
}
/*@media only screen and (min-width:768px), (min-device-width:768px) {
    header{
    display: none;
}
}
.image-logo{
    position: fixed;
}*/
.main-container{
    margin-top:20px;
}
@media only screen and (max-width:767px), (max-device-width:767px){
    .main-container {
        margin-top: 130px;
    }
}
h1.header-separator {
    margin-top:0;
    margin-bottom: 21.376px !important;
}
h1.header-separator:before {
    content: "";
    position: absolute;
    width: 5%;
    height: 1px;
    bottom: 0;
    left: 47.5%;
    border-bottom: 5px solid #EBEBEB;
}
    #tblGoldRate thead tr th {
        background-color: #A07936 !important;
    }
.trFoot > td.tdFirst.tdLast {
    background-color: #A07936 !important;
}
.header-banner-merchant-language-tradename{
    margin-top:-10px;
}
    .header-banner-merchant-language-tradename:before {
        bottom: 5px !important;
    }
@media only screen and (min-width:320px) and (max-width:767px), (min-device-width:320px) and (max-device-width:767px){
    .header-banner-merchant-language-tradename {
        margin-top: 20px;
    }
    #tblGoldRate,
    #DiviationBanner {
        height: calc(75px + (300 - 75) * ((100vw - 320px) / (767 - 320)));
        line-height: calc(75px + (300 - 75) * ((100vw - 320px) / (767 - 320)));
    }

    #BannerCarousel {
        width: calc(180px + (720 - 180) * ((100vw - 320px) / (767 - 320)));
        height: calc(75px + (375 - 75) * ((100vw - 320px) / (767 - 320)));
        margin: auto;
    }

        #BannerCarousel .carousel-inner .item img,
        #BannerCarousel .carousel-inner .active img {
            width: calc(180px + (720 - 180) * ((100vw - 320px) / (767 - 320)));
            height: calc(75px + (375 - 75) * ((100vw - 320px) / (767 - 320)));
        }
}
@media only screen and (min-width:768px), (min-device-width:768px) {
    #tblGoldRate,
    #DiviationBanner {
        height: calc(37.5px + (300 - 37.5) * ((100vw - 300px) / (1900 - 300)));
        line-height: calc(37.5px + (300 - 37.5) * ((100vw - 300px) / (1900 - 300)));
    }

    #BannerCarousel {
        width: calc(90px + (720 - 90) * ((100vw - 300px) / (1900 - 300)));
        height: calc(37.5px + (300 - 37.5) * ((100vw - 300px) / (1900 - 300)));
        margin: auto;
    }

        #BannerCarousel .carousel-inner .item img,
        #BannerCarousel .carousel-inner .active img {
            width: calc(90px + (720 - 90) * ((100vw - 300px) / (1900 - 300)));
            height: calc(37.5px + (300 - 37.5) * ((100vw - 300px) / (1900 - 300)));
        }
}
#BannerCarousel .carousel-inner {
    border-radius: 15px;
}
#BannerCarousel .left {
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
}
#BannerCarousel .right {
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
}

#DiviationBanner i.fa.fa-refresh.fa-spin{
    color: #A07936;
    font-size: 72px;
}
.containerItemsByMerchant{
    background-color: rgb(247,247,247);
}
.item-card-container {
    background-color: #FFFFFF;
    margin-top: 20px;
    margin-bottom: 20px;
    box-shadow: 12px 12px 12px #EBEBEB;
}
.merchant-item-img {
    margin-top: -10px;
    border-radius: 15px;
    cursor: pointer;
    transition: 300ms;
    width: 100% !important;
    height: auto !important;
    max-height: calc(206.5px + (413 - 206.5) * ((100vw - 320px) / (1900 - 320))) !important;
}
@media only screen and (min-width:992px) and (max-width:1199px), (min-device-width:992px) and (max-device-width:1199px) {
    .merchant-item-img {
        max-height: calc(165px + (330 - 165) * ((100vw - 320px) / (767 - 320))) !important;
    }
}
@media only screen and (min-width:768px) and (max-width:991px), (min-device-width:768px) and (max-device-width:991px) {
    .merchant-item-img {
        max-height: calc(204.5px + (409 - 204.5) * ((100vw - 320px) / (767 - 320))) !important;
    }
}
@media only screen and (max-width:767px), (max-device-width:767px){
    .merchant-item-img {
        max-height: calc(313.5px + (627 - 313.5) * ((100vw - 320px) / (767 - 320))) !important;
    }
}
@media only screen and (min-width:1200px), (min-device-width:1200px) {
    .item-card-container {
        width: calc((100vw / 3) - calc(60px + (30 + 60) * ((100vw - 1200px) / (1900 - 1200))));
        margin-left: calc(20px + (10 + 20) * ((100vw - 1200px) / (1900 - 1200)));
        margin-right: calc(20px + (10 + 20) * ((100vw - 1200px) / (1900 - 1200)));
    }
}
@media only screen and (min-width:1024px) and (max-width:1199px), (min-width:1024px) and (max-width:1199px) {
    .item-card-container {
        width: calc((100vw / 3) - 80px);
        margin-left: 20px;
        margin-right: 20px;
        margin-top: 20px;
        margin-bottom: 20px;
    }
}
@media only screen and (min-width:676px) and (max-width:1023px), (min-width:676px) and (max-width:1023px) {
    .item-card-container {
        width: calc((100vw / 2) - 60px);
        margin-left: 10px;
        margin-right: 10px;
        margin-top: 10px;
        margin-bottom: 10px;
    }
}
@media only screen and (max-width:675px), (max-device-width:675px) {
    .item-card-container {
        width: 100%;
        margin-top: 20px;
        margin-bottom: 20px;
    }
}
.row-price {
    /*margin-top: -70px;*/
    /*height: 50px;*/
    background-color: #A07936;
    color: #FFFFFF;
    margin-right: 0 !important;
    margin-left: 0 !important;
    border-radius: 15px;
    /*opacity: 0.7;*/
}
.column-item-number,
.column-item-price {
    height: 50px;
    line-height: 50px;
}
#DiviationItemsByMerchant {
    min-height: 520px;
    /*margin-top: 50px;*/
    /*margin-top: 30px;*/
}
.img-discount-ribbon {
    position: absolute;
    width: 100px;
    top: 0;
    left: 15px;
    z-index: 1;
}
.centered {
    position: absolute;
    top: calc(30px + (20 - 30) * ((100vw - 320px) / (1900 - 320)));
    left: calc(42.5px + (35 - 42.5) * ((100vw - 320px) / (1900 - 320)));
    transform: rotate(-45deg);
    color: #FFFFFF;
    z-index: 1;
}
.column-merchant-item-container,
.column-merchant-item-container-new {
    transition: 300ms, Opacity .7s;
}
/* ------------------------------------------------------ */
/* carousel */
.media-carousel {
    margin-bottom: 0;
    padding: 0 40px 30px 40px;
    margin-top: 10px;
}
    /* Previous button  */
    .media-carousel .carousel-control.left {
        left: -12px;
        background-image: none;
        background: none repeat scroll 0 0 #222222;
        border: 4px solid #FFFFFF;
        border-radius: 23px 23px 23px 23px;
        height: 40px;
        width: 40px;
        margin-top: 30px
    }
    /* Next button  */
    .media-carousel .carousel-control.right {
        right: -12px !important;
        background-image: none;
        background: none repeat scroll 0 0 #222222;
        border: 4px solid #FFFFFF;
        border-radius: 23px 23px 23px 23px;
        height: 40px;
        width: 40px;
        margin-top: 30px
    }
    /* Changes the position of the indicators */
    .media-carousel .carousel-indicators {
        right: 50%;
        top: auto;
        bottom: 0px;
        margin-right: -19px;
    }
        /* Changes the colour of the indicators */
        .media-carousel .carousel-indicators li {
            background: #c0c0c0;
        }

        .media-carousel .carousel-indicators .active {
            background: #333333;
        }

#media .thumbnail{
    border-radius:15px;
    box-shadow:12px 12px 12px #EBEBEB;
}
#media .carousel-control {
    top: unset !important;
    bottom: 50%;
    font-size: calc(26px + (52 - 26) * ((100vw - 320px) / (1900 - 320)));
    width: calc(26px + (52 - 26) * ((100vw - 320px) / (1900 - 320)));
    height: calc(26px + (52 - 26) * ((100vw - 320px) / (1900 - 320)));
    border-radius: 50%;
    line-height: calc(19px + (38 - 19) * ((100vw - 320px) / (1900 - 320)));
}
#media a.thumbnail.active, #media a.thumbnail:focus, #media a.thumbnail:hover {
    border-color: #A07936;
}
/* End carousel */

#BannerCarousel .carousel-inner .item.active img{
    cursor: pointer;
}
.header-merchant-language-trade-name{
    margin:-10px 0 5px 0;
    white-space: nowrap;
}
.merchant-item-img-container {
    /*position: relative;*/
    width: 100%; /* The size you want */
}
.merchant-item-img-container:after {
    content: "";
    display: block;
    padding-bottom: 100%;
}
    .merchant-item-img-container img {
        position: absolute; /* Take your picture out of the flow */
        top: 0;
        bottom: 0;
        left: 0;
        right: 0; /* Make the picture taking the size of it's parent */
        width: 100%; /* This if for the object-fit */
        height: 100%; /* This if for the object-fit */
        background-size: cover; /* Equivalent of the background-size: cover; of a background-image */
        /*object-fit: cover;*/ /* Equivalent of the background-size: cover; of a background-image */
        object-position: center;
    }
.col-jcarousel-container{
    padding: 0;
}
#modalBodyGeneralMessage > h2{
    color: #000000 !important;
}
.headerMyAccount {
    font-size: calc(18px + (36 - 18) * ((100vw - 300px) / (1900 - 300)));
    font-weight: normal;
    margin: 10px 0;
    color: inherit;
}
/* Yazan 2021-07-07 */
#tblGoldRate thead tr th {
    font-weight: 100;
}
/*--------------------*/