/*
    Sidenav CSS

    As the transition to angular2 take place the sidenav css is encapsulated here for the time being
    it should be moved with the quick entry code.

*/

/*
    Resolution independent styles
*/

/* #region Gobal styles */

.sidenav {
    width: 0;
    overflow: hidden;
    position: fixed;
    left: 0;
    top: 57px;
    bottom: 0;

    background: #fff;
    z-index: 1049;
}

/*#endregion */

/* ---------------------------------------------------
    MEDIAQUERIES
----------------------------------------------------- */

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

    .sidenav {
        transition: all 0s ease-in-out;
        -webkit-transition: all 0s ease-in-out;
    }

        .sidenav.open {
            width: 100%;
        }

}

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

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

    .sidenav {
        transition: all 0.2s ease-in-out;
        -webkit-transition: all 0.2s ease-in-out;
        box-shadow: 0 8px 17px rgba(0,0,0,.2);
        -webkit-box-shadow: 0 8px 17px rgba(0,0,0,.2);
    }

        .sidenav.open {
            width: 375px;
        }

}


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

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

    .sidenav {
        transition: all 0.2s ease-in-out;
        -webkit-transition: all 0.2s ease-in-out;
        box-shadow: 0 8px 17px rgba(0,0,0,.2);
        -webkit-box-shadow: 0 8px 17px rgba(0,0,0,.2);

    }

        .sidenav.open {            
        }

}