style_icon:root {
    --main_color: #697790;
    --font_size:16px;
}


html 
{
  -moz-box-sizing: border-box; 
  box-sizing: border-box; 
  -webkit-box-sizing:border-box;
  margin: 0px;
  padding: 0px;
}

* , *::before , *::after
{
  -moz-box-sizing: border-box; 
  box-sizing: border-box; 
  -webkit-box-sizing:border-box;
}

@font-face {
    font-family: 'icomoon';
    src: url('/fonts/icomoon.woff2?v=2026_01_19') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: block; /* для иконок ЛУЧШЕ block */
}

@font-face
{
 font-family: "Calibri"; 
 src: url("/fonts/calibri.ttf"); 
 src: url("/fonts/calibri.ttf") format("embedded-opentype"),
 url("/fonts/calibri.ttf") format("woff"), 
 url("/fonts/calibri.ttf") format("truetype"); 
 font-style: normal; 
 font-weight: normal; 
}

@font-face 
{
 font-family: "Calibri"; 
 src: url("/fonts/calibrib.ttf"); 
 src: url("/fonts/calibrib.ttf") format("embedded-opentype"),
 url("/fonts/calibrib.ttf") format("woff"), 
 url("/fonts/calibrib.ttf") format("truetype"); 
 font-style: bold; 
 font-weight: bold; 
}

@font-face 
{
 font-family: "Calibri"; 
 src: url("/fonts/calibrii.ttf"); 
 src: url("/fonts/calibrii.ttf") format("embedded-opentype"),
 url("/fonts/calibrii.ttf") format("woff"), 
 url("/fonts/calibrii.ttf") format("truetype"); 
 font-style: italic; 
 font-weight: normal; 
}

@font-face 
{
 font-family: "Calibri"; 
 src: url("/fonts/calibril.ttf"); 
 src: url("/fonts/calibril.ttf") format("embedded-opentype"),
 url("/fonts/calibril.ttf") format("woff"), 
 url("/fonts/calibril.ttf") format("truetype"); 
 font-style: italic; 
 font-weight: bold;
}



#coords {
    margin-top: 10px;
    font-size: 18px;
    font-weight: bold;
}

.class_nopadding{
    padding: 0px !important;
}

body
{
	color: #000;
	position:relative;
	width:100%;
	width:100%;
	padding:0px;
	margin:0px;
	background-repeat:repeat;
	font-size:16px;
	font-family: "Calibri", Tahoma, Geneva, sans-serif;
 }

/*************************************/

body
{
    min-height: 100vh;
    background-image:  url("3.jpg");
    background-size: cover;
}



/* ✅ ГЛАВНЫЙ layout */
#for_filter
{
    min-height: 100vh;
    display: flex;
    flex-direction: column;

    height: 100vh;
    width: 100%;
 /*   background-color: #FFF;*/
}

/* 🔥 ГЛАВНОЕ */
.main_screen_new {
    flex: 1 1 auto;
    min-height: 0;          /* ОБЯЗАТЕЛЬНО */
    position: relative;
    /*background-color: #FFF;*/
}

.main_screen_new_role5 {
    flex: 1 1 auto;
    min-height: 0;          /* ОБЯЗАТЕЛЬНО */
    border-bottom: solid 2px #000;
    border-top: solid 2px #000;
    /*background-color: #FFF;*/
}


/* обычные блоки */
.header {
    flex: 0 0 auto;
    /*background-color: rgba(0,0,0,0.3);*/
    color: #FFF;
}

.header a{
    color: #FFF;
}

.menu_top {
    flex: 0 0 auto;
    background-color: rgba(255,255,255,0.8);
    border-bottom: solid 1px #000;
}

.footer {
    flex: 0 0 auto;
    text-align: center;
    /*background-color: rgba(0,0,0,0.3);*/
    padding-top: 7px;
    padding-bottom: 7px;
    color: #FFF;
    font-size: 11px;
}

.header_in
{
    display: flex;
    justify-content: space-between;

}

/**************************************/

select {
    /* all: unset; сбрасывает почти все стили */
    font-family: "Calibri", Tahoma, Geneva, sans-serif;
    /*padding: 0.5em;*/
    border: 1px solid #ccc;
    background: white;
    font-size:16px;
}

button{
    cursor: pointer;
}

img
{
  border:0px;
  display:block;
}

form
{
  padding:0px; 
  margin:0px;
  display:inline-block;
  box-sizing: border-box;
  width:100%;
}

.main_input
{
   border:solid 1px #CCC;
  border-radius:3px;
  padding:3px;
  padding-left:5px;		
  padding-right:5px;
    outline: none;
}


.time_input
{
   border:solid 0px #CCC;
  border-radius:3px;
  padding:3px;
  padding-left:5px;		
  padding-right:5px;
  font-weight:bold;
  color:#0080FF;
}

form input,form textarea , form select
{
   border:solid 1px #CCC;
  border-radius:3px;
  padding:3px;
  padding-left:5px;		
  padding-right:5px;		


	padding:5px !important;
	background-color:#f8f8f8;
	border:solid 1px #ededed;
	outline:none;

}

.bold{
    font-weight: bold;
    text-transform: uppercase;
}




.std_input
{
   border:solid 1px #CCC;
  border-radius:3px;
  padding:10px;
  padding-left:15px;		
  padding-right:15px;		
  width: 100%;
    outline: none;
}

.std_input_center{
    text-align: center;
}

.std_input::placeholder{
    font-family: "Calibri", Tahoma, Geneva, sans-serif;
    font-style: normal;
    font-size: 16px;
    color: #cccccc;
}


.std_code {
  width: 140px;
  text-align: center;
}

.number
{
	text-align:right;
}

.number:focus
{
	text-align:left;
}

form input[disabled="disabled"]
{
	background-color:#EEE;
	color:#000;
}

form select
{
  border:solid 1px #ededed;
  border-radius:3px;
  padding:2px;
  padding-left:5px;		
  padding-right:5px;		
}

form textarea:focus
{
    box-shadow:4px 4px 4px rgba(0, 0, 0, 0.1);
	background-color:#FFFFE6;
}

form select:focus
{
    box-shadow:4px 4px 4px rgba(0, 0, 0, 0.1);
	background-color:#FFFFE6;
}

form input:focus
{
    box-shadow:4px 4px 4px rgba(0, 0, 0, 0.1);
	background-color:#FFFFE6;
}

p
{
	padding:0px;
	margin:0px;
}

h1,h2,h3,h4
{
	padding:0px;
	margin:0px;
}

img 
{
	display:inline-block;
}

label
{
	display:inline-block;
}

div
{

	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-box-sizing:border-box;

	display:inline-block;
	height:auto;
	width:auto;

	line-height:1.2;
}


.main_screen {
  height: 100vh;
  width: 100%;
  background-color: #FFF;
  display: flex;
  flex-direction: column;
  /*background-image: url("bg.jpg");*/
  background-image: url("3.jpg");
  background-size: cover;

}

.main_screen_no_bg{
    background: none;
}

.main{
    flex: 1; /* Основной контент растягивается */
    width: 100%;
    overflow: auto; /* Прокрутка, если контента много */
    padding: 20px;
}



.footer{
    display: flex;
    height: 50px;
    justify-content: center;
    align-items: center;
    color: #FFF;
    gap:10px;
}

.footer a{
    color: #FFF;
}


.main_left_top_screen {
    display: flex;
    color: #FFF;
    justify-content:center;
    align-items: center;
}


.main_top_screen {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    color: #FFF;
    padding-top: 0px;
}

.main_top_screen_20{
    margin-top: 20px;

}


.menu {
    padding:20px ;
    display: flex;
    justify-content: space-between;
    gap:10px;
}


.menu_not_padd{
    padding: 0px;
}

.menu_not_padd .login_block_in{
    background: none !important;
}

.m_scr
{
    display: block;
    width: 100%;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}


.block
{
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: solid 1px #3F8DF2;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    gap: 10px;
}

.button_main {
    background-color: #356b8a;
    border-radius: 3px;
    padding: 7px;
    border: solid 1px #356b8a;
    padding-left: 10px;
    padding-right: 10px;
    color: #FFF;
    cursor: pointer;
    width: 100%;
    text-decoration: none;
    display: inline-block;
}

