#notify{
  height: 100vh;
  margin: 0;
  padding: 0;
  overflow: hidden;
  justify-content: flex-start;
  background-color: white;
  line-height: initial;
}
#notifications{
  margin:0.5em;
}
caption{
	font-size: 35px;
	font-family: 'Helvetica';
	text-align: left;
	color: black;
	text-shadow: 2px 2px 0px lightgrey;
  caption-side: initial;
}
#addPanel{
	font-family: Verdana, Geneva, sans-serif;
  position:absolute;
  transition: opacity 0.4s;
  opacity:0;
  visibility:hidden;
  background-color:#f0f0ff;
  display: flex;
  flex-direction: column;
  width:40em;
	margin-left: -20em;
	margin-top: -10em;
	left: 0;
	right: 0;
	top:50%;
	left:50%;
	border-radius: 6px;
	border-color: #1d1160;
	border-style: solid;
	border-width: 1px;
	box-shadow: 0px 2px 8px 0px #1d1160;
}

#addPanelTitle{
	border-style: solid;
  border-bottom-width: 2px;
	border-top-width: 0px;
  border-image: linear-gradient(to right, rgba(50, 50, 250, 0), #1D1162, rgba(50, 50, 250, 0)) 23 5%;
}
 .customRadio{
	position: absolute;
  opacity: 0;
  cursor: pointer;
	width:100%;
	height: 3em;
}

input[type="radio"]:checked+.timeOption .inputs{
	background-color:white;
}
input[type="radio"]:checked + .timeOption{
/* 	background-color:#E0EeEF; */
/* 	background-color:#4d90fe; */
	background-color:#1d1160;
/* 	color:black; */
	color:white;
	box-shadow:inset 0 0 10px #000;
}
input[type="radio"]:checked+.timeOption .inputs label{
	color:black;
	font-weight:initial;
}

input[type="number"], input[type="time"], input[type="date"]{
	border:none;
	margin-left:0.5em;
	text-align: right;
	z-index: 1;
	background-color: transparent;
	font-family: 'Roboto', sans-serif;
	font-size: 18px;
	width: min-content;
	width:-moz-min-content;
}
.inputs {
	transition-duration:0.2s;
	transition-property: background-color;
	display: flex;
	flex-direction: column;
	font-size: 11px;
	text-align: center;
	border-style: solid;
	border-width: 1px;
	border-radius: 4px;
	margin: 0.1em;
	width: min-content;
}
.timeOption{
	transition-duration:0.2s;
	transition-property: background-color, color, box-shadow;
	background-color: transparent;
	padding: 0.3em;
	width:100%;
	color:#666;
	padding-left: 2em;
	align-items: center;
	border-width:1px;
	border-style: solid;
	border-radius: 4px;
	margin:0.2em;
	box-shadow: inset 0 0 12px #ddddff;
/* 	box-shadow: inset 0 0 12px #4d90fe; */
	
	font-weight:700;
}
.timeOption, #panelButtons{
  display:flex;
  flex-direction:row;
}
#noteText{
	margin:0.2em;
	border-radius:4px;
}
textarea{
	resize:none;
}
#panelButtons{
  justify-content: flex-end;
}

#notTable {
  border-collapse: collapse;
  width: 100%;
  border: 3px solid #ffffff;
  font-size: 18px;
}

#notTable th, #notTable td {
  text-align: center;
/* 	width:25%; */
  padding: 0.3em;
	margin: 5px;
}
#notTable tr:first-child td{
  background-color: #1d1160;
	color: white;
	text-shadow: 3px 2px #000111;
	font-family: Verdana, Geneva, sans-serif;
}

#notTable tr {
	border-bottom: 3px solid #ffffff;
/* 	background-color: #eeeeee; */
	background-color: #d5e0ea;
}
.overdue{
	background-color:#ff9999 !important;
}
.complete{
/* 	background-color:#55FFCA !important; */
/* 	background-color:#20b2aa !important; */
/* 	background-color:#2bea87 !important; */
	background-color:#59c743 !important;
}

.button{
	background-color:transparent;
/* 	color:#888888; */
	border:none;
	color: #ffffff;
	border: none;
	text-shadow: 2px 1px 1px #1d1160;
}
.button:disabled{
	color:#b3b3b3;
}
.controls{
	display: flex;
  flex-direction: row;
	justify-content: flex-end;
}
.rightButCol{
	display: flex;
	flex-direction:column;
}
.editTooltip{
	visibility: hidden;
	background-color: #555;
	color: #fff;
	text-align: center;
	border-radius: 6px;
	padding: 5px 0;
	position: absolute;
	z-index: 1;
	margin-left: -60px;
	opacity: 0;
	transition: opacity 0.3s;
	right: 3em;
	display:flex;
	flex-direction:column;
	padding:0.1em;
}
.tooltipText{
	min-height:4em;
	width:30em;
	height: fit-content;
}
#controls{
	float: right;
  margin-right:0.5em;
}