.page-hlt .container{max-width:100%;}

/* ================= PROFILE ================= */
.profile .card-header{display:flex;}
.profile .card-header .img{width:60px;height:60px;background:#ccc;border-radius:100%;flex:0 0 60px;}
.profile .card-header .nm{padding-left:12px;}
.profile .card-header .nm h2{color:var(--theme-color);font-size:20px;}
.profile .card-header .nm h3{font-size:14px;color:#7b7b7b;font-weight:500;}
.profile ul{margin:0;padding:0;list-style:none;display:flex;justify-content:space-between;margin-bottom:20px;}
.profile ul li{text-align:center;}
.profile ul li .label{color:var(--theme-color);font-weight:bold;display:block;margin-bottom:10px;}
.profile ul li .vl{font-size:14px;font-weight:500;color:#7b7b7b;}
.profile .btns{display:flex;justify-content:space-between;}

/* ================= GRAPH HEADER ================= */
.graph-data .card-header{display:flex;justify-content:space-between;}
.graph-data .card-header span{color:var(--theme-color);font-size:17px;}
.graph-data .card-header span.next,
.graph-data .card-header span.prv{font-size:20px;font-weight:bold;}
.graph-data .card-header span.cal{color:#000;}
.graph-data .title{color:var(--theme-color);font-weight:bold;font-size:20px;}

/* ================= CIRCULAR PROGRESS ================= */
.progress-bar{
  --progress: 0;
  position:relative;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}

.progress-bar span{display:block;}

/* Calories */
.progress-bar.kal{
  width:90px;
  height:90px;
  background:
    radial-gradient(closest-side, white 85%, transparent 80% 100%),
    conic-gradient(
      var(--theme-color) calc(var(--progress) * 1%),
      #e6e6e6 0
    );
}

.progress-bar.kal .m{font-size:14px;color:var(--theme-color);font-weight:bold;}
.progress-bar.kal .n{color:#000;font-size:20px;font-weight:500;line-height:18px;}
.progress-bar.kal .u{color:#aaa9a9;}

/* Small circular */
.progress-bar.sm{
  width:60px;
  height:60px;
  font-size:12px;
  line-height:14px;
  background:
    radial-gradient(closest-side, white 85%, transparent 80% 100%),
    conic-gradient(#ccc 0, #ccc 100%);
}

/* Color variants */
.progress-bar.sm.red{
  background:
    radial-gradient(closest-side, white 85%, transparent 80% 100%),
    conic-gradient(
      var(--theme-color) calc(var(--progress) * 1%),
      #ccc 0
    );
}

.progress-bar.sm.green{
  background:
    radial-gradient(closest-side, white 85%, transparent 80% 100%),
    conic-gradient(
      green calc(var(--progress) * 1%),
      #ccc 0
    );
}

.progress-bar.sm.yellow{
  background:
    radial-gradient(closest-side, white 85%, transparent 80% 100%),
    conic-gradient(
      orange calc(var(--progress) * 1%),
      #ccc 0
    );
}

.progress-bar.sm.blue{
  background:
    radial-gradient(closest-side, white 85%, transparent 80% 100%),
    conic-gradient(
      rgb(124, 17, 218) calc(var(--progress) * 1%),
      #ccc 0
    );
}

/* ================= STATS BLOCK ================= */
.prg{display:flex;}
.prg .lf{flex:0 0 50%;display:flex;}
.prg .lf .y{flex:1;padding-left:12px;}
.prg .lf .y .tl{color:#555;font-size:14px;display:block;}
.prg .lf .y .n{color:green;font-size:36px;}
.prg .lf .y p{margin:0;color:#555;font-size:12px;}
.prg .lf .y p.inc strong{color:green;}
.prg .lf .y p.dec strong{color:red;}
.prg .rt .p{display:flex;gap:4px;}

/* ================= LINEAR PROGRESS ================= */
.prg-ln{margin-top:10px;}

.progress-bar-ln{
  display:grid;
  grid-template-columns:140px 1fr 100px;
  align-items:center;
  gap:10px;
  margin-bottom:10px;
}

.progress-bar-ln .t{
  font-size:18px;
  font-weight:bold;
}

.progress-bar-ln .prg{
  height:10px;
  background:#ccc;
  border-radius:50px;
  overflow:hidden;
}

.progress-bar-ln .prg span{
  display:block;
  height:100%;
  width: calc(var(--progress) * 1%);
  border-radius:50px;
}


.progress-bar-ln .n{
  text-align:right;
}

.progress-bar-ln .n i{
  color:var(--theme-color);
  font-style:normal;
}

/* Linear colors */
.progress-bar-ln.yellow .t{color:orange;}
.progress-bar-ln.yellow .prg span{background:orange;}

.progress-bar-ln.green .t{color:green;}
.progress-bar-ln.green .prg span{background:green;}

.progress-bar-ln.blue .t{color:rgb(124,17,218);}
.progress-bar-ln.blue .prg span{background:rgb(124,17,218);}

/* ================= AWARDS ================= */
.award .card-header ul{margin:0;padding:0;list-style:none;display:flex;justify-content:space-between;}
.award .card-header ul li span{display:block;text-align:center;color:#555;}
.award .card-header ul li span:first-child{font-size:18px;font-weight:500;}
.award .card-body h3{text-align:center;color:var(--theme-color);font-weight:500;}
.award .card-body .acvh{display:flex;justify-content:space-between;margin-top:20px;}
.award .card-body .acvh img{flex:0 0 40px;width:40px;}

/* ================= ITEMS ================= */
.items .item{background-color:#fff;}
.items .in .action{
  margin-top:10px;
  display:flex;
  justify-content:space-between;
  background:#f3f1f2;
  padding:12px 10px;
}
.items .in .action .btn{
  padding:4px 10px;
  font-size:14px;
}
.items .in .action .btn:last-child{
  font-weight:500;
}