body {
	  font-family: Roboto, Arial, Menlo, Consolas, monospace !important;
	  color: #444;
	}
	#tooSmall{
		display:none;
	}
	.item {
	  cursor: pointer;
	}
	.bold {
	  font-weight: bold;
	}
	ul {
	    padding-left: 1em;
	  	margin:3px 0px 10px 4px;
		line-height: 1.5em;
		list-style: none;
		width:95%;
	}
	.title{
		font-weight:bold;
	}
	.note{
		position:relative;
		border: solid 1px grey;
		margin-top:4px;
		padding :6px;
		min-height:40px;
		max-height:200px;
		overflow:auto;
		border-radius: 4px;
		overflow-wrap: break-word;
	}
	.shop-item{
		font-size:12px;
	}
	.icon-right{
		float:right;
		margin: 4px 8px 8px 8px;
	}
	.pre{
	  display: block;
	  white-space: pre-wrap;
	  line-height :16px;
	  font-weight:300;
	  font-size:12px;
	}
	.children{
		position: relative;
		padding-right:18px;
	}
	.titleShort{
		width: 70%;
	}
	.titleLong{
		width: 70%;
		display:inline-block;
	}
	.children span {
		position: absolute;
		font-size: 14px;
		font-style: normal;
		padding:0;
		margin:0;
		color : red;
		text-align:right;
		padding-left:0px;
		background:white;
		width :12px;
	}
	.note textarea{
	    display:block;
		width:90%;
		min-height:100px;
		max-height:100px;
		font-size: 12px;
		font-style: normal;
	}
	.falseEdit{
		border: solid 1px grey;
		border-radius: 4px;
		padding-left:2px;
	}
	input.edit{
		width:50%;
		border:none;
		height:1em;
		font-size: 12px;
		font-style: normal;
	}
	.summaryCheck{
		display:inline-block;
		margin-top: -105px;
		float:right;
	}
	.task:first-child{
		margin-bottom:8px;
		background-color: #fff;
		background: linear-gradient(#ffffff, #e9e9e9);
	}
	.white{
		background-color: #fff;
		background: #fff;
	}
	#showTasks{
	  marging:0;
	  font-weight:300;
	  font-size:12px;
	  cursor:pointer;
	  margin-top:16px;
	}
	#showTaskLabel{
	  font-family: Roboto, Arial, Menlo, Consolas, monospace !important;
	  color: #444;
	  font-size:14px;
	  font-weight:600;
	}
	li.inactive{
	 opacity: 0.5;
	}
	button{
		text-decoration:none;
		display:inline-block;
		-webkit-appearance: button;
		touch-action: manipulation;
		border: 1px solid transparent;
		text-align: center;
		white-space: nowrap;
		vertical-align: middle;
		font-weight: 400;
		margin-bottom: 0;
		padding: 5px 14px;
		min-width:100px;
		font-size: 13px;
		line-height: 1.5;
		border-radius: 3px;
		text-shadow: 0 -1px 0 rgba(0,0,0,.2);
		box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 1px rgba(0,0,0,.075);
		background-repeat: repeat-x;
	}
	.btn-small{
		padding: 3px 8px;
		min-width:60px;
		font-size: 12px;
		line-height: 1.2;
		border-radius:3px;
		margin-bottom: 2px;
	}
	.btn-red{
		background-color: #b7337a;
		color: #fff;
		border-color: #802455;
		background: linear-gradient(#A46D8F,#642D4F);
	}
	.btn-blue{
		background-color: #337ab7;
		color: #fff;
		border-color: #245580;
		background: linear-gradient(#6D8FA4,#2D4F64);
	}
	.btn-right{
		float:right;
		cursor:pointer;
	}
	.buttons .btn-right{
		margin-right:5%;
	}
	.btn-left{
		float:left;
		cursor:pointer;
	}
	li div{
		position:relative;
	}
	.buttons {
		display:inline-block;
	    padding-left: 1em;
	  	margin:3px 0px 10px 24px;
		line-height: 1.5em;
		width:95%;
	}
	.done{
		opacity: 0.5;
	}
	.done-show li.inactive{
		opacity: 0.5;
	}
	.done-hide li.inactive{
		display:none;
	}
	.datetime{
		font-size :11px;
		font-weight:300;
		font-style:italic;
		font-stretch:semi-condensed;
	}
	.mover{
		position:absolute;
		right:60px;
	}
	.dueDate{
		position:absolute;
		top:2px;
		right:2px;
		font-size:9px;
		width:80px;
		padding: 2px 4px 2px 4px;
		color:black;
	}
	.dueDate.cool{
		border : 1px solid green;
		background-color:lightgreen;
	}
	.dueDate.late{
		border : 1px solid red;
		background-color:orangered;
	}
	.dueDate.soon{
		border : 1px solid orangered;
		background-color:orange;
	}
	.dueDate.none{
		display:none;
	}
	#titleZone{
		margin-bottom: 4px;
		font-size: 24px;
		color: rgb(109, 143, 164);
		font-weight: 900;
		display: block;
		user-select:none;
	}
	#titleZone .fas{
		cursor:pointer;
	}
	#message{
		position:absolute;
		margin-top:-5px;
		color: rgb(164, 109 , 143);
		font-size :16px;
		font-weight:900;
		width:100%;
		text-align:center;
	}
	.getCloudKey{
		margin-left:40px;
	}
	.getCloudKey h3{
		margin-bottom: 6px;
		font-size: 16px;
		color: rgb(109, 143, 164);
		font-weight: 900;
		display: block;
	}
	.getCloudKey h5{
		margin-bottom: 6px;
		font-size: 12px;
		color: grey;
		display: block;
	}
	.getCloudKey p{
		font-size: 12px;
		color: grey;
		display: block;
	}
	.getCloudKey div{
		border: solid 1px grey;
		border-radius: 4px;
		padding:3px;
		max-width:500px;
		height :24px;
	}
	.getCloudKey div input{
		width:calc(100% - 74px);
		border:none;
		font-size: 12px;
		font-style: normal;
		height :18px;
	}
	#key-message{
		display:inline-block;
		margin-top:2px;
		color: rgb(164, 109 , 143);
		font-size :16px;
		font-weight:bold;
		width:90%;
		max-width:90%;
		margin: 2px 0 2px 0;
		text-align:center;
	}
	#fullScreenToggler{
		display:none;
	}
	.buttons .fas{
		cursor:pointer
	}
	@media (pointer: coarse) {
		.mover{
			display:none;
		}
	}
	@media screen and (max-width:299px){
		ul{
			display:none;
		}
		.buttons{
			display:none;
			opacity: 0;
		}
		#showTasks{
			display:none;
			opacity: 0;
		}
		#message{
			opacity: 0;
		}
		#tooSmall{
			display:block;
		}
	}
	@media screen and (min-width: 300px) and (max-width: 640px) {
		#fullScreenToggler{
			text-align:center;
			position:absolute;
			left:12px;
			top:30px;
			user-select: none;
			cursor:pointer;
			color:grey;
		}
		ul {
			padding-left: 5px;
			margin:2px 4px 6px 2px;
			line-height: 1.5em;
			list-style: none;
			width:98%;
		}
		.icon-right{
			position:absolute;
			margin: 4px 8px 8px 8px;
		}
		.icon-right.icon-1{
			right:0px;
		}
		.icon-right.icon-2{
			right:30px;
		}
		.icon-3{
			float:right;
			margin-right:5px;
		}
		.btn-right{
			position:absolute;
			right:0px;
		}
		.btn-left{
			position:absolute;
			left:20px;
		}
		#showTasks{
			margin-top : -26px;
			position:absolute;
			text-align:right;
			right:8px;
			marging:0;
			font-weight:300;
			font-size:16px;
			cursor:pointer;
			display: block;
		}
		#titleZone{
			margin-top : -8px;
			margin-bottom: 4px;
			font-size: 24px;
			color: rgb(109, 143, 164);
			font-weight: 900;
			display: block;
		}
		#message{
			position:absolute;
			margin-top:2px;
			color: rgb(164, 109 , 143);
			font-size :16px;
			font-weight:900;
			width:100%;
			text-align:center;
		}
		#key-message{
			color: rgb(164, 109 , 143);
			font-size :12px;
			font-weight:normal;
			text-align:left;
			margin-top: 30px;
			margin-left: -27px;
		}
		.titleLong{
			width: 70%;
			display:inline-block;
			line-height:12px;
		}
		.getCloudKey{
			margin-left:20px;
		}
		.buttons .btn-right{
			margin-right:calc(2% + 3px);
		}
		.buttons .fas{
			position:absolute;
			margin-left:90px;
		}
	}
#loader {
  align-items: center;
  background-color: black;
  display: flex;
  height: 100vh;
  justify-content: center;
  left: 0px;
  opacity: 0.7;
  position: fixed;
  top: 0px;
  width: 100vw;
  z-index: 10000; }
#loader_anim {
  border: 10px solid #f3f3f3;
  border-top: 10px solid #4285CE;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  animation: spin 0.7s linear infinite; }
@keyframes spin {
  0% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(360deg); }
}