#app.pdx-active{
  --b:#0047AB;
  --i:#480082;
  --v:#734E96;
  --n:#121B35;
  --bg:#f5f7fb;
  --line:#e8ecf3;
  --muted:#667085;
  background:var(--bg)!important;
}

#app.pdx-active .sidebar{
  width:252px!important;
  background:#fff!important;
  border-right:1px solid var(--line)!important;
  box-shadow:8px 0 30px rgba(18,27,53,.035)!important;
}

#app.pdx-active .sidebar .brand{
  height:82px!important;
  padding:0 18px!important;
  background:#fff url('/assets/thedeskhelp-final-logo.png') 18px center/205px auto no-repeat!important;
  border-bottom:1px solid var(--line)!important;
}

#app.pdx-active .sidebar .brand > *{
  visibility:hidden!important;
}

#app.pdx-active .workspace{
  display:none!important;
}

#app.pdx-active .nav-item{
  width:calc(100% - 24px)!important;
  min-height:42px!important;
  margin:4px 12px!important;
  padding:0 12px!important;
  border-radius:10px!important;
  color:#647087!important;
  font-size:12px!important;
  font-weight:650!important;
  background:transparent!important;
}

#app.pdx-active .nav-item:hover{
  background:#f5f7fb!important;
  color:var(--n)!important;
}

#app.pdx-active .nav-item.active{
  color:var(--b)!important;
  background:#edf3ff!important;
  border:1px solid #dce8ff!important;
  box-shadow:none!important;
}

#app.pdx-active .nav-item.active .nav-icon{
  color:var(--b)!important;
}

#app.pdx-active .side-bottom{
  position:absolute!important;
  left:12px!important;
  right:12px!important;
  bottom:14px!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
}

#app.pdx-active .side-bottom button{
  display:none!important;
}

#app.pdx-active main{
  margin-left:252px!important;
  width:calc(100% - 252px)!important;
  background:var(--bg)!important;
}

#app.pdx-active main>header{
  display:none!important;
}

#app.pdx-active #content{
  padding:0!important;
  min-height:100vh;
}

.tdh-topbar{
  height:76px;
  display:flex;
  align-items:center;
  gap:12px;
  padding:0 24px;
  background:#fff;
  border-bottom:1px solid var(--line);
  position:sticky;
  top:0;
  z-index:20;
}

.tdh-search{
  height:40px;
  min-width:310px;
  max-width:560px;
  flex:1;
  display:flex;
  align-items:center;
  gap:10px;
  padding:0 14px;
  background:#f8faff;
  border:1px solid #e5eaf2;
  border-radius:10px;
  color:#98a2b3;
}

.tdh-search input{
  flex:1;
  border:0!important;
  outline:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:#334155!important;
  font-size:11px!important;
}

.tdh-new{
  height:40px;
  padding:0 16px;
  border:0;
  border-radius:9px;
  background:var(--b);
  color:#fff;
  font-size:11px;
  font-weight:800;
  box-shadow:0 7px 18px rgba(0,71,171,.18);
}

.tdh-headicon{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border:1px solid #e5eaf2;
  border-radius:10px;
  background:#fff;
  color:#667085;
}

.tdh-company{
  height:40px;
  min-width:138px;
  padding:0 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border:1px solid #e5eaf2;
  border-radius:10px;
  background:#fff;
  color:#344054;
  font-size:10px;
  font-weight:750;
}

.tdh-profile{
  display:flex;
  align-items:center;
  gap:9px;
  padding-left:2px;
}

.tdh-profile-avatar{
  width:36px;
  height:36px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#eaf0ff;
  color:var(--b);
  font-size:10px;
  font-weight:800;
}

.tdh-main{
  padding:25px 26px 38px;
}

.tdh-welcome{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  margin-bottom:20px;
}

.tdh-welcome h1{
  margin:0;
  color:var(--n);
  font-size:27px;
  line-height:1.05;
  letter-spacing:-.045em;
  font-weight:850;
}

.tdh-welcome p{
  margin:7px 0 0;
  color:#7a8597;
  font-size:11px;
}

.tdh-date{
  height:38px;
  padding:0 12px;
  display:flex;
  align-items:center;
  gap:7px;
  border:1px solid #e5eaf2;
  border-radius:9px;
  background:#fff;
  color:#475467;
  font-size:10px;
  font-weight:700;
}

.tdh-kpis{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:12px;
  margin-bottom:14px;
}

.tdh-kpi{
  background:#fff;
  border:1px solid var(--line);
  border-radius:12px;
  padding:15px;
  box-shadow:0 3px 14px rgba(18,27,53,.025);
}

.tdh-kpi-icon{
  width:31px;
  height:31px;
  border-radius:9px;
  display:grid;
  place-items:center;
  background:#edf3ff;
  color:var(--b);
  font-size:14px;
}

