.widget-nav-badge {
    position: relative;
    overflow: hidden;
    min-width: 160px;
    justify-content: flex-start;
    transition: opacity 0.2s ease;
}

    .widget-nav-badge .nav-icon-wrap {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: flex-start;
        width: 22px;
        flex: 0 0 22px;
    }

    .widget-nav-badge .nav-arrow {
        position: relative;
        left: 0;
    }

    .widget-nav-badge .nav-label {
        white-space: nowrap;
        transition: opacity 0.15s ease;
    }

    .widget-nav-badge.loading {
        pointer-events: none;
    }

        .widget-nav-badge.loading .nav-label {
            opacity: 0;
            width: 0;
            margin-left: 0 !important;
            overflow: hidden;
        }

        .widget-nav-badge.loading .nav-arrow {
            animation: billboardLoop 1.2s steps(6, end) infinite;
        }


@keyframes billboardLoop {
    0% {
        left: 0;
    }

    15% {
        left: 20px;
    }

    30% {
        left: 50px;
    }

    45% {
        left: 80px;
    }

    60% {
        left: 110px;
    }

    75% {
        left: 140px;
    }

    100% {
        left: 160px;
    }
}

.widget-view-btn {
    opacity: 0;
    transform: translateY(6px) scale(1);
    transition: all 0.2s ease;
    position: absolute;
    right: 2px;
    top: -35px;
    z-index: 1;
     
}

.widget-container:hover .widget-view-btn {
    opacity: 1;
    transform: translateY(0) scale(1);
}


.widget-filter-btn {
    transform: translateY(3px) scale(1);
    transition: all 0.2s ease;
    z-index: 999;
    font-size: 12px;
    margin-right: 5px;
    cursor: pointer;
    
}

.widget-container:hover .widget-filter-btn {
    opacity: 1;
    transform: translateY(0) scale(1.2);
    color: #4e9cff;
}


.widget-config-btns {
    opacity: 0;
    transform: translateY(6px) scale(1);
    transition: all 0.2s ease;
    z-index: 2;
    text-align: right;
    margin-right: 5px;
    position: absolute;
    right: 0px;
    border: 1px solid #81f32d;
    border-radius: 5px;
    padding: 4px;
    top: 0px;
    background: #192431;
   
}

.widget-container-config:hover .widget-config-btns {
    opacity: 1;
    transform: translateY(0) scale(1);
}

 

/*
    heights
*/
 
:root {
    --widget-base: 55px;
    --widget-gap: 16px;
}

.widget-height0 {
    height: var(--widget-base);
}

.widget-height1 {
    height: calc(var(--widget-base)*2 + var(--widget-gap));
}

.widget-height2 {
    height: calc(var(--widget-base)*3 + var(--widget-gap)*2);
}

.widget-height3 {
    height: calc(var(--widget-base)*4 + var(--widget-gap)*3);
}

.widget-height4 {
    height: calc(var(--widget-base)*5 + var(--widget-gap)*4);
}

.widget-height5 {
    height: calc(var(--widget-base)*6 + var(--widget-gap)*5);
}

.widget-height6 {
    height: calc(var(--widget-base)*7 + var(--widget-gap)*6);
}

.widget-height7 {
    height: calc(var(--widget-base)*8 + var(--widget-gap)*7);
}

.widget-height8 {
    height: calc(var(--widget-base)*9 + var(--widget-gap)*8);
}

.widget-height9 {
    height: calc(var(--widget-base)*10 + var(--widget-gap)*9);
}

.widget-height10 {
    height: calc(var(--widget-base)*11 + var(--widget-gap)*10);
}

.widget-height11 {
    height: calc(var(--widget-base)*12 + var(--widget-gap)*11);
}


 



/*

.widget-height1 {
    height: 100px !important;
}

.widget-height2 {
    height: 150px !important;
}

.widget-height3 {
    height: 200px !important;
}

.widget-height4 {
    height: 250px !important;
}

.widget-height5 {
    height: 286px !important;
}

.widget-height6 {
    height: 350px !important;
}

.widget-height7 {
    height: 400px !important;
}

.widget-height8 {
    height: 450px !important;
}

.widget-height9 {
    height: 500px !important;
}

.widget-height10 {
    height: 550px !important;
}

.widget-height11 {
    height: 600px !important;
}
*/


.stat-widget-value {
    margin-top: 2.2rem;
    color: white !important;
}

.stat-widget-other-info-container {
    position: absolute;
    top: -2px;
    left: -8px;
    border-bottom: 1px solid #23303f;
    border-top: 1px solid #23303f;
    padding: 4px;
}

/*
    Honey 
*/

.honeymain {
    display: flex;
    --s: 20px; /* size  */
    --m: 2px; /* margin */
    --f: calc(1.732 * var(--s) + 4 * var(--m) - 1px);
    padding: 10px;
}

.honeycontainer {
    font-size: 0; /*disable white space between inline block element */
}

.goodHoney {
    width: var(--s);
    margin: var(--m);
    height: calc(var(--s)*1.1547);
    display: inline-block;
    font-size: initial;
    clip-path: polygon(0% 25%, 0% 75%, 50% 100%, 100% 75%, 100% 25%, 50% 0%);
    background: #1ecc33;
    margin-bottom: calc(var(--m) - var(--s)*0.2885);
}

