:root{
	--background-color: #f8f8f8;
	--panel-background-color: #017d93;
    --text-color: #333;
	
    --meta-color: #ac5942;
	--sub-panel-background-color: #e7e7e7;
	
	--list-color:black;
	
	--items-background-color: #fff;
	
	--items-border-color: #ededed;
	--item-hover-background-color: #ededed;
	--category-hover-background-color: #ededed;
	--date-color: #454545;
	
	--settings-item-border-color: #dbdbdb;
	
	--title-box-color: #333;
	
	--notification-border-color: #bdbdbd;
	
	--list-right-border-color: #d5d5d5;
}

/* Dark Theme */
html[data-theme="dark"] {
    --background-color: #2a3035;
	--panel-background-color: #202329;
	--text-color: white;
	
	--meta-color: #787c81;
	--sub-panel-background-color: #202329;
	--list-color:#ededef;
	
	--items-background-color: #202329;
	--items-border-color: #3a404a;
	--item-hover-background-color: #202329;
	--category-hover-background-color: #2a3035;
	--date-color: #787c81;
	--settings-item-border-color:#3a404a;
	
	--title-box-color: #787c81;
	--notification-border-color: black;
	
	--list-right-border-color: #202329;
}

html,body{padding:0;margin:0;}
body{font-family: Arial, sans-serif; font-size:16px; color:var(--text-color); background-color:var(--background-color); -webkit-user-select:none; -webkit-tap-highlight-color:transparent;}
a{text-decoration:none; color:gray;}
#container{position:absolute; width:100%; height:100%;}

/* Action bar */
#panel{position:absolute; display:flex; flex-direction:row; justify-content:space-between; align-items:center; width:inherit; height:45px; overflow:hidden; background-color:var(--panel-background-color); color:white; text-align:center; cursor:default;}
#panel-bg{width:inherit; height:45px;}
#btn{width:45px; height:45px; cursor:pointer; display:flex; justify-content:center; align-items:center; flex-shrink:0; transition:transform 1s ease;}
#btn:hover{opacity:0.7;}
#btn img{max-width:100%;}
.rotateBtn{transform:rotate(360deg);}
#panel .title{font-weight:500px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}

/* List of notes */
#list{width:100%; height:100%; color:var(--list-color);}
#list #items{height:calc(100% - 90px); overflow-y:auto; -webkit-overflow-scrolling:touch;}
#list #items #note{display:flex; flex-direction:row; justify-content:space-between; align-items:center; cursor:pointer; height:44px; border-bottom:1px solid var(--items-border-color); overflow:hidden;}
#list #items #note:hover{background-color:var(--item-hover-background-color);}
#list #items #note #title{margin-left:8px; margin-right:4px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
#list #items #note #date{margin-right:10px; margin-left:4px; color:var(--date-color); font-size:13px; white-space:nowrap; text-align:right;}
#list #search-block{display:none; width:calc(100% - 135px);}
#list input[type=text]{padding:5px 10px; max-width:calc(100% - 26px); border:1px solid var(--settings-item-border-color); border-radius:8px; font-size:16px; outline:none; background-color: var(--items-background-color); color:var(--text-color);}
#list input[type=text]:hover,#list input[type=text]:active,#list input[type=text]:focus{border:1px solid #3498db;}

/* Note editor */
#editor{display:none; width:100%; height:100%;}
#editor #page{height:calc(100% - 90px);}
#meta{display:flex; flex-direction:row; justify-content:space-between; align-items:center; color:var(--meta-color); height:32px; width:100%; cursor:default; overflow:hidden; white-space:nowrap;}
#meta #DaysAgo{margin-left:12px;}
#meta #DateNote{margin-right:12px;}
#note-categories {
	display: none;
	position: absolute;
	height: 200px;
	overflow-y: scroll;
	bottom: 50px;
	right: 10px;
	border-radius: 5px;
	background-color: var(--items-background-color);
	transition: opacity 0.3s;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
	border: 1px solid var(--settings-item-border-color);
	color: var(--list-color);
}
#note-categories #item{display:flex;
    justify-content:space-between;
    align-items:center;
    cursor:pointer;
    height:32px;
	padding:4px 8px;
	text-align:center;
    border-bottom:1px solid var(--items-border-color);
}
#note-categories #item:hover{background-color:var(--category-hover-background-color);}
#note-categories #item:last-child {border-bottom:none;}


