/*#region Input*/
input.box-shadow,.input-box-shadow {
    box-shadow: 1px 1px 2px 0px #b4b4b4;
}

.venera .input {
    position: relative;
    min-height: 4em;
    font-size: 1em;
    padding-top: 1em;
    display: flex;
    flex-direction: column;
    justify-content: stretch;
}

    .venera .input.info-btn {
        position: relative;
        margin-right: 2rem;
    }

    .venera .input > input {
        background-color: rgba(0,0,0,0.01);
        border: none;
        outline: none;
        font-size: 1em;
        border-bottom: solid 1px #646464;
        color: #646464;
        height: 2em;
        display: block;
        padding: 6px 0.5em 6px 0.5em;
        box-shadow: 1px 1px 2px 0px #b4b4b4;
    }

    .venera .input.info-btn > i.info {
        position: absolute;
        top: 40%;
        left: 100%;
        margin-left: 0.2rem;
    }

    .venera .input > input:disabled,
    .venera .input.disabled > input,
    .venera .input > input.disabled {
        /*opacity: 0.2;*/
        background-color: rgba(0,0,0,0.1);
    }

    .venera .input label {
        display: block;
    }

    .venera .input > input + label.required:before, .venera .input.required > input + label:before {
        content: '*';
        color: red;
    }

    .venera .input > input + label {
        height: 3em;
        pointer-events: none;
        padding-top: 1em;
        z-index: 10;
        display: block;
        position: absolute;
        top: 0px;
        left: 0px;
        overflow: hidden;
        padding-left: 0.5em;
        width: 100%;
        color: #71acff;
    }

        .venera .input > input + label:after {
            content: "";
            display: block;
            position: absolute;
            height: 3em;
            top: -3px;
            left: -100%;
            border-bottom: 3px solid #71acff;
            width: 100%;
            transition: left ease 0.3s;
        }

        .venera .input > input + label + .validation-message, .venera .input > input + label + i .validation-message {
            display: none;
            font-style: italic;
            color: #646464;
        }

    .venera .input > input:invalid + label + .validation-message,
    .venera .input > input.ng-invalid + label + .validation-message,
    .venera .input > input.invalid + label + .validation-message
    {
        display: inline-block;
    }

    .venera .input > input:invalid, .venera .input > input.ng-invalid {
        border-bottom: solid 1px #fa1414;
    }

        .venera .input > input:invalid + label:after {
            border-bottom: 3px solid #fa1414;
        }

    .venera .input > input:empty + label,
    .venera .input > input:placeholder-shown + label,
    .input > input:empty + label {
        padding-top: 1.5em;
        transition: padding-top ease 0.3s;
    }

    .venera .input > input:not(:empty) + label,
    .venera .input > input:not(:placeholder-shown) + label,
    .venera .input > input:focus + label {
        padding-top: 0;
        transition: padding-top ease 0.3s;
        font-size: 0.8em;
        height: 3.75em;
    }

        .venera .input > input:not(:placeholder-shown) + label:after,
        .venera .input > input:focus + label:after {
            transition: left ease 0.3s;
            left: 0;
            height: 3.75em;
        }

    .venera .input > input + label + .error {
        color: #fa1414;
        display: none;
        margin-top: 0.5em;
        width: auto;
        padding-right: 1em;
    }

    .venera .input > input:invalid + label + .error,
    .venera .input > input.invalid + label + .error {
        display: block;
    }
/*#endregion*/
/*#region Autocomplete Input*/
.input.typeahead .autocomplete-container,
input.autocomplete .autocomplete-container {
    display: none;
    background-color: white;
    flex-direction: column;
    z-index: 100;
    position: absolute;
    left: 0px;
    right: 0px;
    width: auto;
    top: 40px;
    font-family: Arial, sans-serif;
    max-height: 20em;
    overflow-y: auto;
    border-radius: 4px;
    box-shadow: 2px 2px 3px 1px #b4b4b4;
}

    .input.typeahead .autocomplete-container.open,
    input.autocomplete .autocomplete-container.open {
        display: flex;
    }

.autocomplete-container .autocomplete-item {
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid #3a87f3;
    padding: 12px;
    cursor: default;
}

    .autocomplete-container .autocomplete-item:hover {
        background-color: #71acff;
    }
