/*** debug ***/
.devDiv {
	outline:1px solid cyan;
	/*display:none;*/
	margin:0px;
	padding:5px;
}

/***temp styles***/
div {
	margin:5px;
	padding:5px;
}

.todoHeading {
	
}

.todoContainer {
	outline:1px solid black;
	display:flex;
	flex-wrap: wrap;
	/*width:450px;*/
	/*float:left;*/
}

body {
	font-size:9pt;
	font-family:verdana;
}

#todos {
	display:flex;
}

.todoColumn {
    flex-basis: 100%;	
}

.todoItem.dueToday .checkBoxRepeating {
	background-color:pink;
}

.todoItem.notDueToday{
	outline:1px solid grey;
}

.todoItem.notDueToday .checkBoxRepeating{
	background-color:LightGrey;
}

.disabled p, .disabled .icon{
	color:grey;
}

.todoItem.disabled .checkBoxRepeating{
	background-color:LightGrey;
}

.todoItem.disabled.dueToday .checkBoxRepeating{
	background-color:LightGreen;
}

.disabled .checkBoxRepeating .icon{
	display:flex;
}

/* temp header styles */

#header {
	display:flex;
	flex-wrap:wrap;
}

#statusBar {
	flex-basis:100%;
	text-align:center;
}

#menuBar {
	display:flex;
	justify-content: center;
	flex-basis:100%;
}

#addNewEntryButton {
	display: flex;
    align-items: center;
}
#filterTodos {
	display: flex;
    align-items: center;
}
#contentGuideButton {
	display: flex;
    align-items: center;
}


/* temp modals */
#todoCategoriesInfo {
	/*width:38%;
	height:210px;
	overflow-y:scroll;*/
}

/* temp new entry form styles */
#addNewEntry {
	/*outline:1px solid purple;
	width:500px;
	float:left;
	margin:15px;*/
}

#createEntry {
	/*display:flex;
	flex-wrap:wrap;*/
}

#formInput {
	/*flex-basis:100%;
	width:100%;*/
}




/* temp item styles */
.todoItem {
    display:flex;
    flex-wrap:wrap ;
    outline:1px solid red;
    flex-basis:100%;
}

.todoControlBox {
	display:flex;
	flex-basis:100%;
}

.checkBox {
	width:40px;
	height:40px;
	background-color:pink;
    display:flex;
}

.checkBox .age {
    width:30px;
    height:30px;
    display:flex;
    justify-content:center;
    align-items:center;
}

.checkBox .age p {
	/*display:flex;*/
}

.checkBox .icon {
    width:30px;
    height:30px;
    display:flex;
    justify-content:center;
    align-items:center;
}

.todoTextBox {
	overflow-wrap:anywhere;
	flex-basis: 100%;
}

.todoDetailsBox {
	width:100%;
	margin-left:56px;
    /*display:flex;*/
    /*flex-direction:column;*/	
}

.optionsBox {
    display:flex;
    /*width:30px;*/
    /*flex-direction:column;*/
}

.todoMessageBox {
    width:100%;
	margin-left:56px;
}

.checkBoxRepeating {
	width:40px;
	min-width:40px;
	height:40px;
    display:flex;
}

.checkBoxRepeating .icon {
    width:30px;
    min-width:30px;
    height:30px;
    display:flex;
    justify-content:center;
    align-items:center;
}

/* temp default visibility settings*/
.formOptionsContainer {display:none;}
#formOptionsOnce {display:block;}
.checkBox div.icon {display:none;}
.checkBoxRepeating div.icon {display:none;}
.todoDetailsBox {display:none;}
.todoMessageBox > div {display:none;}
.show {display:flex;}
.hide {display:none;}