﻿.containerx {
    position: relative;
    width: 50%;
}

.imagex {
    opacity: 1;
    display: block;
    width: 100%;
    height: auto;
    transition: .5s ease;
    backface-visibility: hidden;
}

.middlex {
    transition: .5s ease;
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
}

.containerx:hover .imagex {
    opacity: 0.3;
}

.containerx:hover .middlex {
    opacity: 1;
}

.text {
    background-color: #04AA6D;
    color: white;
    font-size: 16px;
    padding: 16px 32px;
}
#product-imgs .product-preview {
    margin: 5px 5px;
}


div.scroll {
    margin: 4px, 4px;
    padding: 8px;
    width: 100%;
    height: 600px;
    overflow-x: auto;
    overflow-y: auto;
    white-space: nowrap;
    border: 1px solid #E4E7ED !important;
    border-radius: 0px;
}


.toast {
    opacity: 1 !important;
}


.promosale {
    max-width: 70px;
    width: 70px;
}


.input-group.date {
    width: 250px;
}

.remembermelabel {
   padding-left: 0px !important;
}


.breadcrumbx {
    margin-right: -14px !important;
    margin-left: -14px !important;
}

    .breadcrumbx > div:nth-child(1) {
        margin-left: 14px !important;
        margin-right: 50px !important;
        width: 100px !important;
    }


#logoutForm > ul > li:nth-child(1) > div > ul > li > a {
    color:black;

}


.table-sorter {
    font-weight: 600;
}
.searchbox {
    padding-left: 0px;
    margin-left: 0px;
    margin-right: 0px;
    padding-right: 0px;
}



/*.note-editable ol, .note-editable ul {
    list-style: disc;
    list-style-position: inside;
}
*/

/* For summernote override unordered and order list */
.note-editable ul {
    list-style: disc;
    list-style-position: inside;
}

.note-editable ol {
    list-style: decimal;
    list-style-position: inside;
}


#product-tab ul {
    list-style: disc;
    list-style-position: inside;
}

#product-tab ol {
    list-style: decimal;
    list-style-position: inside;
}



.product-details ul {
    list-style: disc;
    list-style-position: inside;
}

.product-details ol {
    list-style: decimal;
    list-style-position: inside;
}

/* no stretch for product image on home page */
.products-tabs .product-img {
    padding: 15px;
}


.products-tabs .product-img img {
    width: 100%;
    height: 263px;
    object-fit: scale-down;
}
/* end here  no stretch for product image on home page */



/* no stretch for product image on store page */
.product-store .product-img {
    padding: 15px;
}


.product-store .product-img img {
    width: 100%;
    height: 263px;
    object-fit: scale-down;
}


/* end here no stretch for product image on store page */


/* no stretch for product image on product page */

.productx .product-img {
    padding: 15px;
}

.productx .product-img img {
    width: 100%;
    height: 263px;
    object-fit: scale-down;
}

/* end here no stretch for product image on product page */

.td-image .imgthumbnail {
    width: 100%;
    height: 160px;
    object-fit: scale-down;
}

#product-main-img .main-image-x {
    width: 100%;
    height: 458px;
    object-fit: scale-down;
}



#product-imgs .thumb-image-x {
    width: 100%;
    height: 130px;
    object-fit: scale-down;
}


.thumbnailx:hover {
    -webkit-box-shadow: 0px 0px 6px 0px #e4e7ed, 0px 0px 0px 2px #d10024;
    box-shadow: 0px 0px 6px 0px #e4e7ed, 0px 0px 0px 2px #d10024;
}



.thumbnailx {
    display: block;
    padding: 4px;
    line-height: 1.42857143;
    background-color: #fff;
    border: 1px solid #E4E7ED;
    border-radius: 0px;
    -webkit-transition: border .2s ease-in-out;
    -o-transition: border .2s ease-in-out;
    transition: border .2s ease-in-out;
}


.thumbnailx img {
    width: 100%;
    height: 250px;
    padding:10px;
    object-fit: scale-down;
}

.pagination {
    border-radius: 0px !important;
}

.pagination > li > a, .pagination > li > span {
    color: #000000 !important;

}

    .pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover, .pagination > .active > a:focus, .pagination > .active > span:focus {
        color: #ffffff !important;
        background-color: #D10024 !important;
        border-color: #D10024 !important;
        padding-top: 8px !important;
    }

