.fnl_div{
    display: inline-block;
    *display:inline;
    zoom: 1;
    vertical-align: top;
    width:150px;
}
.fnl_btn{
    user-select:none;
    display: inline-block;
    *display:inline;
    zoom: 1;
    vertical-align: top;
    color: #3E5C6D;
    outline: none;
    border: none;
    font-size: 14px;
    padding: 5px 10px;
    background: #FDEAA0;
    opacity: 0.8;
    margin-right: 5px;
}
.fnl_btn:hover{
    opacity: 1;
}
.fnl_btn:active{
    opacity: 0.8;
}
.fnl_btn.active{
    color: #FDEAA0;
    background: #3E5C6D;
    opacity: 1;
}

.fnl_form label{
    display: inline-block;
    *display:inline;
    zoom: 1;
    vertical-align: top;
    width:200px;
    line-height: 13px;
    padding: 5px 5px;
    text-align: right;
    font-size: 12px;
}
.fnl_form .value{
    display: inline-block;
    *display:inline;
    zoom: 1;
    vertical-align: top;
    width:200px;

}
.fnl_form input,.fnl_form select{
    height:30px;
    width:190px;
}
.fnl_form input.error,.fnl_form select.error{
    outline:2px solid red;
}
.fnl_form .field{
    text-align: left;
    margin-top:5px;
}
.fnl_overlay{
    width:100%;
    height:100%;
    top:0;
    left:0;
    background: rgba(100,100,50,.6);
    position: fixed;
    transition: .1s;
    z-index: 5000;
}

.fnl_dialog{
    height: 620px;
    width: 620px;
    max-width: 96%;
    max-height: 90%;
    padding:0px;
    background: #fff;
    margin: auto;
    transition: .3s ease all;
    opacity: 0;
    top:50%;
    transform: translate(0px , -60%) translateZ(0);
    -webkit-box-shadow: 0px 0px 11px 0px rgba(0,0,0,0.45);
    -moz-box-shadow: 0px 0px 11px 0px rgba(0,0,0,0.45);
    box-shadow: 0px 0px 11px 0px rgba(0,0,0,0.45);
    border-top-left-radius: 20px;
    border-bottom-right-radius: 20px;
}

.fnl_dialog >.inner{
    width:100%;
    height:calc(100% - 60px);
    overflow-x:hidden;
    overflow-y:auto;
}

.fnl_overlay .bg_images{
    z-index: 0;
    width: 960px;
    max-width: 96%;
    max-height: 90%;
    overflow-x:visible;
    padding:10px;
    margin: auto;
    top:50%;
    left:50%;
    transition: .2s ease all;
    transform: translate(-50% , -10%);
    position: absolute;
}

.fnl_overlay.active .bg_images{
    transform: translate(-50%, -50%);
    opacity: 1;
}

.fnl_overlay .bg_images .left_side{
    position: absolute;
    left:0;
    top:0px;
    transform: translate(50%,-50%) translateZ(0);
    transition-delay: .3s;
    transition: .2s ease all;
    opacity: 0;

}
.fnl_overlay .bg_images .right_side{
    position: absolute;
    right:0;
    top:0px;
    transition-delay: .3s;
    transition: .2s ease all;
    transform: translate(-50%,-50%) translateZ(0);
    opacity: 0;
}


.fnl_overlay.active .bg_images .left_side{
    transform: translate(-60%,-50%);
    opacity: 1;
}

.fnl_overlay.active .bg_images .right_side{
    transform: translate(60%,-50%);
    opacity: 1;
}


.fnl_overlay.active .fnl_dialog{
    transform: translate(0px, -50%) translateZ(0);
    opacity: 1;
}
.fnl_dialog .loader{
    text-align: center;
    width:100%;
    height:100%;
    top:0;
    left:0;
    background: rgba(0,0,0,.8);
    position: absolute;
    display: none;
}
.fnl_dialog .loader >div{
    width: 100%;
    text-align: center;
    font-size: 16px;
    color:rgba(255,255,255,.8);
    top:50%;
    transform: translate(0%, -50%);
}



.fnl_dialog .closer{
    position: absolute;
    top:5px;
    right:5px;
    width:30px;
    height:30px;
    line-height:30px;
    font-size: 18px;
    color:#fff;
    background: #FF8EA0;
    opacity: 0.8;
    text-align: center;
    z-index: 1000;
}
.fnl_dialog .closer:hover{
    opacity: 1;
}
.fnl_dialog .closer:active{
    opacity: 0.8;
}