@media screen and (min-width: 1400px) {
    .d-flex a label{
        font-size: 14px;
    }
    .modal-dialog.modal-dialog-vertical{
        max-width: 400px;
    }
    #ProductModal .d-flex span{
        font-size: 14px;
    }
    .modal-body .d-flex img{
        max-height: 50px;
    }
    .header-bottom .d-flex a label{
        font-size: 14px;
    }
    .header-bottom .d-flex a.nav-link{
        width: 230px;
    }
    .logo img{
        max-height: 35px;
    }

    .modal-button button{
        padding: 5px 12px;
        font-size: 14px;
    }
    .edit-facelit .edit-part .edit-button{
        font-size: 14px;
    }
    .text-content-letters label{
        font-size: 14px;
    }
    .tab-button button{
        font-size: 14px;
    }
    .edit-body-section{
        min-width: calc(100vw - 400px);
    }
}

@media screen and (max-width: 1400px) {
    .header-bottom{
        top: 132px;
    }
}

@media screen and (max-width: 767px) {
    .header .container, .image-section {
        margin-left: 20px;
        margin-right: 20px;
    }

    .header-bottom{
        top: 125px;
    }

    .logo {
        margin-right: 0px;
        margin-left: 0px;
    }

    .header-left{
        display: block;
    }

    .d-flex a img{
        margin-right: 0px;
    }

    .sign-design-content{
        min-height: 112px;
        min-width: fit-content; 
    }

}

@media screen and (max-width: 610px){
    .d-flex a label{
        font-size: 13px;
    }
    .header-bottom .d-flex a label{
        font-size: 13px;
    }
    .header-bottom .d-flex a{
        width: 149px;
        padding: 5px 2px;
    }

    .header-top .header-right a img.first-img {
        height: 20px;
    }
    
    .header-top .header-right a img.second-img {
        height: 18px;
    }
    
    .header-top .header-right a img.third-img {
        height: 16px;
    }

    .header-left .d-flex a img {
        height: 15px;
    }

    .header-bottom .d-flex a img{
        height: 18px;
    }

}

@media screen and (max-width: 576px){
    .header .container, .image-section {
        margin-left: 10px;
        margin-right: 10px;
    }
    .header-top .header-right a{
        padding: 12px 5px;
        text-align: center;
    }
    .header-middle .header-left a{
        padding: 15px 5px;
    }
    .header-bottom{
        width: 65%;
    }
    .header-bottom .d-flex{
        justify-content: space-around;
        width: 100%;
    }
    .shape-sizeDetails-root{
        padding: 0;
    }
    #dimension-pophover{
        right: 0;
    }
    .body-part-with-background{
        height: calc(100% - 10px);
    }
}

/* modal responsive for mobile */
@media screen and (max-width: 576px) {
    .mobile-menu-toggle{
        display: none !important;
    }
    .modal-dialog.modal-dialog-vertical{
        min-width: calc(100vw - 50px);
    }

    .modal .modal-content .dropdown-item.py-2{
        padding-top: 15px !important;
        padding-bottom: 15px !important;
    }

    .header-middle .header-left a{
        padding: 15px 5px;
    }
    .header-bottom .d-flex a{
        flex-direction: column;
        width: fit-content;
        min-width: 150px;
    }
    .body-part-with-background{
        width: 100%;
    }


    #Add-Face-Lit-LettersModal .modal-dialog, #Edit-Face-Lit-Letters-Modal .modal-dialog{
        max-width: 100%;
        min-width: 100%;
        width: 100%;
        height: 60vh;
        min-height: auto;
        max-height: 100%;
        top: calc(100vh - 60vh);
        border-right: none;
    }

    #Edit-Face-Lit-Letters-Modal .modal-header{
        display: none;
    }
    
    #Edit-Face-Lit-Letters-Modal .edit-facelit .edit-part{
        display: flex;
        height: 70px;
        min-height: 70px;
        width: 100%;
        margin-top: 0;
        z-index: 1;
        /* background: linear-gradient(180deg, #000000, #454444, #000000); */
    }

    #Edit-Face-Lit-Letters-Modal .edit-facelit .tab-content{
        margin-left: 0;
        height: fit-content;
    }

    .edit-facelit .edit-part{
        width: 100%;
        max-width: 100%;
        box-shadow: 0px 0px 4px 3px rgb(0, 0, 0);
    }

    .edit-facelit .edit-part .edit-button.active {
        /* background: #f2f2f2;
        margin: 0;
        padding-bottom: 0;
        padding: 12px; */
        height: 100%;
        box-shadow: none;
    }
    
    .edit-facelit .edit-part .edit-button.after-active {
        position: relative;
        margin: 0px;
        background: #1e252b;
        border-radius: 0;
        z-index: 999;
        padding: 12px;
        width: auto;
    }
    
    .edit-facelit .edit-part .edit-button.after-active::after {
        content: "";
        position: absolute;
        top: 0px;
        right: 0px;
        background: #3f4851;
        border-bottom-left-radius: 10px;
        border-top-right-radius: 0px;
        z-index: -1;
        height: 100%;
        width: 100%;
        overflow: hidden;
        box-shadow: none;
    }
    
    .edit-facelit .edit-part .edit-button.before-active {
        position: relative;
        margin: 0px;
        /* background: linear-gradient(180deg, #000000, #454444, #000000); */
        background: #1e252b;
        border-radius: 0;
        z-index: 999;
        padding: 12px;
        width: auto;
    }
    
    .edit-facelit .edit-part .edit-button.before-active::after {
        content: "";
        position: absolute;
        bottom: 0px;
        right: 0px;
        background: #3f4851;
        border-bottom-right-radius: 10px;
        z-index: -1;
        height: 100%;
        width: 100%;
        overflow: hidden;
        box-shadow: none;
    }

    #Edit-Face-Lit-Letters-Modal .modal-dialog-scrollable .modal-body{
        overflow-y: auto;
    }

    #Edit-Face-Lit-Letters-Modal .modal-dialog-scrollable .modal-body .accordion-button:hover{
        z-index: 0;
    }

    #Edit-Face-Lit-Letters-Modal .modal-dialog{
        max-height: 60vh;
        min-height: 60vh;
        overflow-y: hidden;
    }

    .edit-facelit .edit-part .edit-button{
        display: flex;
        flex-direction: column;
        justify-content: start;
        align-items: center;
    }
    .edit-facelit .edit-part .edit-button svg, .edit-facelit .edit-part .edit-button img{
        height: 25px;
        width: 25px;
    }

    .tab-button{
        margin-top: 10px;
        margin-bottom: 10px;
    }
    .face-letter-wrapper{
        justify-content: space-around;
    }
    #edit-shape .edit-shape-wrapper img{
        height: 100px;
        max-height: 150px;
    }
    #edit-shape .col-4 .edit-shape-wrapper img{
        height: 60px;
        max-height: 80px;
    }

    .edit-body-section{
        height: calc(100vh - 60vh);
        width: 100vw;
        max-width: 100%;
        min-width: 100%;
      }
 }