/*#endregion*/
/*#region Checkbox*/
.venera input[type='checkbox'],
input[type='checkbox'].venera,
.venera input[type='radio'],
input[type='radio'].venera {
    margin-left: 0.5em;
    height: 1.5em;
    width: 1.5em;
}

    .venera input[type='checkbox'] + label,
    input[type='checkbox'].venera + label,
    .venera input[type='radio'] + label,
    input[type='radio'].venera + label {
        font-size: 1.2em;
        color: #646464;
        line-height: 2em;
        border-bottom: solid 1px transparent;
        vertical-align: super;
        margin-bottom:0;
    }

    .venera input[type='checkbox']:invalid + label,
    input[type='checkbox']:invalid.venera + label,
    .venera input[type='radio']:invalid + label,
    input[type='radio']:invalid.venera + label,
    .venera input[type='checkbox'].invalid + label,
    input[type='checkbox'].venera.invalid + label,
    .venera input[type='radio'].invalid + label,
    input[type='radio'].venera.invalid + label {
        border-bottom: solid 1px #fa1414;
    }
/*#endregion*/
/*#region Button*/
.venera button,
button.venera,
.venera input[type='submit'],
input[type='submit'].venera {
    background-color: #0150c1;
    border-radius: 0.4em;
    outline: none;
    border: none;
    color: #fcfcfa;
    padding: 1em;
    margin: 0.5em;
    font-size: 1em;
    box-shadow: #b4b4b4 0rem 0rem 0.8rem;
    letter-spacing: 0.1em;
    text-transform: capitalize;
    display: block;
    margin: auto;
    cursor: pointer;
}

    .venera button.inline,
    button.venera.inline,
    .venera input[type='submit'].inline,
    input[type='submit'].venera.inline {
        margin-left: 1rem;
    }

    .venera button:hover,
    button.venera:hover,
    .venera input[type='submit']:hover,
    input[type='submit'].venera:hover {
        /*    background-color: @color-primary;
*/
        box-shadow: #282828 0.1rem 0.1rem 0.8rem;
    }

    .venera button:active,
    button.venera:active,
    .venera input[type='submit']:active,
    input[type='submit'].venera:active {
        background-color: #0150c1;
        box-shadow: #646464 0.1rem 0.1rem 0.1rem;
        transform: scale(0.9);
    }

    .venera form:invalid button,
    .venera button:invalid {
        pointer-events: none !important;
        opacity: 0.5 !important;
    }
/*#endregion*/
/*#region Select*/
.venera select,
select.venera {
    display: block;
    font-size: 1em;
    /*    font-weight: 700;
*/
    color: #646464;
    line-height: 1.3;
    padding: 6px 0.5em 6px 0.5em;
    width: fit-content;
    max-width: 100%;
    height: 2em;
    border: none;
    border-bottom: 1px solid #b4b4b4;
    box-shadow: 1px 1px 2px 0px #b4b4b4;
    /*    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
*/
    background-color: #fff;
}

    .venera select.required,
    .venera .input.required > select
    select.venera.required {
        border-bottom: 1px solid #ff5454;
    }

    .venera select:invalid,
    select.venera:invalid,
    .venera select.invalid,
    select.venera.invalid {
        border-bottom: 1px solid #fa1414;
    }

    .venera select::-ms-expand,
    select.venera::-ms-expand {
        display: none;
    }

    .venera select:hover,
    select.venera:hover {
        border-color: #3a87f3;
    }

    .venera select:focus,
    select.venera:focus {
        box-shadow: 0 0 5px 1px #71acff;
        /*    box-shadow: 0 0 0 3px -moz-mac-focusring;
*/
        color: #646464;
        outline: none;
    }

    .venera select option,
    select.venera option {
        font-weight: normal;
        display: block;
        color: #282828;
        border-left: solid 3px red;
        border-right: solid 3px red;
    }

        .venera select option:disabled,
        select.venera option:disabled {
            font-weight: normal;
            display: block;
            color: #28282860;
            opacity: 0.5;
            border-left: solid 3px red;
            border-right: solid 3px red;
        }
/*#endregion*/