@font-face {
    font-family: 'mmzPer';
    src: url('../fonts/mmz/mmzPerfume.eot?enahim');
    src: url('../fonts/mmz/mmzPerfume.eot?enahim#iefix') format('embedded-opentype'),
    url('../fonts/mmz/mmzPerfume.ttf?enahim') format('truetype'),
    url('../fonts/mmz/mmzPerfume.woff?enahim') format('woff'),
    url('../fonts/mmz/mmzPerfume.svg?enahim#mmzPerfume') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

[class^="mmz-"], [class*=" mmz-"] {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: 'mmzPer';
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;

    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.mmz-female .path1:before {
    content: "\e900";
    color: rgb(153, 84, 59);
}

.mmz-female .path2:before {
    content: "\e901";
    margin-left: -1em;
    color: rgb(253, 207, 133);
}

.mmz-female .path3:before {
    content: "\e902";
    margin-left: -1em;
    color: rgb(237, 189, 119);
}

.mmz-female .path4:before {
    content: "\e903";
    margin-left: -1em;
    color: rgb(240, 240, 240);
}

.mmz-female .path5:before {
    content: "\e904";
    margin-left: -1em;
    color: rgb(8, 218, 43);
}

.mmz-female .path6:before {
    content: "\e905";
    margin-left: -1em;
    color: rgb(8, 218, 43);
}

.mmz-female .path7:before {
    content: "\e906";
    margin-left: -1em;
    color: rgb(253, 207, 133);
}

.mmz-male .path1:before {
    content: "\e907";
    color: rgb(253, 207, 133);
}

.mmz-male .path2:before {
    content: "\e908";
    margin-left: -1em;
    color: rgb(237, 189, 119);
}

.mmz-male .path3:before {
    content: "\e909";
    margin-left: -1em;
    color: rgb(253, 207, 133);
}

.mmz-male .path4:before {
    content: "\e90a";
    margin-left: -1em;
    color: rgb(0, 106, 156);
}

.mmz-male .path5:before {
    content: "\e90b";
    margin-left: -1em;
    color: rgb(153, 84, 59);
}

.mmz-perfume:before {
    content: "\e90c";
}

/**********    AnimateBack   *********/
.breadcrumb > li + li:before {
    padding-right: 5px;
    color: #ccc;
    content: "/\A0";
}

.breadcrumb-section {
    background-color: #39393e;
    z-index: 0;
    padding-top: 12px;
    padding-bottom: 12px;
    margin-bottom: 0;
}
.breadcrumb-section .catTitle {
    font-size: 24px;
    margin-bottom: 0;
}
.breadcrumb-section a{
    color: white;
}
.breadcrumb-section .circles {
    z-index: -1;
}

.breadcrumb-section .breadcrumb {
    margin-bottom: 0;
    justify-content: center;
    margin-top: 10px;
}

.breadcrumb-section .circles li {
    position: absolute;
    display: block;
    list-style: none;
    width: 20px;
    height: 20px;
    background-color: var(--color-main);
    animation: animate 25s linear infinite;
    bottom: -150px;
    opacity: 0.7 !important;
}

.breadcrumb-section .circles li:nth-child(1) {
    left: 25%;
    width: 80px;
    height: 80px;
    animation-delay: 0s;
}

.breadcrumb-section .circles li:nth-child(2) {
    left: 10%;
    width: 20px;
    height: 20px;
    animation-delay: 2s;
    animation-duration: 12s;
}

.breadcrumb-section .circles li:nth-child(3) {
    left: 70%;
    width: 20px;
    height: 20px;
    animation-delay: 4s;
}

.breadcrumb-section .circles li:nth-child(4) {
    left: 40%;
    width: 60px;
    height: 60px;
    animation-delay: 0s;
    animation-duration: 18s;
}

.breadcrumb-section .circles li:nth-child(5) {
    left: 65%;
    width: 20px;
    height: 20px;
    animation-delay: 0s;
}

.breadcrumb-section .circles li:nth-child(6) {
    left: 75%;
    width: 90px;
    height: 90px;
    animation-delay: 3s;
}

.breadcrumb-section .circles li:nth-child(7) {
    left: 19%;
    width: 110px;
    height: 110px;
    animation-delay: 7s;
}

.breadcrumb-section .circles li:nth-child(8) {
    left: 50%;
    width: 25px;
    height: 25px;
    animation-delay: 15s;
    animation-duration: 45s;
}

.breadcrumb-section .circles li:nth-child(9) {
    left: 20%;
    width: 15px;
    height: 15px;
    animation-delay: 2s;
    animation-duration: 35s;
}

.breadcrumb-section .circles li:nth-child(10) {
    left: 85%;
    width: 110px;
    height: 110px;
    animation-delay: 0s;
    animation-duration: 11s;
}

@keyframes animate {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 1;
        border-radius: 0;
    }
    100% {
        transform: translateY(-1000px) rotate(720deg);
        opacity: 0;
        border-radius: 50%;
    }
}

/**********    //AnimateBack   *********/
#breadcrumb a {
    padding: 0 5px;
}

