.table {
    --bs-table-bg: var(--card-color);
    --bs-table-color-state: var(--font-color);
    color: var(--font-color) !important;

}

@mixin filter-scrollbar-mixin {
    &::-webkit-scrollbar {
        width: 5px;
    }

    &::-webkit-scrollbar-track {
        background: var(--base-color);
    }

    &::-webkit-scrollbar-thumb {
        border-radius: 5px;
        background: var(--primary);
    }
}

.datatable-wrapper {
    .filters-wrapper {
        .filters {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            border-radius: 10px;
            background-color: var(--card-color);

            .filter {
                border-radius: 10px;
                background-color: var(--base-color);

                .btn-filter,
                .dropdown-toggle {
                    padding: 0.4rem 1.25rem;
                    color: var(--font-color);
                    cursor: pointer;
                    border-radius: var(--round-default);
                    border: 1px solid var(--border-color);

                    &:after {
                        display: none;
                    }
                }

                .dropdown {
                    .dropdown-toggle {
                        &:after {
                            display: none;
                        }
                    }

                    .dropdown-menu {
                        min-width: 250px;
                        padding: 0.75rem 1.2rem;
                    }
                }

                &.checkbox-filter {
                    .dropdown {
                        .dropdown-menu {
                            overflow-y: auto;
                            max-height: 270px;
                        }
                    }
                }

                &.\radio-filter {
                    .dropdown {
                        .dropdown-menu {
                            overflow-y: auto;
                            max-height: 270px;
                        }
                    }
                }

                &.date-range-filter {
                    border-radius: $default-radius;

                    input:not(.form-check-input) {
                        border: 0;
                        padding: 0.4rem 1.25rem;
                        color: var(--font-color);
                        border-radius: $default-radius;
                        background-color: var(--base-color);

                        &:focus {
                            outline: none;
                        }
                    }
                }
            }
        }
    }

    .footer-paginate {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;

        .right-portion {
            column-gap: 15px;

            .pages-infos {
                display: flex;
                column-gap: 15px;

                .items {
                    label {
                    }

                    .page-input {
                        height: 34px;
                        width: 72px;
                        text-align: center;
                        border: 1px solid lightgrey;
                        border-radius: 3px;
                        font-size: 13px;
                        background: var(--card-color);
                        color: var(--font-color);
                        font-size: 13px;
                        padding: 0px 4px;

                        &:focus {
                            border-color: var(--primary);
                        }

                        &::-webkit-outer-spin-button {
                            -webkit-appearance: none;
                            margin: 0;
                        }

                        &::-webkit-inner-spin-button {
                            margin: 0;
                            -webkit-appearance: none;
                        }
                    }
                }
            }
        }
    }

    .data-wrapper {
        .table-responsive {
            min-height: 400px;
            border-radius: $default-radius;
            background-color: var(--card-color);
            max-width: 100%;
            .table {
                border: 0;
                margin: 0;
                color: var(--font-color);
                font-size: $default-font-size;

                > :not(caption) > * > * {
                    border-bottom-width: 0;
                }

                thead {
                    tr {
                        th {
                            background-color: var(--table-thead-bg-color);
                            border: none !important;
                            font-weight: 600;
                            padding: $default-padding-margin;
                            color: var(--table-th-font-color);
                        }
                    }
                }

                tbody {
                    tr {
                        th,
                        td {
                            border-left: 0;
                            border-right: 0;
                            vertical-align: middle;
                            padding: $default-padding-margin;
                            border-color: var(--border-color);
                        }
                    }
                }

                .row-check {
                    padding: 0;
                    margin-bottom: 0;
                    min-height: initial;

                    .form-check-input {
                        margin: 0;
                    }
                }

                &.table-striped {
                    > tbody > tr:nth-of-type(odd) > * {
                        --bs-table-accent-bg: var(--table-striped-bg);
                        color: var(--font-color);
                    }
                }
            }
        }
    }
}

