/**
    * @author CoderSpy Ltd, Bangladesh
    * @email: info@coderspy.com
    * @create date 2020-01-06 12:00:00
    * @modify date 2021-02-27 18:08:45
    * @desc MyFragranceMe is a Multivendor Ecommerce Web Application For Perfume Industry.
    * @version Version: 1.0
    * @php Requires PHP: 7.2
    * @tag Tags: MyFragranceMe, Ecommerce, Developed by CoderSpy
 **/

.note-list {
    height: 35px !important;
    background: white;
    border-bottom: 1px dashed #ddd;
    width: 100%;
    padding: 2px 0px;
}

.note-list img {
    width: 30px;
    border-right: 1px dashed #ddd;
    float: left;
}

.note-list p {
    margin: -5px 0px 0px 35px;
}

.blend-wrapper .single-items.single-items1 {
    padding-top: 285px;
}

.top_notes .blend_item_data {
    display: table-caption;
    caption-side: bottom;
    background: transparent;
    position: absolute;
    left: 7%;
    line-height: 15px !important;
}

.singleNote {
    border: 1px solid #8dc63f;
    font-size: 10px;
    margin-right: 3px;
    padding: 0px 2px;
    border-radius: 10px;
}

.singleNote:hover {
    border: 1px solid red !important;
    cursor: pointer;
    margin-bottom: 3px !important;
}

.blend_item_data4 {
    margin: 2% 0% 0% 0%;
    width: 70%;
    z-index: -1;
    height: 60px;
    padding: 10px;
    overflow-y: scroll;
}

.top_notes {
    display: table;
    text-align: center;
}

.blenditem4 {
    width: 50%;
    text-align: center;
    margin: 0 auto;
}

#ajaxSearch_base {
    width: 100% !important;
    z-index: 9999;
}

#ajaxSearch_any {
    width: 95% !important;
}


/* Common title and description */

.common_title {
    margin-top: 30px !important;
    background: rgb(247 250 252 / 85%) !important;
    border-radius: 7px !important;
}

.common_title h2 {
    font-family: Arial Rounded MT !important;
    font-size: 30px;
    color: #8EC63f;
}

.common_description {
    margin-top: 15px !important;
    background: rgb(247 250 252 / 85%) !important;
    border-radius: 7px !important;
}

.common_description p {
    padding: 10px 20px !important;
    font-size: 15px;
    color: rgb(0 0 0/ 0.9);
    text-align: justify;
    font-family: Helvetica Neue Light !important;
}

.search_by_input_note {
    border-top: none;
    border-left: none;
    border-right: none;
    background: transparent;
    border-bottom: 1px solid rgb(0 0 0/0.9) !important;
}

.search_by_input_note:focus {
    border-top: none;
    border-left: none;
    border-right: none;
    background: transparent;
    border-bottom: 1px solid rgb(0 0 0/0.9) !important;
}

.blend_select1 {
    width: 84%;
    margin: 13% -18%;
}

.belder_img img {
    width: 45%;
}

.blend_select1 {
    width: 80%;
    margin: 14% -15%;
}

.blender_last {
    border: 9px solid #8EC63F;
    border-radius: 34px;
    background: transparent;
    width: 50%;
    height: 120px;
    margin-top: 12px;
    position: relative;
}

.form-control {
    display: block;
    padding: 0px;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: 0px !important;
    width: 100%;
}

.note_heading p {
    font-size: 12px;
    position: absolute;
    top: -87%;
    left: 19%;
}

#singleNote {
    border: 1px solid #8dc63f;
    font-size: 12px;
    margin-right: 3px;
    margin-bottom: 5px;
    padding: 3px 5px;
    line-height: 25px;
}

#singleNote:hover {
    border: 1px solid red !important;
    cursor: pointer;
    margin-bottom: 3px !important;
}

.commonStyleNoteListing {
    width: 100%;
    display: block;
    margin-bottom: 10px;
    height: 50px;
    overflow-y: scroll;
    overflow-x: hidden;
    padding: 0px 10px;
}

.any_nte1 {
    z-index: 2;
    margin: -7% 0 0 0;
}

