
@media only screen and (max-width:1600px){
    .topCollapsablePanel {
        min-height: 475px;
    }
    .topCollapsablePanel.close {
        margin-top: -475px;
    }
}
@media only screen and (max-width:1499px) {
    #applyPluginModal .item {
        display: block;
    }

    #applyPluginModal .guideArea{
        width: 100%;
    }

    #applyPluginModal .guideTextare {
        width: 100%;
    }

    .instruction-list li .set-pixels {
         width: auto !important;
        height: auto !important;
    }

    #applyPluginModal .modal-header h4 {
        flex: 50%;
    }
}
@media only screen and (max-width:1440px){
    .themeCustomizeSection {
        padding: 30px 10px 0;
    }
    .superslidercore-wrapper {
        height: 480px;
    }
    .ourPlanSection ul.PriceCardList li {
        width: 25%;
    }
}
@media only screen and (max-width:1366px){

    .ourPlanSection ul.PriceCardList li {
        width: 30%;
    }
    .superslidercore-wrapper {
        height: 450px;
    }
    .topCollapsablePanel {
        min-height: 452px;
    }
    .topCollapsablePanel.close {
        margin-top: -452px;
    }
    .topCollapsablePanel{
        height: auto;
    }
    .topCollapsablePanel .nav-pills {
        width: 25%;
    }
    .tabArea .tab-content{
        padding-left: 20px;
    }
    .toolTypeArea ul li,
    .toolsGroup .toolTypeArea.fourItems ul li{
        width: 50%;
        padding: 0 4px 5px 0;
    }
    .nav-pills .nav-link{
        padding: 10px 15px;
    }
    .productTitle {
        font-weight: 600;
        font-size: 20px;
        line-height: 24px;
    }
}

