/* ****** ****** ****** ****** ****** ****** ****** ****** ****** ****** ****** ****** ****** */
/* ****** ****** ****** ****** ****** ******  root  ****** ****** ****** ****** ****** ****** */
body {
    background-image: var(--disarm-body-background);
    color: var(--disarm-body-color);
}

.dropdown-menu {
    background-color: var(--disarm-nav-dropdown-menu-background);
    border: var(--disarm-nav-dropdown-menu-border);
    box-shadow: var(--disarm-nav-dropdown-menu-box-shadow);

    min-width: max-content;
    padding: 12px;
    border-radius: .75rem;

    .dropdown-item:first-child {
        margin-top: 0;
    }

    .dropdown-item:hover {
        background-color: var(--disarm-nav-dropdown-menu-item-hover-background);
        text-shadow: var(--disarm-text-shadow);
        color: var(--disarm-nav-dropdown-menu-item-hover-color);
    }

    .dropdown-item {
        color: var(--disarm-nav-dropdown-menu-item-color);
        display: flex !important;
        align-items: center;
        font-size: 14px;
        padding: 8px 12px !important;
        margin: 4px 0 0;
        border-radius: .5rem;

        i.bi.bi-circle-fill {
            font-size: 8px;
            margin-right: 12px;
        }

        input[type='checkbox'] {
            margin-right: 8px;
        }

        cursor: pointer;
    }

    .dropdown-divider {
        border-top-color: var(--disarm-default-light-border-color-2);
    }
}

.card {
    background-color: var(--disarm-default-background-1);
}

/* ****** ****** ****** ****** ****** ****** ****** ****** ****** ****** ****** ****** ****** */
/* ****** ****** ****** ****** ****** ******  wrap  ****** ****** ****** ****** ****** ****** */

.navbar, .dropdown-list-bar-wrap, .tool-bar-wrap, .body-container-wrap {
    position: relative;
    padding: 16px 24px;
    margin: 16px auto 24px;
}

.navbar, .dropdown-list-bar-wrap, .tool-bar-wrap, .body-container-wrap, .body-footer {
    border: var(--disarm-wrap-border);
    box-shadow: var(--disarm-wrap-box-shadow);
}

.dropdown-list-bar-wrap, .tool-bar-wrap, .body-container-wrap, .body-footer {
    border-radius: .75rem;
}

