.modal-open {
    .modal {
        overflow-y: scroll;
    }
}

.modal {
    padding-right: 0 !important;
    z-index: 1093;

    .modal-dialog {
        vertical-align: middle;
        width: 60%;
        margin-left: auto;
        margin-right: auto;

        &.modal-sm {
            width: 35%;

            .modal-form {
                padding: 0 15px;

                .form-group label {
                    float: left;
                }
            }
        }
    }

    .modal-content {
        float: none;
        margin: 0 auto;
        padding: 0;
        overflow: visible !important;

        @include themify {
            box-shadow: 0 2px 5px 0 themed('black');
        }
    }

    .modal-body {
        margin-right: -1px;
        padding: 20px 5px;
    }

    &.fade {
        .modal-dialog {
            opacity: 0;
            transform: scale(0.8);
            transition: 200ms ease-in-out;
        }

        &.in {
            .modal-dialog {
                opacity: 1;
                transform: scale(1);
            }
        }
    }
}

.modal-backdrop {
    z-index: 1092;
}

@media screen and (max-width: 1199px) {
    .modal {
        .modal-dialog {
            width: 65%;

            &.modal-sm {
                width: 40%;
            }
        }

        .quick-view-info {
            margin-top: 25px;
        }
    }
}

@media screen and (max-width: 1100px) {
    .modal {
        .modal-dialog {
            width: 70%;

            &.modal-sm {
                width: 50%;
            }
        }
    }
}

@media screen and (max-width: $sm) {
    .modal {
        .modal-dialog {
            width: 95%;

            &.modal-sm {
                width: 95%;
            }
        }
    }
}

@media screen and (max-width: 380px) {
    .modal {
        .modal-body {
            padding: 30px 0 15px;
        }
    }
}