/*****************************************************************************/
img { max-width: 100%; max-height: 100%; }
* { margin: 0; padding: 0; }
::-webkit-scrollbar { width: 0px; background: transparent; }
-webkit-tap-highlight-color: rgba(0,0,0,0);
pointer-events: none;
button:focus{outline:0;}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none;  margin: 0; }
input[type="number"] { -moz-appearance: textfield; }
input[type="number"]:hover,
input[type="number"]:focus { -moz-appearance: number-input; }
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
/*****************************************************************************/
table tbody tr:nth-child(odd) {
    background-color: #ffffff !important;
}
th{
	line-height: 1.0;
}

td{
	line-height: 1.05;
}
/*****************************************************************************/
.noSelect{
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.darkenBG{ filter: brightness(0.7); } /* Притемняем фон */

.displayNone{ display: none; }
.displayBlock{ display: block; }
.displayInlineBlock{ display: inline-block; vertical-align: top;}
/*****************************************************************************/
:root {
	--main-color-blue:    #38a9e0;
	--bg-color-gray:      #F1F3F5; /* Cерый фон, притемняет кнопки в левом меню */
	--bg-color-lightgray: #f8f9fa; /* Светлосерый основной фон */
	--bg-color-elemlist:       #FFFFFF; /* Основной фон элементов списка */
	--bg-color-elemlist-hover: #FAFCF6; /* Hover фон элементов списка */
	--border-btn-numpad: #CECECE;
	--border-elem-list: #E1E8ED;

	--text-color-error:   #E15151;
	--text-color-accent-green: #3A9116; /* Акцентирование на тексте */

	/* ссылки и кнопки */
	--link-color-blue:        #38a9e0;
	--link-color-blue-hover:  #4E91B2;
	--link-color-blue-active: #507486;

	--link-color-green:        #73CF44;
	--link-color-green-hover:  #4e8f2d;
	--link-color-green-active: #296b06;

	/* применяются в раскрасске статусов */
	--bg-color-pink:       #F7C2C6;
	--bg-color-yellow:     #FBED5B;
	--bg-color-orange:     #F7C383;
	--bg-color-lightblue:  #C2DBF7;
	--bg-color-lightgreen: #E4F5A6;
	--bg-color-darkgreen:  #73CF44;

	--colorTextActive:  #606c76;
	--colorTextPassive: #A5A5A5;
	--colorTextTrash:   #D6A5A5;
}
/*****************************************************************************/
body {
	background-color: var(--bg-color-lightgray);
	font-family: 'Roboto', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
	margin: 0;
	padding: 0;
	min-height: 100vh;
}

.boxError{ color: var(--text-color-error); }

.linkMainColor{
	color: var(--link-color-blue);
	font-weight: bold;
	display: inline-block;
	vertical-align: top;
	cursor: pointer;
} .linkMainColor:hover{ color: var(--link-color-blue-hover);
} .linkMainColor:active{ color: var(--link-color-blue-active); }

.linkColorGreen{
	color: var(--link-color-green);
	font-weight: bold;
	display: inline-block;
	vertical-align: top;
	cursor: pointer;
} .linkColorGreen:hover{ color: var(--link-color-green-hover);
} .linkColorGreen:active{ color: var(--link-color-green-active); }

.bgPink{ background-color: var(--bg-color-pink) !important; }
.bgYellow{ background-color: var(--bg-color-yellow) !important; }
.bgOrange{ background-color: var(--bg-color-orange) !important; }
.bgLightBlue{ background-color: var(--bg-color-lightblue) !important; }
.bgLightGreen{ background-color: var(--bg-color-lightgreen) !important; }
.bgDarkGreen{ background-color: var(--bg-color-darkgreen) !important; }



.textBold{ font-weight: bold; }
.textSmall{ font-size: 14px; }
.textSmallBold{ font-size: 14px; font-weight: bold; }
.textItalic{ font-style: italic; }
.textAccentGreen{ color: var(--text-color-accent-green); }
.textError{ color: var(--text-color-error); }

.colorTextActive{ color: var(--colorTextActive) !important; }
.colorTextPassive{ color: var(--colorTextPassive) !important; }
.colorTextTrash{ color: var(--colorTextTrash) !important; }
.bgPassive{ background-color: var(--colorTextPassive) !important; }
.bgTrash{ background-color: var(--colorTextTrash) !important; }

.inlineBlock{ display:inline-block; vertical-align:top;}
.displayBlock{ display:block; }
.displayNone{ display:none; }

.hrStandart{ border:1px solid var(--border-elem-list); }

.boxFullWidth{ width: 100%; }
.boxWidth90pr{ width: 90%; }
.boxWidth80pr{ width: 80%; }
.boxWidth70pr{ width: 70%; }
.boxWidth60pr{ width: 60%; }
.boxWidth50pr{ width: 50%; }
.boxWidth45pr{ width: 45%; }
.boxWidth40pr{ width: 40%; }
.boxWidth30pr{ width: 30%; }
.boxWidth20pr{ width: 20%; }
.boxWidth10pr{ width: 10%; }
/*****************************************************************************/
.modal {
	width: 100vw;
	height: 100vh;
	background-color: rgba(0, 0, 0, 0.7);
	position: fixed;
	top: 0px; left: 0px;
	display: none;
	z-index: 10000;
}

.block_modal {
	width: 94%;
	max-width: 500px;
	height: auto;
	max-height: calc(100vh - 10px);
	border: 0px dashed red;
	border-radius: 10px;
	background-color: var(--bg-color-elemlist);
	box-shadow: 0 2px 10px rgba(0,0,0,0.1);
	padding-left: 10px;
	padding-right: 10px;
	padding-bottom: 5px;
	margin-top: 10px;
	overflow-y: auto;
}

.btn_close_modal{
	width: 100%;
	height: 22px;
	font-size: 18px;
	border: 0px dashed blue;
}

.block_info_modal{
	width: 100%;
	height: auto;
	max-height: calc(100vh - 70px);
	border: 0px dashed red;
	padding-top: 10px;
	padding-bottom: 20px;
	overflow-y: auto;
}

.ico_modal{
	width: 100%;
	height: 34px;
	border: 0px dashed red;
	overflow: hidden;
}

.title_modal{
	width: 100%;
	height: auto;
	font-size: 18px;
	font-weight: bold;
	border: 0px dashed red;
	margin-top: 10px;
}

.content_modal{
	width: 100%;
	height: auto;
	border: 0px dashed red;
	margin-top: 10px;
}

.btn_modal{
	width: 100%;
	height: auto;
	border: 0px dashed red;
	margin-top: 20px;
}
/*****************************************************************************/
.page {
	width: 100vw;
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
}
.section_page{
	display: none;
}

.block_start{
	width: 94%;
	max-width: 500px;
	height: auto;
	display: flex;
	justify-content: center;
	align-items: center;
}

.block_license {
	width: 94%;
	max-width: 500px;
	height: auto;
	border: 0px dashed red;
	border-radius: 10px;
	background-color: var(--bg-color-elemlist);
	box-shadow: 0 2px 10px rgba(0,0,0,0.1);
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 30px;
	padding-bottom: 30px;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow-y: auto;
}

.bx_logo_license{
	width: 94%;
	max-width: 220px;
	border: 0px dashed red;
	height: auto;
}

.bx_logo_title_license{
	width: 94%;
	height: auto;
	color: var(--main-color-blue);
	font-size: 14px;
	font-weight: bold;
	border: 0px dashed red;
	margin-top: -5px;
}
/*****************************************************************************/
.block_main_menu {
	width: 94%;
	max-width: 600px;
	height: auto;
	border: 0px dashed red;
	border-radius: 10px;
	background-color: var(--bg-color-elemlist);
	box-shadow: 0 2px 10px rgba(0,0,0,0.1);
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 20px;
	padding-bottom: 20px;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow-y: auto;
}

.bx_logo_main_menu{
	width: 94%;
	max-width: 180px;
	border: 0px dashed red;
	height: auto;
}

.block_ico_main_menu{
	width: 100%;
	height: auto;
	border: 0px dashed red;
	padding-top: 20px;
	padding-bottom: 20px;
}

.ico_main_menu{
	width: 30%;
	min-width: 80px;
	height: auto;
	font-size: 14px;
	font-weight: normal;
	line-height: 1.0;
	border: 0px dashed blue;
	margin-top: 15px;
	margin-bottom: 15px;
	display: inline-block;
	vertical-align: top;
	cursor: pointer;
} .ico_main_menu:hover{
	color: var(--link-color-blue-hover);
} .ico_main_menu:active{
	font-weight: bold;
	color: var(--link-color-blue-active);
}

.text_ico_main_menu{
	margin-top: 7px;
}
/*****************************************************************************/
.header{
	width: calc(100vw - 250px);
	height: 42px;
	border-bottom: 1px solid #E1E8ED;
	background-color: var(--bg-color-elemlist);
	padding-top: 6px;
	position: fixed; top: 0px; left:250px;
	overflow: hidden;
}

.ico_main_menu_header{
	width: 30px;
	height: 42px;
	font-size: 22px;
	font-weight: bold;
	border: 0px dashed red;
	display: inline-block;
	vertical-align: top;
	overflow: hidden;
	display: none;
}

.title_header{
	width: calc(100% - 170px);
	height: 42px;
	font-size: 22px;
	font-weight: bold;
	border: 0px dashed red;
	display: inline-block;
	vertical-align: top;
	overflow: hidden;
}

.icons_header{
	width: 150px;
	height: 42px;
	font-size: 22px;
	font-weight: bold;
	border: 0px dashed red;
	display: inline-block;
	vertical-align: top;
	overflow: hidden;
}
/*****************************************************************************/
.left_menu{
	width: 90vw;
	max-width: 250px;
	height: 100vh;
	border-right: 1px solid #E1E8ED;
	background-color: var(--bg-color-elemlist);
	position: fixed; top:0px; left: 0px;
	overflow-y: hidden;
	z-index: 100;
}

.header_left_menu{
	width: 90%;
	height: 60px;
	font-size: 14px;
	font-weight: bold;
	line-height: 1.0;
	border: 0px dashed red;
	padding-top: 8px;
	overflow: hidden;
}

.ico_close_left_menu{
	width: 100%;
	height: 20px;
	font-size: 18px;
	border: 0px dashed red;
	display: none;
}

.info_user_left_menu{
	width: 100%;
	height: auto;
	font-size: 12px;
	margin-top: 0px;
}

.content_left_menu{
	width: 90%;
	height: calc(100vh - 62px);
	border: 0px dashed red;
	overflow-y: auto;
}

.btn_left_menu{
	width: 100%;
	height: auto;
	border: 0px dashed red;
	padding: 5px;
	margin-top: 5px;
	margin-bottom: 5px;
	cursor: pointer;
	overflow: hidden;
} .btn_left_menu:hover{
	color: var(--link-color-blue-hover);
} .btn_left_menu:active{
	font-weight: bold;
	color: var(--link-color-blue-active);
}
/*******************************/
.content{
	width: calc(100vw - 250px);
	height: calc(100vh - 50px);
	background-color: var(--bg-color-lightgray);
	padding-bottom: 50px;
	position: fixed; top: 50px; left:250px;
	overflow-y: auto;
}

.elem_list_standart{
	width: 96%;
	max-width: 1000px;
	height: auto;
	border: 1px solid var(--border-elem-list);
	border-radius: 10px;
	background-color: var(--bg-color-elemlist);
	padding: 10px;
	padding-top: 15px;
	padding-bottom: 15px;
	margin-top: 20px;
	cursor: pointer;
	overflow: hidden;
}.elem_list_standart:hover{
	background-color: var(--bg-color-elemlist-hover);
}

.img_elem_list_standart{
	width: 100px;
	height: 100px;
	border: 1px solid var(--border-elem-list);
	border-radius: 6px;
	background-color: #FFFFFF;
	padding: 5px;
	display: inline-block;
	vertical-align: top;
	overflow: hidden;
}.elem_list_standart:hover{
	background-color: var(--bg-color-elemlist-hover);
}

.data_elem_list_standart{
	width: calc(100% - 110px);
	height: auto;
	border: 0px solid red;
	padding-left: 10px;
	display: inline-block;
	vertical-align: top;
}

.accent_elem_list_standart{
	width: 100%;
	height: auto;
	color: var(--text-color-accent-green);
	font-size: 18px;
	font-weight: bold;
	line-height: 1.1;
	margin-bottom: 10px;
}

.block_data_elem_list_standart{
	width: calc(100% - 120px);
	height: auto;
	border: 0px dashed red;
	display: inline-block;
	vertical-align: top;
}

.title_data_elem_list_standart{
	width: 100%;
	height: auto;
	font-size: 18px;
	font-weight: bold;
	line-height: 1.1;
}

.accent_data_elem_list_standart{
	width: 100%;
	height: auto;
	font-size: 14px;
	font-weight: bold;
	font-style: italic;
	padding-left: 15px;
	line-height: 1.1;
	margin-top: 5px;
}

.param_data_elem_list_standart{
	width: 100%;
	height: auto;
	font-size: 14px;
	font-style: italic;
	padding-left: 15px;
	line-height: 1.1;
	margin-top: 5px;
}

.block_status_elem_list_standart{
	width: 110px;
	height: auto;
	border: 0px dashed red;
	display: inline-block;
	vertical-align: top;
}

.ico_status_elem_list_standart{
	width: 105px;
	height: auto;
	font-size: 12px;
	font-weight: bold;
	line-height: 1.0;
	border-radius: 4px;
	background-color: #F7C2C6;
	padding-top: 2px;
	padding-bottom: 2px;
	overflow: hidden;
}

.date_status_elem_list_standart{
	width: 100%;
	height: auto;
	font-size: 12px;
	font-weight: bold;
	line-height: 1.1;
	margin-top: 5px;
}

.action_status_elem_list_standart{
	width: 100%;
	height: auto;
	color: #589D3D;
	font-size: 14px;
	font-weight: bold;
	margin-top: 5px;
}
/*****************************************************************************/
.right_panel{
	width: 100vw;
	height: 100vh;
	background-color: rgba(0, 0, 0, 0.5);
	position: fixed; top: 0px; left: 0px;
	overflow: hidden;
	display: none;
	z-index: 200;
}

.block_right_panel{
	width: 100%;
	max-width: 500px;
	height: 100vh;
	border: 0px dashed red;
	background-color: var(--bg-color-lightgray);
	padding-left: 10px;
	padding-right: 10px;
	position: fixed; top: 0px; right: 0px;
}

.header_right_panel{
	width: 100%;
	height: 22px;
	border: 0px dashed red;
	overflow: hidden;
}

.ico_close_right_panel{
	width: 100%;
	height: 22px;
	font-size: 18px;
	border: 0px dashed blue;
}

.content_right_panel{
	width: 100%;
	height: calc(100vh - 24px);
	border: 0px dashed red;
	overflow-y: auto;
}

.title_doceditor_right_panel{
	width: 100%;
	height: auto;
	font-size: 16px;
	font-weight: bold;
	line-height: 1.1;
	margin-bottom: 20px;
}

.param_doceditor_right_panel{
	width: 100%;
	height: auto;
	font-size: 16px;
	line-height: 1.1;
	margin-bottom: 4px;
}

.block_img_elemlist_doceditor_right_panel{
	width: 100px;
	height: 100px;
	border: 0px dashed red;
	display: inline-block;
	vertical-align: top;
	overflow: hidden;
}

.block_param_elemlist_doceditor_right_panel{
	width: calc(100% - 110px);
	height: auto;
	border: 0px dashed red;
	display: inline-block;
	vertical-align: top;
	overflow: hidden;
}

.param_elemlist_doceditor_right_panel{
	width: 100%;
	height: auto;
	border: 0px dashed red;
	font-size: 14px;
	line-height: 1.05;
	overflow: hidden;
}

.btn_doceditor_right_panel{
	width: 100%;
	height: auto;
	margin-top: 20px;
	margin-bottom: 50px;
}

.img_editorBarcode_dataTerminal{
	width: 94%;
	max-width: 400px;
	height: auto;
	border: 1px solid var(--border-elem-list);
	border-radius: 20px;
	background-color: #fff;
	padding: 6px;
	margin-top: 20px;
	margin-bottom: 20px;
	overflow: hidden;
}

/*****************************************************************************/
.block_numpad_modal_assembly{
	width: 100%;
	height: auto;
	border: 0px dashed red;
	overflow: hidden;
}

.display_numpad_modal{
	width: 80%;
	height: 30px;
	color: var(--main-color-blue);
	font-size: 24px;
	font-weight: bold;
	border-top: 1px solid var(--border-btn-numpad);
	display: inline-block;
	overflow: hidden;
}

.btn_numpad_modal{
	width: 70px;
	height: auto;
	font-size: 18px;
	font-weight: bold;
	border: 1px solid var(--border-btn-numpad);
	border-radius: 4px;
	background-color: var(--bg-color-gray);
	padding-top: 5px;
	padding-bottom: 5px;
	margin: 3px;
	display: inline-block;
	overflow: hidden;
}
.btn_numpad_modal:hover{ background-color: var(--bg-color-elemlist-hover);}
.btn_numpad_modal:hover{ background-color: var(--bg-color-elemlist-hover); }
/*****************************************************************************/