:host,
:root {
    margin-left: 0 !important;
}

/* xs: phone - portrait */
/* default. no media */

/* button */
.btn-with-icon {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    line-height: 1;
}
.btn-with-icon i {
    font-size: 1.5rem;
}

/* toastr */
.toast.toast-success {
    background-color: var(--tblr-green);
}
.toast.toast-error {
    background-color: var(--tblr-red);
}
.toast.toast-warning {
    background-color: var(--tblr-yellow);
}
.toast.toast-info {
    background-color: var(--tblr-azure);
}

/* datatable */
.datatable-custom .table {
    width: 100%;
}
.datatable-custom .table thead th {
    white-space: nowrap;
}
.datatable-custom .datatable-btn-actions .btn-action {
    display: inline-block;
    padding-inline: 2px;
}
.datatable-custom .datatable-btn-actions .btn-action > i {
    color: var(--tblr-blue);
    font-size: 1.25rem;
}
.datatable-custom .datatable-btn-actions .btn-action:hover > i {
    color: var(--tblr-dark);
}
.datatable-custom-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 10px 8px
}
.datatable-custom-header .dataTables_length > label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.datatable-custom-header .dataTables_filter > label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.datatable-custom-footer {
    background-color: var(--tblr-bg-surface-tertiary);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 6px 8px
}

/* sm: phone - landscape */
@media (min-width: 576px) {}

/* md: tablet */
@media (min-width: 768px) {}

/* lg: desktop */
@media (min-width: 992px) {}

/* xl: wide */
@media (min-width: 1200px) {}

/* super wide */
@media (min-width: 1440px) {}

/* ultra wide */
@media (min-width: 2560px) {}