@media screen and (max-width: 494px) {
    
    .header-middle .header-left a{
        /* display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 5px; */
    }
    .header-bottom{
        top: 125px;
    }
    .header-top .header-right a{
        /* padding: 5px; */
    }
    .header-bottom .d-flex a{
        min-width: 135px;
        /* padding: 5px 0px; */
    }
    
}

@media screen and (max-width: 474px) {
    .logo img{
        /* height: 28px;
        width: 120px; */
    }
    
    .header-middle .header-left a{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 5px;
    }
    .header-bottom{
        top: 125px;
    }
    .header-top .header-right a{
        padding: 5px;
    }
    .header-bottom .d-flex a{
        padding: 5px 5px;

    }
    
}

@media screen and (max-width: 450px) {
    .modal-dialog.modal-dialog-vertical{
        /* min-width: 300px; */
    }
    #lit-letter-logo-modal .d-flex span{
        font-size: 13px;
    }
    #lit-letter-logo-modal .d-flex span::after, #Add-To-SignModal .d-flex span::after{
        right: 5px;
    }
    #lit-letter-logo-modal .d-flex span{
        width: calc(70% - 47px) !important;
    }
}

@media screen and (min-width: 576px) {
    #ProductModal.modal .modal-dialog-vertical,
    #Choose-Logo-Shape-Color.modal .modal-dialog-vertical,
    #Choose-Logo-Shape-Size.modal .modal-dialog-vertical,
    #Choose-Logo-Shape.modal .modal-dialog-vertical,
    #load-design-Modal.modal .modal-dialog-vertical,
    #Add-Face-Lit-Logo-ShapeModal.modal .modal-dialog-vertical, 
    #lit-letter-logo-modal.modal .modal-dialog-vertical,
    #Add-To-SignModal.modal .modal-dialog-vertical{
        margin: auto;
        height: fit-content;
        top: 50%;
        transform: translateY(-50%) !important;
        width: fit-content;
        max-width: 40vw;
        min-width: 500px;
        box-shadow: rgba(0, 0, 0, 1) 0.5px 10px 15px;
    }
    .modal-body .d-flex img{
        /* width: max-content; */
    }
    #ProductModal.modal .modal-content .dropdown-item .d-flex,
    #Add-Face-Lit-Logo-ShapeModal.modal .modal-content .dropdown-item .d-flex,  
    #lit-letter-logo-modal.modal .modal-content .dropdown-item .d-flex,
    #Add-To-SignModal.modal .modal-content .dropdown-item .d-flex{
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 0;
    }

    #ProductModal.modal .modal-content .dropdown-item span::after,
    #Add-Face-Lit-Logo-ShapeModal.modal .modal-content .dropdown-item span::after, 
    #lit-letter-logo-modal.modal .modal-content .dropdown-item span::after,
    #Add-To-SignModal.modal .modal-content .dropdown-item span::after{
        content: none;
    }

    #ProductModal.modal .modal-header, .modal .modal-footer,
    #load-design-Modal.modal .modal-header, .modal .modal-footer, 
    #Add-Face-Lit-Logo-ShapeModal.modal .modal-header, .modal .modal-footer, 
    #lit-letter-logo-modal.modal .modal-header, .modal .modal-footer,
    #Add-To-SignModal.modal .modal-header, .modal .modal-footer{
        background: #1e252b !important;
        box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
        border: none;
        padding: 10px;
    }
    
    #ProductModal.modal .modal-body,
    #load-design-Modal.modal .modal-body, 
    #Add-Face-Lit-Logo-ShapeModal.modal .modal-body, 
    #lit-letter-logo-modal.modal .modal-body,
    #Add-To-SignModal.modal .modal-body{
        padding: 0px 10px;
        background: #1e252b !important;
        /* margin-bottom: -12px; */
        overflow-x: hidden;
    }

    #ProductModal.modal .modal-content .dropdown-item:hover, 
    #Add-Face-Lit-Logo-ShapeModal.modal .modal-content .dropdown-item:hover, 
    #lit-letter-logo-modal.modal .modal-content .dropdown-item:hover,
    #Add-To-SignModal.modal .modal-content .dropdown-item:hover{
        background: #2f3439;
    }

    #ProductModal.modal .modal-content .dropdown-item, 
    #Add-Face-Lit-Logo-ShapeModal.modal .modal-content .dropdown-item, 
    #lit-letter-logo-modal.modal .modal-content .dropdown-item,
    #Add-To-SignModal.modal .modal-content .dropdown-item{
        background: #3f4851;
        border-bottom: none;
        margin-bottom: 10px;
        border-radius: 6px;
        padding: 10px;
        /* min-height: 115px; */
        height: 120px;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    #Add-To-SignModal.modal .modal-content .dropdown-item{
        margin-bottom: 0px;
    }

    #ProductModal.modal .modal-content .dropdown-item:hover span,
    #Add-Face-Lit-Logo-ShapeModal.modal .modal-content .dropdown-item:hover span,
    #lit-letter-logo-modal.modal .modal-content .dropdown-item:hover span,
    #Add-To-SignModal.modal .modal-content .dropdown-item:hover span{
        color: #fff;
    }
    #lit-letter-logo-modal .d-flex span,
    #Add-Face-Lit-Logo-ShapeModal .d-flex span,
    #Add-To-SignModal .d-flex span{
        width: 100% !important;
        text-align: center;
    }

   

    .body-section{
        height: calc(100% - 105px);
    }
    

    .modal .modal-footer .modal-button{
        padding: 0;
        box-shadow: none;
    }

    .modal .modal-footer .modal-button .add{
        border: 1px solid #7f7f7f;
        border-radius: 0;
        padding-top: 5px;
        padding-bottom: 5px;
        background: #1e252b;
        box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 20px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
    }

    .modal .modal-footer .modal-button .add:hover{
        background: #1e252b;
    }

    .modal-footer{
        justify-content: start;
    }

    .modal .modal-body .accordion-body{
        background: #3f4851;
    }

    #ProductModal.modal .modal-content .dropdown-item:active,
    #Add-Face-Lit-Logo-ShapeModal.modal .modal-content .dropdown-item:active,
    #lit-letter-logo-modal.modal .modal-content .dropdown-item:active,
    #Add-To-SignModal.modal .modal-content .dropdown-item:active{
        box-shadow: none;
    }
}

