body{
	background-color:#333;
	font-family: 'Source Code Pro', monospace;
	color:#ccc;
}


form{
  width:600px;
  height:20px;
  margin:0 auto;
}
input{
	display: inline-block;
	outline: none;
}
input[type="range"]{
  -webkit-appearance:none;
  width:250px;
  height:10px;
  margin:10px 10px;
  background: linear-gradient(to right, #6b6de5 0%, #46e260 100%);
  background-size:250px 2px;
  background-position:center;
  background-repeat:no-repeat;
  overflow:hidden;
  outline: none;
}

input[type="range"]:first-of-type{
  margin-top:0px;
}

input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:20px;
  height:20px;
  background:#ddd;
  position:relative;
  z-index:3;
  box-shadow:0 0 5px 0 rgba(0,0,0,0.3);
}

input[type="range"]::-webkit-slider-thumb:after{
  content:" ";
  width:20px;
  height:10px;
  position:absolute;
  z-index:1;
  right:20px;
  top:5px;
  background: #ff5b32;
  background: linear-gradient(to right, #6b6de5 1%, #46e260 70%);
}
.input{
	margin-left:20px;
}
.add{
	margin-left:20px
}
.preview, .previewhist{
	font-weight:100;
	font-size:0.7em;
	padding-bottom: 10px;
}
.date, .datehist{color: #9f00ca; margin-right:5px;}
.hpyno, .hpyhist{color:#efe23e; margin-right:5px;}
.pretext, .pretexthist{color:#ece5e5; margin-right:5px;}
.prepos, .preposhist{ color: #58e81b; margin-right:5px;}
.preneg, .preneghist{ color: #e81b1b; margin-right:5px;}
.precon, .preconhist{ color: #999; margin-right:5px;}
.pretag, .pretaghist{ color: #2ad4fa; margin-right:5px;}

.filter{
	background-color:#555;
	width:880px;
	font-weight:100;
	font-size:0.7em;
	padding:10px;
	border-radius: 2px;
}
.filtitle{font-weight:700; margin-right:5px;}
.filpos{ background-color: #58e81b; border-radius: 2px; padding:2px 5px; color:#222; margin-right:5px;}
.filneg{ background-color: #e81b1b; border-radius: 2px; padding:2px 5px; color:#222; margin-right:5px;}
.filcon{ background-color: #999; border-radius: 2px; padding:2px 5px; color:#222; margin-right:5px;}
.filtag{ background-color: #2ad4fa; border-radius: 2px; padding:2px 5px; color:#222; margin-right:5px;}

rect.r0 {
    fill: #ededed;
    fill: #000;
}
.graph-subdomain-group .now{ stroke:none; }
.graph-subdomain-group text.now{ fill: #222;}
.highlight, rect.now, rect.now:hover{
	stroke: #999;
}
.graph, .graph-legend rect {
    shape-rendering: auto;
}
.subdomain-text{ fill:#111; font-weight:700;}
.banner, .top10s, .fullday{
	width:950px;
	color:#ccc;
	text-align:left;
	font-weight:700;
	margin-bottom:10px;
	margin-left: 50px;
}
.header{
	width:140px;
	display:inline-block;
	margin-right:197px;
}
.header a:link, .header a:hover, .header a:visited, .header a:active{
	text-decoration: none;
	color:#ccc;
}
.fullday{
	padding-top:10px;
}
.new-log{
	width:600px; 
	display:inline-block;
	vertical-align:top;
}
.sub-header{
	font-weight:700;
	color:#ccc;
}
.toppos, .latpos, .topneg, .latneg, .topcon, .latcon, .toptag, .lattag{ 
	width:150px;
	display: inline-block;
	font-weight:100;
	font-size:0.7em;
}
.toppos, .latpos{ color: #58e81b; vertical-align: top;}
.topneg, .latneg{ color: #e81b1b; vertical-align: top;}
.topcon, .latcon{ color: #999; vertical-align: top;}
.toptag, .lattag{ color: #2ad4fa; vertical-align: top;}

.habit-main-title{ 
	font-weight:700;
    margin-bottom: 10px; 
}
.habit-container-wrapper {
    display: flex;
    flex-wrap: wrap;
        width: 950px;
}

.habit-container {
    width: 465px; /* Two containers per line */
    box-sizing: border-box;
    background-color: #222;
    border-radius: 5px;
    text-align: left;
    padding: 5px;
    margin:5px;
}
.habit-title{
	font-family: 'Source Code Pro', monospace;
	font-size: 0.7em;
	font-weight: 700;
    color: #ccc;
}
.habit-timescale{
	font-weight:100;
	color:#ccc;
	display: inline;
}
.habit-desc{
	font-weight: 100;
    font-size: 0.7em;
    padding-bottom: 10px;
}

.good{ color: #58e81b;}
.bad{ color: #e81b1b; }

.habit-log{
	float:right;
}
.habit-log-button{
	width: 28px;
    height: 28px;
    font-size: 14px; /* You can adjust the font size to fit the button */
    border: none;
    background-color: #000;
    color: #fff;
    cursor: pointer;
    border-radius: 5px;
    font-family: 'Source Code Pro', monospace;
    font-weight:700;
}

.button-done{  background-color: #399113; color:#000; }
.button-good{ background-color: #58e81b; color:#58e81b; }
.button-bad{ background-color: #e81b1b; color:#000; }
.button-neut{ background-color: #efe23e; color:#000; }

.habit-score{
	width:145px;
	display:inline-block;
	text-align: center;
	font-size: 0.7em;
}
.score-title{
	font-weight:700;
}

.habit-cal-day, .habit-cal-week{
	padding-top:10px;
}

.habit-cal-day .graph-label, .habit-cal-week .graph-label{ display:none; }
.habit-cal-day .cal-heatmap-container {
    display: block;
    overflow: hidden;
    height: 120px;
}
.habit-cal-week .cal-heatmap-container {
    display: block;
    overflow: hidden;
    height: 85px;
}


.habit-cal-week .r1{ fill:#efe23e; }
.habit-cal-week .r2{ fill:#58e81b; }
.habit-cal-week .r0{ fill:#000; }

.week-container .green{ background-color: #58e81b;  color: #58e81b; }
.week-container .neut{ 
	background-color: #efe23e;
    color: #111;
    font-weight: 700;
    font-size: 12px;
    text-align: center;
}
.week-container .neut text[Attributes Style] {
    text-anchor: middle;
    dominant-baseline: central;
}

 .grid-container {
        display: flex;
        flex-wrap: wrap-reverse; /* Reverse the order to start from 24 months ago */
        gap: 5px;
        margin-top: 10px;
    }

    .month {
        width: 15px;
        margin: 0px;
        padding: 0px;
        border: 0px solid #ccc;
        box-sizing: border-box;
    }

    .week-container {
        display: grid;
        grid-template-columns: 15px; /* Single column for vertical layout */
        grid-template-rows: repeat(5, 15px * 24); /* Adjusted for 24 weeks */
        gap: 2px;
    }

    .week {
        width: 15px;
        height: 15px;
        background-color: #000;
        border: 0px solid #fff;
        box-sizing: border-box;
        border-radius: 2px;
    }