.modal.modal-left .modal-dialog,
.modal.modal-right .modal-dialog,
.modal.modal-top .modal-dialog,
.modal.modal-bottom .modal-dialog {
  -webkit-transform: translate3d(0%, 0, 0);
  -ms-transform: translate3d(0%, 0, 0);
  -o-transform: translate3d(0%, 0, 0);
  transform: translate3d(0%, 0, 0);
}

/* Left & Right */

.modal.modal-left .modal-dialog,
.modal.modal-right .modal-dialog {
  position: fixed;
  margin: auto;
  width: 500px !important;
  max-width: 100%;
  height: 100%;
  padding: 0;
}

.modal.modal-left .modal-content,
.modal.modal-right .modal-content {
  height: 100%;
  overflow-y: auto;
}

.modal.modal-left .modal-body,
.modal.modal-right .modal-body {
  padding: 15px 15px 80px;
overflow-y: auto;
  max-height: 100%;
}
.modal.modal-left .modal-dialog-scrollable .modal-body,
.modal.modal-right .modal-dialog-scrollable .modal-body { max-height: calc(100vh - 57px);}
.modal.modal-left .modal-dialog-scrollable .modal-body .tab-content, .modal.modal-right .modal-dialog-scrollable .modal-body .tab-content{max-height: unset;}
.modal.modal-left.fade .modal-dialog {
  left: -500px;
  -webkit-transition: opacity 0.3s linear, left 0.3s ease-out;
  -moz-transition: opacity 0.3s linear, left 0.3s ease-out;
  -o-transition: opacity 0.3s linear, left 0.3s ease-out;
  transition: opacity 0.3s linear, left 0.3s ease-out;
}

.modal.modal-left.fade.show .modal-dialog {
  left: 0;
}

.modal.modal-right.fade .modal-dialog {
  right: -500px;
  -webkit-transition: opacity 0.3s linear, right 0.3s ease-out;
  -moz-transition: opacity 0.3s linear, right 0.3s ease-out;
  -o-transition: opacity 0.3s linear, right 0.3s ease-out;
  transition: opacity 0.3s linear, right 0.3s ease-out;
}

.modal.modal-right.fade.show .modal-dialog {
  right: 0;
}

.modal.modal-left .modal-content,
.modal.modal-right .modal-content,
.modal.modal-top .modal-content,
.modal.modal-bottom .modal-content,
.modal.modal-full .modal-content {
  border-radius: 0;
  border: none;
}

.modal.modal-left .modal-dialog.modal-sm,
.modal.modal-right .modal-dialog.modal-sm {
  width: 300px !important;
}

.modal.modal-left .modal-dialog.modal-lg,
.modal.modal-right .modal-dialog.modal-lg {
  width: 800px !important;
}

.modal.modal-left .modal-dialog.modal-xl,
.modal.modal-right .modal-dialog.modal-xl {
  width: 1140px !important;
}

/* Top and Bottom */

.modal.modal-top .modal-dialog,
.modal.modal-bottom .modal-dialog {
  position: fixed;
  margin: auto;
  width: 100%;
  max-width: 100%;
  height: auto;
  padding: 0;
}

.modal.modal-top .modal-content,
.modal.modal-bottom .modal-content {
  height: auto;
  overflow-y: auto;
}

.modal.modal-top .modal-body,
.modal.modal-bottom .modal-body {
  padding: 15px 15px;
  max-height: calc(80vh - 57px);
  overflow-y: auto;
}

/* Top */

.modal.modal-top.fade .modal-dialog {
  top: -100%;
  -webkit-transition: opacity 0.3s linear, top 0.3s ease-out;
  -moz-transition: opacity 0.3s linear, top 0.3s ease-out;
  -o-transition: opacity 0.3s linear, top 0.3s ease-out;
  transition: opacity 0.3s linear, top 0.3s ease-out;
}

.modal.modal-top.fade.show .modal-dialog {
  top: 0;
}

/* Bottom */

.modal.modal-bottom.fade .modal-dialog {
  bottom: -100%;
  -webkit-transition: opacity 0.3s linear, bottom 0.3s ease-out;
  -moz-transition: opacity 0.3s linear, bottom 0.3s ease-out;
  -o-transition: opacity 0.3s linear, bottom 0.3s ease-out;
  transition: opacity 0.3s linear, bottom 0.3s ease-out;
}