.button_main:hover {
    background-color: #4688b3;
    color: #FFF;
}

.button_main_top10{
    text-align: center;
    padding-top: 10px;
    width: 100%;
    margin-bottom: 30px;
}

.grad-line{
    height: 1px;              /* толщина линии */
    width: 100%;
    display: flex;
    border: 0;                 /* убираем стандартную рамку hr */
    background: linear-gradient(90deg,#0053bb 0%,#ffffff 50%,#016ec9 100%);
    border-radius: 2px;        /* слегка скруглим края (по желанию) */
    margin-bottom: 30px;
    justify-content: center;
    align-items: center;

}

.grad-line-top{
    margin-top: 10px;
    margin-bottom: 10px;
}



/*****************************************************************************************************/

.login_win
{
    display:block;
    width: auto;
    height: auto;
}

.login_win h3{
    display: block;
    margin-bottom: 20px;
}


.login_win .line{
    display: flex;
}

.login_win .center{
    text-align: center;
    margin-top: 20px;
}

.login_win .row{
    display: block;
    margin-bottom: 15px;
}

.login_win .row_center{
    text-align: center;
}

.login_win .row:last-child{
    margin-bottom: 0px;
}

.login_win .row label{
    display: block;
    margin-bottom: 3px;;
}

.login_win a{
    text-decoration: underline;
    color: #0080FF;
    font-size: 14px;
    display: block;
    text-align:center;
}

#code_img{
    display: flex;
    align-items:center;
    gap: 10px;;
}

.red_border{
    border: solid 1px #F00;
}

.red_text{
    color: #F00;
}

.error_text{
    font-size: 11px;
    color: #F00;
    display: block;
}

.login_block_in{
    display: flex;
    /*background-color: rgba(255, 255, 255, 0.1);*/
    border-radius: 5px;
    padding: 10px;
    gap:10px;
    color: #000;
}

.login_block_in_no_bg{
    background-color: unset;
    gap:20px;
}

.login_block_in a{
    color: #FFF;
    text-decoration: none;
}

.login_block_in a:hover{
    text-decoration: underline;
}

.cabinet
{
    padding: 20px;
    width: auto;
    flex-grow:0;
    box-shadow: 14px 14px 14px rgba(0, 0, 0, 0.1);
    color: #000;
    background-color: rgba(255,255,255,0.6);
    border-radius: 10px;
}

.cabinet_setting
{
    width: 100%;
    color: #000;
}

.cabinet_setting h2{
    text-align: left;
    margin-bottom: 10px;
    color: #000;
}

.cabinet h2{
    text-align: left;
    margin-bottom: 20px;
}

.main_block_column{
    display: flex;
    flex-direction: column;
    width: auto;
    gap: 20px;
    max-width: 800px;
}

.table{
    border-collapse: collapse;
    border: 1px solid #e3dcdc;
    width: 100%;
}

.table td, .table th{
    border: 1px solid #e3dcdc;
    padding: 15px;
    background-color: #FFF;
    vertical-align: top;
}

.foot_button{
    display: flex;
    justify-content: center;
    text-align: center;
    padding-bottom: 5px;
    gap:10px;
    padding-top: 30px;
}

.auto_width{
    width: auto !important;
    padding-top: 3px;
    padding-bottom: 3px;

}

.td_razdel{
    min-width: 200px;
}

.td_value{
    min-width: 200px;
}

/******************************************/


.row_edit {
    display: block;
    margin-bottom: 14px;
}


.row_edit_flex {
    display: flex;
    gap:10px;

}


.row_edit_flex_left {
    display: flex;
    gap:10px;

}

.row_edit_flex_left input{
    width: auto !important;
}


.row_edit_flex_nowith div{
    width: auto !important;
}

.row_edit_flex select{
    height: 38px;
}

.row_edit div{
    width: 100%;
}

.row_edit:last-child{
    margin-bottom: 0px;
}

.row_edit label, .row_edit input{
    display: block;
}

.row_edit input{
    width: 100%;
    padding: 10px !important;
    background-color: #f9f9f9  !important;
}

.row_edit textarea{
    width: 100%;
    padding: 10px !important;
    background-color: #f9f9f9  !important;
    font-size: 16px;
    font-family: "Calibri", Tahoma, Geneva, sans-serif;
}


.row_edit select{
    width: 100%;
    padding: 10px !important;
    background-color: #f9f9f9  !important;
}

.row_edit label{
    margin-bottom: 1px;
    color: #737373  !important;

}

.frm_closebtn{
    border:solid 1px #F00;
    display: inline-block;
    width: 18px;
    height: 18px;
}

