/* DEFAULT SETTINGS */
.fwFormElement *{
    font-size   : 13px;
    font-family : "Arial", sans-serif;
}

/* CHECKBOX AND RADIO BUTTON */
.fwVisualCheckbox input{
    margin-top : -1px; 
}input.fwFormElement.checkbox, 
input.fwFormElement.radio{
    width       : 21px;
    height      : 21px;
    cursor      : pointer;
    position    : relative;
    top         : 4px;
    margin      : 0;
    padding     : 0; 
}.fwVisualCheckbox, .fwVisualRadio{
    margin  : 0;
    padding : 0;
}.fwVisualCheckbox, .fwVisualRadio{
    display           : block;
    font-size         : 18px;
    height            : 21px;
    width             : 20px;
    background-image  : url('../images/forms/checkbox-radio.png'); 
    background-repeat : no-repeat; 
    background-color  : transparent;  
}    

/* CHECKBOX */
.fwVisualCheckbox{background-position : 0 -1px;}
.fwVisualCheckbox.checked{background-position : 0 -23px;}

/* RADIO */
.fwVisualRadio{background-position : 0 -44px;}
.fwVisualRadio.checked{background-position : 0 -66px;}

/* INPUT TEXT, TEXTAREA */
.fwInputText, .fwTextarea{
    background-color      : #fff; 
    border                : 1px solid #ccc;
    padding               : 7px 9px;
    color                 : #333;
    resize                : none;
    width                 : 100%;  
    -webkit-border-radius : 2px;
    -moz-border-radius    : 2px;
    border-radius         : 2px;
    -webkit-appearance    : textfield;
    -moz-appearance       : field;
    appearance            : field; 
    overflow              : hidden !important;
    
    -moz-box-sizing     : border-box;
    -webkit-box-sizing  : border-box;
    -ms-box-sizing      : border-box;
    -o-box-sizing       : border-box;
    box-sizing          : border-box;
    
    -moz-box-shadow     : inset 0px 2px 3px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow  : inset 0px 2px 3px rgba(0, 0, 0, 0.1);
    -ms-box-shadow      : inset 0px 2px 3px rgba(0, 0, 0, 0.1);
    -o-box-shadow       : inset 0px 2px 3px rgba(0, 0, 0, 0.1);
    box-shadow          : inset 0px 2px 3px rgba(0, 0, 0, 0.1);
    
    /* ANIMACIÓN EN GENERAL */
    -moz-transition     : border-color 0.5s, background 0.5s, color 0.5s;
    -webkit-transition  : border-color 0.5s, background 0.5s, color 0.5s;
    -ms-transition      : border-color 0.5s, background 0.5s, color 0.5s;
    -o-transition       : border-color 0.5s, background 0.5s, color 0.5s;
    transition          : border-color 0.5s, background 0.5s, color 0.5s;
}.fwInputText:focus, .fwTextarea:focus{
    border : 1px solid #aaa;
}.fwInputText.fwDisabledFormElement, .fwTextarea.fwDisabledFormElement{
    color  : #888 !important;
    cursor : default;
}.fwForm_inputTextWithButton .fwInputText{

}.fwForm_inputTextWithButton span{
    margin-left : -32px;
    margin-top  : 0;
    position    : absolute;
}.fwForm_inputTextWithButton input{
    padding-right : 33px; 
}.fwForm_inputTextWithButton span img{
    vertical-align  : bottom !important;
    cursor          : pointer; 
    width           : 30px;
    height          : 30px; 
    border          : 1px solid #ddd;
}.fwForm_inputTextWithButton span img:hover{
    border : 1px solid #ccc;
}

