/*
	patternLock.js v 1.0.1
	Author: Sudhanshu Yadav
	Copyright (c) 2016 Sudhanshu Yadav - ignitersworld.com , released under the MIT license.
	Demo and documentaion on: ignitersworld.com/lab/patternLock.html
*/

.patt-holder {
    background: #3382c0;
    -ms-touch-action: none;
}

.patt-wrap {
    position: relative;
    cursor: pointer;
}

.patt-wrap ul,
.patt-wrap li {
    list-style: none;
    margin: 0;
    padding: 0;
}

.patt-circ {
    position: relative;
    float: left;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}

.patt-circ.hovered {
    border: 3px solid #009900;
}

.patt-error .patt-circ.hovered {
    border: 3px solid #BA1B26;
}

.patt-hidden .patt-circ.hovered {
    border: 0;
}

.patt-dots {
    background: #FFF;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -5px;
    margin-left: -5px;
}

.patt-lines {
    border-radius: 5px;
    height: 10px;
    background: rgba(255, 255, 255, .7);
    position: absolute;
    transform-origin: 5px 5px;
    -ms-transform-origin: 5px 5px;
    /* IE 9 */
    -webkit-transform-origin: 5px 5px;
}

.patt-hidden .patt-lines {
    display: none;
}