/*! 
 *   Unlock Commerce
 *   Snippet Type: Backbone
 *   Snippet Name: Modals
 *   Author: Shashank Agarwal
 */

/* +++++++++++++++++++++++++++++ Modal +++++++++++++++++++++++++++++ */
[data-toggle="modal"] {
    cursor: pointer;
}

#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: 10px;
        text-align: initial;
        vertical-align: middle;
    }

        #middle .modal .modal-dialog .modal-header {
            border-bottom: 1px solid;
        }

        #middle .modal .modal-dialog  .modal-header .modal-title {
            font-size: 1.2rem;
            font-weight: bold;
            line-height: 21px;
        }

         .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: 30px;
            clear: both;
            color: white;
            position: absolute;
            right: -10px;
            text-shadow: none;
            top: -7px;
            width: 30px;
            z-index: 1;
            opacity: 0.8;
            line-height: 30px;
        }


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


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

        #middle .modal .modal-footer .btn {
            margin-top: 15px;
        }
}

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