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


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

.habit-container {
    width: 100%;
    box-sizing: border-box;
    background-color: #222;
    border-radius: 5px;
    text-align: center;
    padding: 5px;
    margin: 5px;
    margin-bottom: 30px;
    padding-bottom: 0px;
}
.habit-title{
	font-family: 'Source Code Pro', monospace;
	font-size: 2em;
	font-weight: 700;
    color: #ccc;
}
.habit-timescale{
	font-weight:100;
	color:#ccc;
	display: inline;
}
.habit-desc{
	font-weight: 100;
    font-size: 1.95em;
    padding-bottom: 10px;
}
.habit-main{ 
    float: left;
    width: -webkit-fill-available;
    margin-top: -90px;
    margin-right: 90px;
    text-align: left;
}

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

.habit-log{
	float: right;
}
.habit-log-button{
	width: 99px;
    height: 99px;
    font-size: 3em; /* 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:#399113; }
.button-good{ background-color: #58e81b; color:#58e81b; }
.button-bad{ background-color: #e81b1b; color:#000; }
.button-neut, .button-yellow{ background-color: #efe23e; color:#000; }
.button-green{ background-color: #58e81b; color:#58e81b; }


.ltred{ background-color: #e81b1b; color:#000; }
.ltgreen{ background-color: #888; }
.ltneut{ background-color: #444; }
.ltyellow{ background-color: #efe23e; }


.habit-info {
    text-align: right;
    font-size: 1.6em;
    display: flex;
    justify-content: flex-end;
}

.habit-score {
    width: 135px;
    display: inline-block;
    text-align: center;
    font-size: 1.3em;
    background-color: #222;
    box-sizing: border-box;
    margin-right: 0;
    margin-left: 0;
}

.score-title{
	font-weight:700;
    font-size:0.8em;
}
.score-result{
    font-size: 1.5em;
}

.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; }
.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;
    }

.habit_long_container{
    text-align: center;
    height: 10px;
    display: inline-flex;
    position: relative;
}

.long_tick {
    height: 10px;
    width: 60px;
    display: block;
    margin-right: 1px;
    padding: 0;
    position: relative;
    border-radius: 5px;

}