.modal.modal-bottom.fade.show .modal-dialog {
  bottom: 0;
}

.modal.modal-bottom.fade .modal-dialog {
  bottom: -100%;
}

/* Full Screen */

.modal.modal-full .modal-dialog {
  position: fixed;
  margin: auto;
  width: 100%;
  max-width: 100%;
  height: 100%;
}

.modal.modal-full .modal-content {
  height: 100%;
  overflow-y: auto;
}

.modal.modal-full .close-modal {
  position: fixed;
  top: 0;
  right: 3rem;
}

/* Footer */

/* .modal-footer-fixed,  */.modal-left .modal-footer-fixed, .modal-right .modal-footer-fixed {
  position: fixed;
  bottom: 0;
  width: 100%;
  background: #fff;
  border-radius: 0;
}

/* XS */

.modal.modal-left.xs .modal-body,
.modal.modal-right.xs .modal-body {
  padding: 15px;
}

/* Full screen modal menu indicators */

a.has-sub:after { font-family: "FontAwesome"; }
a.has-sub:after { content: "\f107"; margin-left: 1rem; }
a.has-sub[aria-expanded="true"]:after { content: "\f106"; }

/* all modals full screen height modal styles setup */
.modal.modal-left .modal-dialog-scrollable .modal-body, .modal.modal-right .modal-dialog-scrollable .modal-body{padding: var(--bs-modal-padding);}

/* all modals full screen height modal styles setup 
.modal.modal-top .modal-dialog, .modal.modal-bottom .modal-dialog{height: 100%; min-height: calc(100% - var(--bs-modal-margin)* 2);}
.modal.modal-top .modal-content, .modal.modal-bottom .modal-content{height: 100%;}
.modal.modal-top .modal-body, .modal.modal-bottom .modal-body{height: 100%; max-height:unset;}
.modal.modal-top form .modal-body, .modal.modal-bottom form .modal-body{height: 100%; max-height: calc(100vh - 130px); overflow-y: auto;}
.modal-footer{gap: .5rem !important; margin: 0; position: fixed; bottom: 0; left: 0; right: 0;}
.modal-footer .btn{margin: 0;}
.modal form{display: flex; flex-direction: column; flex: 1; }
.modal .step_wrapper .step{max-height: calc(100vh - 130px); overflow-y: auto;}
.modal.imageuploadmodal .step_wrapper .step{max-height: calc(100vh - 140px); overflow-y: auto;}
.modal .step_wrapper .step .draganddrop .position-relative{position: sticky !important; top: 0; z-index: 1;}
.modal .step_wrapper .step .draganddrop #uploaded-list{max-height: unset;}
.modal .step_wrapper .step-footer{position: fixed !important; padding: 15px !important;}
*/

/*.modal .step_wrapper .step{max-height: calc(100vh - 130px); overflow-y: auto;}
.modal.imageuploadmodal .step_wrapper .step{max-height: calc(100vh - 140px); overflow-y: auto;}
.modal .step_wrapper .step .draganddrop .position-relative{position: sticky !important; top: 0; z-index: 1;}
.modal .step_wrapper .step .draganddrop #uploaded-list{max-height: unset;}
.modal .step_wrapper .step-footer{position: fixed !important; padding: 15px !important;}*/

