.row {
    --bs-gutter-x: 1rem !important;
}

.modal {
    z-index: 999999 !important;
}

.wh-page-header {
    font-size: 1.1rem !important;
}

/* Absolute Center CSS Spinner start */
#loader {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 98;
    width: 100%;
    min-height: 100%;
    zoom: 250%;

    background-color: rgba(255, 255, 255, 0.8);
    background-image: url("/static/images/loading.gif");
    background-repeat: no-repeat;
    background-position: center;
}

#card_loader,
.card_loader_overlay {
    display: block;
    /* Initially hide the loader */
    position: absolute;
    /* Position loader relative to the card */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 6;
    background-color: rgba(255, 255, 255, 0.8);
    background-image: url("/static/images/loading.gif");
    background-repeat: no-repeat;
    background-position: center;
}

body.dark-only #card_loader,
body.dark-only .card_loader_overlay {
    display: block;
    /* Initially hide the loader */
    position: absolute;
    /* Position loader relative to the card */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 6;
    background-color: #5b6574cc;
    background-image: url("/static/images/loading.gif");
    background-repeat: no-repeat;
    background-position: center;
}

#risk_meter_loader {
    display: block;
    /* Initially hide the loader */
    position: absolute;
    /* Position loader relative to the card */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    background-color: rgba(255, 255, 255, 0.21);
    background-image: url("/static/images/loading.gif");
    background-repeat: no-repeat;
    background-position: center;
}

#no_host_scanned {
    display: block;
    position: fixed;
    top: 42px;
    left: 0;
    z-index: 100;
    width: 100%;
    min-height: 100%;
    zoom: 250%;

    background-color: rgba(255, 255, 255, 0.8);
    /* background-image: url("/static/images/loading.gif"); */
    background-repeat: no-repeat;
    background-position: center;
}

#myDiv {
    display: none;

}

a {
    text-decoration: none;
    cursor: pointer;
    /* color: #35bfbf !important; */
}

a .small-box h3:hover,
a .small-box p:hover {
    color: rgb(21, 0, 255);
}

.small-box h3 {
    display: inline-block;
}

/* custom select header style for cards header */
.header {
    /* height: 31px;
    padding-top: 0.15rem; */
    cursor: pointer;
}

.filter-btn {
    border: none;
    background-color: transparent;
    display: contents;
    cursor: pointer;
}


.dataTables_wrapper .dataTables_scrollBody {
    width: 100.25%;
    scroll-behavior: smooth;
    scrollbar-width: thin;
}


.header-btn {
    margin-left: 5px;
    border: none;
    background-color: transparent;
    display: contents;
    cursor: pointer;
}

.header-btn a {
    display: flex;
    align-items: center;
}

.extra-tags {
    margin-bottom: 4px;
    color: black;
    border-color: #878282;
    background-color: #CDCDCD !important;
}

.five-tags .wh-tag {
    flex: 1 1 calc(20% - 20px);
    ;
    /* Allow tags to grow and shrink automatically based on available space */
    max-width: calc(20% - 20px);
}

body.dark-only .extra-tags {
    margin-bottom: 4px;
    color: white !important;
    border-color: #878282;
    background-color: #CDCDCD00 !important;
}

.extra-tags:hover {
    background-color: #33BFBF !important;
    color: white !important;
    transition: background-color 0.3s ease, transform 0.3s ease;
    transition-delay: 0.05s;
    transform: scale(1.05);
}

body.dark-only .extra-tags:hover {
    background-color: #33BFBF !important;
    color: white !important;
    transition: background-color 0.3s ease, transform 0.3s ease;
    transition-delay: 0.05s;
    transform: scale(1.05);
}

title {
    z-index: 999999999 !important;
}

/* mesage close btn */
body.dark-only .btn-close {
    filter: brightness(0.8) !important;
}

.tgl+.tgl-btn[data-tg-on="Active"] {
    width: 5em;
}

.tgl+.tgl-btn[data-tg-on="Preview"] {
    width: 7em;
}

.ql-editor {
    direction: ltr !important;
    text-align: left;
}


.fetch-btn1 {
    padding-left: 15px;
    padding-top: 30px;
}

.cursor-pointer {
    cursor: pointer;
}

.profile-media {
    position: relative;
    /* Ensure this element is a stacking context */
    z-index: 1;
    /* Lower than the dropdown */
}

.profile-dropdown {
    display: none;
    /* Initially hidden */
    cursor: pointer;
    position: absolute;
    top: 100%;
    /* Position below the profile media */
    left: 0;
    background: #fff;
    /* Adjust as needed */
    border: 1px solid #ddd;
    /* Adjust as needed */
    z-index: 9999990;
    /* Ensure it appears above other content */
}

body.dark-only .profile-dropdown {
    background: #1a2a39 !important;
    /* Adjust as needed */
    border: 1px solid #3b5670 !important;
    /* Adjust as needed */
}

.profile-dropdown.show {
    display: block;
    /* Show when active */
    z-index: 9999990;
}

.wh-inc-10 {
    width: 10%;
}

.wh-inc-20 {
    width: 20%;
}

.wh-inc-30 {
    width: 30%;
}

.wh-inc-40 {
    width: 40%;
}

@media (min-width: 1200px) {
    .wh-col-xl-10 {
        flex: 0 0 auto;
        width: 10%;
    }

    .wh-col-xl-20 {
        flex: 0 0 auto;
        width: 20%;
    }

    .wh-col-xl-30 {
        flex: 0 0 auto;
        width: 30%;
    }

    .wh-col-xl-40 {
        flex: 0 0 auto;
        width: 40%;
    }

    .wh-col-xl-60 {
        flex: 0 0 auto;
        width: 60%;
    }

    .wh-col-xl-70 {
        flex: 0 0 auto;
        width: 70%;
    }
}

