:root{
    --dj-bg-beige: #E7E9E7;
}

body {
    font-size: 13px;
}

.cursor-pointer{
    cursor: pointer;
}

.dj-bg-beige{
    background: var(--dj-bg-beige);
}
.dj-bg-green-beige{
    background: #E7E9E7;
}

.fw-400{
    font-weight: 400 !important;
}

.fs-12{
    font-size: 12px;
}
.fs-13{
    font-size: 13px;
}
.fs-14{
    font-size: 14px;
}


.bg-1 {
    background-image: url("../img/bg-1.webp");
    background-position: bottom;
    position: relative;
}
.bg-2 {
    background-image: url("../img/bg-2.webp");
    background-position: 0px 85%;
    position: relative;
}
.bg-3 {
    background-image: url("../img/bg-3.webp");
    position: relative;
}
.bg-4 {
    background-image: url("../img/bg-4.webp");
    background-position-y: 10%;
    position: relative;
}
.bg-5 {
    background-image: url("../img/bg-5.webp");
    background-position-y: top;
    position: relative;
}
.bg-6 {
    background-image: url("../img/bg-6.webp");
    background-position: top;
    position: relative;
}

.bedge{
    font-size: 12px;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 2px;
}
.bedge-success{
    background-color: #daf4f0 !important;
    color: rgba(10, 179, 156, 1) !important;
}
.bedge-warning{
    background-color: #fef4e4 !important;
    color: rgba(247,184,75, 1) !important;
}
.bedge-danger{
    background-color: #fde8e4 !important;
    color: rgba(240,101,72, 1) !important;
}
.bedge-info{
    background-color: #dff0fa !important;
    color: rgba(41,156,219, 1) !important;
}
.bedge-dark{
    background-color: #e9ebec !important;
    color: rgba(33,37,41, 1) !important;
}

/* Start Header Css */
.mainmenu-area.sticky .head-sticky-none{
    display: none;
}
.main-menu .dropdown .dropdown-toggle{
    /* padding: 0px !important; */
    /* background: tra; */
    color: #ffffff;
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    /* line-height: 52px; */
    /* padding-bottom: 2px; */
    position: relative;
    text-transform: uppercase;
    transition: all 0.4s ease 0s;
}
.main-menu .dropdown .dropdown-toggle:focus{
    box-shadow: none;
}
.main-menu .dropdown-menu {
    background: #ffffff none repeat scroll 0 0;
    border: 1px solid #ebebeb;
    box-shadow: 0 4px 13px -3px #808080;
    left: 0;
    /* min-width: 220px; */
    padding: 5px 0 5px;
    text-align: left;
    top: 100%;
    transform-origin: 0 0 0;
    transition: all 0.2s ease 0s;
    border-radius: 0px;
}
.main-menu .dropdown-menu .dropdown-item{
    font-size: 12px;
    /* padding: 3px 0; */
    line-height: 24px;
    display: block;
    text-transform: capitalize;
    font-weight: normal;
    height: inherit;
    border-radius: 0;
    text-align: left;
    color: #6b6b6b;
}
.main-menu .dropdown-item.active, .main-menu .dropdown-item:active {
    color: #fff;
    text-decoration: none;
    background-color: #161616;
}
.settings-content {
    width: 250px;
    padding: 21px 25px;
}
form.search-form, .settings-content {
    background: #ffffff none repeat scroll 0 0;
    position: absolute;
    right: 20px;
}


header.header-area .logo img{
    max-width: 190px;
}

.header-sticky.sticky .main-menu > nav > ul > li > a{
    color: #8b8a8a;
}
.header-sticky.sticky .main-menu > nav > ul > li > a:hover{
    color: #161616;
}
.header-sticky.sticky .main-menu > nav > ul > li.active a{
    color: #161616;
}
.header-sticky.sticky .main-menu > nav > ul > li:hover > a:after, .header-sticky.sticky .main-menu > nav > ul > li.active > a:after {
    background: #161616;
}
.main-menu > nav > ul > li > a{
    margin-top: 8px;
}
.header-sticky.sticky .main-menu > nav > ul > li > a{
    margin-top: 0px;
}
.main-menu > nav > ul > li.megamenu-2 > ul > li a {
    font-size: 14px;
    /* padding: 20px 22px 20px; */
    padding: 12px 12px 12px;
}
/* End Header Css */

