/*
Created by DigitalZoomStudio - http://digitalzoomstudio.net
Licence: http://creativecommons.org/licenses/by/2.0/
*/

.iconselector{

    line-height: 1;
}
.iconselector > p:first-child{
    position: relative;
}
.iconselector.active .iconselector-clip{
    display: block;
}
.iconselector.activetransition .iconselector-clip{
    transform: scale(1);
}
.iconselector-clip{
    background-color: #d6d2c7;
    color: #934c4c;
    padding: 20px;;
    display: none;
}
.icon-select{
    display: inline-block;
    padding: 8px;;

    cursor: pointer;

    width: 20px;

    border: 1px solid rgba(0,0,0,0.03);
    text-align: center;
}

input.style-iconselector[type=text]{
    height: 30px;
    font-size:14px;
    padding: 2px 5px;;
    box-sizing: border-box;

    width: 200px;;

    margin-top: 0;
}

.iconselector-preview{

    width: 30px;
    height: 30px;
    display: inline-block;
    background-color: #d6d2c7;
    vertical-align: top;;


    font-size: 14px;
    text-align: center;
    padding: 8px;;
    box-sizing: border-box;
    color: #934c4c;

    position: relative;



}
.iconselector-preview > i, .iconselector-btn > i{

    transform: translate(-50%,-50%);

    position: absolute;
    top:50%;
    left:50%;


}
.iconselector-preview:empty{
    opacity: 0.5;
}
.iconselector .iconselector-btn{
    width: 30px;
    height: 30px;
    display: inline-block;
    background-color: #d6d2c7;

    margin-left: 5px;
    vertical-align: top;;
    border-radius: 5px;;

    font-size: 14px;
    text-align: center;
    padding: 8px;;
    box-sizing: border-box;
    color: #934c4c;

    cursor: pointer;

    position: relative;
}

.iconselector .iconselector-btn .fa, .iconselector-preview .fa{

}

.iconselector-preview .fa{
}

.iconselector-clip{

    position: relative;


    transition-property: all;
    transition-duration: 0.3s;
    -moz-transition-property: all;
    -moz-transition-duration: 0.3s;
    -webkit-transition-property: all;
    -webkit-transition-duration: 0.3s;
    -o-transition-property: all;
    -o-transition-duration: 0.3s;
    -ms-transition-property: all;
    -ms-transition-duration: 0.3s;
    -ms-transition-timing-function: ease-out-quart;
    -webkit-transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
    -moz-transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
    -o-transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
    transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);

    transform: scale(0);

    transform-origin: 0 0;
}
.iconselector-clip:before{
    content: "";

    background-color: transparent;

    position: absolute;
    bottom: 100%;
    left: 243px;

    width: 0;
    height: 0;

    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid #d6d2c7;
    border-top: 8px solid transparent;

}