.badHoney {
    width: var(--s);
    margin: var(--m);
    height: calc(var(--s)*1.1547);
    display: inline-block;
    font-size: initial;
    clip-path: polygon(0% 25%, 0% 75%, 50% 100%, 100% 75%, 100% 25%, 50% 0%);
    background: #f34fa0;
    margin-bottom: calc(var(--m) - var(--s)*0.2885);
}

.honeycontainer::before {
    content: "";
    width: calc(var(--s)/2 + var(--m));
    float: left;
    height: 120%;
    shape-outside: repeating-linear-gradient( #0000 0 calc(var(--f) - 3px), #000 0 var(--f));
}

/*
    Applied filters pop up
*/


.hak-filter-popup {
    position: absolute;
    width: 350px;
    min-height: 240px;
    background: #192431;
    border: 2px solid #196da4;
    border-radius: 10px;
    z-index: 99999;
    box-shadow: 0 14px 35px rgba(0,0,0,0.45);
    overflow: hidden;
    opacity: 0;
    transform: scale(0.92);
}

    .hak-filter-popup.show {
        opacity: 1;
        transform: scale(1);
        transition: opacity 0.18s ease, transform 0.18s ease;
    }

.hak-filter-popup-header {
    padding: 6px 10px;
    background: #16202d;
    border-bottom: 1px solid #223247;
    cursor: move;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.hak-filter-popup-widget-name {
    padding: 6px 10px;
    background: #192431;
    border-bottom: 1px solid #223247;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.hak-filter-popup-title {
    display: flex;
    align-items: center;
}

.hak-filter-popup-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.hak-popup-icon-btn {
    border: 1px solid #2a3a4f;
    background: #1c2735;
    color: #bfcad5;
    border-radius: 6px;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s ease;
}

    .hak-popup-icon-btn:hover {
        background: #27364a;
        color: #ffffff;
    }




.hak-filter-popup-body {
    padding: 0;
    max-height: 222px;
    overflow-y: auto;
}

.hak-filter-section {
    padding: 10px 12px 6px 12px;
    border-bottom: 1px solid rgba(120, 150, 180, 0.12);
}

    .hak-filter-section:last-child {
        border-bottom: none;
    }

.hak-filter-section-title {
    color: #1ecc33;
    font-size: 12px;
    font-weight: 500;
    margin-bottom: 8px;
}

.hak-filter-list {
    list-style: none;
    margin: 0;
    padding: 0 0 0 10px;
}

.hak-filter-list-item {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #c6ced8;
    font-size: 12px;
    font-weight: 500;
    padding: 6px 0;
}

.hak-filter-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #bba4ff;
    display: inline-block;
    flex: 0 0 7px;
}



.hak-filter-control {
    background: #111a24 !important;
    border: 1px solid #2a394b !important;
    color: #d9e4ef !important;
    border-radius: 6px !important;
    font-size: 12px !important;
    box-shadow: none !important;
}

    .hak-filter-control:focus {
        border-color: #1a8ad3 !important;
        box-shadow: 0 0 0 2px rgba(26, 138, 211, 0.15) !important;
    }

    .hak-filter-control::placeholder {
        color: #708194;
    }

.hak-btn-reset {
    background: #243242 !important;
    color: #d4dde7 !important;
    border: 1px solid #31465c !important;
}

    .hak-btn-reset:hover {
        background: #2b3d51 !important;
        color: #fff !important;
    }

.hak-btn-apply {
    background: linear-gradient(180deg, #198fd8 0%, #126ea9 100%) !important;
    color: #fff !important;
    border: 1px solid #2498de !important;
}

    .hak-btn-apply:hover {
        filter: brightness(1.08);
    }




.loading-stat {
    opacity: 0.5;
    animation: statPulse 1s infinite;
}

@keyframes statPulse {
    0% {
        opacity: 0.3;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0.3;
    }
}

/* jVectorMap overrides */
.jvectormap-container .jvectormap-goback,
.jvectormap-container .jvectormap-zoomin,
.jvectormap-container .jvectormap-zoomout {
    width: 1.125rem; height: 1.125rem; padding: 0; box-sizing: border-box;
    font-size: 1rem; background: rgba(255,255,255,.25); color: rgba(255,255,255,.75);
    left: 1rem; box-shadow: none; border-radius: 0;
    display: flex; align-items: center; justify-content: center;
}
.jvectormap-container .jvectormap-goback:hover,
.jvectormap-container .jvectormap-zoomin:hover,
.jvectormap-container .jvectormap-zoomout:hover {
    color: #fff; background: rgba(255,255,255,.45);
}
.jvectormap-container .jvectormap-zoomin { top: 1rem; }
.jvectormap-container .jvectormap-zoomout { top: 2.5625rem; }
.jvectormap-tip {
    background: rgba(255,255,255,.9) !important; color: #000 !important;
    font-weight: 600 !important; padding: .25rem .5rem !important;
    border: none !important; font-family: inherit !important;
    font-size: .7875rem !important; z-index: 1000; border-radius: 4px !important;
}