html, body {
    /* overflow-x: hidden; */
    width: 100%;
    font-family: 'Open Sans', sans-serif !important;
}

.bg-view::-webkit-scrollbar,.content-containerddm::-webkit-scrollbar,.content-container::-webkit-scrollbar,.text-bg-view::-webkit-scrollbar,#hover-popup-antivirus::-webkit-scrollbar,#hover-popup-dlp::-webkit-scrollbar,#hover-popup-edr::-webkit-scrollbar {
  width: 7px;
  height: 12px;
}

.bg-view:hover::-webkit-scrollbar,.content-containerddm:hover::-webkit-scrollbar,.content-container:hover::-webkit-scrollbar,.text-bg-view:hover::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.bg-view::-webkit-scrollbar-track,.content-containerddm::-webkit-scrollbar-track,.content-container::-webkit-scrollbar-track,.text-bg-view::-webkit-scrollbar-track {
  background: #FFFFFF;
}

.bg-view::-webkit-scrollbar-thumb,.content-containerddm::-webkit-scrollbar-thumb,.content-container::-webkit-scrollbar-thumb,.text-bg-view::-webkit-scrollbar-thumb {
  background-color: #636363;
  border-radius: 6px;
  border: 2px solid #636363;;
}

.ed{
    color: #1c7742;
    font-weight: 600;
}
.cs{
    color: black;
    margin-top: 2px;
    margin-bottom: 2px;
}
.cd{
    margin-left: 10px;
    color: #797979;
    font-style: italic;
    font-size: 10px;
    margin-bottom: 2px;
    margin-left: 20px;
}
.row1{
    display: flex;
    height: 100%;
    padding-bottom: 40px;
}
.updates{
    padding: 15px;
    font-size: small;
    font-weight: 600;
    width: 100%;
    height: 100%;
    background-color: #f3f5f2;
    border-radius: 10px;
}
.appimg {
    margin-right: 4px; /* Adjust space as needed */
    vertical-align: middle; /* Align with text */
}
.subtext{
    margin-left: 20px;
    font-size: 13px;
    font-weight: 400;
    text-wrap-mode: wrap;
    margin-bottom: 5px !important;
}
.subtext1 {
    display: grid;
    grid-template-columns: auto 1fr; /* First column auto, second column takes remaining space */
    margin-left: 20px;
    font-size: 13px;
    font-weight: 400;
    margin-bottom: 5px !important;
    text-wrap: wrap;
    position: relative; /* Needed for absolute positioning of .sl */
}

.sl {
    position: absolute;
    right: 0; /* Align to extreme right */
    bottom: 0; /* Align to the last line */
    font-style: italic;
    font-weight: 600;
    font-size: 11px;
}
.column-1{
    /* display: grid;
    grid-template-columns: repeat(3, 1fr); */
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 33%;
    padding: 10px !important;
}
.column-2{
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 33%;
    padding: 10px !important;
    /* border-right: 1px solid var(--neutralL5); */
    border-right: 1px solid ;
    border-left: 1px solid ;
}
.column-3{
    /* display: grid;
    grid-template-columns: repeat(3, 1fr); */
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 33%;
    padding: 10px !important;
}
.color_reset{
    color:#8E959E !important;
}
.unleash{
    display:none ;
}
.text-center4 {
    margin-bottom: 0 !important;
}
.o_schedule_demo{
    display:none;
}
#overlay{
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
}

.x_wd_purple_highlight_01 {
    background-image: url(/openerp_website/static/src/img/highlights/purple_highlight_01.svg);
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: contain;
    white-space: nowrap;
}

/* Default: Hidden state */


/* Show dropdown with smooth slide-down */
.dropdown.show .o_secondary_nav {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: 
        opacity 400ms ease-in-out, 
        transform 400ms ease-in-out, 
        visibility 0s linear 0s;
}

/* Smooth upward animation when closing */
.dropdown.closing .o_secondary_nav {
    opacity: 0;
    transform: translateY(-10px); /* Moves up slightly before disappearing */
    visibility: hidden;
    transition: 
        opacity 400ms ease-in-out, 
        transform 400ms ease-in-out, 
        visibility 0s linear 400ms;
}

/* Background shadow effect */
.o_secondary_nav::before {
    /* content: "";
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 10px;
    background-color: rgba(0, 0, 0, 0.6);
    border-bottom: 1px solid rgb(139, 139, 139);
    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.6);
    opacity: 0;
    transition: opacity 400ms ease-in-out; */
    border-bottom: 1px solid rgb(139, 139, 139);
    bottom: 0px !important;

}

.dropdown.show .o_secondary_nav::before {
    opacity: 1;
}

.dropdown.closing .o_secondary_nav::before {
    opacity: 0;
}


.o_nav_app_family{
    pointer-events: all !important;
    cursor: pointer !important;
    display: flex;
    flex-direction: column;
    font-weight: 600 !important;
    font-size: small !important;
    line-height: 1.5rem !important;
    padding: 5px;
    min-height: 110px 
}
.o_nav_app_family:hover{
    background-color: #f3f5f2;
    border-radius: 10px;
   }
.app1{
    font-weight: 600;
    font-size: small;
    display: flex;
    align-items:center;
    }
    .ap2{
        font-weight: 600;
        font-size: small;
        display: flex;
        align-items:center;
        }
        .ap2[disabled] {
            
            pointer-events: none; /* Disables click */
            opacity: 0.5; /* Makes it look disabled */
            text-decoration: none;
            color: gray;
        }
.app1:hover{
    color: #93CB51 !important;
}
.nav_app_img{
    width: 20px;
}
.display-1{
    font-family: "Caveat" !important;
    font-size: 5rem !important;
    margin-bottom: 0 !important;
}
.display-3{
    font-size: 3rem !important;
}
.container-b{
    margin-top: 40px;
    font-weight: 400 !important;
}
.lead.mb-5{
    font-size: larger  !important;
}
/* .display-3{
} */
/* .stat-title-1:nth-child(1), .stat-value-1:nth-child(1) { width: 7%; } */

.custom {
    font-family: "Caveat";
    color: #1eb6f9;
    font-size: 2.2rem;
    display: inline-flex;
    flex-direction: column;
    position: relative; /* Keep relative as per your original */
    bottom: -12px; /* Keep slight downward adjustment */
    left: -110px; /* Keep your positioning */
    transform: rotate(-5deg);
    text-align: center;
    white-space: nowrap;
    line-height: 0.8;
}

.up-arr {
    width: 20px;
    position: relative;
    left: 70px; /* Keep arrow in place */
}

/* Responsive Fixes */
@media (max-width: 1024px) { /* Tablets */
    .custom {
        font-size: 2.4rem;
        left: -130px; /* Adjust left positioning */
    }
}

@media (max-width: 768px) { /* Large Phones */
    .custom {
        font-size: 2rem;
        left: -20px; /* Adjust for smaller screens */
    }
}

@media (max-width: 480px) { /* Mobile */
    .custom {
        font-size: 1.8rem;
        left: -50px; /* Adjust to prevent shifting too much */
    }
    .up-arr {
        width: 20px; /* Reduce arrow size */
    }
}

.cost{
    color: #292827;
    text-align: center;
    font-family: "Caveat";
    font-size: 5rem;
}

.cost-text{
    position: relative;
    top: -90px;
    left: -50px;
    color: #292827;
    text-align: center;
    font-family: "Caveat";
    font-size: 3rem;
    transform: rotate(-20deg);
}

@media (min-width: 1920px){
    .cost-text{
        position: relative;
        top: -60px;
        left: -20px;
        color: #292827;
        text-align: center;
        font-family: "Caveat";
        font-size: 3rem;
        transform: rotate(-20deg);
    } 
}

.right-arr{
    transform: rotate(-10deg);
    position: relative;
    left: 40px;
    top:40px;
    width: 140px;
}
@media (max-width: 768px) { /* Large Phones */
    .cost-text {
        font-size: 2rem;
        top: -30px;
        left: 20px; /* Adjust for smaller screens */
    }
}
@media (max-width: 480px) { /* Mobile */
    .right-arr{
        top: -50px;
    }
    .cost-text {
        font-size: 1.8rem;
        left: 50px; /* Adjust to prevent shifting too much */
        top: -40px;
    }
}

@media (max-width: 768px) { /* Mobile */
    .cost{
        padding-top: 20px;
        font-size: 3.2rem;
    }
    .right-arr{
        transform: rotate(-8deg);
        width: 100px;
        left: 20px;
    }
    .img-thumbnail{
        max-width: 80px !important;
    }
    .icon-circle {
        width: 100px !important;
        height: 100px !important;
    }
    .text-truncate{
        font-size: medium !important;
    }
    .lead{
        margin-left: 10px;
        margin-right: 10px;
    }
    .buss-img{
        width: 250px;
        height: 280px;
    }
    .w-wir-text{
        width: 200px;
        font-size: 2rem !important;
    }
    .w-wir-text1{
        font-size: 16px !important;
    }
    .op1,.op2,.op3,.op4{
        width: 125px;
        height: 125px;
    }
    .yellow{
        width: 60px;
        left: 70px;
        top: -22px !important;
    }
    .pink{
        width: 60px;
        left:-50px !important;
        top: -22px !important;
    }
    .blue{
        width: 60px;
        left:-70px !important;
        top: -118px !important;
    }
    .w-wir-img2{
        width: 220px !important;
        height: 220px !important;
    }
    .levelup{
        width: 100% !important;
    }
    .w-wir-img3{
        display: flex;
        justify-content: right;
        align-items: right;
    }
    .wig3{
        width: 300px !important;
        height: 300px !important;
    }
    .wig4{
        width: 280px !important;
        height: 280px !important;
    }
    /* .suite3 :nth-child(1){
        width: 110% !important;
    } */
}



.tailor{
    width: 180px;
    height: 40px;
    background-color: #1eb6f9;
    border: 2px solid #1eb6f9;
    border-radius: 10px;
    color: white;
    padding: 0 20px 0 20px;
}
.tailor:hover{
    transform:  translateY(-3px) scale(1.05);
}
/* .o_colored_level{
} */
.custom-shape-divider-top-1739353164 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
}

.custom-shape-divider-top-1739353164 svg {
    position: relative;
    display: block;
    width: calc(155% + 1.3px);
    height: 109px;
}

.custom-shape-divider-top-1739353164 .shape-fill {
    fill: #FFFFFF;
}
.text-truncate{
    font-size: large;
}
.oe_topbar_name.text-truncate{
    font-size: 14px;
}
.icon-circle {
    border-radius: 55%;
    display: flex;
    align-items: center; /* Centers the image vertically */
    justify-content: center; /* Centers the image horizontally */
    width: 130px;
    height: 130px;
    background-color: white;
    margin: 0 auto; /* Ensures centering inside the parent */
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3) !important;
    margin-bottom: 10px !important;
}
.icon-circle:hover{
    transition: left 0.2s ease-in-out;
    transform: translateY(-3px) scale(1.05) !important;
}
.img-thumbnail{
    width: 100px !important;
    border-radius: 20% !important;
    box-shadow: none !important;
}
.img-thumbnail:hover{
    transform: none !important;
}

.curve{
    border-top-left-radius: 25 !important;
}
.text-center0{   
    background: linear-gradient(to bottom, rgb(225, 237, 243) 20%, rgb(227, 215, 247) 78%);
    /* background-color: #F3F4F6; */
    border-top-left-radius: 10rem;
    /* border-bottom-right-radius: 10rem; */
}
.text-center1{   
    background: linear-gradient(to bottom, rgb(227, 215, 247) 20%, rgb(227, 215, 247) 78%);
    /* background-color: #F3F4F6; */
    /* border-top-left-radius: 10rem; */
    /* border-bottom-right-radius: 10rem; */
}
.text-center2{   
    background: linear-gradient(to bottom, rgb(227, 215, 247) 20%, rgb(225, 237, 243) 78%);
    /* background-color: #F3F4F6; */
    /* border-top-left-radius: 10rem; */
    border-bottom-right-radius: 10rem;
}
.text-center3{   
    background: linear-gradient(to bottom, rgb(229, 245, 243) 20%, rgb(206, 252, 223) 78%);
    /* background-color: #F3F4F6; */
    border-top-left-radius: 10rem;
    /* border-bottom-right-radius: 10rem; */
}
.text-center4{
    margin-bottom: 10%;   
    background: linear-gradient(to bottom, rgb(206, 252, 223) 20%, rgb(229, 245, 243) 78%);
    /* background-color: #F3F4F6; */
    /* border-top-left-radius: 10rem; */
    border-bottom-right-radius: 10rem;
}
.suite{
    display: flex;
    justify-content: space-between;
}
.suite2{
    display: flex;
    justify-content: space-between;
}
.suite3{
    display: flex;
    justify-content: space-between;
}
.suite1{
    display: flex;
    justify-content: space-between;
    gap: 30px;
}
.w-wirado{
    font-size: 5rem;
    text-align: left;
}
.new{
    text-align: left;
    gap: 30px;
}
.w-wir-text.display-2{
    font-size: 3.5rem;
    z-index: 2;
}
.w-wir-text1{
    font-size: 20px;
}
.wir{
    color: #1eb6f9;
}
.w-wir-img1{
    display: block;
    text-align: left;
}
.opt1{
    display: inline-flex;
}
.opt2{
    display: inline-flex;
}
.yellow{
    position: relative;
    top: 20px;
    right: 225px;
}
.pink{
    position: relative;
    top: 20px;
    left: -385px;
}
@media (max-width: 768px) { /* Large Phones */
    .pink {
        left: 200px; /* Adjust for smaller screens */
    }
}
@media (min-width: 1920px) { /* Large Phones */
    .pink {
        position: absolute;
        left: 650px; /* Adjust for smaller screens */
        top: 160px;
    }
}
.blue{
    position: relative;
    top: -40px;
    right: 465px;
}
@media (max-width: 768px) { /* Large Phones */
    .blue {
        left: 200px; /* Adjust for smaller screens */
    }
}
.w-wirado1{
    text-align: center;
}
.w-wir-text2{
    font-size: 20px;
}
.suite4{
    display: flex;
    justify-content: space-between;
    gap: 40px;
    text-align: right;
}
.new2{
    text-align: left;
}
/* Hide the Google Translate iframe and banner */
.skiptranslate,
.VIpgJd-ZVi9od-ORHb-OEVmcd {
    display: none !important;
}

/* Ensure the body doesn't shift down */
body {
    top: 0px !important;
}


/* <-----------app---------> */
.display-1.mb-5.app{
    margin-bottom: 10px !important;
}
.col-lg-10.col-xl-9.app{
    width: 95%;
}

.data-sec{
    padding-top: 50px;
    font-family:sans-serif !important;
    font-size: medium !important;
    font-weight: 600;
}
.app0,.app11,.app2,.app3,.app5,.app6{
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-right: auto;
    width: 100%;
    gap: 20px;
}

/* .app_main{
    width: 640px;
    height: 320px;
    border-radius: 10px;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.5)
} */
.app001{
    width:50%;
    /* height: 40%; */
    object-fit: contain;
    align-items: center;
    flex-direction: column;
    /* margin-bottom: 30px; */
}
.app_maine,.app_main{
    width: 100%;
    height: 100%;
    font-family:sans-serif !important;
}
.p1{
    font-family:sans-serif !important;
    margin-bottom: 15px !important;
    font-size: 1.25rem !important;
    line-height: 1.2 !important;
}
.app002{
    font-family:sans-serif !important;
    font-size: 18px;
    font-weight: 400;
    margin-bottom: 0 !important;
    line-height: 1.5 !important;
}