.button_dialog {
    background-color: #f0f0f0;
    border-radius: 3px;
    padding: 7px;
    border: solid 1px #b5b5b5;
    padding-left: 10px;
    padding-right: 10px;
    color: #000;
    cursor: pointer;
    background: linear-gradient(0deg, #ccc,#fff);
    display: flex;
    gap:5px;
    transition: background-color 0.3s ease; /* Плавный переход */
    text-decoration: none;
    text-align: center;
    justify-content: center;
}

.button_dialog:active {
    background: linear-gradient(0deg, #aaa,#fff);
}

.button_dialog_pad3{
    padding: 3px;
    padding-left: 10px;
    padding-right: 10px;
}

.td_line{
    height: 10px;
    background-color: #e3e3e3  !important;
}

.td_logo_company{
    display: block;
    border: solid 1px #AAA;
    width: 100px;
    height: 100px;
}

.td_logo_company img{
    width:100% ;
}

.td_logo_block{
    display: flex;
    gap:10px;
}

.main_view{
    display: flex;
    flex-direction: column;
    gap:10px;
    padding: 20px;
    justify-content: center;
    align-items: center;
}

.main_view_w400{
    width: 100%;
    max-width: 500px;

}

.main_view h1{
    font-size: 42px;
    text-align: center;
}

.main_view p{
    font-size: 24px;
    text-align: center;
}


.main_view_header{
    display: flex;
    flex-direction: column;
    gap:10px;
    justify-content: center;
    align-items: center;
    margin-bottom: 30px;

}

.main_logo{
    width: 100px;
    height: 100px;
}

.main_logo img{
    width: 100%;
    height: 100%;
    border-radius: 50%;
    padding: 2px;
}


/******************************************************************/

.nice-line
{
    display: flex;
    align-items: center;
    width: 100%;
    gap:20px;
    justify-content: center;
    margin-top: 10px;
    margin-bottom: 10px;
}


.line_1 {
    height: 1px;
    width: 25%;
    display: flex;
    background: linear-gradient(90deg, #0053bb 0%, #688bf2 50%);
}

.line_11 {
    height: 1px;
    width: 25%;
    display: flex;
    background: linear-gradient(270deg, #0053bb 0%, #688bf2 50%);
}

.move_button {
    border: none;
    background-color: #FFF;
    cursor: move;
}

/***********************************************/
.draw_phone_out
{
    width: 400px;
    height: auto;
    display: flex;
    /*border: solid 1px #0f74a8;*/
    border-radius: 10px;
    padding: 2px;
    box-shadow: 14px 14px 14px rgba(0, 0, 0, 0.1);
    background-color: #FFF;
}

.draw_phone_in{
    border-radius: 10px;
    /*border: solid 1px #0f74a8;*/
    width: 500px;
    height: auto;
    min-height: 700px;
    display: flex;
}

.draw_phone_content{
    padding: 20px;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.maket_top{
    border-bottom: solid 1px #FFF;
    background-color: #0f74a8;
}

.row_content{
    width: 100%;
    height: auto;
    display: flex;
    border: dashed 1px #000;
    flex-grow: 1;
    color: #000;
    justify-content: center;
    align-items: center;
    padding: 10px;
    margin-bottom: 10px;
    text-align: center;
}

.row_content:hover{
    border: dashed 1px #007aff;

}


.row_content_a{
    background-color: #0f74a8;
    transition: all 0.4s ease; /* Плавный переход */
    cursor: pointer;
}

.row_content_a a{
    color: #FFF;
    text-decoration: none;
    cursor: pointer;
}

.row_content_a:hover {
    background-color: #439fce;

}

.left_mnu{
    display: flex;
    align-items: center;
    justify-content: center;
}

.left_mnu a{
    color: #FFF;
}

.row_content_edit
{
    position: relative;
    transition: all 0.4s ease; /* Плавный переход */
}

.row_content_edit:hover  .row_content_edit_menu
{
   display:flex ;
}



.row_content_edit_menu
{
    position: absolute;
    left: 100%;
    top: 0px;
    height: auto;
    width: auto;
    background-color: #F0F0F0;
    padding: 5px;
    z-index: 1;
    display: none;
    gap:5px;
    transition: all 0.4s ease; /* Плавный переход */
}

.row_content_edit_menu a{
    border: solid 1px #cecece;
    padding: 5px;
    display: block;
    height: 28px;
}

.row_content_edit_menu a:hover{
    background-color: #FFF;
}

.row_content_add_button{
    border: none;
}

.row_content_add_button:hover{
    border: none;
}

.footer_edit{
    background-color: #0f74a8;
}

#d3rfsg4323424yfcsdfd ,
#IDEditImageForm ,
#IDEditLinkForm ,
#IDEditTextForm ,
#IDEditLineForm ,
#IDEditRazdelForm,
#IDEditTovarForm,
#IDEditTextEditorForm,
#IDType_0 ,
#IDType_1 {
    width: 100%;
}


.edit_flex_photo{
    display: flex;
    gap:20px;
}

.edit_flex_photo_src{
    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid #000;
    /*width: 100px;
    height: 100px;*/

    overflow: hidden;
}

.edit_flex_photo_src img{
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

#edf_image{
    display: none;
}

/***********************************************/

.edit_flex_photo_src_vid{
    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid #000;
    width: 100px;
    height: 100px;
    max-width: 100px;
    max-height: 100px;

    overflow: hidden;
}

.edit_flex_photo_src_vid img{
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}


/*******************************************/
.row_content_edit {
    cursor: move;
    user-select: none;
}

.drag-over {
    border: 2px dashed #007bff;
    background-color: rgba(0, 123, 255, 0.1);
}


.button_event {
    display: flex;
    gap:5px;
    background-color: #546ee5;
    border-radius: 3px;
    padding: 7px;
    padding-right: 8px;
    padding-left: 8px;
    padding-right: 5px;
    padding-left: 5px;
    border: solid 1px #546ee5;
    padding-left: 10px;
    padding-right: 10px;
    color: #FFF;
    cursor: pointer;
    width: auto;
    background: linear-gradient(to top, #546ee5, #6782ff);
}

.button_event_hide{
    display: none;
}


/*************************************************/

.row_content_text h1{
 font-size: 35px;
}

/***********************************/
.main_view_links{
    display: flex;
    flex-direction: column;
    gap:15px;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.row_main_link{
    display: block;
    padding: 3px;
    background-color: #0f74a8;
    color: #FFF;
    width: 100%;
    flex-grow: 1;
    text-align: center;
    text-decoration: none;
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 22px;

}


.row_main_text{
    text-align: center;
}

.row_main_text p{
    display: block;
    margin-bottom: 15px;
    font-size: 18px;
}

.row_main_link {
    text-align: center;
    transition: all 0.4s ease; /* Плавный переход */
}

.row_main_link:hover{
    background-color: #038bf3;
}

.row_main_line{
   width: 100%;
}

.my_link{
    color: #FFF;
    margin-top: 20px;
}

.help_edit{
    font-size: 12px;
    padding-left: 5px;
    padding-right: 5px;
    color: #AAA;
}

.cls_style_text{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}



.cls_style_text  .cls_style_text_item{
    display: inline-block;
    padding: 10px;
    border: solid 2px #ddd;
    width: auto;
    cursor: pointer;
    text-align: center;
}

.cls_style_text_item_select{
    color: #FFF;
    border: solid 2px #546ee5 !important;
    color: #000;
}

.cls_style_text  .cls_style_text_item:hover{
    background-color: #cecece;
}

@media (max-width: 550px) {
    .cls_style_text
    {
        flex-direction: column;
    }

    .cls_style_text  .cls_style_text_item {
        width: 100%;
    }
}

.style_icon_link {
    display: flex;
    flex-direction: column;
    background-color: #FFF;
    gap: 10px;
}


.style_icon_link_item {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #0f74a8;
    color: #fff;
    padding: 10px 10px 10px 40px; /* место под иконку */
    position: relative;
    font-family: Arial, sans-serif;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    background-color: #FFF;
    color: #000;
    border: solid 2px #ddd;
}

.style_icon_link_item::before {
    content: var(--icon);
    font-family: icomoon !important;
    font-size: 20px;
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    transition: transform 0.3s ease, color 0.3s ease;
}

/* Эффект при наведении */
.style_icon_link_item:hover {
    background-color: #1290cc; /* чуть светлее фон */
    border: solid 2px #FF0000;
}

.style_icon_link_item:hover::before {
    transform: translate(5px, -50%); /* немного двигаем вправо */
    color: #ffeb3b; /* меняем цвет иконки на желтоватый */
}

.cls_style_link_item_select{
    background-color: #0f74a8;
    color: #fff;
}


/**********************************************************************************************/



.style_icon_link_item_main {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #0f74a8;
    color: #fff;
    padding: 10px 10px 10px 40px; /* место под иконку */
    position: relative;
/*    font-family: Arial, sans-serif;*/
    font-size: 22px;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
    width: 100%;
    padding-top: 15px;
    padding-bottom: 15px;
}

.style_icon_nopad
{
    padding: 0px 10px 0px 40px; /* место под иконку */
}

.style_icon_link_item_main::before {
    content: var(--icon);
    font-family: icomoon !important;
    font-size: 24px;
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    transition: transform 0.3s ease, color 0.3s ease;
}

/* Эффект при наведении */
.style_icon_link_item_main:hover {
    background-color: #1290cc; /* чуть светлее фон */
}

.style_icon_link_item_main:hover::before {
    transform: translate(5px, -50%); /* немного двигаем вправо */
    color: #ffeb3b; /* меняем цвет иконки на желтоватый */
}


.block-scrum {
   display: flex;
   margin-bottom: 20px;
   font-size: 11px;
   color: #234cd0;
   gap:5px;
}

.block-scrum:empty{
    display: none;
}

.block-scrum  a{
    color: #234cd0;
}

/******************************/
.row_content_main_text{
    width: 100%;
    height: auto;
    display: flex;
    color: #000;
    margin-bottom: 10px;
}

.row_content:hover{
    border: dashed 1px #007aff;
}

.text_css{
    display: block;
    width: 100%;
    height: auto;
}

/****************************/
.edit_img_tovar_block
{
    display: flex;
    justify-content: center;
    gap:10px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.edit_img_tovar_block_div {
   position: relative;
    width: auto !important;
}

.edit_menu_tov{
    position: absolute;
    top: 0px;
    left: 0px;
}

.img_tov_photo{
    width: 100px;
    height: 100px;
    border: solid 1px #AAA;
    padding: 1px;
}

.label_center{
    text-align: center;
    width: 100%;
}

.flex_center{
    display: flex;
    justify-content: center;
}


/****************************************/

.row_content_tovar{
    display: flex;
    gap:10px;
    flex-wrap: wrap;
    justify-content: space-around;
}

.block_tovar{
    display: block;
/*    border: solid 1px #F00;*/
    width: 150px;
    height: auto;
    padding: 1px;
    box-shadow:4px 4px 4px rgba(0, 0, 0, 0.1);
    position: relative;

}

.block_tovar_photo {
    width: 100%;
    aspect-ratio: 1 / 1;    /* квадрат, можно 4/3, 16/9 и т.д. */
    overflow: hidden;
    background: #f2f2f2;
    position: relative;
}

.tovar_no_photo
{
    position: absolute;
    inset: 0;                     /* растягиваем на весь блок */
    display: flex;
    align-items: center;           /* вертикальный центр */
    justify-content: center;       /* горизонтальный центр */

    background: #e0e0e0;
    color: #777;
    font-size: 14px;
    text-align: center;
}

.block_tovar_photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;     /* 🔥 как background-size: cover */
    object-position: center;
    display: block;
}

.block_tovar_name{
    text-align: center;
    width: 100%;
    color: #000;
}

.block_tovar_name a{
    color: #000;
    text-decoration: none;
    font-weight: bold;
}


.row_content_edit_tovar
{
    position: relative;
    transition: all 0.4s ease; /* Плавный переход */
}

.row_content_edit_menu_tovar
{
    position: absolute;
    right: 0px;
    top: 0px;
    height: auto;
    width: auto;
    padding: 5px;
    z-index: 1;
    display: flex;
    gap:5px;
    transition: all 0.4s ease; /* Плавный переход */
}

.row_content_edit_menu_tovar a{
    border: solid 1px #cecece;
    padding: 5px;
    display: block;
    height: 28px;
    background-color: #FFF;
}

.row_content_edit_menu_tovar a:hover{
    background-color: #FFF;
}


.row_block_tovar
{
    display: flex;
    width: 100%;
    gap: 10px;
    flex-wrap: wrap;
    color: #000;
}

.row_block_tovar .block_tovar
{
    background-color: #FFF;
    min-width: 150px;
    max-width: 200px;
    width: 100%;

}

/************************************/

.myshop_main
{
    width: 100%;
    height: auto;
    display: flex;
    border-radius: 10px;
    padding: 10px;
    box-shadow: 14px 14px 14px rgba(0, 0, 0, 0.1);
    background-color: #FFF;
    justify-content:space-between;
    max-width: 1200px;
    background-color: rgba(255,255,255,0.8);
}

.myshop_main_long{
    max-width:none;

}

.myshop_main_left
{
    width: 100%;
    max-width: 300px;
    /*border: solid 1px #F00;*/
    padding: 5px;
}

.myshop_main_right
{
    flex-grow: 1;
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
}

.myshop_win
{
    border-radius: 3px;
    /*background-color: #C6C6C6;*/
    width: 100%;
    margin-bottom: 20px;
    box-shadow:4px 4px 4px rgba(0, 0, 0, 0.1);
}

.myshop_win:last-child{
    margin-bottom: 0px;
}

.myshop_win_link {
    box-shadow:none;
    justify-content: center;
    display: flex;
    padding-bottom: 10px;
}

.myshow_win_header
{
    width: 100%;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    display: flex;
    justify-content: space-between;
    background-color: #7575B3;
    color: #FFF;
    padding: 5px;
    padding-left: 7px;
    padding-right: 7px;
    margin-bottom: 2px;
    font-weight: bold;
    text-transform: uppercase;
}

.myshow_win_body
{
  display: flex;
  flex-direction: column;
  gap:0px;
}




.myshow_win_body a
{
    /*display: block;
    width: 100%;
    height: auto;
    padding: 5px;
    padding-left: 7px;
    padding-right: 7px;
    background-color: #F0F0F0;
    text-decoration: none;
    color: #000;*/
}


.myshow_win_body_row:hover{
    background-color: #3F8DF2;
}

.myshow_win_body_row:hover a{
    color:#FFF;
}

.myshow_win_body_row_select{
    background-color: #7F97B7  !important;
    color:#FFF !important;
}

.myshow_win_body_row_select a{
    color:#FFF !important;
}

.myshow_win_body_no_data
{
    display: flex;
    justify-content: center;
    align-items: center;
    color: #777;
    background-color: #FFF;
    padding: 5px;
    text-align: center;
}




.button_action {
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #FFF;
    border: solid 1px #3F8DF2;
    width: 20px;
    height: 20px;
    text-decoration: none;
    font-weight: bold;
}

.button_action:hover{
    background-color: #ffff00;
}

.myshow_win_body_row{
    display: flex;
    background-color: #F0F0F0;
    padding: 5px;
    padding-left: 7px;
    padding-right: 7px;
    margin-bottom: 1px;
}

.myshow_win_body_row_menu{
    flex-grow:1;
    cursor: pointer;
}

.myshow_win_body_row_menu a{
    text-decoration: none;
    color: #000;
    display: flex;
    gap:5px;
}

.myshow_win_body_row_menu a img{
    width: 20px;
    height: 20px;
    border-radius: 50%;
}

.myshow_win_body_row_action
{
    display: flex;
    gap:2px;
}

.html_text {
    display: block;
    font-size: 16px;
    line-height: 1.6;
    color: #222;
    word-wrap: break-word;
}

.html_text{
    display:block;
    font-size:16px;
    line-height:1.6;
    color:#222;
    word-wrap:break-word;
}

/*.html_text h1{font-size:2em;margin:1.2em 0 .6em;font-weight:600}
.html_text h2{font-size:1.7em;margin:1.2em 0 .6em;font-weight:600}
.html_text h3{font-size:1.4em;margin:1.2em 0 .6em;font-weight:600}
.html_text h4{font-size:1.2em;margin:1em 0 .5em;font-weight:600}
.html_text h5{font-size:1.05em;margin:1em 0 .5em;font-weight:600}
.html_text h6{font-size:.95em;margin:1em 0 .5em;font-weight:600}*/

.html_text h1{font-size:2em;margin:1.2em 0 .6em;font-weight:600; margin-top: 0px;}
.html_text h2{font-size:1.7em;margin:1.2em 0 .6em;font-weight:600; margin-top: 0px;}
.html_text h3{font-size:1.4em;margin:1.2em 0 .6em;font-weight:600; margin-top: 0px;}
.html_text h4{font-size:1.2em;margin:1em 0 .5em;font-weight:600; margin-top: 0px;}
.html_text h5{font-size:1.05em;margin:1em 0 .5em;font-weight:600; margin-top: 0px;}
.html_text h6{font-size:.95em;margin:1em 0 .5em;font-weight:600; margin-top: 0px;}


.html_text p{margin:0 0 1em}

.html_text ul,
.html_text ol{margin:0 0 1em 1.5em;padding:0}

.html_text li{margin:.3em 0}

.html_text a{color:#0066cc;text-decoration:underline}
.html_text a:hover{text-decoration:none}

.html_text b,
.html_text strong{font-weight:600}

.html_text i,
.html_text em{font-style:italic}

.html_text u{text-decoration:underline}

.html_text blockquote{
    margin:1em 0;
    padding:.5em 1em;
    border-left:4px solid #ddd;
    background:#f9f9f9;
    color:#555
}

.html_text code{
    background:#f4f4f4;
    padding:.15em .3em;
    border-radius:3px;
    font-family:monospace;
    font-size:.95em
}

.html_text pre{
    background:#f4f4f4;
    padding:1em;
    overflow:auto;
    margin:1em 0
}

.html_text img{
    max-width:100%;
    height:auto;
    display:block;
    margin:1em 0
}

.html_text table{
    width:100%;
    border-collapse:collapse;
    margin:1em 0
}

.html_text th,
.html_text td{
    border:1px solid #ddd;
    padding:.5em;
    text-align:left
}

.html_text th{
    background:#f2f2f2;
    font-weight:600
}

.html_text hr{
    border:none;
    border-top:1px solid #ddd;
    margin:2em 0
}

.html_text small{
    font-size:.85em;
    color:#666
}

.table_tvr{
    border-collapse: collapse;
    border: 1px solid #e3dcdc;
    width: 100%;
    color: #000;
}

.table_tvr th{
    border: 1px solid #e3dcdc;
    padding: 5px;
    background-color: #f4f4f4;
    vertical-align: top;
}

.table_tvr td{
    border: 1px solid #e3dcdc;
    padding: 5px;
    background-color: #FFF;
    /*vertical-align: center;*/
}

.td_num
{
    text-align: right;
}

.td_logo{
    width: 50px;
    height: 50px;
}

.td_actions{
    display: flex;
    gap:10px;
    justify-content: center;
}

.panel_buttons{
    display: flex;
    justify-content: center;
    text-align: center;
    gap:10px;
}

.title_tovar{
    font-size: 18px;
}

.button_arrow{
    border-radius: 10px;
    padding: 8px;
    padding-left: 20px;
    padding-right: 20px;
    background-color: #7878B9;
    text-decoration: none;
    color: #FFF;
}

.button_arrow:hover
{
    background-color: #6e6ebf;
}


/***************************/
.logo_shop
{
    width: auto;
    height: 70px;
    border: solid 1px #e3dcdc;
    padding: 1px;
}

.logo_shop_main
{
    width: auto;
    height: 40px;
    padding: 1px;
}

.bg_shop{
    background-color: #FFF;
}


.shop_header{
    display: block;
    border: solid 1px #F00;
}

.menu_shop
{
    align-items: center;
    display: flex;
    position: relative;
}

.menu_shop a
{
    align-items: center;
    display: flex;
}

.menu_shop_korz{
    display: flex;
    flex-direction: column;
    text-decoration: none;
}

.menu_shop_find{
    flex-grow:1;
    padding-left: 20px;
    padding-right: 20px;
    position: relative;
}

.menu_shop_find input{
    width: 100%;
    border-radius: 5px;
    border: solid 1px #aaa;
    padding: 8px;
    outline: none;
}

.menu_shop_find input::placeholder {
    font-style: italic;
    color: #BBB;
}

.shop_menu
{
    background-color:rgba(255,255,255,0.8);
    padding: 10px;
}

.shop_menu_in {
    display: flex;
    gap:10px;
    justify-content: center;
    position: relative;
}

.shop_menu_in a{
    color: #000;
    text-decoration: none;
    font-weight: bold;
    text-transform: uppercase;
    transition: all 0.3s ease;
}

.shop_menu_in a:hover{
    color: #3F8DF2;
}

.shop_kar
{
    display: flex;
    flex-direction: column;
    gap:10px;
    box-shadow:0px 0px 14px rgba(0, 0, 0, 0.1);
    padding: 10px;
    min-width: 230px;
    max-width: 230px;
    border-radius: 12px;
    position: relative;
    background-color: #FFF;
}

.shop_kar:hover{
    box-shadow:0px 0px 14px rgba(0, 0, 0, 0.2);

}

.shop_kar_image {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;        /* 🔥 всегда квадрат */
    overflow: hidden;
    border-radius: 12px;        /* опционально */
    background: #f2f2f2;        /* если фото не загрузилось */
}

.shop_kar_image img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;          /* 🔥 как background-size: cover */
    object-position: center;
    display: block;
}

.shop_kar_title {
    display: flex;
    justify-content: center;
    text-align: center;
}

.shop_kar_title  a{
    color: #000;
    font-size: 18px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.shop_kar_title  a:hover{
    color: #5c72ca;
}

.shop_kar_cena
{
    color: #5c72ca;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
}

.shop_main_2panel
{
    display: flex;
    justify-content: space-around ;
    color: #FFF;
    gap:10px;
}

.shop_main_screen {
    display: flex;
    justify-content: space-around ;
    color: #FFF;
    gap:10px;
    flex-wrap: wrap;
    flex-grow: 1;
}

.a_button_find
{
    position: absolute !important;
    z-index: 1;
    right: 30px !important;
    font-size: 25px;
    text-decoration: none;
    top: 10px !important;
}

.icon-button-find:before {
    content: "\E90F";
    color: #bbb;
    font-size: 20px;
}

.html_text_shop{
    color: #000 !important;
    font-size: 18px !important;
}

.shop_view_tovar{
    display: flex;
    justify-content: space-between;
    gap:10px;
    padding-top: 10px;
}

.images_view{
    display: flex;
    justify-content: space-between;
    gap:5px;
}

.images_view_list{
    display: flex;
    flex-direction: column;
    gap:5px;
}

.images_view_list:empty {
    display: none;
}

.images_view_list img
{
    width: 50px;
    height: 50px;
    border: solid 1px #aaa;
    padding: 1px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.images_view_list img:hover{
    border: solid 2px #3F8DF2;
}

.images_view_main img
{
    width: 450px;
    height: 450px;
    border: solid 1px #aaa;
    padding: 1px;

}

.shop_view_tovar_main
{
    flex-grow:1;
    display: flex;
    flex-direction: column;
    gap:10px;
    padding-left: 20px;
}

.tovar_price{
    font-weight: bold;
    font-size: 28px;
    color: #0004FF;
}


.not_p_center p{
    text-align: left !important;
}


.row_content_logo{
    display: flex;
    justify-content: center;
    width: 100%;          /* контейнер на всю доступную ширину */
}

.row_content_logo img{
    display: block;
    width: 100%;          /* тянем по ширине */
    height: auto;         /* высота автоматом */
}


.row_main_img{
    width: 100%;
    display: block;
}

.row_main_img img{
    display: block;
    width: 100%;     /* до конца по ширине */
    height: auto;    /* высота сама */
}


/***************************/

.header_menu_top{
    display: flex;
    justify-content: space-between;
    padding-left: 40px;
    padding-right:40px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
}

.flex_input_2in{
    display: flex;
    gap:10px;
}


.table_norm_fix {
    width: 100%;
    border-collapse: collapse;
    box-shadow:4px 4px 4px rgba(0, 0, 0, 0.1);

}

.table_norm_fix tr:nth-child(even) {
    background-color: #f2f2f2; /* Цвет для чётных строк */
}

.table_norm_fix tr:nth-child(odd) {
    background-color: #ffffff; /* Цвет для нечётных строк */
}


.row_select_id {
    background-color: #fff000 !important;
    transition: background-color 3s ease;
}




.table_norm_fix tr:hover {
    background-color: rgba(174, 215, 255, 0.22);
    color: #000;
}


.table_norm_fix thead {
    position: sticky;
    top: 0;
    background: white;
    z-index: 10;
}

.table_norm_fix tr th{
    background-color: #f0f0f0;
    border: solid 1px #dbdbdb;
    padding: 6px;
}

.table_norm_fix td {
    padding: 7px;
    border: solid 1px #dbdbdb;
    text-align: left;
}

.table_fix{
    width: 100%;
}






.block_section_fix{
    overflow-y: auto;
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
}



/******************/
.button_add_korzina {
    border-radius: 5px;
    padding: 10px;
    padding-right: 10px;
    padding-left: 10px;
    padding-left: 12px;
    padding-right: 12px;
    border: none;
    background-color: #2f89b5;
    color: #FFF;

}

.button_add_korzina:hover {
    background-color: #4492bc;

}

.korzina_info_small
{
    background-color: #ff7800;
    color: #FFF;
    padding: 3px;
    border-radius: 50%;
    position: absolute;
    right: 0px;
    top: 0px;
    z-index: 1;
    font-size: 11px;
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 20px;
}

.korzina_info_small:empty {
    display: none;
}

.block_kozina {
    display: inline-block;
    width: auto;
    height: auto;
    z-index: 1;
    position: absolute;
    top: 20px;
    right: 20px;
    cursor: pointer;
}

.shop-scrum{
  display: flex;
  gap:5px;
  align-items: center;
  padding:5px;
  padding-top: 5px;
  padding-bottom: 5px;
}

.shop-scrum-pad20{
    padding-left: 20px;
    padding-top: 20px;
}

.shop-scrum:empty{
    display: none;
}

.shop-scrum a
{
    color: #0000FF;
    text-decoration: none;
}

.logo_main{
    width: 40px;
    height: 40px;
}

.load_json{
    display: flex;
    justify-content: center;
    align-items: center;
    gap:10px;
}

.role5_main_screen {
    display: flex;
    justify-content: space-around ;
    color: #000;
    gap:10px;
    flex-wrap: wrap;
    padding-top: 10px;
}

.block_firma
{
    display: flex;
    /*background: rgba(255,255,255,0.5);*/
    background-color: #FFF;
    box-shadow:4px 4px 4px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    width: 100%;
    padding: 10px;
    gap:10px;


    background-color: #0f74a8;
    color: #fff;
    position: relative;
    font-family: Arial, sans-serif;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;

}

.block_firma:hover {
    background-color: #1290cc; /* чуть светлее фон */
}

.block_firma:hover {
    box-shadow:7px 7px 7px rgba(0, 0, 0, 0.1);
    cursor: pointer;

}

.firma_main_logo{
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #000;
    width: 100px;
    height: 100px;
    overflow: hidden;
}
.firma_main_logo img{
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}


.firma_info
{
    display: flex;
    flex-direction: column;
}

.firma_info_center{
    justify-content: center;
}

.firma_info h2{
    margin-bottom: 10px;
}

.firma_info a{
    color: #FFF;
    text-decoration: none;
}


.firma_h1
{
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 10px;
    padding-top: 5px;
}


.firma_h1 a{
    text-decoration: none;
    color: #FFF;
    font-weight: bold;
    font-size: 24px;
    text-align: center;
}

.main_center_screen {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #FFF;
    gap:20px;
}


.main_logo_top{
    width: 100%;
}

.main_logo_top img{
    border:solid 1px #FFF ;
    box-shadow:0px 0px 4px rgba(0, 0, 0, 0.1);
    width: 100%;
    height: auto;
    border-radius: 8px;
}

.main_scr_multi
{
    display: flex;
    margin-left: auto;
    margin-right: auto;
    max-width: 600px;
    width: 100%;
    flex-direction: column;
    gap:20px;
}

.main_block_links{
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    gap:20px;
    flex-wrap: wrap;
}

/****************************/
.hero{
    position: relative;
    height: 100px;
    overflow: hidden;

    display:flex;
    align-items:center;
    justify-content:center;
    border: solid 1px #FFF;
}

/* фон-карусель */
.hero::before{
    content:"";
    position:absolute;
    inset:0;
    width:200%;

    background: linear-gradient( 90deg, #1f6fa8 0%, #2d66a3 25%, #355fa0 50%, #377cc6 75%, #1f6fa8 100% );

    background-size:50% 100%;
    animation:bgSlide 6s linear infinite;
    z-index:0;
}



.hero img{
    position:relative;
    z-index:2;
    height:70px;
    width:auto;
}

@keyframes bgSlide{
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

@keyframes shine{
    from { transform: translateX(35%) translateY(-35%); }
    to   { transform: translateX(-35%) translateY(35%); }
}

/*************************************/

.main_menu
{
    display: flex;
    justify-content: center;
    background-color: #5050c4;
    text-align: center;
}

.main_menu_black{
    background-color: #000;
}

.main_menu_black:empty{
    display: none;
}

.main_menu a{
    color: #FFF;
    text-decoration: none;
    padding-left:15px;
    padding-right:15px;
    padding-top: 7px;
    padding-bottom: 7px;
    border-right: solid 1px #dbdbdb;
    display: flex;
    gap:7px;

    flex-wrap: wrap;
    text-align: center;
    justify-content: center;
}

.main_menu a:first-child {
    border-left: solid 1px #dbdbdb;
}

.main_menu_black a{
    border-right: solid 1px #005e95;
}
.main_menu_black a:first-child {
    border-left: solid 1px #005e95;
}


.main_menu a:hover {
    color: #FFF;
    background-color: #6767d4;
    background-color: #005e95;
    color: #ffff00;
    transition: 0.3s ease; /* вот это делает плавность */
}

.main_screen_new_role10 {
    flex: 1 1 auto;
    min-height: 0;          /* ОБЯЗАТЕЛЬНО */
    border-bottom: solid 2px #000;
    background-image: url("/css/b4.jpg");
    background-size: cover;
    /*background-color: #FFF;*/
}


/**********************************/
.admin_header {
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: solid 1px #2a2f43;
}

.admin_main {
    flex: 1;
    background-color: #FFF;
    width: 100%;
    overflow: auto;
    padding: 20px;
    background-image: url(b4.jpg);
    background-size: contain;
}

.admin_footer {
    display: flex;
    height: 50px;
    justify-content: center;
    align-items: center;
    border-top: solid 1px #d9d9d9;
    color: #FFF;
}

.admin_footer a{
    color: #FFF;
}

.admin_m_scr_full
{
    width: auto;
}


.block_section_header_lr {
    justify-content: space-between;
}
.block_section_header {
    background-color: #546ee5;
    background-color: #517d97;
    /*background: linear-gradient(to top, #546ee5, #6782ff);*/
    color: #FFF;
    font-weight: bold;
    display: flex;
    width: 100%;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    align-items: center;
}

.block_section_header .div_line {
    padding: 12px;
    border-right: solid 1px #FFF;
    align-items: center;
    height: 100%;
    display: flex;
}

.admin_table_fix {
    max-height: 100%;
    overflow-y: auto;
    border-bottom: 1px solid #ccc;
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.admin_table_fix_no_100{
    height: auto !important;
}

.paginations {
    display: flex;
    justify-content: center;
    gap: 5px;
    margin-top: 10px;
    margin-bottom: 20px;
}

.pan_buttons_center {
    display: flex;
    justify-content: center;
}
.pan_buttons {
    margin-top: 10px;
    display: flex;
    gap: 10px;
}

.m_scr_fixed {
    overflow-y: auto;
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.head_std_select{
    padding: 0px !important;
    background-color:#517d97;
    border:none;
    border-radius: 3px;
    color: #FFF;
    font-size: 16px;
    cursor: pointer;
}

.head_std_select_b{
    font-weight: bold;
    text-transform: uppercase;

}


.head_std_select option {
    cursor: pointer;
}

.uslogo{
    width: 50px;
    height: 50px;
}

.reset_for_filter{
    height: auto !important;
}

#installBtnPrgramm {
    position: fixed;
    left: 0px;
    bottom: 0px;
    width: 40px;
    height: 40px;
    display: block;
    border-radius: 3px;
    background-color: #ff6900;
    border: solid 1px #FFF;
}

.installBtnPrgramm_zp {
    position: fixed;
    left: 0px;
    right: 0px;
    bottom: 0px;
    height: auto;
    display: block;
    border-radius: 3px;
    background-color: #ff6900;
    border-top: solid 1px #ff964c;
    border-bottom: solid 1px #cd5200;
    border-left: solid 1px #ff964c;
    border-right: solid 1px #cd5200;

    color: #FFF;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    flex-direction: column;
    padding-top: 10px;
    padding-bottom: 10px;
}

.installBtnPrgramm_zp small{
    font-style: normal;
    font-weight: normal;
}

.installBtnPrgramm_All_info{
    font-size: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap:10px;
}


.admin_header_bg{
    background: linear-gradient(0deg, #004c79,#005e95);
}

.admin_header_bg_line{
    border-bottom: solid 2px #FFF;
}

.hide_block{
    display: none !important;
}


/*******************************************************/
.table_wrap{
    max-height: 100%;
    overflow-y: auto;
}

.table_grid{
    border-collapse: collapse;
    border: 1px solid #e3dcdc;
    width: 100%;
}

.table_grid td,
.table_grid th{
    border: 1px solid #e3dcdc;
    padding:7px;
    background-color: #FFF;
    /*vertical-align: top;*/
    vertical-align: center;
}

.table_grid thead th{
    position: sticky;
    top: 0;
    background: #F2F2F2;
    z-index: 2;
}

.table_grid tbody tr:nth-child(even) td{
    background-color: #f9f9f9;
}

.table_grid tbody tr:nth-child(odd) td{
    background-color: #ffffff;
}


.href_a{
    text-decoration: none;
    border-bottom: dashed 1px #000;
    color: #000;
}

.href_a:hover{
    color: #004c79;
}

.message_window_block{
    padding: 10px;
    text-align: center;
}

.a_white{
    color: #FFF;
    display: flex;
    gap:5px;
}



.div_line_gap5{
    gap:5px;
}

.div_line_a_white a {
    color: #FF0;
}

.head_row{
    background-color: #e5e5e5  !important;
}

.head_row_bold{
    font-weight: bold;
}

.block_select_hist_date{
    display: flex;
    gap:5px;
    flex-wrap: wrap;
    max-width: 700px;
    padding: 10px;
}

.block_select_hist_date a{
    display: inline-block;
    width:auto;
    height: auto;
    border: solid 1px #005e95;
    padding: 5px;
    border-radius: 3px;
    text-decoration: none;
    color: #005e95;
}

.block_select_hist_date a:hover {
    background-color: #3F8DF2;
    color: #FFF;
}

.td_center{
    text-align: center !important;
}

.view_info_user{
    display: flex;
    justify-content:space-between;
    background-color: #FFF;
}

.view_info_user_lr{
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    padding: 10px;
    gap: 5px;
}

.view_info_user_row {
    color: #555;
}

.view_info_user_row b{
    color: #000;
}


.tr_error td {
    color: #F00;
}

.ProgressBarLoad{
    display: flex;
    gap: 3px;
    padding: 10px;
    justify-content: center;
    position: relative;
}

.ProgersssBarText{
    width: 100%;
    text-align: center;
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.ProgressBarItem {
    display: flex;
    width: 15px;
    height: 15px;
    border: solid 1px #B3B3B3;
    background-color: #FFF;
}

.progressBar{
    width:100%;
    height:30px;
    border:1px solid #ccc;
    background:#eee;
    position: relative;
}

.Progersss{
    width:0%;
    height:100%;
    background: linear-gradient(0deg, #707bd0,#b2ccfb);
    transition:width 0.2s;
}

/***********************/

.shop_main_catalog{
    display: flex;
    flex-direction: column;
    max-width: 220px;
    width: 100%;
    height: auto;
    gap:2px;
}


.shop_main_catalog_row
{
    display: flex;
    width: 100%;
    align-items: center;
    gap: 10px;
    padding: 5px;
    background-color: #ececec;
    border-radius: 5px;
    min-height: 40px;
    cursor: pointer;
}

.shop_main_catalog_row:hover {
    background-color: #CCE2FF;
}

.shop_main_catalog_row a {
    display: flex;
    align-items: center;
    gap: 5px;
    text-decoration: none;
    color: #000;
}

.shop_main_catalog_row a img{
    width: 30px;
    height: 30px;
    border-radius: 5px;
}

.vid_all_img{
    display: inline-block;
    width: 30px;
    height: 30px;
    border-radius: 5px;
    border: solid 1px #aaa;
    background-color: #FFF;
}

.shop_kar_no_tovar{
    color: #000;
}


/****************************/

.myshow_win_body_bg{
    flex-direction: row;
    gap:10px;
    padding: 10px;
}

.body_bg_block {
    display: block;
    width: 30px;
    height: 30px;
    cursor: pointer;
    background-repeat: no-repeat;
    background-size: cover;
    transition: all 0.4s ease; /* Плавный переход */
}

.body_bg_block:hover {
    box-shadow:4px 4px 4px rgba(0, 0, 0, 0.1);
}

.body_bg_0
{
    background-color: #FFF;
}

.body_bg_1{
    background-image:  url("/css/fons/1.png");
}


.body_bg_1 .login_block_in div a{
    color: #000;
}

.body_bg_1 .header a {
    color: #000;
}


.body_bg_2{
    background-image:  url("/css/fons/2.png");
}

.body_bg_2 .login_block_in div a{
    color: #000;
}

.body_bg_2 .header a {
    color: #000;
}

.body_bg_3{
    background-image:  url("/css/fons/3.png");
}
.body_bg_4{
    background-image:  url("/css/fons/4.png");
}

.body_bg_4 .login_block_in div a{
    color: #000;
}

.body_bg_4 .header a {
    color: #000;
}

.body_bg_5{
    background-image:  url("/css/fons/5.png");
}

.body_bg_5 .login_block_in div a{
    color: #000;
}


.body_bg_5 .header a {
    color: #000;
}

.body_bg_6{
    background-image:  url("/css/fons/6.png");
}

.body_bg_6 .login_block_in div a{
    color: #000;
}

.body_bg_6 .header a {
    color: #000;
}



/******************************/
.install-help-popup{
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
}

.install-help-popup.show{
    display: flex !important;
}

.install-help-popup__content{
    width: 100%;
    max-width: 420px;
    background: #fff;
    border-radius: 14px;
    padding: 20px;
    box-sizing: border-box;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

.install-help-popup__title{
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 12px;
}

.install-help-popup__text{
    font-size: 15px;
    line-height: 1.5;
    color: #333;
    white-space: pre-line;
}

.install-help-popup__close{
    margin-top: 18px;
    border: 0;
    background: #111;
    color: #fff;
    padding: 10px 16px;
    border-radius: 8px;
    cursor: pointer;
}


.open_menu {
    display: flex;
    flex-direction: column;
    position: absolute;
    z-index: 2;

    background-color: #DDD;
    gap: 1px;
    padding: 1px;

    /* АНИМАЦИЯ */
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;

    transition: all 0.25s ease;
}

.open_menu.active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.open_menu a{
    padding: 7px;
    padding-left: 8px;
    padding-right: 8px;
    text-decoration: none;
    color: #000;
    background-color: #FBFBFB;
}

.open_menu a:hover
{
    background-color: #E1EEFF;
}


.find_block{
    background-color: #FFF;
    border-radius: 3px;
    padding: 3px;
    position: relative;
    padding-right: 20px;
}

.find_block input {
    border: none;
    outline: none;
}

.find_block input::placeholder {
    font-style: italic;
    color: #aaa;
}

.find_block a{
    position: absolute;
    z-index: 1;
    right: 7px;
    top: 2px;
}

/**********************************************/

.menu_block
{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 5px;
    position: absolute;
    inset: 0;
    background-color: #FFF;
    align-content: start; /* ВОТ ЭТО ГЛАВНОЕ */
    padding: 3px;
    z-index: 2;
}

/* карточка ВСЕГДА квадрат */
.menu_block_vid {
    width: 100%;
    aspect-ratio: 1 / 1;
    display: flex;
    flex-direction: column;
    border: solid 1px #d8d8d8;
    border-radius: 3px;
    background-color: #FFF;
    overflow: hidden;
    padding: 2px;
    cursor: pointer;
}

/* картинка занимает верх */
.menu_block_img {
    flex: 1; /* занимает всё доступное */
    overflow: hidden;
}

.menu_block_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* текст снизу фиксированный */
.menu_block_text {
    padding: 10px;
    text-align: center;

    /* чтобы не раздувал блок */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.menu_block_text a{
    text-decoration: none;
    color: #000;
    text-transform: uppercase;
    font-weight: bold;
}

.menu_btn_katalog{
    position: absolute;
    left: 0px;
    top: -5px;
    display: block;
    width: 20px;
    height:30px;
    cursor: pointer;
    z-index: 2;
    display: none;
}


.row_dolg_saldo{
    display: flex;
    width: 100%;
    padding: 7px;
    gap: 10px;
    background-color: #E5E5E5;
    /*justify-content: space-between;*/

}

.row_dolg_saldo:empty{
    display: none;
}

.tr_vipl td
{
    background-color: #E9E9E9 !important;
    font-weight: bold;
}


/******************/

.fullscreen_block {
    position: fixed;
    inset: 0;
    background-color: #FFF;
    z-index: 999999;

    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Arial;
}

.fullscreen_block_in {
    /*background-color: #FFF;*/
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    /*font-family: Arial;*/
}


/* основной контейнер */
.pin_box {
    text-align: center;
    color: #000;

    width: 100%;
    max-width: 500px;
    padding: 20px;
    box-sizing: border-box;
    position: relative;

    width: 100%;
    max-width: 300px;
}

/* заголовок */
.pin_title {
    margin-bottom: 15px;
    font-size: 18px;
    display: block;
}

.pin_user_name {
    margin-bottom: 15px;
    font-size: 20px;
    display: block;
    font-weight: bold;
}

.pin_user_name:empty {
    display: none;
    margin-bottom:0px;
}


.pin_info {
    margin-bottom: 15px;
    font-size: 18px;
    display: block;
}


/* точки */
.pin_dots {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 55px;
}

.pin_dot {
    width: 14px;
    height: 14px;
    border: 2px solid #000;
    border-radius: 50%;
}

.pin_dot.active {
    background: #000;
}

/* клавиатура */
.pin_pad {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;

    max-width: 400px; /* ограничиваем всю клаву */
    margin: 0 auto;
}

/* кнопки */
.pin_btn {
    width: 100%;
    aspect-ratio: 1 / 1;

    max-width: 120px; /* 🔥 ограничение роста */

    background: #ffffff;
    border-radius: 12px;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: clamp(18px, 5vw, 28px);
    cursor: pointer;
    user-select: none;

    transition: transform 0.1s, background 0.1s;
}

/* эффект нажатия */
.pin_btn:active {
    background: #F00;
    transform: scale(0.95);
}

.pin_btn.active {
    background: #F00;
    transform: scale(0.95);
}

.pin_btn:empty {
    visibility: hidden; /* или display: none; */
}

.pin_box_close_block{
    display: block;
    position: absolute;
    z-index: 1;
    right: 10px;
    top: 10px;
}


.admin_main_center{
   display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}


.swiper {
    width: 100%;
    height: 300px; /* регулируй */
    display: none;
}

.swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
}

.swiper-slide img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}


.map-wrap {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 */
}

.map-frame {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.help_block{
    display: flex;
    flex-direction: column;
    width: 100%;
    height: auto;
    margin-top: 10px;
}

.help_block_link {
  display: block;
}

.help_block_link a{
    display: inline-block;
    width: auto;
    padding: 5px;
    padding-right: 5px;
    padding-left: 5px;
    border-radius: 3px;
    background-color: #4C8191;
    text-decoration: none;
    color: #FFF;
    font-size: 12px;
    padding-left: 7px;
    padding-right: 7px;
}

.help_block_link {
    display: block;
}

.help_block_link_text{
    padding: 6px;
    border: solid 1px #aaa;
    background-color: #E9E9E9;
    color: #000;
}

.help_block_link_text_hide{
    display: none;

}


/**************/

.installBtnPushMesage
{
    position: fixed;
    left: 0px;
    right: 0px;
    bottom: 0px;
    top: 0px;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(255,255,255,0.5);
    padding: 10px;
}

.installBtnPushMesage .winview{
    display: flex;
    flex-direction: column;
    background-color: #FFF;
    color: #000;
    padding: 20px;
    max-width: 300px;
    gap: 20px;
    border-radius: 5px;
    box-shadow: 0px 0px 33px rgba(0, 0, 0, 0.5);
    background: linear-gradient(45deg, #92c7ff 0%, #e9f3ff 50%, #99bfff 100%);
}

.winview_row
{
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.test_block{
    display: flex;
    flex-direction: column;
    gap:10px;
}

.frm_login{
    display: flex;
    justify-content: center;
    padding-top: 10px;
    padding-bottom: 10px;
}

.application_loginf_form{
    display: flex;
    width: auto;
    border-radius: 5px;
    padding: 10px;
    flex-direction: column;
    gap:10px;
    max-width: 300px;
}

.application-a{
    color: #004c79;
}


.row_left{
    text-align: left;
}

.row_center_main{
 text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.row_center_main input{
    text-align: center;

}

.font_mobile {
    font-size: 20px;
}

.font_mobile button , .font_mobile input{
    font-size: 20px;

}

.div_grid {
    display: flex;
    flex-direction: column;
    gap:5px;
    display: none;
    background-color: #FFF;
    padding: 10px;
}

.div_grid_row{
    display: flex;
    flex-direction: column;
    border-bottom: solid 1px #E5E5E5;
    padding: 5px;
    padding-bottom: 8px;
}

.div_grid_buttons{
    display: flex;
    justify-content: center;
    padding: 5px;
    gap:25px;
}

.div_grid_line {
    display: flex;
    border-bottom: solid 1px #E5E5E5;
    padding: 5px;
    padding-bottom: 8px;
}

.div_grid_row div:first-child{
    color: #999;
}

.div_grid_row div:last-child{
    color: #000;
    font-weight: bold;
}

.setting_main{
    width: auto;
}

#IDMainChangePin, #IDMainChangePassword{
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}


.win_select_list{
    display: flex;
    flex-direction: column;
}

.win_select_list div a{
    padding: 3px;
    padding-left: 7px;
    padding-right: 7px;
    width: 100%;
    display: inline-block;
    border-bottom: solid 1px #e3e3e3;
    color: #000;
    text-decoration: none;
}

.win_select_list div a:hover{
    background-color: #3F8DF2;
    color: #FFF;
}

#IDCheckUslOferta , #IDCheckSoglasie{
    width: auto;
}

.font_size11{
    font-size: 16px !important;
    text-align: left !important;
    width: 100%;
    display: flex;
    justify-content: left;
    gap:10px;
    margin-right: auto;
    margin-left: auto;
}

.font_size11 div{
    align-self: flex-start;
}

.font_size11 a{
    color: #356b8a;
}

.button_main:disabled{
    background: #cccccc;
    color: #666666;
    cursor: not-allowed;
    opacity: 0.7;
    border: none;
}

.draw_center{
    display:flex; flex-direction: column; justify-content: center;  align-items: center;
    text-align: center;
}


#form_id_label_code{
    display: flex;
    align-items: center;
    justify-content: center;
}



/************************/

.sog {
    max-width: 900px;
    margin: 0 auto;
    padding: 25px;
    font-family: Arial, sans-serif;
    font-size: 15px;
    line-height: 1.65;
    color: #222;
    background: #fff;
}

.sog h1 {
    margin: 0 0 25px 0;
    font-size: 28px;
    text-align: center;
    color: #111;
}

.sog h2 {
    margin: 30px 0 15px 0;
    font-size: 20px;
    color: #111;
    border-bottom: 1px solid #ddd;
    padding-bottom: 8px;
}

.sog p {
    margin: 0 0 14px 0;
}

.sog ul {
    margin: 0 0 18px 25px;
    padding: 0;
}

.sog li {
    margin-bottom: 7px;
}

.sog a {
    color: #1b6ac9;
    text-decoration: none;
}

.sog a:hover {
    text-decoration: underline;
}

@media (max-width: 600px) {
    .sog {
        padding: 15px;
        font-size: 14px;
    }

    .sog h1 {
        font-size: 22px;
    }

    .sog h2 {
        font-size: 18px;
    }
}


.sog_modal {
    position: fixed;
    inset: 0;
    z-index: 999999;
    background: rgba(0,0,0,0.65);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.sog_modal.show {
    display: flex;
}

.sog_window {
    position: relative;
    width: 100%;
    max-width: 950px;
    height: 90vh;
    background: #fff;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.sog_close_x {
    position: absolute;
    top: 12px;
    right: 15px;
    z-index: 2;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    background: #f1f1f1;
    font-size: 26px;
    line-height: 30px;
    cursor: pointer;
}

.sog_content {
    flex: 1;
    overflow-y: auto;
    padding: 35px 30px 20px 30px;
}

.sog_footer {
    padding: 15px;
    text-align: center;
    border-top: 1px solid #ddd;
    background: #fafafa;
}

.sog_btn_close {
    min-width: 160px;
    height: 42px;
    border: 0;
    border-radius: 8px;
    background: #222;
    color: #fff;
    font-size: 15px;
    cursor: pointer;
}

.main_login {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.main_login_header
{
    max-width: 500px;
    width: 100%;
    font-size: 28px;
    margin-bottom: 30px;
    padding-right: 10px;
    padding-left: 10px;
    color: #004c79;
    font-weight: bold;
}


.main_login_top{
    max-width: 370px;
    width: 100%;
    padding-right: 10px;
    padding-left: 10px;
    color: #5F6675;
    font-size: 17px;
    margin-bottom: 10px;
}


#IDBtnSignIn {
    margin-top: 10px;
}


/****************************/

.flex_win_fixed {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;

    padding: 12px 15px;
    box-sizing: border-box;
}

.flex_win_fixed_box {
    display: flex;
    align-items: center;
    gap: 12px;

    padding: 12px 14px;
    border-radius: 18px;

    background: #f4f4f4;
    box-shadow: 0 4px 20px rgba(0,0,0,0.18);
    position: relative;
}

.flex_win_fixed_icon {
    width: 64px;
    height: 64px;
    border-radius: 14px;
    background: #FFF;
    flex: 0 0 auto;
}

.flex_win_fixed_icon img{
    width: 64px;
    height: 64px;
    border-radius: 14px;
}

.flex_win_fixed_text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap:3px;
}

.flex_win_fixed_title {
    font-size: 22px;
    font-weight: 700;
    color: #004c79;
}

.flex_win_fixed_desc {
    font-size: 15px;
    color: #777;
}

.flex_win_fixed_btn {
    border: 0;
    border-radius: 14px;
    padding: 12px 22px;
    background: #356b8a;
    color: #fff;
    font-size: 17px;
    font-weight: 700;
    display: inline-block;
    text-decoration: none;
}

.flex_win_fixed_close {
    font-size: 30px;
    line-height: 1;
    color: #918c8e;
    cursor: pointer;
    padding-left: 4px;
    position: absolute;
    z-index: 1;
    right: 8px;
    top: -2px;
}