.bs-5 {
    @import "~bootstrap/scss/bootstrap";

    mark {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    // Do not alter header colour on expand:
    .accordion-button:not(.collapsed) {
        background-color: var(--bs-accordion-btn-bg);
        color: var(--bs-accordion-color);
    }

    .datagrid-container:has(.loader) {
        position: relative;
    }

    .loader {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: rgba(0, 0, 0, .3);
        z-index: 1;
    }

    a.action.export_csv {
        color: var(--green);
    }

    a.action.export_csv:hover {
        color: #ffffff;
    }

    .pagination li.page-item .page-link {
        color: var(--green);
    }

    .pagination li.page-item.active .page-link {
        background-color: var(--green);
        color: #ffffff;
    }

    .alert {
        padding: 0.6em 1.5em 0.7em 3em !important;
    }

    .filters-wrapper {
        overflow-x: hidden;

        .btn-reset::before {
            content: "↻";
            display: inline-block;
            margin-right: 0.3rem;
        }

        .btn-reset {
            border-radius: 0.35rem !important;
            min-width: 90px;
        }

        .input-group-custom {
            width: unset !important;

            input[type=text] {
                width: unset !important;
                max-width: 100% !important;
            }

            .btn-search {
                border-radius: 0 0.35rem 0.35rem 0;
            }

        }

        .btn-dateRange {
            display: flex;
            white-space: nowrap;
            align-items: center;
            padding: 0 15px;
            border-radius: 0.3em;
            animation-duration: 0.4s;
            transition-duration: 0.4s;
            border: unset;

            .ui-icon-calendar {
                background-image: url("../../Web/Static/Icons/ui/ux2/appbar-calendar-green.png");
                width: 40px;
                height: 40px;
                background-position: center;
                vertical-align: middle;
                transform: scale(0.5);
                margin: -8px -4px -8px -8px;
            }
        }

        .btn-dateRange:hover > .ui-icon-calendar {
            background-image: url("../../Web/Static/Icons/ui/ux2/appbar-calendar.png");
        }

        @media screen and (max-width: 600px) {
            .btn-dateRange {
                padding: 0 5px;
            }
        }

        @media screen and (max-width: 576px) {
            .input-group-custom {
                width: 100% !important;

                input[type=text] {
                    width: 100% !important;
                }
            }
        }
    }

    .tippy-body {
        padding: 0 15px 15px 15px;
    }

    .action-icon img {
        max-width: unset;
    }

    .col-width-10 {
        width: 10%;
    }

}

:root * {
    @extend :root;
}

.ui-datepicker {
    z-index: 9999 !important;
}
:is(input.react_element_select__input):focus {
    outline: none !important;
}

.bs-5 a {
    color: var(--green);
}

// todo rcp Associate with component
