@import 'vendor'

.mdi-navigation-menu
  padding-left: 0.5rem;

#slide-out .card
  margin: 0

  img
    height: 140px

#slide-out .card-title

  left: 0
  top: -25px
  width: 100%
  height: 100%

  span
    display: block
    line-height: 30px

  .menu-title
    font-weight: bold

  .menu-speach
    font-size: 1rem
    line-height: 20px

  .menu-footer
    font-size: 1rem
    line-height: 20px
    position: relative;
    bottom: -45px;
    left: 145px;

#slide-out i
  color: #1A687F
  width: 5rem
  float: left

#slide-out a
  padding-left: 7px
  font-size: 1.5rem

.side-nav.side-nav-icons
  width: 5rem
  z-index: 1000
  box-shadow: none

#slide-out li
  padding: 0

ul#slide-out li:hover
  background-color #f0f0f0

@media screen and (max-width: 400px)

  #slide-out
    menuWidth: 20rem

@media screen and (min-width: 400px)

  #slide-out
    left: 0
    menuWidth: 0

  #slide-out:before
    /*background-image: linear-gradient(to left, rgba(0, 0, 0, 0.3), transparent)*/
    pointer-events:none
    content: ""
    display: block
    position: absolute
    top: 0
    right: 0
    width: 1rem
    height: 100%

  //#slide-out:hover
  //  width: 20rem
  //  box-shadow: 0 2.5rem 5rem rgba(0,0,0,0.30), 0 2rem 1.5rem rgba(0,0,0,0.22)

  //#slide-out:hover + main
  //  opacity: 0.5
  //  pointer-events: none

  #slide-out li
    width: 20rem
    padding: 0

.nav-wrapper a
  padding-left 10px