/* styles for parent class */

  
        body.modal-open {
            padding-right: 0px !important;
            overflow-y: hidden !important;
            overflow-x: hidden !important;
        }

        .modal.modal-left .modal-dialog,
        .modal.modal-right .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 {
            height: 100%;
            position: fixed;
            margin: auto;
            bottom: 0;
            width: 500px;
            max-width: 100%;
        }

.modal.modal-left .modal-content,
.modal.modal-right .modal-content {
    height: 100% !important;
    background: #FFFFFF !important;
    box-shadow: 6px 0 4px -4px #999, -6px 0 4px -4px #999;
    -moz-box-shadow: 6px 0 4px -4px #999, -6px 0 4px -4px #999;
    -webkit-box-shadow: 6px 0 4px -4px #999, -6px 0 4px -4px #999;
    bottom: 0;
    overflow-y: auto;
}

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


        .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;
        }

        .modal.modal-left .modal-dialog.modal-lg,
        .modal.modal-right .modal-dialog.modal-lg {
            width: 80%;
        }

        .modal.modal-left .modal-dialog.modal-xl,
        .modal.modal-right .modal-dialog.modal-xl {
            width: 90%;
        }

       /* @media only screen and (max-width: 670px) {
            .modal.modal-right .modal-dialog {
                height: 79%;
            }
        }

        @media only screen and (min-width: 670px) {
            .modal.modal-right .modal-dialog {
                height: 89%;
            }
        }

        @media only screen and (min-width: 1200px) {
            .modal.modal-right .modal-dialog {
                height: 81%;
            }
        }*/