.commonStyleNoteListing::-webkit-scrollbar {
    width: 8px !important;
}


/* Track */

.commonStyleNoteListing::-webkit-scrollbar-track {
    background: #eff3e3;
}


/* Handle */

.commonStyleNoteListing::-webkit-scrollbar-thumb {
    background: #8EC63F;
}


/* Handle on hover */

.commonStyleNoteListing::-webkit-scrollbar-thumb:hover {
    background: #555;
}

.tp_nte_data {
    /* z-index: 1; */
    position: absolute;
    top: 20%;
    left: 41%;
    max-width: 100px;
    font-size: 9px;
}

.mdl_nte_data {
    /* z-index: 1; */
    position: absolute;
    left: 31%;
    top: 50%;
    width: 200px;
    font-size: 11px;
}

.bs_nte_data {
    /* z-index: 1; */
    position: absolute;
    top: 78%;
    left: 20%;
    width: 300px;
    font-size: 11px;
}

.any_nte_data {
    /* z-index: 1; */
    position: absolute;
    top: 23%;
    left: 22%;
    width: 300px;
    font-size: 11px;
}

.tpnts {
    display: table;
}

.tpnts h3 {
    margin: 0;
    width: 80px;
}

.tpnts .tp_nte_data {
    display: table-caption;
    caption-side: bottom;
    background: transparent;
}

.tp_nte_data img,
.mdl_nte_data img,
.bs_nte_data img,
.any_nte_data img {
    width: 23px;
    border: 1px solid #8EC63F;
    height: 20px;
    margin: 1px;
}

.note_head {
    margin: 0;
    padding: 0;
    color: #8EC63F;
    font-weight: 600;
    min-width: 100px;
}

.belder_img2 img {
    width: 90%;
    position: relative;
}

.blender_last2 {
    border: 8px solid #8EC63F;
    border-radius: 30px;
    background: transparent;
    width: 98%;
    height: 100px;
    margin-top: 12px;
    position: relative;
}

.blender_border1 {
    border-right: 2px solid #8EC63F;
}

.blender_border2 {
    border-right: 2px solid #8EC63F;
}

.ajaxSearch,
.ajaxSearch2,
.ajaxSearch3,
.ajaxSearch4 {
    position: absolute;
    z-index: 9999;
    width: 95% !important;
    height: 100px;
    border-top: none;
    margin-top: -8%;
    margin-bottom: 2%;
}

.ajaxSearch .note-list:hover,
.ajaxSearch2 .note-list:hover,
.ajaxSearch3 .note-list:hover,
.ajaxSearch4 .note-list:hover {
    background: #cbcbcb;
    cursor: pointer;
}

.blenditem1 {
    margin-top: -2%;
}

.note_line {
    min-height: 20px;
}

.blend_available_perfume {
    background: #8DC63F;
}


/* My blend page responsive start */

@media only screen and (max-width:575px) {
    .common_ajax_blend {
        margin-top: -10% !important;
    }
}

@media only screen and (max-width:767px) {
    .common_ajax_blend {
        margin-top: -9% !important;
    }
}

@media only screen and (max-width:991px) {
    .blend_hidden_mobile {
        display: none !important;
    }
    .blender_border1 {
        border-right: none !important;
    }
    .commonStyleNoteListing {
        padding: 0px !important;
    }
    .blend_input1 {
        padding-top: 15px;
    }
    .any_nte1 {
        margin-top: 55px !important;
    }
    .mdl_nte1 {
        padding-top: 15px;
    }
    .bs_nte1 {
        padding-top: 30px;
    }
    .common_ajax_blend {
        margin-top: -6% !important;
    }
    #singleNote {
        font-size: 11px;
    }
    .blend_available_perfume {
        font-size: 12px;
        padding: 3px 5px;
    }
    .nt_lvl {
        font-size: 13px;
    }
    .blend_common_search,
    .blend_common_search::placeholder {
        font-size: 12px;
    }
}

