/**
	FOR pull-to-refresh
*/
/* BUBBLE indicators container and transport */
.mk-pullfresh-bubble {
  text-align: center;
  overflow: hidden;
  position: relative;
  z-index: 1000;
}
.mk-pullfresh-bubble .mkpf-envelop {
  display: block;
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  padding-bottom: 5px;
}
/* INDICATOR */
.mkpf-indicator,
.mkpf-indicator * {
  box-sizing: border-box;
}
/* container of indicator - arrow and spinner */
/* graphic circle, containing arrow and spinner */
.mkpf-indicator {
  display: inline-block;
  position: relative;
  border: 1px solid #aaa;
  border-radius: 50%;
  width: 32px;
  height: 32px;
}
/* container of arrow, dummy to rotate it */
.mkpf-icon-wrapper {
  display: inline-block;
  box-sizing: border-box;
  position: absolute;
  top: -1px;
  /* because of border width of parent */
  left: -1px;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  -webkit-transition: opacity 500ms, -webkit-transform 300ms;
  transition: opacity 500ms, -webkit-transform 300ms;
  transition: transform 300ms, opacity 500ms;
  transition: transform 300ms, opacity 500ms, -webkit-transform 300ms;
}
/* arrow line, part of arrow icon */
.mkpf-arrow-down {
  display: inline-block;
  width: 1px;
  height: 20px;
  position: absolute;
  top: 5px;
  left: 15px;
  border-left: 1px solid #aaa;
}
/* arrowhead, part of arrow icon  */
.mkpf-arrow-down:after {
  content: '';
  display: inline-block;
  width: 10px;
  height: 10px;
  border: 1px solid #aaa;
  border-left: none;
  border-top: none;
  -webkit-transform: rotate(45deg) translateY(4px) translateX(-4px);
          transform: rotate(45deg) translateY(4px) translateX(-4px);
}
/* spinner big radius */
.mkpf-spinner {
  display: none;
  position: absolute;
  top: -1px;
  left: -1px;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  -webkit-animation: mkpf-rotate 0.8s infinite linear;
          animation: mkpf-rotate 0.8s infinite linear;
}
/* spinner pointer-circle */
.mkpf-spinner:after {
  display: inline-block;
  content: '';
  border-radius: 50%;
  background-color: #aaa;
  position: absolute;
  top: 2px;
  left: 2px;
  height: 6px;
  width: 6px;
}
/* STATES transitions */
[data-mkpf-state=idle] .mkpf-icon-wrapper {
  opacity: 0;
}
[data-mkpf-state=idle] .mk-pullfresh-bubble {
  /*анимация по возвращению индикатора на место*/
  -webkit-transition: height 300ms;
  transition: height 300ms;
}
[data-mkpf-state=active] .mkpf-icon-wrapper {
  opacity: 1;
}
[data-mkpf-state=ready] .mkpf-icon-wrapper {
  opacity: 1;
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}
[data-mkpf-state=pending] .mkpf-icon-wrapper {
  opacity: 0;
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}
[data-mkpf-state=pending] .mkpf-spinner {
  display: inline-block;
}
[data-mkpf-state=pending] .mk-pullfresh-bubble {
  /* плавно сдуваем пузырь до размеров ожидания */
  -webkit-transition: height 300ms;
  transition: height 300ms;
}
@-webkit-keyframes mkpf-rotate {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes mkpf-rotate {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
/* MATERIAL STYLE applicable to puller */
.mkpf-material {
  position: relative;
}
.mkpf-material[data-mkpf-state=active],
.mkpf-material[data-mkpf-state=ready] {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.mkpf-material .mk-pullfresh-bubble {
  position: absolute;
  width: 100%;
}
.mkpf-material .mkpf-envelop {
  bottom: 5px;
}
.mkpf-material .mkpf-indicator-wrapper {
  background-color: #fff;
  display: inline-block;
  width: 40px;
  height: 40px;
  padding: 3px;
  border-radius: 50%;
  border: 1px solid #aaa;
  box-shadow: 2px 2px 9px rgba(0, 0, 0, 0.4);
}