#breadcrumb .fa-angle-left {
    font-size: 10px;
}

.text-red {
    color: red;
}

.color-green {
    color: green;
}

.price {
    color: var(--color-main);
    font-size: 20px;
    font-weight: bold;
    display: block;
}

.separator {
    border-left: 2px solid green;
    height: 20px;
    margin: 0 5px;
}

.show_product_title {
    background: var(--color-main);
    color: white;
    margin-top: 2px;
    border-radius: 4px;
    border: 2px dashed var(--color-third);
    box-shadow: 0 0 0 3px var(--color-forth);
    padding: 0 10px 0 10px;
    align-items: center;
}

.nav-tabs .nav-link {
    color: #212529;
    border-bottom: 4px solid transparent;
    padding: 15px 20px;
    font-weight: 500;
}

.nav-tabs .nav-link.active {
    border-top-color: transparent;
    border-right-color: transparent;
    border-left-color: transparent;
    border-bottom: 4px solid var(--color-third);
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
    color: #212529;
    background-color: #fff;
}

#brand {
    padding: 0 5px;
    margin-top: 5px;
    text-align: center;
}

.brand .brandIMG img {
    border-radius: 15px;
    max-height: 110px;
    max-width: 100%;
    object-fit: contain;
    background-color: white;
}

.scent .prdScent {
    margin-bottom: 5px;
    padding-top: 10px;
}

.scent .note {
    background-color: var(--color-third);
    color: var(--color-main);
    padding: 2px 10px;
    border-radius: 20px;
    width: 105px;
    margin: auto;
    text-align: center;
    display: block;
}

.scent .scentTitle {
    color: var(--color-forth);
    text-align: center;
    font-size: 12px;
}

.scent .scents {
    margin-top: 10px;
    text-align: center;
}

.scent .scentImg {
    display: inline;
}

.scent.container {
    padding: 1em;
    border: 2px dashed var(--color-main);
    border-radius: 5px;
}

.scent .scentImg img {
    border-radius: 10px;
    width: 50px;
    height: 50px;
    object-fit: cover;
}

.scents .scentImg a {
    border-radius: 10px;
    box-shadow: 1px 1px 5px var(--color-second);
    display: inline-block;
}

.comTop {
    display: flex;
    flex-wrap: wrap;
}

.commentChice {
    display: inherit;
    margin: auto;
    max-width: 100%;
}

.commentChice .choice svg {
    width: 50px;
    height: 60px;
    color: var(--color-third);
}

.commentChice .cRow {
    cursor: pointer;
    width: 70px;
    margin: auto;
    text-align: center;
}

.commentChice .cRow:hover svg {
    color: var(--color-second);
}

.comTop.container {
    box-shadow: 1px 1px 5px black;
    padding: 1em;
    border-radius: 5px;
}

.comTop .head {
    width: 100%;
    text-align: center;
    position: relative;
    top: -7px;
}

.comTop .rates {
    background-color: #e587e5;
    border-radius: 3px 7px 7px 3px;
    margin: 1px;
    font-size: 10px;
    color: purple;
    height: 15px;
}

.comTop .rate {
    text-align: center;
    margin-right: 2px;
    font-size: 10px;
    color: #6e006e;
}

.short_desc {
    padding-top: 1em;
}

.short_desc p {
    text-align: justify;
    font-size: 16px;
}

.mmzRate {
    background-color: white;
    border-radius: 10px;
    width: 165px;
}

.mmzCount {
    color: var(--color-font-main);
    font-size: 12px;
}

