/**
	FOR pull-to-refresh
*/
/* BUBBLE indicators container and transport */
.mk-pullfresh-bubble {
  text-align: center;
  overflow: hidden;
  position: relative;
  z-index: 1000;
  box-sizing: border-box;
}
.mk-pullfresh-bubble .mkpf-envelop {
  display: flex; 
  align-items: center;
  justify-content: center;
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  padding-bottom: .5rem;
}
/* INDICATOR */
.mkpf-indicator,
.mkpf-indicator * {
  box-sizing: border-box;
}
/* container of indicator - arrow and spinner */
/* graphic circle, containing arrow and spinner */
.mkpf-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  /* border: 1px solid #aaa; */
  border-radius: 100%;
  width: 3.2rem;
  height: 3.2rem;
}
/* container of arrow, dummy to rotate it */
.mkpf-icon-wrapper {
  display: flex;
  box-sizing: border-box;
  position: absolute;
  top: 0;
  /* because of border width of parent */
  left: 0;
  border-radius: 100%;
  width: 3.2rem;
  height: 3.2rem;
  -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: flex;
  align-items: center;
  justify-content: center;
  width: 3.2rem;
  height: 3.2rem;
  position: absolute;
  /*top: 5px;
  left: 15px;
  border-left: 1px solid #aaa;*/
}
/* arrowhead, part of arrow icon  */
.mkpf-arrow-down:after {
  content: '';
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.2rem;
  height: 3.2rem;
  background-size: contain;
  /*border: 1px solid #aaa;
  border-left: none;
  border-top: none;*/
  /* -webkit-transform: rotate(45deg) translateY(0) translateX(-1px);
          transform: rotate(45deg) translateY(0) translateX(-1px); */
}
/* spinner big radius */
.mkpf-spinner {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 100%;
  width: 3.2rem;
  height: 3.2rem;
  /* -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: 100%;
  background-color: #aaa;
  position: absolute;
  top: 0;
  left: 0;
  height: 0;
  width: 0;
  opacity: 0;
}
/* 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: flex;
  align-items: center;
  justify-content: center;
}
[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: .5rem;
}
.mkpf-material .mkpf-indicator-wrapper {
  background-color: #fff;
  display: inline-block;
  width: 4rem;
  height: 4rem;
  padding: .3rem;
  border-radius: 100%;
  border: 1px solid #aaa;
  box-shadow: .2rem .2rem .9rem rgba(0, 0, 0, .4);
}