@media(max-width: 359px){
    .desktopNav{
        display: none !important;
    }
    .mobileNav{
        display: flex !important;
    }
    .ui .tabs{
        grid-template-columns: repeat(3,1fr)
    }
}
@media(max-width: 380px){
    .desktopNav{
        display: none !important;
    }
    .mobileNav{
        display: flex !important;
    }
    .flexContainer{
        grid-template-columns: repeat(4, 55px);
    }
}
@media(max-width: 568px){
    .pasteCodeDiv{
        grid-template-columns: auto;
    }
    .ui .tabs{
        margin-bottom: 0px;
    }
    .card.mt-4 {
      margin-top: 0.5rem !important;
    }
    .exteriorCard.allCards.step1Card, .card.moduleCard1, .card.extrasCard1, .summaryMainWrapper.allCards{
        margin-top: 0 !important;
    }
    #loader{
        font-size: 12px;
        gap: 10px;
    }
    #loader img{
        max-width: 100%;
    }
    .spin {
        width: 50px;
        height: 50px;
    }
    .quoteDiv button, .locationPopupBtn{
        font-size: 12px;
        min-width: 100%;
        max-width: 100%;
    }
    .modal .modal-title
    {
        font-size: 18px !important;
    }
    .location-card h6
    {
        font-size: 14px !important;
    }
}
@media(min-width: 655px) and (max-width: 1023px) {

    .desktopNav, .zoomNumber{
        display: none !important;
    }
    .mobileNav{
        display: flex !important;
    }
    .flexContainer{
        grid-template-columns: repeat(7, 65px);
    }
    .flexContainer .optionSize40{
        width: 65px;
        height: 65px;
    }
}
@media(max-width: 1023px){
    .pasteCodeDiv{
        grid-column-gap: 10px;
    }
    .openDesignBtn{
        padding: 0;
        height: auto;
        border: 0;
    }
    .bottomStickyBar{
        z-index: 99999999999999999999 !important;
        position: unset !important;
    }
    .sideIconsParent, .progressLabel, .progress{
        display: none;
    }
    .summaryButtonsWrapper button, .buyLeaseWrapper button{
        font-size: 12px;
    }
    .summaryCardButtonsWrapper{
        width: 100%;
        position: static;
    }
    .summaryButtonsWrapper{
        padding: 0;
    }
    .buyLeaseWrapper{
        padding: 10px 0;
    }
    /* .moduleType, .kamadoType{
        grid-template-columns: repeat(2,1fr);
    } */
    .sideIconsParent{
        padding: 2px;
    }
    .theme button{
        padding: 3px;
    }
    .bgIcon {
        width: 35px;
        height: 35px;
    }
    .bgIcon img{
        max-width: 20px;
    }
    .zoomFullScreenParent{
        bottom: 10px;
        right: 10px;
        gap: 5px;
    }
    .fullscreenIcons, .zoomIcons{
        padding: 5px 10px;
        display: flex;
    }
    .fullscreenIcons{
        padding: 10px;
    }
    .fullscreenIcons img {
        max-width: 16px;
    }
    .desktopNav, .zoomNumber{
        display: none !important;
    }
    .mobileNav{
        display: flex !important;
    }
    nav{
        width: 100% !important;
    }
    nav{
        height: 38px !important;
        width: 100% !important;
    }
    nav ul{
        gap: 16px;
        height: 38px;
        justify-content: space-between;
    }
    ul:last-child{
        padding-right: 16px;
    }
    ul li{
        font-size: 12px;
        z-index: 99999999999999;
    }
    .mobilenav{
        display: block !important;
    }
    .lengthPrice{
        display: block;
    }
    .desktopNav, .themeText{
        display: none !important;
    }
    main{
        grid-template-columns: 1fr;
    }
    .iframeParent, iframe, .ui {
        height: 50vh;
    }
    .sideIconsParent{
        top: 50%;
        left: 28px;
        transform: translate(-20px,-50%);
    }
    .bottomLeftIcons{
        position: absolute;
        left: 10px;
        bottom: 10px;
        gap: 5px;
    }
    .measurementIconsParent{
        bottom: 10px !important;
        top: auto;
        left: 10px;
        right: auto;
        /* transform: translate(0px,-50%); */
        display: flex;
        padding: 10px;
        width: fit-content;
        height: fit-content !important;
        height: max-content !important;
        max-height: 140px !important;
    }
    .zoomIcons{
        bottom: 10px;
        right: 10px;
        transform: translate(0,0);
        /* padding: 5px 10px; */
    }
    .theme{
        padding: 0;
    }
    .bottomStickyBar{
        width: 100%;
    }
    .background-modal{
        bottom: auto;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        z-index: 9999999999;
        position: fixed
    }
    .tooltip{
        display: none !important;
    }
    .lengthBtn{
        height: fit-content;
        padding: 6px;
    }
    nav ul{
        padding-left: 16px;
    }

    .nextStepBtn{
        padding: 8px 16px;
    }
    .standardDrawerBtn, .kamadoOptionsBtn, .kamadoDrawerBtn{
        font-size: 12px;
    }

}
@media(min-width: 1024px) and (max-width: 1319px){

    /* .summaryCardButtonsWrapper{
        width: 380px;
    } */
    .desktopNav{
        display: none !important;
    }
    .mobileNav{
        display: flex !important;
    }
    main{
        grid-template-columns: auto 380px;
    }
    .iframeParent nav{
        width: calc(100% - 380px);
    }
    .bottomStickyBar{
        width: 380px;
    }
    ul li{
        font-size: 13px;
    }
    .flexContainer, .colorOutside {
        grid-template-columns: repeat(4,55px);
    }
    .lengthBoxes .box{
        width: 30px;
        height: 30px;
    }
    .zoomNumber{
        display: none;
    }

    .mobileNav ul:last-child{
        margin-right: 20px;
    }
    .standardDrawerBtn, .kamadoOptionsBtn, .kamadoDrawerBtn{
        font-size: 14px;
    }
}
@media(max-width: 1319px){
    .openDesignBtn{
        padding: 0;
        height: auto;
        border: 0;
        color: var(--black);
    }
}
@media(min-width: 1320px) and (max-width: 1430px){

    ul,.mr24{
        gap: 10px;
    }
    .requestQuoteBtn{
        font-size: 12px;
        padding: 0 5px;
    }
    .nextedLi span.font18{
        font-size: 15px;
    }
    .nextedLi span{
        font-size: 11px;
    }
    .desktopNav{
        display: flex !important;
    }
    .mobileNav{
        display: none !important;
    }
    ul li{
        font-size: 14px;
    }
    .flexContainer{
        grid-template-columns: repeat(3, 55px);
    }
    .ui .tabs{
        grid-template-columns: repeat(3,1fr);
    }
    .lengthBoxes .box{
        width: 30px;
        height: 30px;
    }
}
@media(min-width: 1430px){
    .desktopNav{
        display: flex !important;
    }
    .mobileNav{
        display: none !important;
    }
}
@media(min-width: 1430px) and (max-width: 1760px){

    ul,.mr24{
        gap: 10px;
    }
    .requestQuoteBtn{
        font-size: 12px;
        padding: 0 5px;
    }
    .nextedLi span{
        font-size: 11px;
    }
    /* .summaryCardButtonsWrapper{
        width: 400px;
    } */
    .flexContainer{
        grid-template-columns: repeat(4, 55px);
    }
    .ui .tabs{
        grid-template-columns: repeat(4,1fr);
    }
    .tabs .tabBtn{
        font-size: 14px;
    }
    ul li{
        font-size: 14px;
    }
    .lengthBoxes .box{
        width: 30px;
        height: 30px;
    }
    main{
        grid-template-columns: auto 400px;
    }
    .iframeParent nav{
        width: calc(100% - 400px);
    }
    .bottomStickyBar{
        width: 400px;
    }
    /* .changeModel{
        display: none;
    } */
}

@media(min-width: 1320px) and (max-width: 1500px){
    .deliveryTimeText{
        display: none;
    }
}