.hbl-form-surface {
    --hbl-form-label: #122d50;
    --hbl-form-text: #122d50;
    --hbl-form-help: #6c757d;
    --hbl-form-placeholder: #8b95a8;
    --hbl-form-border: #dee2e6;
    --hbl-form-focus-border: #122d50;
    --hbl-form-focus-ring: rgba(18, 45, 80, 0.12);
    --hbl-form-bg: #ffffff;
    --hbl-form-disabled-bg: #f8f9fa;
    --hbl-form-disabled-border: #dee2e6;
    --hbl-form-disabled-text: #6c757d;
    --hbl-form-invalid-text: #dc3545;
}

.hbl-form-surface .form-group > label:not(.custom-control-label):not(.upload-file-block),
.hbl-form-surface .control-label,
.hbl-form-surface .form-label {
    color: var(--hbl-form-label);
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 0.35rem;
}

.hbl-form-surface .form-control:not(.hbl-search-input),
.hbl-form-surface .custom-select,
.hbl-form-surface .form-select {
    border-color: var(--hbl-form-border);
    border-radius: 8px;
    font-size: 14px;
    color: var(--hbl-form-text);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.hbl-form-surface .form-control:not(.hbl-search-input):focus,
.hbl-form-surface .custom-select:focus,
.hbl-form-surface .form-select:focus {
    border-color: var(--hbl-form-focus-border);
    box-shadow: 0 0 0 0.15rem var(--hbl-form-focus-ring);
}

.hbl-form-surface .help-block,
.hbl-form-surface .form-text {
    color: var(--hbl-form-help);
    font-size: 12px;
    margin-top: 0.35rem;
}

body.mod-skin-dark:not(.mod-skin-light) .hbl-form-surface {
    --hbl-form-label: #dfe7f2;
    --hbl-form-text: #dfe7f2;
    --hbl-form-help: #a0aec0;
    --hbl-form-placeholder: #8b95a8;
    --hbl-form-border: rgba(255, 255, 255, 0.12);
    --hbl-form-focus-border: rgba(241, 94, 34, 0.65);
    --hbl-form-focus-ring: rgba(241, 94, 34, 0.18);
    --hbl-form-bg: rgba(255, 255, 255, 0.06);
    --hbl-form-disabled-bg: rgba(255, 255, 255, 0.04);
    --hbl-form-disabled-border: rgba(255, 255, 255, 0.1);
    --hbl-form-disabled-text: #b0bac9;
    --hbl-form-invalid-text: #f8a5a5;
}

body.mod-skin-dark:not(.mod-skin-light) .hbl-form-surface .form-control:not(.hbl-search-input),
body.mod-skin-dark:not(.mod-skin-light) .hbl-form-surface .custom-select,
body.mod-skin-dark:not(.mod-skin-light) .hbl-form-surface .form-select {
    background-color: var(--hbl-form-bg);
    border-color: var(--hbl-form-border);
    color: var(--hbl-form-text);
}

body.mod-skin-dark:not(.mod-skin-light) .hbl-form-surface .form-control:not(.hbl-search-input):focus,
body.mod-skin-dark:not(.mod-skin-light) .hbl-form-surface .custom-select:focus,
body.mod-skin-dark:not(.mod-skin-light) .hbl-form-surface .form-select:focus {
    background-color: var(--hbl-form-bg);
    border-color: var(--hbl-form-focus-border);
    color: var(--hbl-form-text);
}

body.mod-skin-dark:not(.mod-skin-light) .hbl-form-surface .form-control:not(.hbl-search-input)::placeholder {
    color: var(--hbl-form-placeholder);
    opacity: 1;
}

body.mod-skin-dark:not(.mod-skin-light) .hbl-form-surface .form-control:not(.hbl-search-input)::-webkit-input-placeholder {
    color: var(--hbl-form-placeholder);
    opacity: 1;
}

body.mod-skin-dark:not(.mod-skin-light) .hbl-form-surface .form-control:not(.hbl-search-input)::-moz-placeholder {
    color: var(--hbl-form-placeholder);
    opacity: 1;
}

body.mod-skin-dark:not(.mod-skin-light) .hbl-form-surface .form-control:not(.hbl-search-input):-ms-input-placeholder {
    color: var(--hbl-form-placeholder);
    opacity: 1;
}

body.mod-skin-dark:not(.mod-skin-light) .hbl-form-surface .form-control:not(.hbl-search-input)::-ms-input-placeholder {
    color: var(--hbl-form-placeholder);
    opacity: 1;
}

body.mod-skin-dark:not(.mod-skin-light) .hbl-form-surface .form-control:not(.hbl-search-input):disabled,
body.mod-skin-dark:not(.mod-skin-light) .hbl-form-surface .form-control:not(.hbl-search-input)[readonly],
body.mod-skin-dark:not(.mod-skin-light) .hbl-form-surface .custom-select:disabled,
body.mod-skin-dark:not(.mod-skin-light) .hbl-form-surface .form-select:disabled {
    background-color: var(--hbl-form-disabled-bg);
    border-color: var(--hbl-form-disabled-border);
    color: var(--hbl-form-disabled-text);
    opacity: 1;
}

body.mod-skin-dark:not(.mod-skin-light) .hbl-form-surface .custom-select option,
body.mod-skin-dark:not(.mod-skin-light) .hbl-form-surface .form-select option {
    background-color: #2a2d36;
    color: var(--hbl-form-text);
}

body.mod-skin-dark:not(.mod-skin-light) .hbl-form-surface .invalid-feedback {
    color: var(--hbl-form-invalid-text);
}