/* ----------- Non-Retina Screens ----------- */
@media screen and (min-width: 768px) {

    .h:hover {
        cursor: pointer;
    }

    m-notification {
        max-width: 300px;
        left: initial;
        right: 20px;
        bottom: 20px;
    }
    
    i.selectable:hover {
        cursor: pointer;
        opacity: .25;
    }
    
    .selectable m-card:not(.nH):hover {
        cursor: pointer;
        background-color: #FAFAFA;
    }
        .selectable m-card.active[data-label="Settings Body"]:not(.nH):hover,
        .selectable m-card.primary:not(.nH):hover {
            background-color: #B61E2E;
        }
    .selectable m-flex.hB:hover {
        cursor: pointer;
        background-color: #FAFAFA;
    }
    
    m-dateoptions span:hover,
    m-timeoptions span:hover,
    m-datebody table td:hover {
        cursor: pointer;
    }

    m-module {
        width: 60vw;
        max-width: 750px;
        min-width: 490px;
        margin: 0 auto;
        -webkit-box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
                box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
    }
        m-module.addOn {
            width: 40vw;
            max-width: initial;
            min-width: initial;
        }

    m-a:hover {
        cursor: pointer;
        text-decoration: underline;
    }
    
    .appBags.half m-card {
        width: 49%;
        margin: .5%;
    }
    .appBags m-card {
        width: 32%;
        margin: .5%;
    }

    .preview {
        display: block;
    }

}

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

    #flxCheckoutKeypad > m-flex {
        /*min-width: 800px;
        max-width: 800px;*/
        margin: 0 auto;
    }

    .numbers {
        max-width: 400px;
    }

    .appBags.half m-card,
    .appBags m-card {
        width: 24%;
        margin: .5%;
    }

}

@media screen and (min-width: 1300px) {
    
    m-module .appBags m-card {
        width: 24%;
        margin: .5%;
    }
    .appBags m-card {
        width: 19%;
        margin: .5%;
    }

}

@media screen and (min-width: 1700px) {
    
    m-module .appBags m-card {
        width: 24%;
        margin: .5%;
    }
    .appBags m-card {
        width: 15.5%;
        margin: .5%;
    }

}

/* ----------- Retina Screens ----------- */