/* child-ajax-modal-right setup start */
.parent-ajaxModal.modal-left ~ .modal.child-ajaxModal{left: 500px;width: calc(100% - 500px) !important;}
.parent-ajaxModal.modal-right ~.modal.child-ajaxModal{right: 500px;width: calc(100% - 500px) !important;}
.parent-ajaxModal.modal-left ~ .modal.child-ajaxModal.modal-sm{left: 300px;width: calc(100% - 300px) !important;}
.parent-ajaxModal.modal-right ~.modal.child-ajaxModal.modal-sm{right: 300px;width: calc(100% - 300px) !important;}
.parent-ajaxModal.modal-left ~ .modal.child-ajaxModal.modal-lg{left: 800px;width: calc(100% - 800px) !important;}
.parent-ajaxModal.modal-right ~.modal.child-ajaxModal.modal-lg{right: 800px;width: calc(100% - 800px) !important;}
.parent-ajaxModal.modal-left ~ .modal.child-ajaxModal.modal-xl{left: 1140px;width: calc(100% - 1140px) !important;}
.parent-ajaxModal.modal-right ~.modal.child-ajaxModal.modal-xl{right: 1140px;width: calc(100% - 1140px) !important;}
.parent-ajaxModal.modal-top ~ .modal.child-ajaxModal .modal-dialog,
.parent-ajaxModal.modal-bottom ~.modal.child-ajaxModal .modal-dialog {
  position: fixed;
  margin: auto;
  width: 100% !important;
  max-width: 100%;
  height: auto;
  padding: 0;
}
.parent-ajaxModal.modal-left ~.modal.child-ajaxModal .modal-dialog,
.parent-ajaxModal.modal-right ~.modal.child-ajaxModal .modal-dialog {
  position: fixed;
  margin: 0;
  width: calc(100% - 500px) !important;
  max-width: 100%;
  height: 100%;
  padding: 0;
}
.parent-ajaxModal.modal-top ~ .modal.child-ajaxModal.fade .modal-dialog {
  top: -100%;
  -webkit-transition: opacity 0.3s linear, top 0.3s ease-out;
  -moz-transition: opacity 0.3s linear, top 0.3s ease-out;
  -o-transition: opacity 0.3s linear, top 0.3s ease-out;
  transition: opacity 0.3s linear, top 0.3s ease-out;
}

.parent-ajaxModal.modal-top ~ .modal.child-ajaxModal.fade.show .modal-dialog {
  top: 0;
}
.parent-ajaxModal.modal-bottom ~ .modal.child-ajaxModal.fade .modal-dialog {
  bottom: -100%;
  -webkit-transition: opacity 0.3s linear, bottom 0.3s ease-out;
  -moz-transition: opacity 0.3s linear, bottom 0.3s ease-out;
  -o-transition: opacity 0.3s linear, bottom 0.3s ease-out;
  transition: opacity 0.3s linear, bottom 0.3s ease-out;
}

.parent-ajaxModal.modal-bottom ~ .modal.child-ajaxModal.fade.show .modal-dialog {
  bottom: 0;
}

.parent-ajaxModal.modal-bottom ~ .modal.child-ajaxModal.fade .modal-dialog {
  bottom: -100%;
}


.parent-ajaxModal.modal-left ~ .modal.child-ajaxModal.fade.show .modal-dialog { left: 500px;}
.parent-ajaxModal.modal-right ~ .modal.child-ajaxModal.fade.show .modal-dialog {  right: 500px;}
.parent-ajaxModal.modal-left ~ .modal.child-ajaxModal.fade .modal-dialog {
  left: -1500px;
  -webkit-transition: opacity 0.3s linear, left 0.3s ease-out;
  -moz-transition: opacity 0.3s linear, left 0.3s ease-out;
  -o-transition: opacity 0.3s linear, left 0.3s ease-out;
  transition: opacity 0.3s linear, left 0.3s ease-out;
}
.parent-ajaxModal.modal-right ~ .modal.child-ajaxModal.fade .modal-dialog {
  right: -1500px;
  -webkit-transition: opacity 0.3s linear, right 0.3s ease-out;
  -moz-transition: opacity 0.3s linear, right 0.3s ease-out;
  -o-transition: opacity 0.3s linear, right 0.3s ease-out;
  transition: opacity 0.3s linear, right 0.3s ease-out;
}

.parent-ajaxModal.modal-left ~ .modal.child-ajaxModal.fade.show .modal-dialog.modal-sm{left: 300px;}
.parent-ajaxModal.modal-right ~ .modal.child-ajaxModal.fade.show .modal-dialog.modal-sm{right: 300px;}
.parent-ajaxModal.modal-left ~ .modal.child-ajaxModal .modal-dialog.modal-sm,
.parent-ajaxModal.modal-right ~ .modal.child-ajaxModal .modal-dialog.modal-sm {
  width: calc(100% - 300px) !important;
}