@media (min-width: 992px) {
    .wh-col-lg-10 {
        flex: 0 0 auto;
        width: 10%;
    }

    .wh-col-lg-20 {
        flex: 0 0 auto;
        width: 20%;
    }

    .wh-col-lg-30 {
        flex: 0 0 auto;
        width: 30%;
    }

    .wh-col-lg-40 {
        flex: 0 0 auto;
        width: 40%;
    }

    .wh-col-lg-60 {
        flex: 0 0 auto;
        width: 60%;
    }

    .wh-col-lg-70 {
        flex: 0 0 auto;
        width: 70%;
    }
}

@media (min-width: 768px) {
    .wh-col-md-10 {
        flex: 0 0 auto;
        width: 10%;
    }

    .wh-col-md-20 {
        flex: 0 0 auto;
        width: 20%;
    }

    .wh-col-md-25 {
        flex: 0 0 auto;
        width: 25%;
    }

    .wh-col-md-30 {
        flex: 0 0 auto;
        width: 30%;
    }

    .wh-col-md-40 {
        flex: 0 0 auto;
        width: 40%;
    }

    .wh-col-md-55 {
        flex: 0 0 auto;
        width: 55%;
    }

    .wh-col-md-60 {
        flex: 0 0 auto;
        width: 60%;
    }

    .wh-col-md-70 {
        flex: 0 0 auto;
        width: 70%;
    }
}

@media (min-width: 576px) {
    .wh-col-sm-10 {
        flex: 0 0 auto;
        width: 10%;
    }

    .wh-col-sm-20 {
        flex: 0 0 auto;
        width: 20%;
    }

    .wh-col-sm-30 {
        flex: 0 0 auto;
        width: 30%;
    }

    .wh-col-sm-40 {
        flex: 0 0 auto;
        width: 40%;
    }

    .wh-col-sm-60 {
        flex: 0 0 auto;
        width: 60%;
    }

    .wh-col-sm-70 {
        flex: 0 0 auto;
        width: 70%;
    }
}

input[type="color"].form-control {
    height: 32px;
    /* Match the default height of Bootstrap .form-control */
    padding: 6px 12px;
}

.chart-container {
    height: 205px;
    display: flex;
    align-items: center;
    /* Center the chart vertically */
    justify-content: center;
    /* Center the chart horizontally */
}

.btn-primary {
    background-color: #007bff !important;
    border-color: #007bff !important;
}

.tooltip .tooltip-inner {
    background-color: #cff0f0;
    color: #33BFBF;
}
.modal.tooltip {
    z-index: 999999999 !important;
}

.wh-reload-container {
    vertical-align: text-top;
    margin-top: 1px;
}

.wh-reload-card {
    /* position: absolute; */
    margin-left: 0.65rem;
    z-index: 9999999;
    cursor: pointer;
    font-size: 13px;
    opacity: 0.9;
}





.sidebar-list {
    padding: 13px 10px !important;
}

.sidebar-main .sidebar-links .main-submenu {
    padding: 12px 20px 12px 20px !important;
}

body.dark-only .dropdown-menu {
    border: 1px solid #3b5670;
}

body.dark-only .dropdown-menu .input-group {
    /* background-color: #1f2f3e !important; */
    background-color: #1a2a39 !important;
}

body.dark-only .dropdown-menu .input-group:hover {
    background-color: #767676 !important;
    color: #fff;
}

body.dark-only .dropdown-menu .input-group:hover .disabled {
    background-color: transparent !important;
    color: #fff;
}

/* Styles for dropdown toggle button */
.wh-opt-dropdown-toggle {
    display: flex;
    justify-content: space-between;
    /* Space between text and icon */
    align-items: center;
    /* Center vertically */
    padding: 0.42rem .75rem 0.42rem 0.75rem;
    background-color: #fff;
    border: 1px solid #ced4da;
    /* Bootstrap-like border color */
    border-radius: 0.375rem;
    /* Bootstrap-like border radius */
    cursor: pointer;
    width: 100%;
    line-height: 1.5;
    transition: border-color 0.2s ease, background-color 0.2s ease;
    /* Transition effect */
    overflow-y: auto;
    /* Allow vertical scrolling */
    max-height: 150px;
    /* Limit the height of the dropdown */
}

.dropdownText {
    white-space: normal;
    /* Allow text to wrap */
    max-width: 100%;
    width: auto;
    max-height: 135px;
    overflow-y: auto;
    /* Enable vertical scrolling */
    display: flex;
    /* Use flexbox for alignment */
    flex-wrap: wrap;
    /* Allow items to wrap to the next line */
    align-items: flex-start;
    /* Align items to the top */
    justify-content: flex-start;
    /* Align items to the left */
    gap: 6px;
    /* Add some spacing between items */
}

#dropdownText {
    white-space: normal;
    /* Allow text to wrap */
    max-width: 100%;
    width: auto;
    max-height: 135px;
    overflow-y: auto;
    /* Enable vertical scrolling */
    display: flex;
    /* Use flexbox for alignment */
    flex-wrap: wrap;
    /* Allow items to wrap to the next line */
    align-items: flex-start;
    /* Align items to the top */
    justify-content: flex-start;
    /* Align items to the left */
    gap: 6px;
    /* Add some spacing between items */
}



.wh-opt-dropdown-toggle:hover {
    /* background-color: #e9ecef;  */
    border-color: #adb5bd;
    /* Darker border color on hover */
}

.wh-opt-dropdown-icon {
    flex-shrink: 0;
    /* Prevent the icon from shrinking */
    margin-left: 10px;
    /* Space between text and icon */
}

/* Basic dropdown styles */
.wh-opt-dropdown {
    position: relative;
    display: inline;
    width: 100%;
}

.wh-dropdown-options {
    max-height: 200px;
    overflow-y: auto;
}

/* Default dropdown behavior (absolute) */
.wh-opt-dropdown-content {
    position: absolute;
    background-color: #fff;
    border: 1px solid #ced4da;
    border-radius: 0.375rem;
    z-index: 9999999;
    width: 100%;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
    transition: max-height 0.2s ease;
}



