/* @font-face { font-family: Jost; font-weight: italic; src: url('media/Jost-Italic-VariableFont_wght.ttf');}
@font-face { font-family: Jost; src: url('media/Jost-VariableFont_wght.ttf') } headers
@font-face { font-family: Faustina; font-weight: italic; src: url('media/Faustina-Italic-VariableFont_wght.ttf');}
@font-face { font-family: Faustina; src: url('media/Faustina-VariableFont_wght.ttf') } normal */
html, body {
	height: 100%;
	background-color: rgb(199,211,199); /* light-green-200 */
}
html, body, input, button {
	font-family: Faustina, sans-serif; 
}
a, h1, #currentTimeDisplay, #done {
	font-family: Jost, sans-serif;
}
h1 { 
	color: rgb(21,27,27); /* black-200 */ 
}
h2 {
	margin: 0;
}
/* #region 2024Q3 rework */
#appContainer {
	width: 100%;
	height: 100vh; 
	background-color: rgb(21,27,27); /* black-200 */
	color: white;
}
#appContainer table {
	width: 100%;
	height: 100%;
	table-layout: fixed;
	border-collapse: collapse;
}
#appContainer table tr {
	height:20%;
}
#addItemForm {
	width: 100%;
	height: 100%;
	padding: auto;
	margin: auto;
	text-align: center;
}

#delegateRow, #doneRow {
	height: 30%;
}
#appContainer td {
	border: 1px solid white;
}
#done {
	background-color: teal;

}
/*  */ 
/* region plateColumn */
#onOurPlateColumn {
	width: 45%; 
}
#onOurPlate {
	position: relative;
	width: 100%;
	height: 100%;
	display: flex;
	/* align-content: center;
	align-items: center; */
	/* background-color:rgb(199,211,199); */
	/* outline: .1rem solid rgb(21,27,27); */
	background-size: 40px 40px;
	background-image: radial-gradient(circle, #000000 1px, rgba(199,211,199, .9) 1px);
  
}
#onOurPlate h2 {
	position: absolute;
	/* top: -3rem; */
	/* background-color: rgb(21,27,27); */
	/* text-align: center; */
}
#plateSvg {
	max-width: 2rem;
	vertical-align: middle;
	display: inline-block;
}
#remainingTimeIndicator {
	position: absolute;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: center;
	width: 100%;; 
	/* background-color: rgba(177,197,204,.5); */
	background-color: rgba(21,27,27,1);
}
#remainingTimeIndicator span {
	position: relative;
	left: auto; 
}
#dayChunkMorning, #dayChunkLunch, #dayChunkAfternoon {
	position: relative;
} 
#dayChunkLunch { /*lunch*/
	width: 100%;
	top: 40%;
	/* color: rgb(21,27,27); */
	/* outline: 1px dashed rgb(21,27,27); */
	opacity: 0.3;
	background-image: radial-gradient( ellipse farthest-corner at 1vh 10px , #444cf7, #444cf7 50%, #e5e5f7 50%);
	background-size: 1vh 1vh;
} 
/* #endregion */
/* drop locations */
.dropLocation {
	width: 100%;
	height: 100%;
	display: flex;
	font-size: 1.9rem;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;	
}
/* #endregion */
/* tasks */
.task {
	position: absolute;
	min-width: 4%;
	max-width: 20%;
	min-height: 4vh;
 
	touch-action: none;
	overflow: hidden; 
	font-size: 1.1rem;
	text-overflow: ellipsis;
	white-space: nowrap;
	
	padding: .1rem 0 0 .2rem;
	box-shadow: 4px 4px 2px rgb(35, 50, 56);

	background-color: rgb(49,178,200);
	outline: 1px solid rgb(165, 218, 227);
	
	-webkit-user-select: none; /* Safari */
	-ms-user-select: none; /* IE 10 and IE 11 */
	user-select: none; /* Standard syntax */	
	cursor: grab;
 
}
.task.clampedMaxWidth {
	max-width: 10%;
	opacity: .75;
	max-height: 2vh;
	
}

.highlighted {
	font-weight: 700;
	opacity: 1;
}

