/*  FORM / INPUT / INPUT STYLE
    -----------------------------------------------------------------------------------------------
*/



.input_style
{

    font-family: var(--x-input-text-font);
    font-size: 14px;

    color: var(--x-input-text-forecolor);
    background-color: transparent;

    outline: none;
    padding: 5px 0 10px 10px;

    width: 100%;
    max-width: 100%;

    border: 0;

    border-bottom: 1px solid var(--x-input-border-forecolor);

    -moz-appearance: textfield;

}



.input_style:focus
{

    border-bottom-color: var(--x-input-border-focus-forecolor);

}



.input_style:hover
{

    border-bottom-color: var(--x-input-border-hover-forecolor);

    transition: ease all 0.8s;

}



.input_style::-webkit-inner-spin-button,
.input_style::-webkit-outer-spin-button
{

    -webkit-appearance: none;
    margin:0;

}



.inputarea_style
{

    font-family: var(--x-input-text-font);
    font-size: 14px;

    color: var(--x-input-text-forecolor);
    background-color: transparent;

    outline: none;
    padding: 5px 0 10px 10px;

    resize: none;

    width: 100%;
    max-width: 100%;
    height: 110px;

    border: 0;

    border-bottom: 1px solid var(--x-input-border-forecolor);

    -moz-appearance: textfield;

}



.inputarea_style:focus
{

    border-bottom-color: var(--x-input-border-focus-forecolor);

}



.inputarea_style:hover
{

    border-bottom-color: var(--x-input-border-hover-forecolor);

    transition: ease all 0.8s;

}



/*  BUTTON STYLE
    -----------------------------------------------------------------------------------------------
*/



.button_style
{

    font-family: var(--x-input-text-font);
    font-size: 13px;

    color: var(--x-input-text-forecolor);
    background-color: transparent;

    text-align: center;

    outline: none;
    padding: 8px 0 8px 0;

    width: 140px;

    border-width: 1px;
    border-style: solid;
    border-color: var(--x-input-border-forecolor);

    border-radius: 3px;

    cursor: pointer;

}



.button_style:hover
{

    background-color: var(--x-color-orange);

    border-color: var(--x-color-orange);

    color: var(--x-color-white);

    transition: ease all 0.5s;

}



.button_style:focus
{

    background-color: var(--x-color-orange);

    border-color: var(--x-color-orange);

}



.button_style:disabled:hover
{

    color: var(--x-input-text-forecolor);

    border-color: var(--x-input-label-forecolor);

    cursor: not-allowed;

    background-color: transparent;

}



/*  DROPDOWN STYLE
    -----------------------------------------------------------------------------------------------
*/



.dropdown_style
{

    font-family: var(--x-input-text-font);
    font-size: 14px;

    color: var(--x-input-text-forecolor);
    background-color: transparent;

    outline: none;
    padding: 7px 10px 10px 10px;

    width: 100%;
    max-width: 100%;

    border: 0;

    border-bottom: 1px solid var(--x-input-border-forecolor);

}



.dropdown_style:focus
{

    background-color: transparent;

    border-bottom-color: var(--x-color-orange);

}



.dropdown_style:hover
{

    background-color: transparent;

    border-bottom-color: var(--x-color-orange);

    transition: ease all 0.8s;

}



/*  WARNING / ERROR / SUCCESS / NOTE / MODAL STYLE
    -----------------------------------------------------------------------------------------------
*/



.modal_style
{

    font-family: var(--x-input-text-font);
    font-size: 13px;

    color: var(--x-color-white);

}