#indicator {
	position: absolute;
	z-index: 10000;
	top: 10px;
	right: 10px;
	width: 20px;
	height: 20px;
	color: white;
}


/* phone */
/*------------------------------
// 	itemsperrow: 3
//	containerwidth: 357
//	thumbsize: 100
-------------------------------*/
@media only screen 
  and (max-width: 550px) 
 {
 
	#indicator{ background-color: red;}
	
	
 }


/* tablet and standard laptop */
/*------------------------------
// 	itemsperrow: 4
//	containerwidth: 500
//	thumbsize: 180
-------------------------------*/
@media only screen 
  and (min-width: 551px) 
  and (max-width: 800px) 
 {
 
	#indicator{ background-color: green;}
	
	
 }

/* largish */
/*------------------------------
// 	itemsperrow: 5
//	containerwidth: 733
//	thumbsize: 180
-------------------------------*/
@media only screen 
  and (min-width: 801px) 
  and (max-width: 1047px) 
 {
 
 	#indicator{ background-color: yellow;}
 
 	body {
 		font-size: 34px;
 	}
 
	
	#outputarea, #notesheader, #inputarea{
		padding-right: 8vw;
		padding-left: 8vw;
	}
	 #inputarea{
	 	display: flex;
	 	align-items: space-between;
	 }
	 #noteinput {
		font-size: 34px;
		align-self: stretch;
	}
	#content{
	}
	.note {
		

	}
	.noteimage {
	  width: 100%;
	  height: auto;
	}
	#inputarea{
		height: 20vw;
		font-size: 34px;
	}
	#clipboard_paste, #cameraicon{
		width: 80px;
		height: 80px;
		background-size: 50px auto;
	}
	#capture-button {
		width: 80px;
		height: 80px;
		flex-shrink: 0;
		flex-grow: 0;
		background-color: #fff;

		border-radius: 50%;
	}
	
	
	#capture-video{
		width: 800px;
		height: 800px;
		background-color: #000;
		margin-bottom: 1.5em;
	}
 }


/* extra large */
/*------------------------------
// 	itemsperrow: 6
//	containerwidth: 1030
//	thumbsize: 180
-------------------------------*/
@media only screen 
  and (min-width: 1048px) 
 {
 
	#indicator{ background-color: blue;}
	
	
 }


@media only screen 
  and (max-height: 600px) 
 {
 
	#listitemname {
	padding-top: 10px;
		margin-top: 0px;
		font-size: 11px !important;
	}
	
	#listitemdescription {
		margin-top: 0px;
		font-size: 9px!important;
	}
	
	#bigpic {
		max-height: 60vh;
	}
 }
@media only screen 
  and (min-height: 500px) 
   and (max-height: 699px) 
 {
 
	#listitemname {
		padding-top: 20px;
		margin-top: 0px;
		font-size: 17px !important;
	}
	
	#listitemdescription {
		margin-top: 10px;
		font-size: 15px!important;
	}
	
	
 }


@media only screen 
  and (min-height: 700px) 
   and (max-height: 999px) 
 {
 
	#listitemname {
		padding-top: 30px;
		margin-top: 0px;
		font-size: 20px !important;
	}
	
	#listitemdescription {
		margin-top: 10px;
		font-size: 17px!important;
	}
	
	
 }


@media only screen 
  and (min-height: 1000px) 
 {
 
	#listitemname {
		padding-top: 30px;
		margin-top: 0px;
		font-size: 20px !important;
	}
	
	#listitemdescription {
		margin-top: 10px;
		font-size: 17px!important;
	}
	
	
 }



#indicator { display: none; }