:root {
	--red:#d64045;
	--yellow:#d9af04;
	--green:#43aa8b;
	--blue:#118AB2;
	
	--f1: 2em;
	--f2: 1.5em;
	--f3: 1em;
	
	--shadow:2px 1px 5px #00000044;
}

@font-face {
	font-family:Raleway;
	src:url(source/font/Raleway.ttf);
}

* { font-family:Raleway; padding:0; margin:0; touch-action:manipulation; outline:none; }

::-webkit-scrollbar { width:10px; height:10px; background:transparent; }
::-webkit-scrollbar-thumb { border-radius:50px; background-color:#7775; }


ul { list-style:none }
a { text-decoration:none; }

strong { margin:0 5px; }
big { font-size:var(--f1); }

pre { white-space:pre-wrap; }

/*
.fa-trash { color:var(--red); }
*/


button { display:inline-block;margin:0;padding:0;border:none;background:transparent;cursor:pointer }


.btn-std { 
	padding:7px 25px;
	border-radius:50px;
	font-size:1em;
	background-color:#ffffffee;
	box-shadow:var(--shadow);
}

.btn-icon { 
	padding:5px 10px;
	font-size:var(--f3);
}

.btn-icon-circle { 
	padding:5px;
	width:40px;
	height:40px;
	font-size:1.5em; 
	border-radius:50%;
	background-color:#ffffffee;
	box-shadow:var(--shadow);
}


.red { color:var(--red); }
.blue { color:var(--blue); }
.green { color:var(--green); }
.yellow { color:var(--yellow); }


.warn {
	position:absolute;
	bottom:0;left:0;right:0;
	white-space:pre-wrap;
	padding:10px;
	background-color:var(--red);
	color: #fff;
	opacity:1.0;
	transition:opacity 1s;
}




.app {
	position:fixed;
	left:0;right:0;top:0;bottom:0;
	font-size:var(--f3);
	background:#dae2e8;
	background-size:cover;
	background-repeat:no-repeat;
	background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIA0KCSB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiANCgkgdmlld0JveD0iMCAwIDU0MCA5NjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiID4NCgk8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSg1NDAsIDApIj4NCgkJPHBhdGggZmlsbD0iI2ZmZmZmZjdmIiBkPSJNMCA0NTlDLTI3LjkgMzk2LjYgLTU1LjggMzM0LjEgLTEwNy41IDMzMUMtMTU5LjMgMzI3LjggLTIzNC45IDM4NCAtMjY5LjggMzcxLjNDLTMwNC42IDM1OC43IC0yOTguNyAyNzcuMyAtMzEzLjEgMjI3LjVDLTMyNy41IDE3Ny42IC0zNjIuMiAxNTkuMyAtMzg5LjkgMTI2LjdDLTQxNy42IDk0IC00MzguMyA0NyAtNDU5IDBMMCAwWiIgLz4NCgkJPHBhdGggZmlsbD0iI2ZmZmZmZmMwIiBkPSJNMCAyNDMuNEMtMjAgMjQ1LjkgLTQwLjEgMjQ4LjUgLTU0LjIgMjM3LjNDLTY4LjIgMjI2LjEgLTc2LjMgMjAxLjEgLTkyLjQgMTkxLjlDLTEwOC41IDE4Mi43IC0xMzIuNyAxODkuMyAtMTQwIDE3NS41Qy0xNDcuMiAxNjEuNyAtMTM3LjUgMTI3LjYgLTEzNC41IDEwNy4yQy0xMzEuNCA4Ni45IC0xMzUuMSA4MC41IC0xNTUuOSA3NS4xQy0xNzYuNyA2OS43IC0yMTQuNiA2NS4zIC0yMzIgNTNDLTI0OS41IDQwLjYgLTI0Ni40IDIwLjMgLTI0My40IDBMMCAwWiIgLz4NCgk8L2c+DQoJPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCwgOTYwKSI+DQoJCTxwYXRoIGZpbGw9IiNmZmZmZmY3ZiIgZD0iTTAgLTQ1OUMzOS43IC00MzEuNCA3OS4zIC00MDMuNyAxMjYuNyAtMzg5LjlDMTc0LjEgLTM3Ni4yIDIyOS4xIC0zNzYuMiAyNDkuMiAtMzQzQzI2OS4zIC0zMDkuOCAyNTQuNSAtMjQzLjMgMjg3LjIgLTIwOC43QzMxOS45IC0xNzQgNDAwIC0xNzEuMyA0MzYuNSAtMTQxLjhDNDczLjEgLTExMi40IDQ2NiAtNTYuMiA0NTkgMEwwIDBaIiAvPg0KCQk8cGF0aCBmaWxsPSIjZmZmZmZmYzAiIGQ9Ik0wIC0yMjkuOUMxMS4yIC0yMjkuOSAyMi40IC0yMjkuOSAzMi4xIC0yMjMuMkM0MS44IC0yMTYuNSA1MC4xIC0yMDMuMiA1NS41IC0xODlDNjAuOSAtMTc0LjggNjMuNSAtMTU5LjcgNzAuMiAtMTUzLjdDNzYuOSAtMTQ3LjggODcuOCAtMTUwLjkgOTYuNSAtMTUwLjJDMTA1LjIgLTE0OS40IDExMS43IC0xNDQuNiAxMjQuOCAtMTQ0QzEzNy44IC0xNDMuMyAxNTcuNCAtMTQ2LjcgMTU1LjcgLTEzNC45QzE1My45IC0xMjMuMSAxMzAuOCAtOTUuOSAxMzYuNyAtODcuOUMxNDIuNiAtNzkuOCAxNzcuNiAtOTAuOCAxOTYuOSAtODkuOUMyMTYuMiAtODkuMSAyMTkuOCAtNzYuNSAyMjAuNSAtNjQuOEMyMjEuMyAtNTMuMSAyMTkuMiAtNDIuMyAyMjAuMiAtMzEuN0MyMjEuMyAtMjEgMjI1LjYgLTEwLjUgMjI5LjkgMEwwIDBaIiAvPg0KCTwvZz4NCjwvc3ZnPg);
}