.wh-opt-search-input {
    width: 100%;
    padding: 8px;
    border: 1px solid #ced4da;
    /* Bootstrap-like border color */
    border-radius: 0.375rem;
    /* Bootstrap-like border radius */
    box-sizing: border-box;
    transition: border-color 0.2s ease;
    /* Transition for border */
}

.wh-opt-search-input:focus {
    border-color: #80bdff;
    /* Bootstrap-like focus border color */
    outline: none;
    /* Remove default outline */
}

.wh-opt-no-result {
    padding: 10px;
    text-align: center;
    color: #6c757d;
    /* Bootstrap gray color */
    font-style: italic;
    background-color: #f9f9f9;
    /* Light background for contrast */
    border-top: 1px solid #ced4da;
    /* Border to separate from options */
    font-family: 'Arial', sans-serif;
    /* Change font style */
}

.wh-opt-option {
    display: flex;
    align-items: center;
    padding: 8px;
    cursor: pointer;
    color: #212529;
}

.wh-opt-option #platform_icon {
    width: 20px;
    /* Adjust size as needed */
    height: 20px;
    margin-right: 8px;
}

.wh-opt-option:hover {
    /* background-color: #f1f1f1;  */
    background-color: #767676;
    color: #fff;
}

body.dark-only .wh-opt-option:hover {
    /* background-color: #f1f1f1;  */
    background-color: #767676 !important;
    color: #fff;
}

body.dark-only .wh-opt-dropdown {
    background-color: #1a2a39 !important;
}

body.dark-only .wh-opt-search-input:focus {
    background-color: #374558 !important;
}

body.dark-only .wh-opt-no-result {
    background-color: #1f2f3e !important;
    color: rgba(255, 255, 255, 0.8);
}

body.dark-only .wh-opt-option {
    background-color: #1f2f3e ;
    color: rgba(255, 255, 255, 0.8);
}

body.dark-only .wh-opt-search-input {
    background-color: #1f2f3e !important;
    color: rgba(255, 255, 255, 0.8);
}

body.dark-only .wh-opt-dropdown-content {
    background-color: #1f2f3e !important;
    border-color: #374558 !important;
    color: rgba(255, 255, 255, 0.8);
}

body.dark-only .wh-opt-dropdown-toggle {
    background-color: #1a2a39 !important;
    border-color: #374558 !important;
    color: rgba(255, 255, 255, 0.8);
}

/* multips custom select dropdown */
.dropdown-container-multi {
    position: relative;
    width: 300px;
}

.dropdown-text-multi {
    border: 1px solid #ccc;
    padding: 8px;
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    align-items: center;
    min-height: 38px;
}

#dropdownTextMulti {
    white-space: nowrap;
    /* Prevent text wrapping */
    overflow: hidden;
    /* Hide the overflow text */
    text-overflow: ellipsis;
}

.dropdown-text-multi:focus-within {
    border-color: #007bff;
}

.selected-tag-multi {
    background: #E5E5E5;
    color: #262829;
    padding: 2px 9px;
    /* margin-top: 2px;
    margin-right: 5px; */
    border-radius: 3px;
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    transition: all 0.3s ease-in;
}

.selected-tag-multi:hover {
    background: #D3E2E5;
}

.remove-tag-multi {
    margin-right: 6px;
    cursor: pointer;
    font-weight: bold;
    color: #262829;
    transition: 0.3s ease-out;
}

.remove-tag-multi:hover {
    color: #c77777;
}

.dropdown-content-multi {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #fff;
    display: none;
    z-index: 1000;
}

.dropdown-content-multi .wh-opt-option {
    padding: 8px;
    cursor: pointer;
}

.dropdown-content-multi .wh-opt-option-multi:hover {
    background: #f0f0f0;
}

.search-input-multi {
    width: 100%;
    padding: 8px;
    border: none;
    outline: none;
    border-bottom: 1px solid #ccc;
    box-sizing: border-box;
}

.no-result-multi {
    text-align: center;
    padding: 8px;
    color: #999;
}

/* Dark Mode Styles */
body.dark-only .dropdown-text-multi {
    background-color: #1f2f3e !important;
    border-color: #374558 !important;
    color: rgba(255, 255, 255, 0.8);
}

body.dark-only .selected-tag-multi {
    background: #374558 !important;
    color: rgba(255, 255, 255, 0.8);
}

body.dark-only .dropdown-content-multi {
    background-color: #1f2f3e !important;
    border-color: #374558 !important;
}

body.dark-only .wh-opt-option-multi {
    background-color: #1f2f3e !important;
    color: rgba(255, 255, 255, 0.8);
}

body.dark-only .wh-opt-option-multi:hover {
    background-color: #767676 !important;
    color: #fff !important;
}

body.dark-only .search-input-multi {
    background-color: #374558 !important;
    color: rgba(255, 255, 255, 0.8);
}

body.dark-only .no-result-multi {
    background-color: #1f2f3e !important;
    color: rgba(255, 255, 255, 0.8);
}


body.dark-only .form-select {
    background-color: #1a2a39 !important;
    border-color: #374558 !important;
    color: rgba(255, 255, 255, 0.8);
}

body.dark-only .form-control {
    background-color: #1a2a39 !important;
    border-color: #374558 !important;
    color: rgba(255, 255, 255, 0.8);
}


/* Tagify input css */
.tagify__input {
    margin: 1px;
    white-space: nowrap;
    /* Prevent text from wrapping */
    overflow: auto;
    /* Hide overflow text */
    text-overflow: ellipsis;
    line-height: inherit;
    max-width: 100%;
    /* Ensure it doesn't exceed the container width */
    width: auto;

}

.tagify__dropdown__wrapper {
    white-space: nowrap;
    overflow-x: auto;
    max-width: 100%;
}

.tagify__dropdown {
    z-index: 9999999;
}

/* Style the tag to include padding for the close button at the start */
.tagify__tag {
    display: flex;
    /* text-overflow: ellipsis; */
    font-size: small;
    /* flex-wrap: wrap; */
    align-items: center;
    line-height: inherit;
    padding-left: 0;
    /* Adjust as needed to fit the close button */
}

