/* =============== MOBILE FIRST RESPONSIVENESS =============== */

/* Custom, Iphone Retina */
@media only screen and (min-width: 320px) {
    
}

/* Extra Small Devices, Phones */
@media only screen and (min-width: 480px) {
    
}

/* Small Devices, Tablets */
@media only screen and (min-width: 768px) {
    
}

/* Medium Devices, Desktops */
@media only screen and (min-width: 992px) {
    
}

/* Large Devices, Wide Screens */
@media only screen and (min-width: 1200px) {
    
}

/* =============== NON MOBILE FIRST RESPONSIVENESS =============== */

/* Large Devices, Wide Screens */
@media only screen and (max-width: 1200px) {
    
}

/* Medium Devices, Desktops */
@media only screen and (max-width: 992px) {
    .dashboard-wrapper{
        grid-template-columns: 1fr;
        grid-template-rows: 0.2fr 3fr;
        grid-template-areas: 
            "header"
            "main";
    }
    .dashboard-wrapper #sidenav{
        position: absolute;
        width: 250px;
        max-width: 0;
        transition: max-width .4s;
        height: 100%;
        left: 0;
        top: 0;
        overflow: hidden;
    }
    .dashboard-wrapper #sidenav .sidenav-header .close-icon{display: block;}
    .dashboard-wrapper .header > div.header-left {display: block;}
}

/* Small Devices, Tablets */
@media only screen and (max-width: 768px) {
    .header .header-right .help-icon,
    .header .header-right .message-icon{
        display: none;
    }
    .main-content .main-cards{
        grid-template-columns: repeat(2, 1fr);
    }
    .widget-wrapper{
        grid-template-columns: 1fr;
    }
}

/* Extra Small Devices, Phones */
@media only screen and (max-width: 480px) {
    .main-content .main-cards{
        grid-template-columns: 1fr;
    }
    .header .header-middle{
        display: none;
    }   
}

/* Custom, Iphone Retina */
@media only screen and (max-width: 360px) {
    
}