#editor #memo{display:block; width:calc(100% - 24px); height:calc(100% - 45px); padding:4px 0; margin:0 auto; background-color:transparent; border:none;}
textarea{font-weight:normal; font-size:17px; font-family: Arial, sans-serif; color:var(--text-color); overflow-y:auto; -webkit-overflow-scrolling:touch; resize:none; border-radius:0; -webkit-tap-highlight-color:rgba(0,0,0,0);}
textarea:focus{outline:none;}
.sub-panel{display:flex; flex-direction:row; justify-content:space-between; align-items:center; height:45px; overflow:hidden; text-align:center; cursor:default;}

/* Settings */
#settings{display:none; width:100%; height:100%;}
#settings #page{height:calc(100% - 45px); overflow-y:auto; -webkit-overflow-scrolling:touch;}
#settings #page #items:first-child{margin-top:3px;}
#settings #items{padding:10px 0; margin:0 auto; width:92%; overflow:hidden; font-size:14px;}
#settings #items #item{display:flex; flex-direction:row; justify-content:space-between; align-items:center; text-overflow:ellipsis; overflow:hidden; white-space:nowrap; border:1px solid var(--settings-item-border-color); padding:14px 8px; background-color:var(--items-background-color); border-top:none; color:var(--text-color);}
#settings #items #item:first-child{border-top-left-radius:15px; border-top-right-radius:15px; border:1px solid var(--settings-item-border-color);}
#settings #items #item:last-child{border-bottom-left-radius:15px; border-bottom-right-radius:15px;}
#settings #items #item .title{margin-left:4px;}
#settings #items #item #control{text-align:right; margin-right:4px;}
#settings .titlebox{padding:5px 0; margin:0 auto; width:87%; font-size:14px; color:var(--title-box-color);}
#settings input[type=text],#settings input[type=number]{border:none; padding:0 7px; background-color:transparent; outline:none; font-size:14px; -webkit-tap-highlight-color:rgba(0,0,0,0); text-align:right; color:var(--text-color);}
#settings input[type=text]:focus,#settings input[type=number]:focus{background-color:transparent;}
#settings input::-webkit-outer-spin-button,#settings input::-webkit-inner-spin-button{-webkit-appearance: none; margin:0;}
#settings input[type=number]{-moz-appearance: textfield;} /* Firefox */
.switch{position:relative; display:inline-block; width:40px; height:20px; background-color:#7e7e7e; border-radius:20px; top:3px;}
.switch::after{content:''; position:absolute; width:18px; height:18px; border-radius:50%; background-color:white; top:1px; left:1px;}
.checkbox:checked + .switch::after{left:20px;}
.checkbox:checked + .switch{background-color:#3498db;}
.checkbox{display:none;}
#settings textarea{padding:5px; max-width:100%; border:1px solid var(--settings-item-border-color); border-radius:8px; font-size:14px; outline:none; background-color: var(--items-background-color); }
#settings textarea:hover,#settings textarea:active,#settings textarea:focus{border:1px solid #3498db;}

/* Notification */
#notification{position:absolute; bottom:0; width:100%; padding: 15px 0; visibility:hidden; font-size:14px; background-color:var(--sub-panel-background-color); text-align:center; border-top:1px solid var(--notification-border-color);}
#notification.show{visibility:visible; animation:fadein 0.5s, fadeout 0.5s 3s;}
@keyframes fadein{from {opacity: 0;} to {opacity: 1;}}
@keyframes fadeout{from {opacity: 1;} to {opacity: 0;}}

#sync-progress{display:none; position:absolute; bottom:0; width:100%; height:4px; background-color:blue; background:linear-gradient(to left, transparent, transparent, #23A6D5, transparent, transparent); background-size:200% 200%; animation:move-background 2s linear infinite;}	
@keyframes move-background{0% {background-position:100% 0%} 100% {background-position:-100% 0%}}

/* Layout switching animation */
#list,#editor,#settings{animation:fadeInFromNone 0.5s ease-out;}
@keyframes fadeInFromNone{
	0%{display:none; opacity:0;}
	1% {display:block; opacity:0;}
	100%{display:block; opacity:1;}
}