.tagify__tag>div>* {
    white-space: nowrap !important;

}

.tagify__tag>div {
    vertical-align: top;
    box-sizing: border-box;
    max-width: 100%;
    padding: 0.75px 5px;
    color: var(--tag-text-color);
    line-height: inherit;
    border-radius: var(--tag-border-radius);
    white-space: nowrap;
    transition: .13s ease-out;
}

/* Style the close button */
.tagify__tag .tagify__tag__removeBtn {
    order: -1;
    /* Move the button to the start */
    margin-left: 3px;
    /* Space between button and text */
    margin-right: 0px;
    /* Space between button and text */
}

.tagify-clear-btn {
    position: sticky;
    /* Fix position */
    top: 5px;
    /* Adjust as needed */
    right: 5px;
    /* Adjust as needed */
    font-size: 16px;
    /* Adjust size */
    color: #dd6f6f;
    /* Button color */
    cursor: pointer;
    /* Change cursor to pointer */
    transition: opacity 0.3s ease;
    /* Smooth fade-in/out effect */
    z-index: 10;
    /* Ensure it's on top of tags */
}

.tagify-clear-btn:hover {
    color: #fa0505;
    /* Darker color on hover */
}


/* Adjust the tag text */
.tagify__tag .tagify__tag__text {
    margin-left: 0;
    /* Remove left margin to fit close button at the start */
}

body.dark-only .tagify__tag {
    --tag-bg: #134558 !important;
    --tag-hover: #134558 !important;
}

/* adjust left right label container */
.wh-label-container {
    display: flex;
    /* Use flexbox for alignment */
    justify-content: space-between;
    /* Distribute items to the edges */
    align-items: center;
    /* Center items vertically */
}

.wh-label-left {
    margin-left: 0;
    /* Align to the left */
}

.wh-label-right {
    margin-right: 0;
    /* Align to the right */
}

/* Default label styles */
label,
.form-label {
    font-size: 13px;
    font-weight: bold;
    color: #212529;
    margin-bottom: 4px;
}

/* Dark mode label styles */
body.dark-only label,
body.dark-only .form-label {
    color: #ffffffcc;
}

.wh-data_type-icon {
    height: 2em;
    /* Set to the size of the text (h4) */
    width: auto;
    /* Maintain aspect ratio */
    vertical-align: middle;
    /* Aligns the wh-platform-icon vertically with the text */
}

.wh-tag-badge {
    line-height: 9px !important;
    letter-spacing: 1px;
    font-size: 10px;
}

.inline-badges {
    display: flex;
    flex-wrap: nowrap;
    /* Prevent wrapping */
    align-items: center;
    /* Vertically align the badges and separator */
}

.wh-separator {
    margin-left: 0.5rem !important;
    margin-right: 0.25rem !important;
    margin-bottom: -1.3px;
    display: inline-block;
    align-self: stretch;
    width: 1px;
    min-height: 1em;
    background-color: currentcolor;
    opacity: 0.25;
}

.wh-separator-js {
    display: inline-block;
    width: 1px;
    height: 16px;
    background-color: #999;
    margin: 0 6px;
    vertical-align: middle;
}


.wh-separator2 {
    margin-left: 0.25rem !important;
    margin-right: 0.25rem !important;
    margin-bottom: -2.1px;
    display: inline-block;
    /* align-self: stretch; */
    width: 1px;
    min-height: 1em;
    background-color: currentcolor;
    opacity: 0.25;
}

.wh-separator3 {
    margin-top: 0.25rem !important;
    display: inline-block;
    align-self: stretch;
    width: 1.5px;
    min-height: 4em;
    background-color: currentcolor;
    opacity: 0.5;
}

.tag-btn-sm {
    font-size: 11px;
    font-weight: 500;
    background-color: transparent;
    padding: 0.2em 0.45em;
    border-radius: 5px;
}

.wh-fill-wrapper {
    background-color: #f1f2f5;
}

.dataTables_wrapper .btn-group button {
    margin-right: 0px;
}

.f-9 {
    font-size: 9px;
}

.f-10 {
    font-size: 10px;
}

.f-11 {
    font-size: 11px;
}

.card .card-body {
    padding: 12px;
    background-color: transparent;
}

.form-check-input {
    border-color: #374558 !important;
}

.notes {
    font-size: 10px;
    color: #c43e2f;
}

body.dark-only .notes {
    font-size: 10px !important;
    color: #f08282 !important;
}

.no-data {
    color: #c43e2f !important;
}

body.dark-only .no-data {
    color: #f08282 !important;
}

body.dark-only.form-check-input {
    background-color: #374558;
}

body.dark-only .wh-select2 {
    border-color: #374558;
    background-color: #1a2a39;
}
body.dark-only * {
    scrollbar-color: #1a2a39 #374558 !important;
}

body.dark-only .wh-fill-wrapper {
    background-color: #1a2a39 !important;
}

body.dark-only.form-check-input:checked {
    background-color: #33BFBF important;
    border-color: #33BFBF;
}

body.dark-only .header {
    background-color: #374558 !important;
    color: #fff;
}

/* dark mode for map */
.dark-only #map {
    filter: invert(1) hue-rotate(180deg);
    /* Inverts colors to create a dark mode effect */
}

.wh-group-btn .btn {
    padding: 0.5rem;
    /* Adjust padding as needed */
    font-size: 0.875rem;
    /* Adjust font size as needed */
    width: 50px;
    /* Set fixed width */
    height: 34px;
    /* Set fixed height */
    display: flex;
    align-items: center;
    justify-content: center;
}

.wh-group-btn .btn i,
.wh-group-btn .btn span {
    font-size: 1.5rem;
    /* Adjust icon/text size as needed */
}

