/*
	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: none;
    -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;
    border: 1px solid rgba(167, 167, 167, 1);
}

.patt-circ.hovered {
    border: 1px solid #EAC97F;
    /*box-shadow:0px 0px 1px 6px rgba(220, 162, 115,.7);*/
    /*box-shadow: 0px 2px 10px 1.5px rgba(251, 241, 222, 0.22);*/
    background: #fff;
    z-index: 1;
}

.patt-circ.hovered .patt-dots {
    /*border:2px solid rgba(101,103,197,1);*/
    background: linear-gradient(270deg, #EECD95, #CEA867);
}

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

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

.patt-dots {
    background: transparent;
    width: calc(100vw / 375 * 20);
    height: calc(100vw / 375 * 20);
    border-radius: calc(100vw / 375 * 20);
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: calc(-1 * (100vw / 375 * 10));
    margin-left: calc(-1 * (100vw / 375 * 10));
}

.patt-lines {
    border-radius: calc(100vw / 375 * 5);
    height: calc(100vw / 375 * 2);
    background: #FFE6BF;
    position: absolute;
    transform-origin: 2px 2px;
    -ms-transform-origin: 2px 2px; /* IE 9 */
    -webkit-transform-origin: 2px 2px;
}

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