.navbar {
    border: var(--disarm-nav-wrap-border);
    background-color: var(--disarm-nav-wrap-background);
    background-image: var(--disarm-nav-wrap-background-image);

    border-radius: 1rem;
    display: flex;
    justify-content: space-between;

    .top-logo:hover {
        color: inherit;
        text-decoration: none;
    }

    .top-logo {
        display: flex;
        align-items: center;

        i {
            color: var(--disarm-top-logo-icon-color);
            background-image: var(--disarm-top-logo-icon-background);
            box-shadow: var(--disarm-top-logo-icon-box-shadow);

            font-size: 1.5rem;
            border-radius: .75rem;
            padding: 8px;
        }

        .navbar-brand {
            display: block;
            margin: -6px 0 0 2px;
            padding: 0;

            .logo {
                background: var(--disarm-top-logo-image);

                width: 120px;
                height: 36px;
                background-size: 100% 100%;
            }

            .service-desc {
                color: var(--disarm-top-log-desc-color);

                display: block;
                font-size: 12px;
                height: 100%;
                margin-left: 10px;
                margin-top: -4px;
                font-weight: 500;
            }
        }
    }

    .navbar-div {
        .navbar-nav {
            display: flex;
            align-items: center;

            .nav-item {
                .nav-link {
                    display: flex;
                    align-items: center;

                    i.bi.bi-chevron-down {
                        transition: transform 0.3s ease;
                        margin-left: .2rem;
                    }

                    i:not(.bi.bi-chevron-down) {
                        margin-right: .3rem;
                    }
                }

                .nav-link:hover {
                    text-shadow: var(--disarm-text-shadow);

                    i.bi.bi-chevron-down {
                        transform: rotate(-180deg);
                    }
                }
            }

            .nav-item:not(.active) {
                .nav-link {
                    color: var(--disarm-nav-link-color);
                }

                .nav-link:hover {
                    color: var(--disarm-nav-link-hover-color);
                }
            }

            .nav-item.active {
                font-weight: 500;

                .nav-link {
                    color: var(--disarm-nav-link-active-color);
                    background-color: var(--disarm-nav-link-active-background);
                    box-shadow: var(--disarm-nav-link-active-box-shadow);

                    border-radius: .75rem;
                    padding-left: 1rem;
                    padding-right: 1rem;
                }
            }
        }
    }

    .navbar-div.navbar-mid-div .navbar-nav, .navbar-div.navbar-end-div .navbar-nav {
        .nav-item.dropdown:hover {
            .dropdown-menu {
                transition: .3s;
                opacity: 1;
                visibility: visible;
                top: 110%;
                transform: rotateX(0deg);
            }
        }

        .nav-item.dropdown {
            .dropdown-menu {
                opacity: 0;
                visibility: hidden;
                transition: .3s;
                display: block;
            }
        }

        .nav-item.dropdown.logs .dropdown-item i.bi.bi-circle-fill {
            color: var(--disarm-nav-dropdown-menu-item-logs-icon-color);
        }

        .nav-item.dropdown.policy .dropdown-item i.bi.bi-circle-fill {
            color: var(--disarm-nav-dropdown-menu-item-policy-icon-color);
        }
    }

    .navbar-div.navbar-mid-div {
        font-size: 16px;

        .navbar-nav {
            gap: 10px;
        }
    }

    .navbar-div.navbar-end-div {
        .navbar-nav {
            gap: 8px;
        }

        .nav-item span.user-info {
            background-color: var(--disarm-nav-user-info-background);
            background-image: var(--disarm-nav-user-info-background-image);
            border: var(--disarm-nav-user-info-border);
            color: var(--disarm-nav-user-info-color);

            border-radius: .75rem;
            font-weight: 500;
            display: flex;
            align-items: center;
            padding: 8px 12px;

            i {
                font-size: 16px;
                margin-right: .2rem;
            }
        ;
        }
    }
}
.dropdown-list-bar-wrap:has(a.active) {
    display: block;
    .dropdown-list:has(a.active) {
        display: flex;
    }
}
.dropdown-list-bar-wrap {
    display: none;
    background-color: var(--disarm-tool-bar-wrap-background);
    .dropdown-list-bar-container {
        display: flex;
        align-items: center;
        gap: 12px;

        > i {
            color: var(--disarm-tool-bar-div-icon-color);
            background-color: var(--disarm-dropdown-list-div-icon-background);

            font-size: 1.25rem;
            border-radius: .5rem;
            padding: .5rem;
        }

        .dropdown-list {
            flex-grow: 1;
            gap: 8px;
            display: none;
            align-items: center;
            a{
                color: var(--disarm-dropdown-liat-a-color);
                font-weight: 450;
                border-radius: .6rem;
                padding: .4rem .6rem;
                background-color: var(--disarm-dropdown-liat-a-background);
            }
            a:hover {
                text-decoration: unset;
                cursor: pointer;
                text-shadow: var(--disarm-text-shadow);
                background-color: var(--disarm-dropdown-liat-a-hover-background);
            }
            a.active {
                pointer-events: none;
                font-weight: 500;
                color: var(--disarm-dropdown-liat-a-active-color);
                background-color: var(--disarm-light-blue-1);
                box-shadow: var(--disarm-nav-link-active-box-shadow);
            }
        }
    }
}

.tool-bar-wrap {
    background-color: var(--disarm-tool-bar-wrap-background);

    .tool-bar-container {
        .tool-bar-div {
            display: flex;
            align-items: center;

            i {
                color: var(--disarm-tool-bar-div-icon-color);
                background-color: var(--disarm-tool-bar-div-icon-background);

                font-size: 1.25rem;
                border-radius: .5rem;
                padding: .5rem;
            }

            .tool-bar-title-div {
                margin-left: 12px;

                .tool-bar-title {
                    color: var(--disarm-tool-bar-div-title-color);

                    margin: 0;
                    font-size: 18px;
                }

                .tool-bar-desc {
                    color: var(--disarm-tool-bar-div-desc-color);

                    font-size: 13px;
                    font-weight: 450;
                }
            }
        }

        .tool-bar-items {
            .date-time-picker-div {
                span.input-group-text, #datetimepicker {
                    border: var(--disarm-datepicker-border);
                }

                span.input-group-text {
                    color: var(--disarm-datepicker-color);
                    border-top-left-radius: .5rem;
                    border-bottom-left-radius: .5rem;
                    background-color: var(--disarm-datepicker-background);
                    border-right: none;
                    padding-left: 10px;
                }

                #datetimepicker {
                    color: var(--disarm-datepicker-color);
                    background-color: var(--disarm-datepicker-background);
                    border-top-right-radius: .5rem;
                    border-bottom-right-radius: .5rem;
                    padding-left: 0;
                    width: 275px;
                }
            }

        }
    }
}