.wh-platform-icon {
    height: 1em;
    /* Set to the size of the text (h4) */
    width: auto;
    /* Maintain aspect ratio */
    vertical-align: middle;
    /* Aligns the wh-platform-icon vertically with the text */
    object-fit: contain;
}

.wh-platform-icon-1 {
    height: 1.5em;
    /* Set to the size of the text (h4) */
    width: auto;
    /* Maintain aspect ratio */
    vertical-align: middle;
    /* Aligns the wh-platform-icon vertically with the text */
    object-fit: contain;
}

.wh-platform-icon-2 {
    height: 2em;
    width: 2em;
    /* Force a square shape for consistency */
    vertical-align: middle;
    object-fit: contain;
    /* Ensure the icon fits within the set dimensions */
}

.wh-platform-icon-3 {
    height: 2.4em;
    /* Set to the size of the text (h4) */
    width: auto;
    /* Maintain aspect ratio */
    vertical-align: middle;
    /* Aligns the wh-platform-icon vertically with the text */
    object-fit: contain;
}

.wh-platform-icon-4 {
    height: 3em;
    /* Set to the size of the text (h4) */
    width: auto;
    /* Maintain aspect ratio */
    vertical-align: middle;
    /* Aligns the wh-platform-icon vertically with the text */
    object-fit: contain;
}

.outlook-icon {
    max-height: 23px;
    /* Adjust image size */
    max-width: 23px;
}

.gmail-icon {
    max-height: 40px;
    /* Adjust image size */
    max-width: 40px;
}

.zoho_mail-icon {
    max-height: 40px;
    /* Adjust image size */
    max-width: 40px;
}

.teams-icon {
    max-height: 22px;
    /* Adjust image size */
    max-width: 22px;
}

.zoho_cliq-icon {
    max-height: 33px;
    /* Adjust image size */
    max-width: 33px;
}

.slack-icon {
    max-height: 21px;
    /* Adjust image size */
    max-width: 21px;
}

.jira-icon {
    max-height: 21px;
    /* Adjust image size */
    max-width: 21px;
}

/* custom color for all platform */
.drive-platform-icon {
    color: #9560dd;
    ;
}

.page-title {
    margin-left: 0px !important;
    padding: 8px 25px 8px 13px !important;
    margin-top: -5px !important;
}

.truncate {
    max-width: 400px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.read-more {
    color: #33BFBF;
    cursor: pointer;
}

.sensitive-datastores {
    text-align: center;
    /* font-family: Arial, sans-serif; */
}

.sensitive-datastores .count {
    font-size: 14px;
    font-weight: 600;
}

.wh-tags-container {
    display: flex;
    justify-content: space-evenly;
    margin-top: 10px;
    flex-wrap: wrap;
    align-items: center;
}

.wh-tag {
    display: flex;
    justify-content: center;
    /* Center horizontally */
    align-items: center;
    /* Center vertically */
    font-size: 16px;
    flex: 1 1 auto;
    max-width: 100%;
    min-width: 120px;
    /* Prevent tags from becoming too wide; adjust the number based on your preference */
    box-sizing: border-box;
    /* Ensure padding and border are included in the width calculation */
    padding: 7px;
    /* Optional: Add some padding for better spacing inside the tags */
    border-radius: 25px;
    /* To maintain rounded corners */
}

.wh-tag .count {
    font-weight: 600;
    margin-right: 5px;
}

.wh-tag .label {
    padding: 6px 8px;
    font-size: 12px;

    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* Remove the rounded corners */
    color: #fff;
    font-weight: 500;
    position: relative;
    display: inline-block;

    /* Create the corner cut effect */
    border-radius: 20px;
    /* clip-path: polygon(0% 0%, 100% 0%, 88% 100%, 0% 100%, 0% 0%); */
}


.scroller-container {
    max-height: 200px;
    /* Limit the height of the scrolling area */
    overflow-y: scroll;
    /* Enable vertical scroll */
    overflow-x: hidden;
    /* Optional: Disable horizontal scrolling */
    border: 1px solid #ddd;
    /* Optional: Border to make the scrollable area clear */
}


.badge-sm {
    font-size: 0.75rem;
    /* Smaller font size for badges */
    padding: 0.25rem 0.5rem;
    /* Reduce badge padding */
    margin-right: 5px;
    /* Optional: Margin between badges */
}

.pagination-controls {
    display: flow;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    /* float: right; */
}

.paginate-btn {
    background-color: transparent;
    border: none;
    color: #007bff;
    cursor: pointer;
    font-size: 1.5rem;
}

.disabled,
.paginate-btn:disabled {
    pointer-events: none;
    opacity: 0.5;
}

.paginate-range-display {
    min-width: auto;
}

.wh-switch {
    position: relative;
    display: inline-block;
    width: 70px;
    height: 34px;
    margin: -5px;

}

.wh-switch input {
    display: none;
}

.wh-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ca2222;
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 34px;
}

.wh-slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 50%;
}

input:checked+.wh-slider {
    background-color: #1ea127;
}

input:focus+.wh-slider {
    box-shadow: 0 0 1px #2196F3;
}

input:checked+.wh-slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(35px);
}

/*------ ADDED CSS ---------*/
input:checked+.wh-slider:after {
    content: 'OFF';
    color: white;
    display: block;
    position: absolute;
    transform: translate(-150%, -50%);
    top: 50%;
    left: 50%;
    font-size: 10px;
    font-family: Verdana, sans-serif;
}

.wh-slider:after {
    content: 'OFF';
    color: white;
    display: block;
    position: absolute;
    transform: translate(10%, -50%);
    top: 50%;
    left: 50%;
    font-size: 10px;
    font-family: Verdana, sans-serif;
}

input:checked+.wh-slider:after {
    content: 'ON';
}

/*--------- END --------*/

body.signed-loading,
body.signed-loading * {
    cursor: wait !important;
}

/* for filter panel */
/* #wh-filterPanelToggle {
    padding: 10px 16px;
    background: #2563eb;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
} */

