@charset "UTF-8"; 
/*
@font-face {font-family: OpenSansReg; src: url(/fonts/woff/OpenSans/OpenSans-Regular.woff2) format('woff2');; font-display: swap;}
@font-face {font-family: OpenSansBold; src: url(/fonts/woff/OpenSans/OpenSans-Bold.woff2) format('woff2');; font-display: swap;}
@font-face {font-family: OpenSansSemiBold; src: url(/fonts/woff/OpenSans/OpenSans-Semibold.woff2) format('woff2'); font-display: swap;}
*/
:root{
	--bg-color:#d3d3d3;
	--bg-bookmark:#a3a3a3;
	--bg-form: #d3d3d3;
	--text-color:#000;
	--func-color:steelblue;
	--cl-border: #c1c1c1;
}
*{box-sizing: border-box;}
body{
	font-family: -apple-system, system-ui, sans-serif;color:var(--text-color);margin: 0; 
}		
a{text-decoration:none; -webkit-tap-highlight-color: transparent;color:blue;}
a:visited{color:blue;}
b{font-family: OpenSansBold, -apple-system, system-ui, sans-serif;}
button[popovertarget]{outline: none; border: none;background-color: transparent;}

.conteiner{
	margin: 0 auto;padding: 0 1em 1em;width:min(768px, 100%);min-height: 100vh;	
}
h1{font-size: x-large;text-align:center; margin:0.5em 0; letter-spacing: 1px;font-weight: 500;}
h2, h3{text-align:center; margin:0.5em 0; letter-spacing: 1px;font-weight: 500;}
header{padding: 5px;}	
button, input[type='submit']{font-size: inherit; border-radius: 5px;outline: none;border: none;}	
details{transition:height .2s;margin-top: 3px;}
/* меню со типа радио ------------------------------------------ */
.menu_radio{			
	max-width: 100%; overflow-y: auto; scrollbar-width: none;
	ol{display: flex; gap: 1em;align-items: center; list-style-type: none;padding:0; margin: 5px;height:20px;}
	li{border: none;opacity: 0.4;white-space: nowrap;}
	input{display: none;}	
}
.menu_radio li:has(input:checked){opacity: unset;font-weight: 600;}
.menu_radio li:hover{cursor:pointer;}	
/* ------------------------------------------------------------ */
.menu_radio_lang{
	display: flex; gap: 1em;align-items: center;
	label{
		height: 1.2em; opacity: 0.4; white-space: nowrap;aspect-ratio: 4 / 3;
		background-position:center; background-repeat:no-repeat; background-size:cover;
	}
	input{display: none;}	
}
.menu_radio_lang label:has(input:checked){opacity: unset;}
.menu_radio_lang label:hover{cursor:pointer;}	