.icon_top.prdImg {
    background-color: var(--color-second);
    border-radius: 5px 5px 0 0;
    color: white;
    padding: 5px;
}

.topPrdImg {
    top: 10px;
}

.topPrdImg [class^="mmz-"] {
    border-radius: 40px;
    background-color: white;
    width: 30px;
    height: 30px;
    font-size: 30px;
}

.fa-heart, .fa-chart-bar {
    cursor: pointer;
    font-size: 24px;
}

.backRate {
    border-radius: 6px;
    height: 15px;
    z-index: -1;
    border: 1px solid purple;
}

/*****  Combination RadioBox ******/
.mmzRate .gray {
    background: transparent url("../imgs/stars.png") repeat-x scroll 0px -14px;
    height: 14px;
    width: 100px;
    direction: ltr;
}

.mmzRate .gray .red {
    background: transparent url("../imgs/stars.png") repeat-x scroll 0px 0px;
    height: 14px;
}

.radiobtn {
    position: relative;
    display: inline-block;
}

.radiobtn label {
    display: block;
    background: #f9ecc3;
    color: #444;
    border-radius: 5px;
    padding: 2px 30px 2px 5px;
    border: 2px solid var(--color-forth);
    margin-bottom: 5px;
    cursor: pointer;
}

.dact.radiobtn label {
    background: darkgray;
    border: 2px solid darkgrey;
    cursor: not-allowed;
}

.dact.radiobtn label:after, .dact.radiobtn label:before {
    content: unset;
}

.radiobtn label:after, .radiobtn label:before {
    content: "";
    position: absolute;
    right: 6px;
    top: 5px;
    width: 20px;
    height: 20px;
    border-radius: 3px;
    background: var(--color-forth);
}

.radiobtn label:before {
    background: transparent;
    transition: 0.1s width cubic-bezier(0.075, 0.82, 0.165, 1) 0s, 0.3s height cubic-bezier(0.075, 0.82, 0.165, 2) 0.1s;
    z-index: 2;
    overflow: hidden;
    background-repeat: no-repeat;
    background-size: 13px;
    background-position: center;
    width: 0;
    height: 0;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNS4zIDEzLjIiPiAgPHBhdGggZmlsbD0iI2ZmZiIgZD0iTTE0LjcuOGwtLjQtLjRhMS43IDEuNyAwIDAgMC0yLjMuMUw1LjIgOC4yIDMgNi40YTEuNyAxLjcgMCAwIDAtMi4zLjFMLjQgN2ExLjcgMS43IDAgMCAwIC4xIDIuM2wzLjggMy41YTEuNyAxLjcgMCAwIDAgMi40LS4xTDE1IDMuMWExLjcgMS43IDAgMCAwLS4yLTIuM3oiIGRhdGEtbmFtZT0iUGZhZCA0Ii8+PC9zdmc+);
}

.radiobtn input[type="radio"] {
    display: none;
    position: absolute;
    width: 100%;
    appearance: none;
}

.radiobtn input[type="radio"]:checked + label {
    background: var(--color-main);
    animation-name: blink;
    animation-duration: 1s;
    border-color: var(--color-forth);
    color: whitesmoke;
}

.radiobtn input[type="radio"]:checked + label:after {
    background: var(--color-third);
}

.radiobtn input[type="radio"]:checked + label:before {
    width: 20px;
    height: 20px;
}

@keyframes blink {
    0% {
        background-color: #f15cff;
    }
    10% {
        background-color: #db57e8;
    }
    11% {
        background-color: #c956d5;
    }
    29% {
        background-color: #c158cc;
    }
    30% {
        background-color: #b857c2;
    }
    50% {
        background-color: #a953b2;
    }
    45% {
        background-color: #9b4ca2;
    }
    50% {
        background-color: #8a4491;
    }
    100% {
        background-color: #74397a;
    }
}

/*****  /Combination RadioBox ******/
.usabled label.btn {
    width: 140px;
}

ul#mmzScrollSmooth {
    position: sticky;
    top: 0;
    background-color: white;
    transition: all 0.3s ease-in-out;
    z-index: 2;
}

ul#mmzScrollSmooth.topAdd {
    transition: all 0.3s ease-in-out;
    top: 55px;
}

.show_product_img {
    border-radius: 0 0 5px 5px;
    /*background-color: var(--color-third);*/
    padding: 10px;
    text-align: center;
}