@media only screen and (max-width:1280px){
    .topCollapsablePanel {
        min-height: 433px;
    }
    .superslidercore-wrapper {
        height: 420px;
    }
    .topCollapsablePanel.close {
        margin-top: -433px;
    }
    a.publishButton {
        font-size: 12px;
        padding: 10px 10px;
    }
    .varientSection input[type=radio] + label {
        padding: 0.5rem 1rem 0.4rem;
        font-size: 12px;
    }
    .CartButtonArea a {
        padding: 10px 15px;
        font-size: 14px;
    }
    .toolsMenuArea ul li h4.panelHeader {
        letter-spacing: 0.2px;
        padding: 12px 15px;
        font-size: 13px;
    }
    .parentCategory{
        flex-wrap: wrap;
    }
    .column{
        width: 100%;
        justify-content: space-between;
        padding: 0px;
    }
    .column:last-child {
        padding: 0 0px 0 0px;
    }
    .toolsGroup .toolTypeArea ul li {
        width: 100%;
        display: flex;
        align-items: center;
    }
    .toolsGroup .toolTypeArea ul li .form-control{
        max-width: 100px;
    }
}
@media only screen and (max-width:1140px){
    /* .toolpanelContent ul li .tootlTitle {
        width: 100%;
    } */
    .superslidercore-wrapper {
        height: 370px;
    }
    .topCollapsablePanel.close {
        margin-top: -465px;
    }
    .tabArea .tab-content {
        padding-left: 10px;
    }
    .topCollapsablePanel .nav-pills {
        width: 40%;
    }
    .nav-pills .nav-link{
        font-size: 13px;
    }
    .tabContentArea .content h4 {
        font-size: 18px;
        line-height: 20px;
        margin: 0 0 10px 0;
    }
    .nav-pills .nav-link img {
        padding-right: 5px;
        width: 20px;
    }
    .tabContentArea .content {
        padding: 0px 0px 0 10px;
    }
    .tabContentArea .imgArea img{
        object-fit: contain;
    }
}
@media only screen and (max-width:1024px){

    .ourPlanSection ul.PriceCardList li {
        width: 40%;
    }
    .superslidercore-wrapper {
        height: 326px;
    }
    .topCollapsablePanel {
        min-height: 433px;
    }
    .topCollapsablePanel.close {
        margin-top: -433px;
    }
    a.publishButton i {
        display:none;
    }
    .toolpanelContent ul li .toolInputArea {
        text-align: right;
    }
    .tabArea .tab-content {
        padding-left: 10px;
    }
    .toolpanelContent{
        padding: 0px 10px;
    }
    .toolpanelContent ul li{
        justify-content: space-between;
    }
    .toolsGroup .toolTypeArea ul li{
        justify-content: flex-start;
    }
    .column:first-child,.column{
        padding: 0 0px 5px 0px;
    }
    .submitBtn{
        text-align: left;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 8px 10px;
        line-height: 16px;
    }
    .templatePreviewTextArea{
        padding-left: 10px;
    }
    .productTitle {
        font-weight: 600;
        font-size: 22px;
        line-height: 28px;
    }
    .bredCrumbsarea {
        padding: 0px 0 10px;
    }
    h6.priceArea span.sale{
        margin-left: 10px;
        padding: 2px 8px;
        font-size: 12px;
        font-weight: 600;        
    }
    .CartButtonArea a{
        font-size: 14px;
        line-height: 24px;
        padding: 8px 15px;
    }
    h6.priceArea,h6.priceArea span i{
        font-size: 18px;
        font-weight: 600;
    }

}
@media only screen and (max-width:992px){

    .previewPanelArea .livePrevPanel a {
        margin: 0 0px;
    }
    .menuSupportSection .currentPlanButton {
        padding: 4px 12px;
        cursor: auto;
        width: 100%;
        justify-content: space-between;
        display: flex;
        align-items: center;
        margin-bottom: 5px;
    }
    .previewPanelArea .mobileMenupanel .menuSupportSection .currentPlanButton a{
        align-items: center;
        justify-content: center;
        width: 50%;
        margin:0 0 0 5px;
    }
        .ourPlanSection .subscriptionsArea {
        height: calc(100vh - 45px);
    }
    
    .ourPlanSection ul.PriceCardList li {
        width: 45%;
    }
    .superslidercore-wrapper {
        height: 600px;
    }
    .bottommessageArea {
        width: 100%;
        float: left;
        display: flex;
        justify-content: flex-start;
        position: relative;
        left: initial;
        bottom: initial;
        padding-left: 0;
        padding: 10px 0 0 0;
        margin: 10px 0 0 0;
        border-top: 1px solid rgba(0,0,0,0.1);
    }
    .contentArea{
        padding: 20px;
    }
    .toolpanelContent {
        padding: 0px 20px;
    }
    .templatePreviewGallery,.templatePreviewTextArea{
        width: 100%;
        padding: 0px;
    }
    .templatePreviewTextArea{
        margin: 15px 0 0 0;
    }
    .templatePreviewGallery img{
        width: 100%;
    }
    .topCollapsablePanel{
        height: 543px;
    }
    .topCollapsablePanel.close {
        margin-top: -543px;
    }
    .topCollapsablePanel {
        padding: 15px 15px;
    }
    .nav-pills .nav-link {
        padding: 5px 10px 5px 8px;
        text-indent: -99999px;
        line-height: 20px;
    }
    .nav-pills .nav-link i{
        text-indent: 0px;
        right: 5px;
    }
    .tabContentArea {
        width: 100%;
    }
    .tabContentArea .content h4 {
        font-size: 13px;
        line-height: 16px;
        margin: 0 0 5px 0;
    }
    .tabContentArea .content p{
        line-height: 16px;
        font-size: 11px;
    }
    .tabContentArea .imgArea {
        width: 75%;
        padding: 0px;
    }
    .tabContentArea .imgArea img {
        width: 100%;
        min-height: 100px;
        object-fit: cover;
        max-height: 100px;
    }
    .tabContentArea .content {
        width: 100%;
        padding: 0px 0px 0 10px;
    }
    .topCollapsablePanel .nav-pills {
        width: 35%;
    }
    .input-field .prefix {
        left: 0;
    }
    .previewPanelArea a.toggleMobileMenu{
        display: inline-flex;
    }
    .previewPanelArea a.toggleMobileMenu:hover{
        background-color: #fff;
        color: #440BBD;
    }
    .previewPanelArea .selecttemplate{
        position: relative;
        left: initial;
    }
    .previewPanelArea{
        padding: 5px 160px 5px 10px;
        justify-content: flex-start;
    }
    .mobileMenupanel{
        width: 100%;
        display: none;
        flex-wrap: wrap;
        position: absolute;
        left: 0px;
        top: 45px;
        z-index: 10;
        padding: 15px;
        background: #fff;
        transform: translateY(10px);
        transition: all 0.3s ease-in;
        box-shadow: 0 20px 20px rgb(0 0 0 / 10%);
    }
    .previewPanelArea.open .mobileMenupanel{
        display: flex;
        transform: translateY(0px);
        transition: all 0.3s ease-in;
    }
    .mobileMenupanel .selecttemplate,
    .mobileMenupanel .livePrevPanel{
        width: 100%;
        margin: 0 0 10px 0;
        padding: 0 0 10px 0;
        border-bottom: 1px solid #f4f4f4;
        flex-wrap: wrap;
        flex-direction: column;
    }
    .select-wrapper {
        position: relative;
        width: 100%;
    }
    .previewPanelArea .selecttemplate label{
        padding: 5px 0;
    }
    .mobileMenupanel .menuSupportSection{
        position: relative;
        right: initial;
        width: 100%;
        flex-wrap: wrap;
    }
        .mobileMenupanel .menuSupportSection a {
            width: 100%;
            margin-bottom: 5px;
            margin-left: 0px;
            margin-right: 0px
        }
    .mobileMenupanel .menuSupportSection a:last-child{
        margin-bottom: 0px;
    }
    .mobileMenupanel .livePrevPanel{
        width: 100%;
        align-items: center;
        flex-wrap: wrap;
    }
    .previewPanelArea .mobileMenupanel a{
        align-items: center;
        justify-content: center;
        width: 100%;
    }
    .contentArea,
    .toolsMenuArea {
        width: 100%;
        min-height: auto;
    }
    .contentArea {
        position: relative;
        padding-bottom: 60px;
    }
    .toolsMenuArea.fixed {
        padding-bottom: 10px;
        position: relative;
    }
    .contentWrapper{
        display: flex;
        flex-direction: column-reverse;
    }
    .themeFilterArea .select-wrapper {
        width: auto;
    }
    .toolsMenuArea.fixed .toolTabArea {
        width: 100%;
        right: 0;
        bottom: 5px;
    }
    a.publishButton i {
        display: block;
    }
    a.publishButton {
        font-size: 18px;
        padding: 10px 10px;
    }



}
@media only screen and (max-width:896px){}
@media only screen and (max-width:853px){

}
@media only screen and (max-width:850px){}
@media only screen and (max-width:847px){}
@media only screen and (max-width:824px){}
@media only screen and (max-width:812px){}
@media only screen and (max-width:800px){
    .topCollapsablePanel {
        height: 480px;
    }
    .topCollapsablePanel.close {
        margin-top: -480px;
    }
    .planModalcontainer .subscriptionsArea{
        padding: 0px;
    }
    .planModalcontainer .subscriptionsArea ul.PriceCardList {
        align-items: center;
        flex-wrap: wrap;
        justify-content: center;
        flex-direction: column;
    }
    .planModalcontainer .subscriptionsArea ul.PriceCardList li {
        width: 100%;
        padding: 0px;
        margin-bottom: 10px;
    }
}
@media only screen and (max-width:799px) {
    .themeCustomizeSection {
        padding: 0px 10px 0;
    }
}
@media only screen and (max-width:768px){

}
@media only screen and (max-width:767px){

    .ourPlanSection .subscriptionsArea {
        height: auto;
        padding:20px;
    }
    .ourPlanSection .subscriptionsArea ul.PriceCardList {
        flex-direction: column;
    }
    .ourPlanSection ul.PriceCardList li {
        width: 100%;
    }
    .sectionTopArea {
        flex-direction: column;
    }
    .sectionTopArea .themeHeader {
        width: 100%;
        font-size: 12px;
        line-height: 18px;
        padding: 0 0px 10px 0;
        text-align: center;
    }
    .subscrStatus {
        flex-direction: column;
    }
    .varientSection input[type=radio] + label {
        padding: 0.35rem 0.75rem;
        font-size: 12px;
    }
    .toolTypeArea ul li.half {
        width:100%;
    }
    .toolsGroup .toolTypeArea ul li {
        width: 100%;
        display: flex;
        align-items: flex-start;
        flex-direction: column;
        flex-direction: column-reverse;
    }

        .toolsGroup .toolTypeArea ul li .toolValue {
            width: 100%;
        }

    .colorPicker {
        display: flex;
        justify-content: space-between;
        flex-direction: row-reverse;
    }

        .colorPicker .btn {
            height: 26px;
            width: 30px;
        }

        .colorPicker .file-path-wrapper input {
            max-width: 90%;
        }
}
@media only screen and (max-width:766px){
    .topCollapsablePanel {
        height: 600px;
    }

    .topCollapsablePanel.close {
        margin-top: -600px;
    }
}
@media only screen and (max-width:736px){}
@media only screen and (max-width:732px){}
@media only screen and (max-width:720px){}
@media only screen and (max-width:699px) 
{
    #applyPluginModal .modal-header {
        display: block
    }

    #applyPluginModal .modal-header .btn-close {
        position: absolute;
        right: 8px;
        top: 8px;
    }

    #applyPluginModal .iss-cross {
        margin-top: 15px;
    }

    #applyPluginModal .modal-header .supportBtn {
        margin: 0 0px 0 0;
    }

    #applyPluginModal .iss-cross {
        justify-content: space-between;
    }
}
@media only screen and (max-width:667px){}
@media only screen and (max-width:640px){

}
@media only screen and (max-width:600px){
    .topCollapsablePanel {
        height: 520px;
    }
    .topCollapsablePanel.close {
        margin-top: -520px;
    }
    a.publishButton {
        font-size: 16px;
        padding: 10px 10px;
    }
}
@media only screen and (max-width:599px){
    .superslidercore-wrapper {
        height: calc(100vw - 40px);
    }
    .thumposLeft .superslidercore-wrapper,
    .thumposLeft .superslidercore-wrapper {
        height: calc(100vw - 80px);
    }
    .posBottom .sslider_thumbs li, .posTop .sslider_thumbs li {
        height: 80px;
    }
}
@media only screen and (max-width:540px){
    
}
@media only screen and (max-width:520px){
 
}
@media only screen and (max-width:480px)
{
    .topCollapsablePanel {
        height: 450px;
    }
    .topCollapsablePanel.close {
        margin-top: -450px;
    }
    .varientSection input[type=radio]+label {width:auto;}
    
    a.publishButton {
        font-size: 15px;
        padding: 10px 6px;
    }

    .themeApplyArea a.themeApplyBtn {width: 100%;}
}
@media only screen and (max-width:460px){}
@media only screen and (max-width:420px){
    .topCollapsablePanel {
        height: 400px;
        min-height: 400px;
    }
    .topCollapsablePanel.close {
        margin-top: -400px;
    }
    .topCollapsablePanel {
        padding: 15px 5px;
    }
    a.publishButton {
        font-size: 14px;
    }
}
@media only screen and (max-width:414px){}
@media only screen and (max-width:412px){}
@media only screen and (max-width:400px){}
@media only screen and (max-width:380px){}
@media only screen and (max-width:375px){}
@media only screen and (max-width:360px){

    .varientSection input[type=radio]+label
    {
        padding: 0.5rem 2rem;
        font-size: 10px;
    }
    .instruction-list li .set-pixels {
        width: 90% !important;
        height: auto !important;
    }

    .ctrl-div{width: 260px!important;}

    #custom-copy, #custom-copied {
        right: 22px;
    }

}
@media only screen and (max-width:359px) {
    .topCollapsablePanel {
        height: 580px;
    }
    .topCollapsablePanel.close {
        margin-top: -580px;
    }
}
    @media only screen and (max-width:340px) {
        .topCollapsablePanel {
            height: 550px;
        }
        .topCollapsablePanel.close {
            margin-top: -550px;
        }
        .bredCrumbsarea ul li a {
            font-size:10px;
        }
    }

    @media only screen and (max-width:320px) {
        .topCollapsablePanel {
            height: 520px;
        }

        .topCollapsablePanel.close {
            margin-top: -520px;
        }
    }


    /*--------*/

    @media only screen and (max-height: 890px) {
    }

    @media only screen and (max-height: 750px) {
    }

    @media only screen and (max-height: 720px) {
    }

    @media only screen and (max-height: 700px) {
    }





