/*
--------------------------------------------------
Font consistent with Europa.eu website
--------------------------------------------------
*/

body, table, label, input, select, textarea {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16.8px;
    color: #000000;
}

/*
--------------------------------------------------
Size, margin, padding
This form is contained with Europa.eu website
--------------------------------------------------
*/

body {margin: 4px; padding: 4px; border-width: 0; }
table {width: 100%; max-width: 500px; margin: 0; padding: 0px; border-width: 0;  background-color: #ffffff;}
input {padding: 4px;}
select {padding: 4px;}
textarea {height: 125px; padding: 4px;}

.form-label {display: inline-block; margin-bottom: 4px; margin-top: 20px;}
.form-input {display: inline-block; width: 100%; }

input, select, textarea {
        -moz-box-sizing:border-box;
        -webkit-box-sizing:border-box;
        box-sizing:border-box;
}

.button_submit {margin-top: 16px; margin-bottom: 20px;}

.button_submit:hover {
    cursor: pointer;
    cursor: hand;
}

/*
--------------------------------------------------
Checkbox
Make long text wrap under the text block, and not
wrap under the tick box.
--------------------------------------------------
*/

.form-checkbox {
    display: block;
    margin-bottom: 12px;
    width: 95%;
    margin-left:18px;
}

input[type='checkbox'] {margin-left:-18px;}

/*
--------------------------------------------------
Some form fields are marked hidden.
These fields have been kept in the form, so client
can easily include again in the future.
--------------------------------------------------
*/

.hidden {display:none;}

/*
--------------------------------------------------
Display red asterisk next to required fields
Client requested turn-off
--------------------------------------------------
*/

.required {color:#FF0000; width:5px; display:none;}

/*
--------------------------------------------------
Text area character counter
--------------------------------------------------
*/

.length-counter {
    font-size: 0.9em;
    display:block;
    margin-bottom:0.8em;
    padding: 10px 0 0 0px;
}

.length-counter .value {
    width: auto !important;
    padding-right:5px;
}

/*
--------------------------------------------------
Tooltip
--------------------------------------------------
*/

.tooltip {
    position: relative;
    display: inline-block;
    margin-left: 16px;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 200px;
    background-color: #fffacd;
    color: #000000;
    text-align: center;
    border-radius: 6px;
    padding: 5px 5px;
    border: 1px solid #b5b5b5;
    position: absolute;
    z-index: 1;
    top: -5px;
    right: 135%;
    box-shadow: 5px 5px 5px #999999;
    cursor: pointer;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
}

/*
--------------------------------------------------
End
--------------------------------------------------
*/