.pages-header .cont h1 {
    font-size: 75px;
    margin-top: 20px;
    margin-bottom: 0px;
}
#mixmatchmenu ul li h5, #myCustOuterDiv .hovertext {
    font-size: 14px !important;
}
.accordian .accordian-title h5 {
    font-size: 12px !important;
}
header.pages-header.bg-img.valign.parallaxie {
    background-position: center !important;
}

#exTab2 h3 {
    color: #191514;
    padding: 5px 15px;
}

.custom_tab .list {
    padding: 6px 10px;
}

.custom_tab .nav-tabs {
    border-bottom: 1px solid #ddd;
}

.divDtlImage {
    height: auto;
}

.custom_tab .list a {
    color: #333;
    font-size: 12px;
    border: 1px solid transparent;
    padding: 10px;
}

.custom_tab .list i {
    color: #000;
}

.custom_tab .list a {
    margin-right: 2px;
    line-height: 1.42857143;
    border: 1px solid transparent;
    border-radius: 4px 4px 0 0;
}

.custom_tab li.list.active {
    background-color: #efeaea;
    border-bottom: 0px;
}

/* .expand-icon i.fa-angle-down,
        .expand-icon i.fa-angle-up {
        	display: none;
        }*/

.accordian-title i.fa-angle-down {
    display: block;
}

/*        .accordian-title i.fa.fa-angle-up {
        	display: none;
        }*/

.accordian.active .accordian-title i.fa.fa-angle-up {
    display: block;
}

.accordian.active .accordian-title i.fa.fa-angle-down {
    display: none;
}

.accordian-title {
    font-size: 12px;
    font-weight: 400;
    padding: 10px;
    margin-bottom: 2px;
    display: flex;
    justify-content: space-between;
    transition: all 0.1s linear;
    color: #000;
    font-weight: 500;
    /*background-color: #343a40;*/
    border-bottom: 1px solid #f3f3f3;
    z-index: 2;
    position: relative;
}

.accordian.active .accordian-title {
    font-size: 15px;
    font-weight: 500;
}

.accordian.active .accordian-content {
    display: block;
}

.accordian-content {
    display: none;
    padding: 20px;
    /*border-bottom: 1px solid #35aa04;*/
}

.accordian {
    cursor: pointer;
}

.color_pattern .color {
    border-radius: 50px;
    height: 40px;
    width: 40px;
    margin: 0px 10px;
    box-shadow: 1px 1px 10px 1px #ddd;
}

.custom-design-item .item-img {
    padding: 8px;
    box-shadow: 1px 1px 10px 1px #ddd;
}

.color_pattern .color.active {
    border: 2px solid #4caf50;
    box-shadow: 1px 1px 8px 1px #4caf5061;
}

.custom-design-item .item-img.active {
    border: 1px solid #8bc34a4f;
    box-shadow: 1px 1px 8px 1px #4caf5061;
}

.custom-design-item .item-img {
    position: relative;
}

.color_pattern .color.black {
    background: #000;
}

.color_pattern .color.gray {
    background: #808080;
}

.color_pattern .color.white {
    background: #fff;
}

.title.clipboard {
    font-size: 73%;
}

element.style {
}

.config {
    font-size: 12px;
    font-weight: 400;
    /*font-family: Montserrat, sans-serif;*/
}

#custom-design-data {
    min-height: calc(75vh);
    /* height: auto; */
    width: auto;
    padding: 25px 0px;
    /* position: sticky; */
    z-index: 1;
    /* top: 8px; */
    box-shadow: 1px 1px 10px 1px #ddd;
    background-color: black;
}

img#pendant-data {
    /*width: 300px;*/
    width: 16rem;
    margin: auto;
    display: flex;
}

img#glasss-data {
    /*width: 185px;*/
    width: 10rem;
    display: flex;
    margin: auto;
    position: relative;
    margin-top: -10px;
    z-index: 3;
}

img#celling-data {
    /*width: 85px;*/
    width: 5rem;
    margin: auto;
    display: flex;
    position: relative;
    margin-top: -7px;
}

img#metal-data {
    /*width: 150px;*/
    width: 10rem;
    margin: auto;
    display: flex;
    position: relative;
    margin-top: -10px;
    z-index: 4;
}

img#cage-data {
    /*width: 150px;*/
    width: 8rem;
    margin: auto;
    display: flex;
    margin-top: -42px;
    z-index: 2;
    position: relative;
}

.clipboard {
    padding: 4px 8px;
    color: #ffffff;
    cursor: pointer;
    line-height: 20px;
    text-align: center;
    width: 100%;
    color: #fff;
    background-color: #797979;
}

#Clipboard #previewImg {
    margin: 30px 0px;
}

.accordian-content .img-card {
    display: flex;
    margin-bottom: 20px !important;
}

.tabarea.wishtab {
    overflow-x: auto
}

.padding_save {
    padding: 3px 10px 0px 10px !important;
}

