#newnote {
		background-color: LightGray; /*Gainsboro */
		}
@media (max-width: 480px) {
  #newnote {
    padding-top: 40px; /* or whatever max height your wrapped menu reaches */
  }
}

#newnote.container-action {
		display: flex;
		flex-wrap: wrap;
		align-items: center; 
		padding: 0.5em;
		background-color: #a9a9a9; /* Dark Grey */
	}

#newnote ul li { /* Title and all items */
	margin: 1em 0 1em 0; 
	background-color: lightgray; 
	padding: 0 .5em 0 .5em;
}


#newnote ul > li > span { 
		color:green; 
		border:1px solid black;
	}
	
#newnote .toggle {
		margin: 1em 0 1em 0; 
}

#newnote .text-value {
	white-space:pre-wrap; 
	color:blue; 
	display:inline-block; 
	min-width:30px; 
	max-width:90%; 
	background-color:lightgray; 
	margin:.5em;                
}

#newnote  button.removeLine.click-remove {
	margin-left: auto;
}

#newnote .title {
		color: #333; 
		font-weight: bold;
		background-color:#a9a9a9; 
		text-align:center;
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 8px;


}
#newnote .item {
	font-weight: normal;
  color: #555;
	display: flex;
	justify-content: space-between;

}

#newnote form.container-action {
		cursor: pointer;
    margin-right: .2em;
    flex-wrap: wrap;
    align-items: center;
    padding: 0.5em;
    background-color: #a9a9a9;
    display: flex;
    justify-content: center;
}

#newnote button[class^="click"] {/* Starts with click */
	margin: 1em;
  cursor: pointer;
}

#newnote form:not(#newTitleForm) input {
	font-size: .5em;
	width: 4em;
}
#newnote form:not(#newTitleForm) input:focus {
	font-size: clamp(14px, 2vw, 20px);
	width: 100%;
}

#newnote ul { 
		all: unset;
}



#note {
		background-color: #D8D8D8; /* Lightest Grey*/
		}
@media (max-width: 480px) {
  #note {
    padding-top: 45px; /* or whatever max height your wrapped menu reaches */
  }
}

#note .container-action {
		display: flex;
		flex-wrap: wrap;
		align-items: center; 
		padding: 0.5em;
		background-color: #969696; /* Middle Grey*/
	}
	
#note ul { 
		all: unset;
	}
#note li {
		margin-bottom: 1em;
		background-color: #D8D8D8; /* Lightest Grey*/
	}
#note span.newItem { 
	display: inline-block;       /* make it behave like an input box */
  min-width: 50px;            /* set a width similar to inputs */
  padding: 4px 8px;            /* inner spacing */
  border: 1px solid #ccc;      /* light border */
  border-radius: 4px;          /* rounded corners */
  background-color: #fff;      /* white background */
  font-family: inherit;        /* match surrounding text */
  font-size: 14px;             /* typical input font size */
  line-height: 1.4;            /* vertical alignment */
  vertical-align: middle;      /* align with text */
  cursor: text;                /* show text cursor */
 }
#note .toggle {
		margin-left: 2em; 
		list-style-type: none;
	}