/*    .pagination > a:hover, .pagination > a:focus {
        color: #D10024 !important;
        text-decoration: none;
        outline: none;
    }*/
    .pagination > li > a:focus, .pagination > li > a:hover, .pagination > li > span:focus, .pagination > li > span:hover {
        color: #D10024 !important;
    }


    .pagination li {
        display: inline-block !important;
        width: 40px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        background-color: #FFF;
        border: 0px !important;
        -webkit-transition: 0.2s all;
        transition: 0.2s all;
        border: 0px !important;
    }
    .pagination li + li {
        margin-left: 10px !important;
    }

    .pagination > li > a, .pagination > li > span {
        position: relative;
        float: left;
        padding: 6px 12px;
        margin-left: -1px;
        line-height: 1.428571429;
        text-decoration: none;
        background-color: #ffffff;
        border: 1px solid #dddddd;
        height: 40px !important;
        width: 40px !important;
        padding-top: 8px !important;
    }

    .pagination > li:first-child > a, .pagination > li:first-child > span {
        margin-left: 0;
        border-bottom-left-radius: 0px !important;
        border-top-left-radius: 0px !important;
        padding-top: 8px !important;
    }

    .pagination > li:first-child > a, .pagination > li:first-child > span {
        margin-left: 0;
        border-top-left-radius: 0px !important;
        border-bottom-left-radius: 0px !important;
        padding-top: 8px !important;
    }

    .pagination > li:last-child > a, .pagination > li:last-child > span {
        border-top-right-radius: 0px !important;
        border-bottom-right-radius: 0px !important;
        padding-top: 8px !important;
    }

    .pagination > li:last-child > a, .pagination > li:last-child > span {
        border-top-right-radius: 0px !important;
        border-bottom-right-radius: 0px !important;
        padding-top: 8px !important;
    }




.form-controlx {
    display: block;
    width: 100%;
    height: 40px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #E4E7ED !important;
    border-radius: 0px !important;
/*    -webkit-box-shadow: none !important;*/
/*    box-shadow: 0 0 0 0.2rem rgb(0 123 255 / 25%);*/
}
.header-search form .input:focus-visible {
    outline: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}
select:focus-visible {
    outline: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}
.form-controlx:focus-visible {
    outline: none !important;
    /*    -webkit-box-shadow: none !important;*/
    box-shadow: 0 0 0 0.2rem rgb(141 196 255 / 25%)
}


.input-number input:focus-visible {
    outline: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}


.form-controlx:focus {
    border-color: #66afe9;
    outline: none !important;
    /*   -webkit-box-shadow: none !important;*/
    box-shadow: 0 0 0 0.2rem rgb(141 196 255 / 25%)
}


