/* these classes modified from materialize to give shadow and scale to elements such as button and cards */


.z-depth-0 {
  box-shadow: none !important;
}

.z-depth-1, nav, .card-panel, .card, .toast, .button, .dropdown-content, .collapsible, .side-nav {
  box-shadow: 2px 2px 1px 0 rgba(0, 0, 0, 0.16), 0 0 10px 3px rgba(0, 0, 0, 0.1);
  transition: all 0.05s;
}

.z-depth-1-half, .button:not(.inactive):hover, .card.hoverable:not(.active):hover{
  box-shadow: 3px 3px 5px 0 rgba(0, 0, 0, 0.18), 0 0 13px 4px rgba(0, 0, 0, 0.11);
  transform: scale(1.02);
}

.z-depth-2, .card.active {
  box-shadow: 4px 4px 7px 0 rgba(0, 0, 0, 0.2), 0 0 16px 5px rgba(0, 0, 0, 0.12);
  transform: scale(1.04);
}



.hoverable {
	transition: background-color 0.2s;
}

.hoverable:not(.active):hover{
	background: #fafafa;
}

.clickable, .button{
	/*relative positioning for list items along with overflow hidden to contain the overflowing ripple*/
	position: relative;
	overflow: hidden;
}

.button.inactive{
	box-shadow: none;
}

/*.ink styles - the elements which will create the ripple effect. The size and position of these elements will be set by the JS code. Initially these elements will be scaled down to 0% and later animated to large fading circles on user click.*/
.ink {
	display: block; position: absolute;
	background: #f0f0f0;
	border-radius: 100%;
	transform: scale(0);
}








/*.z-depth-3 {
  box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
}

.z-depth-4, .modal {
  box-shadow: 0 16px 28px 0 rgba(0, 0, 0, 0.22), 0 25px 55px 0 rgba(0, 0, 0, 0.21);
}

.z-depth-5 {
  box-shadow: 0 27px 24px 0 rgba(0, 0, 0, 0.2), 0 40px 77px 0 rgba(0, 0, 0, 0.22);
}

.hoverable {
  transition: box-shadow .25s;
  box-shadow: 0;
}

.hoverable:hover {
  transition: box-shadow .25s;
  box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}*/