a:hover { text-decoration: underline; }

a.default { color: #999; }

/* Action */
a.action {
  display: inline-block;
  height: 32px;
  line-height: 32px;
  border-radius: 16px;
  color: #333;
  text-transform: uppercase; text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
}
a.action:focus { text-decoration: underline; }
a.action.strong {
  padding-right: 16px;
  background: #e6e6e6;
  color: #333;
}

/* Action with icon */
a.action.ic {
  position: relative;
  padding-right: 4px; padding-left: 32px;
  font-size: 12px;
}
a.action.ic svg {
  position: absolute; top: 4px; left: 4px;
}
/*a.action.ic:focus,
a.action.ic:hover {
  background: #eee;
}*/
a.action.ic-only {
  padding: 4px;
  width: 32px; height: 32px;
}
a.action.ic-only svg { position: static; }

a.ic-undo { color: #d32f2f; }
a.ic-undo svg { fill: #d32f2f; }
a.ic-undo:focus,
a.ic-undo:hover {
  background: #fae5e5;
}

button.ic-done { color: #388e3c; }
button.ic-done svg { fill: #388e3c; }
button.ic-done:focus,
button.ic-done:hover {
  background-color: #e2f4e3;
}

button.action {
  position: relative;
  display: inline-block;
  height: 32px;
  line-height: 32px;
  border: none; border-radius: 16px;
  background: url('/img/spinner_small.gif') no-repeat 9999px 9999px;
  color: #333;
  font: 200 14px/16px 'Roboto', sans-serif;
  vertical-align: middle;
  text-align: center; text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;

  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
button.action.ic svg {
  position: absolute; top: 4px; left: 4px;
}
button.action.ic-only {
  padding: 4px;
  width: 32px; height: 32px;
}
button.action.ic-only svg { position: static; }
button.action.loading {
  background-position: 50% 50%;
  cursor: default;
}
button.action.loading:hover,
button.action.loading:focus {
  background-color: transparent;
}
button.action.loading svg { visibility: hidden; }


/* Action constructor */
a.action-constr {
  position: relative;
  width: 48px; height: 48px;
  line-height: 0;
}
a.action-constr span {
  -webkit-transition: -webkit-transform 0.3s;
          transition: transform 0.3s;
}
a.action-constr span,
a.action-constr span::after,
a.action-constr span::before {
  display: block;
  position: absolute; top: 23px; left: 15px;
  width: 18px; height: 2px;
  background-color: #fff;
}
a.action-constr span:before,
a.action-constr span:after {
  content: '';
  top: auto; left: 0;
}

a.action-hamburger span::before { top: -6px; }
a.action-hamburger span::after { bottom: -6px; }

/* Action hamburger transform to close */
a.action-hamburger-close span::before,
a.action-hamburger-close span::after {
  -webkit-transition-duration: 0.3s, 0.3s;
          transition-duration: 0.3s, 0.3s;
  -webkit-transition-delay: 0.3s, 0;
          transition-delay: 0.3s, 0;
}
a.action-hamburger-close span::before {
  -webkit-transition-property: top, -webkit-transform;
          transition-property: top, transform;
}
a.action-hamburger-close span::after {
  -webkit-transition-property: bottom, -webkit-transform;
          transition-property: bottom, transform;
}
a.action-hamburger-close.active span {
  background: none;
  -webkit-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
          transform: rotate(180deg);
}
a.action-hamburger-close.active span::before {
  top: 0;
  -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
          transform: rotate(45deg);
}
a.action-hamburger-close.active span::after {
  bottom: 0;
  -webkit-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
          transform: rotate(-45deg);
}

/* Action hamburger transform to back */
a.action-hamburger-back span::before {
  -webkit-transform-origin: top right;
      -ms-transform-origin: top right;
          transform-origin: top right;
  -webkit-transition: -webkit-transform 0.3s, width 0.3s, top 0.3s;
          transition: transform 0.3s, width 0.3s, top 0.3s;
}
a.action-hamburger-back span::after {
  -webkit-transform-origin: bottom right;
      -ms-transform-origin: bottom right;
          transform-origin: bottom right;
  -webkit-transition: -webkit-transform 0.3s, width 0.3s, bottom 0.3s;
          transition: transform 0.3s, width 0.3s, bottom 0.3s;
}
a.action-hamburger-back.active span {
  -webkit-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
          transform: rotate(180deg);
}
a.action-hamburger-back.active span::before,
a.action-hamburger-back.active span::after {
  width: 11px;
}
a.action-hamburger-back.active span::before {
  top: 0;
  -webkit-transform: translateX(8px) translateY(1px) rotate(45deg);
      -ms-transform: translateX(8px) translateY(1px) rotate(45deg);
          transform: translateX(8px) translateY(1px) rotate(45deg);
}
a.action-hamburger-back.active span::after {
  bottom: 0;
  -webkit-transform: translateX(8px) translateY(-1px) rotate(-45deg);
      -ms-transform: translateX(8px) translateY(-1px) rotate(-45deg);
          transform: translateX(8px) translateY(-1px) rotate(-45deg);
}

/* Action hamburger transform to next */
a.action-hamburger-next span::before {
  -webkit-transform-origin: top left;
      -ms-transform-origin: top left;
          transform-origin: top left;
  -webkit-transition: -webkit-transform 0.3s, width 0.3s, top 0.3s;
          transition: transform 0.3s, width 0.3s, top 0.3s;
}
a.action-hamburger-next span::after {
  -webkit-transform-origin: bottom left;
      -ms-transform-origin: bottom left;
          transform-origin: bottom left;
  -webkit-transition: -webkit-transform 0.3s, width 0.3s, bottom 0.3s;
          transition: transform 0.3s, width 0.3s, bottom 0.3s;
}
a.action-hamburger-next.active span {
  -webkit-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
          transform: rotate(180deg);
}
a.action-hamburger-next.active span::before,
a.action-hamburger-next.active span::after {
  width: 11px;
}
a.action-hamburger-next.active span::before {
  top: 0;
  -webkit-transform: translateX(-1px) translateY(1px) rotate(-45deg);
      -ms-transform: translateX(-1px) translateY(1px) rotate(-45deg);
          transform: translateX(-1px) translateY(1px) rotate(-45deg);
}
a.action-hamburger-next.active span::after {
  bottom: 0;
  -webkit-transform: translateX(-1px) translateY(-1px) rotate(45deg);
      -ms-transform: translateX(-1px) translateY(-1px) rotate(45deg);
          transform: translateX(-1px) translateY(-1px) rotate(45deg);
}

/* Button */
.button {
  display: inline-block;
  padding: 11px 8px;
  min-width: 50px; height: 36px;
  border: 0; border-radius: 2px;
  background: #fff;
  color: #00796b;
  font: 600 14px/16px 'Roboto', sans-serif;
  vertical-align: middle;
  text-align: center; text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;

  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;

  -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, .12), 0 1px 6px rgba(0, 0, 0, .12);
          box-shadow: 0 1px 6px rgba(0, 0, 0, .12), 0 1px 6px rgba(0, 0, 0, .12);
}
.button:hover,
.button:focus {
  position: relative; top: -1px; z-index: 1;
  text-decoration: none;

  -webkit-box-shadow: 0 3px 10px rgba(0, 0, 0, .23), 0 3px 10px rgba(0, 0, 0, .16);
          box-shadow: 0 3px 10px rgba(0, 0, 0, .23), 0 3px 10px rgba(0, 0, 0, .16);
}
.button:active {
  position: static;

  -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, .12), 0 1px 6px rgba(0, 0, 0, .12);
          box-shadow: 0 1px 6px rgba(0, 0, 0, .12), 0 1px 6px rgba(0, 0, 0, .12);
}
.button-small { font-size: 12px; }
.button-simple {
  background-color: transparent;
  -webkit-box-shadow: none;
          box-shadow: none; 
}
.button-simple:hover,
.button-simple:focus,
.button-simple:active {
  position: static;

  -webkit-box-shadow: none;
          box-shadow: none;
}
.button-simple:hover,
.button-simple:focus {
  background-color: rgba(153, 153, 153, .2);
}
.button-simple:active {
  background-color: rgba(153, 153, 153, .4);
}
.button-strong { background: #009688; color: #fff; }
.button.disabled,
.button.disabled,
.button:disabled,
.button[disabled] {
  position: static;
  opacity: .26;
  cursor: default;

  -webkit-box-shadow: none;
          box-shadow: none;
}
.button + .button { margin-left: 4px; }

/* Button with icon */
.button.ic {
  position: relative;
  padding-left: 40px;
}
.button.ic svg {
  position: absolute; top: 6px; left: 8px;
}
.button.ic-only,
.button.ic-only:hover {
  position: relative; top: 0;
  padding: 6px;
  min-width: 0;
  border: none;
  background: none;

  -webkit-box-shadow: none;
          box-shadow: none;
}
.button.ic-only svg { position: static; }
.button.ic-only:hover { background-color: rgba(153, 153, 153, .2); }
.button.ic-only:active { background-color: rgba(153, 153, 153, .4); }

/* Link button */
a.button {
  padding: 0 8px;
  height: 36px;
  line-height: 36px;
}

/* Form button */
button.button {
  background: #009688;
  color: #fff;
}
button.button-simple {
  background-color: transparent;
  color: #00796b;

  -webkit-box-shadow: none;
          box-shadow: none; 
}
button.button-simple:hover,
button.button-simple:active {
  position: static;

  -webkit-box-shadow: none;
          box-shadow: none;
}
button.button-simple:hover {
  background-color: rgba(153, 153, 153, .2);
}
button.button-simple:active {
  background-color: rgba(153, 153, 153, .4);
}


/* Floating action button */
a.fbutton, a.fbutton-constr {
  /*position: absolute; right: 18px; bottom: 18px; z-index: 35;*/
  position: relative; z-index: 1;
  display: block;
  padding: 16px;
  width: 56px; height: 56px;
  border-radius: 56px;
  background: #009688;
  text-decoration: none;

  -webkit-box-shadow: 0 3px 10px rgba(0, 0, 0, .23), 0 3px 10px rgba(0, 0, 0, .16);
          box-shadow: 0 3px 10px rgba(0, 0, 0, .23), 0 3px 10px rgba(0, 0, 0, .16);
}
a.fbutton-main {
  position: absolute; right: 16px; bottom: 16px; z-index: 50;
}
a.fbutton.ic svg { fill: #fff; opacity: 1; }

a.fbutton-constr span {
  -webkit-transition: -webkit-transform 0.3s;
          transition: transform 0.3s;
}
a.fbutton-constr span,
a.fbutton-constr span:after,
a.fbutton-constr span:before {
  display: block;
  position: absolute; top: 27px; left: 16px; z-index: 1;
  width: 22px; height: 3px;
  background-color: #fff;
}
a.fbutton-constr span:after,
a.fbutton-constr span:before {
  content: '';
  top: auto; left: 0;
}

a.fbutton-small {
  /*padding: 8px;
  width: 40px; height: 40px;*/
  transform: scale(0.716);
}
/*a.fbutton-constr.fbutton-small:after,
a.fbutton-constr.fbutton-small:before,
a.fbutton-constr.fbutton-small span { top: 19px; left: 8px; }*/

a.fbutton-plus span { background: none; }
a.fbutton-plus span::after,
a.fbutton-plus span::before {
  width: 15px; height: 3px;
}
a.fbutton-plus span::before {
  -webkit-transform: translateX(4px) rotate(90deg);
          transform: translateX(4px) rotate(90deg);
}
a.fbutton-plus span::after {
  -webkit-transform: translateX(4px) rotate(180deg);
          transform: translateX(4px) rotate(180deg);
}
a.fbutton-plus-close.active span {
  -webkit-transform: rotate(135deg);
      -ms-transform: rotate(135deg);
          transform: rotate(135deg);  
}

a.fbutton-close span { background: none; }
a.fbutton-close span::after,
a.fbutton-close span::before {
  width: 15px; height: 3px;
}
a.fbutton-close span::after {
  -webkit-transform: translateX(4px) rotate(315deg);
          transform: translateX(4px) rotate(315deg);
}
a.fbutton-close span::before {
  -webkit-transform: translateX(4px) rotate(225deg);
          transform: translateX(4px) rotate(225deg);
}

a.fbutton-back span::before,
a.fbutton-back span::after {
  width: 16px;
}
a.fbutton-back span::after {
  -webkit-transform: translate(-3px, 5px) rotate(45deg);
          transform: translate(-3px, 5px) rotate(45deg);
}
a.fbutton-back span::before {
  -webkit-transform: translate(-3px, -5px) rotate(-45deg);
          transform: translate(-3px, -5px) rotate(-45deg);  
}

a.fbutton-next span::before,
a.fbutton-next span::after {
  width: 16px;
}
a.fbutton-next span::after {
  -webkit-transform: translate(9px, 5px) rotate(-45deg);
          transform: translate(9px, 5px) rotate(-45deg);
}
a.fbutton-next span::before {
  -webkit-transform: translate(9px, -5px) rotate(45deg);
          transform: translate(9px, -5px) rotate(45deg);  
}




/* Blocks */
div.actions {
  padding: 8px;
}
div.actions .button { margin-left: 4px; }
div.actions .button:first-child { margin-left: 0; }
div.actions a.default {
  margin-left: 12px;
  line-height: 36px;
  white-space: nowrap;
}
div.actions-right { text-align: right; }
div.actions-right a.default { margin-left: 0; margin-right: 12px; }