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

    .h:hover {
        cursor: pointer;
    }

    i.selectable:hover {
        cursor: pointer;
        opacity: .25;
    }
    
    .selectable m-card:not(.nH):hover {
        cursor: pointer;
        /*background-color: #FAFAFA;*/
        border: .5px solid #DDD;
    }
        .selectable m-card.primary:not(.nH):hover {
            border: .5px solid #32404e;
            /*background-color: #F2871C;*/
        }
    .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: 650px;
        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.w {
            width: calc(100vw - 40px);
            min-width: calc(100vw - 40px);
            max-width: calc(100vw - 40px);
            top: 20px;
            left: 20px;
            border-radius: 6px;
            height: calc(100vh - 40px);
            min-height: calc(100vh - 40px);
            max-height: calc(100vh - 40px);
        }

    m-a:hover {
        cursor: pointer;
        text-decoration: underline;
    }
    
    .sQ.hO:hover i,
    .sQ.hO:hover svg {
        fill: #F2871C;
    }

}

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

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

}

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