.body-container-wrap {
    /*max-height: calc(100% - 260px);*/
    /*overflow-y: auto;*/

    background-color: var(--disarm-body-container-wrap-background);

    .fixed-table-body.with-footer {
        max-height: calc(100% - 545px) !important;
    }

    padding: 20px 24px;
}

.body-footer {
    border: var(--disarm-body-footer-border);
    background-color: var(--disarm-body-footer-background);
    position: fixed;
    bottom: 10px;
    z-index: 2000;

    left: 50%;
    transform: translateX(-50%);
    padding: 16px 24px;
}

/* ****** ****** ****** ****** ****** ****** ****** ****** ****** ****** ****** ****** ****** */
/* ****** ****** ****** ****** ****** ******  table ****** ****** ****** ****** ****** ****** */

.filter-content {
    .form-group {
        label i.bi.bi-input-cursor {
            color: var(--disarm-popover-form-group-icon-color);
            margin-right: .3rem;
        }
    }
}

.bootstrap-table .fixed-table-toolbar .bs-bars,
.bootstrap-table .fixed-table-toolbar .columns,
.bootstrap-table .fixed-table-toolbar .search {
    margin-top: 0;
    margin-bottom: 0;

    button.btn {
        padding: .469rem 11px;
    }
}

div.columns.columns-right.btn-group.float-right {
    button.btn {
        border-radius: inherit !important;
    }

    > button.btn:first-child {
        border-top-left-radius: .5rem !important;
        border-bottom-left-radius: .5rem !important;
    }

    > button.btn:last-child {
        border-top-right-radius: .5rem !important;
        border-bottom-right-radius: .5rem !important;
    }
}

.fixed-table-body {
    height: max-content !important;
    max-height: calc(100% - 480px);
    margin-top: 10px;

    div.fixed-table-loading {
        background: var(--disarm-table-loading-background) !important;
        color: var(--disarm-table-header-color);
    }
}

.float-left.pagination-detail {
    .dropdown-menu.show {
        top: -3px !important;
        left: -10px !important;
        .dropdown-item.active{
            background-color: var(--disarm-table-pagenation-active-background);
            color: var(--disarm-table-pagenation-active-color);
            text-shadow: var(--disarm-text-shadow);
        }
    }

}
.float-right.pagination ul.pagination {
    li.page-item {
        a {
            color: var(--disarm-table-pagenation-color);
            background-color: var(--disarm-table-pagenation-background);
            border-color: var(--disarm-table-pagenation-border-color);
        }

        a:hover {
            background-color: var(--disarm-table-pagenation-hover-background);
        }
    }

    li.page-item.active {
        a {
            color: var(--disarm-table-pagenation-active-color);
            background-color: var(--disarm-table-pagenation-active-background);
            border-color: var(--disarm-table-pagenation-active-border-color);
        }
    }
}


/* ****** ****** ****** ****** ****** ****** ****** ****** ****** ****** ****** ****** ****** */
/* ****** ****** ****** ****** ****** ****** ****** ****** ****** ****** ****** ****** ****** */

button.btn, .alert, .badge, label.btn {
    border-radius: .6rem !important;
    /*min-width: max-content;*/
}
.badge {
    border-radius: .3rem !important;
}

button.btn:disabled, input:disabled {
    opacity: .5 !important;
    pointer-events: none;
}

label.btn.focus, .btn:focus {
    box-shadow: none;
}

input[type='text'], input[type='search'] {
    color: var(--disarm-input-text-color);
    border: .05rem solid var(--disarm-popover-form-group-input-border-color);
    background-color: var(--disarm-default-background-1);
    border-radius: .5rem;
}

input[type='text']:focus, input[type='text']:disabled, input[type='text']:autofill,
input[type='search']:focus, input[type='search']:disabled, input[type='search']:autofill {
    color: var(--disarm-input-text-color);
    background-color: var(--disarm-default-background-1);
    border-color: var(--disarm-light-gray-1);
}

.input-group > svg {
    color: var(--disarm-input-icon-color) !important;
}

