/*-----setup-----*/

@font-face {
	font-family: 'BitPotionExt';
    src: url('/fonts/BitPotionExt.woff2') format('woff2'),
         url('/fonts/BitPotionExt.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
	font-family: '04b03regular';
    src: url('/fonts/04b_03__-webfont.woff2') format('woff2'),
         url('/fonts/04b_03__-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: '04b11regular';
    src: url('/fonts/04b_11__-webfont.woff2') format('woff2'),
         url('/fonts/04b_11__-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
	font-family: 'kroeger05_55';
    src: url('/fonts/kroeger 05_55.woff2') format('woff2'),
         url('/fonts/kroeger 05_55.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'kroeger05_65';
    src: url('/fonts/kroeger 05_65.woff2') format('woff2'),
         url('/fonts/kroeger 05_65.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}


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

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

strong {
	font-family: "kroeger05_65", sans-serif;
	font-weight: normal;
}

.todoHeading {
	text-align: center;
}

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

body {
	/*font-size: 8pt;*/
	/*font-family: "BitPotionExt", sans-serif; /*default font*//**/
	/*font-size: 32px;*/
	font-family: "kroeger05_55", sans-serif;
	font-size: 16px;
	line-height: 1;
}

h2 {
	/*font-family: "PressStart2P-vaV7", sans-serif;*/
	/*font-size: 16px;*/
	font-family: "kroeger05_65", sans-serif;
	font-weight: normal;
	font-size: 1em;
}

p {
	margin-top: 0px;
	margin-bottom: 0px;
}

#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;
	flex-wrap: wrap;
    justify-content: center;	
	margin-top: 4px;

}

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

.checkBox svg {
	/*font-size: 14px;*/
	flex-basis: 100%;
}

svg {
	font-size: 14px !important;
}

.todoTextBox {
	overflow-wrap: anywhere;
	flex-basis: 100%;
	margin-left: 6px;
	margin-top: -5px;
}

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

/* temp server identification */
.serverCorrect {
	color: green;
}
.serverWrong {
	color: red;
}