/* ------------------------------------------------------------ */
.menu_radio_simple{		
	padding: 0.5em 0;	
	label{background-color: #e1e1e1;border:1px solid var(--cl-border); padding: 3px;border-radius: 3px;}
	input{display: none;}	
}	
.menu_radio_simple label:has(input:checked){
	background-color: #2087db;color: white;
}
.menu_radio_simple label:hover{cursor:pointer; border-color: #2087db;}
/* ------------------------------------------------------------ */
.menu_radio_header{			
	label{
		display:block;border:1px solid transparent; padding: 3px;border-radius: 3px;
		[data-lang]{display:none;}
	}
	input{display: none;}	
}	
.menu_radio_header label:has(input:checked){
	background-color: darkorange;color: white;
}
.menu_radio_header label:hover{cursor:pointer; border-color: #2087db;}
/* дополнение к меню в виде закладок */
.bookmark{
	color:var(--text-color);overflow-x: auto; scrollbar-width: none;
	input{display: none;}		
	label{background-color: var(--bg-bookmark);border: 1px solid #d7d7d7;border-bottom: none;border-radius: 8px 8px 0 0;padding: 2px 8px;width: -webkit-fill-available;text-align: center;}	
	label:has(input:checked){background-color: var(--bg-form);color: #333;border: 1px outset #fff;border-bottom: none;
    }	
	label:hover{cursor:pointer; background-color:#b9b9b9;}
}

/* ------------------------------------------------------------ */
.but_icon{display:inline-block;box-sizing: content-box;width: 1.5em;  height: 1.5em;padding: 2px;background-size: contain;background-repeat: no-repeat;background-position: center;border: 1px solid transparent;}
.but_icon:hover{border-color: #d3d3d3;background-color: #dddddd9c;}
.icon.circle{border-radius: 50%;}

.system_but{display: inline-block;box-sizing: border-box; background-color: var(--func-color);color:white;padding: 3px 1em; font-size: small;border: none; border-radius: 4px;font-weight: normal;appearance: none;-webkit-appearance: none;}
a.system_but:visited{color:white;}
.system_but:hover{
	cursor:pointer; background-color:#4492d3;
}
.wrap_checkbox_sys{ 
	display:inline-flex;
	input{width: 1.3em; height: 1.3em;border-radius: 50%;margin: 0 4px;}	
}

p{margin: 0.3em 0;text-align: justify;text-indent: 2em;
	ul{padding-left: 2em;text-align: left;}
	li{text-indent: 0;}
}
.maxw{width:-webkit-fill-available;	}		
.bg_grey{color: black;}
.bg_blue{background: linear-gradient(0deg, #0175bb, #29a2ea);color: white;}
.but_sys{background-color: #a7a7a7;color: white;padding: 2px 4px; font-size: small;}

.inp_simple{
	outline: none;background-color: white; font-size: inherit;	border: 1px inset #d5d5d5;font-family: system-ui;	width: -webkit-fill-available;color:blue;padding: 5px;border-radius: 4px;
}
.inp_simple[disabled]{background-color: #dedede;color: #333;}
.inp_simple:focus{background-color: beige;}
.onoff_round{
	min-width:2.6em;text-align: center;background-color: var(--func-color);padding:5px;cursor:pointer;border-radius: 50%;border: 1px solid var(--bg-bookmark);color:#fff;
	input{display:none;}
}
.onoff_round:not(:has(input:checked)){background-color: unset;color: #333;}
.onoff{
	display: inline-flex;gap: 0.8em;align-items: center;background-color: lightgreen;padding:2px 0.5em;cursor:pointer;border-radius: 10px;border: 1px solid var(--bg-bookmark);
	&:after{content:'ON';}
	input{display:none;}
}
.onoff:not(:has(input:checked)){background-color:var(--bg-bookmark);&:after{content:'OFF';color:#fff;}}
.inp_tablo{
	color:blue;outline: none; font-size: inherit; border: 1px inset #fff;	font-family: system-ui;text-align: center;
}
.wrap_input{
	display: block;color: var(--text-color);margin: 0.3em 0;padding: 2px 0.5em 4px;	border-radius: 4px;border: 1px dotted #8c8c8c;	
	legend{padding: 0 0.5em;font-weight: 500;text-align:center;letter-spacing: 1px;text-wrap-style: balance;}
	fieldset{border:none; .inp_simple{padding:2px;}}
}
.wrap_input .inp_title{font-size: small;}
.wrap_input:has(input:focus), .wrap_input:has(textarea:focus), .wrap_input:has(select:focus){
	/*background-color: var(--bg-bookmark);	*/
}
.wrap_input:has(select:invalid){background-color: orange;}
.wr_sys{
	background-color: unset;border-color:var(--bg-bookmark);
	.inp_simple{
		background-color: unset;font-weight: bold;color:var(--bg-color);
		option{color:var(--text-color);}
	}
}

select:invalid{
	border-color:red;
}
#edit_price_emodji{display:block;font-size: 48px;line-height: 64px;height:64px;width: 64px;border: 1px solid #d3d3d3;text-align: center;padding: 0;color: unset;}

table{font-size: medium;margin: 0.5em;border-spacing: 0.3em;min-width: 80%;}
table caption{font-weight:bold;}
.table_report{
	width: -webkit-fill-available;border-collapse: collapse;font-size:smaller;background-color: white;
	td,th{padding:2px 0.5em;}
	td[r]{text-align:right;}
	td[nw]{text-wrap-mode: nowrap;}
	thead tr{background-color: #e3e3e3;}
	thead td{font-weight: bold;}
	tbody tr:nth-child(even){background-color: #efefef;border-bottom: 1px solid #e3e3e3;border-top: 1px solid #e3e3e3;}
	tfoot td{font-size:medium;font-weight:bold;padding-top: 1em;border-top: 1px solid #e3e3e3;}
	tbody tr:hover{background-color:lightsteelblue;cursor:default;}
}
/*dialog*/
dialog{
	background-color:var(--bg-color);width:min(100%, 768px);border: 1px solid dimgrey;overscroll-behavior: contain;margin: auto; padding:0.5em;
	.dcontent{max-height: 70vh;overflow-y:auto;}
}
#d_full_screen::backdrop{ background-color:#0000009e;}
#dialog_full{
	height: 100vh;width: min(400px, 100%);border: 4px outset grey;border-radius: 1em;margin: 0.5em auto;padding: 0;
	iframe{width:100%; height:calc(100% - 40px);border: none;margin: 0;}
	.but_close{position: absolute;bottom: 0px;right: 0px;background-color: coral;width: -webkit-fill-available;z-index: 10;    margin: 0;border-radius: 0;height: 40px;color: white;}
}
input:invalid{background-color:#ffe4e4;}
.messok{text-align: center; color: #06bc62; font-weight: bold; font-size: 3.5em;}
.zalo{background-image:url(../img_system/zalo_orig.svg);}
.tg_bg{background-image:url(../img_system/telegramm_white.svg); background-color:#2aaceb;}
.menu_mob{background-image:url(../img_system/menu_black.svg);}
.close_red{background-image:url(../img_system/close_thin_red.svg);}
.setting{background-image:url(../img_system/setting_black.svg);}
.category{background-image:url(../img_system/category.svg);}
.price{background-image:url(../img_system/price_list.svg);}
.del_red{background-image:url(../img_system/delete_red.svg);}
.sale_b{background-image:url(../img_system/sale_black.svg);}

/* ********************************************************* */
.keyboard_emoji{
	display: flex; flex-wrap: wrap; gap: 3px; font-size: x-large; max-height: 50vh; overflow-y: auto; padding: 5px;
}
.keyboard_emoji span:hover{background-color: #90bfff;cursor:default;}
.edit_list{
	padding-left:1em;
	li{
		list-style-type:none; display:flex;justify-content: space-between;
		span{padding: 1px 1em;}
	}
	li span:hover{background-color:var(--func-color); color:#fff;cursor:pointer;}
}