.mt10 {margin-top: 10px!important;}
.mt20 {margin-top: 20px!important;}
.mt30 {margin-top: 30px!important;}
.mt40 {margin-top: 40px!important;}
.mt50 {margin-top: 50px!important;}
.mt60 {margin-top: 60px!important;}
.mt70 {margin-top: 70px!important;}
.mt80 {margin-top: 80px!important;}
.mt90 {margin-top: 90px!important;}
.mt100 {margin-top: 100px!important;}

.mb10 {margin-bottom: 10px!important;}
.mb20 {margin-bottom: 20px!important;}
.mb30 {margin-bottom: 30px!important;}
.mb40 {margin-bottom: 40px!important;}
.mb50 {margin-bottom: 50px!important;}
.mb60 {margin-bottom: 60px!important;}
.mb70 {margin-bottom: 70px!important;}
.mb80 {margin-bottom: 80px!important;}
.mb90 {margin-bottom: 90px!important;}
.mb100 {margin-bottom: 100px!important;}

body, html {
	/* background: #f5f5f5; */
	background: #fff;
}

ul li {
	list-style: none;
}
.hideit {
	display: none;
}

.form-group>label {
  bottom: 32px;
  left: 0px;
  position: relative;
  background-color: white;
  padding: 0px 5px 0px 5px;
  font-size: 1.1em;
  transition: 0.2s;
  pointer-events: none;
}

.form-control:focus~label {
  bottom: 55px;
}

.form-control:valid~label {
  bottom: 55px;
}

textarea {
	resize: none;
	padding-left: 0px!important;
}

.form-control:focus,
.form-select:focus {
        border-color: #ccc;
        box-shadow: none;
    }

.form-group.form-group-textarea>label {
  bottom: 180px;
  left: 15px;
  position: relative;
  background-color: transparent;
  padding: 0px 5px 0px 5px;
  font-size: 12px;
  transition: 0.2s;
  /* pointer-events: none; */
}

.form-group-textarea .form-control:focus~label {
  bottom: 210px;
}

.form-group-textarea .form-control:valid~label {
  bottom: 210px;
}

textarea:focus,
input[type="text"]:focus,
input[type="checkbox"]:focus,
input[type="range"]:focus,
input[type="password"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="color"]:focus,
.uneditable-input:focus {
  border-color: #ced4da;
  box-shadow: none;
  outline: 0 none;
}


.form-group {
	margin-top: 2%;
}

.form-group label {
	font-size: 12px;
	min-width: 100%;
}

.form-group label:hover {
	cursor: text;
}

.form-group input {
	padding-left: 5px;
	border-left: 0;
	border-right: 0;
	border-top: 0;
	border-radius: 0;
}


.header {
	position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    background-color: #fff;
    border-bottom: 1px solid #ccc;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    z-index: 10;
	padding: 10px;
	text-align: right;
}

.main-container {
	width: 100%;
}

.main-content-wrapper {
	padding: 5rem .5rem
}



.sidebar {
	width: 70px;
	min-height: 100vh;
	float: left;
	background: #393f4e;
	position: fixed;
	z-index: 2;
}

body,
html {
	max-width: 600px;
	margin: 0 auto;
}


/* ensure the bars container is a fixed-height row and children stretch full height */
.activity-bars {
  display: flex;
  align-items: flex-end; /* align items to the bottom of the container */
  height: 150px!important;         /* your containerHeight */
  gap: 8px;
}

/* make each column fill the parent's height and place its children at the bottom */
.activity-bars .bar-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end; /* push children to the bottom of the column */
  height: 100%;
}

/* alternative: keep bar-item layout but push the bar itself to bottom */
.activity-bars .bar {
  /* if you prefer this approach, remove justify-content:flex-end above and use margin-top:auto */
  /* margin-top: auto; */
}

.weekly-highlights {
	border: 1px solid #eee;
    border-radius: .225rem;
    flex-grow: 1;
    flex-basis: 0;
    margin: .25rem;
    padding: .5rem;
    min-height: 5rem;
    background: #fff;
}

.weekly-title {
	font-size: .8rem;
	font-weight: 200;
	margin-bottom: 20px;
}

.donut-wrapper { display:inline-flex; flex-direction:column; align-items:center; justify-content:center; margin-right:8px; }
.circular-chart { transform: rotate(-90deg); /* start at top */ }
.circular-chart .percentage { transform: rotate(90deg); /* counter-rotate text */ font-weight:600; }
.circular-chart .circle { transition: stroke-dasharray .4s ease; }
.donut-wrapper .donut-label { color:#666; font-size:11px; }

/* add to your stylesheet */
.activity-bars { display:flex; align-items:flex-end; gap:8px; height:120px; overflow:hidden; }
.activity-bars .bar-item { display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; }
.activity-label { font-size:13px; color:#222; }

.weekly-donuts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  align-items: center;
  width: 100%;
}

/* keep donut content centered */
.weekly-donut {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* optional: limit svg size and center text */
.weekly-donut svg { display: block; margin: 0 auto; }

.dh-row-header {
  display: flex;
  justify-content: space-between; /* left item on left, right item on right */
  align-items: center;            /* vertical center */
  width: 100%;
  gap: 12px;
  box-sizing: border-box;
}

/* keep inner blocks aligned */
.dh-row-header-left,
.dh-row-header-right {
  display: flex;
  align-items: center;
}

/* --------------------- colors */
.color-red {background: #ff5730;}
.color-yellow {background: #ffac00;}
.color-green {background: #37b37d;}
.color-blue {background: #07b8d9;}
.color-purple {background: #6654c0;}

/* --------------------- colors */

.material-symbols-outlined.activity-type {
	border-right: 1px solid #000;
	padding-right: .5rem;
	margin-right: .5rem;
}

.activity-name {
	font-size: .8rem;
}

/* --------------------- colors */
.color-red {background: #ff5730;}
.color-yellow {background: #ffac00;}
.color-green {background: #37b37d;}
.color-blue {background: #07b8d9;}
.color-purple {background: #6654c0;}

/* --------------------- colors */

.bar-color-1 {
	background: #07b8d9;
}

/* color levels for weekly donuts */
.weekly-donut.level-1 svg .circle { stroke: #ff5730; } /* very light */
.weekly-donut.level-2 svg .circle { stroke: #60a5fa; } /* light blue */
.weekly-donut.level-3 svg .circle { stroke: #3b82f6; } /* primary */
.weekly-donut.level-4 svg .circle { stroke: #f59e0b; } /* amber */
.weekly-donut.level-5 svg .circle { stroke: #10b981; } /* green */

/* If you keep inline stroke in path, override fill color directly on the svg path */
.weekly-donut.level-1 path[stroke="#3b82f6"] { stroke: #ff5730 !important; }
.weekly-donut.level-2 path[stroke="#3b82f6"] { stroke: #60a5fa !important; }
.weekly-donut.level-3 path[stroke="#3b82f6"] { stroke: #3b82f6 !important; }
.weekly-donut.level-4 path[stroke="#3b82f6"] { stroke: #f59e0b !important; }
.weekly-donut.level-5 path[stroke="#3b82f6"] { stroke: #10b981 !important; }

/* basic layout */
.weekly-donuts { display:grid; gap:16px; grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); }
.weekly-donut { text-align:center; }


.weekly-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
	box-sizing: border-box; 
}

.weekly-activities, .weekly-spent-time {
    display: flex;
    align-items: center;
}

.weekly-content {
	color: #666;
}

.weekly-content b {
	display: block;
	margin-right: 4px;
	font-size: 1.2rem;
	color: #000;
}