.app > div { width:100%;height:100%;display:flex;flex-wrap:nowrap;flex-direction:column;justify-content:space-evenly;align-items:stretch; }

.app > .over { position:fixed;left:0;top:0;background-color:#222a; }

.app .toolbar {
	display:flex;
	align-content:flex-start;
	flex-direction:row;
	flex-wrap:nowrap;
	justify-content:space-between;
	align-items:stretch;
}
.app .toolbar > div { display:flex;flex:1 auto; align-items:center; padding:5px; }
.app .toolbar > div:first-child { justify-content:flex-start; max-width:20%; }
.app .toolbar > div:nth-child(2) { justify-content:center; max-width:60%; }
.app .toolbar > div:last-child { justify-content:flex-end; max-width:20%; }

.app .views { height:100%; overflow-y:auto }
.app .view { min-height:100%; }

.app .view > div,
.app .view > center { padding:10px; }

.app > div:not(div:last-child) { filter:blur(3px); }




.lst {
	text-align:left;
	overflow-y:auto;
	
	border-radius:7px;
}

.lst li {
	display:flex;
	flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
	
	padding:7px;
	margin:7px;
	border-radius:7px;
	cursor:pointer;
	
	background:#ffffffee;
	box-shadow:var(--shadow);
}


.lst li > button {
	font-size:var(--f3);
}

.lst li:nth-of-type(odd) { background:#ffffff77; }


.lst-price { display:flex;flex-wrap: nowrap;justify-content: space-between;align-items: center; }
.lst-price > div,
.lst-price > div > * { padding:5px; }


ul .biggest { color:#fff; background-color:var(--red) !important; }
ul .lowest { color:#fff; background-color:var(--green) !important; }
ul .mean { color:#fff; background-color:var(--yellow) !important; }




.slct-lst {
	text-align:left;
	overflow-y:auto;
	border-radius:7px;
}

.slct-lst input { display:none; }

.slct-lst li {
	display:block;
	padding:1px;
	white-space:nowrap;
}
	
/*
.slct-lst li {
	display:flex;
	flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
	
	padding:7px;
	margin:7px;
	border-radius:7px;
	cursor:pointer;
	
	background:#ffffffee;
	
	box-shadow:var(--shadow);
}
*/

.slct-lst label {
	display:inline-block;
	white-space:pre-wrap;
	width:-webkit-fill-available;
	padding:7px;
	margin:7px;
	border-radius:7px;
	cursor:pointer; 
	color:#333;
	box-shadow:var(--shadow);
}

.slct-lst input:checked + label {
	border:1px solid var(--blue);
	color:var(--blue);
}

.slct-lst li:nth-of-type(odd) > label { background:#fafafa; }






.input {display:inline-block;padding:10px;border-radius:60px;border:1px solid #777;background:#fff;transition:border .5s;}
.input input { border:none;min-width:200px;background:transparent;outline:none;margin:0 5px;padding:3px 0;}

.search {display:inline-block;padding:10px;border-radius:60px;border:1px solid #777;background:#fff;transition:border .5s;}
.search input { border:none;min-width:200px;background:transparent;outline:none;margin:0 5px;padding:3px 0;}

/*.search button { padding:0 5px;color:var(--blue);}*/

.keywords { overflow-x:auto; white-space:nowrap; }
/*.keywords input[type=radio] { display:none; }*/
.keywords label { margin:5px; display:inline-block; padding:5px 7px; cursor:pointer; border-radius:30px; border:1px solid #000; background:#fff; }
/*.keywords input:checked + label { background:#000; color:#fff; }*/




.keyboard table {
	width:100%;
	padding:5px;
	table-layout:fixed;
	border-spacing:5px;
	border-radius:5px;
	border:1px solid #77777744;
}

.keyboard td {
	cursor:pointer;
	padding:10px;
/*	font-size:1.25em; */
	font-size:var(--f2);
	text-align:center;
	background-color:#77777711;
	border-radius:5px;
	transition:filter .3s;
}

.keyboard td[data-key=erase]{ color:#fff; background-color:var(--yellow); }

.keyboard td[data-key=confirm]{ color:#fff; background-color:var(--green); }

.keyboard td:hover { filter:brightness(1.25); }




.item-setting center {
	padding:10px;
}

.item-setting center > * {
	margin:0 10px;
}
	

.card,
.card-red,
.card-green { margin:10px 20px; padding:5px; background:#ffffff77; border-radius:7px; box-shadow:var(--shadow); }

.card pre { padding:5px; white-space:pre-wrap; }

.card-green { background-color:var(--green); color:#fff; }
.card-red { background-color:var(--red); color:#fff; }

.card-red center,
.card-green center {
	padding:10px 5px;
}

.card-red pre,
.card-green pre {
	padding:7px;
	margin: 7px 0;
	color:#000;
	white-space:pre-wrap;
	background-color:#ffffffaa;
	border-radius:7px;
}




.loading-spinner { display:inline-block; text-align:center }

.loading-spinner::after{ 
	content:"";
	display:inline-block;
	width:50px;height:50px; 
	border-radius:50%;
	border:5px solid transparent;
	border-top-color:var(--blue); 
	animation:loading-spinner linear infinite; 
	animation-duration:.85s
}

@keyframes loading-spinner { 
	from { transform:rotate(0deg); }
	to { transform:rotate(360deg); }
}



.frame {
	position:fixed;left:0;right:0;top:10%;
	margin:auto;
	background:white;
	border-radius:10px;
	box-shadow:2px 3px 15px #191919c0
}

.frame .main {display:block;overflow:auto;padding:5px;scrollbar-width:thin;}

.frame .header,
.frame .footer {
	padding:7px;
	display:flex;
	flex-wrap:nowrap;
	justify-content:space-between;
	align-items:center;
}

/*
.frame > .header { flex-direction:row; }
.frame > .footer { flex-direction:row-reverse; }
*/


.frame .header button,
.frame .footer button { font-size:var(--f5); }

.frame .header:first-child{
	border-top-left-radius:10px;
	border-top-right-radius:10px;
	border-bottom:1px solid #ddd;
}

.frame .footer:last-child {
	border-bottom-left-radius:10px;
	border-bottom-right-radius:10px;
	border-top:1px solid #ddd;
}




@media only screen and (min-width:740px) {
	
	.view > * { margin:0 20%; }
	
}


@media only screen and (min-width:920px) {
	
	.view > * { margin:0 25%; }
	
}