/* ОБЩИЕ СТИЛИ ДЛЯ ВСЕГО ПРОЕКТА
ПЫТАЕМСЯ ПРИМЕНЯТЬ МЕТОДОЛГИЮ БЭМ
СТИЛИ, НЕОБХОДИМЫЕ НА ОТЕДЛЬНЫХ СТРАНИЦАХ, НАХОДЯТСЯ В ОТДЕЛЬНОМ ФАЙЛЕ
*/

/* СПИСОК БЛОКОВ И ЭЛЕМЕНТОВ, ДЛЯ КОТОРЫХ УКАЗАНЫ СТИЛИ В ЭТОМ ФАЙЛЕ 
- Общее оформление всех страниц (цвет фона, параметры шрифта, отступы)
- Общее оформление кнопок (если не используются специальные кнопки)

*/




/* Глобальные переменные элементов */

/* 
========================================================
ВЕРСИЯ ПК 
========================================================
*/

/* ОБЩЕЕ ОФОРМЛЕНИЕ СТРАНИЦЫ */

@media screen and (min-width: 767px) {  
html, body{
background-color: #e1e8ef;
color:#000; 
font-size: 14px; 
font-family: 'Inter';
margin:0px;

}

/* Оформление ссылок */
a{color: #1788FB}
a:hover{color:#005fbe}

/* Оформление форм */
.form-container{
display: inline-block;
position: relative;
box-shadow: 0px 0px 20px 1px #c1d1df;
background-color: #fff;
border-radius:10px;
padding:15px;
margin: 30px;
align-content: center;
}

input, select, textarea{
margin:5px;
padding:10px;
font-family: 'Inter';
font-size: 16px;
background-color: #fff;
border-radius: 10px;
border: 1px solid #cfcfcf;
}
select{width:97%}

input:autofill{margin:5px;
padding:10px;
font-family: 'Inter';
font-size: 16px;
background-color: #fff;
border-radius: 10px;
border: 1px solid #cfcfcf;
}
button{
display: inline-block;
background-color: #1788FB;
color: #fff;
border:0px;
border-radius: 10px;
padding:12px;
margin:5px;
font-size:16px;
font-weight: 600;
cursor: pointer;
font-family: 'Inter';
transition:0.2s
}

button:hover{
background-color: #379bff;
}

.btn:disabled{
background-color: #e1e1e1;
color:#afafaf;
cursor:default
}

/* ХЭДЕР */
.header{display: block; position:sticky;top:0px;   width: calc(100%-10px); box-shadow: 0px 2px 3px 1px #c1d1df; height:25px; padding:15px;  background-color: #fafafa;margin-bottom: 0px; z-index: 99;}
.menu{display: inline-block; position: absolute; right:30px; vertical-align: middle;}
.menu-point{display: inline-block;position: relative; vertical-align:middle; margin-left: 15px; font-weight: 500; color:#000; transition: 0.1s;}
.menu-point:hover{color:#1788FB}
.logo-img{display:inline; vertical-align:middle; height:25px}
.lk{display:inline-block;color:#7f7f7f; vertical-align:middle; font-weight:400; margin-left:10px;}
.logo{display:inline; vertical-align:middle;}
.modul-cosmet,.modul-stomat{display:inline-block; vertical-align: middle; margin-left:10px; font-size:12px; padding:3px;  border-radius:5px; cursor:default}
.modul-cosmet{border:1px solid #2FC89E; color:#2FC89E}
.modul-stomat{border:1px solid #1788FB; color:#1788FB}

.profile-button{display:inline; font-weight:500; margin-right:10px;vertical-align:middle; padding:8px;   border:1px solid #e1e1e1; border-radius:10px; color:#000; text-decoration:none; }
    .profile-button:hover{cursor:pointer; background-color:#f1f1f1;color:#000}
    .img-profile{display:inline; height:17px; vertical-align:middle;  margin-right:5px;}
    .exit-button{display:inline; width:30px; vertical-align:middle;  cursor:pointer; fill:#afafaf; transition:0.2s; margin-left:15px;}
    .exit-button:hover{fill: black;}




/* =================================================*/
/* СТАРАЯ ВЕРСИИЯ ДО 18.09.2025 удаляется по мере оформления новой */


/* СТАНДАРТНЫЕ КНОПКИ */


 
/* ШАПКА */


/* ФОРМА ВХОДА */

/*

/* ПОДВАЛ */
.footer{display: block; position: relative;  background-color: #e1e1e1;}



/* Стилизация верхнего меню и модуля личного кабинета администратора в хэдере */
.menu-lk{display: block; position: sticky; top:0;}
.lk-modul{display: inline; position: absolute; right:20px;}

/* Стилизация тела личного кабинета администратора */
.body-lk-container{display: flex; position: relative;  width:100%;  text-align: left;background-color: #e1e8ef;}

.global-body-lk-container{display: flex; width:100%; position: relative;flex-direction: column;}

.m-menu-lk{display:none}



.v-menu-lk{display:block; position: flex; flex: 0 0 240px;}
.v-menu-lk a{color:#000; text-decoration: none; transition: .1s;}

.item-menu-org { display:block; padding:5px;  border-radius:5px; transition:.2s; }
        .item-menu-org-bold { display:block; padding:5px;  border-radius:5px; transition:.2s;background-color:#f1f1f1; font-weight: bold; }
        .item-menu-org:hover { background-color:#f1f1f1; }
        .item-text { display:inline; vertical-align:middle; color:#000; font-size:16px; }
        .li-img { display:inline; margin-right:10px; vertical-align:middle; width:22px; }        
    


.menu-content{display:block; position: fixed; width:200px; height:100vh; padding:20px; background-color: #fafafa; font-weight: 500; line-height: 40px;}
.count-bill{display: inline-block; position: relative; vertical-align: top; border-radius: 30px; background-color: #ff3535; color:#fff; font-weight: 600; font-size: 10px; margin-left:10px; padding:3px; min-width: 15px; height:15px; line-height: 15px;  text-align: center; vertical-align: middle;}
.body-lk{display:block; position: relative; flex-grow: 1; background-color: #fff; margin:15px; box-shadow: 1px 2px 5px 2px #c1d1df;  border-radius: 10px; padding:20px; padding-top:0px; vertical-align: top;}

/* Кнопки СКЛАД */
.btn-blue-sclad, .btn-green-sclad, .btn-grey-sclad{display: inline-block; position: relative; vertical-align: middle; border-radius: 5px; height:20px; font-weight: 600; padding: 5px; padding-left:10px; padding-right:10px; margin:5px; cursor: pointer;}
.btn-blue-sclad{background-color: #0026FB; color:#fff}
.btn-blue-sclad:hover{background-color: #526cff;}
.btn-green-sclad{background-color: #00AF26; color:#fff}
.btn-green-sclad:hover{background-color: #2dcf50;}
.btn-grey-sclad{background-color: #c9c9c9; color:#000}
.btn-grey-sclad:hover{background-color: #cfcfcf;}

/* Стилизация блока поиска */

.search-container{display: block; position:relative; border-radius:5px; width:97%; background-color: #f1f1f1; margin-top:10px; margin-bottom:10px; padding:15px;}
.input-search{width:70%; background-color: #fff; border:0px; border-radius: 10px; height:25px; margin-bottom:5px; padding:5px; font-size: 14px;}

/* Стилизация каталога */
.catalog-position{display: inline-block; position: relative; width:90%; border-bottom: 1px solid #e1e1e1; margin:5px; padding:5px; font-size: 14px;}
.catalog-name,.catalog-vol,.catalog-del,.catalog-price,.catalog-sale{display: inline-block; position: relative; padding-left: 10px; border-right:1px solid #e1e1e1}
.catalog-name{width:40%}
.catalog-vol{width:7%;}
.catalog-del{width:15%}
.catalog-price{width:7%}
.catalog-sale{width:12%; color:#cf3c3c; font-weight: 600;}
.del-btn{display: inline-block; background-color: #ff9595; color:#fff; border:0px;  border-radius: 10px;  font-weight: 600; padding: 12px; padding-left:12px; padding-right:12px; margin:5px; cursor: pointer;}
.del-btn:hover{background-color: #ff7171;}

/* Стилизация страницы ЗАКАЗЫ*/
.order-container{display: block; position: relative; width:95%; background-color: #e1e1e1; border-radius: 10px; margin:10px; padding:20px;}
.hr-line{display: block; position: relative; width: 95%; height: 1px; background-color: #efefef; margin:10px;}
}

/* Стилизация таблиц склада и каталога */
  table {width:100%; border: 1px solid #cfcfcf; border-collapse: collapse;}
    th, td {border: 1px solid #cfcfcf; padding:5px;}
    th {background-color: #e6f1ff;}


/* Стилизация таблиц Склада и Каталога */
.cat-table{font-size:12px;}
.cat-artic-mp{font-size:10px; color:#3f3f3f}
.cat-artic-post{font-size:10px;color:#3f3f3f; font-weight:700;}
.cat-title{ font-weight:700;}
.cat-spec{}
.cat-manufact{}
.cat-price{font-size:14px; font-weight: 700;}
.cat-stock{font-size:14px; font-weight: 700; color:#2FC89E}
.cat-remains{ font-weight: 700;}
.cat-reserved{ font-weight: 700; color:#cc2727}








/*
===================================================================================================================================
МОБИЛЬНАЯ ВЕРСИЯ  
===================================================================================================================================
*/

/* ОБЩЕЕ ОФОРМЛЕНИЕ СТРАНИЦЫ */

@media screen and (max-width: 767px) {  
html, body{
background-color: #e1e8ef;
color:#000; 
font-size: 14px; 
font-family: 'Inter';
margin:0px;

}

/* Оформление ссылок */
a{color: #1788FB}
a:hover{color:#005fbe}

/* Оформление форм */
.form-container{
display: block;
width:90vw;
position: relative;
box-shadow: 0px 0px 20px 1px #c1d1df;
background-color: #fff;
border-radius:10px;
margin-top:15px;
padding-top:5px;
padding-bottom:15px;
align-content: center;
}

input, select, textarea{
margin:5px;
padding:0px;
font-family: 'Inter';
font-size: 16px;
background-color: #fff;
border-radius: 10px;
border: 1px solid #cfcfcf;
}
select{width:97%}

input:autofill{margin:5px;
padding:10px;
font-family: 'Inter';
font-size: 16px;
background-color: #fff;
border-radius: 10px;
border: 1px solid #cfcfcf;
}
button{
display: inline-block;
background-color: #1788FB;
color: #fff;
border:0px;
border-radius: 10px;
padding:12px;
margin:5px;
font-size:16px;
font-weight: 600;
cursor: pointer;
font-family: 'Inter';
transition:0.2s
}

button:hover{
background-color: #379bff;
}

.btn:disabled{
background-color: #e1e1e1;
color:#afafaf;
cursor:default
}



/* ХЭДЕР */
.header{display: block; position:sticky;top:0px;   width: calc(100%-10px); box-shadow: 0px 2px 3px 1px #c1d1df; height:25px; padding:15px;  background-color: #fafafa;margin-bottom: 0px; z-index: 99;}
.menu{display: inline-block; position: absolute; right:30px; vertical-align: middle; overflow-x: scroll; }
.menu-point{display: inline-block;position: relative; vertical-align:middle; margin-left: 15px; font-weight: 500; color:#000; transition: 0.1s;}
.menu-point:hover{color:#1788FB}
.logo-img{display:inline; vertical-align:middle; height:25px}
.lk{display:inline-block;color:#7f7f7f; vertical-align:middle; font-weight:400; margin-left:10px;}
.logo{display:inline; vertical-align:middle;}
.modul-cosmet,.modul-stomat{display:inline-block; vertical-align: middle; margin-left:10px; font-size:12px; padding:3px;  border-radius:5px; cursor:default}
.modul-cosmet{border:1px solid #2FC89E; color:#2FC89E}
.modul-stomat{border:1px solid #1788FB; color:#1788FB}




/* =================================================*/
/* СТАРАЯ ВЕРСИИЯ ДО 18.09.2025 удаляется по мере оформления новой */


/* СТАНДАРТНЫЕ КНОПКИ */


 
/* ШАПКА */


/* ФОРМА ВХОДА */

/*

/* ПОДВАЛ */
.footer{display: block; position: relative;  background-color: #e1e1e1;}



/* Стилизация верхнего меню и модуля личного кабинета администратора в хэдере */
.menu-lk{display: block; position: sticky; top:0;}
.lk-modul{display: inline; position: absolute; right:20px;}

/* Стилизация тела личного кабинета администратора */
.body-lk-container{display: block; position: relative; width:100%;  text-align: left;background-color: #e1e8ef;}

.global-body-lk-container{display: block; width:100%; position: relative;}

v-menu-lk{display:none}
.menu-content{display: none;}

.m-menu-lk{display:block; position: fixed; bottom:0px; width:100%; text-decoration: none; }

.item-menu-org { display:block;   transition:.2s; margin:10px; text-align:center; }
        .item-menu-org-bold {  margin:10px; fill:#1788FB;  transition:.2s;  font-weight: bold; }
        .item-menu-org:hover { }
        .item-text { display:inline; vertical-align:middle; color:#000; font-size:16px; }
        .li-img { display:inline;  vertical-align:middle; height:8vw; }        
    .m-menu-lk a{ text-decoration: none;}

.m-menu-content{display:flex; justify-content: space-evenly; -webkit-tap-highlight-color: transparent;  border-radius:10px 10px 0px 0px ;box-shadow: 3px 3px 5px 5px #e1e8ef; width:100%; background-color: #fafafa; font-weight: 500;}
.count-bill{display: inline-block; position: relative; left:-10px; top:-5px; vertical-align: top; border-radius: 10px; background-color: #ff3535; color:#fff; font-weight: 600; font-size: 10px; margin-left:0px; padding:3px; min-width: 10px; height:10px; line-height: 10px;  text-align: center; vertical-align: middle;}


.body-lk{display:block; position: relative; flex-grow: 1; background-color: #fff; margin:15px; box-shadow: 1px 2px 5px 2px #c1d1df;  border-radius: 10px; padding:20px; padding-top:0px; vertical-align: top;}

/* Кнопки СКЛАД */
.btn-blue-sclad, .btn-green-sclad, .btn-grey-sclad{display: inline-block; position: relative; vertical-align: middle; border-radius: 5px; height:20px; font-weight: 600; padding: 5px; padding-left:10px; padding-right:10px; margin:5px; cursor: pointer;}
.btn-blue-sclad{background-color: #0026FB; color:#fff}
.btn-blue-sclad:hover{background-color: #526cff;}
.btn-green-sclad{background-color: #00AF26; color:#fff}
.btn-green-sclad:hover{background-color: #2dcf50;}
.btn-grey-sclad{background-color: #c9c9c9; color:#000}
.btn-grey-sclad:hover{background-color: #cfcfcf;}

/* Стилизация блока поиска */

.search-container{display: block; position:relative; border-radius:5px; width:97%; background-color: #f1f1f1; margin-top:10px; margin-bottom:10px; padding:15px;}
.input-search{width:70%; background-color: #fff; border:0px; border-radius: 10px; height:25px; margin-bottom:5px; padding:5px; font-size: 14px;}

/* Стилизация каталога */
.catalog-position{display: inline-block; position: relative; width:90%; border-bottom: 1px solid #e1e1e1; margin:5px; padding:5px; font-size: 14px;}
.catalog-name,.catalog-vol,.catalog-del,.catalog-price,.catalog-sale{display: inline-block; position: relative; padding-left: 10px; border-right:1px solid #e1e1e1}
.catalog-name{width:40%}
.catalog-vol{width:7%;}
.catalog-del{width:15%}
.catalog-price{width:7%}
.catalog-sale{width:12%; color:#cf3c3c; font-weight: 600;}
.del-btn{display: inline-block; background-color: #ff9595; color:#fff; border:0px;  border-radius: 10px;  font-weight: 600; padding: 12px; padding-left:12px; padding-right:12px; margin:5px; cursor: pointer;}
.del-btn:hover{background-color: #ff7171;}

/* Стилизация страницы ЗАКАЗЫ*/
.order-container{display: block; position: relative; width:95%; background-color: #e1e1e1; border-radius: 10px; margin:10px; padding:20px;}
.hr-line{display: block; position: relative; width: 95%; height: 1px; background-color: #efefef; margin:10px;}
}

/* Стилизация таблиц склада и каталога */
  table {width:100%; border: 1px solid #cfcfcf; border-collapse: collapse;}
    th, td {border: 1px solid #cfcfcf; padding:5px;}
    th {background-color: #e6f1ff;}