.form-group .form-control-label {
    font-size: var(--form-control-label-font-size);
}

.h-form-label {
    font-size: var(--form-control-label-font-size);
    font-weight: bold;
    padding: var(--form-control-padding-y) 0;
    min-height: calc(var(--form-control-line-height) + (var(--form-control-padding-y) + var(--form-control-border-width)) * 2);
}

.form-check,
.form-control {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    padding: var(--form-control-padding-y) var(--form-control-padding-x);
    min-height: calc(var(--form-control-line-height) + (var(--form-control-padding-y) + var(--form-control-border-width)) * 2);
    border: var(--form-control-border-width) solid var(--form-control-border-color);
    background-clip: padding-box;
    line-height: var(--form-control-line-height);
    transition: all 300ms;
    font-size: var(--form-control-font-size);
}

.form-check > .control,
.form-control > .control {
    display: block;
    width: 100%;
    outline: 0;
    border: 0;
    color: var(--form-control-color, var(--text-color));
    padding: 0;
}

.form-check > .control:not(.v-select),
.form-control > .control:not(.v-select) {
    z-index: 1;
}

.form-check > .control:not(:last-child),
.form-control > .control:not(:last-child) {
    padding-right: var(--form-control-padding-x);
}

.form-check > .control:focus,
.form-control > .control:focus {
    outline: 0;
}

.form-check > .control::-ms-expand,
.form-control > .control::-ms-expand {
    background-color: transparent;
    border: 0;
}

.form-check > .control::placeholder,
.form-control > .control::placeholder {
    opacity: 1;
}

.form-check > .control:disabled, .form-check > .control[readonly],
.form-control > .control:disabled,
.form-control > .control[readonly] {
    opacity: 1;
    background-color: transparent;
}

.form-check::before,
.form-control::before {
    transition: all 300ms;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 0;
}

.form-check[disabled], .form-check.disabled,
.form-control[disabled],
.form-control.disabled {
    background-color: var(--form-control-disabled-bg);
}

.form-control:focus,
.form-group.focus .form-control {
    outline: 0;
    border-color: transparent;
}

.form-control:focus::before,
.form-group.focus .form-control::before {
    box-shadow: 0 0 0 var(--form-control-border-width-focus) var(--form-control-border-color-focus);
}

.form-control {
    color: var(--form-control-color, var(--text-color));
    background-color: var(--form-control-bg-color, transparent);
}

.form-control .control {
    background-color: var(--form-control-bg-color, transparent);
}

div.form-control.form-textarea {
    height: auto;
    align-items: flex-start;
}

.form-check {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    border: 0;
    user-select: none;
    padding-left: var(--form-control-border-width);
    box-shadow: none !important;
}

.form-check input {
    display: inline-block;
    margin-right: var(--form-control-separator);
}

.form-file {
    z-index: 1;
}

.form-file input {
    position: absolute;
    height: 0;
    width: 0;
    opacity: 0;
}

input[type=date].form-control,
input[type=time].form-control,
input[type=datetime-local].form-control,
input[type=month].form-control {
    appearance: none;
}

.form-control-file,
.form-control-range {
    display: block;
    width: 100%;
}

select.form-control[size], select.form-control[multiple] {
    height: auto;
}

textarea.control,
textarea.form-control {
    min-height: 3rem;
    height: auto;
}

.form-control.danger, .form-control.error {
    --form-control-color: var(--color-danger);
    --form-control-border-color-focus: var(--color-danger);
    --form-control-border-color: var(--color-danger);
}

.form-control.success {
    --form-control-color: var(--color-success);
    --form-control-border-color: var(--color-success);
    --form-control-border-color-focus: var(--color-success);
}

.form-control.warning {
    --form-control-color: var(--color-warning);
    --form-control-border-color: var(--color-warning);
    --form-control-border-color-focus: var(--color-warning);
}

.form-control-xs {
    --form-control-padding-x: var(--form-control-xs-padding-x);
    --form-control-padding-y: var(--form-control-xs-padding-y);
    --form-control-line-height: var(--form-control-xs-line-height);
    --form-control-font-size: var(--form-control-xs-font-size);
    --form-control-border-width: var(--form-control-xs-border-width);
    --form-control-border-width-focus: var(--form-control-xs-border-width-focus);
}

