{{-- Global Line / Square input style (InputStyle from My Profile) --}}
@php
    $vnGlobalInputStyleClass = function_exists('userGlobalInputStyleClass')
        ? userGlobalInputStyleClass()
        : 'vn-input-line';
@endphp
<style>
/* Square = boxed fields; Line = theme underline default */
html.vn-input-square .form-control,
body.vn-input-square .form-control,
html.vn-input-square .custom-select,
body.vn-input-square .custom-select,
html.vn-input-square textarea.form-control,
body.vn-input-square textarea.form-control {
    border: 1px solid #ced4da !important;
    border-top-width: 1px !important;
    border-right-width: 1px !important;
    border-bottom-width: 1px !important;
    border-left-width: 1px !important;
    border-radius: 4px !important;
    background-color: #fff !important;
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
    box-shadow: none;
}
html.vn-input-square .form-control:focus,
body.vn-input-square .form-control:focus,
html.vn-input-square .custom-select:focus,
body.vn-input-square .custom-select:focus,
html.vn-input-square textarea.form-control:focus,
body.vn-input-square textarea.form-control:focus {
    border-color: #80bdff !important;
    outline: 0;
    box-shadow: 0 0 0 0.15rem rgba(0, 123, 255, 0.18);
    background-color: #fff !important;
}
html.vn-input-square .form-control:disabled,
body.vn-input-square .form-control:disabled,
html.vn-input-square .form-control[readonly],
body.vn-input-square .form-control[readonly] {
    background-color: #f8f9fa !important;
    border-style: solid !important;
    border-color: #ced4da !important;
    color: #495057 !important;
}
html.vn-input-square select.form-control,
body.vn-input-square select.form-control {
    padding-right: 1.6rem !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23495057' d='M1.4.6L6 5.2 10.6.6 12 2 6 8 0 2z'/%3E%3C/svg%3E");
    background-position: right 0.45rem center;
    background-repeat: no-repeat;
    background-size: 10px 7px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
html.vn-input-square .input-group > .form-control,
body.vn-input-square .input-group > .form-control,
html.vn-input-square .input-group > .custom-select,
body.vn-input-square .input-group > .custom-select {
    border-radius: 0 !important;
}
html.vn-input-square .input-group > .form-control:first-child,
body.vn-input-square .input-group > .form-control:first-child,
html.vn-input-square .input-group > .custom-select:first-child,
body.vn-input-square .input-group > .custom-select:first-child,
html.vn-input-square .input-group > .input-group-prepend:first-child > .input-group-text,
body.vn-input-square .input-group > .input-group-prepend:first-child > .input-group-text,
html.vn-input-square .input-group > .input-group-prepend:first-child > .btn,
body.vn-input-square .input-group > .input-group-prepend:first-child > .btn {
    border-top-left-radius: 4px !important;
    border-bottom-left-radius: 4px !important;
}
html.vn-input-square .input-group > .form-control:last-child,
body.vn-input-square .input-group > .form-control:last-child,
html.vn-input-square .input-group > .custom-select:last-child,
body.vn-input-square .input-group > .custom-select:last-child,
html.vn-input-square .input-group > .input-group-append:last-child > .input-group-text,
body.vn-input-square .input-group > .input-group-append:last-child > .input-group-text,
html.vn-input-square .input-group > .input-group-append:last-child > .btn,
body.vn-input-square .input-group > .input-group-append:last-child > .btn {
    border-top-right-radius: 4px !important;
    border-bottom-right-radius: 4px !important;
}
html.vn-input-square .input-group-text,
body.vn-input-square .input-group-text {
    border: 1px solid #ced4da !important;
    background-color: #f1f5f8 !important;
    border-radius: 0;
    color: #495057;
}
html.vn-input-square .input-group .form-control,
body.vn-input-square .input-group .form-control {
    border-left-width: 0 !important;
}
html.vn-input-square .input-group > .input-group-prepend + .form-control,
body.vn-input-square .input-group > .input-group-prepend + .form-control {
    border-left-width: 0 !important;
}
html.vn-input-square .input-group > .form-control:first-child,
body.vn-input-square .input-group > .form-control:first-child {
    border-left-width: 1px !important;
}
html.vn-input-square .select2-container--default .select2-selection--single,
body.vn-input-square .select2-container--default .select2-selection--single,
html.vn-input-square .select2-container--default .select2-selection--multiple,
body.vn-input-square .select2-container--default .select2-selection--multiple {
    border: 1px solid #ced4da !important;
    border-radius: 4px !important;
    min-height: 2rem;
    background-color: #fff !important;
}
html.vn-input-square .select2-container--default .select2-selection--single .select2-selection__rendered,
body.vn-input-square .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 1.9rem !important;
    padding-left: 0.5rem !important;
}
html.vn-input-square .select2-container--default .select2-selection--single .select2-selection__arrow,
body.vn-input-square .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 1.9rem !important;
}
html.vn-input-square .bootstrap-select > .dropdown-toggle,
body.vn-input-square .bootstrap-select > .dropdown-toggle {
    border: 1px solid #ced4da !important;
    border-radius: 4px !important;
    background-color: #fff !important;
}
</style>
<script>
(function () {
    var styleClass = @json($vnGlobalInputStyleClass);
    var classes = ['vn-input-line', 'vn-input-square'];
    function applyInputStyleClass(target) {
        if (!target || !target.classList) return;
        classes.forEach(function (c) { target.classList.remove(c); });
        if (styleClass) target.classList.add(styleClass);
    }
    applyInputStyleClass(document.documentElement);
    function applyToBody() {
        applyInputStyleClass(document.body);
    }
    if (document.body) {
        applyToBody();
    } else {
        document.addEventListener('DOMContentLoaded', applyToBody);
    }
    window.applyGlobalInputStyleClass = function (style) {
        styleClass = (style === 'square') ? 'vn-input-square' : 'vn-input-line';
        applyInputStyleClass(document.documentElement);
        applyInputStyleClass(document.body);
    };
})();
</script>