.logo {line-height:32px;margin-top:42px;}
.header-item {height:50px; display:flex; align-items:center; left:0px;}
.app-search {margin-left:20px;}
.moduleIcon{width:32px; border-radius: 5px;margin-right: 12px;}
.brandlogo{height:25px;}
.menuSearch{background: #fff0;}


/*Tabales_STARTS*/
.tableDownload{position: absolute; float: right; right: 0px; z-index: 1; display: flex; flex-direction: row-reverse;   }
.tableDASH{padding:5px;background: fixed;}
.simuTableHED{font-size: small;font-family: system-ui;}
.simuTableBDY{font-size: small;}
.TRclassDUPLI{font-size: small;background: #e4c1c1!important;}
.TRclass{font-size: small;}
/*Tabales_END*/



.sideBarOption{ position: absolute; right: -18px;padding: 1px;margin: -18px 0px 0px 0px; font-size: 20px; }


.accordinPin{font-size: 15px; z-index: 3;}
.accordion-button {z-index: 2; padding-right: 19px;}
.pinLeft{z-index: 3; padding-right: 3px; padding-left: 3px; border-radius: 5px; margin-right: 4px;margin-top: -25px;
    position: absolute;}
.pinLeft:hover{background: #a1dd81;}


.email-menu-sidebar .email-menu-sidebar-scroll { height: calc(100vh -28vh);}
.email-menu-sidebar .mx-n4 {margin-right: -0.5rem!important; margin-left: -1.5rem!important;}
.custom-hover-nav-tabs .nav-item .nav-link { height: 30px; }
.nav-link{padding: 0.2rem 0.8rem;}
.uppercase{font-style: uppercase;}
.pTABicon{margin:5px;}
.pTABiconTopMargin{margin-top:7px; margin-left: 5px; margin-right: 5px;}
.navbar-menu .navbar-nav .nav-link {  padding: 0.625rem 1.2rem;}

.jsPanel-headerbar { }
.jsPanel-replacement { height: 23px;}
.jsPanel-headerbar img {  max-height: 24px;    border-radius: 6px;    margin-left: 3px;}
.jsPanel-replacement .jsPanel-hdr .jsPanel-headerlogo img { max-width: 100px; max-height: 20px;}
.jsPanel-replacement .jsPanel-hdr { height: 20px; }
.jsPanel-controlbar { margin: -1px;}
.jsPanel-content{  padding: 11px 20px; margin: 2px 2px; overflow-x: hidden; }

/*Invoive Table*/

table { font-family: arial, sans-serif; border-collapse: collapse; width: 100%; }

td, th { border: 1px solid #dddddd; text-align: left; padding: 3px; }

tr:nth-child(even) {   background-color: #dddddd; }
thead {background: #1abc9c; color: #fff;}

.legendSatish{ width:auto; margin-bottom: 0px;   font-weight: bold; color: #1f497d;}
.noBorder{border:none;text-align: right; }



/*Invoive Table*/
@media screen and (max-width: 600px) {

.nav-right{margin-top: -34px;}
.header-navbar .navbar-wrapper .navbar-container .header-notification .show-notification, .header-navbar .navbar-wrapper .navbar-container .mega-menu-top .show-notification, .header-navbar .navbar-wrapper .navbar-container .header-notification .profile-notification, .header-navbar .navbar-wrapper .navbar-container .mega-menu-top .profile-notification {
min-width: 300px; left: -100px; top:40px;}

.bodyfixed{margin-top:0px!important;}
.home-top-margin{margin-top: 6px;}
.header-navbar .navbar-wrapper .navbar-container .nav-right { float: right; margin-top: -39px;   margin-right: 40px;}
.main-home-by-satish{margin-left:0px !important; margin-top:-10px;}
.main-home-satish-dash{margin-left:0px!important;}
.pcoded-inner-navbar {height: 100%; margin-top: -10px;}
.pcoded .pcoded-navbar .pcoded-item {margin-top: 10px;}

.page-title-right{margin-right:0px;}

}

@media screen and (max-width: 768px) {
.home-top-margin{margin-top:  6px;}
.header-navbar .navbar-wrapper .navbar-container .nav-right { float: right; margin-top: -39px;}
.nbar-menu-550{width:250px; height:35px; background-color:#2c3e502e;  border-radius: 15px 15px 15px 15px; margin-top:5px;}

.page-title-right{margin-right:0px;}

}

/*working only in ipad portrait device*/
@media only screen and (width: 768px) and (height: 1024px) and (orientation:portrait) {
.nbar-menu-550{width:250px; height:35px; background-color:#2c3e502e;  border-radius: 15px 15px 15px 15px; margin-top:5px;}
.home-top-margin{margin-top:  6px;}
 .main-home-by-satish{ margin-left:0px !important; margin-top:-10px;}
 .main-home-satish-dash{margin-left:0px!important; }

}
/*working only in ipad landscape device*/
@media all and (width: 1024px) and (height: 1366px)  {

 .nbar-menu-550{width:200px; height:35px; background-color:#2c3e502e;  border-radius: 15px 15px 15px 15px; margin-top:5px;}

}
@media screen and (max-width: 768px){
  .header-navbar .navbar-wrapper .navbar-container .nav-right {
      float: right;
      margin-top: -35px;
  }
}

@media (min-width: 412px) {


}
.header-navbar .navbar-wrapper .navbar-logo { height: 2.3rem;}

/* width */
::-webkit-scrollbar {width: 10px; height: 10px;}
/* Track */
::-webkit-scrollbar-track {box-shadow: inset 0 0 5px grey;}
/* Handle */
::-webkit-scrollbar-thumb {background: #abaeb3; border-radius: 10px;}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {background:#151529;}


[data-layout="horizontal"] .navbar-menu { padding: 0 calc(1.5rem / 2); margin-top: 50px;}
[data-layout="horizontal"] .navbar-menu .navbar-nav .nav-link { padding: 0.1rem 0.8rem; }
.navbar-menu .navbar-nav .nav-link { padding: 0.625rem 1.5rem; font-size: 0.8rem; }

.moduleIcon { width: 28px; border-radius: 5px; margin-right: 15px; }
.logo { line-height: 61px; margin-top: -9px; }

.vibrate div{
  animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
}

@keyframes shake {
  10%, 90% { transform: translate3d(-1px, 0, 0); }
  20%, 80% { transform: translate3d(2px, 0, 0);   }
  30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
  40%, 60% { transform: translate3d(4px, 0, 0); }
}





/* ===================================================
   1. MODAL Z-INDEX FIXES
   =================================================== */
#createGroupModal { z-index: 9999 !important; }
.modal-backdrop { z-index: 9990 !important; }

/* ===================================================
   2. TOOLBAR STYLING
   =================================================== */
.headerMenusBB {
    background: #f8f9fa;
    padding: 5px 0px;
    border-radius: 8px;
    margin-bottom: 0px;

    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}
.headerMenusBB .form-check { margin-bottom: 0; }

/* ===================================================
   3. CONTAINER STYLING
   =================================================== */
.roleMain {
    background: #fdfceb; /* Pale yellow outer background */
    color: #077551;
    padding: 5px;
    border-radius: 8px;
    margin-bottom: 15px;
}

.roleMainCH { background: #ffffcc; color: #077551; padding: 5px; border-radius: 10px; }
.roleMainCH2 { background: #dfdfdf; color: #077551; padding: 2px 5px 2px 15px; }

.roleMainCHNew {
    background: #ffffff; /* White inner card */
    color: #828483;
    padding: 10px;
    border-radius: 6px;
    border: 1px solid #f1f1f1;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

/* ===================================================
   4. TREE STRUCTURE CORE
   =================================================== */
ul.menu-items, ul.sub-items { list-style: none; margin: 0; padding: 0; }
.menu-items li.active a { color: red; font-weight: 700; }
.info { font-size: 10px !important; }

.menu-items li { padding: 0px 0; }

ul.sub-items {
    padding-left: 15px;
    padding-top: 0px;
}

.sub-items li {
    position: relative;
    padding-left: 16px; /* Space for the vertical line */
    padding-top: 1px;
    padding-bottom: 1px;
    margin-bottom: 0px;
}

/* PERFECT SOLID TREE LINES (Absolute positioning prevents layout breakage) */
.sub-items li::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    border-left: 1px solid #b5b5b5;
}

.sub-items li::before {
    content: '';
    position: absolute;
    top: 15px; /* Centers the horizontal line with the checkbox */
    left: 0;
    width: 12px;
    border-bottom: 1px solid #b5b5b5;
}

/* Cuts off the vertical line cleanly at the very last item */
.sub-items li:last-child::after {
    height: 16px;
    bottom: auto;
}

/* ===================================================
   5. ICONS, CHECKBOXES & TEXT ALIGNMENT
   =================================================== */
.mee-check {
    width: 14px; height: 14px; margin-right: 6px; cursor: pointer;
    vertical-align: middle; position: relative; top: -1px;
    accent-color: #077551;
}

.font {     font-size: 14px; color: #636a7b; font-weight: 50 }


/* ===================================================
   1. MODAL Z-INDEX FIXES (The "Breakout" Method)
   =================================================== */
/* Force the modal to break out of any parent bounds */
.modal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 1055 !important;
}

/* Force the backdrop to also break out and sit right below the modal */
.modal-backdrop {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 1050 !important;
    width: 100vw !important;
    height: 100vh !important;
}

/* Ensure the body doesn't scroll when the modal is open */
body.modal-open {
    overflow: hidden !important;
}



/* ===================================================
   1. MODAL Z-INDEX FIXES (The "Breakout" Method)
   =================================================== */
.modal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 9999 !important;
}

.modal-backdrop {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 9990 !important;
    width: 100vw !important;
    height: 100vh !important;
}

body.modal-open {
    overflow: hidden !important;
}

/* ===================================================
   2. TOOLBAR & HISTORY STYLING
   =================================================== */
.headerMenusBB {
    background: #f8f9fa;  border-radius: 8px;
    margin-bottom: 15px; border: 1px solid #e9ecef; display: flex;
    align-items: center; gap: 15px; flex-wrap: wrap;
}

.roleMainCHNew {
    background: #ffffff; color: #828483; padding: 15px;
    border-radius: 6px; border: 1px solid #f1f1f1;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05); margin-top: 20px;
}




/*App.php css start*/
.fs-13{font-size: 12px !important;}
.small,small {font-size: 0.775em;}
.selectC{ padding: 2px 1px; border-radius: 8px; margin: -5px -5px; }
.table-bordered>:not(caption)>*>* { border-width: 0 1px!important;}
.table>:not(caption)>*>* { padding: 0.25rem 0.6rem!important;}
.tableAction{padding:0px 3px;}
.hover2:hover{font-size: 15px;}
.hide{display: none;}
.mHide{max-height: fit-content; }
.mHide2{max-height: 30px; overflow: hidden;}
th.gridjs-th { padding: 7px 6px; }
td.gridjs-td {border: 1px solid #e5e7eb; box-sizing: content-box; padding: 6px 7px;}
input.gridjs-input {padding: 6px 29px;}
.gridjs-tbody tr{overflow: hidden; white-space: nowrap; text-overflow: clip; text-overflow: ellipsis ellipsis; }
td.gridjs-td {overflow: hidden!important; text-overflow: clip; text-overflow: ellipsis ellipsis; }
.gridjs-tbody tr:hover {background:#dfdfdf!important; }
.gridjs-pagination .gridjs-pages button.gridjs-currentPage { background-color: #151529; font-weight: 700; }
.gridjs-footer { padding: 12px 9px; }
.navbar-header { height: 30px;}
.navbar-header .btn-topbar { height: 25px; width: 25px;}
.navbar-header .header-lang-img{ height: 15px; width: 15px;}
.navbar-header .fs-22 { font-size: 15px !important;}
.app-search .form-control { border: none; height: 20px; padding-left: 37px; padding-right: 18px; box-shadow: none;}
.app-search span.search-widget-icon { position: absolute; z-index: 10; font-size: 18px; line-height: 20px;}
.header-profile-user { height: 20px; width: 20px;}
.page-content { padding: calc(30px + 1.5rem) calc(1.5rem / 2) 0px calc(1.5rem / 2); }
.header-item { height: 35px;}
.footer {padding: 0px calc(0.5rem / 2);height: 22px;background-color: var(--vz-footer-bg);}
.select2-container .select2-selection--single .select2-selection__rendered { display: block; padding-left: 8px; padding-right: 22px; overflow: hidden; text-overflow: ellipsis; width: 197px; white-space: inherit; }
.jsPanel{ border-radius: 0px 0px 0px 0px;}
.jsPanel-headerbar img {max-height: 20px;}
.jsPanel-replacement {height: 20px;}
.jsPanel-replacement .jsPanel-hdr .jsPanel-headerlogo img { max-height: 20px;}
.jsPanel-controlbar .jsPanel-btn.jsPanel-btn-sm svg:not(.svg-inline--fa), .jsPanel-controlbar .jsPanel-btn.jsPanel-btn-sm span:not(.material-icons) {width: 1rem; height: 1rem;}
.jsPanel-controlbar { margin: 1px;}
.jsPanel-replacement .jsPanel-hdr {height: 20px;}
.fs-10 { font-size: 7px !important;}
.header-item { height: 30px;}
.navbar-brand-box { padding: 0 0.3rem;}
.hamburger-icon{margin-top: 20px; color: #fff!important;}
.chatOpenner{margin-top:200px;width:20px;height: 50px; background:#390039; z-index: 1001;position: fixed; float: left; right: 0; border-radius:100% 0% 0% 100% / 48% 49% 51% 52% ;}
.jsPanel{background-color: #fff!important;}
.jsPanel-hdr{background-color: #d5d5d596 ;}
[data-layout="vertical"][data-sidebar-size="sm"] .navbar-brand-box { position: fixed; padding: 0; width: 70px; z-index: 1; top: 20px;}
.hamburger-icon {margin-top: 31px!important;}
.app-search {padding: calc(2px / 2) 0;}
.app-search .form-control { margin-top: 15px;}
.jsPanel-headerbar { background: #ffff; border-radius: 10px 10px 0px 0px;}
.jsPanel-hdr{border-radius: 5px 5px 0px 0px;;background-color:#d5d5d596;}
.jsPanel {background-color:#fff}


    .active22{background: #fff!important;}
    .jsPanel-content { padding: 0px 0px 0px 0px;}
    .jsPanel-hdr {border-radius: 5px 5px 0px 0px; background-color:#d5d5d596;}
    .jsPanel {background-color: #fff;}
    .jsPanel-replacement { height: 20px; border-radius: 5px 5px 0 0;}
    [data-layout="vertical"][data-sidebar-size="sm"] {min-height:100%; }
    [data-layout="vertical"][data-sidebar="dark"][data-sidebar-size="sm"] .navbar-brand-box {background: none; }
    [data-layout="vertical"][data-sidebar="dark"] .navbar-menu {background: var(--vz-vertical-menu-bg-dark); border-right: 1px solid #00000000; }
    [data-layout="vertical"][data-sidebar="dark"] .navbar-menu {background: #00000042; }
    [data-layout="vertical"][data-sidebar-size="sm"] #page-topbar { z-index: 100 !important; }
    #page-topbar { background-color: #fff0; }
    .topbar-user { background-color: #f3f3f900; }
    .footer {padding: 0px calc(0.5rem / 2);height: 22px; background-color: #ffffff1c; color: #ffffffc7; border-top: #4d4d4e40 solid 1px;}
    .page-title-box { padding: 5px 1.5rem; margin: 1px -1.5rem 1.5rem -1.5rem;}
    .select2-container--open .select2-dropdown--below { z-index: 10000001;}
    .jsPanel-replacement .jsPanel-hdr {height: 20px; border-radius: 5px 5px 0px 0px;}
    .ui-pnotify.ui-pnotify-fade-in {opacity: 1; z-index: 10000001;}
    #menusss{z-index: 1000000077; border-bottom: solid 1px #dfdfdf; margin: 0px 0px 0px -16px;}
    #rightClickMenu{z-index: 1000000077; border-bottom: solid 1px #dfdfdf; margin: 0px 0px 0px -16px;}
    .parent {display: block;position: relative;float: left; line-height: 30px;box-shadow: 1px -1px 9px 0px rgb(0 0 0 / 11%); }
    .parent a{margin: 0px 10px 10px 10px; text-decoration: none;}
    .parent:hover > ul {display:block; position:absolute; width: 250px; }
    .child {display: none;}
    .child li {background-color: #fff;line-height: 30px; width:100%; }
    .child li a{color: #000; }
    .parent li ul ul {margin-left: 230px; }
    .menusss ul{list-style: none;margin: 0;padding: 0px; min-width:10em; box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12); padding: 10px; background: #ffffff; border-radius: 0px 10px 10px 10px; z-index: 1;}
    ul ul ul{left: 100%;top: 0;}
    li:hover {background-color: #fff; }
    .child .parent li:hover {background-color: #dfdfdf; }
    .parent .child li:hover {background-color: #dfdfdf; border-radius: 5px;}
    .child .parent { box-shadow:none; }
    .expand{font-size:12px;float:right;margin-right:5px;}
    .child .iconColor{color: #4b10b7; font-size: 16px; margin-right: 5px;}
    /*App.php css end*/




    /*body.php css start*/

    .DeskTopMode{  100% 100% no-repeat; background-size: cover!important; height: 100vh;}
    .appsHome{margin-left: 80px; padding-top:35px;  display: flex; flex-direction: column; flex-wrap: wrap; width:100px;height: inherit;}
    .appBox{cursor: pointer;margin: 0.3rem;width: 5rem;height: 7rem;border-radius: 7px;text-align: center;padding: 4px; }
    .appBox:hover{-ms-transition: all .2s;  -webkit-transition: all .2s;  -moz-transition: all .2s; -o-transition: all .2s;  transition: all .2s; background: #d9dbdd7a; }
    .apptext{ font-size: 13px; color: #fff; text-shadow: 2px 2px 4px #000000; margin-top: 5px; line-height: 15px;}

    .appiiicon{display: table-cell; vertical-align: middle;font-size: 10px;   line-height: 11px;}
    .appiiicon img{width: 4rem; }
    .page-content { padding: calc(-24px + 1.5rem) calc(1.5rem / 2) 0px calc(1.5rem / 2); }

    @media (max-width: 600px){
    .appsHome {margin-left: 0px; margin-top: 50px;}
    .page-content {padding: calc(-25px + 1.5rem) calc(1.5rem / 2) 0px calc(1.5rem / 2);}
    .DeskTopMode {margin-top: -50px;}
    }

    /* =======================================================
         NEW WINDOWS 11 TASKBAR CSS
         ======================================================= */
      .panelMainMenu {
          position: fixed;
          padding-left: 260px!important;
          top: 0;
          left: 330px; /* Accounts for left sidebar */
          right: 0;
          height: 22px; /* Fixed 30px height */
          z-index: 10000;
          background: rgb(20 20 20 / 18%); /* Dark taskbar */
          backdrop-filter: blur(15px);
          -webkit-backdrop-filter: blur(15px);
          display: flex;
          align-items: center;
          justify-content: flex-start; /* Floats items left-to-right */
          gap: 6px;
          padding: 0 10px;
          border-top: 1px solid rgba(255,255,255,0.1);
          overflow-x: auto;
          overflow-y: hidden;
           width: 100%!important;
      }


      .panelMainMenu::-webkit-scrollbar { display: none; }

      /* The Taskbar Tab Button */
      .panelChildMenu {
          display: flex;
          align-items: center;
          justify-content: space-between;
          height: 22px;
          min-width: 130px;
          max-width: 160px;
          padding: 0 6px 0 8px;
          border-radius: 7px 7px 0px 0px;
          background: rgba(255,255,255,0.08); /* Inactive dark transparent */
          color: #ccc;
          cursor: pointer;
          transition: all 0.2s;
          position: relative;
          user-select: none;
          border: 1px solid transparent;

      }

      .panelChildMenu:hover {
          background: rgba(255,255,255,0.15);
          color: #fff;

      }

      /* Active Tab (White with blue line) */
      .panelChildMenu.active22 {
          background: #ffffff;
          color: #000;
          border-bottom: 4px solid #c9b4f3;

      }

      .panelChildMenu.minimized-tab {
          opacity: 0.6;
      }

      .panelChildMenu .tab-icon {
        width: 14px;
        height: 14px;
        flex-shrink: 0;
        margin-left: -2px;
      }

      .panelChildMenu .textHeder {
          flex-grow: 1;
          font-size: 12px;
          font-weight: 500;
          margin: 0 8px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          line-height: 22px;
      }

      .panelChildMenu .tab-btn {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 18px;
          height: 18px;
          border-radius: 3px;
          color: inherit;
          flex-shrink: 0;
          opacity: 0.5;
      }
      .panelChildMenu:hover .tab-btn { opacity: 1; }
      .panelChildMenu .tab-btn:hover { background: #ff4d4d; color: #fff; }


    /* Right Click Menu CSS */
    .child3{display: none;}
    .child2 {display: block; padding: 10px; color: #727272;}
    .child2 li {margin: 10px;background-color: #fff; line-height: 30px; width:100%; margin: 2px 0px 2px 0px; border-radius: 5px;display: block;}
    .child2 li a{color: #000; text-decoration: none;}
    .parent2 {padding: 0px 5px 0px 5px; cursor: pointer;}
    .parent2:hover{background: #e7e7e7;}
    .child3{background: white; margin-left: 180px; width: 150px; padding: 4px; margin-top: -35px; border-radius: 7px;}
    .parent2:hover ul{ display: block; }
    .child3:hover{ display: block; }
    .parent2 span{float: right;font-weight:400; font-size: 10px;}
    .span2{color: #958f9d; font-size: 11px;}
    .rightCImg{width:18px; box-shadow: 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12);}
    .child2 hr {margin: 0.3rem;}
    .mright{margin-right:6px;}
    .mrightA{color: #958f9d;}

    #jsPanel-replacement-container{display: none!important;}



/*body.php css end*/



/*sidebar.php css srat*/


/* --- SIDEBAR ICONS & TEXT WRAPPING --- */
.sideMenu { margin: 2px; font-size: 20px; color: #fff; }
.sidemenuBox {
    cursor: pointer;
    margin: 0.3rem;
    border-radius: 7px;
    height: auto;
    min-height: 55px;
    text-align: center;
    padding: 6px 4px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: all 0.2s;
}
.sidemenuBox:hover { background: rgba(255,255,255,0.15); }
.activeW { background: rgba(255,255,255,0.15); }

/* Multi-line text wrapping for long module names */
.sidemtext {
    font-size: 9.5px;
    color: #fff;
    margin-top: 4px;
    text-align: center;
    white-space: normal;
    line-height: 1.15;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
    padding: 0 4px;
}

/* Adjusted height for bottom icons to prevent stretching */
.usericon {
    cursor: pointer;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: fixed;
    width: 70px;
    height: 60px !important;
    border-radius: 0px;
    transition: all 0.2s;
}
.usericon:hover { background: rgba(255,255,255,0.15); }

/* APP ICON STYLES INSIDE APP BOX */
.appIcon { font-size: 11px; text-align: center; color: #fff; line-height: 13px; text-shadow: 1px 2px 6px #0000005e; }
.appIcon img { width: 3.5rem; border-radius: 7px; margin-bottom: 3px; }
.appIconMain { float: left; cursor: pointer; margin: 0.3rem; width: 5.5rem; height: 6.5rem; border-radius: 7px; text-align: center; padding: 4px; }
.appIconMain:Hover { transition: all .2s; background: rgba(255, 255, 255, 0.1); }

/* --- UNIVERSAL GLASSMORPHISM POPUP MENUS --- */
.userMenuBox, .appBoxBody {
    background-color: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    position: fixed;
    left: 75px !important;
    display: none;
    border-radius: 12px;
    box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.5);
    z-index: 10001;
}

.userMenuBox { min-width: 220px; padding: 8px 0; }
.appBoxBody { min-width: 300px; max-width: 630px; overflow-y: auto; padding: 15px; }

/* Dynamic Arrow Pointer */
.userMenuBox:before, .appBoxBody:before {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    top: var(--arrow-top, 20px);
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-right: 10px solid rgba(0, 0, 0, 0.75);
    left: -10px;
}

/* Custom Sleek Scrollbar */
.appBoxBody::-webkit-scrollbar, .custom-scroll::-webkit-scrollbar { width: 6px; }
.appBoxBody::-webkit-scrollbar-track, .custom-scroll::-webkit-scrollbar-track { background: transparent; }
.appBoxBody::-webkit-scrollbar-thumb, .custom-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 10px; }
.appBoxBody::-webkit-scrollbar-thumb:hover, .custom-scroll::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.4); }

.userMenuBox .dropdown-item {
    padding: 8px 20px;
    font-size: 13.5px;
    color: #beb4b4;
    display: block;
    text-decoration: none;
    transition: background 0.2s;
}
.userMenuBox .dropdown-item:hover { background-color: rgb(17 29 32 / 77%); color: #ffffff; }
.userMenuBox .dropdown-item i { width: 20px; display: inline-block; text-align: center; margin-right: 8px; font-size: 16px; vertical-align: middle; }
.userMenuBox .menu-divider, .userMenuBox .dropdown-divider { border-top: 1px solid rgba(255, 255, 255, 0.08); margin: 6px 0; }
.userMenuBox .dropdown-header { color: #fff; font-weight: 600; }

/* --- FULL HEIGHT NOTIFICATION POPUP OVERRIDES & FIXES --- */
#notiMenuBox.full-height-popup {
    width: 250px; /* FIXED: Strictly 250px width */
    padding: 0;
    background-color: rgba(18, 20, 24, 0.95); /* Slightly darker to make text legible */
}
#notiMenuBox.full-height-popup:before {
    display: none;
}
#notiMenuBox .dropdown-head {
    background-color: #556ee6 !important;
    padding: 8px 12px 0 12px !important; /* FIXED: Reduced padding to shrink header height */
    border-radius: 0;
}
#notiMenuBox .nav-tabs {
    border-bottom: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: space-around;
}
#notiMenuBox .nav-link {
    border: none !important;
    background: transparent !important;
    color: rgba(255, 255, 255, 0.7) !important;
    padding: 6px 10px !important; /* FIXED: Reduced padding to shrink tab height */
    font-size: 11px;
    font-weight: 500;
    border-radius: 4px 4px 0 0 !important;
    margin-bottom: 0;
    transition: all 0.2s;
}
#notiMenuBox .nav-link:hover {
    color: #fff !important;
    background-color: rgba(255, 255, 255, 0.15) !important; /* FIXED: Added visible hover background */
    border: none !important;
}
/* CRITICAL: Overrides Bootstrap white block background on active tabs */
#notiMenuBox .nav-tabs .nav-item.show .nav-link,
#notiMenuBox .nav-tabs .nav-link.active {
    color: #fff !important;
    background-color: transparent !important; /* FIXED: Kills the ugly white block */
    border: none !important;
    border-bottom: 2px solid #fff !important;
    border-radius: 0 !important;
}
#notiMenuBox.full-height-popup .tab-content {
    height: calc(100vh - 75px); /* Adjusted for the new thinner header */
    overflow-y: auto;
}
#notiMenuBox .notification-item {
    padding: 12px 15px;
    transition: background 0.2s;
}
#notiMenuBox .notification-item:hover {
    background-color: rgba(255,255,255,0.05);
}


/* --- GADGETS MODAL & PINNED CSS --- */
.glass-modal {
    background-color: rgba(0, 0, 0, 0.7); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 12px; box-shadow: 0 15px 35px rgba(0,0,0,0.5);
    position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 450px; z-index: 10005; display: none;
}
.gadget-item { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; padding: 15px; text-align: center; color: white; cursor: pointer; transition: 0.2s; }
.gadget-item:hover { background: rgba(255,255,255,0.15); }
.pinned-gadget {
    background-color: rgba(0, 0, 0, 0.5); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 12px; width: 180px; height: 120px; padding: 15px; box-shadow: 0 10px 20px rgba(0,0,0,0.3);
}
.close-gadget { position: absolute; top: 8px; right: 8px; color: #ff4d4d; cursor: pointer; font-size: 16px; transition: 0.2s; }
.close-gadget:hover { color: #ff1a1a; transform: scale(1.1); }
#desktopGadgetsContainer { position: fixed; top: 0; left: 70px; right: 0; bottom: 0; pointer-events: none; z-index: 9000; }


/* css end*/


/* css srat*/