@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;500&display=swap');

/**{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body{
	background: #2196F3;
	font-family: "Nunito", sans-serif;
}
*/


#notes-app-page .notes-app{
  height: calc(100% - var(--search-bar-height));
overflow: hidden;
}

#notes-app-page .notes-wrapper{
height: 100%;
width: 100%;
overflow: auto;
border-radius: 0;
}

#sidebar .notes-app{
  /*box-shadow: var(--box-shadow-outer-card);*/
  border-radius: var(--border-radius-box);
  background: rgb(255, 223, 96);
}

#sidebar .notes-wrapper{
height: 400px;
overflow: auto;
/*box-shadow: inset 0px 2px 20px 5px #d7d7d74f;*/
box-shadow: inset 0px 0px 95px 500px rgba(255, 223, 96, 0.24);
}

.notes-wrapper{
box-shadow: inset 0px 0px 95px 500px rgba(255, 223, 96, 0.24);
}

/*#notes-app-page .notes-wrapper .note-box{
grid-template-rows: auto;
}*/


.notes-wrapper{
	padding: var(--border-padding);
	height: 500px;
	width: 100%;
	background: white;
/*	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);*/
  border-radius: var(--border-radius-box);
	overflow: hidden;
}
.notes-wrapper .note-box{
display: grid;
grid-template-columns: 100%;
grid-template-rows: auto;
gap: var(--border-padding);
	height: 100%;
	width: 100%;
	position: absolute;
	overflow-y: scroll;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  padding: var(--border-padding);
  padding-bottom: 4rem;
  align-content: start;
}

.notes-wrapper .add-note-btn{
/*all: unset;*/
border-radius:100%;
position: absolute;
/*top: 85%;
right: 25px;*/
height:50px;
width: 50px;
display:flex;
justify-content:center;
align-items:center;
font-size:20px;
cursor:pointer;
bottom: 1rem;
right: 1rem;
background: rgb(255, 223, 96);
color: rgb(99,99,102);
}


.notes-wrapper .note{
height: 140px;
width: 100%;
position:relative;
/*top: 60px;
left:50%;
transform:translate(-50%,-50%);*/
background :#F9F9F9;
border-radius:10px;
/*margin-top:10px;*/
box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px;
padding: 0.25rem 1rem;
/*margin-bottom:10px;*/
cursor: pointer;
/*border-left: 6px solid #ededed;*/
border: 0;
}

.notes-wrapper .note-title,.note-body{
/*white-space:nowrap;*/
text-overflow:ellipsis;
overflow: hidden;
margin-right:15px;
/*font-size:17px;*/
position: relative;
top: 10px;
/*left: 10px;*/
color: rgb(99,99,102);
}
      

.notes-wrapper .note-body{
color: rgb(99,99,102);
/*font-size:1rem;*/
/*font-weight: 400;*/
margin-top: 18px;
top: 0px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}


.notes-wrapper .date, 
/*.fa-ellipsis, */
.notes-wrapper .ellipsisIcon{
position: absolute;
/*left: 17%;*/
/*bottom: 0;*/
/*transform:translate(-50%, -50%);*/
bottom: 0.5rem;
color: rgb(99,99,102);
font-size:11px;
}

.notes-wrapper .note-box .handle{
	position: absolute;
	bottom: 0.5rem;
	right: 1rem;
}

.notes-wrapper .date{
	font-weight: 400;
	font-family: var(--font-apple-system);
}


.notes-wrapper .h-line{
/*margin-top:30px;*/
bottom: 1.5rem;
background: rgb(99,99,102);
width: calc(100% - calc(2 * var(--border-padding)));
}


/*.notes-wrapper .fa-ellipsis,*/
 .notes-wrapper .ellipsisIcon{
  /*left: calc(100% - 1rem);*/
bottom: 0.5rem;
font-size: 1rem;
cursor: pointer;
right: 2.5rem;
  height: 1rem;
  width: 1rem;
}

.notes-wrapper .edit-note{
height:100%;
width: 100%;
background: #F9F9F9;
position:absolute;
top: 50%;
left:-100%;
transform:translate(-50%, -50%);
z-index:1;
transition:all.2s;
padding: var(--border-padding);
}

.notes-wrapper .backArrowIcon{
color: var(--heading-font-color);
/*font-size:22px;*/
/*position:absolute;
top: 15px;
left: 23px;*/
cursor:pointer;
}

.notes-wrapper .input-control{
position: sticky;
top: 0;
/*padding: 1.5rem 1.5rem 0;*/
background: #F9F9F9;
z-index: 9;
}

.notes-wrapper textarea{
all:unset;
position:relative;
top: 30px;
left: 20px;
width: 100%;
caret-color:orange;
color: rgb(99,99,102);
}

.notes-wrapper .backArrowIcon,.notes-wrapper .note-title-input{
	font-size: 1.25rem;
} 

.notes-wrapper .note-title-input{
/*top: 0.75rem;*/
/*left: 20px;*/
top: 0;
left: 0;
padding: 0 !important;
height: 45px;
/*font-weight: 500;*/
overflow: hidden;
color: var(--heading-font-color);
}



.notes-wrapper .note-body-input{
/*top: 55px;*/
top: 0;
margin-bottom:10px;
/*height: 380px;*/
color: var(--heading-font-color);
padding: 0 !important;
height: 250px;
overflow: auto;
/*font-weight: 400;*/
left: 0;
}

::placeholder{
color: lightgray;
}

.notes-wrapper .menu{
/*height: 40px;*/
/*width: 80px;*/
border-radius: var(--border-radius-button);;
box-shadow: rgba(50,50,93,0.25) 0px 6px 12px -2px, rgba(0,0,0,0.3) 0px 3px 7px -3px;
background :white;
position:absolute;
margin-top:-23px;
right: 2rem;
color:grey;
font-size: 12px;
transform:scale(0);
transform-origin:bottom right;
transition:all .2s;
border: 1px solid lightgrey;
padding: 0.5rem 0.5rem;
}


.notes-wrapper .settings{
/*height: 25px;*/
width: 25px;
position:absolute;
right: 0.5rem;
bottom: -3px;
bottom: 1.2rem;
}

/*.notes-wrapper .settings:hover .menu, */
.notes-wrapper .settings.show .menu {
transform:scale(1);
}




.notes-wrapper .menu span{
/*position: absolute;
top: 5px;
left: 5px;*/
white-space:nowrap;
cursor: pointer;
}

.notes-wrapper .menu span i{
	margin-right: 0.25rem;
}

.notes-wrapper .menu span:nth-child(2){
top: 22px;
}

/*.notes-wrapper .fa-note-sticky,*/
.notes-wrapper .no-notes-message,
.notes-wrapper .note-sticky
{
/*font-size:20px;*/
position: absolute;
top: 50%;
left: 50%;
transform:translate(-50%,-50%);
white-space:nowrap;
color:grey;
}

.notes-wrapper .note-sticky{
top: 40%;
font-size: 40px;
}

/*.notes-wrapper .fa-note-sticky{
top: 40%;
font-size:60px;
}*/



#notes-app-page{
	background: rgb(255, 223, 96);
}