.parent-ajaxModal.modal-left ~ .modal.child-ajaxModal.fade.show .modal-dialog.modal-lg{left: 800px;}
.parent-ajaxModal.modal-right ~ .modal.child-ajaxModal.fade.show .modal-dialog.modal-lg{right: 800px;}
.parent-ajaxModal.modal-left ~ .modal.child-ajaxModal .modal-dialog.modal-lg,
.parent-ajaxModal.modal-right ~ .modal.child-ajaxModal .modal-dialog.modal-lg {
  width: calc(100% - 800px) !important;
}

.parent-ajaxModal.modal-left ~ .modal.child-ajaxModal.fade.show .modal-dialog.modal-xl{left: 1140px;}
.parent-ajaxModal.modal-right ~ .modal.child-ajaxModal.fade.show .modal-dialog.modal-xl{right: 1140px;}
.parent-ajaxModal.modal-left ~ .modal.child-ajaxModal .modal-dialog.modal-xl,
.parent-ajaxModal.modal-right ~ .modal.child-ajaxModal .modal-dialog.modal-xl {
  width: calc(100% - 1140px) !important;
}

.parent-ajaxModal.modal-left ~ .modal.child-ajaxModal .modal-dialog, .parent-ajaxModal.modal-right ~ .modal.child-ajaxModal .modal-dialog, .parent-ajaxModal.modal-top ~ .modal.child-ajaxModal .modal-dialog, .parent-ajaxModal.modal-bottom ~ .modal.child-ajaxModal .modal-dialog{    
  -webkit-transform: translate3d(0%, 0, 0);
  -ms-transform: translate3d(0%, 0, 0);
  -o-transform: translate3d(0%, 0, 0);
  transform: translate3d(0%, 0, 0);
}

.parent-ajaxModal.modal-left ~ .modal.child-ajaxModal .modal-dialog-scrollable .modal-content,
.parent-ajaxModal.modal-right ~ .modal.child-ajaxModal .modal-dialog-scrollable .modal-content{height: 100%;} 
.parent-ajaxModal.modal-left ~ .modal.child-ajaxModal .modal-dialog-scrollable .modal-body,
.parent-ajaxModal.modal-right ~ .modal.child-ajaxModal .modal-dialog-scrollable .modal-body{max-height: calc(100vh - 160px);}

.parent-ajaxModal.modal-left ~ .modal.child-ajaxModal .modal-content,
.parent-ajaxModal.modal-right ~ .modal.child-ajaxModal .modal-content,
.parent-ajaxModal.modal-top ~ .modal.child-ajaxModal .modal-content,
.parent-ajaxModal.modal-bottom ~ .modal.child-ajaxModal .modal-content,
.parent-ajaxModal.modal-full ~ .modal.child-ajaxModal .modal-content {
  border-radius: 0;
}

@media screen and (max-width: 1440px) {
    .parent-ajaxModal.modal-left ~ .modal.child-ajaxModal, .parent-ajaxModal.modal-right ~ .modal.child-ajaxModal,
    .parent-ajaxModal.modal-left ~ .modal.child-ajaxModal.fade.show .modal-dialog, .parent-ajaxModal.modal-right ~ .modal.child-ajaxModal.fade.show .modal-dialog {
            width: 100% !important;
        }
    .parent-ajaxModal.modal-right ~ .modal.child-ajaxModal.fade.show .modal-dialog{right:0; }
    .parent-ajaxModal.modal-right ~ .modal.child-ajaxModal.fade.show .modal-dialog.modal-sm,.parent-ajaxModal.modal-right ~ .modal.child-ajaxModal.fade.show .modal-dialog.modal-lg,.parent-ajaxModal.modal-right ~ .modal.child-ajaxModal.fade.show .modal-dialog.modal-xl{right:0; }
    .parent-ajaxModal.modal-left ~ .modal.child-ajaxModal.fade.show .modal-dialog{left:0; }
    .parent-ajaxModal.modal-left ~ .modal.child-ajaxModal.fade.show .modal-dialog.modal-sm,.parent-ajaxModal.modal-left ~ .modal.child-ajaxModal.fade.show .modal-dialog.modal-lg,.parent-ajaxModal.modal-left ~ .modal.child-ajaxModal.fade.show .modal-dialog.modal-xl{left:0; }
}

/* child-ajax-modal-right setup end */

