/****************************************************General Css ***************************************************************/
.loading-info {
    text-align: center;
    font-weight: bolder;
    color: rgba(var(--bs-primary-rgb), var(--bs-text-opacity)) !important;
}

.loading-info .loading-image {
    width: 150px;
}


.text-navy {
    color: #0b234f;
}

.text-custom-primary {
    text-align: center;
    margin-top: -0.75rem;
}

.hidden {
    display: none !important;
}

.svg-inline--fa {
    vertical-align: 10px;
}

.disable-switch {
    opacity: 0.5;
    cursor: no-drop;
}

.white-space-style {
    white-space: nowrap;
}

.btn.btn-custom1 {
    white-space: nowrap;
    background-color: #0d6efdcf;
    margin-right: 0.5rem;
    color: white;
    border: 1px solid #0d6efdcf;
    font-weight: bold;
}

.btn.btn-custom1:hover {
    background-color: white;
    color: #0d6efdcf;
}

.error-alert-custom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #ff00003d;
    color: red;
    padding: 1rem;
}

.success-alert-custom {
    background-color: #00800036;
    color: green;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
}

.star-primary {
    color: #3999fe;
}

.half-star {
    color: #3999fe;
}

.modal .modal-dialog .modal-content .modal-body {
    font-size: 12px;
}

.modal .modal-dialog .modal-content .modal-body .alert-help-inquire p {
    font-size: 12px;
}

.top-search {
    margin-top: 3rem;
}

img.no-image-product-item {
    width: 150px;
}

/********************************************************  sidebar css *************************************************************/

.product-details .sidebar {
    width: 20%;
    border: 1px solid #d1d1d1;
    border-radius: 10px;
    padding-right: 1rem;
    height: fit-content;
}

.product-details .sidebar .title-side-bar svg:not(:root).svg-inline--fa {
    vertical-align: middle;
}

.product-details .sidebar .title-side-bar {
    font-weight: bolder;
    margin-top: 1rem !important;
}

.side-bar-menu1 .menu-item .sid-bar-link .item-sidebar .icon-serach,
p.title-result-sid-bar,
p.item-result-sid-bar {
    color: gray;
}

.product-categories-wrraper .image-sidbar-wrraper {
    width: 2rem;
    height: 2rem;
}

img.image-sid-bar {
    width: 100%;
}

.image-brand-result-wrraper {
    width: 4rem;
    height: 4rem;
    overflow: hidden;
}

img.image-barnd-result {
    width: 100%;
    object-fit: cover;
}

.result-side-bar-wrraper {
    position: absolute;
    display: none;
    right: 16rem;
    background-color: white;
    top: 0;
}

li.menu-item {
    position: relative;
}

.sid-bar-menu2 {
    position: absolute;
    display: none;
    background-color: white;
    right: 70%;
    top: 0;
    width: 25rem;
    z-index: 1000;
    padding: 1rem 2rem;
    border: 1px solid #d1d1d1;
    border-radius: 10px;
}

.menu-item:hover .sid-bar-menu2 {
    display: block;

}

.sidebar .side-bar-menu1 .menu-item .sid-bar-link {
    display: flex;
    align-items: center;
    justify-content: start;
}

.sidebar .side-bar-menu1 .menu-item .sid-bar-link .image-sid-bar.ng-scope {
    width: 100%;
    max-width: 40px;
    height: 32px;
    margin-left: 10px;
}

.sidebar .side-bar-menu1 .sid-bar-menu2 .sub-menu {
    display: flex;
    justify-content: space-between;
    place-items: flex-start;

}

ul.side-bar-menu1 {
    list-style: none;
    margin: 1rem 0;
}

.brands-result-left {
    max-height: 20rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
}

/************************************************** product info css*****************************************************************/

.product-details {
    margin: 2rem;
    padding: 1rem;
    border-radius: 20px;
    column-gap: 2rem;
}

.details {
    width: 80%;
}

.details .data-panel {
    column-gap: 2rem;
    flex-direction: row;
}
.details .data-panel .details-row{
    width: 100%;
}
.details .data-panel .details-row .title-wrapper {
    flex-direction: row;
}

.details .data-panel .details-row .title-wrapper .product-title {
    font-size: 20px;
}

.details .data-panel .details-row .title-wrapper .brand-wrraper .brand-image-wrraper {
    width: 2rem;
    height: 2rem;
}