.dimmed {
	opacity: .5;
}
/* #endregion */


/* #region countdown */
.inboxArea {
	color: white;
	height: 8rem;
	/* padding: auto auto; */
}
form button {
	margin: .4rem;
}
form input {
	height: 3rem;
	font-size: 1.5rem;
	width: 55%;
	/* margin: 4rem 0 0 0; */
}
input:focus, button:focus {
	outline: .2rem solid rgb(231,231,219);
}
input:active, button:active {
	outline:.1rem solid white;
}
input:invalid {
	outline: rgb(179,136,130) solid 3px; /* red-300 */
}
input:valid:focus {
	outline: rgb(87,147,137) solid 3px;
}

button {
	font-size: 1.5rem;
	padding: .4rem .8rem;
	margin-left: .4rem;
	margin-bottom: 4rem;
}
#exporterSection {
	display: flex;
	gap: .4rem;
	flex-direction: column;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: flex-start;
}

/* #doneStack {
	width: 90%;
	height: 6rem;
	outline: none;
	background-color: rgba(87,147,137,1);
	font-weight: 600;
	font-size: 1.8rem;
	border-radius: .8rem;
} */




#notTodayStacks {
	/* width: 94%; 
	margin: 0 auto .4rem auto;
	padding: .6rem .8rem;

	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-auto-rows: 4.2rem;
	grid-gap: 1.2rem;
	background-color: rgba(199,211,199,1);
	background-size: 10px 10px;
	background-image: repeating-linear-gradient(45deg, rgba(177,197,204,1) 0, rgba(177,197,204,1) 1px, rgba(199,211,199,1) 0, rgba(199,211,199,1) 50%);	 */
} 
/* #notTodayStacks .col {
	background-color: rgba(177,197,204,.8);
	font-size: 1.8rem;	
}
#notTodayStacks .col:nth-child(-1n + 3) {
	grid-column: span 4;
}
#notTodayStacks .col:nth-last-child(2) {
	grid-row-start: 2;
	grid-column: 3 / span 4;
}
#notTodayStacks .col:nth-last-child(1) {
	grid-row-start: 2;
	grid-column: 7 / span 4;
}  */

.label {
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
} 
/* #endregion *****************/
/* #region pegboard */ 
#pegBoard, .timelineArrow {
	width:94%; 
	margin:1.2rem auto;
}

#pegBoard {
	position: relative;
	height: 32rem;
	background-image: radial-gradient(rgb(177,197,204) .2rem, transparent .2rem);
	background-size: 56px 56px;
	background-color: rgb(231,231,219);	
}
#lunchMarker {
	position: absolute;
	background-color: rgb(177,197,204);
	width: 11.76%;
	height:100%;
	left: 35.29%;
	
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 2rem;
} 

.toDoBoard {
	position: relative;
}

/* #endregion *****************/
/* #region axis arrow*/
.timelineArrow {
	text-align: center;
	height:1.3rem; 
	background-color: rgb(177,197,204);	
	color: rgb(40, 56, 62);
	width: 92%;
	margin-bottom: 1.2rem;
}
.arrowheadLeft {
	width: 0; 
	height: 0; 
	border-top: 1.3rem solid transparent;
	border-bottom: 1.3rem solid transparent;
	border-left: 1.3rem solid rgba(177,197,204,1);
    float:right;
    margin-top:-.65rem;
    margin-right:-1rem;
}
.arrowheadRight {
	width: 0; 
	height: 0; 
	border-top:1.3rem solid transparent;
	border-bottom: 1.3rem solid transparent; 
	float:left;
	border-right:1.3rem solid rgba(177,197,204,1);
    margin-top:-.65rem;
    margin-left:-1rem;
}

/* #endregion *****************/
/* #region *****************/
#exporterSection {
	padding: 1.4rem 0 0 0;
	margin: auto auto;
}
#clipboardContainer, #appendix {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	align-items: center;
}

#exportConfirmationMessage { 
	display: inline;
	color: rgb(40, 56, 62);
}

#appendix * {
	margin: 0;
}