.wh-filter-offcanvas {
    position: fixed;
    /* top: 10; */
    right: -433px;
    width: 400px;
    height: 100vh;
    background: #fff;
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
    transition: right 0.3s ease-in-out;
    /* padding: 1rem; */
    overflow-y: auto;
    z-index: 9999;
}
body.dark-only .wh-filter-offcanvas {
    background: #1a2a39 !important;
    color: rgba(255, 255, 255, 0.8) !important;
}

/* .wh-filter-offcanvas.wh-filter-open {
    right: 0;
} */
.wh-filter-offcanvas.wh-filter-open {
    right: 0;
    top: 60px;
    /* box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);  */
    box-shadow: -3px 0 0 0 #75b5fa;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    background-color: #fff; /* Ensure a clean background */
    transition: box-shadow 0.3s ease, right 0.3s ease;
    
}
/* Overlay behind the offcanvas */
.wh-filter-backdrop {
    position: fixed;
    inset: 0; /* shorthand for top/right/bottom/left: 0 */
    background: rgba(0, 0, 0, 0.3); /* semi-transparent */
    backdrop-filter: blur(4px);     /* adds blur */
    z-index: 999; /* just below your offcanvas */
    display: none; /* hidden by default */
}

/* When offcanvas is open, show backdrop */
.wh-filter-offcanvas.wh-filter-open ~ .wh-filter-backdrop {
    display: block;
}

/* .wh-filter-group {
    margin-bottom: 20px;
} */

.wh-filter-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    padding-right: 10px;
    padding-left: 10px;
    padding-top: 10px;
}

.wh-filter-container {
    overflow-y: auto;
    max-height: 68vh;
}

.wh-filter-title {
    font-size: 16px;
    font-weight: bold;
}

.wh-filter-close-btn {
    background: none;
    border: none;
    color: #ef4444;
    font-weight: bold;
    cursor: pointer;
    font-size: 16px;
}

.wh-filter-tile {
    display: flex;
    align-items: center;
    padding: 2px 5px;
    background: white;
    border: 1px solid #d1d5db;
    border-radius: 1px;
    cursor: pointer;
    position: relative;
    font-size: 14px;
}
body.dark-only .wh-filter-tile {
    background: #1a2a39  !important;
    color: rgba(255, 255, 255, 0.8) !important;
    border-color: #3b5670 !important;
}

.wh-filter-tile .wh-filter-label {
    flex: 1;
}
.wh-filter-tile:hover .wh-filter-label {
    color: #4176e7; /* Bootstrap primary blue */
}

.wh-filter-option span:hover {
    color: #4176e7; /* Bootstrap primary blue */
    cursor: pointer;
  }

.wh-clear-special-search-btn{
    background: none;
    border: none;
    color: #ef4444;
    font-weight: bold;
    cursor: pointer;
    margin-left: 1rem;
}

/* Highlight selected filter tile */
.wh-filter-tile.wh-filter-selected {
    border: 2px solid #0d6efd; /* Bootstrap primary blue */
    border-radius: 5px;
    background-color: #f0f8ff; /* optional subtle background */
  }


.wh-filter-tile .wh-filter-count {
    display: none;
    background: #2a4f99;
    color: #f0f8ff;
    font-size: 12px;
    padding: 2px 6px;
    border-radius: 12px;
    margin-left: 6px;
}
.wh-filter-tile .tile-arrow {
    margin-left: 8px;
    font-weight: bold;
    font-size: 11px;
    color: #6b7280; /* Tailwind gray-500 */
  }
  
body.dark-only .wh-filter-tile .tile-arrow {
    color: #bbc0c8 !important;
}

.wh-filter-tile:hover .tile-arrow {
    color: #2563eb !important; /* Bootstrap primary blue */
}

body.dark-only .wh-filter-tile:hover .tile-arrow {
    color: #2563eb !important; /* Bootstrap primary blue */
}

.wh-filter-tile select.wh-filter-logic {
    margin: 0 0 0 8px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 12px;
    background: white;
    color: #111827;
    cursor: pointer;
}

body.dark-only .wh-filter-tile select.wh-filter-logic {
    background: #1a2a39  !important;
    color: rgba(255, 255, 255, 0.8) !important;
    border-color: #3b5670 !important;
}

.wh-filter-tile select.wh-filter-logic:focus {
    outline: none;
    border-color: #2563eb;
}

.wh-filter-tile select.wh-filter-logic:hover {
    border-color: #2563eb;
}


.wh-filter-tile .wh-clear-btn {
    background: none;
    border: none;
    color: #ef4444;
    font-weight: bold;
    display: none;
    cursor: pointer;
}

.wh-filter-dropdown {
    /* margin-top: 6px; */

    background: white;
    border: 1px solid #d1d5db;
    /* border-radius: 6px; */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    transition: max-height 0.3s ease;
    padding: 10px;
    display: none;
}
body.dark-only .wh-filter-dropdown {
    background: #1a2a39  !important;
    color: rgba(255, 255, 255, 0.8) !important;
    border-color: #3b5670 !important;
}

.wh-filter-dropdown input[type="search"] {
    width: 100%;
    padding: 6px 8px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    position: sticky;
    top: 0;
    background: white;
    z-index: 1;
}

body.dark-only .wh-filter-dropdown input[type="search"] {
    background: #1a2a39  !important;
    color: rgba(255, 255, 255, 0.8) !important;
    border-color: #3b5670 !important;
}
body.dark-only .wh-filter-dropdown input[type="search"]:focus {
    /* outline: none; */
    outline-color: #134558;
    border-color: #2563eb;
}

.wh-filter-dropdown .wh-filter-options {
    position: relative;
    width: 100%;
    max-height: 200px;
    overflow-y: auto;
}

.wh-filter-dropdown .wh-filter-option {
    display: flex;
    align-items: center;
    padding: 2.5px 0;

}

.wh-filter-dropdown .wh-filter-option input {
    margin-right: 6px;
}

/* .wh-filter-dropdown .wh-filter-search {
    width: 100%;
    padding: 6px 8px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    position: sticky;
    top: 0;
    background: white;
    z-index: 1;
} */

