/*
	patternLock.js v 0.5.0
	Author: Sudhanshu Yadav
	Copyright (c) 2013 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 li,.patt-wrap ul{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 #090}.patt-error .patt-circ.hovered{border:3px solid #BA1B26}.patt-hidden .patt-circ.hovered{border:0}.patt-dots,.patt-lines{border-radius:5px;height:10px;position:absolute}.patt-dots{background:#FFF;width:10px;top:50%;left:50%;margin-top:-5px;margin-left:-5px}.patt-lines{background:rgba(255,255,255,.7);transform-origin:5px 5px;-ms-transform-origin:5px 5px;-webkit-transform-origin:5px 5px}.patt-hidden .patt-lines{display:none}

.patt-wrap li {
    transition: all .4s ease-in-out 0s;
}

.patt-dots, .patt-lines {
    transition: background .1s ease-in-out 0s;
}

.patt-circ {
    border: 3px solid transparent
}

.patt-dots {
    background: black;
}

.patt-lines {
    background: rgba(0, 0, 0, .4)
}

.patt-circ.hovered {
    border-color: #ddd;
    background: rgba(0, 0, 0, .2);
}

.patt-error .patt-circ {
    background: rgba(243, 66, 53, .4);
    border-color: rgba(243, 66, 53, .8);
}

.patt-success .patt-circ.hovered {
    background: rgba(75, 174, 79, .4);
    border-color: rgba(75, 174, 79, .8);
}

.patt-success .patt-lines {
    background: rgba(75, 174, 79, .5);
}

.patt-holder {
    background: white;
    margin: auto;
}