html { font-size: 13px;position: relative; height: 100%;}
body { height:100%; background-color:#F7F7F7; position:relative;}
h1  {text-align:center;}
#id_error{position:fixed; top:10px; right: 10px; padding: 10px 20px; border: solid 1px #839073; background-color: #f3e1e1; border-radius: 10px; z-index:1000;}
#id_message{position:fixed; top:10px; right: 10px; padding: 10px 20px; border: solid 1px #839073; background-color: #b9e0bb; border-radius: 10px; z-index:1000;}

/* -----------------  structure Page ----------- */
.tbl_root {width:100%; height:100%; }
.blck_left { height: 100%; width:60px; background-color:#5D63F0; color:#fff; vertical-align: top; padding:20px; }
.blck_top { height: 80px; background-color:#F7F7F7; color:#d2d2d2;}
.blck_content{background-color:#F7F7F7; padding: 0px 100px 20px 20px; vertical-align: top; text-align: center;}

.top_header{margin:10px 20px; font-size:30px; color:#2a2a2a;}

.ul_menu_left {margin:0px; padding:0px; list-style-type: none;}
.li_menu_left { line-height: 70px;}
.li_menu_left .fa{ font-size: 20px;}
.li_menu_left .fa:hover{ color:#ffd942; cursor:pointer;}

.fa { color:#fff; font-size:20px; }
.frm_smb {padding: 10px;}
.cntnr_content { max-width: 100%; padding: 10px; } /* height:300px; overflow:scroll; */
.cntnr_content{ border: solid 0px #e7e7e7; border-radius: 23px; background-color: #fff;display:inline-table; }
.cntnr_no_prods { padding:20px;}
div.dt-container {width: 1600px; margin:0;}

/* ********************  Блок Логин  *************************  */
.cntnr_top_row {position:absolute; top:10px; right:100px;}
.label_shop_current {color:#2d2d2d;}
.sl_shop_current{color: #2d2d2d; background-color: #F7F7F7; border: solid 1px #d2d2d2; font-size: 18px; border-radius: 8px; padding: 5px 20px;}
#cntnr_login, #cntnr_shopslist{display:inline-block;}
#cntnr_shopslist{}
.lgn_blk_ul{}
.lgn_blk_item{ display: inline-block;}
.lgn_blk_btn { border-radius:10px; padding: 2px 10px; border: solid 1px #cae3ea;  background-color:#eaf3f3;}
.lgn_blk_btn:hover{background-color:#ffffff; border-color:#f08b05;cursor:pointer;}
.lgn_blk_link{}

/* -----------------  panel menu  ----------- */

.blck2panel_menu{background-color: #F7F7F7; padding: 0px 10px 10px 20px;  vertical-align: top; height: 100%; min-width: 250px;}
.blck2panel_main{background-color: #F7F7F7; padding: 0px 100px 20px 0px;  vertical-align: top; height: 100%; width:100%;}
.block_panelmenu, .block_tbl { border: solid 1px #e7e7e7; border-radius: 23px; background-color: #fff; height:100%; min-height:100%; min-width:180px; padding: 20px 10px; }
.ul_panel_menu { line-height:20px;  list-style-type: none; margin: 0px; padding: 0px;}
.ul_panel_menu li{ padding: 10px}
.a_panel_menu { color:#2a2a2a; font-size:14px; text-decoration:none;}
#menu_left_bottom {position:absolute; bottom:50px; margin:auto; font-size: 20px;}
.cntnr_menuTopAdmin {width:fit-content; }
/* -----------------  panel menu  ----------- */
.block_tbl{ padding: 30px 30px; }

/* -----------------  dataTables ----------- */
table.dataTable thead tr > .dtfc-fixed-start {background-color:#dcdfff;}
div.dt-container div.dt-layout-row div.dt-layout-cell.dt-layout-start { margin-left: 30px;}
table.dataTable > thead > tr > th, table.dataTable > thead > tr > td { border-bottom: 0px solid #0000004d;}

/* -----------------  dataTables cell ----------- */
#tblProducts td {padding:3px 8px; border:solid 1px #d2d2d2; height: 20px; position:relative;}
.tbl_hdr{background-color:#F4F5FF; }
.tbl_th{ border:solid 1px #dee1f3; border-bottom-width:0px;text-align:center;}
.dt-column-title {text-align:center;}
div.dt-scroll { border-right: solid 1px #d2d2d2;}
.clm_img { width:40px;}
.clm_name { width:120px;}

hr { border:solid 1px #939393; border-width: 1px 0px 0px 0px; margin: 0px; padding: 0px; }
.dt_center{text-align: center; }

span.hint { display: block; font-size: 12px; text-transform: uppercase; text-align: left; color: #5D63F0; padding-top:0px; margin-top:0px; margin-bottom:0px; opacity:0;
			transition:.7s; position: absolute; top: 0px; left: 0px; white-space: nowrap; background-color: #fff; padding: 5px 10px;
}
.hint_trg:hover + .hint {opacity: 1;}
.val_text { background-color: #F7F7F7; padding:8px 4px; border:solid 1px #ececec; border-radius:5px; }
.val_text:hover { background-color: #F4F5FF;color: #5D63F0;cursor:pointer }
.edt_val_cntnr { display: initial; }
.bt_val_sv {background-color: #5D63F0; color: #fff; cursor: pointer; padding:2px 10px; border-radius: 6px; }
/* ---------------------------- */





/* -----------------  Панель скрытия раскрытия и управления колонками ----------- */
.pnl_tbl_set {color: #2d2d2d; position: absolute; top: 40px; right: 0px; z-index: 10; border: solid 1px #f3f3f4; padding: 20px; background-color: #fff; border-radius: 15px;}
#tblProdSet {width:100%;}
#tblProdSet td {border:solid 1px #d2d2d2; border-width:0px 0px; padding:3px 5px; text-align:left;}
.tbset_smbl {color: #5D63F0;}
.tbset_prp {color: #d2d2d2;}
.tbset_prp:hover {color: #5D63F0;cursor:pointer }
/* ---------------------------- */


/* -----------------  Tables ----------- */
.blck_hdr {text-align:left; padding:0px; margin:0px;}
.tbl{ width:100%; }
.tbl_th{ border:solid 1px #dee1f3; text-align:left; background-color:#F4F5FF; padding:10px 20px; }
.tbl td {padding:10px 20px; border:solid 1px #d2d2d2;  position:relative; border-width:0px 0px 1px 0px; text-align:left; }
.tbl .fa{ color:#7F7F7F; font-size:16px; margin:0px 5px;}
.tbl .fa:hover{ color:#5D63F0;}



.row_btn{text-align: right; width: 100%; padding: 0px 0px 10px 0px;}

#btns{display:table;}
.btn { border: solid 1px #D2D2D2; background-color: #5D63F0; padding: 10px 20px; width: max-content; height: 40px;  border-radius: 10px; text-align: center; color: #fff;} 
.btn:hover {background-color: #898DFB; color:#060a7b;}

.but_clear{ background-color: #fff; padding:10px 20px; width:100%; text-align:center; color: #5D63F0; display: table-cell;   white-space: nowrap;} 
.but_clear:hover, .tbset_smbl:hover {color:#d2d2d2; cursor:pointer }


/* -----------------  Pop Panel ----------- */
.pop_cntnr{position:fixed; top:0px; left:0px;width: 100%; height: 100%;}
.back_layout{display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #646464d4;}
.pop_panel{ padding: 40px 40px; border: solid 1px #e7e7e7; border-radius: 23px; background-color: #fff; height:100%; min-height:100%; min-width:180px; max-width:max-content; position:relative;}
.pop_panel .btn {width:100%;}

.cntnr_close{position:absolute; top:20px; right:20px;}
.symb_close {background-color: #F4F5FF; font-size: 15px; font-family: Arial; padding: 2px 10px; border-radius: 5px;}
.symb_close:hover{ background-color:#898DFB; color:#fff;}


.form_row { display: flex; width: 500px; margin: auto; padding: 8px 8px 8px 30px; text-align: center;}
.form_row label {width: 200px;text-align: left;}
.form_control {
	display: block;	width: 100%; padding: .375rem .75rem;font-size: 1rem;font-weight: 400;line-height: 1.5;
	color: #212529;	background-color: #fff;	background-clip: padding-box;border: 1px solid #ced4da;
	webkit-appearance: none;-moz-appearance: none;appearance: none;	border-radius: .25rem;
	transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

/* ****************************** Админ Menu *********************** */
.menu {	width: 100%; display: table;}
.menu ul {display: table-row;}
.menu li {display: table-cell;position: relative;}
.menu li a {display: block;padding: 5px 15px;text-align: center;}
.menu-caret:after {	display: inline-block;width: 0;height: 0;margin-left: .255em;vertical-align: .255em;content: "";border-top: 3px solid;border-right: 3px solid transparent;border-bottom: 0;border-left: 3px solid transparent;}
.menu ul li:hover, .menu a:hover {	color: #068282;text-decoration:underline; }
.menu li:hover ul  {display: block;position: absolute;top: 100%;left: 0px;color: #666;margin: 0;padding: 0px 10px;width: 150px;z-index: 9999;}
.menu ul ul  {display: none; border:solid 1px #a76767; margin-top:-10px; border-width: 0px 0px 0px 1px; background-color: #eaf3f3; }
.menu ul ul li  {display: block; }
.menu ul ul li a  {	display: block;	padding: 0; text-align: left;color: #1c3434;  text-decoration: none; font-size: 14px;}
.ul_menu {color: #1c3434;  text-decoration: none; font-size: 14px;}
.li_menu {color: #1c3434;  text-decoration: none; font-size: 14px;}
.a_menu {color: #1c3434;  text-decoration: none; font-size: 14px;}
/* ************************************** */

.form-group{display:flex; width:500px; margin: auto; padding: 8px 8px 8px 30px;}
.form-group label{width:200px; text-align:left;}
.form-group input{}

.lst_trf{ display:block; border:solid 1px #a2a2a2; background-color:#d2d2d2; color:#2d2d2d; font-size: 16px;}
.lst_trf:hover{background-color:#f5f5ff; cursor:pointer;}

/* =============================   checkbox   ============================== */
.checkbox-ios {
	display: inline-block;
	height: 20px;    
	line-height: 20px;  
	margin-right: 10px;      
	position: relative;
	vertical-align: middle;
	font-size: 14px;
	user-select: none;	
}
.checkbox-ios .checkbox-ios-switch {
	position: relative;	
	display: inline-block;
	box-sizing: border-box;			
	width: 48px;	
	height: 20px;
	border: 1px solid rgba(0, 0, 0, .1);
	border-radius: 10px;	
	vertical-align: top;
	background: #d2d2d2;
	transition: .2s;
}
.checkbox-ios .checkbox-ios-switch:before {
	content: '';
	position: absolute;
	top: 1px;
	left: 2px;	
	display: inline-block;
	width: 16px;	
	height: 16px;
	border-radius: 50%;
	background: white;
	box-shadow: 0 3px 5px rgba(0, 0, 0, .3);
	transition: .15s;
}
.checkbox-ios input[type=checkbox] {
	display: block;	
	width: 0;
	height: 0;	
	position: absolute;
	z-index: -1;
	opacity: 0;
}
.checkbox-ios input[type=checkbox]:not(:disabled):active + .checkbox-ios-switch:before {
	box-shadow: inset 0 0 2px rgba(0, 0, 0, .3);
}
.checkbox-ios input[type=checkbox]:checked + .checkbox-ios-switch {
	background: #5d63f0;
}
.checkbox-ios input[type=checkbox]:checked + .checkbox-ios-switch:before {
	transform:translateX(28px);
}
 
/* Hover */
.checkbox-ios input[type="checkbox"]:not(:disabled) + .checkbox-ios-switch {
	cursor: pointer;
	border-color: rgba(0, 0, 0, .3);
}
 
/* Disabled */
.checkbox-ios input[type=checkbox]:disabled + .checkbox-ios-switch {
	filter: grayscale(70%);
	border-color: rgba(0, 0, 0, .1);
}
.checkbox-ios input[type=checkbox]:disabled + .checkbox-ios-switch:before {
	background: #eee;
}
 
/* Focus */
.checkbox-ios.focused .checkbox-ios-switch:before {
	box-shadow: inset 0px 0px 4px #ff5623;
}
/* =========================================================== */

.hd {display:none}
#do_ajax {z-index: 801; display: none; position: fixed; margin: auto; top: 50%; left: 50%; text-align: center; width: 50px; height: 50px; }
#hide_block{display:none;}
.err_field {background-color:#ecd7e7;}
.ok_field {background-color:#dce7d7;}
.pnl_msg {width:100%; display:inline;}
/* ##Device = Tablets, Ipads (portrait)  ##Screen = B/w 768px to 1024px */
@media only screen and ( max-width: 1000px )
{ 
    div.dt-container{width:800px;}
}

/* ##Device = Tablets, Ipads (portrait)  ##Screen = B/w 768px to 1024px */
@media only screen and ( min-width: 1001px ) and ( max-width: 1200px )
{
    div.dt-container{width:1000px;}
}


/* ##Device = Tablets, Ipads (portrait)  ##Screen = B/w 768px to 1024px */
@media only screen and ( min-width: 1001px ) and ( max-width: 1200px )
{
    div.dt-container{width:1000px;}
}

/* ##Device = Tablets, Ipads (portrait)  ##Screen = B/w 768px to 1024px */
@media only screen and ( min-width: 1201px ) and ( max-width: 1400px )
{
    div.dt-container{width:1200px;}
}

/* ##Device = Tablets, Ipads (portrait)  ##Screen = B/w 768px to 1024px */
@media only screen and ( min-width: 1401px ) and ( max-width: 1600px )
{
    div.dt-container{width:1400px;}
}

/* ##Device = Laptops, Desktops   ##Screen = B/w 1025px to 1280px */
@media only screen and ( min-width: 1601px )
{
    div.dt-container{width:1600px;}
}