.padding_cancel {
    padding: 3px 10px 0px 10px !important;
}

.dropdown-menu.radius {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.image_w {
    width: 16px;
}

/*.font_title {
    font-family: 'Playfair Display', serif;
}*/

.mb_0 {
    margin-bottom: 0px;
}

.poplpl.mt_space {
    margin-top: -26px;
}

.padding_cancel {
    padding: 3px 10px 0px 10px !important;
}
/* Extra small devices (phones, 600px and down) */

@media only screen and (max-width: 600px) {
    /* Small devices (portrait tablets and large phones, 600px and up) */
    .col-sm-6 {
        width: 50%;
    }

    .col-order-sm-1 {
        order: 1;
    }

    .col-order-sm-2 {
        order: 2;
    }

    .sm-spacing-bottom {
        margin-bottom: 40px;
    }
}

@media only screen and (min-width: 600px) {
}


/* Medium devices (landscape tablets, 768px and up) */

@media only screen and (min-width: 768px) {
}


/* Large devices (laptops/desktops, 992px and up) */

@media only screen and (min-width: 992px) {
}


/* Extra large devices (large laptops and desktops, 1200px and up) */

@media only screen and (min-width: 1200px) {
}



.clipimage {
    max-width: calc(15vw);
    /*max-height:calc(30vh);*/
}

.clipimage-div {
    max-width: 100%;
    /*max-height: calc(33vh);*/
    border: 1px solid black;
    text-align: center;
    padding: 5px;
    display: inline-grid;
    vertical-align: top;
}

.clipimage-btn {
    margin: 5px;
}

.clipimage-span-hidden {
    display: none
}

.clipimage-span {
    display: block;
}

.span_hdr {
    padding: 0px;
    /* margin-bottom: 10px;*/
    top: -10px;
    font-size: 14px;
}

.rem-icon {
    z-index: 5;
    display: none;
    position: relative;
    margin-left: 10px;
}

/*//ready made pendant*/
#myCustomDiv #left_0 {
    /*  width: 16rem;*/
    width: 100%;
    margin: auto;
    display: flex;
    z-index: 0;
}
/*
//choose colour of ceiling box
*/
#myCustomDiv #left_1 {
    /*    width: 40rem;
*/ margin: auto;
    width: 100%;
    display: flex;
    position: relative;
    margin-top: -7px;
    z-index: 1;
}

/*//choose the cable
*/
#myCustomDiv #left_2 {
    max-height: 300px;
    z-index: 2;
    width: 100%;
    /* width: 16rem;*/
    display: flex;
    margin: auto;
    z-index: 2;
}

/*//choose a lampholder
*/
#myCustomDiv #left_3 {
    /* width: 16rem;*/
    width: 100%;
    margin: auto;
    display: flex;
    z-index: 3;
}

/*//choose a collar if you want
*/
#myCustomDiv #left_4 {
    /*  width: 16rem;*/
    width: 100%;
    margin: auto;
    display: flex;
    position: relative;
    margin-top: -7px;
    z-index: 4;
}

/*//choose a metal shade if you want
*/
#myCustomDiv #left_5 {
    z-index: 5;
    width: 100%;
}

/*//choose a glass shade to go with the metal shade or without it
*/
#myCustomDiv #left_6 {
    z-index: 6;
    width: 100%;
}

/*//choose a metal cage to go with the metal shade or without it
*/
#myCustomDiv #left_7 {
    z-index: 1;
    /*   width: 10rem;*/
    width: 100%;
    margin: auto;
    display: flex;
    position: relative;
    margin-top: -4px;
}

/*//choose a metal undercage to go with the metal shade
*/
#myCustomDiv #left_8 {
    z-index: 8;
    width: 100%;
}

#myCustOuterDiv {
    position: sticky;
    top: 100px;
}

.left-image {
    /*width: calc(19vw);*/
    margin-top: -1px;
    position: relative;
    max-height: 400px !important;
}
/* menu bottom line */
.line {
    margin-bottom: -0.4rem;
}


#msgbox {
    width: calc(25vw);
    overflow: hidden;
    background: #f1f1f1;
    box-shadow: 0 0 20px black;
    border-radius: 8px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 99999;
    padding: 10px;
    /*text-align: center;*/
    display: none;
    position: fixed;
}

.title.clipboard.hover-effot.msgtext {
    width: 12%;
    font-size: 12px;
    padding: 0px 0px;
}


/*msg box */

#msgboxtext {
    font-size: 84%;
    color: black;
    font-weight: 600;
    padding: 20px 0px 20px 0px;
}

.popupimage {
    width: 60%;
    /* margin-left: -100px;*/
}

@media only screen and (max-width:992px) {
    .popupimage {
        width: 40%;
        margin-left: 0px;
    }

    #msgboxtext {
        font-size: 70%;
    }

    .config {
        display: none;
    }
    .button-mtb-10 {
        margin-top: 7px !important;
        margin-bottom: 2px !important;
    }
}