.calendar-root {
    .input-date {
        font-size: 95%;
        cursor: pointer;
        border-radius: var(--round-default);
        color: #8a8a8a;
        padding: 0.5rem 1.5rem;
        background: var(--btn-filter-bg);
        box-shadow: var(--default-box-shadow);
        border: 1px solid var(--btn-filter-bg) !important;

        &:hover {
            border-radius: var(--round-default);
            color: var(--primary);
            background: var(--base-color);
        }

        &.applied {
            color: var(--primary);
            background: var(--base-color);
        }
    }

    .months-text {
        text-align: center;
        font-weight: bold;
        color: #8a8a8a;

        .left {
            float: left;
            width: 16px;
            height: 16px;
            cursor: pointer;
            background-image: url("data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMS4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDMxLjQ5NCAzMS40OTQiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDMxLjQ5NCAzMS40OTQ7IiB4bWw6c3BhY2U9InByZXNlcnZlIiB3aWR0aD0iMTZweCIgaGVpZ2h0PSIxNnB4Ij4KPHBhdGggZD0iTTEwLjI3Myw1LjAwOWMwLjQ0NC0wLjQ0NCwxLjE0My0wLjQ0NCwxLjU4NywwYzAuNDI5LDAuNDI5LDAuNDI5LDEuMTQzLDAsMS41NzFsLTguMDQ3LDguMDQ3aDI2LjU1NCAgYzAuNjE5LDAsMS4xMjcsMC40OTIsMS4xMjcsMS4xMTFjMCwwLjYxOS0wLjUwOCwxLjEyNy0xLjEyNywxLjEyN0gzLjgxM2w4LjA0Nyw4LjAzMmMwLjQyOSwwLjQ0NCwwLjQyOSwxLjE1OSwwLDEuNTg3ICBjLTAuNDQ0LDAuNDQ0LTEuMTQzLDAuNDQ0LTEuNTg3LDBsLTkuOTUyLTkuOTUyYy0wLjQyOS0wLjQyOS0wLjQyOS0xLjE0MywwLTEuNTcxTDEwLjI3Myw1LjAwOXoiIGZpbGw9IiMwMDZERjAiLz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPC9zdmc+Cg==");
        }

        .right {
            float: right;
            width: 16px;
            height: 16px;
            cursor: pointer;
            background-image: url("data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMS4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDMxLjQ5IDMxLjQ5IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAzMS40OSAzMS40OTsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHdpZHRoPSIxNnB4IiBoZWlnaHQ9IjE2cHgiPgo8cGF0aCBkPSJNMjEuMjA1LDUuMDA3Yy0wLjQyOS0wLjQ0NC0xLjE0My0wLjQ0NC0xLjU4NywwYy0wLjQyOSwwLjQyOS0wLjQyOSwxLjE0MywwLDEuNTcxbDguMDQ3LDguMDQ3SDEuMTExICBDMC40OTIsMTQuNjI2LDAsMTUuMTE4LDAsMTUuNzM3YzAsMC42MTksMC40OTIsMS4xMjcsMS4xMTEsMS4xMjdoMjYuNTU0bC04LjA0Nyw4LjAzMmMtMC40MjksMC40NDQtMC40MjksMS4xNTksMCwxLjU4NyAgYzAuNDQ0LDAuNDQ0LDEuMTU5LDAuNDQ0LDEuNTg3LDBsOS45NTItOS45NTJjMC40NDQtMC40MjksMC40NDQtMS4xNDMsMC0xLjU3MUwyMS4yMDUsNS4wMDd6IiBmaWxsPSIjMDA2REYwIi8+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=");
        }
    }

    .calendar {
        z-index: 9;
        width: 730px;
        margin-top: 5px;
        background: var(--calendar-bg);
        position: absolute;
        left: 0;
        top: 100%;
        display: inline-block;
        box-sizing: border-box;
        border-radius: var(--round-default);
        box-shadow: var(--box-shadow);

        ul {
            list-style-type: none;
        }

        .calendar-wrap {
            width: 72%;
            float: left;
            font-size: 12px;
            display: inline-block;
            padding: 0 10px 10px 10px;

            .calendar_month_left,
            .calendar_month_right {
                width: 48%;
                margin: 5px;
                float: left;
                padding: 10px;
            }
        }

        .clearfix {
            border-bottom: 1px solid var(--default-border-color);
        }

        .calendar-range {
            float: left;
            font-size: 12px;
            border-left: 1px solid var(--border-color);

            .calendar_preset {
                padding: 0;

                li {
                    line-height: 1.6em;
                    width: auto;
                    display: block;
                    margin: 15px 0 !important;

                    &.calendar_preset-ranges {
                        padding: 0 15px 0 20px;
                        margin-bottom: 5px;
                        cursor: pointer;
                        margin-top: 1px;
                    }
                }
            }
        }

        .calendar-left-mobile {
            width: 100% !important;
        }

        .calendar_weeks {
            margin: 0;
            padding: 10px 0;
            width: auto;

            li {
                width: 13.6%;
                text-align: center;
                display: inline-block;
                color: #8a8a8a;
            }
        }

        .calendar_days {
            margin: 0;
            padding: 0;

            li {
                width: 13.6%;
                cursor: pointer;
                line-height: 2em;
                text-align: center;
                display: inline-block;
                color: #8a8a8a;
            }
        }

        .custom-radio {
            .custom-control-label {
                &:before {
                    transform: scale(1.3);
                }

                &:after {
                    transform: scale(1.4);
                }
            }
        }

        .calendar_days {
            li {
                &:hover {
                    background: var(--base-color);
                    color: #8a8a8a;
                }
            }
        }

        li {
            &.calendar_days--disabled {
                pointer-events: none;
            }

            &.calendar_days_selected {
                background: var(--primary);
                color: white;

                &:hover {
                    background-color: lighten($primary, 2);
                    color: white;
                }
            }

            &.calendar_days_in-range {
                background-color: lighten($primary, 5);
                color: white;

                &:hover {
                    background-color: lighten($primary, 3);
                    color: white;
                }
            }
        }

        .calendar-mobile {
            width: 260px;
            z-index: 1;
            box-shadow: none;
        }

        .calendar-range-mobile {
            width: 90%;
            padding: 2px;
            border-left: none;
            margin: -20px 0;
        }

        .filter-action-button-wrapper {
            padding: 2rem;
            font-size: 95%;

            .btn-clear {
                color: #9397a0;

                &:hover {
                    color: var(--default-font-color);
                }
            }
        }

        /*
      radio button from preset-range filter is replaced with span element &
      button of [clear] is replaced with div
      we also need these styling
    */
        .preset-active-input > .custom-control-label::before {
            color: white;
            background-color: white;
            border-color: var(--primary);
        }

        .preset-active-input > .custom-control-label::after {
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='blue'/%3e%3c/svg%3e");
        }

        .selected:after {
            content: none !important;
        }
    }
}