.tdh-kpi-icon.purple{background:#f3edff;color:var(--i)}
.tdh-kpi-icon.pink{background:#fff0f3;color:#e05670}
.tdh-kpi-icon.green{background:#eaf8f2;color:#18a86b}

.tdh-kpi-label{
  margin-top:12px;
  color:#667085;
  font-size:9px;
  font-weight:650;
}

.tdh-kpi-value{
  margin-top:3px;
  color:var(--n);
  font-size:23px;
  line-height:1;
  font-weight:850;
  letter-spacing:-.04em;
}

.tdh-kpi-change{
  margin-top:7px;
  font-size:8px;
  font-weight:800;
  color:#18a86b;
}

.tdh-kpi-change.down{color:#e25463}

.tdh-grid{
  display:grid;
  gap:13px;
  margin-bottom:13px;
}

.tdh-grid.two{grid-template-columns:1.55fr 1fr}
.tdh-grid.three{grid-template-columns:1.05fr 1fr .95fr}

.tdh-card{
  min-width:0;
  background:#fff;
  border:1px solid var(--line);
  border-radius:12px;
  padding:17px;
  box-shadow:0 3px 15px rgba(18,27,53,.025);
}

.tdh-card-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  margin-bottom:14px;
}

.tdh-card-title{
  color:var(--n);
  font-size:11px;
  font-weight:800;
}

.tdh-card-sub{
  margin-top:3px;
  color:#98a2b3;
  font-size:8px;
}

.tdh-link{
  color:var(--b);
  font-size:8px;
  font-weight:800;
}

.tdh-chart{
  height:205px;
}

.tdh-chart svg{
  width:100%;
  height:100%;
}

.tdh-axis{
  display:flex;
  justify-content:space-between;
  color:#98a2b3;
  font-size:7px;
}

.tdh-channel{
  display:flex;
  align-items:center;
  gap:20px;
  min-height:220px;
}

.tdh-donut-wrap{
  position:relative;
  flex:0 0 145px;
}

.tdh-donut{
  width:145px;
  height:145px;
  border-radius:50%;
  background:conic-gradient(
    #0047AB 0 42%,
    #734E96 42% 60%,
    #8f80cf 60% 74%,
    #cfa6e6 74% 88%,
    #e4e9f2 88% 100%
  );
  display:grid;
  place-items:center;
}

.tdh-donut:after{
  content:'';
  width:88px;
  height:88px;
  border-radius:50%;
  background:#fff;
}

.tdh-donut-center{
  position:absolute;
  inset:0;
  display:grid;
  place-content:center;
  text-align:center;
  pointer-events:none;
}

.tdh-donut-center strong{
  color:var(--n);
  font-size:18px;
}

.tdh-donut-center span{
  color:#98a2b3;
  font-size:8px;
  margin-top:3px;
}

.tdh-legend{
  flex:1;
}

.tdh-legend-row{
  display:flex;
  justify-content:space-between;
  margin:12px 0;
  color:#667085;
  font-size:9px;
}

.tdh-legend-left{
  display:flex;
  gap:7px;
  align-items:center;
}

.tdh-dot{
  width:7px;
  height:7px;
  border-radius:50%;
}

.tdh-list{
  display:flex;
  flex-direction:column;
}

.tdh-item{
  min-height:51px;
  display:flex;
  align-items:center;
  gap:9px;
  border-bottom:1px solid #f0f2f5;
}

.tdh-item:last-child{border-bottom:0}

.tdh-avatar{
  width:29px;
  height:29px;
  flex:0 0 29px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#edf3ff;
  color:var(--b);
  font-size:9px;
  font-weight:800;
}

.tdh-item-main{
  min-width:0;
  flex:1;
}

.tdh-item-name{
  color:var(--n);
  font-size:9.5px;
  font-weight:750;
}

.tdh-item-text{
  max-width:210px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  margin-top:3px;
  color:#98a2b3;
  font-size:7.5px;
}

.tdh-time{
  color:#98a2b3;
  font-size:7px;
}

.tdh-badge{
  padding:4px 6px;
  border-radius:6px;
  background:#edf3ff;
  color:var(--b);
  font-size:7px;
  font-weight:800;
}

.tdh-ticket{
  display:flex;
  align-items:center;
  gap:8px;
  min-height:46px;
  border-bottom:1px solid #f0f2f5;
}

.tdh-ticket:last-child{border-bottom:0}

.tdh-ticket-icon{
  width:24px;
  height:24px;
  border-radius:7px;
  display:grid;
  place-items:center;
  background:#edf3ff;
  color:var(--b);
  font-size:10px;
}

.tdh-ticket-main{
  flex:1;
}

.tdh-ticket-name{
  color:var(--n);
  font-size:9px;
  font-weight:750;
}

.tdh-ticket-sub{
  color:#98a2b3;
  font-size:7px;
  margin-top:2px;
}

.tdh-priority{
  padding:4px 6px;
  border-radius:6px;
  font-size:7px;
  font-weight:800;
  background:#fff4df;
  color:#9b681b;
}

.tdh-bars{
  height:152px;
  display:flex;
  align-items:flex-end;
  gap:6px;
}

.tdh-bar{
  flex:1;
  border-radius:4px 4px 1px 1px;
  background:linear-gradient(180deg,#8f80cf,#0047AB);
  opacity:.82;
}

.tdh-page-row{
  display:flex;
  align-items:center;
  gap:9px;
  padding:9px 0;
}

.tdh-page-name{
  width:56px;
  color:#667085;
  font-size:8px;
}

.tdh-page-track{
  flex:1;
  height:6px;
  background:#edf1f6;
  border-radius:99px;
  overflow:hidden;
}

.tdh-page-fill{
  height:100%;
  border-radius:99px;
  background:linear-gradient(90deg,#0047AB,#734E96);
}

.tdh-page-value{
  width:31px;
  text-align:right;
  color:var(--n);
  font-size:8px;
  font-weight:800;
}

.tdh-team{
  display:flex;
  align-items:center;
  gap:8px;
  padding:9px 0;
  border-bottom:1px solid #f0f2f5;
}

.tdh-team:last-child{border-bottom:0}

.tdh-team-name{
  flex:1;
  color:var(--n);
  font-size:8.5px;
  font-weight:750;
}

.tdh-team-score{
  color:var(--b);
  font-size:9px;
  font-weight:850;
}

.tdh-side-company{
  margin:0 0 8px;
  padding:12px;
  border:1px solid var(--line);
  border-radius:11px;
  background:#fff;
}

.tdh-side-company strong{
  color:var(--n);
  font-size:10px;
}

.tdh-side-company span{
  display:block;
  margin-top:3px;
  color:#98a2b3;
  font-size:7px;
}

.tdh-side-progress{
  height:5px;
  margin-top:10px;
  background:#edf1f6;
  border-radius:99px;
  overflow:hidden;
}

.tdh-side-progress div{
  width:72%;
  height:100%;
  background:linear-gradient(90deg,#0047AB,#734E96);
}

.tdh-side-user{
  display:flex;
  align-items:center;
  gap:9px;
  padding:10px 2px 0;
}

.tdh-side-user strong{
  display:block;
  color:var(--n);
  font-size:9px;
}

.tdh-side-user span{
  display:block;
  margin-top:2px;
  color:#98a2b3;
  font-size:7px;
}

@media(max-width:1250px){
  .tdh-kpis{grid-template-columns:repeat(3,1fr)}
  .tdh-grid.two,.tdh-grid.three{grid-template-columns:1fr}
}

@media(max-width:900px){
  #app.pdx-active .sidebar{width:78px!important}
  #app.pdx-active main{margin-left:78px!important;width:calc(100% - 78px)!important}
  #app.pdx-active .sidebar .brand{background:none!important}
  #app.pdx-active .sidebar .brand:after{
    content:'D';
    visibility:visible!important;
    display:grid;
    place-items:center;
    width:40px;
    height:40px;
    margin:auto;
    border-radius:11px;
    background:#121B35;
    color:#fff;
    font-weight:850;
  }
  #app.pdx-active .nav-item span:not(.nav-icon){display:none!important}
  #app.pdx-active .nav-item{justify-content:center!important}
}

@media(max-width:680px){
  #app.pdx-active .sidebar{display:none!important}
  #app.pdx-active main{margin-left:0!important;width:100%!important}
  .tdh-search{min-width:0}
  .tdh-company{display:none}
  .tdh-kpis{grid-template-columns:repeat(2,1fr)}
  .tdh-main{padding:18px 14px 30px}
  .tdh-welcome{align-items:flex-start;flex-direction:column;gap:12px}
}

/* FINAL SIDEBAR FOOTER FIX */
#app.pdx-active .sidebar{
  display:flex !important;
  flex-direction:column !important;
  height:100vh !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
}

#app.pdx-active .side-bottom{
  position:relative !important;
  left:auto !important;
  right:auto !important;
  bottom:auto !important;
  width:100% !important;
  margin-top:auto !important;
  padding:12px 14px 16px !important;
  background:#fff !important;
  border-top:1px solid #e8ecf3 !important;
  z-index:5 !important;
  box-sizing:border-box !important;
}

#app.pdx-active .tdh-side-extra{
  position:relative !important;
  width:100% !important;
}

#app.pdx-active .tdh-side-company{
  width:100% !important;
  box-sizing:border-box !important;
  margin:0 0 9px !important;
}

#app.pdx-active .tdh-side-user{
  width:100% !important;
  box-sizing:border-box !important;
}