.wh-filter-loader {
    text-align: center;
    padding: 10px;
    color: #666;
    font-size: 13px;
}
body.dark-only .wh-filter-loader {
    color: rgba(255, 255, 255, 0.8) !important;
}

.wh-footer-actions {
    position: fixed;
    width: -webkit-fill-available;
    bottom: 10px;
    background: #fff;
    padding-top: 10px;
    border-top: 1px solid #e5e7eb;
    text-align: center;
    margin-top: 20px;
}

body.dark-only .wh-footer-actions {
    background: #1a2a39 !important;
    color: rgba(255, 255, 255, 0.8) !important;
    border-color: #3b5670 !important;
}

.wh-footer-actions button {
    padding: 8px 16px;
    margin: 0 6px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
}

.wh-apply-btn {
    background: #10b981;
    color: white;
}

.wh-reset-btn {
    background: #f87171;
    color: white;
}

.wh-no-results {
    text-align: center;
    padding: 10px;
    color: #666;
    font-size: 13px;
}
body.dark-only .wh-no-results {
    color: rgba(255, 255, 255, 0.8) !important;
}

.applied-filters-wrapper {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    position: relative;
    max-width: 100%;
}

.applied-filters-list {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: hidden;
    gap: 8px;
    padding-bottom: 4px;
    scroll-behavior: smooth;
    scrollbar-width: none; /* Firefox */
    flex: 1;
    transition: all 0.3s ease;
}

.applied-filters-list.expanded {
    flex-wrap: wrap;
    overflow-x: visible;
}

.applied-filters-expand {
    cursor: pointer;
    font-weight: bold;
    font-size: 18px;
    padding: 0 6px;
    user-select: none;
}


.applied-filters-list::-webkit-scrollbar {
    display: none;
}

/* .applied-filters-expand {
    background: #eee;
    border: 1px solid #666565;
    padding: 2px 10px;
    cursor: pointer;
    font-weight: bold;
    margin-left: 8px;
} */

.applied-filter-chip-container {
    display: flex;
    align-items: center;
    margin-right: 8px;
    gap: 4px;
    max-width: 100%;
    overflow: hidden;
}

.applied-filter-chip {
    background: #cfbdbd;
    padding: 6px 12px;
    border-radius: 16px;
    font-size: 13px;
    display: flex;
    align-items: center;
    white-space: nowrap;
}
.applied-filter-chip span {
    margin-left: 6px;
    cursor: pointer;
    font-weight: bold;
}
.applied-filter-chip span:hover {
    color: #ef4444;
    /* Tailwind red-500 */
}

.applied-filters-wrapper {
    display: flex;
    align-items: center;
    max-width: 100%;
    gap: 8px;
    flex-wrap: nowrap;
}

.applied-filters-list {
    display: flex;
    flex-wrap: nowrap;
    overflow: hidden;
    gap: 6px;
    padding-bottom: 4px;
    flex: 1; /* take all space for chips */
    min-width: 0;
}

.applied-filters-list.expanded {
    flex-wrap: wrap;
    overflow: visible;
}

.applied-filters-expand {
    font-weight: bold;
    font-size: 14px;
    cursor: pointer;
    user-select: none;
    padding: 4px 8px;
    margin-bottom: 3.5px;
    border-radius: 8px;
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    white-space: nowrap;
}

.applied-filter-chip-container {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    /* background-color: #e6f2ff; */
    border: 1px solid #99ccff;
    border-radius: 6px;
    padding: 3px 5px;
    white-space: nowrap;
    font-size: 13px;
}

.applied-filter-chip-container > span {
    font-weight: 500;
    margin-right: 4px;
    white-space: nowrap;
}

.applied-filter-chip {
    background-color: #d1ecf1;
    color: #0c5460;
    border: 1px solid #bee5eb;
    border-radius: 6px;
    padding: 2px 6px;
    margin-left: 4px;
    display: flex;
    align-items: center;
    font-size: 12px;
    white-space: nowrap;
    cursor: default;
}

.applied-filter-chip span {
    margin-left: 6px;
    cursor: pointer;
    font-weight: bold;
    color: #888;
}

.applied-filter-chip span:hover {
    color: #ef4444;
    /* Tailwind red-500 */
}
.hidden-chip {
    display: none !important;
}
/* .applied-filters-list:not(.expanded) {
    mask-image: linear-gradient(to right, black 90%, transparent 100%);
} */

.applied-filter-controls {
    display: flex;
}
#applied-filters-actions {
    flex-shrink: 0; /* don’t shrink */
    display: flex;
    align-items: center;
    gap: 2px;
    padding-bottom: 4px;
}





/* Light Mode - Highlight for DB, Table, Column */
.wh-opt-option.highlight-selected,
.wh-opt-option.highlight-selected-db,
.wh-opt-option.highlight-selected-table,
.wh-opt-option.highlight-selected-column {
    background-color: #33BFBF;
    color: #000;
}