@media only screen and (max-width:768px) {
    .popupimage {
        width: 40%;
        margin-left: 0px;
    }


    .title.clipboard.hover-effot.msgtext {
        width: 22%;
        padding: 0px 0px;
        font-size: 10px;
    }
}

.no-padding-margin.mb-1 {
    margin-bottom: 1.5rem !important;
}

.mixmatchmenu {
    top: 0%;
    position: fixed;
    background: white;
    z-index: 3;
    padding-top: 3% !important;
}

    .mixmatchmenu.sticky-top {
        top: 7% !important;
    }

.MMtext {
    margin-right: 5px;
    margin-left: 5px;
    font-weight: 400;
    font-size: 12px;
    /* font-family: Montserrat, sans-serif;*/
}



.hover-effot.tooltext {
    width: auto !important;
    margin-left: 5px !important;
    border-radius: 10%;
}

@media only screen and (max-width:767px) {
    .hover-effot.tooltext {
        width: 12% !important;
        margin-top: 2px !important;
        margin-left: 17px !important;
        margin-bottom: 5px !important;
    }
}

@media only screen and (max-width:487px) {
    .hover-effot.tooltext {
        margin-top: 1px !important;
        margin-bottom: 5px !important;
    }
}

#myCustomDiv .tooltip .tooltiptext {
    cursor: pointer;
    z-index: 9;
    width: 45%;
    margin-top: -30px;
    right: -20px;
}

.left-image:hover {
    /* transform: scale(1.05); */
}
.tooltip .tooltiptext{
    font-family: sans-serif !important;
}

.tooltiptext .viewmore {
    margin: 2px;
    font-size: 15px;
    text-decoration: underline;
}


.color_pattern .background {
    border-radius: 50px;
    height: 40px;
    width: 40px;
    margin: 0px 10px;
    box-shadow: 1px 1px 10px 1px #ddd;
    float: right;
}

    .color_pattern .background.active {
        border: 2px solid #4caf50;
        box-shadow: 1px 1px 8px 1px #4caf5061;
    }

.Mixmatch .gallery.twsty {
    display: flex;
    flex-wrap: wrap;
}

.items {
    margin: 10px;
}

.animated.des-fonts a {
    color: black;
}


/*css additional*/
.tab-pane .row {
    display: flex;
    flex-wrap: wrap;
    padding: 0 !important;
}

.tab-pane p {
    margin: 0;
}

.row.color_pattern {
    margin-bottom: 10px;
}

.accordian.active .accordian-title h5 {
    font-size: 14px !important;
    font-weight: 700 !important;
}

h5 {
    margin: 5px !important;
}

.accordian-title h5 {
    font-weight: 550 !important
}

.custom-design-item input {
    padding: 10px;
}


/* Mixmatxh Button start*/
.h-40{
    height: 38px;
}
.mixmatch-button-left {
    float: left;
}
.mixmatch-button-right {
    float: right;
}

.mixmatch-button {
    margin-bottom: 0px;
    margin-left: 5px;
    margin-top: 0px;
    width: 15%
}

.bt-font{
    font-family: sans-serif;
}
.btn-mixmatch {
    color: #FFF;
    background-color: #343a40;
    border-color: #343a40;
    cursor: pointer;
    font-size: 12px;
    font-weight: 400;
    font-family: sans-serif;
}
/* Mixmatch Button END*/

.z-index-500 {
    z-index: 500 !important;
}
.sticky-top{
    z-index: 550 !important;
}
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
    .clipimage {
        max-width: 100%;
    }

    #msgbox {
        width: 70%;
    }

    /* Small devices (portrait tablets and large phones, 600px and up) */
    @media only screen and (min-width: 600px) {
        .clipimage {
            max-width: 100%;
        }

        #msgbox {
            width: 70%;
        }
    }

    /* Medium devices (landscape tablets, 768px and up) */
    @media only screen and (min-width: 768px) {
        .clipimage {
            max-width: 50%;
        }

        #msgbox {
            width: 70% !important;
        }
    }

    /* Large devices (laptops/desktops, 992px and up) */
    @media only screen and (min-width: 992px) {
        #msgbox {
            width: 90%;
        }
    }

    /* Extra large devices (large laptops and desktops, 1200px and up) */
    @media only screen and (min-width: 1200px) {
        #msgbox {
            width: 90%;
        }
    }

    .hover-select:hover {
        cursor: pointer;
    }
    .hover-select:hover .hover-item {
        display: block;
      
    }

    .hover-item {
        display: none;
        position: absolute;
        top: 50%; /* Position from the top */
        left: 50%; /* Position from the left */
        transform: translate(-50%, -50%); /* Adjust position to truly center */
    }

        .hover-item .select-item {
            padding: 4px 35px;
            background-color: #51515136;
            text-align: center;
            border: 1px solid #0000001c;
        }