$primary-color: #2196F3;

 /* Ripple effect */
 .ripple {
  background-position: center;
  transition: background 0.8s;
  &:hover {
    background: #47a7f5 radial-gradient(circle, transparent 1%, #47a7f5 1%) center/15000%;
  }
  &:active {
    background-color: #6eb9f7;
    background-size: 100%;
    transition: background 0s;
  }
}

.side-nav {
	//transform: translateX(-320px);
	transform: translateX(0px);
	overflow-x: hidden;
	z-index: 800;
	position: relative;
	top: 0;
	left: 0;
	margin-left: -2.05%;
	margin-top: -52px;
	transition: max-width 200ms, transform 200ms cubic-bezier(0.4, 0.0, 0.6, 1);
	width: 320px;
	box-shadow: 0 3px 9px 2px rgba(0, 0, 0, 0.2);
	header {
		transition: padding 150ms;
		background: url(https://s3-us-west-2.amazonaws.com/grupopv-public/assets/bg_sidebar.png) no-repeat;
		background-size: 320px 180px;
		width: auto;
		.rich-area {
			display: flex;
			flex-direction: column;
			justify-content: center;
			padding: 0 16px 8px 16px;
			height: 56px;
			.email {
				display: flex;
				justify-content: space-between;
				align-items: center;
				color: #fff;
				i {
					border-radius: 50%;
					user-select: none;
					height: 32px;
					width: 32px;
					display: flex;
					justify-content: center;
					align-items: center;
					cursor: pointer;
				}
			}
			a {
				font-size: 15px;
				text-decoration: none;
				color: #fff;
				box-shadow: 0, 0, 0;
			}
		}
		.avatars-container {
			padding: 16px 16px 0 16px;
			display: flex;
			justify-content: space-between;
			img {
				user-select: none;
				border-radius: 50%;
			}
		}
	}
	nav {
		ul {
			background-color: #fff;
			padding: 8px 0 0 0;
			margin: 0;
			list-style: none;
			hr {
				background-color: rgba(0, 0, 0, 0.15);
				height: 1.2px;
				border: 0;
			}
			#subheader {
				user-select: none;
				pointer-events: none;
				color: rgba(0, 0, 0, 0.5);
			}
			li {
				user-select: none;
				color: rgba(0, 0, 0, 0.9);
				padding: 0 16px;
				font-weight: 500;
				font-size: 14px;
				cursor: pointer;
				height: 48px;
				display: flex;
				align-items: center;
				margin: 0;
				padding: 0 16px;
				&.active {
					color: $primary-color;
					i {
						color: $primary-color;
					}
				}
        &.disabled {
          cursor: not-allowed;
          color: rgba(197, 197, 197, 1);
          i {
            color: rgba(197, 197, 197, 1);
          }
        }
				i {
					color: rgba(0, 0, 0, 0.6);
					padding-right: 32px;
				}
			}
      a {
        &:active {
          text-decoration: none;
          color: #000;
        }
        &:visited {
          text-decoration: none;
          color: #000;
        }
        &:hover {
          text-decoration: none;
          color: #000;
        }
      }
		}
	}
}

// Media queries
@media all and (max-width: 335px) {
	.action-bar {
		.icons {
			i {
				margin: 8px;
			}
		}
	}
}

@media all and (min-width: 960px) {
	.side-nav {
		header {
			.rich-area {
				padding: 0 24px 8px 24px;
			}
			.avatars-container {
				padding: 24px 24px 0 24px;
			}
		}
	}
}