.details .data-panel .details-row .title-wrapper .brand-wrraper .brand-image-wrraper a img {
    width: 100%;
    height: 100%;
}

.details .data-panel .details-row .title-wrapper .product-title {
    font-size: 20px;
}

.details .data-panel .details-row .title-wrapper .brand-wrraper .brand-title-wrraper a .brand-tilte {
    margin: 0;
}

.details .data-panel .details-row .title-wrapper .brand-wrraper {
    border: 1px solid #e7e5e5;
    border-radius: 10px;
    height: 3rem;
    padding: 5px 5px;
    margin: 7px;
}

.details .data-panel .details-row .icons-details .realted-category .item-category {
    background-color: #f1f1f1;
    padding: 6px;
    margin: 0 0.5rem;
    border-radius: 10px;
    font-weight: 600;
}

.details .data-panel .details-row .icons-detail {
    column-gap: 10px;
    position: relative;
}

.details .data-panel .details-row .icons-detail div{
    cursor: pointer;
}
/************************************************* Product Rate css*****************************************************************/
.rating-input {
    font-size: 14px !important;
    opacity: 1 !important;
}

.theme-krajee-svg .empty-stars .krajee-icon-star {
    background-image: url(/Portals/0/images/star.png?ver=U_AVkeRLPWXIwCYcyvCxPA%3d%3d) !important;
}

.theme-krajee-svg .filled-stars .krajee-icon-star {
    background-image: url(/Portals/0/images/star1.png?ver=U_AVkeRLPWXIwCYcyvCxPA%3d%3d) !important;
}

/************************************************* Product Image css***************************************************************/
.details .data-panel .ImageProduct {
    width: 11rem;
    height: 11rem;
}

.details .data-panel .ImageProduct .no-image-product-item {
    width: 100%;
}

.mss-slide.mss-slide-4.mss-super-opacity {
    direction: unset !important;
}

/******************************************* Product Interactive features css**********************************************************/
.icon-tool-style {
    color: #9d9d9d;
}

.hide {
    display: none !important;
}

.show {
    display: block !important;
}

.modal-details .icons a i {
    font-size: 2rem;
    color: #3699ff;
    margin: 0 1rem;
}

.modal-details {
    position: absolute;
    top: 19%;
    left: 18%;
    background-color: white;
    z-index: 40;
    padding: 1rem;
    border: 1px solid #efefef;
    border-radius: 10px;
    min-width: 24rem;
    /* text-align: center; */
}

/************************************************ Product Favorits css*****************************************************************/

/************************************************** Product Compairs css*************************************************************/

.compare {
    width: 50rem !important;
    padding: 1rem 2rem;
}

.compair-list-wrraper {
    border: 1px solid #efeaea;
    border-radius: 1rem;
    padding: 20px;
}

.compair-title,
.compair-price span {
    font-size: 11px;
    font-weight: bold;
    text-align: center;
}

.product-details .details .data-panel .details-row .float-icon-wrraper {
    display: flex;
    justify-content: end;
    font-size: 24px;
    margin: 0 14px;
}

.product-details .details .data-panel .details-row .float-icon-active {
    background-color: #3699ff;
    color: white !important;
    padding: 0px 5px;
    border-radius: 2px;
    cursor: pointer;
    height: 2.5rem;
    margin: 4px 0;
}

.product-details .details .data-panel .details-row .float-icon-active .icon-tool-style {
    margin-top: 7px;
    color: white !important;
}



.search-btn-wrraper {
    position: absolute;
    top: 1px;
    left: 13px;
    background-color: #3699ff;
    color: white;
    padding: 4px;
    height: 36px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
}

.modal-details .compair-list-wrraper .compair-item .image-compair {
    width: 6rem;
    height: 6rem;
    margin: auto;
}

.modal-details .compair-list-wrraper .compair-item .image-compair img {
    width: 100%;
    height: 100%;
    object-fit:cover ;
}

.btn-show-compairs {
    background-color: #3699ff1a;
    color: #3799fe !important;
}

/****product list*****/
.products-modal .modal-dialog .modal-content .modal-body {
    padding: 2rem;
}

.products-modal .modal-dialog .modal-body .product-wrraper {
    margin-bottom: 1rem;
}

.products-modal .modal-dialog .modal-body .product-wrraper .product-content {
    border: 1px solid #80808066;
    text-align: center;
    height: 261px;
    margin-bottom: 1rem;
}