// Context menu popup
.context-menu-popup {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    animation-name: fadeIn;
    animation-duration: 0.4s;
    -webkit-animation-name: fadeIn;
    -webkit-animation-duration: 0.4s;

    .context-menu-content {
        display: flex;
        align-items: center;
        padding: 0.7rem 1rem;
        border-radius: 30px;
        position: fixed;
        left: 50%;
        transform: translateX(-50%);
        bottom: $default-padding-margin;
        animation-name: slideIn;
        animation-duration: 0.4s;
        -webkit-animation-name: slideIn;
        -webkit-animation-duration: 0.4s;
        box-shadow: var(--box-shadow);
        background-color: var(--primary);

        .btn-context {
            border: 0;
            font-size: 13px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 30px;
            padding: 0.45rem 1.35rem;
            color: darken(#fff, 5%);
            background-color: lighten($primary, 10%);

            &.dropdown-toggle {
                &:after {
                    display: none;
                }
            }
        }

        .btn-close-popup {
            position: absolute;
            top: -11px;
            right: -1px;
            padding: 0;
            color: gray;
            width: 22px;
            height: 22px;
            font-size: 16px;
            line-height: initial;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            border-radius: 50%;
            box-shadow: var(--box-shadow);
            background-color: var(--base-color);
            border: 1px solid var(--border-color);
            transition: all 0.3s ease-in-out;

            &:hover {
                color: #fff;
                background-color: var(--primary);
            }
        }
    }
}

// Animate popup
@-webkit-keyframes slideIn {
    from {
        bottom: -300px;
        opacity: 0;
    }

    to {
        bottom: $default-padding-margin;
        opacity: 1;
    }
}

@keyframes slideIn {
    from {
        bottom: -300px;
        opacity: 0;
    }

    to {
        bottom: $default-padding-margin;
        opacity: 1;
    }
}

@-webkit-keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.search-and-filter-btn{
    height: 43px;
    max-height: 43px;
    min-height: 43px;
}
