.patt-holder{
  -ms-touch-action:none;
  background:#007bff
}
.patt-wrap{
  cursor:pointer;
  position:relative
}
.patt-wrap li,.patt-wrap ul{
  list-style:none;
  margin:0;
  padding:0
}
.patt-circ{
  -moz-box-sizing:border-box;
  box-sizing:border-box;
  float:left;
  position:relative
}
.patt-circ.hovered{
  border:3px solid #090
}
.patt-error .patt-circ.hovered{
  border:3px solid #ba1b26
}
.patt-hidden .patt-circ.hovered{
  border:0
}
.patt-dots{
  background:#fff;
  left:50%;
  margin-left:-5px;
  margin-top:-5px;
  top:50%;
  width:10px
}
.patt-dots,.patt-lines{
  border-radius:5px;
  height:10px;
  position:absolute
}
.patt-lines{
  -ms-transform-origin:5px 5px;
  -webkit-transform-origin:5px 5px;
  background:hsla(0,0%,100%,.7);
  transform-origin:5px 5px
}
.patt-hidden .patt-lines{
  display:none
}

@media screen and (max-device-width:480px) {
  .patt-dots,.patt-lines{
    border-radius:5px;
    height:10px;
    position:absolute
  }
}