/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
    [MODALS]

    [MEDIA QUERIES]
*/

/* [MODALS] --------------------------------------------------- */

[data-toggle="modal"] {
    cursor: pointer;
}
.modal-backdrop {
    z-index: 2000000000;
}
.modal {
    z-index: 20000000002;
}
.modal .modal-dialog .modal-header {
    border-color: #ccc!important;
}
.modal-content {
    border-radius: 0;
}
#middle .modal {
    text-align: center;
}

    #middle .modal:after {
        content: '';
        display: inline-block;
        position: relative;
        height: 100%;
        vertical-align: middle;
    }

    #middle .modal .modal-dialog {
        display: inline-block;
        margin: 0.63rem;
        text-align: initial;
        vertical-align: middle;
    }

        #middle .modal .modal-dialog .modal-header {
            border-bottom: 0.063rem solid;
        }

            #middle .modal .modal-dialog .modal-header .modal-title {
                font-size: 1.2rem;
                
                line-height: 1.31rem;
            }

.modal .modal-dialog .modal-content .modal-header > .close,
.modal .modal-dialog .modal-content > .close {
    background: none repeat scroll 0 0 black;
    outline: none;
    border-radius: 1.88rem;
    clear: both;
    color: white;
    position: absolute;
    right: 0rem;
    text-shadow: none;
    top: 0rem;
    width: 1.88rem;
    z-index: 1;
    opacity: 0.8; padding: 0px 2px 4px;
}

.modal.coupon-modal .modal-dialog .modal-content > .close {
    top: -1rem;
    right: -1rem;
}
    #quick-view.modal .modal-dialog,
    #myLargeViewModal.modal .modal-dialog {
           max-width: 60%;
    }

.modal .modal-dialog .modal-title {
    font-size: 1.2rem;
    font-weight: 500;
}

.modal {
    padding-right: 0;
}

  
#quick-view.modal .close,
#myLargeViewModal.modal .close {
    right: -0.63rem;
    top: -0.47rem;
    border: 1px solid #ddd;
}
/* [MODALS] END --------------------------------------------------- */


/* [MEDIA QUERIES] --------------------------------------------------- */


@media screen and (min-width: 768px) {

    #quick-view.modal .modal-dialog,
    #myLargeViewModal.modal .modal-dialog {
        width: 80%;
    }

    #middle .modal .modal-footer .order-subtotal,
    #middle .modal .modal-footer .order-items-count {
        text-align: left;
    }
}

@media screen and (max-width: 767.98px) {
    #middle .modal .modal-footer {
        text-align: center;
    }

        #middle .modal .modal-footer .btn {
            margin-top: 0.99rem;
        }
    .modal.show .modal-dialog {
        -webkit-transform: translate(0, 5%);
        transform: translate(0, 5%);
    }

}

/* [MEDIA QUERIES] END--------------------------------------------------- */