#newnote {
		background-color: #D8D8D8; /* Lightest Grey*/
		}

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

#newnote ul { 
		all: unset;
		list-style-type: none;
}
#newnote > div:nth-child(3) > ul > li{ 
		margin-bottom: 1em; /* Creates seperation between Major Titles Only */
}
#newnote .title {
		color: red;/*#333;*/ 
		font-weight: bold;
		background-color: #C4C4C4; /* -Light  */
		display: flex;
		justify-content: space-between;
}
#newnote .item {
		color: blue;/*#333;*/ 
		font-weight: bold;
		background-color: #C4C4C4; /* -Light  
		display: flex;
		justify-content: space-between;*/
}

#newnote .title > div {
		display: flex;
}
#newnote div.toggle {
		margin-left: 20px;
		color: #333; 
		font-weight: bold;
		background-color: #C4C4C4; /* -Light  */
		
}
#newnote .toggle ul li{/*
		display: flex;
		justify-content: space-between;*/
}
#newnote .container-action {
		cursor: pointer;
    margin-right: .2em;
    flex-wrap: wrap;
    align-items: center;
    padding: 0.5em;
    background-color: #969696; /* -Middle */ 
    display: flex;
    justify-content: center;
}

#newnote .click-toggle-hide {background-image: url("../png/hide.png");}
#newnote .click-toggle-show {background-image: url("../png/show.png");}
#newnote .click-remove-title {background-image: url("../png/remove.png");}
#newnote .click-item-to-title {background-image: url("../png/add.png");}
#newnote .click-remove-item {background-image: url("../png/remove.png");}
button.touch-mouse-reorder {background-image: url("../png/up-and-down.png");}
/* Base style for the reorder handle button */
button.touch-mouse-reorder {
  display: inline-block;
  width: 32px;                 /* set to the icon size you want */
  height: 32px;
  padding: 0;
  border: 0;
  background-color: transparent;
  background-image: url('../png/up-and-down.png'); /* or .png, .webp */
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px 20px;  /* scale the icon inside the button */
  cursor: grab;
  vertical-align: middle;
  -webkit-tap-highlight-color: transparent; /* nicer on mobile */
}

/* Hover / active affordances */
button.touch-mouse-reorder:hover {
  background-color: rgba(0,0,0,0.04);
}
button.touch-mouse-reorder:active {
  cursor: grabbing;
  transform: translateY(1px);
}

/* Focus outline for accessibility */
button.touch-mouse-reorder:focus {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}

/* If you want a larger clickable area without changing icon size */
button.touch-mouse-reorder .icon {
  pointer-events: none;
}
.touch-mouse-reorder {
  touch-action: none;   /* prevent default scrolling */
  -webkit-user-select: none;
  user-select: none;
}


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



#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;
		position: relative;
	}
#note li {
		margin-bottom: 1em;
		background-color: #D8D8D8; /* Lightest Grey*/
		position: relative;
	}
#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;
	}
#note .placeholder {
  background: #eee;
  border: 1px dashed #aaa;
}