/* SELECT */
.fwVisualSelect{
    padding     : 0; 
    background  : url('../images/forms/input-bg.png') repeat-x 0 0 #fff;
    border      : 1px solid #ccc;
    
    -moz-border-radius    : 2px;
    -webkit-border-radius : 2px;
    -ms-border-radius     : 2px;
    -o-border-radius      : 2px;
    border-radius         : 2px;
    
    -moz-box-sizing    : border-box;
    -webkit-box-sizing : border-box;
    -ms-box-sizing     : border-box;
    -o-box-sizing      : border-box;
    box-sizing         : border-box;
    
    -moz-transition    : boder-color 1s;
    -webkit-transition : boder-color 1s;
    -ms-transition     : boder-color 1s;
    -o-transition      : boder-color 1s;
    transition         : boder-color 1s;
}.fwVisualSelect:hover{
    border-color : #aaa;
}.fwVisualSelect .fwVisualSelectWrapper{
    color         : #000;
    padding       : 7px 30px 7px 7px;
    white-space   : nowrap;
    overflow      : hidden; 
    text-overflow : ellipsis;
    background    : url('../images/forms/icon-select-button.png') no-repeat 100% 50%;
    cursor        : pointer;
}.fwVisualSelectDialog{

}.fwVisualSelectDialog .fwVisualSelectDialogWrapper{
    padding: 0 !important;
}.fwVisualSelectDialog .fwVisualSelectDialogWrapper .fwVisualSelectDialogFinderWrapper{
    padding: 0;
}.fwVisualSelectDialog .fwVisualSelectDialogWrapper .fwVisualSelectDialogFinderWrapper input{
    padding          : 5px 30px 5px 10px;
    border           : none;
    border-bottom    : 1px solid #ccc;
    box-sizing       : border-box;
    width            : 100%; 
    background       : url('../images/forms/search-icon-select-dialog.png') no-repeat 98% 50% #f3f3f3;
    color            : #555;
}.fwVisualSelectDialog .fwVisualSelectDialogWrapper .fwVisualSelectDialogFinderWrapper input.aero{
    -moz-box-shadow     : 0px 2px 1px -1px rgba(0, 0, 0, 0.15);
    -webkit-box-shadow  : 0px 2px 1px -1px rgba(0, 0, 0, 0.15);
    box-shadow          : 0px 2px 1px -1px rgba(0, 0, 0, 0.15);
}.fwVisualSelectDialog .fwVisualSelectDialogWrapper ul{
    margin              : 0;
    padding             : 0;
    list-style          : none;
    list-style-position : inside;
}.fwVisualSelectDialog .fwVisualSelectDialogWrapper ul li{

}.fwVisualSelectDialog .fwVisualSelectDialogWrapper ul li a{
    display         : block;
    padding         : 8px;
    white-space     : nowrap;
    overflow        : hidden; 
    text-overflow   : ellipsis;
    text-decoration : none !important;
    transition      : background-color .3s;
    cursor          : pointer;
    border-top      : 1px solid #fff;
    border-bottom   : 1px solid #dfdfdf;
    color           : #111 !important;
}.fwVisualSelectDialog .fwVisualSelectDialogWrapper ul li:first-child a{
    border-top : none;
}.fwVisualSelectDialog .fwVisualSelectDialogWrapper ul li:last-child a{
    border-bottom : none;
}.fwVisualSelectDialog .fwVisualSelectDialogWrapper ul li a:hover{
    background-color: #e5e5e5;
}.fwVisualSelectDialog .fwVisualSelectDialogWrapper ul li a.selected{
    cursor           : default;
    background-color : rgba(9, 101, 178, .15);
}

/* EL DIALOG DE LOS <SELECT> PASAN A VERSE AL 100% */
@media (max-width: 720px) {
    .fwVisualSelectDialog{
        width    : 100% !important;
        height   : 100% !important;
        position : fixed;
        top      : 0 !important;
        left     : 0 !important; 
    }.fwVisualSelectDialog .fwVisualSelectDialogWrapper{
        width  : 100% !important;
        height : 95% !important;
    }
}

/* INPUT FILE */
.fwInputFile{
    border      : 1px solid #ccc;
    background  : #fff;
    padding     : 2px 3px;
    font-size   : 13px;
    color       : #333;
    font-family : "Arial", sans-serif;
}.fwInputFile:hover{
    cursor : pointer; 
}


/* BUTTONS */
.fwFormButton{
    background    : #ebebeb;
    border        : 1px solid #ccc;
    border-radius : 2px;
    color         : #333333;
    font-weight   : bold;
    padding       : 3px 5px;
    cursor        : pointer; 
    /* ANIMACIÓN EN GENERAL */
    transition          : 0.5s; 
    -webkit-transition  : 0.5s;
    -moz-transition     : 0.5s;
}.fwFormButton:hover{
    border     : 1px solid #aaa; 
    background : #e5e5e5;
}.fwFormButton:active{
    position : relative;
    top      : 1px;
}