/*
  Please note this CSS is currently in   prototype form. We'll implement a cleaned up version in Web Starter Kit.

Need to add z-index to make the FAB go over other elements
*/
/* Variables */
/* Buttons */
.paper-button {
  position: absolute;
  padding: 4px 0;
  margin: 1em;
  width: 160px;
  overflow: hidden;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  color: #000;
  text-transform: uppercase;
  border-radius: 3px;
  outline: none;
}
.paper-button:hover {
  cursor: pointer;
}
.paper-button .ripple {
  position: absolute;
  width: 320px;
  height: 320px;
  background-color: rgba(204,204,204,0.5);
  left: 0;
  top: 0;
  border-radius: 50%;
  margin-left: -160px;
  margin-top: -160px;
  -webkit-transform: scaleX(0) scaleY(0);
      -ms-transform: scaleX(0) scaleY(0);
          transform: scaleX(0) scaleY(0);
  z-index: 9999;
}

.paper-button button, .paper-button input[type="submit"] {
  background: inherit;
  border: none;
  display: block;
  width: 100%;
  height: 100%;
  font-family: 'Roboto';
  font-size: 1em;
  color: #000;
  text-transform: uppercase;
}

.paper-button.colored, .paper-button.colored button {
  color: #4287f5;
}

.paper-button .ripple {
  background-color: rgba(204, 204, 204, 0.5);
}

.paper-button.raised-button.colored .ripple {
  background-color: rgba(255, 255, 255, 0.5);
}

.paper-button.raised-button .ripple {
  background-color: rgba(204, 204, 204, 0.5);
}

.paper-button.raised-button.colored {
  background-color: #4285f4;
}

.paper-button .raised-button {
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
}

.paper-button.raised-button.colored {
  background: #4285f4;
  color: #fff;
}

.paper-button[disabled] {
  background-color: #EAEAEA !important;
  color: #A8A8A8 !important;
  cursor: auto;
}

.paper-button:hover {
  background-color: #EAEAEA;
}

.paper-button.raised-button.colored:hover {
  background-color: #3367d6;
}

button.paper-button {
  border: 0;
  font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial;
  font-size: 1em;
  line-height: 25px;
  background-color: #fff;
}

.paper-button input[type="submit"] {
  outline-color: #ccc;
}

.paper-button.colored.raised-button input[type="submit"] {
  color: #fff;
}

/** Shadows **/
.paper-shadow-animated.paper-shadow {
  -webkit-transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
          transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

.paper-shadow-top-z-1 {
  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.16);
}

.paper-shadow-bottom-z-1 {
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
}

.paper-shadow-top-z-2 {
  box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.paper-shadow-bottom-z-2 {
  box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2);
}

.paper-shadow-top-z-3 {
  box-shadow: 0 17px 50px 0 rgba(0, 0, 0, 0.19);
}

.paper-shadow-bottom-z-3 {
  box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24);
}

.paper-shadow-top-z-4 {
  box-shadow: 0 25px 55px 0 rgba(0, 0, 0, 0.21);
}

.paper-shadow-bottom-z-4 {
  box-shadow: 0 16px 28px 0 rgba(0, 0, 0, 0.22);
}

.paper-shadow-top-z-5 {
  box-shadow: 0 40px 77px 0 rgba(0, 0, 0, 0.22);
}

.paper-shadow-bottom-z-5 {
  box-shadow: 0 27px 24px 0 rgba(0, 0, 0, 0.2);
}

/** Shadows **/
.paper-shadow-animated.paper-shadow {
  -webkit-transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
          transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

.paper-shadow-animate-z-1-z-2.paper-shadow-top {
  -webkit-transition: none;
  -webkit-animation: animate-shadow-top-z-1-z-2 0.7s infinite alternate;
}

.paper-shadow-animate-z-1-z-2 .paper-shadow-bottom {
  -webkit-transition: none;
  -webkit-animation: animate-shadow-bottom-z-1-z-2 0.7s infinite alternate;
}

@-webkit-keyframes animate-shadow-top-z-1-z-2 {
  0% {
    box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.16);
  }
  100% {
    box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  }
}
@-webkit-keyframes animate-shadow-bottom-z-1-z-2 {
  0% {
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  }
  100% {
    box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2);
  }
}

.paper-button.paper-floating-action-button {
  border: none;
  font-size: 24px;
  color: white;
  background-color: #E62565;
  border-radius: 50%;
  width: 56px;
  height: 56px;
  margin: auto;
  box-shadow: 2px 3px 3px 0px rgba(41, 41, 41, 0.3);
}

.paper-button.paper-floating-action-button:hover {
  background-color: #2980b9;
}

.paper-button.paper-floating-action-button.small {
  width: 40px;
  height: 40px;
}