.col ul {
	/* For 7 rows, we need 3 rows of padding. For 9 rows, change 3 to 4. */
	padding: calc(var(--row-h) * 3) 0;
	padding: calc(var(--row-h) * (var(--visible-rows) * 0.5 - 0.5)) 0;
	margin: 0;
	list-style: none;
}

.col li {
	height: var(--row-h);
	line-height: var(--row-h);
	text-align: center;
	/* opacity: 0.2; */
}

#y-col li,
#m-col li,
#d-col .pzl_date {
	/* opacity:0.2; */
	 /* needs hard color */
	color:rgb(80 80 80);
    min-width: 2.5rem;
	min-width: 1.875rem;
}

#d-col .pzl_title {
	display:flex;
	position:relative;
}

#d-col .polyad {
	/* color:rgb(255 255 255 / 60%); */
	 /* needs hard color */
	color:rgb(164 164 164);
}

.pzl_title .steplets {
	/* font-size: 0.9em; */
    /* margin-top: -0.7rem; */
	/* position:absolute; */
	/* right:0; */
	position: absolute;
    left: 100%;
    top: 0;
    font-size: 1.2rem;
	font-size: 0.9rem;
    line-height: 25px;
	line-height: 1.171875rem;
}

.pzl_title .steplets sup {
	font-size:0.6em;
	/* font-size:0.45em; */
}

#d-col .pzl_number {
	/* opacity: 0.4;  */
	 /* needs hard color, and then test 600 puzzles scroll performance */
	color:rgb(100 100 100);
    min-width: 2.5rem;
	min-width: 1.875rem;
    text-align: right;
}

.current.polyad {
	color:#0c8cb8;
}

pink {
	color:#ba5094;
}

#y-col li.active,
#m-col li.active,
#d-col li.active .pzl_date {
	/* opacity: 1;  */
	 /* needs hard color */
	color:rgb(240 240 240);
	/* font-weight: bold; */
}

.selection-bar {
	position: absolute;
	top: 50%;
	width: 100%;
	height: var(--row-h);
	transform: translateY(-50%);
	border-top: 1px solid #333;
	border-bottom: 1px solid #333;
	pointer-events: none;
	background: rgba(255, 255, 255, 0.02);
	z-index: 10;
}






/* ADDABLES */
.picker-container {
	z-index: 2001;
	margin-top: 180px;
	margin-top: 8.4375rem;
	border: 1px solid rgb(44, 44, 44);
	width: calc(100% - 1rem);
	max-width: 600px;
}

.col {
	overscroll-behavior: none;
}

/* .col li {
	transition: opacity 0.3s;
}

.col li.active {
	transition:opacity 0.8s;
} */

.picker-container #y-col {
	/* margin-left: 1rem; */
	flex: 2;
}

.picker-container #m-col {
	flex: 3;
	border-left: 1px solid transparent;
	border-right: 1px solid transparent;
	border-image: linear-gradient(to bottom, transparent, #414141, transparent) 1;
	border-width: 1px;
}

.picker-container #d-col {
	flex: 10;
}

/* .picker-container #d-col span.pzl_date { */
	/* float: left; */
	/* width: 3rem; */
	/* margin-right: 2rem; */
/* } */

.picker-container #d-col .pzl_title {
	/* font-weight: normal;
	text-align:center;
	padding: 0 1.8rem;
    border-radius: 5px;
    border: 1px solid transparent;
	background-color:transparent;
	transition:border 0.2s, background-color 0.2s, opacity 0.2s;
	cursor:pointer; */
	white-space:nowrap;
}

.puzzwrap {
    display: flex;
    flex-direction: row;
    width: 100%;
    padding: 0 0.5rem;
    margin: 0 0.25rem;
    justify-content: space-between;
    border: 1px solid transparent;
	border-radius:0.4rem;
	cursor:pointer;
}

.puzzwrap:hover {
    border: 1px solid rgb(84, 84, 84);
}

/* .picker-container #d-col .pzl_title:hover {
	background-color:rgba(255 255 255 / 3%);
	border:1px solid rgba(255 255 255 / 10%);
	opacity:0.8;
} */

.picker-container #d-col .puzzwrap:hover .polyad {
	/* opacity: 0.8; */
	color:rgb(255 255 255 / 80%); /* needs hard color */
}

.picker-container #d-col .polyad.red .steplets {
	color:rgb(237, 33, 84);
	color:rgb(255 41 117); /* put this to a variable */
}
.picker-container #d-col .polyad.yellow .steplets {
	color:rgb(242, 228, 31);
	color:rgb(255, 198, 66); /* synthwave */
	color:rgb(255 234 66); /* brighter, yellower */
}
.picker-container #d-col .polyad.green .steplets {
	color:rgb(81, 214, 57);
	color:#00ffad;
}

.picker-container #d-col .pzl_number {
	font-weight: normal;
	/* opacity: 0.4; */
	float:right;
	/* cursor:pointer; */
}

/* .picker-container #d-col span.pzl_number:hover {
	opacity:0.7;
} */

.picker-container .day {
	display: flex;
	/* flex-direction: row; */
	justify-content: space-between;
	justify-content: center;
	/* padding:0 1.5rem; */
}

.picker-container .day div {
	text-align: left;
}

.archive.label {
	position: absolute;
    width: 100%;
    color: white;
    opacity: 0.25; /* does not need hard color */
    font-size: 2rem;
	font-size: 1.5rem;
    text-transform: uppercase;
    text-align: center;
    margin-top: 130px;
	margin-top: 6.09375rem;
    z-index: 2000;
    display: flex;
    width: calc(100% - 2rem);
    max-width: 600px;
    letter-spacing: 0.4rem;
	letter-spacing: 0.3rem;
	font-family: "Ubuntu", sans-serif;
	font-weight: 400;
	font-style: normal;
}

.current.thing {
    position: relative;
    width: 100%;
    width: calc(100% - 2rem);
    width: calc(100% - 1.5rem);
    max-width: 600px;
    z-index: 2000;
    color: white;
    display: flex;
    justify-content: center;
	align-items:center;
	text-align:center;
    letter-spacing: 0.4rem;
    font-family: "Ubuntu", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.archive.label .dummy.yrs {
	margin-left: 1rem;
	margin-left: 0.75rem;
	flex:2;
}

.archive.label .dummy.mnths {
	flex:3;
}

.current.thing .dummy.yrsmnths {
	flex:5;
	text-align:right;
}

.archive.label .dummy.dys {
	flex:10;
}

.current.thing .dummy.dys {
	flex:10;
}

.current.thing .today {
	text-transform: uppercase;
	opacity: 0.4; /* does not need hard color */
	font-size: 2rem;
	font-size: 1.5rem;
}

.current.thing .polyad {
    padding: 0.5rem 5rem;
	padding: 0.375rem 3.75rem;
    max-width: 200px;
	max-width: 9.375rem;
    /* border: 1px solid #444444; */
	border: 1px solid rgb(150 150 150);
    border-radius: 0.4rem;
	border-radius: 0.3rem;
    white-space: nowrap;
	letter-spacing:normal;
	/* color:rgb(100 100 100); */
	cursor:pointer;
	display: inline;
    /* align-items: center; */
    justify-content: center;
}

.current.thing .polyad:hover {
	background-color:rgb(32 32 32);
	border:1px solid rgb(164 164 164);
}