/*IF on ios device active cant use need add ontouchstart="" in html div*/
/*html{
	scroll-behavior: smooth;
}*/
body{
	margin: 0;
	font-family: 'Noto Sans TC' , 'Open Sans', Arial, 'sans-serif';
	color: #333;
	overflow-x: hidden;
}
a {
	text-decoration: none;
	color: #333;
}

input{
	width: 100%;
	background-color: transparent;
	border: none;
	outline: none;
	padding: 0;
}
textarea{
	width: 100%;
	height: 100%;
	background-color: transparent;
	border: none;
	outline: none;
	resize: none;
	white-space: pre-line;
}
h1,h3,h4 {
	margin: 0;
}
h4{
	margin-bottom: 5%;
}
.blur-bg{
	/*display: none;*/
	visibility: hidden;
	opacity: 0;
	position: fixed;
	top: 0;
	right: 0;
	z-index: 30;
	width: 100%;
	height: 100%;
	/*width: 0;*/
	background-color: rgb(255,255,255,0.5);
 	backdrop-filter: saturate(100%) blur(20px);
 	-webkit-backdrop-filter: saturate(100%) blur(20px);
 	transition: 0.3s;
}

/*scroll bar*/
body ::-webkit-scrollbar {
  width: 10px;
}
body ::-webkit-scrollbar-thumb {
  background: #9D5C2B; 
  border-radius: 10px;
  /*滑桿透明邊*/
  border: 2px solid rgba(0, 0, 0, 0);
  background-clip: padding-box;
}
body ::-webkit-scrollbar-thumb:hover {
  background: #c87637;
  background-clip: padding-box; 
}

.bookmark-box-cont div,
.bookmark-card-cont{
	width: 100%;
	white-space:nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

#PWDcont,#error{
	height: 80vh;
}
#PWDcont .login-cont,
.error-img{
	width: 40%;
	/*margin: 30% auto;*/
	margin: 0 auto;
	padding: 0;
}
.pwdcont-text,
.error-img div{
	text-align:center;
	font-size: 20px;
	margin-bottom: 5%;
}
#PWDcont .login-border{
	margin-bottom: 15%;
}

.error-img img{
	width: 100%;
}
.error-img div{
	margin-top: 5%;
	margin-bottom: 0;
}


@media screen and (min-width: 1301px) {
	body,input,textarea{
		font-size: 16px; /*@media screen*/
	}
}
@media screen and (min-width: 1024px) and (max-width: 1300.9px) {
	body,input,textarea{
		font-size: 14px; /*@media screen*/
	}
}
@media screen and (min-width: 721px) and (max-width: 1023.9px) {
	body,input,textarea{
		font-size: 13px; /*@media screen*/
	}
}
@media screen and (min-width: 721px) {

}
@media screen and (max-width: 720.9px) {
	#card,
	.main-cont-nowrap,
	.bookmark-view-select {
		overflow-x: scroll;
		overflow-y: hidden;
	    white-space: nowrap;
	}
	#card::-webkit-scrollbar,
	.main-cont-nowrap::-webkit-scrollbar,
	.bookmark-view-select::-webkit-scrollbar {
		display: none;
	}
}
@media screen and (min-width: 360px) and (max-width: 720.9px) {
	body,input,textarea{
		font-size: 13px; /*@media screen*/
	}
}
@media screen and (max-width: 359.9px) {
	body,input,textarea{
		font-size: 12px; /*@media screen*/
	}
}