input[type=checkbox].checkbox-color-1 {
    background-color: rgba(var(--tblr-azure-rgb), .1) !important;
}

input[type=checkbox]:checked.checkbox-color-1 {
    background-color: rgba(var(--tblr-azure-rgb), 1) !important;
}

input[type=checkbox].checkbox-color-2 {
    background-color: rgba(var(--tblr-yellow-rgb), .1) !important;
}

input[type=checkbox]:checked.checkbox-color-2 {
    background-color: rgba(var(--tblr-yellow-rgb), 1) !important;
}

input[type=checkbox].checkbox-color-3 {
    --tblr-bg-opacity: .1;
    background-color: rgba(var(--tblr-green-rgb), var(--tblr-bg-opacity)) !important;
}

input[type=checkbox]:checked.checkbox-color-3 {
    background-color: rgba(var(--tblr-green-rgb), 1) !important;
}


.form-control:read-only {
    background-color: var(--tblr-bg-surface-secondary);
    opacity: 1;
}

.form-control:read-only {
    color: var(--tblr-body-color);
}

.input-group-text.readonly {
    background-color: var(--tblr-bg-surface-secondary) !important;
    opacity: 1;
}

.table, .markdown > table {
    --tblr-table-hover-bg: var(--tblr-bg-surface-secondary);
}

.table.table-sticky {
    border-collapse: separate;
    border-spacing: 0;
}

.table.table-sticky th.sticky-top,
.table.table-sticky td.sticky-top {
    /*width: 60px;*/
    position: sticky;
    top: 0;
}

.table.table-sticky th.sticky-end,
.table.table-sticky td.sticky-end {
    /*width: 60px;*/
    position: sticky;
    right: 0;
}

.table.table-sticky th.sticky-bottom,
.table.table-sticky td.sticky-bottom {
    /*width: 60px;*/
    position: sticky;
    bottom: 0;
}

.table.table-sticky th.sticky-start,
.table.table-sticky td.sticky-start {
    /*width: 60px;*/
    position: sticky;
    left: 0;
}

.progressbg-value {
    z-index: 1;
}

.text-vertical {
    writing-mode: vertical-rl;
    rotate: 180deg;
}

.table, .markdown > table {
    --tblr-table-bg: var(--tblr-bg-surface);
}

th.sticky-top::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    height: 100%;
    width: 100%;
    border-bottom: var(--tblr-border-width) solid var(--tblr-border-color-translucent);
}

.table thead.border-top tr th {
    border-top: var(--tblr-border-width) var(--tblr-border-style) rgba(4, 32, 69, 0.14) !important;
}


/* Custom adjustments for Tabler class */

.link-primary:hover, .link-primary:focus {
    color: RGBA(var(--tblr-primary-rgb), var(--tblr-link-opacity, 1)) !important;
    -webkit-text-decoration-color: RGBA(var(--tblr-primary-rgb), var(--tblr-link-underline-opacity, 1)) !important;
    text-decoration-color: RGBA(var(--tblr-primary-rgb), var(--tblr-link-underline-opacity, 1)) !important;
}

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

.form-select:focus {
    border-color: var(--tblr-primary);
}


/* borders additional styles */

.border-solid {
    border-style: solid !important;
}

.border-top-primary {
    --tblr-border-opacity: 1;
    border-top-color: rgba(var(--tblr-primary-rgb), var(--tblr-border-opacity)) !important;
}

.border-end-primary {
    --tblr-border-opacity: 1;
    border-right-color: rgba(var(--tblr-primary-rgb), var(--tblr-border-opacity)) !important;
}

.border-bottom-primary, tr td.border-bottom-primary {
    --tblr-border-opacity: 1;
    border-bottom-color: rgba(var(--tblr-primary-rgb), var(--tblr-border-opacity)) !important;
}

.border-start-primary {
    --tblr-border-opacity: 1;
    border-left-color: rgba(var(--tblr-primary-rgb), var(--tblr-border-opacity)) !important;
}

@media print {
    .page-break-before {
        page-break-before: always;
    }

    .page-break-after {
        page-break-after: always;
    }

    .no-print {
        display: none;
    }
}


/*
 * Textarea auto size
 *
 * Copied from https://css-tricks.com/the-cleanest-trick-for-autogrowing-textareas/
 */

.grow-wrap {
    /* easy way to plop the elements on top of each other and have them both sized based on the tallest one's height */
    display: grid;
}

.grow-wrap::after {
    /* Note the weird space! Needed to preventy jumpy behavior */
    content: attr(data-replicated-value) " ";

    /* This is how textarea text behaves */
    white-space: pre-wrap;

    /* Hidden from view, clicks, and screen readers */
    visibility: hidden;

    word-wrap: anywhere;

    border: 1px solid black;
}

.grow-wrap > textarea {
    /* You could leave this, but after a user resizes, then it ruins the auto sizing */
    resize: none;

    /* Firefox shows scrollbar on growth, you can hide like this. */
    overflow: hidden;
}

.grow-wrap > textarea,
.grow-wrap::after {
    /* Identical styling required!! */
    padding: .5625rem .75rem;
    font: inherit;

    /* Place on top of each other */
    grid-area: 1 / 1 / 2 / 2;
}

.grow-wrap:has(.form-control.is-invalid)::after {
    padding-right: calc(1.4285714286em + 1.125rem);
}

.cell-expand {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
}

.cell-expand::before {
    content: '';
    position: absolute;
    inset: 0;
    /*left: 0;*/
}