.show_product_img #responsive_img {
    max-height: 450px;
}

.fa-shield-halved {
    color: green;
}

#item.tab-pane tr th {
    background-color: #eff2f7;
    padding: 15px;
}

td.product_item_value {
    vertical-align: middle;
}

.slick-dots li button:before {
    font-size: 3rem !important;
}

.product_box {
    transition: box-shadow 0.3s ease-in-out;
}

.product_box:hover {
    box-shadow: 0 0 5px grey;
    transition: box-shadow 0.3s ease-in-out;
}

.slick-list.draggable {
    padding: 5px 0;
}

.product_box a {
    text-decoration: none;
}

/******* /Comment Prd *******/
.rang_ul li {
    list-style: none;
    width: 100%;
    float: right;
    margin-top: 10px;
}

.bar {
    background: #ebeced;
    height: 5px;
    width: calc(100% / 5);
    border-left: 2px solid #fff;
    float: right;
    margin-top: 7px;
}

.done {
    background: #a1a6b5;
}

.bar2 {
    background: #ebeced;
    width: 20%;
    border-left: 4px solid #fff;
    float: right;
    margin-top: 7px;
}

.holder2 {
    background: #69ca6d !important;
    height: 10px;
    float: right;
}

.number_score {
    font-size: 9px;
    left: -10px;
    margin-top: -5px;
    background-color: green;
    color: white;
    border-radius: 50px;
    width: 20px;
    height: 20px;
    text-align: center;
    padding-top: 3px;
}

.user_comment_box {
    background: #fafbfc;
    box-shadow: 0 2px 3px rgba(0, 0, 0, .15);
    border-radius: 2px;
    margin-bottom: 30px;
}

.comment_header {
    background: #f5f6f7;
    width: 100%;
    padding-top: 15px;
    padding-bottom: 5px;
}

.comment_header p {
    padding-right: 20px;
    border-top-right-radius: 2px;
    border-top-left-radius: 2px;
    margin-bottom: 5px;
    margin-top: -5px;
}

.descScore {
    text-align: justify;
    width: 95%;
    margin-bottom: 25px;
    margin-top: 20px;
    background-color: #cfc;
    border-radius: 10px;
    padding: 5px;
    color: black;
}

.icon-arrow-top {
    background-position: -222px -83px;
    width: 7px;
    height: 10px;
}

.icon_span {
    top: 5px;
    position: relative;
}

/******* /Comment Prd *******/
.product_box span {
    background-color: var(--color-main);
    font-size: 16px;
    border-radius: 0 0 5px 5px;
}

.fa-solid.fa-percent {
    background-color: var(--color-third);
    border-bottom: 2px solid var(--color-main);
    border-left: 2px solid var(--color-main);
    font-size: 20px;
    border-radius: 0 0 0 8px;
    top: 5px;
    right: 5px;
}

.answerBtn {
    display: initial;
}

.text-left {
    text-align: left;
}

.click {
    cursor: pointer;
}

.color-box {
    width: 15px;
    height: 15px;
    vertical-align: middle;
}

.slider .cRow .comTitle, .slider .cRow .progress {
    width: 100px;
}

.comTop.slider .rates {
    width: 30px;
}

.slider .cRow:hover .comTitle {
    color: var(--color-second);
    font-weight: bold;
}

.slider .cRow small {
    text-align: right;
}

/*     Load     */
.comTop .loader {
    border-radius: 50%;
    border-top: 2px solid purple;
    border-right: 2px solid purple;
    width: 60px;
    height: 60px;
    -webkit-animation: spin 1.5s linear infinite;
    animation: spin 1.5s linear infinite;
    position: absolute;
    margin-top: -60px;
    margin-right: -30px;
}

/* Safari */
@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/*     /Load     */
.slider.comTop .loader {
    width: 15px;
    height: 15px;
    margin-top: 0px;
}

.cRow.myRate .choice svg {
    color: var(--color-main);
}

.slider .cRow.myRate .comTitle {
    color: var(--color-main);
    font-weight: bold;
}

@media (max-width: 400px) {
    .scentTab {
        flex-wrap: wrap;
    }
}

.text-justify {
    text-align: justify;
}

.remind_product div.fs-6 {
    color: darkgrey;
    display: inline;
}