/* child-ajax-modal-right auto width and height setup start */
.custom_ajaxModal{pointer-events: auto;} /* if we have custom_ajaxModal inside modal-dialog means need pointer-events: none; incase custom_ajaxModal is outside modal-dialog means need pointer-events: none; will be a problem. bcz content loaded on .modal-dialog only  */
.parent-ajaxModal.modal-left ~.modal.child-ajaxModal .modal-dialog,
.parent-ajaxModal.modal-right ~.modal.child-ajaxModal .modal-dialog {
  position: fixed;
  margin: 30px auto;
  width: auto !important;
  max-width: calc(100% - 60px);
  min-width: 600px;
  height: auto;
  max-height: calc(100% - 60px);
  padding: 0;
}
.parent-ajaxModal.modal-left ~ .modal.child-ajaxModal .modal-dialog,
.parent-ajaxModal.modal-right ~ .modal.child-ajaxModal .modal-dialog {margin:30px;}

.parent-ajaxModal.modal-left ~ .modal.child-ajaxModal .modal-dialog.modal-sm,
.parent-ajaxModal.modal-right ~ .modal.child-ajaxModal .modal-dialog.modal-sm {
  width: auto!important;
  max-width: calc(100% - 60px);
}

.parent-ajaxModal.modal-left ~ .modal.child-ajaxModal .modal-dialog.modal-lg,
.parent-ajaxModal.modal-right ~ .modal.child-ajaxModal .modal-dialog.modal-lg {
  width: auto !important;
  max-width: calc(100% - 60px);
}

.parent-ajaxModal.modal-left ~ .modal.child-ajaxModal .modal-dialog.modal-xl,
.parent-ajaxModal.modal-right ~ .modal.child-ajaxModal .modal-dialog.modal-xl {
  width: auto !important;
  max-width: calc(100% - 60px);
}

.parent-ajaxModal.modal-left ~ .modal.child-ajaxModal .modal-dialog-scrollable .modal-content,
.parent-ajaxModal.modal-right ~ .modal.child-ajaxModal .modal-dialog-scrollable .modal-content{height: auto;} 

@media screen and (max-width: 1440px) {
  .parent-ajaxModal.modal-left ~ .modal.child-ajaxModal, .parent-ajaxModal.modal-right ~ .modal.child-ajaxModal{
    width: 100% !important;
    max-width: 100%;
    min-width: unset;
  }
  .parent-ajaxModal.modal-left ~ .modal.child-ajaxModal.fade.show .modal-dialog, .parent-ajaxModal.modal-right ~ .modal.child-ajaxModal.fade.show .modal-dialog {
        width: 100% !important;
        max-width: calc(100% - 60px);
        min-width: unset;
      }

      .parent-ajaxModal.modal-left ~ .modal.child-ajaxModal .modal-dialog-scrollable .modal-body,
      .parent-ajaxModal.modal-right ~ .modal.child-ajaxModal .modal-dialog-scrollable .modal-body{max-height: calc(100vh - 60px);}
}
@media screen and (max-width: 767px) {

  .parent-ajaxModal.modal-left ~ .modal.child-ajaxModal, .parent-ajaxModal.modal-right ~ .modal.child-ajaxModal{
    width: 100% !important;
    max-width: 100%;
    min-width: unset;
  }
  .parent-ajaxModal.modal-left ~ .modal.child-ajaxModal.fade.show .modal-dialog, .parent-ajaxModal.modal-right ~ .modal.child-ajaxModal.fade.show .modal-dialog {
        width: 100% !important;
        max-width: 100%;
        min-width: unset;
        margin: auto !important;
      }
      .parent-ajaxModal.modal-left ~ .modal.child-ajaxModal .modal-dialog,
      .parent-ajaxModal.modal-right ~ .modal.child-ajaxModal .modal-dialog {margin:0px;}      

      .parent-ajaxModal.modal-left ~ .modal.child-ajaxModal .modal-dialog-scrollable .modal-body,
      .parent-ajaxModal.modal-right ~ .modal.child-ajaxModal .modal-dialog-scrollable .modal-body{max-height: calc(100vh - 100px);}
}

/* child-ajax-modal-right auto width and height setup end */

/* bs5 modal custom styles start */

/* bs5 modal custom styles end */