.btn-defaultx {
    color: #333;
    background-color: #fff;
    border-color: #ccc !important;
    border: 1px solid #E4E7ED !important;
    border-radius: 0px !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

.btnx {
    display: inline-block;
    margin-bottom: 0;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    background-image: none;
    border: 1px solid transparent;
    border: 1px solid #E4E7ED !important;
     font-size: 14px;
    line-height: 26px !important;
    border-radius: 0px !important;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border-radius: 0px !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

.btn-defaultx:focus {
    border-radius: 0px !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

.btnx:focus {
    border-radius: 0px !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}
/*
:focus-visible {
    outline: none !important;
    outline-color: none !important;
    outline-style: none !important;
    outline-width: 0px !important;
}

input[type="submit" i]:focus-visible {
    outline-offset: 0px !important;
    outline-color: none !important;
}

input:focus-visible {
    outline-offset: 0px !important;
    outline-color: none !important;
}*/

.table-bordered > tbody > tr > td, .table-bordered > tbody > tr > th, .table-bordered > tfoot > tr > td, .table-bordered > tfoot > tr > th, .table-bordered > thead > tr > td, .table-bordered > thead > tr > th {
    border: 1px solid #E4E7ED !important;
}

.table-bordered {
    border: 1px solid #E4E7ED !important;
}




/* CSS FOR POPUP PRICE MENU */
.holder {
    position: relative !important;
}

.dropdown1, .dropdown2 {
    position: absolute;
    border: 1px solid #E4E7ED !important;
    display: none;
    z-index: 999;
    background: white;
    width: 230px;
    height: 50px;
    padding: 10px;
    margin-top:6px;
}

/*@media only screen and (max-width: 1200px) {
    .container {
        width: 1400px ;
    }
}

@media (min-width: 1200px) {
    .container {
        width: 1400px;
    }
}*/



#reviewTable td, #reviewTable tr
{
    padding: 0px !important;
    margin:0px !important;
}


.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background-color: none !important;
    background: none !important;
    background: none !important;
}


.dataTables_wrapper .dataTables_paginate .paginate_button:active {
    box-shadow: none !important;
}

.col-center-block {
    float: none !important;
    display: block;
    margin: 0 auto !important;
    text-align: center !important;
    /* margin-left: auto; margin-right: auto; */
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    padding: 0px !important;
    width: 35px !important;
    height: 35px !important;
    line-height: 35px;
    text-align: center;
    background-color: #FFF;
    border: 1px solid #E4E7ED;
    -webkit-transition: 0.2s all;
    transition: 0.2s all;
}

    .dataTables_wrapper .dataTables_paginate .paginate_button .page-link {
        padding: 0px !important;
        width: 35px !important;
        height: 35px !important;
        line-height: 35px !important;
        font-family: 'Montserrat', sans-serif !important;
        font-weight: 500 !important;
        font-size: 13.5px !important;
    }


.dataTables_paginate .pagination li + li {
    margin-left: 4px !important;
}


.dataTables_paginate .pagination {
    margin-top: 0px !important;
}




.alert-successx {
    color: #155724;
    background-color: #d4edda;
    border-color: #c3e6cb;
}

.alertx {
    position: relative;
    padding: 0.75rem 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: 0.25rem;
}

.alert-dangerx {
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb;
}










/* CSS FOR SHOW MORE SHOW LESS */
.addReadMore.showlesscontent .SecSec,
.addReadMore.showlesscontent .readLess {
    display: none;
}

.addReadMore.showmorecontent .readMore {
    display: none;
}

.addReadMore .readMore,
.addReadMore .readLess {
    font-weight: bold;
    margin-left: 2px;
    color: black;
    cursor: pointer;

    line-height: 35px !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 500 !important;
    font-size: 14px !important;
}

    .addReadMore .readMore:hover,
    .addReadMore .readLess:hover {
        color: #D10024 !important;
    }


.addReadMoreWrapTxt.showmorecontent .SecSec,
.addReadMoreWrapTxt.showmorecontent .readLess {
    display: block;
}




/* OVERRIDE BOOTSTRAP LIST BOX STYLE*/

/** LIST BOX SIZE */
#list-group-size .list-group-item:last-child {
    margin-bottom: 0; 
    border-bottom-right-radius: 0px; 
     border-bottom-left-radius: 0px; 
}


#list-group-size .list-group-item:first-child {
     border-top-left-radius: 0px; 
     border-top-right-radius: 0px; 
}

#list-group-size .list-group {
    border-radius: 0px;
}

#list-group-size .list-group-item {
    border: 0px;
}
    #list-group-size .list-group-item:hover {
        background-color: hsl(210deg 100% 56%);
        color:white;
    }



    #list-group-size .list-group-item a:hover, #list-group-size .list-group-item a:focus {
        color: white !important;
        text-decoration: none;
        outline: none;
    }

.list-group-item-remove-size {
    font-size: 12px;
    line-height: 20px;
    color: #b9bbbf;
}

/* END OF LIST BOX SIZE */


/* LIST BOX COLOR */
    #list-group-color .list-group-item:last-child {
        margin-bottom: 0;
        border-bottom-right-radius: 0px;
        border-bottom-left-radius: 0px;
    }


#list-group-color .list-group-item:first-child {
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
}

#list-group-color .list-group {
    border-radius: 0px;
}

#list-group-color .list-group-item {
    border: 0px;
   
}

    #list-group-color .list-group-item:hover {
        background-color: hsl(210deg 100% 56%);
        color: white;
    }



    #list-group-color .list-group-item a:hover, #list-group-color .list-group-item a:focus {
        color: white !important;
        text-decoration: none;
        outline: none;
    }

.list-group-item-remove-color {
    font-size: 12px;
    line-height: 20px;
    color: #b9bbbf;
}

/* END OF LIST BOX COLOR*/




.input-selectx {
    width: 150px !important;
    text-transform: uppercase;
}


.add-to-cart-btn-disabled:hover {
    background-color: #FFF !important;
    color: #a7a7a7 !important;
    border-color: #a7a7a7 !important;
}
.add-to-cart-btn-disabled > i {
    color: #a7a7a7 !important;
}

.add-to-cart-btn-disabled {
    background-color: #a7a7a7 !important;
}




/* CHANGE MODAL ADD BUTTON OPACITY ON HOVER */
.modal-product-add-btn:hover {
    opacity: 1 !important;
}


/* limit product name length */
.product-namex {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* number of lines to show */
    line-clamp: 2;
    -webkit-box-orient: vertical;
}

.tooltipp {
    white-space: nowrap !important;
    width: 160px !important;
}

.tooltipp2 {
    width: 215px !important;
}


/*.product-name {
    height: 30px;
}
*/