.remind_product .mouse {
    color: rgba(128, 0, 128, 0.65);
}

.remind_product .mouse i:hover {
    color: purple;
    font-size: 21px;
    cursor: pointer;
}

.remind_product .mouse i:hover div {
    color: purple;
}

.remind_product .d-block.text-center {
    text-wrap: nowrap;
}

.fa-solid.mmz {
    color: var(--color-main);
}

.designerPerfumer .d-flex div.position-relative {
    box-shadow: 0px 0px 4px var(--color-second);
    border-radius: 10px;
    width: 100%;
}

.designerPerfumer .d-flex .textRow .d-flex {
    cursor: pointer;
    color: gray;
    max-width: 50px !important;
    text-align: center;
}

.designerPerfumer .d-flex .textRow .d-flex:hover {
    color: #0e0e0e;
}

.designerPerfumer .iTag {
    position: absolute;
    top: -8px;
    right: -2px;
}
.designerPerfumer .iTag + .textRow {
    margin-top: 15px;
}
.designerPerfumer.designer {
    border: 1px solid purple;
    border-radius: 10px;
    padding: 5px 15px;
}
.designerPerfumer .fa-circle-check {
    color: darkgreen;
}

.designerPerfumer .fa-circle-xmark {
    color: red;
}

.designerPerfumer img {
    border-radius: 45px;
    border: 1px solid;
    width: 70px;
}

@media (max-width: 600px) {
    .designerPerfumer .d-flex.gap-2 {
        flex-direction: column;
    }

    .designerPerfumer .d-flex div {
        width: 100% !important;
    }
    .card.d-flex img {
        width: 30% !important;
    }
    .card-img-overlay {
        margin-top: 30px !important;
    }
}
.designerPerfumer .mmzDes {
    top: -15px;
}
.searchBox {
    background: var(--color-main);
    border-radius: 40px;
    padding: 8px;
    height: 40px;
    display: flex;
    width: 230px;
    align-items: center;
}

.searchButton {
    color: white;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background: var(--color-second);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.4s;
}

.searchBox:hover .searchButton {
    color: var(--color-main);
    background: white;
    transition: 0.4s;
}

.searchInput::placeholder {
    color: lightgrey;
    opacity: 1; /* Firefox */
}

.searchInput::-ms-input-placeholder { /* Edge 12 -18 */
    color: lightgray;
}

.searchInput {
    border: none;
    background: none;
    outline: none;
    color: white;
    font-size: 14px;
    line-height: 40px;
    width: 178px;
}

#search_resultt {
    display: none;
}

#search_resultt {
    display: none;
    background-color: white;
    position: absolute;
    border: 1px solid #ccd0d2;
    border-top: 3px solid white;
    margin-top: -1px;
    z-index: 99;
}

#search_resultt div.result_box {
    font-size: inherit;
    display: inline-table;
    width: 100%;
    padding-bottom: 5px;
    padding-top: 5px;
}

#search_resultt div.result_box:not(:last-child) {
    border-bottom: 1px solid #e3e3e3;
}

#search_resultt .result {
    padding: 5px;
}

#search_resultt .result > span {
    background-color: #f4f4f4;
    width: 100%;
    display: block;
    margin-bottom: 5px;
    padding: 2px 6px;
}

#search_resultt .product {
    display: flex;
    column-gap: 10px;
}

#search_resultt .result_box:hover {
    background-color: beige;
}
.elem > span {
    background-size: contain;
    background-repeat: no-repeat;
}
.btn-success-main{
    background-color: var(--color-main);
    padding-left: 20px;
    padding-right: 20px;
}
.btn-success-main.disabled{
    background-color: var(--color-second);
}
thead tr:first-child th {
    background-color: #2e3192 !important;
    color: white;
}
.mmzPlanBtn{
    min-width: 200px;
    max-width: 300px;
}
label.btn.btn-outline-primary {
    min-height: 65px;
    margin-bottom: 15px;
}
.mmzPlanBtn label.btn.btn-outline-primary {
    min-height: 85px;
}
.btn-check:checked + .btn-outline-primary{
    color: white;
    font-weight: bold;
}

.btn-check:checked + .btn-outline-primary small{
    color: #c5c5c5 !important;
}
.form-select{
    background-position: left 0.75rem center !important;
}