/*!
  * Advantech Software modal.css
  * Copyright 2018-2024 Advantech Software Pty Ltd
  * Licensed under MIT (wwwroot/advantech/LICENSE)
  */

.modal.left .modal-dialog.modal-xxl, .modal.right .modal-dialog.modal-xl {
    width: 1400px;
}

.modal.left .modal-dialog.modal-xl, .modal.right .modal-dialog.modal-xl {
    width: 1100px;
}

.modal.left .modal-dialog.modal-lg, .modal.right .modal-dialog.modal-lg {
    width: 800px;
}

.modal.left.fade .modal-dialog.modal-lg {
    left: -800px;
}

.modal.right.fade .modal-dialog.modal-lg {
    right: -800px;
}

.modal.left .modal-dialog.modal-sm, .modal.right .modal-dialog.modal-sm {
    width: 300px;
}

.modal.left.fade .modal-dialog.modal-sm {
    left: -300px;
}

.modal.right.fade .modal-dialog.modal-sm {
    right: -300px;
}

.modal.left .modal-dialog, .modal.right .modal-dialog {
    position: fixed;
    margin: auto;
    width: 500px;
    height: 100%;
    -webkit-transform: translate3d(0,0,0);
    -ms-transform: translate3d(0,0,0);
    -o-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

.modal.left .modal-content, .modal.right .modal-content {
    height: 100%;
    overflow-y: auto;
}

.modal.left .modal-body, .modal.right .modal-body {
    padding: 15px 15px 80px;
}

.modal.left.fade .modal-dialog {
    left: -500px;
    -webkit-transition: opacity .3s linear,left .3s ease-out;
    -moz-transition: opacity .3s linear,left .3s ease-out;
    -o-transition: opacity .3s linear,left .3s ease-out;
    transition: opacity .3s linear,left .3s ease-out;
}

.modal.left.fade.show .modal-dialog {
    left: 0;
}

.modal.right.fade .modal-dialog {
    right: -500px;
    -webkit-transition: opacity .3s linear,right .3s ease-out;
    -moz-transition: opacity .3s linear,right .3s ease-out;
    -o-transition: opacity .3s linear,right .3s ease-out;
    transition: opacity .3s linear,right .3s ease-out;
}

.modal.right.fade.show .modal-dialog {
    right: 0;
}

@media (max-width:576px) {
    .modal-dialog {
        max-width: 100%;
    }
}