/* Loader */
#loader {
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    z-index: 99999;
    transition: all 200ms ease;
}

    #loader .spinner-border {
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -15px;
    }

.theme-light #loader {
    background-color: #FFF;
}

.theme-dark #loader {
    background-color: #0f1117;
}

.theme-dark #loader {
    background-color: #0f1117;
}
/* Loader */


/* buttons in lists */
.list-custom-small button {
    color: #1f1f1f;
    font-weight: 500;
    font-size: 13px;
    border-bottom: solid 1px rgba(0, 0, 0, 0.05);
}

    .list-custom-small button i:first-child {
        margin-left: 0px;
        width: 30px;
        height: 30px;
        line-height: 30px;
        margin-top: 10px;
        text-align: center;
        float: left;
        margin-right: 10px;
    }

    .list-custom-small button i:last-child {
        float: right;
        font-size: 10px;
        opacity: 0.5;
    }

.menu .list-custom-small button i:first-child {
    margin-left: 6px;
}

.list-custom-large button {
    line-height: 70px;
    color: #1f1f1f;
    font-weight: 500;
    font-size: 13px;
    border-bottom: solid 1px rgba(0, 0, 0, 0.05);
}

    .list-custom-large button span:not(.badge) {
        font-size: 14px;
        position: absolute;
        margin-top: -6px;
    }

    .list-custom-large button strong {
        font-size: 7px;
        position: absolute;
        font-size: 11px;
        margin-top: 10px;
        color: #adb5bd;
        font-weight: 500;
    }

    .list-custom-large button i:first-child {
        width: 32px;
        height: 32px;
        line-height: 32px;
        margin-top: 21px;
        text-align: center;
        float: left;
        margin-right: 15px;
    }

    .list-custom-large button i:last-child {
        float: right;
        font-size: 10px;
    }


/* all vaadin inputs */
vaadin-text-field,
vaadin-email-field,
vaadin-password-field {
    --vaadin-input-field-error-font-size: 10px;
    --vaadin-input-field-error-font-weight: 500;
}
vaadin-text-area {
    --vaadin-text-area-error-font-size: 10px;
    --vaadin-text-area-error-font-weight: 500;
}

    vaadin-text-field,
    vaadin-email-field,
    vaadin-text-area,
    vaadin-password-field,
    vaadin-number-field,
    vaadin-date-picker,
    vaadin-time-picker,
    vaadin-date-time-picker {
        --vaadin-input-field-background: white !important;
        --vaadin-input-field-border-color: var(--bs-gray-200);
        --vaadin-input-field-border-width: 1px;
        --vaadin-input-field-border-style: solid;
        --vaadin-input-field-border-radius: 0.25rem;
        transition: border-color 0.2s;
    }
vaadin-text-area {
    --vaadin-text-area-background: white;
    --vaadin-text-area-border-color: var(--bs-gray-200);
    --vaadin-text-area-border-width: 1px;
    --vaadin-text-area-border-style: solid;
    --vaadin-text-area-border-radius: 0.25rem;
    transition: border-color 0.2s;
    font-size:12px;
}

    vaadin-text-area::part(input-field) {
        background-color: white;
        transition: border-color 0.2s;
    }
        vaadin-text-area::part(input-field):focus {
            background-color: white !important;
        }

/* custom input */
.tasq-input {
    position: relative;
}

    .tasq-input::part(label) {
        position: absolute;
        top: -2px;
        left: 1px;
        background: white;
        padding: 0px 10px 0px 3px;
        font-size: 12px;
        z-index: 1;
    }

    .tasq-input::part(required-indicator) {
        position: absolute;
        top: -4px;
        margin-left: 10px;
        font-size: 12px;
        z-index: 2;
    }

    .tasq-input::part(error-message) {
        font-size: 10px;
        z-index: 1;
        font-weight: 500;
        margin-top: 1px;
        opacity: 0;
        transform: translateY(-0.25rem);
        transition: opacity 150ms ease, transform 150ms ease;
    }

    .tasq-input[invalid]::part(error-message) {
        opacity: 1;
        transform: translateY(0);
    }

    .tasq-input::part(error-message)::before {
        height: 0px;
    }

    .tasq-input::part(error-message)::after {
        height: 18px;
    }


.tasq-input {
    --vaadin-input-field-placeholder-color: #b9b9b9;
    --vaadin-text-area-placeholder-color: #b9b9b9;
    --lumo-placeholder-opacity: 0.35;
    font-weight: 300;
}

/* Text */
.text-ellipsis {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

/* Buttons */

.btn-icon.btn-xxs i {
    line-height: 31px !important;
}