.products-modal .modal-dialog .modal-content .modal-body .product-wrraper.active {
    border: 1px solid #56a8feb8;
    box-shadow: 0px 0px 3px 0px #56a8feb8;
    padding: 5px;
    margin-bottom: 0 !important;
}

.products-modal .modal-dialog .modal-content .modal-body .product-wrraper .product-content .product-image {
    width: 65%;
    height: 170px;
    object-fit: contain;
    text-align: center;
    display: flex;
    margin: 0 auto;
}

.products-modal .modal-dialog .modal-content .modal-body .product-wrraper .product-content .product-title {
    font-size: 1rem;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    width: 15rem;
    text-align: center;
}

.products-modal .modal-dialog .modal-footer .product-footer .close-products-modal-btn {
    border: 1px solid red;
    color: red;
    padding: 5px 15px;
    font-weight: bolder;
}

.products-modal .modal-dialog .modal-footer .product-footer .add-products-modal-btn {
    border: 1px solid #198754 !important;
    margin-right: 10px;
    color: #198754 !important;
    font-weight: bolder;
    padding: 5px 15px;
}

.modal-details .search-compair-wrraper .unkown-item .unkown-image {
    background-color: whitesmoke;
    height: 120px;
    margin: 10px;
    border-radius: 5px;
}

.modal-details .search-compair-wrraper .unkown-item .unkown-title {
    background-color: whitesmoke;
    height: 63px;
    margin: 10px;
    border-radius: 5px;
}

/************************************************* Product Reports css***********************************************************/
/************************************************** Product Share css************************************************************/
.modal-details .alert-success{
    display: flex;
}
/************************************************** Product Notification css*****************************************************/

.product-details .details .data-panel .details-row .icons-detail .details-pane .modal-details .send-notif-group {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 1rem 0;
}

/************************************************** Product Map css****************************************************************/
/************************************************** Product Add To compairs List css***********************************************/
/************************************************** Product Store css*************************************************************/
.box-store-wrraper .box-store-inner .store-image-wrraper .store-image {
    height: 3rem;
}

/************************************************* Product Model css*************************************************************/
.box-store-inner.d-flex.d-flex.align-items-center {
    border: 1px solid #d2c8c8;
    padding: 5px;
    box-shadow: 1px 1px 3px 3px whitesmoke;
    border-radius: 7px;
    margin-bottom: 7px;
}

.button-box {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0px;
}

.button-box .box-left {
    width: 25px;
    height: 24px;
    background-color: rgb(255, 255, 255);
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    position: relative;
    border: 1px solid #3999fe;
    padding: 4px 15px;
}

.button-box .box-center {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    text-align: center;
    /**  height: 24px;
    border-top: 1px solid rgb(201, 199, 199);
    border-bottom: 1px solid rgb(201, 199, 199);**/
    margin: 0px;
}

.button-box .text-input {
    width: 100%;
    height: 24px;
    border: 0px solid #5fa1fe !important;
    border-top-width: 1px !important;
    border-bottom-width: 1px !important;
    outline: none;
    text-align: center;
    position: sticky;
    border-radius: 0;
}

.button-box .box-right {
    width: 25px;
    height: 24px;
    background-color: rgb(255, 255, 255);
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
    position: relative;
    border: 1px solid #3999fe;
    padding: 4px 15px;
}

.button-box .box-left.deactive {
    opacity: 0.5;
    cursor: no-drop;
}

.details .data-panel .details-row .btn-success {
    margin-left: 1rem !important;
}

/**************************************************** Product Attrbuit css****************************************************/
.mb-10.technical-Info-wraper.ng-scope.long-items-wrraper {
    height: 10rem;
    overflow-y: scroll;
    min-width: 20rem;
}

.attr-group-wrraper .group-title {
    font-size: 18px;
    font-weight: bolder;
    margin-right: 0.5rem;
}

.attr-item .attr-line-item .attr-item-title {
    background-color: #e0e0e0;
    padding: 9px;
    margin: 2px;
    font-weight: bold;
    width: 19%;
}

.attr-item .attr-line-item .attr-ite {
    background-color: #f2f5f8;
    padding: 9px;
    margin: 2px;
    font-weight: bold;
    width: 85%;
}

