#pattern { position : relative; }
#pattern-box .ui-selecting { background: #FECA40; }
#pattern-box .ui-selected { background: #F39814;  }
#pattern-box {
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
 }
#pattern-box dd { cursor: pointer;  }
#pattern-box .find_pattern {
    background-color: #FFC700;
}
#pattern_indicator {
    position :relative;
    width: 100px;
    text-overflow: clip;
    overflow: hidden;
    white-space: nowrap;
    text-align: center;
    margin: 2px auto 0px auto;
}
#pattern_indicator span {
    position :relative;
    width: 5px;
    height: 5px;
    background-color: rgba(0,0,0,0.2);
    border-radius: 5px;
    display : inline-block;
    margin: 2px 5px;
    transition : all ease 0.5s;
    cursor: pointer;
}
#pattern_indicator span:hover {
    background-color: rgba(0,0,0,0.2);
}
#pattern_indicator span.active {
    background-color: #FFC700;
}
#leak_select_count {
    display : inline-block;
    border-radius: 5px;
    background-color: rgba(0,0,0,0.7);
    color: #fff;
    padding: 10px 25px;
    font-size: 16px;
    font-weight: bold;
    margin: 0 auto;
    position : absolute;
    left: 0px;
    right: 0px;
    bottom : 40px;
    text-align: center;
    width: 250px;
    display : none;
}





/** Pattern Helper
*/

#pattern_helper {
    position: absolute; margin-top: -400px; right: -200px; z-index: 99;
    display:none;
    margin-top: -133px;
    left: 0px;
    right: 0px;
    text-align: center;
    font-family: 'Swagger', sans-serif;
}
#pattern_helper .pattern_helper_bg {
    display: inline-block;
    background-image: url('/public/img/stats/pattern_search_bg.png');
    width: 219px;
    height: 90px;
    overflow: hidden;
}
#pattern_helper .pattern_helper_title {
    font-size: 16px;
    color: #e8e8e8;
    margin-top : 12px;
}
#pattern_helper .pattern_helper_contents {
    font-size: 20px;
    color: #fff;
}

#pattern_helper .pattern_helper_box {
    margin-top : 6px;
    display: flex;
    justify-content: space-around;
}
.pattern_helper_box button:hover {
    margin-top: 1px;
}

#find_pattern_count{
    font-size: 32px;
    color: #FFC700;
    vertical-align: middle;
    font-family: 'Swagger', sans-serif;
    text-shadow: 1px 1px 0 #FFF,
    -1px 1px 0 #FFF,
    1px -1px 0 #FFF,
    -1px -1px 0 #FFF,
    0px 1px 0 #FFF,
    0px -1px 0 #FFF,
    -1px 0px 0 #FFF,
    1px 0px 0 #FFF,
    2px 2px 0 #FFF,
    -2px 2px 0 #FFF,
    2px -2px 0 #FFF,
    -2px -2px 0 #FFF,
    0px 2px 0 #FFF,
    0px -2px 0 #FFF,
    -2px 0px 0 #FFF,
    2px 0px 0 #FFF,
    1px 2px 0 #FFF,
    -1px 2px 0 #FFF,
    1px -2px 0 #FFF,
    -1px -2px 0 #FFF,
    2px 1px 0 #FFF,
    -2px 1px 0 #FFF,
    2px -1px 0 #FFF,
    -2px -1px 0 #FFF;
    /* text-shadow: -2px 0 #FFF, 0 2px #FFF, 2px 0 #FFF, 0 -2px #FFF; */
}

#find_pattern_count.red {
    color : #E74C3C;
}
#find_pattern_count.blue {
    color: #3498DB;
}