Backend-Api/ServiceHost/wwwroot/AssetsClient/css/responsive-modal.css

.personalInfoModal .modal-dialog .modal-content {
    /* 80% of window height */
    height: 560px !important;
    /* margin: auto auto; */
    width: 470px !important;
    margin: auto;
}

.personalInfoModal {
    /* overflow-y: hidden; */
}

#noteModal .modal-dialog,
#noteModal .modal-content {
    /* 80% of window height */
    height: auto;
}


/*.profilePasswordModal .modal-dialog,
.profilePasswordModal .modal-content {*/
    /*height: 350px;*/
    /*width: 390px
}*/


.modal {
    --bs-modal-zindex: 1051;
}

.modal-xxl {
    --bs-modal-width: 1140px;
}

/* XX-Large devices (larger desktops, 1400px and up) */
@media (max-width: 1400px) {
}

/* X-Large devices (desktops, 1366px and up) */
@media (min-width: 1366px) {
    .modal {
        /* --bs-modal-padding: 0.4rem; */
    }

    .modal-xl {
        --bs-modal-width: 1015px;
    }

    .modal-xxl {
        --bs-modal-width: 1140px;
    }

    .modal-xxxl {
        --bs-modal-width: 1410px;
    }

    .modal-xxxxl {
        --bs-modal-width: 1810px;
    }


    

    .modal-dialog,
    .modal-content {
        /* 80% of window height */
        /* height: 600px; */
    }




    #insertNewModal .modal-dialog,
    #insertNewModal .modal-content,
    #insertNewModal2 .modal-dialog,
    #insertNewModal2 .modal-content,
    #insertNewModal3 .modal-dialog,
    #insertNewModal3 .modal-content {
        height: 530px !important;
        max-width: 900px !important;
    }

    #morakhasiEstelajiModal .modal-dialog,
    #morakhasiEstelajiModal .modal-content {
        max-width: 800px !important;
    }


    #insertContractModal .modal-dialog,
    #insertContractModal .modal-content,
    #insertContractModal2 .modal-dialog,
    #insertContractModal2 .modal-content,
    #insertContractModal3 .modal-dialog,
    #insertContractModal3 .modal-content {
        height: 530px !important;
        max-width: auto !important;
    }

    #insertInsuranceModal .modal-dialog,
    #insertInsuranceModal .modal-content,
    #insertInsuranceModal2 .modal-dialog,
    #insertInsuranceModal2 .modal-content {
        height: 530px !important;
        max-width: auto !important;
    }
}

/* X-Large devices (desktops, 1366px and up) */
@media (max-width: 1366px) {
    .modal {
        /* --bs-modal-padding: 0.4rem; */
    }

    .modal-xl {
        --bs-modal-width: 780px;
    }

    .modal-xxxl {
        --bs-modal-width: 1140px;
    }
    .modal-xxxxl {
        --bs-modal-width: 1350px;
    }

    .modal-dialog,
    .modal-content {
        /* 80% of window height */
        /* height: 450px; */
    }

    .modal-footer {
        padding: 0.5rem;
    }


    #insertContractModal .modal-dialog,
    #insertContractModal .modal-content,
    #insertContractModal2 .modal-dialog,
    #insertContractModal2 .modal-content,
    #insertContractModal3 .modal-dialog,
    #insertContractModal3 .modal-content {
        height: 460px !important;
        max-width: 730px !important;
    }

    #insertInsuranceModal .modal-dialog,
    #insertInsuranceModal .modal-content,
    #insertInsuranceModal2 .modal-dialog,
    #insertInsuranceModal2 .modal-content {
        height: 460px !important;
        max-width: 730px !important;
    }
}


/* Large devices (desktops, 1200px and up) */
@media (min-width: 992px) {
}


/* Large devices (desktops, 992px and up) */
@media (max-width: 992px) {

    .modal-xl {
        --bs-modal-width: 550px;
    }

    .modal-dialog,
    .modal-content {
        /* 80% of window height */
        /* height: auto; */
    }


    #insertNewModal .modal-dialog,
    #insertNewModal .modal-content,
    #insertNewModal2 .modal-dialog,
    #insertNewModal2 .modal-content,
    #insertNewModal3 .modal-dialog,
    #insertNewModal3 .modal-content {
        height: auto !important;
        /* max-width: 400px !important; */
        /* margin: auto !important; */
    }

    #insertContractModal .modal-dialog,
    #insertContractModal .modal-content,
    #insertContractModal2 .modal-dialog,
    #insertContractModal2 .modal-content,
    #insertContractModal3 .modal-dialog,
    #insertContractModal3 .modal-content {
        height: 430px !important;
        /* margin: 5px auto; */
        max-width: 750px !important;
    }

    #insertInsuranceModal .modal-dialog,
    #insertInsuranceModal .modal-content,
    #insertInsuranceModal2 .modal-dialog,
    #insertInsuranceModal2 .modal-content {
        height: 430px !important;
        /* margin: 5px auto; */
        max-width: 750px !important;
    }








    /********************** Advance Search in Modal From Bottom **********************/
    #searchModal {
        /* z-index: 70000; */
    }

        #searchModal.modal.fade .modal-dialog {
            transition: transform .3s ease-out;
            transform: translate(0,50px);
        }

        #searchModal.modal .modal-dialog,
        #searchModal.modal .modal-content {
            position: fixed !important;
            bottom: 0 !important;
            left: 0 !important;
            right: 0 !important;
            margin-bottom: 0 !important;
            height: auto;
            border-radius: 10px 10px 0px 0px;
        }

        #searchModal.modal.show .modal-dialog {
            transform: none;
        }

    /********************** End Advance Search in Modal From Bottom **********************/

}



/* Large devices (desktops, 992px and up) */
@media (max-width: 768px) {
    #insertContractModal .modal-dialog,
    #insertContractModal .modal-content,
    #insertContractModal2 .modal-dialog,
    #insertContractModal2 .modal-content,
    #insertContractModal3 .modal-dialog,
    #insertContractModal3 .modal-content {
        margin: 5px 7px;
        height: auto !important;
    }

    #insertInsuranceModal .modal-dialog,
    #insertInsuranceModal .modal-content,
    #insertInsuranceModal2 .modal-dialog,
    #insertInsuranceModal2 .modal-content {
        height: auto !important;
        margin: 5px 7px;
    }

    /*.profilePasswordModal .modal-dialog,
    .profilePasswordModal .modal-content {*/
        /*height: 350px;*/
        /*width: auto;
    }*/
}


/* Small devices (landscape phones, 576px and up) */
@media (max-width: 576px) {
}

/* 
    X-Small devices (portrait phones, less than 576px)
    No media query for `xs` since this is the default in Bootstrap 
*/
@media (max-width: 416px) {
}