@import "../assets/css/variables";

.app {
  width: 100%;
  height: 100%;
  background-color: #EEE;
  overflow-x: hidden;
  margin: 0;
}

.app-content {
  width: $content-width;
  margin: 0 auto;
  position: relative;
}

mat-card {
  margin: 10px 0;
}

mat-sidenav {
  ul, ol {
    margin: 10px 0px 0px 0px;
  }
}

mat-toolbar {
  box-shadow: 0 3px 5px -1px rgba(0, 0, 0, .2), 0 6px 10px 0 rgba(0, 0, 0, .14), 0 1px 18px 0 rgba(0, 0, 0, .12);
}

@media (max-width: $screen-lg-min) {
  .app-content {
    width: 100%;
  }
}

mat-sidenav {
  a {
    padding: 4px 0 4px 10px;
  }
  li {
    padding-left: 15px;
    cursor: pointer;
    &:hover {
      background-color: rgb(245, 245, 245);
    }
  }
}