.form-control-sm {
    --form-control-padding-x: var(--form-control-sm-padding-x);
    --form-control-padding-y: var(--form-control-sm-padding-y);
    --form-control-line-height: var(--form-control-sm-line-height);
    --form-control-font-size: var(--form-control-sm-font-size);
    --form-control-border-width: var(--form-control-sm-border-width);
    --form-control-border-width-focus: var(--form-control-sm-border-width-focus);
}

.form-control-lg {
    --form-control-padding-x: var(--form-control-lg-padding-x);
    --form-control-padding-y: var(--form-control-lg-padding-y);
    --form-control-line-height: var(--form-control-lg-line-height);
    --form-control-font-size: var(--form-control-lg-font-size);
    --form-control-border-width: var(--form-control-lg-border-width);
    --form-control-border-width-focus: var(--form-control-lg-border-width-focus);
}

.form-control-xl {
    --form-control-padding-x: var(--form-control-xl-padding-x);
    --form-control-padding-y: var(--form-control-xl-padding-y);
    --form-control-line-height: var(--form-control-xl-line-height);
    --form-control-font-size: var(--form-control-xl-font-size);
    --form-control-border-width: var(--form-control-xl-border-width);
    --form-control-border-width-focus: var(--form-control-xl-border-width-focus);
}

.form-control-xxl {
    --form-control-padding-x: var(--form-control-xxl-padding-x);
    --form-control-padding-y: var(--form-control-xxl-padding-y);
    --form-control-line-height: var(--form-control-xxl-line-height);
    --form-control-font-size: var(--form-control-xxl-font-size);
    --form-control-border-width: var(--form-control-xxl-border-width);
    --form-control-border-width-focus: var(--form-control-xxl-border-width-focus);
}

.form-group.form-control-floating {
    border-radius: 0 !important;
}

.form-group.form-control-floating .form-control-label {
    transition: transform 300ms;
    display: inline-block;
    --translate-x: calc(var(--form-control-padding-x));
    --translate-y: calc(var(--form-control-line-height) + var(--form-control-padding-y));
    transform: translate(var(--translate-x), var(--translate-y));
}

.form-group.form-control-floating.has-icon .form-control-label {
    --translate-x: calc(var(--form-control-padding-x) + 1em);
    --translate-y: calc(var(--form-control-line-height) + var(--form-control-padding-y));
    transform: translate(var(--translate-x), var(--translate-y));
}

.form-group.form-control-floating .form-control {
    border-radius: 0 !important;
    border-top: 0;
    border-left: 0;
    border-right: 0;
}

.form-group.form-control-floating .form-control::before {
    transition: all 300ms;
    content: "";
    position: absolute;
    top: auto;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 0;
    box-shadow: 0 0 0 1px var(--form-control-border-color-focus);
    transform-origin: center;
    transform: scaleX(0);
}

.form-group.form-control-floating .form-control:focus::before, .form-group.form-control-floating .form-control.focus::before {
    transform: scaleX(1);
}

.form-group.form-control-floating.has-data .form-control-label, .form-group.form-control-floating.focus .form-control-label {
    transform: none;
}

.form-group.form-control-floating.has-data .form-control::before, .form-group.form-control-floating.focus .form-control::before {
    transform: scaleX(1);
}


.select-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--color-bg-1);
    z-index: 1000;

    min-width: 100%;
    padding: 0.5rem 0;
    margin: 0.125rem 0 0;
    list-style: none;

    max-height: 200px; /* Set the maximum height */
    overflow-y: auto; /* Enable vertical scrolling */
}

.select-dropdown.has-scroll[data-v-9903a56d]::before,
.select-dropdown.has-scroll[data-v-9903a56d]::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 10px;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), transparent);
}

.select-dropdown.has-scroll[data-v-9903a56d]::after {
    bottom: 0;
    top: auto;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.1), transparent);
}

.dropdown-item.highlighted[data-v-9903a56d] {
    background-color: var(--color-primary);
    color: var(--color-primary-contrast);
}

.dropdown-item > span[data-v-9903a56d] {
    pointer-events: none;
}