.dlo{   
    background: linear-gradient(to bottom, #FFD587 20%, rgb(238, 241, 241) 78%);
    /* background-color: #F3F4F6; */
    border-top-left-radius: 10rem;
    /* border-bottom-right-radius: 10rem; */

    /* background: linear-gradient(to bottom, #FFCC6C 20%, rgb(240, 243, 247) 78%); */

    border-bottom-right-radius: 10rem;
    margin-bottom: 30px;
}

/* .app11{
    display: flex;
    justify-content: space-between;
    margin-left: 20px;
    margin-right: auto;
    width: 100%;
} */

.apptext1{
    width: 60%;
    display: block;
    gap: 10px;
    align-content: center;
}

.apptext01{
    font-family:sans-serif !important;
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 30px;
}

.apptext02{
    font-family:sans-serif !important;
    font-size: 20px;
    font-weight: 400;
    margin-bottom: 0 !important;
    line-height: 1.8 !important;
}

/* .app2{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-left: 20px;
    margin-right: auto;
    width: 100%;
} */

.apptext2{
    width: 60%;
    display: block;
    gap: 10px;
    align-content: center;
    justify-items: flex-end;
}

.apptext20{
    font-family:sans-serif !important;
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 30px;
}

.apptext21{
    font-family:sans-serif !important;
    font-size: 20px;
    font-weight: 400;
    margin-bottom: 0 !important;
    line-height: 1.8 !important;
    text-align: justify; /* Justify text */
}

/* .app3{
    display: flex;
    justify-content: space-between;
    margin-left: 20px;
    margin-right: auto;
    width: 100%;
} */

.apptext3{
    width: 60%;
    display: block;
    gap: 10px;
    align-content: center;
}

.apptext30{
    font-family:sans-serif !important;
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 30px;
}

.apptext31{
    font-family:sans-serif !important;
    font-size: 20px;
    font-weight: 400;
    margin-bottom: 0 !important;
    line-height: 1.8 !important;
}

.app4{
    display: flex;
    justify-content: space-between;
    margin-left: 20px;
    margin-right: auto;
    width: 100%;
}

.apptext4{
    width: 60%;
    display: block;
    gap: 10px;
    align-content: center;
}

.apptext40{
    font-family:sans-serif !important;
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 30px;
}

.apptext41{
    font-family:sans-serif !important;
    font-size: 20px;
    font-weight: 400;
    margin-bottom: 0 !important;
    line-height: 1.8 !important;
}

.dl4{ 
    margin-top: 30px !important;  
    background: linear-gradient(to bottom, #FFD587 20%, rgb(238, 241, 241) 78%);
    /* background-color: #F3F4F6; */
    border-top-left-radius: 10rem;
    /* border-bottom-right-radius: 10rem; */

    /* background: linear-gradient(to bottom, rgb(252, 234, 227) 20%, rgb(240, 243, 247) 78%); */

    border-bottom-right-radius: 10rem;
    margin-bottom: 50px !important;
}

/* .app5{
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    margin-right: auto;
    width: 100%;
    gap: 20px;
} */

/* .app_main{
    width: 640px;
    height: 320px;
    border-radius: 10px;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.5)
} */
.app51{
    font-family:sans-serif !important;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    font-size: 28px;
    font-weight: 700;
}

.app52{
    font-family:sans-serif !important;
    font-size: 18px;
    font-weight: 400;
    margin-bottom: 0 !important;
    line-height: 1.8 !important;
}

.dl5{   
    background: linear-gradient(to bottom, #FFD587 20%, rgb(238, 241, 241) 78%);
    /* background-color: #F3F4F6; */
    border-top-left-radius: 10rem;
    /* border-bottom-right-radius: 10rem; */

    /* background: linear-gradient(to bottom, rgb(252, 234, 227) 20%, rgb(240, 243, 247) 78%); */

    border-bottom-right-radius: 10rem;
    margin-bottom: 50px !important;
}

/* .app6{
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    margin-right: auto;
    width: 100%;
    gap: 20px;
} */

/* .app_main{
    width: 640px;
    height: 320px;
    border-radius: 10px;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.5)
} */
.app61{
    font-family:sans-serif !important;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    font-size: 28px;
    font-weight: 700;
}

.app62{
    font-family:sans-serif !important;
    font-size: 18px;
    font-weight: 400;
    margin-bottom: 0 !important;
    line-height: 1.8 !important;
}

.dl6{  
    margin-top: 50px !important; 
    background: linear-gradient(to bottom, #FFD587 20%, rgb(238, 241, 241) 78%);
    /* background-color: #F3F4F6; */
    border-top-left-radius: 10rem;
    /* border-bottom-right-radius: 10rem; */

    /* background: linear-gradient(to bottom, rgb(252, 234, 227) 20%, rgb(240, 243, 247) 78%); */

    border-bottom-right-radius: 10rem;
    margin-bottom: 30px;
}

.p2{
    font-family:sans-serif !important;
    font-size: 1.25rem !important;
    margin-bottom: 15px !important;
    line-height: 1.2 !important;
}
.dl1{   
    background: linear-gradient(to bottom, #FADFB8 20%, rgb(238, 241, 241) 78%);
    /* background-color: #F3F4F6; */
    border-top-left-radius: 10rem;
    /* border-bottom-right-radius: 10rem; */
}
/* .dl2{   
    background: linear-gradient(to bottom, rgb(210, 230, 248) 20%, rgb(252, 226, 215) 78%);
    
}
.dl3{   
    background: linear-gradient(to bottom, rgb(252, 226, 215) 20%, rgb(225, 237, 243) 78%);
    
    border-bottom-right-radius: 10rem;
} */
.wdp{
    color: orange;
}
.wdpa{
    color:#5F198B;
}
.wdpdw{
    color: #FBE300;
}
.wdpds{
    color:#0D4476;
}
.wdprp{
    color:#A2156D;
}
.wdped{
    color:#007314;
}
.wdpws{
    color: #1E96B6;
}
.wsa{
    color:#804E15
}
.wbp{
    color:#0A1A94;
}
.appmaint{
    font-family:sans-serif !important;
    font-size: 20px;
    font-weight: 400;
    margin-bottom: 0 !important;
    line-height: 1.8 !important;
}

.endsen{
    font-family: "Caveat" !important;
    font-size: 3rem !important;
    text-align: center;
    margin-bottom: 2rem !important;
}
.s_wd_users{
    padding-top: 0rem !important;
    border-top: 2px solid transparent !important;
}
.s_wd_users .container{
    min-height:2rem !important;
}
/* .signin,.trial_link{
    display:none;
} */
/* .app_maine{
    font-family:sans-serif !important;
    width: 540px;
    height: 300px;
    border-radius: 10px;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.5)
} */

/* -----------------antivirus */
.dloa{  
    border-top-left-radius: 10rem;
    background: linear-gradient(to bottom, #D1BADF 20%, rgb(238, 241, 241) 78%);

    border-bottom-right-radius: 10rem;
    margin-bottom: 30px;
}
.dla4{ 
    margin-top: 30px !important;  
    background: linear-gradient(to bottom, #D1BADF 20%, rgb(238, 241, 241) 78%);
    /* background-color: #F3F4F6; */
    border-top-left-radius: 10rem;

    border-bottom-right-radius: 10rem;
    margin-bottom: 50px !important;
}
.dla5{   
    background: linear-gradient(to bottom, #D1BADF 20%, rgb(238, 241, 241) 78%);
    /* background-color: #F3F4F6; */
    border-top-left-radius: 10rem;

    border-bottom-right-radius: 10rem;
    margin-bottom: 50px !important;
}
.dla6{  
    margin-top: 50px !important; 
    background: linear-gradient(to bottom, #D1BADF 20%, rgb(238, 241, 241) 78%);
    /* background-color: #F3F4F6; */
    border-top-left-radius: 10rem;

    border-bottom-right-radius: 10rem;
    margin-bottom: 30px;
}



/* -----------------desktop watermark */
.dlodw{  
    border-top-left-radius: 10rem;
    background: linear-gradient(to bottom, #FFFBD9 20%, rgb(238, 241, 241) 78%);

    border-bottom-right-radius: 10rem;
    margin-bottom: 30px;
}
.dldw4{ 
    margin-top: 30px !important;  
    background: linear-gradient(to bottom, #FFFBD9 20%, rgb(238, 241, 241) 78%);
    /* background-color: #F3F4F6; */
    border-top-left-radius: 10rem;

    border-bottom-right-radius: 10rem;
    margin-bottom: 50px !important;
}
.dldw5{   
    background: linear-gradient(to bottom, #FFFBD9 20%, rgb(238, 241, 241) 78%);
    /* background-color: #F3F4F6; */
    border-top-left-radius: 10rem;

    border-bottom-right-radius: 10rem;
    margin-bottom: 50px !important;
}
.dldw6{  
    margin-top: 50px !important; 
    background: linear-gradient(to bottom, #FFFBD9 20%, rgb(238, 241, 241) 78%);
    /* background-color: #F3F4F6; */
    border-top-left-radius: 10rem;

    border-bottom-right-radius: 10rem;
    margin-bottom: 30px;
}

/* -----------------data sanitize */
.dlods{  
    border-top-left-radius: 10rem;
    background: linear-gradient(to bottom, #AAC9E4 20%, rgb(238, 241, 241) 78%);

    border-bottom-right-radius: 10rem;
    margin-bottom: 30px;
}
.dlds4{ 
    margin-top: 30px !important;  
    background: linear-gradient(to bottom, #AAC9E4 20%, rgb(238, 241, 241) 78%);    /* background-color: #F3F4F6; */
    border-top-left-radius: 10rem;

    border-bottom-right-radius: 10rem;
    margin-bottom: 50px !important;
}
.dlds5{   
    background: linear-gradient(to bottom, #AAC9E4 20%, rgb(238, 241, 241) 78%);    /* background-color: #F3F4F6; */
    border-top-left-radius: 10rem;

    border-bottom-right-radius: 10rem;
    margin-bottom: 50px !important;
}
.dlds6{  
    margin-top: 50px !important; 
    background: linear-gradient(to bottom, #AAC9E4 20%, rgb(238, 241, 241) 78%);    /* background-color: #F3F4F6; */
    border-top-left-radius: 10rem;

    border-bottom-right-radius: 10rem;
    margin-bottom: 30px;
}

/* -----------------ransomware protection */
.dlorp{  
    border-top-left-radius: 10rem;
    background: linear-gradient(to bottom, #F6D9EB 20%, rgb(238, 241, 241) 78%);

    border-bottom-right-radius: 10rem;
    margin-bottom: 30px;
}
.dlrp4{ 
    margin-top: 30px !important;  
    background: linear-gradient(to bottom, #F6D9EB 20%, rgb(238, 241, 241) 78%);
    border-top-left-radius: 10rem;

    border-bottom-right-radius: 10rem;
    margin-bottom: 50px !important;
}
.dlrp5{   
    background: linear-gradient(to bottom, #F6D9EB 20%, rgb(238, 241, 241) 78%);
    border-top-left-radius: 10rem;

    border-bottom-right-radius: 10rem;
    margin-bottom: 50px !important;
}
.dlrp6{  
    margin-top: 50px !important; 
    background: linear-gradient(to bottom, #F6D9EB 20%, rgb(238, 241, 241) 78%);
    border-top-left-radius: 10rem;

    border-bottom-right-radius: 10rem;
    margin-bottom: 30px;
}

/* -----------------edr */
.dloed{  
    border-top-left-radius: 10rem;
    background: linear-gradient(to bottom, #C8F0A4 20%, rgb(238, 241, 241) 78%);

    border-bottom-right-radius: 10rem;
    margin-bottom: 30px;
}
.dled4{ 
    margin-top: 30px !important;  
    background: linear-gradient(to bottom, #C8F0A4 20%, rgb(238, 241, 241) 78%);
    border-top-left-radius: 10rem;

    border-bottom-right-radius: 10rem;
    margin-bottom: 50px !important;
}
.dled5{   
    background: linear-gradient(to bottom, #C8F0A4 20%, rgb(238, 241, 241) 78%);
    border-top-left-radius: 10rem;

    border-bottom-right-radius: 10rem;
    margin-bottom: 50px !important;
}
.dled6{  
    margin-top: 50px !important; 
    background: linear-gradient(to bottom, #C8F0A4 20%, rgb(238, 241, 241) 78%);
    border-top-left-radius: 10rem;

    border-bottom-right-radius: 10rem;
    margin-bottom: 30px;
}

/* -----------------wirado secure socket */
.dlows,.dlws4,.dlws5,.dlws6{
    border-top-left-radius: 10rem;
    background: linear-gradient(to bottom, #BFE4ED 20%, rgb(238, 241, 241) 78%);
    border-bottom-right-radius: 10rem;

}
.dlows{    
    margin-bottom: 30px;
}
.dlws4{ 
    margin-top: 30px !important;  
    margin-bottom: 50px !important;
}
.dlws5{   
    margin-bottom: 50px !important;
}
.dlws6{  
    margin-top: 50px !important; 
    margin-bottom: 30px;
}

/* ---------------------------------security assessment */
.wsao,.wsa1,.wsa2,.wsa3{  
    border-top-left-radius: 10rem;
    background: linear-gradient(to bottom, #FFD8AA 20%, rgb(238, 241, 241) 78%);

    border-bottom-right-radius: 10rem;
    margin-bottom: 30px;
}
/* ----------------------------------become a partner */
.wbpo,.wbp1,.wbp2,.wbp3,.wbp4{  
    border-top-left-radius: 10rem;
    background: linear-gradient(to bottom, #78ADEA 20%, rgb(238, 241, 241) 78%);

    border-bottom-right-radius: 10rem;
    margin-bottom: 30px;
}
.ant-text{
    position: relative;
    top: -190px;
    right: 20px;
    color: #292827;
    text-align: center;
    font-family: "Caveat";
    font-size: 2.5rem;
    transform: rotate(-10deg);
}

.right-arrw{
    transform: rotate(-100deg);
    position: relative;
    left: -380px;
    top:-200px;
    width: 140px;
}

@media (min-width: 1920px){
    .ant-text{
        position: relative;
        top: -190px;
        right: -40px;
        color: #292827;
        text-align: center;
        font-family: "Caveat";
        font-size: 2.5rem;
        transform: rotate(-10deg);
    }
    
    .right-arrw{
        transform: rotate(-100deg);
        position: relative;
        left: -380px;
        top:-200px;
        width: 140px;
    }
}





/* breach layers  */
.layers-container {
    font-family: 'Segoe UI', Arial, sans-serif;
    /* display: flex; */
    display:block;
    align-items: center;
    margin-bottom: 5px;
    margin-right: 5px;
    /* gap: 60px; */
    gap:10px;
    width:100%;
  }

  .layer-row {
    display: flex;
    /* gap: 10px; */
    gap:3px;
    /* justify-content: center; */
    justify-content: flex-start;

  }

  .layer-segment {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* position: relative; */
    justify-content: space-between;
    /* width: auto; */
    cursor: pointer;
    border:1px solid #f3f5f2;
    border-radius: 5px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    width: 160px;
  }
  .layer-segment:nth-child(1),.layer-segment:nth-child(2){
    width: 173px;
  }
  .layer-segment:nth-child(3){
    width: 205px;
  }
  .layer-segment:nth-child(4){
    width: 185px;
  }
 .layer-segment:nth-child(5){
    width: 205px;
  }
  .layer-segment:nth-child(6){
    width: 185px;
  }
  .layer-segment:nth-child(10){
    width: 150px;
  }
  .layer-segment:nth-child(8){
    width: 95px;
  }
  .layer-segment:nth-child(12){
    width: 85px;
  }
  .layer-segment:nth-child(9),.layer-segment:nth-child(11){
    width: 125px;
  }

    .layer-segment:hover::after{
        content: "";
        position: absolute;
        top: 250%;
        /* left: 20px; */
        width: 200px;
        height: 100px;
        border-radius: 7px;
        background-color: white;
        box-shadow: 5px 5px 8px rgba(0, 0, 0, 0.2);
        border: 1px solid rgb(71, 71, 71);
        z-index: 1000;
        transform: translateY(-50%);
        transition: left 0.2s ease-in-out;
        opacity: 0.9;
    }

  .layer-info {
    /* display: flex; */
    /* align-items: flex-end; */
    /* font-size: 12px; */
    width: 100%;
    padding: 0px 5px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 5px;
    font-size: 12px;
  }

  .layer-number {
    font-size: 30px;
    /* font-weight: bold; */
    line-height: 1;
  }

  .layer-labels {
    display: flex;
    flex-direction: column;
    font-size: 10px;
  }

  .layer-title {
    font-weight: normal;
    /* margin-bottom: 2px; */
  }

  .layer-subtitle {
    /* font-weight: bold; */
    font-size: 10px;
  }

  .lock-icon {
    font-size: 20px;
    color: #f4b400;
    z-index: 1;
    display: flex;
    align-self: center;
  }

  .bar {
    /* margin-top: 5px;
    height: 3px;
    width: 100%;
    border-radius: 6px;
    box-shadow: 2px 4px 5px rgba(0, 0, 0, 0.2);
    position: relative; */
    display: flex;
    align-items: flex-end;
    height: 2px;
    width: 100%;
    /* border-radius: 6px; */
    box-shadow: 2px 4px 5px rgba(0, 0, 0, 0.2);
    position: relative;
  }

  .bar-fill {
    height: 3px;
    top: 2px;
    position: absolute;
    left: 0;
    /* border-radius: 6px; */
  }

  .layerline{
    height: 2px;
    width: 40px;;
  }
  /* Layer-specific colors */
  .layer1 .layer-number { color: #FFC74E; }
  .layer1 .layer-subtitle { color: #FFC74E; }
  .layer1 .bar { background: #FFC74E; }
  .layer1 .layerline { background: #FFC74E; }

  .layer2 .layer-number { color: #F88F4E; }
  .layer2 .layer-subtitle { color: #F88F4E; }
  .layer2 .bar { background: #F88F4E; }
  .layer2 .layerline { background: #F88F4E; }

  .layer3 .layer-number { color: #009FC7; }
  .layer3 .layer-subtitle { color: #009FC7; }
  .layer3 .bar { background: #009FC7; }
  .layer3 .layerline { background: #009FC7; }

  .layer4 .layer-number { color: #7b7b7b; }
  .layer4 .layer-subtitle { color: #7b7b7b; }
  .layer4 .bar { background: #AFABAB; }
  .layer4 .layerline { background: #7b7b7b; }

  .layer5 .layer-number { color: #2EAA6E; }
  .layer5 .layer-subtitle { color: #2EAA6E; }
  .layer5 .bar { background: #2EAA6E; }
  .layer5 .layerline { background: #2EAA6E; }

  .layer6 .layer-number { color: #2E75B6; }
  .layer6 .layer-subtitle { color: #2E75B6; }
  .layer6 .bar { background: #2E75B6; }
  .layer6 .layerline { background: #2E75B6; }

  .layer-segment.unlocked .layer-number, .layer-segment.unlocked .layer-subtitle {
    color: #ff1744 ;
  }
  .layer-segment.unlocked .layerline {
    background: #ff1744 ;
  }

  .layer7 .layer-number { color: #171874; }
  .layer7 .layer-subtitle { color: #171874; }
  .layer7 .bar { background: #171874; }
  .layer7 .layerline { background: #171874; }

  
  @media(max-width:1280px){
        .layers-container {
    font-family: 'Segoe UI', Arial, sans-serif;
    display: flex;
    align-items: center;
    margin-bottom: 5px;
    margin-right: 5px;
    /* gap: 60px; */
  }

  .layer-row {
    display: flex;
    gap: 10px;
    justify-content: center;
  }

  .layer-segment {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
    width: auto;
    cursor: pointer;
  }

   .layer-segment:hover::after{
        content: "";
        position: absolute;
        top: 255%;
        /* left: 20px; */
        width: 200px;
        height: 100px;
        border-radius: 7px;
        background-color: white;
        box-shadow: 5px 5px 8px rgba(0, 0, 0, 0.2);
        border: 1px solid rgb(71, 71, 71);
        z-index: 1000;
        transform: translateY(-50%);
        transition: left 0.2s ease-in-out;
        opacity: 0.9;
    }

  .layer-info {
    display: flex;
    align-items: flex-end;
    font-size: 10px;
  }

  .layer-number {
    font-size: 26px;
    /* font-weight: bold; */
    line-height: 1;
  }

  .layer-labels {
    display: flex;
    flex-direction: column;
    font-size: 8px;
  }

  .layer-title {
    font-weight: normal;
    /* margin-bottom: 2px; */
  }

  .layer-subtitle {
    /* font-weight: bold; */
    font-size: 8px;
  }

  .lock-icon {
    font-size: 20px;
    color: #f4b400;
    z-index: 1;
  }

  .lucide-lock-icon {
    width: 22px !important;
    height: 22px !important;
    }  
    
 .lucide-lock-open-icon {
    width: 22px !important;
    height: 22px !important;
    }

  .bar {
    margin-top: 5px;
    height: 3px;
    width: 100%;
    /* border-radius: 6px; */
    box-shadow: 2px 4px 5px rgba(0, 0, 0, 0.2);
    position: relative;
  }

  .bar-fill {
    height: 3px;
    top: 2px;
    position: absolute;
    left: 0;
    /* border-radius: 6px; */
  }

  .layerline{
    height: 2px;
    width: 40px;;
  }
  }

  @media(min-width:1600px){
    .layer-segment {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
    width: auto;
    cursor: pointer;
  }
   .layer-segment:hover::after{
        content: "";
        position: absolute;
        top: 215%;
        /* left: 20px; */
        width: 200px;
        height: 100px;
        border-radius: 7px;
        background-color: white;
        box-shadow: 5px 5px 8px rgba(0, 0, 0, 0.2);
        border: 1px solid rgb(71, 71, 71);
        z-index: 1000;
        transform: translateY(-50%);
        transition: left 0.2s ease-in-out;
        opacity: 0.9;
    }
  /* .layer-info {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    font-size: 14px;
  } */

  .layer-number {
    font-size: 38px;
    /* font-weight: bold; */
    line-height: 1;
  }

  .layer-labels {
    display: flex;
    flex-direction: column;
    font-size: 12px;
  }

  .layer-title {
    font-weight: normal;
    margin-bottom: 2px;
  }
  .layer-subtitle {
    /* font-weight: bold; */
    font-size: 12px;
  }

  .lock-icon {
    font-size: 28px;
    color: #f4b400;
    z-index: 1;
  }

  .bar {
    margin-top: 5px;
    height: 3px;
    width: 100%;
    /* border-radius: 6px; */
    box-shadow: 2px 4px 5px rgba(0, 0, 0, 0.2);
    position: relative;
  }

  .bar-fill {
    height: 4px;
    top: 2px;
    position: absolute;
    left: 0;
    /* border-radius: 6px; */
  }
  }
  @media(min-width:1920px){
    /* .layers-container {
    font-family: 'Segoe UI', Arial, sans-serif;
    display: flex;
    align-items: center;
    gap: 60px;
  }

  .layer-row {
    display: flex;
    gap: 10px;
    justify-content: center;
  }

  .layer-segment {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
    width: auto;
    cursor: pointer;
  } */

   .layer-segment:hover::after{
        content: "";
        position: absolute;
        top: 200%;
        /* left: 20px; */
        width: 200px;
        height: 100px;
        border-radius: 7px;
        background-color: white;
        box-shadow: 5px 5px 8px rgba(0, 0, 0, 0.2);
        border: 1px solid rgb(71, 71, 71);
        z-index: 1000;
        transform: translateY(-50%);
        transition: left 0.2s ease-in-out;
        opacity: 0.9;
    }

  /* .layer-info {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    font-size: 14px;
  } */

  .layer-number {
    font-size: 48px;
    /* font-weight: bold; */
    line-height: 1;
  }

  .layer-labels {
    display: flex;
    flex-direction: column;
    font-size: 14px;
  }

  .layer-title {
    font-weight: normal;
    margin-bottom: 2px;
  }

  .layer-subtitle {
    /* font-weight: bold; */
    font-size: 14px;
  }

  .lock-icon {
    font-size: 30px;
    color: #f4b400;
    z-index: 1;
  }

  .bar {
    margin-top: 5px;
    height: 2px;
    width: 100%;
    /* border-radius: 6px; */
    box-shadow: 2px 4px 5px rgba(0, 0, 0, 0.2);
    position: relative;
  }

  .bar-fill {
    height: 2px;
    top: 2px;
    position: absolute;
    left: 0;
    /* border-radius: 6px; */
  }

  .layerline{
    height: 2px;
    width: 40px;;
  }
  /* Layer-specific colors */
  .layer1 .layer-number { color: #FFC74E; }
  .layer1 .layer-subtitle { color: #FFC74E; }
  .layer1 .bar { background: #FFC74E; }
  .layer1 .layerline { background: #FFC74E; }

  .layer2 .layer-number { color: #F88F4E; }
  .layer2 .layer-subtitle { color: #F88F4E; }
  .layer2 .bar { background: #F88F4E; }
  .layer2 .layerline { background: #F88F4E; }

  .layer3 .layer-number { color: #009FC7; }
  .layer3 .layer-subtitle { color: #009FC7; }
  .layer3 .bar { background: #009FC7; }
  .layer3 .layerline { background: #009FC7; }

  .layer4 .layer-number { color: #7b7b7b; }
  .layer4 .layer-subtitle { color: #7b7b7b; }
  .layer4 .bar { background: #AFABAB; }
  .layer4 .layerline { background: #7b7b7b; }

  .layer5 .layer-number { color: #2EAA6E; }
  .layer5 .layer-subtitle { color: #2EAA6E; }
  .layer5 .bar { background: #2EAA6E; }
  .layer5 .layerline { background: #2EAA6E; }

  .layer6 .layer-number { color: #2E75B6; }
  .layer6 .layer-subtitle { color: #2E75B6; }
  .layer6 .bar { background: #2E75B6; }
  .layer6 .layerline { background: #2E75B6; }

  .layer-segment.unlocked .layer-number, .layer-segment.unlocked .layer-subtitle {
    color: #ff1744;
  }
  .layer-segment.unlocked .layerline {
    background: #ff1744;
  }

  .layer7 .layer-number { color: #171874; }
  .layer7 .layer-subtitle { color: #171874; }
  .layer7 .bar { background: #171874; }
  .layer7 .layerline { background: #171874; }
  }


  @keyframes heartbeat {
    0% {
        transform: scale(1);
    }
    20% {
        transform: scale(1.1);
    }
    40% {
        transform: scale(1);
    }
    60% {
        transform: scale(1.1);
    }
    80% {
        transform: scale(1);
    }
    100% {
        transform: scale(1);
    }
    }
    
    .bar.red-glow {
        animation: redGlow 0.8s infinite alternate;
        }

        @keyframes redGlow {
            0%   { box-shadow: 0 0 2px 0.5px #ff1744, 0 0 3px 1px #ff5252; }
            50%  { box-shadow: 0 0 3px 1px #ff5252, 0 0 4px 1px #ff1744; }
            100% { box-shadow: 0 0 2px 0.5px #ff1744, 0 0 3px 1px #ff5252; }
        }
    .heartbeat {
        animation: heartbeat 1.2s infinite;
        /* Optional: smooth out the animation */
        animation-timing-function: ease-in-out;
        /* Optional: set transform origin to center */
        transform-origin: center;
        display: inline-block;
    }



    /* Section - Antivirus & Buy Now pages-----------------------------------------------------------------------------------*/

    .o_control_panel_main {
        margin-bottom: 0;
    }
    .nav-panel {
        display: flex;
        margin-bottom: 10px;
        position: sticky;
        right: 0; /* Aligns it to the right */
        left: auto; /* Ensure left is not overriding */
        justify-content: flex-end; /* Ensures content is aligned right */
        z-index: 1000;
        width: 100%; /* Makes sure it spans full width */
    }

    @media(max-width:1600px){
        .sen-data, .norm-data,.junk-data,.onl-data,.cloud-data{
        font-size: 10px;
        text-wrap-mode: nowrap;
        }
    }
    .sen-data{
        text-wrap-mode: nowrap;
        cursor: pointer;
        width: auto;
        background-color:  #fdcdc9;
        border-radius: 5px;
        margin: 5px;
        padding: 0 10px 0 10px;
        box-shadow: -2px 2px 5px rgba(0, 0, 0, 0.3);
        align-content: center;
    }
    .norm-data{
        text-wrap-mode: nowrap;
        cursor: pointer;
        width: auto;
        background-color: #f2cfee;
        border-radius: 5px;
        margin: 5px;
        padding: 0 10px 0 10px;
        box-shadow: -2px 2px 5px rgba(0, 0, 0, 0.3);
        align-content: center;
    }
    .junk-data{
        text-wrap-mode: nowrap;
        cursor: pointer;
        width: auto;
        background-color: #d9d9d9;
        border-radius: 5px;
        margin: 5px;
        padding: 0 10px 0 10px;
        box-shadow: -2px 2px 5px rgba(0, 0, 0, 0.3);
        align-content: center;
    }
    .onl-data{
        text-wrap-mode: nowrap;
        cursor: pointer;
        width: auto;
        background-color: #c8e9f5;
        border-radius: 5px;
        margin: 5px;
        padding: 0 10px 0 10px;
        box-shadow: -2px 2px 5px rgba(0, 0, 0, 0.3);
        align-content: center;
    }
    .cloud-data{
        text-wrap-mode: nowrap;
        cursor: pointer;
        display: flex;
        width: auto;
        background-color: #dceaf7;
        border-radius: 5px;
        margin: 5px;
        padding: 0 10px 0 10px;
        box-shadow: -2px 2px 5px rgba(0, 0, 0, 0.3);
        align-content: center;  
    }
    .cloud-cont{
        align-content: center;  
        padding-left: 10px;
    }
    .sen-data:hover, .norm-data:hover, .junk-data:hover, .onl-data:hover, .cloud-data:hover {
        transform: translateY(-3px) scale(1.05); /* Lift and enlarge on hover */
    }

    .sen-data:active, .norm-data:active, .junk-data:active, .onl-data:active, .cloud-data:active {
        transform: translateY(2px) scale(1); /* Push down effect on click, maintain original size */
    }

    .sen-data:focus, .norm-data:focus, .junk-data:focus, .onl-data:focus, .cloud-data:focus {
        outline: none; /* Remove focus outline */
        box-shadow: 0 0 0 2px #949393; /* Soft dark blue shadow on focus */
    }
    .sen-data:hover::after,.norm-data:hover::after,.junk-data:hover::after,.onl-data:hover::after,.cloud-data:hover::after{
        content: "";
        position: absolute;
        top: 340%;
        left: -120px;
        width: 220px;
        height: 150px;
        border-radius: 7px;
        background-color: white;
        box-shadow: 5px 5px 8px rgba(0, 0, 0, 0.2); 
        z-index: 1000;
        transform: translateY(-50%);
        transition: left 0.2s ease-in-out;
    }

    /* Flip the box to the left when it is near the right screen edge */
    .cloud-data.flip:hover::after {
        left: auto;
        right: 30px; /* Moves it to the left */
    }
    .container-wrapper-anth {
        display: flex;
        flex-direction: column; /* Stacks elements vertically */
        margin-right: 3px;
        align-items: center;
        justify-content: center;
    }
    .content-container{
        /* display: flex; */
        overflow-y: auto;
        overflow-x: hidden;
        flex-grow: 1;
        max-width: 100%;
        min-width: 0; /* Prevents flexbox from shrinking */
        height: 100%;
    }
    .o_content.o_component_with_search_panel {
        overflow: hidden !important;
    }
    .buy{
        position: relative;
        top: 200px;
        /* margin-left: 300px; */
        height: 75px;
        width: 225px;
    }
    .buy:hover{
        cursor: pointer;
    }




/* Sidebar Section */
.o_spreadsheet_dashboard_search_panel.o_search_panel {
    padding-left: 0px !important;
    padding-right: 1px;
}
.o_search_panel_section_header{
    padding-left: 5px;
    padding-right: 5px;
    z-index: 10;
    padding-top: 16px;
    padding-bottom: 16px;
    cursor: pointer;
}
.list-group{
    padding-top: 10px !important;
    padding-left: 40px !important;
}
.list-group-item.active, .o_search_panel_category_value:hover{
    color: white;
    background-color: #D5D6D7 !important;
    border: 1px solid #D5D6D7 !important;
    border-radius: 10px;
    margin: 2px 0px;
}
.o_dashboard_name:hover{
    color: white;
    background-color: #D5D6D7 !important;
}
.list-group-item.active, .o_search_panel_category_value:hover{
    color: white;
    background-color: #D5D6D7 !important;
    border: 1px solid #D5D6D7 !important;
    border-radius: 10px;
    margin: 2px 0px;
}
.o_dashboard_name:hover{
    color: white;
    background-color: #D5D6D7 !important;
}
/* Hover State (Full text appears) */
.o_search_panel_category_value:hover .o_dashboard_name {
    width: 400px; /* Remove truncation */
    white-space: normal; /* Allow text to wrap and expand */
}
.o_spreadsheet_dashboard_search_panel{
    padding-top: 20px;
}
.o_search_panel_category_value::before {
  content: "";
  position: absolute;
  top: -10%;
  left: -12px; /* adjust based on padding */
  width: 12px;
  min-height: 37px;
  border-left: 2px solid #D5D6D7 !important;
  border-bottom: 2px solid #D5D6D7;
  border-bottom-left-radius: 6px;
  transform: translateY(-50%);
  z-index: 0;
}
.btn.btn-light.btn-sm.end-0{
    padding-right: 0px !important;
    margin-right: 0px !important;
}
.btn.btn-light.btn-sm.end-0:hover{
    background-color: white;
    border-color: white;
}
.appicon{
    margin-right: 5px;
}

.fsect{
    margin-right: 5px;
    display: flex;
    align-self: center;
}
.list-group-item.at{
    /* border: 1px solid #000012 !important; */
    padding: 4px 8px !important;
}
.list-group-item.at:hover,.list-group-item.at .o_dashboard_name.at:hover{
    cursor: pointer;
    color: white !important;
    background-color: #D5D6D7 !important;
    border-color: #D5D6D7 !important;
    border-radius: 10px !important;
}
.o_spreadsheet_dashboard_search_panel.no-transition {
    transition: none !important;
}
/* === Sidebar Panel Base State (Expanded) === */
.o_spreadsheet_dashboard_search_panel {
    width: 240px;
    padding-left: 1rem;
    padding-right: 1rem;
    overflow: hidden; /* prevent layout reflow during animation */
    transition: width 800ms ease, padding 800ms ease;
}

/* === Sidebar Collapsed State === */
 .o_spreadsheet_dashboard_search_panel.collapsed {
    width: 33px;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

/* === Text Labels (Visible in Expanded State) === */
 .o_spreadsheet_dashboard_search_panel .lsect,
 .o_spreadsheet_dashboard_search_panel .o_dashboard_name {
    opacity: 1;
    transform: translateX(0);
    transition: opacity 300ms ease 100ms, transform 300ms ease 100ms;
    white-space: nowrap;
}
.o_spreadsheet_dashboard_search_panel.fade-in .lsect,
.o_spreadsheet_dashboard_search_panel.fade-in .o_dashboard_name {
    opacity: 1;
    transform: translateX(0);
}

/* === Text Labels Hidden in Collapsed State === */
 .o_spreadsheet_dashboard_search_panel.collapsed .lsect,
 .o_spreadsheet_dashboard_search_panel.collapsed .o_dashboard_name {
    opacity: 0;
    transform: translateX(-10px);
    transition: opacity 300ms ease, transform 300ms ease;
    /* pointer-events: none; */
    overflow: hidden;
}

/* === Optional: Icon Rotation for Collapse Toggle Button === */
.sidebar-toggle-icon {
    transition: transform 400ms ease;
}

.o_spreadsheet_dashboard_search_panel.collapsed .sidebar-toggle-icon {
    transform: rotate(180deg);
}

.o_spreadsheet_dashboard_search_panel.collapsed .o_search_panel_section.o_search_panel_category .o_search_panel_section_header .fsect{
    display: flex;
    justify-content: center;
}
 .o_spreadsheet_dashboard_search_panel.collapsed .o_search_panel_section.o_search_panel_category .o_search_panel_section_header .lsect{
    width: 0%;
}
.list-group{
    padding-top: 10px;
    padding-left: 40px;
} 
.list-group-item.at{
    color: #111827 !important;
    border-radius: 10px;
} 

.lsect.edr {
    position: relative;
    height: 22px;
    overflow: hidden;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 4px;
}

.scrolling-text {
    display: inline-block;
    white-space: nowrap;
    transform: translateX(0);
}

.hover-scroll {
    animation: scrollText 12s ease-in-out 1;
}
@keyframes scrollText {
    0% {
        transform: translateX(0%);
    }
    50% {
        transform: translateX(-35%);
    }
    100% {
        transform: translateX(0);
    }
}
    /* Section - Common CSS in dlp, edr, ransom , antiv, swot, deskw -----------------------------------------*/

    
    .pagination {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 10px;
        gap: 5px;
        position: sticky;
        bottom: 0;
        background: white;
    }

    .pagination button {
        padding: 5px 10px;
        border: 1px solid #ccc;
        background-color: #f1f1f1;
        cursor: pointer;
    }

    .pagination button:hover {
        background-color: #ddd;
    }


    /* Section - Ransomware Protection CSS ----------------------------------------------------------------- */
    /* Ransomware Prot Home */
    .stats-cont{
        width:100%;
        padding:10px;
        height:70%
        /* display: flex; */
        /* justify-content: space-between; */
    }
    /* Modal Background - Hidden by Default */
    .modal {
        visibility: hidden; /* Prevents flashing */
        opacity: 0; /* Makes it invisible */
        transition: opacity 0.3s ease-in-out; /* Smooth fade-in effect */
        position: fixed;
        z-index: 1000;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.3); 
        display: flex;
        justify-content: center;
        align-items: center;
    }

    /* Ensure it's visible when active */
    .modal.show {
        visibility: visible;
        opacity: 1;
    }


    /* Modal Box */
    .modal-content {
        background-color: #fff;
        padding: 20px;
        height:70%;
        width: 80%;
        border-radius: 8px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
        position: relative;
    }

    /* Close Button */
    .close-btn {
        position: absolute;
        top: 10px;
        right: 15px;
        font-size: 20px;
        cursor: pointer;
    }

    /* Header (Search & Add Button) */
    .modal-header {
        display: flex;
        gap: 10px;
        align-items: center;
        justify-content: center;
    }

    /* Search Input */
    .search-input {
        width: 20%;
        /* flex-grow: 1; */
        padding: 8px;
        border: 1px solid #ccc;
        border-radius: 5px;
    }

    /* Search Button */
    .search-btn, .add-btn {
        padding: 8px 12px;
        border: none;
        border-radius: 5px;
        background-color: #4CAF50;
        color: white;
        cursor: pointer;
    }

    /* Add Button */
    .add-btn {
        background-color: #007BFF;
    }
    .connect-host{
        font-weight: 200;
        background-color: #d9d9d9;
        border-radius: 5px;
        border-color:  #d9d9d9;
        border: none;
        box-shadow: -2px 2px 5px rgba(0, 0, 0, 0.3);
        height: 100%;
        font-size: 13px;
        padding: 0 10px 0 10px;
    }
    .connect-host:hover {
    transform: translateY(-3px) scale(1.05); /* Lift and enlarge on hover */
    }
    .connect-host:active {
        transform: translateY(2px) scale(1); /* Push down effect on click, maintain original size */
    }
    .connect-host:focus {
        outline: none; /* Remove focus outline */
    }
    .ld-btn{
        display: inline-flex;
        /* font-weight: 600; */
        padding: 0px;
        border: none;
        width: 90px;
        /* height:28px; */
        justify-content: center;
        background-color: #f2cfee;
        border-radius: 5px;
        box-shadow: -2px 2px 5px rgba(0, 0, 0, 0.3);
        /* background-color: white; */
    }
    .ld-btn:hover {
    transform: translateY(-3px) scale(1.05); /* Lift and enlarge on hover */
    }
    .ld-btn:active {
        transform: translateY(2px) scale(1); /* Push down effect on click, maintain original size */
    }
    .ld-btn:focus {
        outline: none; /* Remove focus outline */
    }
    .btnc{
        border: none;
        border-radius: 5px;
        border: none;
        background: none;
        width: 40px;
        height: 19.5px;
        font-size: small;
        text-align: center;
    }
    /* Press Effect */
    .btnc:active {
        transform: scale(0.85);
    }
    .sub_ransom{
        display: flex; 
        justify-content: space-between;
    }
    .infocon{
        position:relative;
        display: inline-block;
        cursor: pointer;
        left: 0;
        top: -5px;
    }
    .infocon:hover::after{
        content: "";
        position: absolute;
        top: 230%;
        left: 50px;
        width: 220px;
        height: 150px;
        border-radius: 7px;
        background-color: white;
        box-shadow: 5px 5px 8px rgba(0, 0, 0, 0.2); 
        z-index: 1000;
        transform: translateY(-50%);
        transition: left 0.2s ease-in-out;
    }

    /* Flip the box to the left when it is near the right screen edge */
    .infocon.flip:hover::after {
        left: auto;
        right: 30px; /* Moves it to the left */
    }
    .alert{
        display: block; 
        align-items: start; 
        justify-content: start;
        padding-top: 10px;
    }
    .alert-cont{
        display: flex;
        justify-content: space-between;
        margin-bottom: 0;
        padding-top: 0;
        padding-bottom: 3px;
    }

    .separator-line {
        border: none;
        height: 2px;
        background-color: #4d4c4c; /* Light grey line */
        margin-top: 10px;
        margin-bottom: 15px;
    }

    .vert-line{
        width: 1px; 
        height: 50px; 
        background-color: #868686;
    }
    .storage,.secure,.data-del,.cnhost{
        display: flex; 
        align-items: center; 
        justify-content: space-between;
    }
    .hcon{
        width: 200px;
        height: 80px;
        border-radius: 10px;
        background-color: white;
        margin-top: 20px; 
        padding-top: 20px;
    }
    h5{
        color: rgb(11, 54, 91);
        font-weight: 400;
    }
    .btnn{
        background: none;
        border: none;
        border-radius: 5px;
        width: 40px;
        height: 19.5px;
        font-size: small;
        text-align: center;
        
    }
    .container-wrapper-cmh , .container-wrapper-dlph {
        display: flex;
        flex-direction: column; /* Stacks elements vertically */
        margin-right: 5px;
    }
    .chart-container {
        padding: 10px;
        text-align: center;
        width: 100%;
        height: 135px;
        /* background-color: #f3f5f2; */
        background-color: white;
        border: 1px solid #ebdddd;
        /* border-color:#d8e4d4 ; */
        border-radius: 15px;
    }
    @media (min-width: 1920px) { 
        .chart-container {
            gap: 10px;                          
            align-items: flex-start;
            padding: 20px;

        }
        .toggle-switch {
            position: relative;
            display: inline-block;
            left: 50px;
            width: 10px;
            height: 24px;
        }
        .slider {
            left: -65px;
            position: absolute;
            cursor: pointer;
            background-color: #ccc;
            border-radius: 24px;
            width: 55px;
            height: 100%;
            transition: background-color 0.3s;
        }
        .storage,.secure,.data-del,.cnhost{
            display: flex; 
            align-items: center; 
            justify-content: center;
            gap: 60px;
        }
    } 
    .chart-container:hover {
        /* transform: translateY(-3px) scale(1.02);   */
        box-shadow: 0 2px 5px 1px #949393; 
        /* z-index: 10; */
    }
    .tble{
        padding-top: 10px;
        text-align: center;
        width: 29%;
        height: 320px;
    } 
    /* Container for the toggle */
    .toggle-switch {
        position: relative;
        display: inline-block;
        width: 10px;
        height: 24px;
    }

    /* Hide default checkbox */
    .toggle-switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

    /* The track */
    .slider {
        left: -25px;
        position: absolute;
        cursor: pointer;
        background-color: #ccc;
        border-radius: 24px;
        width: 55px;
        height: 100%;
        transition: background-color 0.3s;
    }

    /* The circular slider */
    .slider::before {
        content: "";
        position: absolute;
        height: 20px;
        width: 20px;
        left: 4px;
        bottom: 2px;
        background-color: white;
        border-radius: 50%;
        transition: transform 0.3s;
    }

    /* Toggled state */
    .toggle-switch input:checked+.slider {
        background-color: #4caf50;
    }

    .toggle-switch input:checked+.slider::before {
        transform: translateX(26px);
    }
    .table-container.rm {
        width: 100%;
        max-height: 300px; /* Adjust height as needed */
        overflow-y: auto;
        /* border: 1px solid #ccc; */
        border: 1px solid #d3d3d3;
    }
    .line-container{
        width: 72.5%; /* Adjust this to control the width of the line graph */
        height: 300px; /* Increase the height for the line chart */
    }
    .container-3 {
        margin-left: 5px;
        margin-top: 20px;
        height: 200px;
        width: 100%;
        border: none;
    }
    
    .container-6 {
        margin-left: 5px;
        margin-top: 50px;
        width: 100%;
    }
    .o_content.o_component_with_search_panel {
        overflow: hidden !important;
    }
    .disabled {
        pointer-events: none;    /* disables all mouse interactions */
        cursor: not-allowed;     /* optional: change cursor */
    }
    
    .stats-containern,.stats-container.ma{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        overflow-x: hidden;
        /* /* height: 200px; */
    }
    .stat-title,.stat-titlerm,.stat-titleru,.stat-titlea1,.stat-title-1a2,.stat-title-1.ef,.stat-title-1.ert 
    ,.stat-title-1.fim,.stat-title-1.rd,.stat-title-1.ma,.stat-title-1.dd,.stat-title-2.dd,.stat-title-3.dd,.stat-title-4.dd,
    .stat-title-1.udm,.stat-title-2.udm,.stat-title-3.udm,.stat-title-1.dp,.stat-title-1.di,.stat-title-1.dh,
    .stat-title-1.ud,.stat-title-2.ud{
        font-size: 16px;
        /* margin-bottom: 5px; */
        color: #4d4a4a;
        background-color: #cecccc;
        text-align: left;
        border-bottom: 1px solid #CECCCC;
    }
    .stat-title-3 {
        font-size: 16px;
        margin-bottom: 5px;
        color: #4d4a4a;
        text-align: start;
    }
    .stat-title-2 {
        font-size: 16px;
        margin-bottom: 5px;
        color: #4d4a4a;
    }
    .stat-title-1, .stat-title-1.eb,.stat-title-hx {
        font-size: 16px;
        text-align: left;
        color: #4d4a4a;
        background-color: #cecccc;
        border-bottom: 1px solid #CECCCC;
    }
    .stat-value-1.dhh,.stat-value,.stat-value-1,.stat-valuerm,.stat-valueru,.stat-valuea1, .stat-value-1.eb,.stat-value-1.ef,.stat-value-1.ert
    ,.stat-value-1.fim ,.stat-value-1.rd,.stat-value-1.ma,.stat-value-1.dd,.stat-value-2.dd,.stat-value-3.dd,.stat-value-4.dd,
    .stat-value-1.udm,.stat-value-2.udm,.stat-value-3.udm,.stat-value-1.dp, .stat-value-1.di,.stat-value-1.dh,
    .stat-value-1.ud,.stat-value-2.ud,.stat-value-hx  {
        font-size: small;
        color: #333;
        /* margin-bottom: 5px; */
        background-color: #f3f5f2;
        text-align: start;
        /* border-bottom: 1px solid #ddd; */
        border-bottom: 1px solid #CECCCC;
        padding: 5px 0px;
    }
    .stat-title-hx:nth-child(5),.stat-value-hx:nth-child(5){
        width: 15%;
    }
    .stat-value-2 {
        font-size: medium;
        color: #333;
        margin-bottom: 5px;
        text-align: start;
    }
    .stat-value-3 {
        font-size: medium;
        color: #333;
        margin-bottom: 5px;
        background-color: #f3f5f2;
        text-align: start;
    }

    .stats-container-1, .stats-container-2{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        overflow-x: hidden; 
        max-height: 200px;
    }
    .chart-container-2 {
        width: 100%;
        display: flex;
        align-items: center;
        gap: 10px; /* Adds space between graphs */
        margin-left: 5px; 
    }                   
    .containerr {
        max-width: 100%;
        margin-top: 20px;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 5px;
        padding: 5px;
    } 

    .stats-containerr {
        display: flex;
        justify-content: space-between;
    }

    .stat-item {
        /* flex: 1; */
        text-align: start;
        flex-direction: column;
    }
    .stat-title:nth-child(1), .stat-value:nth-child(1) { width: 7%; }   /* Event ID */
    .stat-title:nth-child(2), .stat-value:nth-child(2) { width: 10%; }  /* Date and Time */
    .stat-title:nth-child(3), .stat-value:nth-child(3) { width: 15%; }  /* Category */
    .stat-title:nth-child(4), .stat-value:nth-child(4) { width: 15%; }  /* Level */
    .stat-title:nth-child(5), .stat-value:nth-child(5) { width: 12%; }  /* Message (Wider) */
    .stat-title:nth-child(6), .stat-value:nth-child(6) { width: 13%; }  /* Copy */
    .stat-title:nth-child(7), .stat-value:nth-child(7) { width: 7%; }  /* Copy */
    .stat-title:nth-child(8), .stat-value:nth-child(8) { width: 7%; }  /* Copy */
    .stat-title:nth-child(9), .stat-value:nth-child(9) { width: 7%; }  /* Copy */
    .stat-title:nth-child(10), .stat-value:nth-child(10) { width: 7%; }  /* Copy */
    .stat-title:nth-child(11), .stat-value:nth-child(11) { width: 7%; }  /* Copy */

    .stat-title-1:nth-child(1), .stat-value-1:nth-child(1) { width: 7%; }   /* Event ID */
    .stat-title-1:nth-child(2), .stat-value-1:nth-child(2) { width: 15%; }  /* Date and Time */
    .stat-title-1:nth-child(3), .stat-value-1:nth-child(3) { width: 15%; }  /* Category */
    .stat-title-1:nth-child(4), .stat-value-1:nth-child(4) { width: 50%; }  /* Level */
    .stat-title-1:nth-child(5), .stat-value-1:nth-child(5) { width: 7%; }  /* Message (Wider) */

    .stat-title-3:nth-child(1), .stat-value-3:nth-child(1) { width: 10%; }   /* Event ID */
    .stat-title-3:nth-child(2), .stat-value-3:nth-child(2) { width: 20%; }  /* Date and Time */
    .stat-title-3:nth-child(3), .stat-value-3:nth-child(3) { width: 20%; }  /* Category */
    .stat-title-3:nth-child(4), .stat-value-3:nth-child(4) { width: 20%; }  /* Level */
    .stat-title-3:nth-child(5), .stat-value-3:nth-child(5) { width: 20%; }  /* Message (Wider) */
    .stat-title-3:nth-child(6), .stat-value-3:nth-child(6) { width: 10%; }  /* Message (Wider) */

    .stat-item-1 {
        /* flex: 1; */
        text-align: start;
        flex-direction: column;
    }  
    .stat-contentr {
        width: 100%;
        padding: 5px;
        /* border-collapse: separate; */
        /* border-spacing: 0 5px; */
    }
    .stat-header {
        background-color: #f1f1f1;
        position: sticky;
        top: 0;
        z-index: 2;
    }

    /* ransom mesh ------------------ */
    
    .nav-headr{
        display: flex;
        gap: 10px;
        align-items:center;
        justify-content: center;
        text-align: center;
        margin-bottom: 30px;
    }   
    .search-input{
        padding: 10px;
        width: auto;
        height:auto;
        border-radius: 10px;
        border: 1px solid black;
    }
    .mesh-search{
        padding: 0 10px 0 10px;
        width: auto;
        height: 30px;
        border-radius: 10px;
        border: none;
        background-color: #d9d9d9;
        border-color: #d9d9d9;
        box-shadow: -2px 2px 5px rgba(0, 0, 0, 0.3);
        
    }
    .mesh-search:hover {
        transform: translateY(-3px) scale(1.05); /* Lift and enlarge on hover */
    }

    .mesh-search:active {
        transform: translateY(2px) scale(1); /* Push down effect on click, maintain original size */
    }

    .mesh-search:focus {
        outline: none; /* Remove focus outline */
        box-shadow: 0 0 0 2px #949393; /* Soft dark blue shadow on focus */
    }
    
    .container-wrapper-cmm ,.container-wrapper-cme ,.container-wrapper-cmc {
        margin-left: 5px;
        margin-right: 5px;
        margin-top: 20px;
        height: 200px;
        width: 100%;
        border: none;
    }

    .container-3rm {
        height: 200px;
        width: 100%;
        border: none;
    }
    .stat-itemrm {
        /* flex: 1; */
        text-align: start;
    }
    .stat-titlerm:nth-child(1), .stat-valuerm:nth-child(1) { width: 10%; }   /* Event ID */
    .stat-titlerm:nth-child(2), .stat-valuerm:nth-child(2) { width: 15%; }  /* Date and Time */
    .stat-titlerm:nth-child(3), .stat-valuerm:nth-child(3) { width: 30%; }  /* Category */
    .stat-titlerm:nth-child(4), .stat-valuerm:nth-child(4) { width: 20%; }  /* Level */
    .stat-titlerm:nth-child(5), .stat-valuerm:nth-child(5) { width: 20%; }  /* Message (Wider) */

    /* ransom users ------------------------ */ 
    .users,.joinedusers,.onlineusers,.inpremisesusers{
        display: flex;
        flex-direction: column;
    }

     .stat-titleru:nth-child(1), .stat-valueru:nth-child(1) { width: 5%; }   /* Event ID */
    .stat-titleru:nth-child(2), .stat-valueru:nth-child(2) { width: 10%; }  /* Date and Time */
    .stat-titleru:nth-child(3), .stat-valueru:nth-child(3) { width: 10%; }  /* Category */
    .stat-titleru:nth-child(4), .stat-valueru:nth-child(4) { width: 10%; }  /* Level */
    .stat-titleru:nth-child(5), .stat-valueru:nth-child(5) { width: 10%; }  /* Message (Wider) */
    .stat-titleru:nth-child(6), .stat-valueru:nth-child(6) { width: 10%; }  /* Copy */
    .stat-titleru:nth-child(7), .stat-valueru:nth-child(7) { width: 10%; }  /* Copy */
    .stat-titleru:nth-child(8), .stat-valueru:nth-child(8) { width: 10%; }  /* Copy */
    .stat-titleru:nth-child(9), .stat-valueru:nth-child(9) { width: 10%; }  /* Copy */
    .stat-titleru:nth-child(10), .stat-valueru:nth-child(10) { width: 10%; }  /* Copy */
    .stat-titleru:nth-child(11), .stat-valueru:nth-child(11) { width: 5%; }  /* Copy */

    /* ransom events & configuration ---------------------------------------------- */
    
    .btn-container{
        margin-bottom: 20px;
        width: 180px;
        height: 70px;
        background-color: #f3f5f2;
        border-radius: 10px;
        border: none;
        box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.4); 
        padding: auto;
        display: flex;  
        justify-content: center; /* Center horizontally */
        align-items: center; /* Center vertically */
        text-align: center; /* Ensures text is properly centered */
    }
    .btn-container:hover {
        background-color: #f3f5f2; /* Slightly lighter blue on hover */
        transform: translateY(-3px); /* Lift effect on hover */
    }

    .container.rc{
        display: grid;
        grid-template-columns: repeat(4, 1fr); /* 4 columns with equal width */
        gap: 10px; /* Spacing between items */
        /* place-items: center; */
        margin-left: 0px;
    }
    .container.re{
        display: grid;
        grid-template-columns: repeat(4, 1fr); /* 4 columns with equal width */
        gap: 10px; /* Spacing between items */                           
        align-items: flex-start;
    }
    @media (max-width: 1920px) { /* Large Phones */
        .container.re {
            display: grid;
            grid-template-columns: repeat(4, 1fr); /* 4 columns with equal width */
            gap: 10px; /* Spacing between items */                           
            align-items: flex-start;
            margin-left: 0 !important;
            margin-right: 0 !important;

        }
    }
    .container-3.re {
        height: 200px;
        width: 100%;
        border: none;
        margin-top: 20px;
    }

    /* Section - Antivirus ----------------------*/
    .close{
        background: none;
        position: absolute;
        right: 0;
        border: none;
        margin-top: 3px;
    }
    .whiteback{
        background-color:white;
        position: relative;
        top: 0;
        width: 597px;
        height: 20px;
    }
            
    #whitebox{
        border: 1px solid black;
        position: absolute;
        top: 30%;
        left: 30%;
        transform: translateX(-50%, -50%);
        width: 600px;
        height: 300px;
        background-color: #f3f5f2;
        z-index: 10;
    }
    .hidden{
        display: none;
    }
    .sub_ant{
        display: flex; 
        justify-content: space-between;
        height: 18px;
    }
    .btnca{
        border: none;
        border-radius: 5px;
        border: none;
        background: none;
        width: 40px;
        height: 19.5px;
        font-size: small;
        text-align: center;
        cursor: pointer;
        transition: transform 0.1s ease-in-out;
    }
    /* Press Effect */
    .btnca:active {
        transform: scale(0.85);
    }
    .container-wrapper-anthv {
        display: flex;
        flex-direction: column; /* Stacks elements vertically */
        margin-right: 3px;
    }
    #statusChart, .statuschart {
        max-width: 150px;
        margin: 0 auto;
        margin-top: 50px;
        height: 100%;
        max-height: 300px; /* Prevents the graph from being oversized */
    }
    .statuschart:hover {
        transform: translateY(-3px) translateY(3px) translateX(-3px) translateX(3px) scale(1.05); /* Lift and enlarge on hover */
    }
    #status-text {
        text-align: center;
        position: relative;
        top: -90px; /* Adjust position inside the chart */
        font-weight: 600;
        color: red;
        font-size: large;
    }   
    .statustext.ant {
        text-align: center;
        position: relative;
        top: -75px !important; /* Adjust position inside the chart */
        font-weight: 600;
        color: red;
        font-size: large;
    } 
    .chart-containera {
        margin-left: 5px;
        text-align: center;
    } 
    .charthov{
        position: relative;
    }
    .info-box{
        display: none;
        position: absolute;
        top: 0;
        left: 120%;
        width: 220px;
        height: 150px;
        border-radius: 7px;
        background-color: white;
        box-shadow: 2px 2px 2px 4px rgba(0, 0, 0, 0.2); 
        z-index: 10;
        transition: left 0.2s ease-in-out;
    }
    .charthov.clicked .info-box {
        display: block; /* Show the box when the parent div has the 'clicked' class */
    } 
    .qbtna, .fbtna, .ubtna, .rbtna {
        width: 100%;
        height: 100%;
        font-size: small;
        margin-bottom: 20px;
        border-radius: 5px;
        background-color: #f3f5f2; /* Dark blue background */
        color: black; /* White text */
        font-weight: 500;
        transition: all 0.3s ease; /* Smooth transitions */
        border: none; /* Remove borders */
        cursor: pointer; /* Pointer cursor on hover */
        box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.4); 
    }

    .qbtna:hover, .fbtna:hover, .ubtna:hover, .rbtna:hover {
        background-color: #f3f5f2; /* Slightly lighter blue on hover */
        transform: translateY(-3px); /* Lift effect on hover */
    }

    .qbtna:active, .fbtna:active, .ubtna:active, .rbtna:active {
        background-color: #f3f5f2; /* Keep the same dark blue for active state */
        transform: translateY(2px); /* Push down effect on click */
    }

    .qbtna:focus, .fbtna:focus, .ubtna:focus, .rbtna:focus {
        outline: none; /* Remove focus outline */
        box-shadow: 0 0 0 2px #949393; /* Soft dark blue shadow on focus */
    } 
    
    .stat-value-1a2 {
        font-size: small;
        color: #333;
        cursor: pointer;
        margin-bottom: 5px;
        text-align: left;
        background-color: #f3f5f2;
        border-bottom: 1px solid #ddd;
    }
    
    /* Adjust column sizes */
    .stat-title-1a2:nth-child(1), .stat-value-1a2:nth-child(1) { width: 7%; }   /* Event ID */
    .stat-title-1a2:nth-child(2), .stat-value-1a2:nth-child(2) { width: 15%; }  /* Date and Time */
    .stat-title-1a2:nth-child(3), .stat-value-1a2:nth-child(3) { width: 10%; }  /* Category */
    .stat-title-1a2:nth-child(4), .stat-value-1a2:nth-child(4) { width: 10%; }  /* Level */
    .stat-title-1a2:nth-child(5), .stat-value-1a2:nth-child(5) { width: 50%; }  /* Message (Wider) */
    .stat-title-1a2:nth-child(6), .stat-value-1a2:nth-child(6) { width: 7%; }  /* Copy */

    .stat-titlea1:nth-child(1), .stat-valuea1:nth-child(1) { width: 7%; }   /* Event ID */
    .stat-titlea1:nth-child(2), .stat-valuea1:nth-child(2) { width: 15%; }  /* Date and Time */
    .stat-titlea1:nth-child(3), .stat-valuea1:nth-child(3) { width: 10%; }  /* Category */
    .stat-titlea1:nth-child(4), .stat-valuea1:nth-child(4) { width: 10%; }  /* Level */
    .stat-titlea1:nth-child(5), .stat-valuea1:nth-child(5) { width: 20%; }  /* Message (Wider) */
    .stat-titlea1:nth-child(6), .stat-valuea1:nth-child(6) { width: 10%; }  /* Copy */
    .stat-titlea1:nth-child(7), .stat-valuea1:nth-child(7) { width: 7%; }  /* Copy */

    
    .bta,.btm {
        width: 100%;
        height: 40px;
    }   
                  
    .containera {
        max-width: 100%;
        margin-top: 20px;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 40px;
        margin-bottom: 60px;
    } 

    .table-container.a {
        width: 100%;
        max-height: 300px; /* Adjust height as needed */
        overflow-y: auto;
        /* border: 1px solid #ccc; */
        border: 1px solid #d3d3d3;
        margin-bottom: 10px;
    }            
       
    .button-container {
        flex: 1;
        text-align: center;
        width: 80px;
    }
    .container-2{
        margin-left: 5px;
    }            
    .threat-updates{
        max-width: 100%;
        height: 200px;
        overflow: auto;
        border: 1px solid black;
        background-color: white;
        color: black;
        border-radius: 5px;
        overflow-y: scroll; 
        overflow-x: hidden;
    }
    .container-3.a {
        margin-top: 20px;
        /* text-align: center; */
        margin-left: 5px;
        margin-bottom: 120px;
    }
    .threat-graphs-2 {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 10px; /* Adds space between graphs */
        margin-left: 5px;
    }
    .line-container.a{
        width: 100%; /* Adjust this to control the width of the line graph */
        height: 300px; /* Increase the height for the line chart */
    }
    .bar-container {
        position: relative;
        width: 72.3%; /* Adjust this to control the width of the line graph */
        height: 250px; /* Increase the height for the line chart */
    }
    /* Pie chart container - make the pie chart bigger */
    .pie-container,.pi-container {
        width: 50%; /* Adjust this to control the width of the pie chart */
        height: 300px; /* Increase the height for the pie chart */
    }
    #lineChart {
        width: 100%;  /* Fill the container width */
        height: 70%; /*Fill the container height */
    }
    #line_graph{
        width: 100%;
        height: 100%;
    }
    /* Specific canvas styling for only the pie chart */
    #pieChart,#piGraph {
        width: 200px; /* Fill the container width */
        height: 100%; /* Fill the container height */
    } 
    .container-4 {
        /* margin-left: 20px; */
        margin-top: 50px;
        margin-bottom: 40px;
    }
    #timePeriod,#timePeriod0,#timePeriod1{
        position: relative;
        height: 24px;
        font-size: 14px;
        padding: 0;
        width: 100px;
        top: -5px;
        border-radius: 4px;
        z-index: 100;
        padding-left: 5px;
        box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.4);
    } 
    .custom-select {
        /* margin-left: auto; */
        padding: 10px 15px;  /* Add padding for spacing */
        font-size: 16px;
        border: none; /* Light border */
        background-color: #ffffff;  /* Background color */
        appearance: none;  /* Remove default browser arrow */
        background-repeat: no-repeat;
        background-position: right 10px center;  /* Adjust position of the arrow */
        background-size: 15px 15px; 
        cursor: pointer;  /* Add pointer cursor */
        transition: all 0.3s ease;  /* Smooth transition for hover effects */
    }
    .custom-select0, .custom-select1 {
        /* margin-left: auto; */
        /* padding: 10px 15px;   */
        font-size: 16px;
        border: none; /* Light border */
        background-color: #ffffff;  /* Background color */
        appearance: none;  /* Remove default browser arrow */
        background-repeat: no-repeat;
        background-position: right 10px center;  /* Adjust position of the arrow */
        background-size: 15px 15px; 
        cursor: pointer;  /* Add pointer cursor */
        transition: all 0.3s ease;  /* Smooth transition for hover effects */
    }

    .custom-select option,.custom-select0 option, .custom-select1 option{
        font-size: 16px;
        padding: 10px 15px;
    } 
    .container-5 {
        margin-left: 5px;
        margin-top: 50px;
    }
    #antivirus-list{ 
        overflow: hidden; 
        transition: max-height 0.3s ease;
    }

/* Section - EDR --------------------------*/

    .chart-containerr.edh {
        /* margin-left: 20px; */
        position: relative;
        padding: 5px;
        text-align: center;
        flex-grow: 1; /* This makes it expand when space is available */
        min-width: 200px; /* Prevents it from getting too small */
        height: 250px;
        /* background-color: #f3f5f2;
        border-color: #d8e4d4; */
        background-color: white;
        border: 1px solid #ebdddd;
        border-radius: 15px;
    }
    .chart-containerr.edh:hover {
        /* transform: translateY(-3px) scale(1.02);   */
        box-shadow: 0 2px 5px 1px #949393; 
        /* z-index: 10; */
    } 
    .stats-containereh {
        width: 40%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        overflow-x: hidden;
    }
    .stat-value-1eh {
        font-size: small;
        color: #333;
        cursor: pointer;
        margin-bottom: 5px;
        text-align: start;
        border-bottom: 1px solid #ddd;
    }
    .stats-containereh {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        overflow-x: hidden;
        height: 250px;
    }
    .stat-value-3edh{
        margin: 10px;
        margin-bottom: 18px;
    }
    .stat-item-41{
        padding: 10px;
        background-color: rgb(232, 177, 253);
        display: flex;
        flex-direction: column;
        border-radius: 5px;
        border-top-right-radius: 0px;
        border-bottom-right-radius: 0px;
        
        /* Shadow only on the right */
        box-shadow: 2px 0 10px rgba(0, 0, 0, 0.3);
        
        /* Ensure it appears above the other elements */
        position: relative;
        z-index: 10;
    }
    .stat-item-42{
        padding: 10px;
        background-color: #cecdcd;
        display: flex;
        flex-direction: column;
            /* Shadow only on the right */
        box-shadow: 2px 0 10px rgba(0, 0, 0, 0.3);
        
        /* Ensure it appears above the other elements */
        position: relative;
        z-index: 8;
    }
    .stat-item-43{
        padding: 10px;
        background-color: rgb(181, 235, 243);
        display: flex;
        flex-direction: column;
        border-radius: 5px;
        border-top-left-radius: 0px;
        border-bottom-left-radius: 0px;
            /* Shadow only on the right */
        box-shadow: 2px 0 10px rgba(0, 0, 0, 0.3);
        
        /* Ensure it appears above the other elements */
        position: relative;
        z-index: 6;
    }
    .statuscharte{
        max-width: 150px;
        margin: 0 auto;
        margin-top: 20px !important;
        height: 100%;
        max-height: 300px; /* Prevents the graph from being oversized */
    }

    .stat-title-1eh {
        font-size: 16px;
        margin-bottom: 5px;
        color: rgb(11, 54, 91);
        text-align: start;
    }
    .stat-title-3.edh {
        font-size: 16px;
        margin-bottom: 10px;
        text-align: center;
    }
    .viewcr{
        position:absolute;
        right: 15%;
    }
    .vcre{
        position: relative;
        top: 5px;
        color: #888888;
        width: auto;
        border: none;
        border-radius: 10px;
    }
    .vcrd{
        width: auto;
        border: none;
        box-shadow: -2px 2px 5px rgba(0, 0, 0, 0.3);
        background-color:  #fdcdc9;
        border-radius: 10px;
    }
    .vcrc{
        width: auto;
        border: none;
        box-shadow: -2px 2px 5px rgba(0, 0, 0, 0.3);
        background-color:  #fdcdc9;
        border-radius: 10px;
    }
    .vcr{
        width: auto;
        border: none;
        box-shadow: -2px 2px 5px rgba(0, 0, 0, 0.3);
        background-color:  #fdcdc9;
        border-radius: 10px;
    }
    .vcre:hover, .vcrd:hover, .vcrc:hover, .vcr:hover {
        transform: translateY(-3px); /* Lift effect on hover */
    }

    .vcre:active, .vcrd:active, .vcrc:active, .vcr:active {
        transform: translateY(2px); /* Push down effect on click */
    }

    .vcre:focus, .vcrd:focus, .vcrc:focus, .vcr:focus {
        outline: none; /* Remove focus outline */
        box-shadow: 0 0 0 2px rgb(160, 131, 131); /* Soft dark blue shadow on focus */
    }

    .percentage-bar {
        width: 130px;
        height: 15px;
        background: #eee;
        position: relative;
        margin: 0 5px;
    }
    
    .fill {
        height: 100%;
        border-radius: 4px;
    }

    .trend {
        font-size: 12px;
        text-align: right; /* Ensures proper alignment */
        width: 50px; /* Fixed width to prevent shifting */
        display: inline-block;
    }

    .percentage-value {
        font-size: small;
        color: #000; /* Black text for percentages */
    }

    /* Colors */
    .safe .fill { background: rgb(245, 245, 132); }
    .compromised .fill { background: rgb(240, 11, 11); }
    .isolated .fill { background: rgb(102, 101, 100); }

    .safe .trend { color: rgb(55, 248, 55); }
    .compromised .trend { color: rgb(240, 11, 11); }
    .isolated .trend { color: rgb(102, 101, 100); }

    .increase { color: green; }
    .decrease { color: red; }
    
    .euc{
        width: 25px;
    }
    .colval1{
        background-color: rgb(250, 192, 192);
        display: flex;
        flex-direction: column;
    }
    .colval2{
        background-color: #cecdcd;
        display: flex;
        flex-direction: column;
    }
    .colval3{
        background-color: rgb(181, 235, 243);
        display: flex;
        flex-direction: column;
    }
    #threat-type{
        position: relative;
        top: 5px;
    }
    #risk-container{
        margin-left: 5px;
        margin-right: 5px;
        text-align: center;
        justify-items: center;
    }
    .event-group {
        margin-bottom: 12px;
    }

    .event-label {
        font-size: small;
        color: #666; /* Normal grey text */
        text-align: left;
        margin-left: 55px;
    }

    .event-row {
        display: flex;
        align-items: center;
    }

    @media (min-width: 1920px) { 
        .percentage-bar {
            width: 170px !important;
            height: 15px;
            background: #eee;
            position: relative;
            margin: 0 5px;
        }
        .vcre{
            color: #888888;
            position: relative;
            right: -14px;
            top: 2px;
            width: auto;
            border: none !important;
            border-radius: 10px;
        }
        .vcre{
            transform: translateY(-3px); /* Lift effect on hover */
        }

        .vcre{
            transform: translateY(2px); /* Push down effect on click */
        }

        .vcre{
            outline: none; /* Remove focus outline */
        }
        .stats-containereh {
            width: 50%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            overflow-x: hidden;
        }
        #risk-container {
            margin-right: 5px;
            text-align: center;
            justify-items: center;
        }
        .percentage-bar {
            width: 130px;
            height: 15px;
            background: #eee;
            position: relative;
            margin: 0 5px;
        }
        .event-group {
            margin-bottom: 12px;
            width: 290px;
        }
    } 
    .chart-container-1 {
        /* margin-left: 20px; */
        text-align: center;
        margin-top: 5px;
        margin-left: 5px;
    }                 
    .containere {
        max-width: 100%;
        margin-top: 20px;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 10px;
        margin-bottom: 20px;
    }
    .containere:nth-child(1){
        margin-bottom: 0px;
    }
    .table-container.e {
        width: 100%;
        max-height: 300px; /* Adjust height as needed */
        overflow-y: auto;
    }
    .stat-conten {
        text-align: start;
        margin-top: 10px;
        display: flex;
        justify-content: space-between;
        overflow-y: auto; /* Single scrollbar */
        margin-left: 5px;
        margin-right: 5px;
    } 
    .stat-conte {
        height: 145px;
        text-align: start;
        margin-top: 10px;
        display: flex;
        justify-content: center;
        margin-left: 5px;
        margin-right: 5px;
    } 

    /* Adjust column sizes */
    .stat-title-1eh:nth-child(1), .stat-value-1eh:nth-child(1) { width: 5%; }   /* Event ID */
    .stat-title-1eh:nth-child(2), .stat-value-1eh:nth-child(2) { width: 15%; }  /* Date and Time */
    .stat-title-1eh:nth-child(3), .stat-value-1eh:nth-child(3) { width: 10%; }  /* Category */
    .stat-title-1eh:nth-child(4), .stat-value-1eh:nth-child(4) { width: 15%; }  /* Level */

    
    .sub1{
        display: flex; 
        justify-content: space-between;
        height: 18px;
    }
    /* Changes made start from here....*/
    .force-container{ 
        width: 50%;
        height: 250px;
        /* position: relative;
        overflow: hidden;  */
    }
    .sub0{
        display: flex; 
        justify-content: space-between;
        height: 180px;
    }
            
    #force_graph{
        width: 0%;
        height: 100%;
        /* height: 20px; */
    }
    #graph {
        width: 100%;
        height: 250px;
        margin-left: auto;
        border: 1px solid #ccc;
        display: flex;
        justify-content: center; /* Centers horizontally */
        align-items: center; /* Centers vertically */
    }
    
    #tooltip {
        position: fixed;
        top: 10px; /* Distance from the top */
        background-color: rgba(255, 255, 255, 0.9);
        border: 1px solid #333;
        padding: 8px;
        font-size: 14px;
        border-radius: 5px;
        box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
        display: none;
        pointer-events: none;
        z-index: 1000; /* Ensures it stays on top */
    }
    .bar-containere {
        position: relative;
        width: 100%; /* Adjust this to control the width of the line graph */
        height: 250px; /* Increase the height for the line chart */
    }
    
    .stat-value-4e{
        margin-left: 10px !important;
        margin-right: 10px !important;
        margin: 10px;
        margin-bottom: 10px;
    }
            
    .stat-value-4e:nth-child(1) { width: 100%; }
    .stat-value-4e:nth-child(2)  { width: 100%; }

    .subeh{
        display: flex; 
        justify-content: space-between;
        margin-top: 20px;
        margin-left: 7px;
    }

    /* Section - EDR disk based */

    .container-wrapper-cmmeb {
        margin-left: 5px;
        margin-top: 20px;
        height: 100%;
        width: 100%;
        border: none;
        margin-right: 5px;
    }
    .search-input.eb,.search-input.udm,.search-input.dp, .search-input.di {
        height: 30px;
        border-radius: 10px;
        width: 10%;
        border: 1px solid black;
    }

    .table-container.eb,.table-container.udm {
        background-color: white;
        width: 100%;
        max-height: 350px;
        /* Adjust height as needed */
        /* border: 1px solid #ccc; */
        border: 1px solid #d3d3d3;
        overflow-y: auto;
        position: relative;
    }
    @media (min-width: 1920px) {
        .table-container.udm {
        background-color: white; 
        width: 100%;
        max-height: 550px !important; 
        /* overflow-y: auto; */
        /* border: 1px solid #ccc; */
        border: 1px solid #d3d3d3;
        overflow-y: auto;
        position: relative;
        }
    }
    .stat-content.eb {
        width: 100%;
        padding: 5px;
        /* border-collapse: separate; */
        /* border-spacing: 0 5px; */
    }
    /* Adjust column sizes */
    .stat-title-1.eb:nth-child(1),
    .stat-value-1.eb:nth-child(1) {
        width: 12%;
    }

    /* Event ID */
    .stat-title-1.eb:nth-child(2),
    .stat-value-1.eb:nth-child(2) {
        width: 12%;
    }

    /* Date and Time */
    .stat-title-1.eb:nth-child(3),
    .stat-value-1.eb:nth-child(3) {
        width: 10%;
    }

    /* Category */
    .stat-title-1.eb:nth-child(4),
    .stat-value-1.eb:nth-child(4) {
        width: 15%;
    }

    /* Level */
    .stat-title-1.eb:nth-child(5),
    .stat-value-1.eb:nth-child(5) {
        width: 12%;
    }

    /* Level */
    .stat-title-1.eb:nth-child(6),
    .stat-value-1.eb:nth-child(6) {
        width: 12%;
    }

    /* Level */
    .stat-title-1.eb:nth-child(7),
    .stat-value-1.eb:nth-child(7) {
        width: 12%;
    }
    .stat-title-1.eb:nth-child(8),
    .stat-value-1.eb:nth-child(8) {
        width: 12%;
    }

    .stats-container-1.eb, .stats-container-1.udm ,.stats-container-1.di,.stats-container-1.ud {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        max-height: 100%;
    }

    /* Pagination styles */
    .applyfilt,.remvfilt {
        text-wrap-mode: nowrap;
        padding: 0 10px 0 10px;
        width: auto;
        height: 30px;
        border-radius: 10px;
        border: none;
        background-color: #d9d9d9;
        border-color: #d9d9d9;
        box-shadow: -2px 2px 5px rgba(0, 0, 0, 0.3);
    }

    /* Filter Panel Styles */
    .filter-panel {
        /* display: flex; */
        flex-wrap: wrap;
        gap: 10px;
        padding: 10px;
        /* background: #f9f9f9; */
        border-radius: 8px;
        align-items: center;
        margin-bottom: 20px;
    }

    /* Each filter item */
    .filter-item {
        position: relative;
        display: flex;
        /* align-items: center; */
        align-items: flex-end;
        /* background: white; */
        /* border-radius: 5px; */
        /* border: 1px solid #ddd; */
        border-bottom: 2px solid #ddd;
        width: 120px;
        cursor: pointer;
    }

    /* Add arrow */
    .filter-item::after,.filter-item.dd::after {
        position: absolute;
        right: 10px;
        font-size: 12px;
        color: #777;
        pointer-events: none;
        /* Prevent clicking on the arrow itself */
    }

    /* Change arrow on hover */
    .filter-item:hover::after,.filter-item.dd:hover::after {
        content: '▼';
        color: #333;
    }

    /* Simulate dropdown (for now, basic example) */
    .filter-item:hover,.filter-item.dd:hover {
        content: '▼';
        border-color: #aaa;
    }

    /* Select dropdown */
    .date-filter {
        width: 100%;
        border: none;
        outline: none;
        background: transparent;
    }

    /* Clear button */
    .clear-btn {
        display: none;
        background: transparent;
        border: none;
        cursor: pointer;
        font-size: 12px;
        color: #777;
        padding-right: 20px;
    }

    /* Input fields */
    .filter-input {
        width: 100%;
        border: none;
        outline: none;
        background: transparent;
        cursor: pointer;
    }

    /* Responsive Design */
    @media (max-width: 768px) {
        .filter-panel {
            flex-direction: column;
            align-items: flex-start;
        }

        .filter-item,.filter-item.dd {
            width: 100%;
        }
    }

    .search {
        padding: 0 10px 0 10px;
        width: auto;
        height: 30px;
        border-radius: 10px;
        border: none;
        background-color: #d9d9d9;
        border-color: #d9d9d9;
        box-shadow: -2px 2px 5px rgba(0, 0, 0, 0.3);

    }

    .export {
        padding: 0 10px 0 10px;
        width: auto;
        height: 30px;
        border-radius: 10px;
        border: none;
        background-color: #d9d9d9;
        border-color: #d9d9d9;
        box-shadow: -2px 2px 5px rgba(0, 0, 0, 0.3);

    }
    
    .container-3.eb , .container-3.di {
        height: 80%;
        width: 100%;
        border: none;
        padding-right: 10px;
    }

    /* Adjust column sizes */
    .stat-title-1.ef:nth-child(1), .stat-value-1.ef:nth-child(1) { width: 12%; }   /* Event ID */
    .stat-title-1.ef:nth-child(2), .stat-value-1.ef:nth-child(2) { width: 12%; }  /* Date and Time */
    .stat-title-1.ef:nth-child(3), .stat-value-1.ef:nth-child(3) { width: 10%; }  /* Category */
    .stat-title-1.ef:nth-child(4), .stat-value-1.ef:nth-child(4) { width: 10%; }  /* Level */

     /* Adjust column sizes */
    .stat-title-1.ert:nth-child(1), .stat-value-1.ert:nth-child(1) { width: 12%; }   /* Event ID */
    .stat-title-1.ert:nth-child(2), .stat-value-1.ert:nth-child(2) { width: 12%; }  /* Date and Time */
    .stat-title-1.ert:nth-child(3), .stat-value-1.ert:nth-child(3) { width: 12%; }  /* Category */
    .stat-title-1.ert:nth-child(4), .stat-value-1.ert:nth-child(4) { width: 10%; }  /* Level */

    /* Adjust column sizes */
    .stat-title-1.fim:nth-child(1), .stat-value-1.fim:nth-child(1) { width: 15%; }   /* Event ID */
    .stat-title-1.fim:nth-child(2), .stat-value-1.fim:nth-child(2) { width: 15%; }  /* Date and Time */
    .stat-title-1.fim:nth-child(3), .stat-value-1.fim:nth-child(3) { width: 15%; }  /* Category */
    .stat-title-1.fim:nth-child(4), .stat-value-1.fim:nth-child(4) { width: 8%; }  /* Level */
    .stat-title-1.fim:nth-child(5), .stat-value-1.fim:nth-child(5) { width: 8%; }  /* Level */
            
    /* Adjust column sizes */
    .stat-title-1.rd:nth-child(1), .stat-value-1.rd:nth-child(1) { width: 18%; }   /* Event ID */
    .stat-title-1.rd:nth-child(2), .stat-value-1.rd:nth-child(2) { width: 18%; }  /* Date and Time */
    .stat-title-1.rd:nth-child(3), .stat-value-1.rd:nth-child(3) { width: 10%; }  /* Category */


/* Section - DLP ------------------------------------------------------------------------------------------------------------*/
    .expt{
        /* border: none;
        background-color: transparent; 
        font-size: 24px; 
        color:rgb(11, 54, 91); */
        padding: 0 10px 0 10px;
        width: auto;
        height: 30px;
        border-radius: 10px;
        border: none;
        background-color: #d9d9d9;
        border-color: #d9d9d9;
        box-shadow: -2px 2px 5px rgba(0, 0, 0, 0.3);
    }
    .exp{
        gap:20px;
        display: flex;
        text-align: right;
        /* position: absolute;
        right: 30;  */
        width: 80%;
        justify-content: flex-end;
        align-items:flex-end;
    }
    @media (min-width: 1920px) {
        .expt{
            padding: 0 10px 0 10px;
            width: auto;
            height: 30px;
            border-radius: 10px;
            border: none;
            background-color: #d9d9d9;
            border-color: #d9d9d9;
            box-shadow: -2px 2px 5px rgba(0, 0, 0, 0.3);
        }

        .exp{
            gap:20px;
            display: flex;
            text-align: right;
            /* position: absolute;
            right: 30;  */
            width: 80%;
            justify-content: flex-end;
            align-items:flex-end;
        }
    }

    .container.dh,.container.ma {
        max-width: 100%;
        margin-top: 20px;
        gap: 5px;
        margin-bottom: 20px;
    }

    .stats-container.dh {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        overflow-x: hidden;
    }
    .table-container.dh {
            width: 100%;
            max-height: 400px;
            /* Adjust height as needed */
            overflow-y: auto;
            /* border: 1px solid #ccc; */
            border: 1px solid #d3d3d3;
        }
    @media (min-width: 1920px) {

            .stats-container.dh {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            overflow-x: hidden;
            max-height: 550px;
        }
            .table-container.dh {
            width: 100%;
            max-height: 550px;
            /* Adjust height as needed */
            overflow-y: auto;
            /* border: 1px solid #ccc; */
            border: 1px solid #d3d3d3;
        }
    }

    .h5head1{
        display:flex;
        text-align:left;
    }
    .h5head{
        display:flex;
        justify-content: space-between;
        text-align:left;
        align-items: center;
    }
    #chartr { display: flex;
        justify-content: center;
        margin-top: 20px;
    }
    .container-3.dr {
        height: 100%;
        width: 100%;
        border: none;
        /* overflow: auto; */
    }
    .table-container.ma {
        width: 100%;
        max-height: 390px;
        /* Adjust height as needed */
        overflow-y: auto;
        /* border: 1px solid #ccc; */
        border: 1px solid #d3d3d3;
    }

    @media (min-width: 1920px) {
        .stats-container.ma , .stats-container-1.dd,.stats-container-2.dd,.stats-container-3.dd,.stats-container-4.dd {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        overflow-x: hidden;
        max-height: 550px !important;
        }
        .table-container.ma , .table-container.dd{
        width: 100%;
        max-height: 550px ;
        /* Adjust height as needed */
        overflow-y: auto;
        /* border: 1px solid #ccc; */
        border: 1px solid #d3d3d3;
        }
    }

    .stat-content1.ma {
        width: 100%;
        padding: 5px;
        /* border-collapse: separate; */
        /* border-spacing: 0 5px; */
    }

    
    .button-container.ma {
        display: block;
        /* margin-top: 40px; */
        flex: 0.9;
        text-align: left;
        width: auto;
        min-width: 200px;
        padding-left: 5px;
    }

    @media (min-width: 1920px) {

        .button-container.ma {
            margin-top: 20px;
            flex: 0.9;
            text-align: center;
            width: auto;
            min-width: 230px;
        }
    }

    
    .qbtnm, .fbtnm, .ubtnm, .rbtnm{
        margin-right: 2%;
        width: 12%;
        height: 100%;
        font-size: small;
        margin-bottom: 10px;
        border-radius: 5px;
        background-color: #f3f5f2; /* Dark blue background */
        color: black; /* White text */
        font-weight: 500;
        transition: all 0.3s ease; /* Smooth transitions */
        border: none; /* Remove borders */
        cursor: pointer; /* Pointer cursor on hover */
        box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.4); 
    }

    .qbtnm:hover, .fbtnm:hover, .ubtnm:hover, .rbtnm:hover{
        background-color: #f3f5f2; /* Slightly lighter blue on hover */
        transform: translateY(-3px); /* Lift effect on hover */
    }

    .qbtnm:active, .fbtnm:active, .ubtnm:active, .rbtnm:active{
        background-color: #f3f5f2; /* Keep the same dark blue for active state */
        transform: translateY(2px); /* Push down effect on click */
    }

    .qbtnm:focus, .fbtnm:focus, .ubtnm:focus, .rbtnm:focus{
        outline: none; /* Remove focus outline */
        box-shadow: 0 0 0 2px #949393; /* Soft dark blue shadow on focus */
    } 

    .stat-title-1.ma:nth-child(1),
    .stat-value-1.ma:nth-child(1) {
        width: 7%;
    }

    /* Event ID */
    .stat-title-1.ma:nth-child(2),
    .stat-value-1.ma:nth-child(2) {
        width: 15%;
    }

    /* Date and Time */
    .stat-title-1.ma:nth-child(3),
    .stat-value-1.ma:nth-child(3) {
        width: 10%;
    }

    /* Category */
    .stat-title-1.ma:nth-child(4),
    .stat-value-1.ma:nth-child(4) {
        width: 15%;
    }

    /* Level */
    .stat-title-1.ma:nth-child(5),
    .stat-value-1.ma:nth-child(5) {
        width: 12%;
    }

    /* Message (Wider) */
    .stat-title-1.ma:nth-child(6),
    .stat-value-1.ma:nth-child(6) {
        width: 13%;
    }

    /* Copy */
    .stat-title-1.ma:nth-child(7),
    .stat-value-1.ma:nth-child(7) {
        width: 7%;
    }

    /* Copy */
    .stat-title-1.ma:nth-child(8),
    .stat-value-1.ma:nth-child(8) {
        width: 7%;
    }

    /* Copy */
    .stat-title-1.ma:nth-child(9),
    .stat-value-1.ma:nth-child(9) {
        width: 10%;
    }

    /* Copy */
    .stat-title-1.ma:nth-child(10),
    .stat-value-1.ma:nth-child(10) {
        width: 7%;
    }

    /* Copy */
    .stat-title-1.ma:nth-child(11),
    .stat-value-1.ma:nth-child(11) {
        width: 7%;
    }

    /* Copy */
    .stat-title-1.ma:nth-child(12),
    .stat-value-1.ma:nth-child(12) {
        width: 7%;
    }
    
    .action{
        border: none;
        border-radius: 5px;
        border: none;
        background: none;
        width: 40px;
        height: 19.5px;
        font-size: small;
        text-align: center;
    }
    
    .search.dd{
        padding: 0 10px 0 10px;
        width: 50%;
        height: 30px;
        border-radius: 10px;
        border: none;
        background-color: #d9d9d9;
        border-color: #d9d9d9;
        box-shadow: -2px 2px 5px rgba(0, 0, 0, 0.3);
        
    }
    .search-input.dd{
        padding-left: 20px;
        height: 30px;
        border-radius: 10px;
        width: 200px;
        border: 1px solid black;
    }
    .startbt{
        margin-left: 10px;
        margin-right: 10px;
        display: flex;
        flex-direction: column;
        gap: 20px;
        align-items: center;
    }
    .endbt{
        margin-left: 20px;
        display: flex;
        flex-direction: column;
        gap: 20px;
    }
    
    .vert-line.dd{
        width: 1px;
        height: 80px;
        background-color: black;
    }
    .filtrow{
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        column-gap: 35px;

    }
    .totable{
        height: 30px;
        width: 50px;
        background-color: white;
        border: none;
        border-radius: 5px;
        /* box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); */
        padding: 0px !important;
        font-size: 15px;
        font-weight: 600;
    }
    .totable:hover{
        transition: left 0.3s ease-in-out;
        transform: translateY(-3px) scale(1.05);
    }
    .tograph{
        height: 30px;
        width: 50px;
        background-color: white;
        border: none;
        border-radius: 5px;
        /* box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); */
        padding: 0px !important;
        font-size: 15px;
        font-weight: 600;
    }
    .tograph:hover{
        transition: left 0.3s ease-in-out;
        transform: translateY(-3px) scale(1.05);
    }
    .nav-head.dd{
        margin-left: 5px;
        margin-right: 5px;
        display: flex;
        gap: 10px;
        justify-content: flex-start;
        align-items: center;
        text-align: center;
        margin-bottom: 10px;
    }
    @media(min-width : 1920px){
        .nav-head.dd{
            width: 90%;
            margin-left: 10px;
            margin-right: 5px;
            display: flex;
            gap: 10px;
            justify-content: space-between;
            align-items: center;
            text-align: center;
            margin-bottom: 10px;
        }
    }
    .switch.dd{
        margin-left: 5px;
        display: flex;
        flex-direction: column;
        gap: 20px;
        margin-right: 10px;
    }  
    @media(min-width : 1920px){
        .switch.dd{
            margin-left: 5px;
            display: flex;
            gap: 10px;
        }
    }
    #chart {
        display: flex;
        justify-content: center;
        margin-top: 20px;
        width: auto;
    }
    #chart-2 {
        display: flex;
        justify-content: center;
        margin-top: 20px;
    }
    #chart-3 {
        display: flex;
        justify-content: center;
        margin-top: 20px;
    }
    #chart-4 {
        display: flex;
        justify-content: center;
        margin-top: 20px;
    }
    .stat-item-2 {
        /* flex: 1; */
        text-align: start;
        /* display: flex; */
        flex-direction: column;
    }

    /* Default Tab Styles */
    .bt-tab {
        flex: 1;
        border: none;
        padding: 10px 15px;
        font-size: 16px;
        text-align: center;
        cursor: pointer;
        transition: all 0.3s ease;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        border-bottom: 3px solid transparent; /* Default */
    }

    /* Hover Effects - No Background Change */
    .bt-tab:hover {
        border: 2px solid darkgray;
        border-bottom: none;
    }

    /* Active (Clicked) Tab */
    .bt-tab.active {
        background-color: white;
        border: 2px solid darkgray;
        border-bottom: none !important;
    }

    /* Inactive tabs should have a bottom border */
    .bt-tab.inactive-border {
        border-bottom: 3px solid darkgray;
    }


    /* Remove right border for the last tab */
    .bt-tab:last-child {
        border-right: none;
    }                       
    /* Container */
    .containert {
        margin: 0;
        padding: 0;
        width: 100%;
        display: flex;
        margin-bottom: 20px;
        position: relative;
        flex-grow: 1;
    }
    
    .container-wrapper-cmmdl {
        margin-left: 5px;
        /* margin-top: 20px; */
        height: 100%;
        width: 100%;
        border: none;
        margin-right: 5px;
        overflow: auto;
    }
    button img {
        pointer-events: none;
    }
    .container-3dd {
        height: auto;
        width: auto;
        border: none;
    }

    /* Each filter item */
    .filter-item.dd {
        height: 30px;
        flex: 1 1 calc(23.33% - 10px); /* Each item takes 1/3 of the row */
        max-width: calc(33.33% - 10px); /* Ensures only 3 items per row */
        position: relative;
        display: flex;
        /* align-items: center; */
        align-items: flex-end;
        /* background: white; */
        /* border-radius: 5px; */
        /* border: 1px solid #ddd; */
        border-bottom: 2px solid #ddd; 
        width: 85px;
        cursor: pointer;
    }

    /* for system info */
    .stat-title-1.dd:nth-child(1), .stat-value-1.dd:nth-child(1) { width: 5%; }   /* Event ID */
    .stat-title-1.dd:nth-child(2), .stat-value-1.dd:nth-child(2) { width: 10%; }  /* Date and Time */
    .stat-title-1.dd:nth-child(3), .stat-value-1.dd:nth-child(3) { width: 10%; }  /* Category */
    .stat-title-1.dd:nth-child(4), .stat-value-1.dd:nth-child(4) { width: 15%; }  /* Level */
    .stat-title-1.dd:nth-child(5), .stat-value-1.dd:nth-child(5) { width: 10%; }  /* Message (Wider) */
    .stat-title-1.dd:nth-child(6), .stat-value-1.dd:nth-child(6) { width: 10%; }
    .stat-title-1.dd:nth-child(7), .stat-value-1.dd:nth-child(7) { width: 10%; }
    .stat-title-1.dd:nth-child(8), .stat-value-1.dd:nth-child(8) { width: 10%; }
    .stat-title-1.dd:nth-child(9), .stat-value-1.dd:nth-child(9) { width: 10%; }
    .stat-title-1.dd:nth-child(10), .stat-value-1.dd:nth-child(10) { width: 15%; }
    .stat-title-1.dd:nth-child(11), .stat-value-1.dd:nth-child(11) { width: 7%; }

    .stat-title-2.dd:nth-child(1), .stat-value-2.dd:nth-child(1) { width: 7%; }   /* Event ID */
    .stat-title-2.dd:nth-child(2), .stat-value-2.dd:nth-child(2) { width: 15%; }  /* Date and Time */
    .stat-title-2.dd:nth-child(3), .stat-value-2.dd:nth-child(3) { width: 10%; }  /* Category */
    .stat-title-2.dd:nth-child(4), .stat-value-2.dd:nth-child(4) { width: 15%; }  /* Level */
    .stat-title-2.dd:nth-child(5), .stat-value-2.dd:nth-child(5) { width: 15%; }  /* Message (Wider) */
    /* for apps monitoring */
    .stat-title-3.dd:nth-child(1), .stat-value-3.dd:nth-child(1) { width: 5%; }   /* Event ID */
    .stat-title-3.dd:nth-child(2), .stat-value-3.dd:nth-child(2) { width: 10%; }  /* Date and Time */
    .stat-title-3.dd:nth-child(3), .stat-value-3.dd:nth-child(3) { width: 10%; }  /* Category */
    .stat-title-3.dd:nth-child(4), .stat-value-3.dd:nth-child(4) { width: 15%; }  /* Level */
    .stat-title-3.dd:nth-child(5), .stat-value-3.dd:nth-child(5) { width: 15%; }  /* Message (Wider) */
    .stat-title-3.dd:nth-child(6), .stat-value-3.dd:nth-child(6) { width: 15%; }
    .stat-title-3.dd:nth-child(7), .stat-value-3.dd:nth-child(7) { width: 15%; }
    .stat-title-3.dd:nth-child(8), .stat-value-3.dd:nth-child(8) { width: 7%; }
    .stat-title-3.dd:nth-child(9), .stat-value-3.dd:nth-child(9) { width: 15%; }
    .stat-title-3.dd:nth-child(10), .stat-value-3.dd:nth-child(10) { width: 15%; }
    .stat-title-3.dd:nth-child(11), .stat-value-3.dd:nth-child(11) { width: 7%; }

    .stat-title-4.dd:nth-child(1), .stat-value-4.dd:nth-child(1) { width: 10%; }   /* Event ID */
    .stat-title-4.dd:nth-child(2), .stat-value-4.dd:nth-child(2) { width: 20%; }  /* Date and Time */
    .stat-title-4.dd:nth-child(3), .stat-value-4.dd:nth-child(3) { width: 20%; }  /* Category */
    .stat-title-4.dd:nth-child(4), .stat-value-4.dd:nth-child(4) { width: 20%; }  /* Level */
    .stat-title-4.dd:nth-child(5), .stat-value-4.dd:nth-child(5) { width: 10%; }  /* Message (Wider) */
    .stat-title-4.dd:nth-child(6), .stat-value-4.dd:nth-child(6) { width: 20%; }
    .stat-title-4.dd:nth-child(7), .stat-value-4.dd:nth-child(7) { width: 20%; }
    .stat-title-4.dd:nth-child(8), .stat-value-4.dd:nth-child(8) { width: 25%; }                                          


    .container-3.udm {
        height: 100%;
        width: 100%;
        border: none;
        padding-right: 10px;
    }

    .stat-content.dl, .stat-content.dp, .stat-content.di, .stat-content.ud {
        width: 100%;
        padding: 5px;
        /* border-collapse: separate; */
        /* border-spacing: 0 5px; */
    }
    
    .table-icon{
        margin-left: 20px;
    }
    .nav-head.udm, .nav-head.dp,.nav-head.di{
        display: flex;
        gap: 10px;
        justify-content: center;
        align-items: flex-end;
        text-align: center;
        margin-bottom: 30px;
    }
     /* Adjust column sizes */
    .stat-title-1.udm:nth-child(1), .stat-value-1.udm:nth-child(1) { width: 7%; }   /* Event ID */
    .stat-title-1.udm:nth-child(2), .stat-value-1.udm:nth-child(2) { width: 15%; }  /* Date and Time */
    .stat-title-1.udm:nth-child(3), .stat-value-1.udm:nth-child(3) { width: 10%; }  /* Category */
    .stat-title-1.udm:nth-child(4), .stat-value-1.udm:nth-child(4) { width: 15%; }  /* Level */
    .stat-title-1.udm:nth-child(5), .stat-value-1.udm:nth-child(5) { width: 15%; }  /* Message (Wider) */
    .stat-title-1.udm:nth-child(6), .stat-value-1.udm:nth-child(6) { width: 15%; }  /* Copy */
    .stat-title-1.udm:nth-child(7), .stat-value-1.udm:nth-child(7) { width: 15%; }  /* Copy */

    /* Adjust column sizes */
    .stat-title-2.udm:nth-child(1), .stat-value-2.udm:nth-child(1) { width: 7%; }   /* Event ID */
    .stat-title-2.udm:nth-child(2), .stat-value-2.udm:nth-child(2) { width: 15%; }  /* Date and Time */
    .stat-title-2.udm:nth-child(3), .stat-value-2.udm:nth-child(3) { width: 10%; }  /* Category */
    .stat-title-2.udm:nth-child(4), .stat-value-2.udm:nth-child(4) { width: 15%; }  /* Level */
    .stat-title-2.udm:nth-child(5), .stat-value-2.udm:nth-child(5) { width: 15%; }  /* Message (Wider) */

    .stat-title-3.udm:nth-child(1), .stat-value-3.udm:nth-child(1) { width: 7%; }   /* Event ID */
    .stat-title-3.udm:nth-child(2), .stat-value-3.udm:nth-child(2) { width: 15%; }  /* Date and Time */
    .stat-title-3.udm:nth-child(3), .stat-value-3.udm:nth-child(3) { width: 10%; }  /* Category */
    .stat-title-3.udm:nth-child(4), .stat-value-3.udm:nth-child(4) { width: 15%; }  /* Level */
    .stat-title-3.udm:nth-child(5), .stat-value-3.udm:nth-child(5) { width: 15%; }  /* Message (Wider) */
                        

    
    .clearbttn {
        display: flex;
        position: absolute;
        padding-right: 15px;
        top: 5;
        right: 25;
        cursor: pointer;
    }

    @media(min-width:1920px) {
        .clearbttn {
            display: flex;
            position: absolute;
            padding-right: 15px;
            top: 5;
            right: 40;
            cursor: pointer;
        }
    }

    .on,
    .off,
    .delete,
    .update {
        display: none;
    }

    .on:hover,
    .off:hover,
    .delete:hover,
    .update:hover {
        background-color: rgb(231, 229, 229);
    }

    #group-name {
        display: none;
        /* Hide input initially */
        margin-top: 5px;
        width: 80%;
        position: absolute;
        left: 0;
        border: none;
        outline: none;
    }

    @media (min-width: 1920px) {
        #group-name {
            display: none;
            /* Hide input initially */
            margin-top: 5px;
            width: 80%;
            position: absolute;
            left: 0;
            border: none;
            outline: none;
            /* z-index: 10; */
        }
    }

    .policycont.visible {
        display: flex;
        justify-content: center;
        align-items: flex-end;
        width: 100%;
        margin: auto;
        height: 70px;
        position: relative;
        /* Keeps the floating box positioned correctly */
        margin-bottom: 10px;
    }

    .policy-box {
        display: flex;
        /* Arrange items in a column */
        gap: 10px;
        background: white;
        padding-top: 25px;
        padding-right: 10px;
        padding-left: 10px;
        padding-bottom: 10px;
        border-radius: 8px;
        box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.2);
        width: 95%;
        border: 1px solid #ccc;
        z-index: 100;
        height: 100%;
    }

    .policycont.hidden {
        display: none;
    }

    .policy-box input {
        /* width: 100%; */
        /* padding: 8px; */
        border: 1px solid #ccc;
        border-radius: 5px;
        outline: none;
    }

    /* .policy-box select {
            width: 100%;
            outline: none;
        } */
    /* .policy-box option {
            width: 100%;
            padding: 8px;
            border: 1px solid #ccc;
            border-radius: 5px;
            outline: none;
        } */

    #create-policy {
        background: #007bff;
        color: white;
        border: none;
        padding: 4px 12px;
        border-radius: 5px;
        cursor: pointer;
        width: 100%;
    }

    #create-policy:hover {
        background: #0056b3;
    }

    .policy-host,
    .policy-action,
    .policy-group {
        position: relative;
        display: flex;
        /* align-items: center; */
        align-items: flex-end;
        width: 100%;
        cursor: pointer;
        border-bottom: 2px solid #ddd;
    }

    #policy-host,
    #policy-action,
    #policy-group {
        width: 100%;
        border: none;
        outline: none;
        background: transparent;
    }

    /* #policy-group option {
        position:absolute;
        top : -30px;
    } */
    /* .policy-host option {
            width: 100%;
            background: transparent;
        } */
    /* .policy-host select {
            width: 100%;
            
        } */
    .policy-host::after,
    .policy-action::after,
    .policy-group::after {
        width: 100%;
        position: absolute;
        right: -180px;
        font-size: 12px;
        color: #777;
        pointer-events: none;
        /* Prevent clicking on the arrow itself */
    }

    .policy-host:hover::after,
    .policy-action:hover::after,
    .policy-group:hover::after {
        content: '▼';
        color: #333;
    }

    .policy-host:hover,
    .policy-action:hover,
    .policy-group:hover {
        content: '▼';
        border-color: #aaa;
    }

    @media (min-width: 1920px) {

        .policy-host::after,
        .policy-action::after,
        .policy-group::after {
            width: 100%;
            position: absolute;
            right: -280px;
            font-size: 12px;
            color: #777;
            pointer-events: none;
            /* Prevent clicking on the arrow itself */
        }

        .policy-host:hover::after,
        .policy-action:hover::after,
        .policy-group:hover::after {
            content: '▼';
            color: #333;
        }

        .policy-host:hover,
        .policy-action:hover,
        .policy-group:hover {
            content: '▼';
            border-color: #aaa;
        }
    }

    .stats-container-1.dp {
        display: flex;
        flex-direction: column;
        gap: 20px;
        /* justify-content: space-between; */
        max-height: 100%;
    }
    
    
    #multi-select-dropdown1,
    #multi-select-dropdown2 {
        position: absolute;
        background: white;
        border: 1px solid #ccc;
        padding: 10px;
        width: 200px;
        max-height: 150px;
        overflow-y: auto;
        box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
        z-index: 1000;
        top: 40px;
    }

    #multi-select-dropdown1 label,
    #multi-select-dropdown2 label {
        position: relative;
        display: flex;
        padding: 5px;
        cursor: pointer;
        justify-content: left;
        gap: 10px;
        top: 10px
    }

    #multi-select-dropdown1 label:hover,
    #multi-select-dropdown2 label:hover {
        background-color: #f0f0f0;
    }

    .cls {
        border: none;
        outline: none;
        background-color: transparent;
        position: absolute;
        right: 0;
        top: 0;
        margin-bottom: 20px;
    }

    .container-3.dp {
        height: 100%;
        width: 100%;
        border: none;
        padding-right: 10px;
        /* overflow-y: auto; */
    }
    .table-container.dp, .table-container.di {
        background-color: white;
        width: 100%;
        max-height: 550px;
        /* Adjust height as needed */
        /* border: 1px solid #ccc; */
        border: 1px solid #d3d3d3;
        overflow-y: auto;
        /* position: relative; */
        /* margin-bottom: 20px */
    }
    
    @media (min-width: 1920px) {
        .table-container.dp, .table-container.di {
            background-color: white;
            width: 100%;
            height: 550px !important;
            /* Adjust height as needed */
            /* border: 1px solid #ccc; */
            border: 1px solid #d3d3d3;
            overflow-y: auto;
            /* position: relative; */
            /* margin-bottom: 20px */
        }

        .stat-content.dp {
            width: 100%;
            /* border-collapse: separate; */
            /* border-spacing: 0 5px; */
            height: 100%;
            padding: 5px;
        }

        .container-3.dp {
            height: 100%;
            width: 100%;
            border: none;
            padding-right: 10px;
            overflow-y: hidden;
        }
    }

    .new-policy {
        text-wrap-mode: nowrap;
        padding: 0 10px 0 10px;
        width: auto;
        height: 30px;
        border-radius: 10px;
        border: none;
        background-color: #d9d9d9;
        border-color: #d9d9d9;
        box-shadow: -2px 2px 5px rgba(0, 0, 0, 0.3);

    }  

    .container-wrapper-cmm.dp, .container-wrapper-cmm.di {
        margin-left: 5px;
        margin-top: 20px;
        height: 100%;
        width: 100%;
        border: none;
    }

    
    /* Adjust column sizes */
    .stat-title-1.dp:nth-child(1),
    .stat-value-1.dp:nth-child(1) {
        width: 7%;
    }

    /* Event ID */
    .stat-title-1.dp:nth-child(2),
    .stat-value-1.dp:nth-child(2) {
        width: 10%;
    }

    /* Date and Time */
    .stat-title-1.dp:nth-child(3),
    .stat-value-1.dp:nth-child(3) {
        width: 10%;
    }

    /* Category */
    .stat-title-1.dp:nth-child(4),
    .stat-value-1.dp:nth-child(4) {
        width: 10%;
    }

    /* Level */
    .stat-title-1.dp:nth-child(5),
    .stat-value-1.dp:nth-child(5) {
        width: 10%;
    }

    /* Message (Wider) */
    .stat-title-1.dp:nth-child(6),
    .stat-value-1.dp:nth-child(6) {
        width: 10%;
    }

    /* Copy */
    .stat-title-1.dp:nth-child(7),
    .stat-value-1.dp:nth-child(7) {
        width: 10%;
    }

    /* Copy */
    .stat-title-1.dp:nth-child(8),
    .stat-value-1.dp:nth-child(8) {
        width: 7%;
    }

    /* Copy */
    .stat-title-1.dp:nth-child(9),
    .stat-value-1.dp:nth-child(9) {
        width: 7%;
    }

    /* Copy */
    .stat-title-1.dp:nth-child(10),
    .stat-value-1.dp:nth-child(10) {
        width: 15%;
    }


    /* Adjust column sizes */
    .stat-title-1.di:nth-child(1),
    .stat-value-1.di:nth-child(1) {
        width: 7%;
    }

    /* Event ID */
    .stat-title-1.di:nth-child(2),
    .stat-value-1.di:nth-child(2) {
        width: 15%;
    }

    /* Date and Time */
    .stat-title-1.di:nth-child(3),
    .stat-value-1.di:nth-child(3) {
        width: 10%;
    }

    /* Category */
    .stat-title-1.di:nth-child(4),
    .stat-value-1.di:nth-child(4) {
        width: 15%;
    }

    /* Level */
    .stat-title-1.di:nth-child(5),
    .stat-value-1.di:nth-child(5) {
        width: 12%;
    }

    /* Message (Wider) */
    .stat-title-1.di:nth-child(6),
    .stat-value-1.di:nth-child(6) {
        width: 13%;
    }

    /* Copy */
    .stat-title-1.di:nth-child(7),
    .stat-value-1.di:nth-child(7) {
        width: 7%;
    }

    /* Copy */
    .stat-title-1.di:nth-child(8),
    .stat-value-1.di:nth-child(8) {
        width: 7%;
    }

    /* Copy */
    .stat-title-1.di:nth-child(9),
    .stat-value-1.di:nth-child(9) {
        width: 10%;
    }

    /* Copy */
    .stat-title-1.di:nth-child(10),
    .stat-value-1.di:nth-child(10) {
        width: 7%;
    }

    /* Copy */
    .stat-title-1.di:nth-child(11),
    .stat-value-1.di:nth-child(11) {
        width: 7%;
    }

    /* Copy */
    .stat-title-1.di:nth-child(12),
    .stat-value-1.di:nth-child(12) {
        width: 7%;
    }

    .qbtnd, .fbtnd, .ubtnd, .rbtnd,.qbtnd1, .fbtnd1, .ubtnd1, .rbtnd1,.ubtnd2,.ubtnd3{
        /* margin-right: 2%; */
        width: 12%;
        height: 100%;
        font-size: small;
        margin-bottom: 10px;
        border-radius: 5px;
        background-color: #f3f5f2; /* Dark blue background */
        color: black; /* White text */
        font-weight: 500;
        transition: all 0.3s ease; /* Smooth transitions */
        border: none; /* Remove borders */
        cursor: pointer; /* Pointer cursor on hover */
        box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.4); 
        text-wrap-mode: wrap;
    }

    .qbtnd:hover, .fbtnd:hover, .ubtnd:hover, .rbtnd:hover,.qbtnd1:hover, .fbtnd1:hover, .ubtnd1:hover, .rbtnd1:hover,.ubtnd2:hover,.ubtnd3:hover {
        background-color: #f3f5f2; /* Slightly lighter blue on hover */
        transform: translateY(-3px); /* Lift effect on hover */
    }

    .qbtnd:active, .fbtnd:active, .ubtnd:active, .rbtnd:active,.qbtnd1:active, .fbtnd1:active, .ubtnd1:active, .rbtnd1:active,.ubtnd2:active,.ubtnd3:active{
        background-color: #f3f5f2; /* Keep the same dark blue for active state */
        transform: translateY(2px); /* Push down effect on click */
    }

    .qbtnd:focus, .fbtnd:focus, .ubtnd:focus, .rbtnd:focus,.qbtnd1:focus, .fbtnd1:focus, .ubtnd1:focus, .rbtnd1:focus,.ubtnd2:focus,.ubtnd3:focus {
        outline: none; /* Remove focus outline */
        box-shadow: 0 0 0 2px #949393; /* Soft dark blue shadow on focus */
    } 

    #filter1,#filter2,#filter3 {
        display: none;
        /* Hide input initially */
        margin-top: 5px;
        width: 100%;
        position: absolute;
        left: 0;
        border: none;
        outline: none;
    }

    @media (min-width: 1920px) {
        #filter1,#filter2,#filter3 {
            display: none;
            /* Hide input initially */
            margin-top: 5px;
            width: 100%;
            position: absolute;
            left: 0;
            border: none;
            outline: none;
            /* z-index: 10; */
        }
    }
    .autocomplete-list {
        position: absolute;
        left: 0;
        width: 100%;
        top: 100%;
        margin-top: 5px;
        border: 1px solid #ccc;
        background: white;
        max-height: 150px; /* limits visible height */
        overflow-y: auto;  /* adds scroll if needed */
        z-index: 1000;
        display: none;
        box-sizing: border-box;
    }
    .datepick{
        display: flex;
        align-items: flex-end;
        gap: 5px;
        width:60%;
        
    }
    .datepick > label{
        font-size: 16px;
        text-wrap-mode: nowrap;
    }
    .datepick > input{
        padding: 1px 10px; 
        border: 1px solid #ccc; 
        border-radius: 4px;
    }
    #timePeriodh{
        display:flex;
        width:30%;
        height: 24px;
        font-size: 14px;
        padding: 3px;
        top: 1px;
        border-radius: 4px;
        box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.4);

        z-index: 100;
    }

    .stat-content1.dm,.stat-content1.ud,.stat-content.dd {
        width: 100%;
        padding: 5px;
        /* border-collapse: separate; */
        /* border-spacing: 0 5px; */
    }

    .bth {
        display: grid;
        grid-template-columns: repeat(5,1fr);
        gap:20px
        /* width: 100%;
        height: 40px; */
        
    }
    .bth button{
        width: 100%;
        text-wrap-mode: nowrap;
    }

    
    .button-container.dh {
        margin-right: 20px;
        display: block;
        /* margin-top: 40px; */
        flex: 0.9;
        text-align: left;
        width: auto;
        min-width: 200px;
        /* padding-left: 5px; */
        margin-top: 20px;
        gap: 5px;
        padding-left: 20px;
    }

    @media (min-width: 1920px) {
        .button-container.dh {
            margin-top: 40px;
            flex: 0.9;
            text-align: center;
            width: auto;
            min-width: 230px;
        }
        .bth {
            display: flex;
            width: 100%;
            height: 40px;
        }
    }
    
    
    /* Each filter item */
    .filter-item.dh {
        position: relative;
        display: flex;
        /* align-items: center; */
        align-items: flex-end;
        /* background: white; */
        /* border-radius: 5px; */
        /* border: 1px solid #ddd; */
        border-bottom: 2px solid #ddd;
        width: 60%;
        cursor: pointer;
    }

    /* Add arrow */
    .filter-item.dh::after {
        position: absolute;
        right: 10px;
        font-size: 12px;
        color: #777;
        pointer-events: none;
        /* Prevent clicking on the arrow itself */
    }

    /* Change arrow on hover */
    .filter-item.dh:hover::after {
        content: '' !important;
        color: #333;
    }

    /* Simulate dropdown (for now, basic example) */
    .filter-item.dh:hover {
        content: '' !important;
        border-color: #aaa;
    }

    
    @media (max-width: 1366px) {
        #filter1,#filter2,#filter3 {
            font-size:14px;
        }
        .exp{
            width:85%;
            gap:10px;
        }
        #timePeriodh{
            width:35%;
            font-size:12px;
        }
        .datepick{
            width:18%;
            justify-content:space-between;
        }
        .datepick > label{
        font-size: 14px;
        text-wrap-mode: nowrap;
        }
        .datepick > input{
            width:55%;
            padding: 1px 2px; 
            border: 1px solid #ccc; 
            border-radius: 4px;
            font-size:12px;
        }
        .filter-item.dh {
            width: 80%;
        }
        .applyfilt,.remvfilt,.expt {
            font-size:14px;
        }
    }
    .activate {
        outline: none;
        box-shadow: 0 0 0 2px #949393 ;
    }

    /* Light mode */
    body:not(.dark-mode) .activate:focus,
    body:not(.dark-mode) .activate:active {
        box-shadow: 0 0 0 2px #949393 !important; /* Gray shadow in light */
    }
    
    /* Adjust column sizes */
    .stat-title-1.dh:nth-child(1),
    .stat-value-1.dh:nth-child(1) {
        width: 2%;
    }

    /* Event ID */
    .stat-title-1.dh:nth-child(2),
    .stat-value-1.dh:nth-child(2) {
        width: 7%;
    }

    /* Date and Time */
    .stat-title-1.dh:nth-child(3),
    .stat-value-1.dh:nth-child(3) {
        width: 7%;
    }

    /* Category */
    .stat-title-1.dh:nth-child(4),
    .stat-value-1.dh:nth-child(4) {
        width: 7%;
    }

    /* Level */
    .stat-title-1.dh:nth-child(5),
    .stat-value-1.dh:nth-child(5) {
        width: 12%;
    }

    /* Message (Wider) */
    .stat-title-1.dh:nth-child(6),
    .stat-value-1.dh:nth-child(6) {
        width: 13%;
    }

    /* Copy */
    .stat-title-1.dh:nth-child(7),
    .stat-value-1.dh:nth-child(7) {
        width: 7%;
    }

    /* Copy */
    .stat-title-1.dh:nth-child(8),
    .stat-value-1.dh:nth-child(8) {
        width: 7%;
    }

    /* Copy */
    .stat-title-1.dh:nth-child(9),
    .stat-value-1.dh:nth-child(9) {
        width: 10%;
    }

    /* Copy */
    .stat-title-1.dh:nth-child(10),
    .stat-value-1.dh:nth-child(10) {
        width: 7%;
    }

    /* Copy */
    .stat-title-1.dh:nth-child(11),
    .stat-value-1.dh:nth-child(11) {
        width: 7%;
    }

    /* Copy */
    .stat-title-1.dh:nth-child(12),
    .stat-value-1.dh:nth-child(12) {
        width: 7%;
    }

    /* Section DLP - Dashboard */
    .content-containerddm{
        /* display: flex; */
        /* overflow: auto; */
        flex-grow: 1;
        max-width: 100%;
        min-width: 0; /* Prevents flexbox from shrinking */
        height: 100%;
        overflow-y: auto;
        overflow-x: hidden;
    }

    .container1,.container3,.container4,.container5,.container6,.container7,.container8,.container9,.container10{
        margin: 10px;
        width: 100%;
        height: 300px;
        display: flex;
        justify-content: center;
        gap: 20px;
        margin-bottom: 20px;                
    }
    .container2{
        margin: 10px;
        margin-top: 0px;
        width: 100%;
        min-height: 300px;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        margin-bottom: 20px;   
    }
    .container51{
        width: 30%;
        border: 1px solid rgba(0,0,0,0.2);
        border-radius: 10px;
    }
    .container41{
        width: 30%;
        border: 1px solid rgba(0,0,0,0.2);
        border-radius: 10px;
    }
    /* ,.container61 */
    .container11{
        width: 30%;
        display: flex;
        justify-content: space-between;
        gap: 20px;
    }

    .containersub1,.containersub2{
        width: 50%;
        height: 100%;
        border: 1px solid rgba(0,0,0,0.2);
        border-radius: 10px;
    }
    .container611{
        display: flex;
        justify-self: center;
        height: 75%;
        width: 80%;
    }
    .polmanchart{
        width: 100%;
        height: 80%;
        display: flex;
        justify-self: center;
        align-items: center;
    }
    .container4211{
        width: 80%;
        height: 50%;
        display: flex;
        justify-self: center;
        align-items: center;
    }
    .container52{
        margin-right: 20px;
        width: 70%;
        border: 1px solid rgba(0,0,0,0.2);
        border-radius: 10px;
    }
    .container42{
        margin-right: 20px;
        width: 100%;
        border: 1px solid rgba(0,0,0,0.2);
        border-radius: 10px;
    }
    .container62{
        width: 100%;
        margin-right: 20px;
        border: 1px solid rgba(0,0,0,0.2);
        border-radius: 10px;
    }
    .container12{
        margin-right: 20px;
        width: 70%;
        height: 300px;
    }
    .container21{
        display: flex;
        justify-content: space-between;
        gap: 20px;
        width: 100%;
        height: 200px;
        margin-bottom: 20px;
    }
    .container2121,.container2131{
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        /* padding-left: 10px; */
        width: 100%;
        height: 90%;
    }
    .obar{
        height: 50%;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }
    #percento,#percentc{
        position: relative;
        left: 40%;
        height: 20%;
        color:#3DA9C0;
    }
    
    .cntp{
        position: relative;
        left: -4%;
    }
    .openper-container,.criticalper-container {
    width: 90%;              /* restrict fill to 80% of parent */
    background-color: #eee;  /* optional: background behind the bar */
    height: 5%;            /* set desired height */
    border-radius: 50px;     /* ensures inner bar doesn't overflow */
    }   

    .openper , .criticalper {
        height: 100%;
        width: 0%;               /* will be set by JS */
        transition: width 0.5s ease;
        border-radius: 50px; 
    }

    .openper.prog,.criticalper.prog{
        border-radius: 1px solid linear-gradient(30deg, rgba(1, 235, 252,0.7), rgba(1, 254, 180, 0.5));
        background: linear-gradient(30deg, rgba(1, 235, 252,0.7), rgba(1, 254, 180, 0.5));
        border-color: linear-gradient(30deg, rgba(1, 235, 252,0.7), rgba(1, 254, 180, 0.5));
    }

    .container211{
        /* margin-right: 10px; */
        width: 30.7%;
        height: 200px;
        border: 1px solid rgba(0,0,0,0.2);
        border-radius: 10px;
    }
    .container212,.container213{
        /* margin-right: 10px; */
        width: 35%;
        height: 200px;
        border: 1px solid rgba(0,0,0,0.2);
        border-radius: 10px;
    }
    .container213{
        margin-right: 20px; 
    }
    .container31,.container71,.container81,.container91,.container101{
        margin-right: 20px;
        height: 300px;
        width: 100%;
        border: 1px solid rgba(0,0,0,0.2);
        border-radius: 10px;
    }
    .container22{
        margin-right: 20px;
        height: 300px;
        width: 98.8%;
        border: 1px solid rgba(0,0,0,0.2);
        border-radius: 10px;
    }
    .container420{
        display: flex;
        justify-content: space-between;
        width: 100%;
        height: 80%;
    }
    .container21main{
        display: flex;
        justify-content: space-between;
        width: 100%;
        height: 70%;
    }
    .container2111,.container2112{
        width: 49%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .container522{
        display: flex;
        justify-content: center;
        width: 100%;
        height: 90%;
    }
    .container423{
        display: flex;
        /* flex-direction: column; */
        align-items: flex-start;  
        justify-content: flex-start;
        width: 30%;
        height: 100%;
    }
    .container421{
        width: 15%;
        height: 90%;
    }
    .container422{
        width: 40%;
        height: 90%;
    }
    .container421{
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .container4222{
        display: flex;
        flex-direction: column;
        gap: 10px;
        height: 80%;
        width: 100%;
    }
    .policyvit{
        display: flex;
        position: relative;
        top: -5%;
        gap: 10px;
        padding-left: 50px
    }
    .policyvi{
        height: 20%;
        display: flex;
        justify-content: center;
        gap: 10px;
    }
    .countvi{
        font-size: 36px;
        display: flex;
        align-items: center;
    }
    .infopolvi{
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .polv,.polper{
        margin-bottom: 0;
        font-size: 14px;
    }
    .viewpolvi,.polbt{
        text-wrap-mode: nowrap;
        /* margin:0px 10px; */
        font-size: 16px;
        width: 100%;
        height: 30%;
        border: 1px solid rgba(0,0,0,0.2) !important;
        border-radius: 10px;
        background-color: transparent;
        border-color: transparent;
        border: none;
        box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.4);
    }
    .viewpolvi:hover,.totinc:hover,.openinc:hover,.critinc:hover,.rtbtn:hover {
        background-color: #f3f5f2;
        box-shadow: 0 2px 5px 1px #949393; 
    }
    .polbt{
        width: 15%;
        height: 100%;
        margin: 0px;
    }
    #statusChart1{
        display: flex;
        justify-self: center;
        width: 90%;
        height: 90%; /* Prevents the graph from being oversized */
    }
    .subddm{
        padding: 10px;
        display: flex; 
        justify-content: space-between;
        height: 18px;
    } 
    
    #timePeriod0,#timePeriod1{
        margin-top: 20px;
        position: relative;
        height: 24px;
        font-size: 14px;
        padding-left: 10px;
        width: 100px;
        top: -5px;
        border-radius: 4px;
        z-index: 100;
    }

    #line_graph1{
        margin-top: 20px;
        width: 100% !important;
        height: 80% !important;
    }  
    #line_graph2{
        margin-top: 20px;
        width: 100% !important;
        height: 80% !important;
    }  
    #predictiveLineChart{
        width: 90% !important;
        height: 80% !important;
    }
    #linechart3{
        width: 100% !important;
        height: 100% !important;
    } 
    .polmang{
        width: 15%;
        display: flex;
        height: 90%;
        justify-self: center;
        justify-content: center;
        align-items: center;
    } 
    #polmanage{
        width: 100% !important;
        height: 100% !important;
    }
    .container622{
        width: 100%;
        height: 80% !important;
        /* background: linear-gradient(to right,rgba(0,4,56,0.2),rgba(0,4,56,1)); */
        /* background: linear-gradient(to right,rgba(11,66,117,0.2),rgba(11,66,117,1)); */
        /* background: linear-gradient(to right,rgba(0,34,85,0.2),rgba(0,34,85,1)); */
    }
    #dataheatmap{
        width: 100% !important;
        height: 100% !important;
        /* opacity: 0.8; */
    }
    .notification{
        width: 100%;
        height: 80%;
        overflow-y:auto;
    }
    .notf{
        width: 100%;
        padding:0px 10px;
        display: flex;
        align-items: center;
        animation: fadeIn 0.3s ease-in-out;
        border: 1px solid #f3f5f2;
        cursor: pointer;
        /* border-radius: 5px; */
    }
    .notfc.al{
        padding: 10px 0px;
    }
    .notfc{
        width: 50%;
    }
    .notfc.date{
        width: 20%;
    }
    .notfc.key{
        width: 10%;
    }
    .notfc.new{
        width: 20%;
    }
    .notfc.special{
        width: 5%;
    }
    .criticala {
        color: #f44336;
        opacity: 0.6;
    }
    .high{
        color: 	#F97A00;
        opacity: 0.6;
    }
    .warning {
        color: #ffc107;
        opacity: 0.6;
    }

    .safe {
        color: #28a745;
        /* opacity: 0.6; */
    }

    .datal{
        display: flex;
        justify-self: center;
        width: 100%;
        height: 100%;
        padding: 10px;
    }

    .trend1{
        color: #f44336;
    }

    .alertnotif{
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .subalert1,.subalert2{
        font-size: 16.8px;
        font-weight: 500;
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 50%;
        padding: 5px 45px;
        cursor: pointer;
    }
    .clse {
        position: absolute;
        top:10px;
        right: 10px;
        background: transparent;
        border: none;
        font-size: 18px;
        cursor: pointer;
    }
    .opencont.hidden{
        display: none;
    }
    .opencont {
        position: fixed;
        z-index: 200;
        width: 100%;
        height: 100%;
        background-color: rgba(51, 51, 51, 0.4); /* Transparent background only */
        backdrop-filter: blur(4px); /* Blur effect */
    }

    .opencontmain {
        /* display: flex; */
        position: absolute;
        top: 10%;
        left: 15%;
        width: 60%;
        height: 70%;
        z-index: 300;
        border: 1px solid white;
        border-radius: 10px;
        background-color: white;
        box-shadow: 0 2px 5px 1px #949393;
    }

    .charthov1{
        width: 100%;
        height: 80%;
        display: flex;
        justify-self: center;
        align-items: center;
    }
    .cont10btn {
        width: 100%;
        height: 90%;
        padding: 10px;
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        justify-items: center;   /* ⬅️ center horizontally */
        align-items: start;      /* ⬅️ align to the top */
    }

    .rtbtn{
        width: 50%;
        height: 40%;
        border-radius: 10px;
        background-color: transparent;
        border-color: transparent;
        box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.4);
    }
    .valt,.vntf{
        width:30%;
        border-radius: 10px;
        background-color: #f3f5f2;
        border-color: transparent;
        box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.4);
    }
    .container112{
        width: 100%;
        /* padding: 0px 10px; */
        height: 100%;
        display: flex;
        align-items: center;
        gap: 20px;
    }
    .container1122{
        width: 66%;
        height: 100%;
        border: 1px solid rgba(0,0,0,0.2);
        border-radius: 10px;
    }
    .container1123{
        width: 34%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: flex-end;
        border: 1px solid rgba(0,0,0,0.2);
        border-radius: 10px;
    }

    .btnn1{
        background-color: transparent;
        border: none; 
    }
    ul.dropdown-menu.show{
        padding: 10px;
    }
    ul.dropdown-menu.show div{
        padding: 10px 0px;
        overflow:auto;
        text-align: center;
        cursor: pointer;
        border-bottom: 1px solid black;
    }
    ul.dropdown-menu.show div:hover{
        color: black;
    }
    .o_content.o_component_with_search_panel {
        overflow: hidden !important;
    }
    .actit,.actii{
        cursor: pointer;
    }
    .tablecont{
        width: 99%;
        height: 80%;
        margin: 10px;
        padding-top: 0px;
        overflow-y: auto;
        border: 1px solid #d3d3d3;
    }
    .stat-content11{
        width: 100%;
        height: 100%;
        overflow-y: auto;
        padding: 5px;
    }

    .hbarcont{
        width: 100%;
        height: 80%;
        padding: 10px;
    }
    #hbar{
        width: 100% !important;
        height: 100% !important;
    }

    .statustp{
        width: 80%;
        height: 90%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        position: relative;
        top: 0%;
        gap: 20px;
    }
    .statust{
        width: 100%;
        height: 100%;
        /* gap: 5px; */
        display: flex;
        flex-direction: column;
        justify-items: flex-end;
        align-items: flex-start;
    }
    .totinc,.openinc,.critinc{
        width: 100%;
        height: 33.3%;
        padding: 5px;
        padding-top: 3%;
        padding-left: 20%;
        border-radius: 5px;
        border-bottom: 1px solid #f3f5f2;
        cursor: pointer;
    }
    .blockst, .allowst,.btnst,.allowstp{
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .h4txt{
        padding: 10px;
    }
    .htxt{
        font-size: 16.8px;
        margin-bottom:  2px;
        font-weight: 500;
    }

    .vertline{
        width: 1px;
        background-color: #636363;
        height: 90%;
    }

    #pieChart,#piGraph1 {
        display: flex;
        justify-self: center;
        position: relative;
        top: 5%;
        width: 100% !important; /* Fill the container width */
        height: 100% !important; /* Fill the container height */
    }

    #radialgraph1{
        display: flex;
        justify-self: center;
        width: 90% !important; /* Fill the container width */
        height: 90% !important; /* Fill the container height */
    }

    #gaugechart1{
        display: flex;
        justify-self: center;
        align-self: center;
        position: relative;
        top: 20%;
        width: 100% !important; /* Fill the container width */
        height: 100% !important; /* Fill the container height */ 
    }

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

    @media(max-width:1280px){
        .container1,.container3,.container4,.container5,.container6,.container7,.container8,.container9,
        .container10,.container12,.container31,.container71,.container81,.container91,.container101{
            height: 250px;
        }
        .container2,.container211,
        .container212,.container212,.container21{
            height: 180px;
        }
        .containersub1,.containersub2{
            width : 47%;
        }
        #gaugechart{
            top: 40%;
            height: 50% !important;
        }
        #radialgraph{
            width: 100% !important;
            height: 70% !important;
        }
        #statuschart1{
            width: 100% !important;
            height: 70% !important;
        }
        .countvi{
            font-size: 28px;
        }
        .polv,.polper{
            font-size: 12px;
        }
        .subalert1,.subalert2{
            padding: 5px 35px;
        }
        .policyvit{
            padding-left: 5px;
        }
        .notification{
            height: 70%;
        }
        .valt,.vntf{
            font-size: 12px;
            width: 35%;
        }
        #radialgraph{
            position: relative;
            top: -10%;
        }
        .apexcharts-text.apexcharts-datalabel-label,.apexcharts-text.apexcharts-datalabel-value{
            font-size: 12px !important;
        }
        .container4211{
            width: 90%;
            height: 80%;
        }
        #gaugechart{
            top: 20%;
        }
        .pols1,.pols2{
            width: 50%;
        }
        .viewpolvi{
            width: 100%;
            text-wrap-mode: wrap;
        }
        .nav-panel{
            width: 100%;
        }
        .layer-row{
            width: 100%;
        } 
        .layer-segment{
            width: 110px;
        }
        .notfc{
            font-size: 10px;
        }
        .notfc{
        width: 45%;
        }
        .notfc.date{
            width: 20%;
        }
        .notfc.new{
            width: 20%;
        }
        .notfc.special{
            width: 5%;
        }
    }

    .apexcharts-heatmap-rect {
        stroke: white;
        stroke-width: 2px;
        stroke-opacity: 1;
        rx: 0 !important;
        ry: 0 !important;
        shape-rendering: crispEdges; /* Avoids anti-alias gaps */
    }
    /* , .o_search_panel_section_header */
    .count-val{
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        right: 5px;
        float:right;
        height: 18px;
        width: 18px;
        padding:0px;
        color: #111827;
        border: 1px solid #111827;
        border-radius: 5px;
        background-color: #111827;
    }   

    /* Section -  Unified Dashboard */
        
    .container-wrapper-anthu {
        width: 100%;
        display: flex;
        flex-direction: column;
        /* Stacks elements vertically */
        margin-right: 3px;
    }

    .stats-container.ud {
        width:40%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        overflow-x: hidden;
        /* height: 250px; */
    }
    @media(max-width:1366px){
        .stats-container.ud {
            height:200px;
        }
    }

    /* box html */
    .container07 {
        display: flex;
        gap: 20px;
        /* Reduced gap between row and column sections */
        /* justify-content:space-between; */
        justify-content: center;
        max-width: 100%;
        /* max-width: 1200px; */
        margin-top: 10px;
        margin-left: 2.5vh;
        padding: 10px;
    }
    .container08 {
        height:250px;
        display: flex;
        justify-content: space-between;
        /* display: flex;
        gap: 8px;
        justify-content: space-between;
        width: 91%;
        max-width: 1200px; */
        margin-left: 2.5vh;
        padding: 10px;
        margin-bottom: 30px;
    }
    .container077 {
        height:350px;
        display: flex;
        flex-direction:column;
        justify-content: center;
        /* display: flex;
        gap: 8px;
        justify-content: space-between;
        width: 91%;
        max-width: 1200px; */
        margin-left: 2.5vh;
        padding: 10px;
        margin-bottom: 120px;
    }
    .container09 {
        display: flex;
        justify-content: space-between;
        /* display: flex;
        gap: 8px;
        justify-content: space-between;
        width: 91%;
        max-width: 1200px; */
        margin-top: 50px;
        margin-left: 2.5vh;
        padding: 20px;
    }

    .barchart,.blockchart{
        width: 10%;
        height: 220px;
        padding-bottom: 10px;
    }
    @media(max-width:1366px){
        .blockchart{
        width: 22%;
        height: 200px;
        padding-bottom: 10px;
    } 
    }
    .piedomchart,.pieipchart,.actchart{
        margin-top: 25px;
        width: 33%;
        height: 300px;
    }
    .ransomealert,.appver{
        width: 100%;
        height: 250px;
        padding-bottom: 10px;
    }
    #pdch,#pich,#blockedDomainsChart,#ransomealerts,#actch,#appv{
        width: 100%;
    }
    #barch{
        height: 250px;
    }
    .sub.ud{
        display: flex;
        justify-content: left;
        gap: 10px;
        height: 18px;
        margin-bottom: 10px;
    }        
        
    .datepickud{
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
        
    }
    .datepickud > label{
        font-size: 16px;
    }
    .datepickud > input{
        padding: 1px 10px; 
        border: 1px solid #ccc; 
        border-radius: 4px;
    }
    .ransomhead{
        text-align: center;
        padding-bottom: 10px;
        color: #666666;
        font-size: 18;
        font-weight: 700;
        font-size:'Arial, sans-serif';
    }
    #details-box {
        width: 300px;
        max-height: 400px;
        overflow-y: auto;
        display: none;
        padding: 15px;
        background: white;
        border: 1px solid #ccc;
        border-radius: 8px;
        box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
        text-align: left;
        position: absolute;
        top: 0;
        transition: 0.3s ease-in-out;
        z-index: 100;
    }
    .switch.ud{
        /* margin-left: 5px; */
        position: relative;
        top:6%;
        display: flex;
        gap: 20px;
        margin-right: 10px;
    }
    .force-container.ud{ 
        width: 40%;
        height: 200px;
        /* position: relative;
        overflow: hidden;  */
    }
    
    .stat-title-2.ud:nth-child(1),
    .stat-value-2 ud:nth-child(1) {
        width: 4%;
    }

    /* Event ID */
    .stat-title-2.ud:nth-child(2),
    .stat-value-2 ud:nth-child(2) {
        width: 4%;
    }

    /* Date and Time */
    .stat-title-2.ud:nth-child(3),
    .stat-value-2 ud:nth-child(3) {
        width: 10%;
    }



    /* Adjust column sizes */
    .stat-title-1.ud:nth-child(1),
    .stat-value-1.ud:nth-child(1) {
        width: 7%;
    }

    /* Event ID */
    .stat-title-1.ud:nth-child(2),
    .stat-value-1.ud:nth-child(2) {
        width: 15%;
    }

    /* Date and Time */
    .stat-title-1.ud:nth-child(3),
    .stat-value-1.ud:nth-child(3) {
        width: 10%;
    }

    /* Category */
    .stat-title-1.ud:nth-child(4),
    .stat-value-1.ud:nth-child(4) {
        width: 10%;
    }

    /* Level */
    .stat-title-1.ud:nth-child(5),
    .stat-value-1.ud:nth-child(5) {
        width: 10%;
    }

    /* Message (Wider) */
    .stat-title-1.ud:nth-child(6),
    .stat-value-1.ud:nth-child(6) {
        width: 10%;
    }

    .stat-title-1.ud:nth-child(7),
    .stat-value-1.ud:nth-child(7) {
        width: 10%;
    }

    .stat-title-1.ud:nth-child(8),
    .stat-value-1.ud:nth-child(8) {
        width: 10%;
    }

    .table-container.ud {
        width: 100%;
        max-height: 250px;
        /* Adjust height as needed */
        overflow-y: auto;
        /* border: 1px solid #ccc; */
        border: 1px solid #d3d3d3;
    }

    #graph1 {
        width: 100%;
        height: 100%;
        margin-left: auto;
        border: 1px solid #ccc;
        display: flex;
        justify-content: center; /* Centers horizontally */
        align-items: center; /* Centers vertically */
    }
    #hexHeatmap {
        background: rgb(8, 1, 48);
        box-shadow: 0 8px 32px rgba(30,40,90,0.20);
        display: block;
        width:100%;
        height:100%;
    }
    #hexHeatmap svg {
        cursor: pointer;
        height:93%;
        display: block;
        width:100%;
        background: rgb(8, 1, 48);
    }
        @media(max-width:1690px){
        #hexHeatmap svg {
            height: 90%;
        }
    }
    @media(max-width:1366px){
        #hexHeatmap svg {
            height: 70%;
        }
    }
    @media(max-width:1290px){
        #hexHeatmap svg {
            height: 30%;
        }
    }
    .unimg{
        width:100%;
        height: 90%;
        z-index:0;
        /* border: 1px solid #080130; */
        border-radius:50%;
        /* background-color:#080130; */
    }
    /* .unimg:nth-child(1){
        margin-left:10px;
    } */
    .unimg:nth-child(1){
        float:left;
    }
    .unimg:nth-child(2){
        float:right;
    }
    .dataflow{
        height:30%;
        width:100%;
        display:flex;
        align-items:center;
        justify-content:center;
    }
    .flowbits{
            position: relative;
            height:100%;
        width:90%;
        display:flex;
        flex-direction:column;
        justify-content:space-between;
    }
    .flowforward, .flowbackward {
        height: 50%;
        position: relative;
        overflow: hidden;
        }
        .flowforward{
            top:15px;
        }
        .flowbackward{
            top:-10px;
        }


        .bit, .bitr {
        width: 4px;
        height: 4px;
        background-color:#2EAA6E;
        border-radius: 50%;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 10;
        animation: pulse 0.6s ease-out;
        }
        .bit{
            background-color:#4fc3f7;
        }

        .white-trail {
        position: absolute;
        width: 40px;
        height: 2px;
        background: linear-gradient(to left, transparent,transparent,);
        pointer-events: none;
        z-index: 5;
        opacity: 0.7;
        /* #c2f0ff */
        }

        /* #001f335e */

        .white-trail.reverse {
        background: linear-gradient(to right, transparent, transparent);
        /* #b3ecff */
        }
        

        @keyframes pulse {
        0% {
            box-shadow: 0 0 0px rgba(255, 255, 255, 0.7);
            transform: scale(1);
        }
        50% {
            box-shadow: 0 0 12px rgba(255, 255, 255, 0.9);
            transform: scale(1.6);
        }
        100% {
            box-shadow: 0 0 0px rgba(255, 255, 255, 0);
            transform: scale(1);
        }
        }
        /* Pulse animation for images - runs once */
        @keyframes pulseOnce {
        0% {
            box-shadow: 0 0 0px rgba(79, 195, 247, 0.5);
            transform: scale(1);
        }
        50% {
            box-shadow: 0 0 20px rgba(79, 195, 247, 0.8);
            transform: scale(1);
        }
        100% {
            box-shadow: 0 0 0px rgba(79, 195, 247, 0);
            transform: scale(1);
        }
        }

        /* Class to trigger pulse once */
        .pulse-once {
        animation: pulseOnce 1.2s ease-out forwards;
        transform-origin: center center;
        }
            @keyframes pulse {
    0% {
        transform: scale(1);
        filter: drop-shadow(0 0 0 rgba(79, 195, 247, 0));
    }
    50% {
        transform: scale(1.1);
        filter: drop-shadow(0 0 10px rgba(79, 195, 247, 0));
    }
    100% {
        transform: scale(1);
        filter: drop-shadow(0 0 0 rgba(79, 195, 247, 0));
    }
    }
        .hexagon{
            display:flex;
            /* justify-content:center; */
            height:0px;
            /* margin-bottom:10px; */
                z-index:100;
        }
        #hexHeatmap .hex{
        position : relative;
        left:30%;
        top: -138;
        width:300px;
        height:165px;
        animation: pulse 2s ease-in-out infinite;
        z-index:100;
        background-color: transparent;
        opacity:0.7;
    }
    .hextitle{
        position:relative;
        top:399px;
        color:#dad2d2;
        margin-left: 10px
    }
    .caution{
        display:none;
        font-size:14px;
        color:#FFC64E;
        position:relative;
        left:53%;
        font-weight:600;
        top:20;
        z-index:100;
        height:0px;
        animation: pulse1 2s ease-out infinite;
    }
    .critical{
        display:none;
        font-size:14px;
        color:#ff2912;
        position:relative;
        left:39%;
        font-weight:600;
        top:101;
        z-index:100;
        height:0px;
        animation: pulse1 1s ease-out infinite;
    }.rotating-polygons {
        position: relative;
        top: -130px;    /* same top as .hex */
        left: 13%;
        width: 160px;
        height: 88px;
        transform: translateX(-50%);
        pointer-events: none;
        z-index: 3;
        /* overflow: visible; */
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .rotating-polygons2 {
        position: relative;
        top: -30px;
        left: 3%;
        width: 160px;
        height: 38px;
        transform: translateX(-50%);
        pointer-events: none;
        z-index: 3;
        /* overflow: visible; */
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .unimg.new{
        width: 150px; 
        height: 130px; 
        position:relative; 
        left:68%; 
        top:-77;
    }
    .unimg.vd{
        width: 150px; 
        height: 130px; 
        position:relative; 
        top:-115;
    }
        @media(max-width:1680px){
            .hextitle{
                top:390px;
            }
            #hexHeatmap .hex{
            position : relative;
            left:30%;
            top: -138;
            width:240px;
            height:165px;
            animation: pulse 2s ease-in-out infinite;
            z-index:100;
            background-color: transparent;
            opacity:0.7;
            }
            .caution{
                left:54%;
                font-size: 12px;
                top:25;
            }
            .critical{
                left:39.5%;
                font-size: 12px;
                top:95;
            }
            .rotating-polygons{
                top:-130px;
                left:10%;
            }
            .rotating-polygons2{
                left:3%;
                top: -35px;
            }
            .unimg.new{
                left:68%;
            }
            .container077{
                margin-bottom: 80px;
            }
            .flowbits{
                width:90%;
                margin-left:10px;
            }
            #bitcanvas{
                margin-left:10px;
                width:90%;
            }
        }
        @media(max-width:1366px){
            .hextitle{
                top:330px;
            }
            #hexHeatmap .hex{
            position : relative;
            left:22%;
            top: -138;
            width:240px;
            height:165px;
            animation: pulse 2s ease-in-out infinite;
            z-index:100;
            background-color: transparent;
            opacity:0.7;
            }
            .caution{
                left:52.7%;
                font-size: 12px;
                top:25;
            }
            .critical{
                left:34.3%;
                font-size: 12px;
                top:95;
            }
            .rotating-polygons{
                top:-130px;
                left:0%;
            }
            .rotating-polygons2{
                left:-15%;
                top: -35px;
            }
            .unimg.new{
                left:62%;
            }
            .container077{
                margin-bottom: 30px;
            }
            .flowbits{
                width:90%;
                margin-left:40px;
            }
            #bitcanvas{
                margin-left:40px;
                width:90%;
            }
        }
        @media(max-width:1280px){
            .hextitle{
                top:300px;
            }
            #hexHeatmap .hex{
            position : relative;
            left:25%;
            top: -138;
            width:240px;
            height:165px;
            animation: pulse 2s ease-in-out infinite;
            z-index:100;
            background-color: transparent;
            opacity:0.7;
            }
            .caution{
                left:56.5%;
                font-size: 12px;
                top:25;
            }
            .critical{
                left:36.5%;
                font-size: 12px;
                top:98;
            }
            .rotating-polygons{
                top:-130px;
                left:0%;
            }
            .rotating-polygons2{
                left:-15%;
                top: -35px;
            }
            .unimg.new{
                left:61%;
            }
            .container077{
                margin-bottom: 20px;
            }
            .flowbits{
                width:90%;
                margin-left:40px;
            }
            #bitcanvas{
                margin-left:40px;
                width:90%;
            }
            .unimg.vd{   
                margin-top:10px;
                width:130px;
                height:110px;
            }
        }

    .polygon{
        margin-right:10px;
        width: 6px;
        height: 6px;
        background-color: #ff3b3b;
        clip-path: polygon(
            50% 0%,
            93% 25%,
            93% 75%,
            50% 100%,
            7% 75%,
            7% 25%
        );
        transform-origin: center center;
        /* animation: rotatePolygon 3s linear infinite; */
    }
    .polygon1 {
        margin-right:10px;
        width: 6px;
        height: 6px;
        background-color: #ff3b3b;
        clip-path: polygon(
            50% 0%,
            93% 25%,
            93% 75%,
            50% 100%,
            7% 75%,
            7% 25%
        );
        transform-origin: center center;
        /* animation: rotatePolygon1 3s linear infinite; */
    }

    /* @keyframes rotatePolygon {
        from {
            transform: rotate(0deg);
        }
        to {
            transform: rotate(360deg);
        }
    }
    @keyframes rotatePolygon1 {
        from {
            transform: rotate(0deg);
        }
        to {
            transform: rotate(360deg);
        }
    } */

    /* Popup styles */
    .hex-popup {
        position: fixed;
        top: 30%;
        left: 50%;
        transform: translateX(-50%);
        background: #ffffff;
        border-radius: 8px;
        color: rgb(0, 0, 0);
        padding: 20px;
        width: 20%;
        box-shadow: 0 0 15px rgba(79, 195, 247, 0.8);
        z-index: 1000;
    }

    .hex-popup.hidden {
        display: none;
    }

    .close-btn {
        background: transparent;
        border: none;
        color: #000000;
        font-size: 18px;
        font-weight: bold;
        position: absolute;
        right: 10px;
        top: 10px;
        cursor: pointer;
    }

    .popup-title {
        width:100%;
        font-weight: bold;
        font-size: 18px;
        margin-bottom: 10px;
    }

    .action-dropdown {
        width: 100%;
        margin-bottom: 12px;
        border-radius:5px;
        padding: 5px;
    }

    .malware-label {
        margin-top:20px;
        display:flex;
        justify-content:space-between;
        gap:10px;
    }
    #tooltip1,#tooltip2  {
        position: fixed;
        top: 10px; /* Distance from the top */
        background-color: rgba(255, 255, 255, 0.9);
        border: 1px solid #333;
        padding: 8px;
        font-size: 14px;
        border-radius: 5px;
        box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
        display: none;
        pointer-events: none;
        z-index: 1000; /* Ensures it stays on top */
    }
    @keyframes pulse1 {
    0% {
        opacity: 1;
    }
    25%{
        opacity: 0.7;
    }
    50% {
        opacity:0;
    }
    75%{
        opacity:07;
    }
    100% {
        opacity: 1;
    }
    }

    .portal {
        width: 0px;
        height: 25px;
        border-radius: 60px;
        transform: translateX(-50%) rotateY(60deg); /* Side view illusion */
        transition: width 0.5s ease-in-out;
        background: transparent;
        animation: pulse 1.5s infinite ease-in-out;
        box-sizing: border-box;
        z-index:1000;
        margin-bottom:5px;

    }

    .portal.open {
      width: 15px;
      animation: pulseportal 1.5s infinite ease-in-out;
    }

    /* Top portal with green glow */

    .portal-bottom {
     top: 100px;
      border: 3px solid #2EAA6E;
      color: #2EAA6E; /* Fix for pulse glow */
      box-shadow:
        0 0 15px #2EAA6E inset,
        0 0 30px #2EAA6E,
        0 0 40px #2EAA6E,
        0 0 60px #2EAA6E;

    }

    /* Bottom portal with blue glow */

    .portal-top {
      top: 260px;
      border: 3px solid #4FC3F7;
      color: #4FC3F7; /* Fix for pulse glow */
      box-shadow:
        0 0 15px #4FC3F7 inset,
        0 0 30px #4FC3F7,
        0 0 40px #4FC3F7,
        0 0 60px #4FC3F7;

    }
    @keyframes pulseportal {
      0%, 100% {
        box-shadow:
          0 0 15px currentColor inset,
          0 0 30px currentColor,
          0 0 40px currentColor,
          0 0 60px currentColor;

      }

      50% {

        box-shadow:
          0 0 20px currentColor inset,
          0 0 50px currentColor,
          0 0 70px currentColor,
          0 0 100px currentColor;

      }

    }
    
    canvas {
        display: block;
        width: 90%;          /* canvas fills container width */
        height: 100px;        /* fixed height */
        z-index: 100;
    }

    .persistent-polygon {
        width: 6px;
        height: 6px;
        background-color: #ff3b3b;
        margin-right: 10px;
        clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
        animation: wobble 0.6s ease-in-out infinite;
        position: absolute;
    }

    @keyframes wobble {
        0%, 100% { transform: translateY(0) rotate(0deg); }
        50% { transform: translateY(-3px) rotate(5deg); }
    }