/* Dark Mode - Override (if needed) */
body.dark-only .wh-opt-option.highlight-selected,
body.dark-only .wh-opt-option.highlight-selected-db,
body.dark-only .wh-opt-option.highlight-selected-table,
body.dark-only .wh-opt-option.highlight-selected-column {
    background-color: #33BFBF; /* Slightly darker for dark mode? */
    color: #000;
}

 /* Offcanvas styles */
    .right-offcanvas {
        position: fixed;
        top: 0;
        right: -700px;
        height: 100vh !important;
        background: white;
        z-index: 1000;
        transition: right 0.4s cubic-bezier(.4,2,.6,1);
        display: flex;
        flex-direction: column;
        padding: 0;
        border-radius: 24px 0 0 24px;
        box-shadow: 0 8px 32px #e3e6efcc;
    }
    .right-offcanvas.active {
        right: 0;
    }
    .right-offcanvas-header {
        display: flex;
        align-items: center;
        border-radius: 24px 0 0 0;
        padding: 32px 36px 18px 36px;
        background: #1f2f3e;
        color: #fff;
        box-shadow: 0 2px 8px #e3e6ef;
    }
    .right-offcanvas-icon {
        font-size: 2rem;
        margin-right: 16px;
        color: #fff;
    }
    .right-offcanvas-title {
        font-size: 1.35rem;
        font-weight: 700;
        color: #fff;
        flex: 1;
        letter-spacing: 0.01em;
    }
    .right-offcanvas-close {
        color: #fff;
        border:none;
        background:transparent;
        font-size: 1.2rem;
        border-radius: 50%;
        width: 30px;
        height: 30px;
        cursor: pointer;
    }
    .right-offcanvas-tabs {
        display: flex;
        justify-content: space-between;
        background: #f6f7fb;
        border-bottom: 2px solid #e3e6ef;
        border-radius: 0 0 0 0;
        padding: 0;
        margin: 0;
        margin-bottom: 0;
    }
    .right-offcanvas-tab {
        flex: 1;
        text-align: center;
        padding: 16px 0 12px 0;
        cursor: pointer;
        font-size: 1.08rem;
        font-weight: 700;
        color: #adb5bd;
        background: #f6f7fb;
        border-radius: 0;
        border: none;
        outline: none;
        border-bottom: 3px solid transparent;
        transition: color 0.2s, border-bottom 0.2s, background 0.2s;
        display: flex;
        flex-direction: column;
        align-items: center;
        letter-spacing: 0.01em;
    }
    .right-offcanvas-tab .tab-icon {
        font-size: 1.3rem;
        margin-bottom: 2px;
    }
    .right-offcanvas-tab.active {
        color: #5c61f2;
        border-bottom: 3px solid #5c61f2;
        background: #fff;
    }
    .right-offcanvas-tab.tab-access.active {
        color: #51bb25;
        border-bottom: 3px solid #51bb25;
        background: #fff;
    }
    .right-offcanvas-tab.tab-user.active {
        color: #fb2e63;
        border-bottom: 3px solid #fb2e63;
        background: #fff;
    }
    .right-offcanvas-tab.tab-data.active {
        color: #ff9800;
        border-bottom: 3px solid #ff9800;
        background: #fff;
    }
    .right-offcanvas-body {
        background: #fff !important;
        border-radius: 0 0 0 24px;
        overflow-y: auto;

        padding: 20px;
        color: #23263b;
        font-size: 1.08rem;
        box-shadow: 0 2px 12px #e3e6ef22;
    }
    @media (max-width: 1130px) {
        .right-offcanvas-xxl.active{
            width: 90vw !important;
            right: 0 !important;
        }
    }
    @media (max-width: 830px) {
        .right-offcanvas-xl.active{
            width: 90vw !important;
            right: 0 !important;
        }
    }
    @media (max-width: 530px) {
        .right-offcanvas-md.active{
            width: 90vw !important;
            right: 0 !important;
        }
    }
    @media (max-width: 330px) {
        .right-offcanvas-sm.active{
            width: 90vw !important;
            right: 0 !important;
        }
    }
    @media (max-width: 500px) {
        .right-offcanvas-header, .right-offcanvas-body { border-radius: 0; padding: 18px 10px; }
    }

/* Change tooltip background and text color */
.tooltip .tooltip-inner {
    background-color: #2c3e50 !important;  
    color: #fff !important;              
    font-weight: 500;                     
}

/* Optional: arrow color to match background */
.tooltip.bs-tooltip-top .tooltip-arrow::before,
.tooltip.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before {
    border-top-color: #2c3e50 !important;
}
.tooltip.bs-tooltip-bottom .tooltip-arrow::before,
.tooltip.bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before {
    border-bottom-color: #2c3e50 !important;
}
.tooltip.bs-tooltip-start .tooltip-arrow::before,
.tooltip.bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow::before {
    border-left-color: #2c3e50 !important;
}
.tooltip.bs-tooltip-end .tooltip-arrow::before,
.tooltip.bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow::before {
    border-right-color: #2c3e50 !important;
}


.apexcharts-datalabel {
  pointer-events: all !important;
}

.disabled-row {
  position: relative;
  background-color: #f8f9fa !important;
  color: #6c757d !important;
}

.disabled-row::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.6);
  cursor: not-allowed;
  z-index: 1;
}

/* Allow child elements to stay active */
.disabled-row .exception-cell {
  position: relative;
  z-index: 2; /* higher than overlay */
  pointer-events: auto;
  opacity: 1;
  color: #dc3545 !important;
  background-color: #fff !important;
}


.card-alert {
    font-size: 0.85rem;
    padding: 6px 10px;
    border-radius: 6px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    animation: fadeIn 0.3s ease;
    border-left: 4px solid transparent;
}

/* SUCCESS */
.card-alert-success {
    background: #e1f7e7;
    color: #1a7a32;
    border-left-color: #1a7a32;
}

/* ERROR */
.card-alert-error {
    background: #fde3e3;
    color: #b42323;
    border-left-color: #b42323;
}
/* DANGER */
.card-alert-danger {
    background: #fde3e3;
    color: #b42323;
    border-left-color: #b42323;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-3px); }
    to   { opacity: 1; transform: translateY(0); }
}


.action-btn-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    width: fit-content;   /* keeps natural button size */
    max-width: 100px;     /* enough space for exactly 3 buttons */
}

.action-btn-wrapper .btn {
    /* keep natural size */
    flex: 0 0 auto;        
}

/* ── Exception color overrides (orange — distinct from FP red & warning yellow) ── */
.text-exception {
    color: #e67e22 !important;
}
.btn-outline-exception {
    color: #e67e22;
    border-color: #e67e22;
}
.btn-outline-exception:hover,
.btn-outline-exception:active {
    color: #fff;
    background-color: #e67e22;
    border-color: #e67e22;
}
.bg-exception {
    background-color: #e67e22 !important;
    color: #fff !important;
}