@media only screen and (min-width:992px) and (max-width: 1199px) {
    .tp_nte_data img,
    .mdl_nte_data img,
    .bs_nte_data img,
    .any_nte_data img {
        width: 20px !important;
        height: 20px !important;
    }
    .note_head {
        font-size: 11px !important;
    }
    .tp_nte_data {
        top: 21% !important;
        left: 39% !important;
    }
    .mdl_nte_data {
        top: 51% !important;
        left: 28% !important;
    }
    .bs_nte_data {
        top: 80% !important;
        left: 17% !important;
    }
    .any_nte_data {
        top: 31% !important;
        left: 17% !important;
    }
    .commonStyleNoteListing {
        padding: 0px !important;
    }
    .any_nte1 {
        margin: -3% 0 0 0 !important;
    }
}

@media only screen and (min-width:1200px) and (max-width: 1365px) {
    .tp_nte_data {
        top: 21% !important;
        left: 41% !important;
    }
    .mdl_nte_data {
        top: 51% !important;
        left: 32% !important;
    }
    .bs_nte_data {
        top: 80% !important;
        left: 23% !important;
    }
    .any_nte_data {
        top: 23% !important;
        left: 23% !important;
    }
}

@media only screen and (min-width:1366px) {
    .tp_nte_data {
        top: 21% !important;
        left: 41% !important;
    }
    .mdl_nte_data {
        top: 54% !important;
        left: 32% !important;
    }
    .bs_nte_data {
        top: 82% !important;
        left: 23% !important;
    }
    .any_nte_data {
        top: 40% !important;
        left: 23% !important;
    }
}


/* @media only screen and (min-width:1440px) and (max-width: 1535px) {
    .tp_nte_data {
        top: 21% !important;
        left: 42% !important;
    }
    .mdl_nte_data {
        top: 51% !important;
        left: 35% !important;
    }
    .bs_nte_data {
        top: 80% !important;
        left: 28% !important;
    }
    .any_nte_data {
        top: 23% !important;
        left: 28% !important;
    }
}

@media only screen and (min-width:1536px) and (max-width: 1599px) {
    .tp_nte_data {
        top: 21% !important;
        left: 43% !important;
    }
    .mdl_nte_data {
        top: 51% !important;
        left: 36% !important;
    }
    .bs_nte_data {
        top: 80% !important;
        left: 29% !important;
    }
    .any_nte_data {
        top: 23% !important;
        left: 29% !important;
    }
} */

@media only screen and (min-width:1600px) and (max-width: 1679px) {
    /* .tp_nte_data {
        top: 21% !important;
        left: 43% !important;
    }
    .mdl_nte_data {
        top: 51% !important;
        left: 36% !important;
    }
    .bs_nte_data {
        top: 80% !important;
        left: 29% !important;
    }
    .any_nte_data {
        top: 23% !important;
        left: 29% !important;
    } */
    .ajaxSearch,
    .ajaxSearch2,
    .ajaxSearch3,
    .ajaxSearch4 {
        margin-top: -6%;
    }
}

@media only screen and (min-width:1680px) and (max-width: 3840px) {
    /* .tp_nte_data {
        top: 21% !important;
        left: 43% !important;
    }
    .mdl_nte_data {
        top: 51% !important;
        left: 37% !important;
    }
    .bs_nte_data {
        top: 80% !important;
        left: 30% !important;
    }
    .any_nte_data {
        top: 23% !important;
        left: 30% !important;
    } */
    .ajaxSearch,
    .ajaxSearch2,
    .ajaxSearch3,
    .ajaxSearch4 {
        margin-top: -6%;
    }
}

@media only screen and (min-width:2048px) and (max-width: 2559px) {
    /* .tp_nte_data {
        top: 21% !important;
        left: 43% !important;
    }
    .mdl_nte_data {
        top: 51% !important;
        left: 37% !important;
    }
    .bs_nte_data {
        top: 80% !important;
        left: 30% !important;
    }
    .any_nte_data {
        top: 23% !important;
        left: 30% !important;
    } */
    .ajaxSearch,
    .ajaxSearch2,
    .ajaxSearch3,
    .ajaxSearch4 {
        margin-top: -6%;
    }
}