img.attr-icon-value {
    width: 50px;
    height: 50px;
    margin: 0 6px;
    border: 1px solid whitesmoke;
}

/********************************************************* Product Btn css*********************************************************/
/********************************************************* Product Inquire css*****************************************************/
.modal-body .inquir-items .inquire-items-wrraper .inquire-item-content .inquire-header .inquire-item-info .image-inquire-item-wrraper {
    width: 10rem;

}

.modal-body .inquir-items .inquire-items-wrraper .inquire-item-content .inquire-header .inquire-item-info .image-inquire-item-wrraper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 1rem;
}

.count-order-text {
    font-size: 14px;
}

.inquire-header .store-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 1rem;
    background-color: whitesmoke;
    width: 100%;
}

.image-inquire-item-wrraper {
    width: 6rem !important;
}

img.image-inquire {
    width: 4rem !important;
    border-radius: 3px !important;
}

.inquire-store-item-info .inquire-title {
    font-weight: bolder;
    margin: 0;
}

.inquire-attr-items-wrraper {
    margin: 1rem 0;
    border: 1px solid whitesmoke;
    padding: 0.5rem;
}

.alert-success-inquire {
    background-color: #00800047;
    color: #034c03;
    padding: 1rem;
}

.inquire-item-wrraper.d-flex {
    align-items: center;
    justify-content: space-around;
}


/**************************************************** Product Anothrer Store css****************************************************/
.image-another-store-wrraper .another-store-image {
    width: 100%;
}

.col-image-wrraper {
    width: 4rem;
    height: 4rem;
    overflow: hidden;
}

.rtl th {
    font-size: 0.8rem !important;
}

i.bi.bi-star.star-simple.ng-scope {
    color: rgb(11 110 255) !important;
}


/*************************************************** Product tab css**********************************************************/

input.form-control.custome-input {
    width: 23%;
    margin: 0.5rem;
}

.tab-content .tab-pane .comments-pane .btn-comment,
.tab-content .tab-pane .question-pane .btn-question,
.modal .modal-dialog .modal-content .modal-footer .btn-garanti {
    background-color: #3699ff;
    color: white;
}
   .details .data-panel .details-row .saved-cartitem{
        display: flex;
    }

/*************************************************** Product Descriptions  css******************************************************/
/*************************************************** Product Comments css**********************************************************/
.details-row .tab-content .tab-pane .scroll-massages .messages .align-items-start .massage-box {
    background-color: #fdfeff;
    padding: 10px;
    width: 100%;
    margin: 1rem;
    border: 1px solid #ebebeb;
    border-radius: 11px;
}
/*************************************************** Product Questions css**********************************************************/
/************************************************************* Media *************************************************************/
@media only screen and (max-width:750px) {

    .product-details {
        flex-direction: column;
    }

    .sidebar,
    .details,
    .details .data-panel .details-row,
    .details .data-panel .ImageProduct {
        width: 100%;
    }

    .details .data-panel .details-row {
        flex-direction: column;
    }

 

    .details .data-panel .details-row .btn {
        margin-bottom: 10px !important;
    }

    .details .data-panel {
        flex-direction: column;
    }

    .details .data-panel .details-row .title-wrapper {
        flex-direction: column;
    }

    table.table {
        overflow: scroll;
    }

    input.form-control.custome-input {
        width: 100%;
    }

    .box-store-inner {
        display: flex;
        flex-direction: column;
    }

    .row .llight-report-product {
        flex-direction: column;
    }

    .row .llight-report-product .count-order-text i {
        margin: 0 10px !important;
    }

    .details .data-panel .details-row .details-row .alert-same .row .llight-report-product {
        flex-direction: column;
        right: 0;
    }

    .details .data-panel .details-row .details-row .alert-same .row .llight-report-product .count-order-text .fas {
        margin-right: 0 !important;
    }

    .details .data-panel .details-row .base-info {
        flex-direction: column;
        margin-top: 3rem;
        text-align: right;
        margin-bottom: 3rem;
    }

    .details .data-panel .details-row .icons-details {
        flex-direction: column;
    }

    .details .data-panel .details-row .btn-success {
        margin: auto !important;
        margin-bottom: 1rem !important;
    }

    .product-details .sidebar {
        width: 100%;
        margin-bottom: 1rem;
    }
}

@media only screen and (min-width: 768px) and (min-width: 992px) {
    .col-md-4 {
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }
}