/*------- mobile top bar settings end -------*/
.offcanvas-search-inner {
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    position: fixed;
    -webkit-transition: 0.4s;
    transition: 0.4s;
    background-color: rgba(0, 0, 0, 0.7);
    opacity: 0;
    visibility: hidden;
    z-index: 99999;
  }
  .offcanvas-search-inner.show {
    opacity: 1;
    visibility: visible;
  }
  .offcanvas-search-inner.show .offcanvas-search-box {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  .offcanvas-search-inner .offcanvas-close {
    width: 50px;
    height: 50px;
    text-align: center;
    background-color: #fff;
    color: #ee3333;
    font-size: 22px;
    cursor: pointer;
    top: 50px;
    right: 50px;
    position: absolute;
    z-index: 9;
  }
  .offcanvas-search-inner .offcanvas-close i {
    display: block;
    line-height: 50px;
    -webkit-transition: 0.5s;
    transition: 0.5s;
  }
  .offcanvas-search-inner .offcanvas-close:hover i {
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
  }

  .offcanvas-search-box {
    height: 100vh;
    padding: 0 30px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-transform: translateY(50px);
            transform: translateY(50px);
    -webkit-transition: 0.4s;
    transition: 0.4s;
    /* -webkit-transition-delay: 0.6s;
            transition-delay: 0.6s; */
  }
  .offcanvas-search-box .bdr-bottom {
    border-bottom: 1px solid #edf1ed;
  }
  .offcanvas-search-box input {
    width: 100%;
    border: none;
    color: #fff;
    font-size: 16px;
    font-weight: 400;
    padding-right: 20px;
    padding-bottom: 15px;
    background-color: transparent;
  }
  .offcanvas-search-box input::-webkit-input-placeholder {
    color: #fff;
    font-size: 16px;
    opacity: 1;
  }
  .offcanvas-search-box input::-moz-placeholder {
    color: #fff;
    font-size: 16px;
    opacity: 1;
  }
  .offcanvas-search-box input:-ms-input-placeholder {
    color: #fff;
    font-size: 16px;
    opacity: 1;
  }
  .offcanvas-search-box input::-ms-input-placeholder {
    color: #fff;
    font-size: 16px;
    opacity: 1;
  }
  .offcanvas-search-box input::placeholder {
    color: #fff;
    font-size: 15px;
    opacity: 1;
  }
  .offcanvas-search-box .search-btn {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    font-size: 16px;
    color: #fff;
    line-height: 1;
    padding-bottom: 15px;
    text-transform: capitalize;
    -webkit-transition: 0.4s;
    transition: 0.4s;
  }
  .offcanvas-search-box .search-btn i {
    display: block;
    line-height: 1;
    font-size: 28px;
    padding-right: 15px;
  }
  .offcanvas-search-box .search-btn:hover {
    color: #ee3333;
  }



/* Home page */
.nivoSlider img {
    /* max-height: 100vh;
    min-height: ; */
    aspect-ratio: 16 / 9;
}
.banner-image > img{
    aspect-ratio: 1 / 1;
}
.product-image a img{
    aspect-ratio: 1 / 1;
}
/* Home page */

/* Product Details */
.easyzoom img{
    aspect-ratio: 1 / 1;
}
.single-product-thumbnail .slick-list .p-thumb img{
    aspect-ratio: 1 / 1;
}
.whishlistToggle i{
    color: red;
}
.colorselet [type="radio"] + label{
    /* width: 38px;
    height: 38px; */
    border: 1px solid #c1c1c1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50rem;
    cursor: pointer;
    padding: 1px;
}
.colorselet [type="radio"]:checked + label{
    border: 1px solid #161616;
    background: #161616;
    color: #ffffff;
}
.colorselet [type="radio"] + label span{
    /* width: 34px;
    height: 34px; */
    display: block;
    border-radius: 50rem;
    border: 2px solid #ffffff;
    padding: 1px 8px;
}
.product-short-text{
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 12px;
    line-height: normal;
    margin-bottom: 8px;
}

.colorselet.smallcolorPick [type="radio"] + label{
    width: 31px;
    height: 31px;
}
.colorselet.smallcolorPick [type="radio"] + label span{
    width: 27px;
    height: 27px;
    border: 3px solid #ffffff;
}
/* Product Details */

/* User Account */
.profile-setting .nav-pills .nav-link {
    background: 0 0;
    border: 0;
    border-radius: .25rem;
    font-size: 16px;
    line-height: normal;
    font-weight: 400;
    color: #8b8a8a;
    border-radius: 0px;
    text-align: left;
}
.profile-setting .nav-pills .nav-link:hover {
    color: #161616;
    background-color: #16161614;
}
.profile-setting .nav-pills .nav-link.active, .profile-setting .nav-pills .show>.nav-link {
    color: #fff;
    background-color: #161616;
}
.profile-setting thead {
    background: #f3f3f3 none repeat scroll 0 0;
}
.profile-setting thead th, .profile-setting tbody td{
    padding: 15px 9px;
}
.address-card-fields{
    position: relative;
}
.address-card-fields .remove-address i{
    position: absolute;
    top: 5px;
    right: 5px;
    font-size: 17px;
    background: #dc354517 !important;
    padding: 3px 9px;
    border-radius: 2px;
}
.address-card-fields .remove-address i{
    position: absolute;
    top: 5px;
    right: 5px;
    font-size: 17px;
    background: #dc354517 !important;
    padding: 3px 9px;
    border-radius: 2px;
}
.address-card-fields .edit-address i{
    position: absolute;
    top: 5px;
    right: 44px;
    font-size: 17px;
    background: #dc354517 !important;
    padding: 3px 9px;
    border-radius: 2px;
}
.address-card-fields .edit-address i{
    position: absolute;
    top: 5px;
    right: 44px;
    font-size: 17px;
    background: #dc354517 !important;
    padding: 3px 9px;
    border-radius: 2px;
}
.address-card-fields .check-address i {
    position: absolute;
    top: 5px;
    right: 5px;
    font-size: 12px;
    background: rgb(25 135 84);
    padding: 0px;
    width: 20px;
    height: 20px;
    border-radius: 50rem;
    display: flex;
    align-items: center;
    justify-content: center;
}


[type="radio"][name="BillAddress"] + label.form-fields .check-address {
    display: none;
}
[type="radio"][name="BillAddress"]:checked + label.form-fields .check-address {
    display: block;
}
[type="radio"][name="BillAddress"]:checked + label.form-fields {
    border: 1px solid rgb(25 135 84);
}
/* User Account */

/* Product List */
.filter-btn{
    cursor: pointer;
    display: flex;
    align-items: center;
    font-size: 14px;
    line-height: 6px;
}
.filter-btn i{
    display: inline-flex;
    align-items: center;
    font-size: 16px;
    line-height: 0px;
}
.filter-btn.filter-btn-IconChnage i{
    rotate: 180deg;
}
.fliter-anchor{
    cursor: pointer;
}
.fliter-anchor.active{
    color: #ee3333;
}
/* Product List */


@media (max-width:991px) {
    form.search-form, .settings-content {
        right: -10px;
    }
    header.header-area .logo img{
        max-width: 125px;
    }
}

@media (max-width:767px) {
    header.header-area .logo img {
        max-width: 100px;
    }
    .search-wrapper a {
        font-size: 19px;
    }
    .settings-wrapper > a {
        font-size: 19px;
    }
}

.avatar-upload {
    position: relative;
    max-width: 165px;
}
.avatar-upload .avatar-edit {
    position: absolute;
    right: 12px;
    z-index: 1;
    top: 10px;
}
.avatar-upload .avatar-edit input {
    display: none;
}
.avatar-upload .avatar-edit input + label {
    display: inline-block;
    width: 34px;
    height: 34px;
    margin-bottom: 0;
    border-radius: 100%;
    background: #FFFFFF;
    border: 1px solid transparent;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.12);
    cursor: pointer;
    font-weight: normal;
    transition: all 0.2s ease-in-out;
}
.avatar-upload .avatar-edit input + label:hover {
    background: #f1f1f1;
    border-color: #d6d6d6;
}
.avatar-upload .avatar-edit input + label:after {
    content: "\f040";
    font-family: 'FontAwesome';
    color: #757575;
    position: absolute;
    top: 6px;
    left: 0;
    right: 0;
    text-align: center;
    margin: auto;
}
.avatar-upload .avatar-preview {
    width: 150px;
    height: 150px;
    position: relative;
    border-radius: 100%;
    border: 6px solid #f2f2f2;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
}
  .avatar-upload .avatar-preview > div {
    width: 100%;
    height: 100%;
    border-radius: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

  .disable{
      cursor: not-allowed !important;
      opacity: 0.7;
  }