@media screen and (max-width: 450px) {
    
   
    .header-bottom{
        /* top: 117px; */
        width: 71.6%;
    }
    .slider .inner-text .day-view{
       visibility: hidden;
    }
    .slider .inner-text .night-view{
        visibility: hidden;
     }
     .slider {
        width: 49px;
     }
     .header-bottom .d-flex a{
        /* min-width: fit-content; */
        padding: 5px;
        /* flex-direction: row; */
    }
}

@media screen and (max-width:436px) {
    .header-bottom .d-flex a{
        width: 135px;
        min-width: fit-content;
    }
    .logo img{
        height: 28px;
        width: 120px;
    }
}


@media screen and (max-width:412px) {
    /* .header-top .header-right a{
        padding: 2px 5px;
        text-align: center;
    } */
}

@media screen and (max-width: 390px) {
    /* .header-bottom{
        top: 143px;
    } */
    .header-right .d-flex a label, .header-middle .header-left a label{
        line-height: 13px;
    }
}


@media screen and (max-width: 366px) {
    .header-top .container{
        padding: 0;
    }
    .header-bottom{
        top: 124px;
    }

    .header-right .d-flex a label, .header-middle .header-left a label{
        line-height: 12px;
    }
}

/* @media screen and (max-width: 358px) {
    .header-bottom{
        top: 130px;
    }
} */

@media screen and (max-width: 352px) {
    .header-bottom{
        top: 138px;
    }
    .header-bottom .d-flex a{
        flex-direction: column;
    }
    .body-section{
        height: calc(100% - 110px);
    }
}

/* @media screen and (-webkit-min-device-pixel-ratio:0) { 
    select,
    textarea,
    input {
      font-size: 16px;
    }
  }
   */