.popover {
    input[type='text'] {
        color: var(--disarm-input-text-color);
        border: .05rem solid var(--disarm-popover-form-group-input-border-color);
        background-color: var(--disarm-popover-form-group-input-background);
        border-radius: .5rem;
    }

    input[type='text']:focus, input[type='text']:disabled, input[type='text']:autofill {
        color: var(--disarm-input-text-color);
        background-color: var(--disarm-popover-form-group-input-background);
        border-color: var(--disarm-light-gray-1);
    }
}

/* ****** ****** ****** ****** ****** ****** ****** ****** ****** ****** ****** ****** ****** */
/* ****** ****** ****** ****** ****** ****** ****** ****** ****** ****** ****** ****** ****** */


button.btn-blue {
    color: var(--disarm-default-color-1);
    background-color: var(--disarm-blue);
}

button.btn-blue:not(:disabled):hover {
    color: var(--disarm-default-color-1);
    background-color: var(--disarm-dark-blue-1);
}

button.btn-indigo {
    color: var(--disarm-default-color-1);
    background-color: var(--disarm-indigo);
}

button.btn-indigo:not(:disabled):hover {
    color: var(--disarm-default-color-1);
    background-color: var(--disarm-dark-indigo-1);
}

button.btn-cyan {
    color: var(--disarm-default-color-1);
    background-color: var(--disarm-dark-cyan-1);
}

button.btn-cyan:not(:disabled):hover {
    color: var(--disarm-default-color-1);
    background-color: var(--disarm-dark-cyan-2);
}

button.btn-darkgray {
    color: var(--disarm-default-color-1);
    background-color: var(--disarm-dark-gray-2);
}

button.btn-darkgray:not(:disabled):hover {
    color: var(--disarm-default-color-1);
    background-color: var(--disarm-dark-gray-3);
}

button.btn-lightgray {
    color: var(--disarm-light-gray-2);
    background-color: var(--disarm-dark-gray-1);
}

button.btn-lightgray:not(:disabled):hover {
    color: var(--disarm-light-gray-2);
    background-color: var(--disarm-dark-gray-2);
}



.badge-green, .badge-safe, .badge-benign, .bec-safe {
    color: var(--disarm-dark-green-1) !important;
    border: .05rem solid var(--disarm-green) !important;
    background-color: var(--disarm-light-green-3) !important;

    i {
        color: var(--disarm-green) !important;
    }
}

.badge-suspicious, .bec-suspicious, .badge-orange {
    color: var(--disarm-dark-orange-2) !important;
    border: .05rem solid var(--disarm-orange) !important;
    background-color: var(--disarm-light-orange-3) !important;

    i {
        color: var(--disarm-orange) !important;
    }
}

.badge-red, .badge-danger, .badge-malicious, .bec-danger {
    color: var(--disarm-dark-red-1) !important;
    border: .05rem solid var(--disarm-red) !important;
    background-color: var(--disarm-light-red-3) !important;

    i {
        color: var(--disarm-red) !important;
    }
}

.badge-other {
    color: var(--disarm-dark-teal-2) !important;
    border: .05rem solid var(--disarm-teal) !important;
    background-color: var(--disarm-light-teal-4) !important;

    i {
        color: var(--disarm-teal) !important;
    }
}

.text-indigo {
    color: var(--disarm-indigo);
}

.text-safe, .text-benign {
    color: var(--disarm-blue) !important;

    i {
        color: var(--disarm-light-blue-1) !important;
    }
}

.text-suspicious {
    color: var(--disarm-orange) !important;

    i {
        color: var(--disarm-light-orange-1) !important;
    }
}

.alert-green {
    color: var(--disarm-dark-green-1) !important;
    background-color: var(--disarm-light-green-5) !important;
    border: .05rem solid var(--disarm-light-green-4) !important;

    i {
        color: var(--disarm-green) !important;
    }
}

.alert-orange {
    color: var(--disarm-dark-orange-1) !important;
    background-color: var(--disarm-light-orange-4) !important;
    border: .05rem solid var(--disarm-light-orange-3) !important;

    i {
        color: var(--disarm-orange) !important;
    }
}

.alert-red {
    color: var(--disarm-dark-red-1) !important;
    background-color: var(--disarm-light-red-5) !important;
    border: .05rem solid var(--disarm-light-red-4) !important;

    i {
        color: var(--disarm-red) !important;
    }
}

.bg-green {
    background-color: var(--disarm-green);
}

.bg-red {
    background-color: var(--disarm-red);
}

.text-orange {
    color: var(--disarm-orange);
}

.text-cyan {
    color: var(--disarm-cyan);
}