* {
 margin: 0;
 padding: 0;
}
body {
font-family: 'Nunito', sans-serif;
font-size:1.125em;
word-wrap: break-word;
}
img {
 max-width: 100%;
 height: auto;
 width: auto\9; /* для ie8 */
}
.wrapper{
/*border: 1px solid blue;		*/
max-width: 1300px;	
margin: 0px auto;
min-height: 100vh;
display: grid;
grid-template-columns: 1fr 3fr 1fr;	
grid-template-areas: "logotip nav cabinet"
					 "main main main"
					 "footer footer footer";
grid-template-rows: auto 1fr auto;					 
}
.item{
padding: 20px;
/*border: 1px solid red;*/
}
.logotip{
grid-area: logotip;	
}
.nav{
grid-area: nav;	
}
.cabinet{
grid-area: cabinet;	
}
.main{
grid-area: main;
}
.footer{
grid-area: footer;	
}
.pole{
margin: 10px auto;	
}
.gen{
font-size:1.250em
}
.wrapparam{
/*border: 1px solid blue;	*/
max-width: 95%;	
margin: 0px auto;
display: grid;
grid-gap: 5px;
grid-template-columns: 1fr 2fr 0.5fr 0.5fr;	
}
.itemparam{
padding: 0 5px;	
/*margin: 10px auto;*/
/*border: 1px solid red;*/
}
.wraporder{
/*border: 1px solid blue;		*/
display: grid;
grid-template-columns: 0.5fr 1fr 3fr;	
grid-template-areas: "pict-order id-order name-order"
					 "pict-order main-order main-order";
}
.item-order{
padding: 0px;
/*border: 1px solid red;*/
}
.pict-order{
grid-area: pict-order;	
}
.id-order{
grid-area: id-order;	
}
.name-order{
grid-area: name-order;	
}
.main-order{
grid-area: main-order;	
}
.text-box1
{
 width:20%;
 height:25px;
 border:1px solid #CCCCCC;
 padding:1px 5px; 
 border-radius:5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -khtml-border-radius: 5px;	 
}
.text-box2
{
 width:80%;
 height:25px;
 border:1px solid #CCCCCC;
 padding:1px 5px; 
 border-radius:5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -khtml-border-radius: 5px;	 
}
.text-box3
{
 width:10%;
 height:25px;
 border:1px solid #CCCCCC;
 padding:1px 5px; 
 border-radius:5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -khtml-border-radius: 5px;	
}
.text-box4{
width:95%;
height:100px;
padding:10px 12px; 
font-family:inherit;	
resize:vertical;
border:1px solid #CCCCCC;
border-radius:5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -khtml-border-radius: 5px;	
}
.text-box5
{
 height:29px;
 border:1px solid #CCCCCC;
 padding:1px 5px; 
 border-radius:5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -khtml-border-radius: 5px;	 
}
.text-box6{
 width:95%;
 height:25px;
 border:1px solid #CCCCCC;
 padding:1px 5px; 
 border-radius:5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -khtml-border-radius: 5px;	
}
.text-box7{
width:95%;
height:200px;
padding:10px 12px; 
font-family:inherit;	
resize:vertical;
border:1px solid #CCCCCC;
border-radius:5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -khtml-border-radius: 5px;	
}
.text-box8{
width:95%;
height:400px;
padding:10px 12px; 
font-family:inherit;	
resize:vertical;
border:1px solid #CCCCCC;
border-radius:5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -khtml-border-radius: 5px;	
}
.textxml1
{
 width:30%;
 height:25px;
 border:1px solid #CCCCCC;
 padding:1px 5px; 
 border-radius:5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -khtml-border-radius: 5px;	 
}
.textxml2
{
 width:5%;
 height:25px;
 border:1px solid #CCCCCC;
 padding:1px 5px; 
 border-radius:5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -khtml-border-radius: 5px;	 
}
.textxml3
{
 width:80%;
 height:25px;
 border:1px solid #CCCCCC;
 padding:1px 5px; 
 border-radius:5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -khtml-border-radius: 5px;	 
}
.textxml4
{
 width:65%;
 height:25px;
 border:1px solid #CCCCCC;
 padding:1px 5px; 
 border-radius:5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -khtml-border-radius: 5px;	 
}
.textxml5
{
 width:92%;
 height:25px;
 border:1px solid #CCCCCC;
 padding:1px 5px; 
 border-radius:5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -khtml-border-radius: 5px;	 
}
.knop {
    background: white;
    color: #696969; 
    font-size: 1.000em; 
    font-weight:400;	
	text-align: center;
	padding: 10px;
    margin: 5px 0px 0px 0px;	
	border:2px solid #696969; 
	border-radius:7px; -moz-border-radius: 7px; -webkit-border-radius: 7px; -khtml-border-radius: 7px;	
    cursor: pointer;
text-decoration: none;	
transition: background 0.2s ease-in;	
}  
.knop:hover {
background: #696969;
color: white;
}
.knoplogo {
    background: white;
    color: #696969; 
    font-size: 1.000em; 
    font-weight:400;	
	text-align: center;
	padding:2px 5px;
    margin: 5px 0px 0px 0px;	
	border:2px solid #696969; 
	border-radius:7px; -moz-border-radius: 7px; -webkit-border-radius: 7px; -khtml-border-radius: 7px;	
    cursor: pointer;
text-decoration: none;	
transition: background 0.2s ease-in;	
}  
.knoplogo:hover {
background: #696969;
color: white;
}
.zakaz-menu{
margin: 10px auto;	
padding: 10px;
border:1px solid #CCCCCC;
border-radius:7px; -moz-border-radius: 7px; -webkit-border-radius: 7px; -khtml-border-radius: 7px;
}
.zakaz-menu-no{
margin: 10px auto;	
padding: 10px;
border:1px solid red;
border-radius:7px; -moz-border-radius: 7px; -webkit-border-radius: 7px; -khtml-border-radius: 7px;
}
.dost{
text-align: right;
}
.login{
border: 6px solid #CFCFCF;	
border-radius: 1em;
padding: 1em;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%) 
}
/* Основні стилі для кнопки вгору */
        .topkn {
            position: fixed; 
            bottom: 35px; 
            left: 15px; 
            cursor: pointer; 
            background: #CFCFCF; 
            color: #696969;
            padding: 15px; 
            text-align: center; 
            font-size: 16pt;
            font-weight: 700;
            border: 2px solid #696969;
            
            /* Сучасне скруглення меж (старі префікси більше не потрібні) */
            border-radius: 5px; 
            
            /* Початковий стан: кнопка прихована і непрозора */
            opacity: 0;
            visibility: hidden;
            
            /* Плавно анімуємо появу кнопки та зміну кольорів при наведенні */
            transition: opacity 0.4s ease, visibility 0.4s ease, background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
        }

        /* Клас, який додається через JS, коли користувач прокрутив сторінку більше ніж на 250px */
        .topkn.show {
            opacity: 0.5;
            visibility: visible;
        }

        /* Ефект при наведенні курсору на активну кнопку */
        .topkn.show:hover {
            opacity: 1;
            background: #696969; 
            color: #CFCFCF;
            border: 2px solid #CFCFCF;
        }
.copyright{
text-align:center;	
font-size: 0.778em;
color:#9C9C9C;
}
.nameuser{
margin:0px 0 20px 0;	
}
/* Меню */
nav ul {
    width: auto; 
    list-style: none;
    margin: 0;
    padding: 0px; 
    font-weight:700;
    font-size:1.200em;
}
nav ul li{float:left;list-style-type:none;}
nav ul li a {
    display: block;
    text-decoration: none;
    padding: 10px;
    border-bottom: none;
	color: black;
}
nav ul li a:hover {
    color: #cf171f; 
    text-decoration: none; 
}
.toggle-menu ul{display:table;width:31px;margin-left:0;padding-left:0;margin:5px}
.toggle-menu ul li{width:100%;height:3px;background-color:black;margin-bottom:4px;list-style:none}
.toggle-menu ul li:last-child{margin-bottom:0} input[type=checkbox],label{display:none}
.hidden{
display:none;	
}
.mintext{
font-size: 0.778em;	
display: inline;
}
.tovar{
border: 1px solid #E6E6FA;
padding: 10px;
margin: 10px 0;
background-color:#F5FFFA;
border-radius:7px; -moz-border-radius: 7px; -webkit-border-radius: 7px; -khtml-border-radius: 7px;	
font-size: 0.889em;	
}
.linkall{
text-decoration: none;
border:1px solid #CFCFCF; 
padding: 6px; 
background-color: #CFCFCF; 
color:white;
}
.linkold{
text-decoration: none; 
border:1px solid #E8E8E8; 
padding: 6px; 
color:#CFCFCF;	
}
.linkold:hover{
text-decoration: none;
border:1px solid #CFCFCF; 
padding: 6px; 
background-color: #CFCFCF; 
color:white;
transition: background 0.1s ease-in;
}
.linkxml{
margin: 5px 0;	
padding:5px;
border:1px solid #CFCFCF;
border-radius:7px; -moz-border-radius: 7px; -webkit-border-radius: 7px; -khtml-border-radius: 7px;	 	
}
.linkxml a{
text-decoration: none;
color:#00008B;
}
.linkxml a:hover{
text-decoration: none;	
font-weight:700;
}
.linkxmlfile{
padding: 5px 0 5px 15px;	
}
.deltov{
text-align:right;
float: right;
}
.section-symbol{
cursor:pointer;	
color:green;
display:inline-block;
}
.zametka{
padding:5px;
text-decoration: none; 
color:green;
}
.phoneorder{
text-decoration: none; 
color:green;
}
.phoneorder:hover{
font-weight:700;	
}
.vtext{
display:inline-block;
cursor: pointer;
color: green;	
}
.viewtext{
border: 1px solid green;
padding:10px;
border-radius:7px; -moz-border-radius: 7px; -webkit-border-radius: 7px; -khtml-border-radius: 7px;	
}
.countxt{
font-size: 0.667em;	
color: #828282;	
}
.fastedit{
margin: 0 0 0 15px;	
}
.hedxml{
margin: 0 0 15px 0;	
}
.modal-from-dispetcher{
/*display:none;*/
position:fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.7);
z-index: 1000;
}
.modal-content{
margin: 100px auto;	
background-color: white;
padding: 20px;
width: 60%;	
border-radius:7px; -moz-border-radius: 7px; -webkit-border-radius: 7px; -khtml-border-radius: 7px;
}
.close-modal-window{
color: #828282;
float: right;
font-size: 40px;
cursor: pointer;
font-weight:700;	
padding: 0 10px;
}
.sms_user_button{
background: white;
color: #cc0033; 
font-size: 1.000em; 
font-weight:400;	
text-align: center;
padding: 8px 7px;
margin: 20px 0 0 0;
border:1px solid #cc0033; 
border-radius:7px; -moz-border-radius: 7px; -webkit-border-radius: 7px; -khtml-border-radius: 7px;		
transition: background 0.2s ease-in;
cursor:pointer;
}
.sms_user_button:hover{
background: #cc0033;
color: white;	
}
.sms_user{
padding: 10px 5px;
text-align: center;
font-weight:700;
font-size: 18px; 
background-color: white;
color:#cc0033;
}
.askdelxml{
cursor:pointer;
}
.askdeltovar{
cursor:pointer;	
}
.copynew{
text-align: right;
float: right;
}
.img_foto{
transition: all 0.3s ease-in;	
}
.img_foto:hover{
transform: scale(1.1,1.1);	
}
.img_foto_xml{
transition: all 0.3s ease-in;	
}
.img_foto_xml:hover{
transform: scale(1.2,1.2);		
}
.gelttnofweb{
cursor:pointer;		
}
.addttns{
cursor:pointer;	
}
/* --- СТИЛІ ДЛЯ ЗАВАНТАЖЕННЯ ФОТОГРАФІЙ ТА ПОПЕРЕДНЬОГО ПЕРЕГЛЯДУ --- */

/* Стилі для кастомної кнопки "Вибрати фотографії" */
.custom-file-upload {
    display: inline-block;
    padding: 10px 20px;
    cursor: pointer;
    background-color: #007bff; /* Синій колір, як кнопка */
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 1em;
    margin-bottom: 15px;
    transition: background-color 0.3s ease;
}

.custom-file-upload:hover {
    background-color: #0056b3;
}

/* Приховуємо стандартний input type="file" */
#photoFileInput {
    display: none;
}

/* Контейнер для попереднього перегляду фото */
.photo-previews-container {
display: flex; /* Для розміщення елементів в ряд /
flex-wrap: wrap; / Для перенесення на новий рядок, якщо не вміщаються /
gap: 10px; / Відступ між елементами */
margin-top: 10px;
}
.photo-preview-item {
width: 100px;
height: 100px;
border: 1px solid #ccc;
position: relative; /* Для позиціонування кнопки видалення /
overflow: hidden; / Щоб зображення не виходило за межі */
}

.preview-image {
width: 100%;
height: 100%;
object-fit: cover; /* Масштабування зображення зі збереженням пропорцій та обрізанням */
}

.preview-info {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
background-color: rgba(0, 0, 0, 0.7);
color: white;
font-size: 0.8em;
padding: 2px;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: none; /* Приховати інформацію за замовчуванням */
}

.photo-preview-item:hover .preview-info {
display: block; /* Показувати інформацію при наведенні */
}

.remove-preview-btn {
position: absolute;
top: -10px; /* Зміщено трохи вище, щоб частково виходив за межі */
right: -10px; /* Зміщено трохи вправо, щоб частково виходив за межі */
background-color: rgba(220, 53, 69, 0.8); /* Червоний колір */
color: white;
border: none;
border-radius: 50%;
width: 20px;
height: 20px;
font-size: 0.9em;
line-height: 18px;
text-align: center;
cursor: pointer;
opacity: 0; /* Приховано за замовчуванням */
transition: opacity 0.2s ease-in-out;
z-index: 10; /* Щоб був над зображенням */
}

.photo-preview-item:hover .remove-preview-btn {
opacity: 1; /* Показувати при наведенні на контейнер */
}

.preview-placeholder {
margin-top: 10px;
}

/* Стилі для кнопки "Завантажити фото" */
.upload-button {
    padding: 10px 20px;
    background-color: #28a745; /* Зелений колір */
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1em;
    transition: background-color 0.3s ease;
    margin-top: 10px;
}

.upload-button:hover {
    background-color: #218838;
}

/* Стилі для повідомлень про завантаження (успіх/помилка) */
.upload-message {
    padding: 10px;
    margin-top: 15px;
    border-radius: 5px;
    font-size: 0.9em;
    display: none; /* За замовчуванням приховано */
}

.upload-message.success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.upload-message.error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

/* --- СТИЛІ ДЛЯ ВІДОБРАЖЕННЯ ЗАВАНТАЖЕНИХ ФОТОГРАФІЙ --- */
/* Контейнер для однієї фотографії в галереї */
.photo-container {
    display: flex; /* Робить елементи flex-пунктами */
    align-items: flex-start; /* Вирівнює елементи по верху */
    margin-bottom: 20px; /* Відступ між фотографіями */
    border: 1px solid #ddd; /* Додамо рамку, щоб краще бачити контейнер */
    padding: 10px; /* Внутрішній відступ */
    border-radius: 5px; /* Заокруглені кути */
    background-color: #f9f9f9; /* Легкий фон */
	overflow: hidden; /* Обрезаем увеличенное изображение, чтобы не выходило за рамки контейнера */
}
.photo-container:hover .photo-image {
transform: scale(1.1); /* Увеличение на 10% */
cursor: zoom-in; /* Изменение курсора */
}

/* Стилі для зображення */
.photo-image {
    width: 150px; /* Задаємо ширину 150px */
    height: auto; /* Висота автоматично підлаштовується, зберігаючи пропорції */
    margin-right: 15px; /* Відступ справа від зображення */
    border-radius: 3px; /* Заокруглені кути для зображення */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Легка тінь */
}

/* Стилі для блоку з деталями фотографії */
.photo-details {
    flex-grow: 1; /* Дозволяє цьому блоку займати весь доступний простір */
    font-size: 0.9em; /* Трохи менший шрифт для деталей */
    color: #555; /* М'якший колір тексту */
}

.photo-details div {
    margin-bottom: 5px; /* Відступи між рядками інформації */
}

.photo-path,
.photo-uploader,
.photo-date {
    word-break: break-all; /* Дозволяє тексту переноситися, якщо шлях дуже довгий */
}

/* За бажанням: щоб заголовки були жирними */
.photo-details div strong {
    color: #333;
}

.photo-path {
    font-weight: bold;
    color: #333;
}
/* Стиль для шляху до фотографії, щоб було зрозуміло, що він клікабельний */
.copy-photo-link {
    cursor: pointer; /* Змінюємо курсор на "руку" при наведенні */
    color: #007bff; /* Типовий синій колір посилання */
    text-decoration: underline; /* Додаємо підкреслення, як у посилання */
    word-break: break-all; /* Щоб довгі шляхи переносились */
}

.copy-photo-link:hover {
    color: #0056b3; /* Зміна кольору при наведенні */
}

/* ОНОВЛЕНІ СТИЛІ для повідомлення "Скопійовано!" */
.copy-feedback {
    margin-left: 10px; /* Відступ від посилання */
    color: green; /* Зелений колір тексту */
    font-size: 0.8em; /* Менший розмір шрифту */
    opacity: 0; /* Приховуємо за замовчуванням */
    visibility: hidden; /* Приховуємо, але зберігаємо місце у потоці документа */
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out; /* Плавна анімація */
    white-space: nowrap; /* Щоб текст "Скопійовано!" не переносився */
    display: inline-block; /* Забезпечує коректне відображення поряд з посиланням */
}

.copy-feedback.show {
    opacity: 1; /* Робимо видимим */
    visibility: visible; /* Робимо видимим */
}
.delete-photo-btn {
    background-color: #dc3545; /* Красный фон */
    color: white; /* Белый текст */
    border: none; /* Убрать границу */
    padding: 5px 10px; /* Внутренние отступы */
    border-radius: 5px; /* Скругленные углы */
    cursor: pointer; /* Курсор-указатель при наведении */
    font-size: 0.9em; /* Размер шрифта */
    margin-top: 10px; /* Отступ сверху */
    transition: background-color 0.3s ease; /* Плавный переход цвета при наведении */
}

.delete-photo-btn:hover {
    background-color: #c82333; /* Более темный красный при наведении */
}

.delete-photo-btn:active {
    background-color: #bd2130; /* Еще темнее при нажатии */
}
/* Стили для постраничного вывода (пагинации) в списке фотографий */
.pagination {
    margin-top: 20px;
    padding: 10px 0;
    text-align: center;
    font-size: 1.1em;
}

.pagination a,
.pagination .current-page {
    display: inline-block;
    padding: 8px 14px;
    margin: 0 4px;
    border: 1px solid #ddd;
    text-decoration: none;
    color: #007bff;
    border-radius: 5px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.pagination a:hover {
    background-color: #007bff;
    color: white;
    border-color: #007bff;
}

.pagination .current-page {
    background-color: #007bff;
    color: white;
    border-color: #007bff;
    font-weight: bold;
    cursor: default;
}

@media screen and (max-width:1024px) {
.item{
padding: 10px;
}	
}
@media screen and (max-width:768px) {
body { 
font-size:1.000em; 
word-wrap: break-word;
}
.wrapper{
width: 100%;	
grid-template-columns: 2fr 3fr 0.5fr;	
grid-template-areas: "logotip cabinet nav"
					 "main main main"
					 "footer footer footer";
}
.item{
padding: 5px;
}
.wrapparam{
/*border: 1px solid blue;	*/
max-width: 100%;	
margin: 0px auto;
display: grid;
grid-gap: 5px;
grid-template-columns: 1fr 1fr;	
}
.textxml1{
width:95%;	
}
.textxml2{
width:10%;		
}
.textxml3{
width:95%;	
}
.textxml4{
width:95%;	
}
.textxml5
{
 width:95%;
} 
.textxml6
{
 width:95%;
}
.text-box1
{
width:80%;
}
.text-box3
{
 width:20%;
} 
.text-box4{
width:90%;
}
.text-box7{
width:90%;
}
.text-box8{
width:90%;
}
.knop{
    font-size: 0.875em; 
	padding: 5px;
} 
.knoplogo{
font-size: 0.875em; 
}
.nameuser{
margin:5px 0px 10px 0;	
/*display: inline;*/
} 
/* Меню */ 
input[type=checkbox]{position:absolute;top:-7777px;left:-7777px;background:} input[type=checkbox]:focus{background:none}
label{float:right;display:inline-block;cursor:pointer;margin-right:0px}
input[type=checkbox]:checked ~ nav{display:block} nav{display:none;position:absolute;right:0px;top:50px;background-color:#E8E8E8;padding:0;z-index:99}
nav ul{width:auto}
nav ul li{float:none;padding:0;width:100%; display:table}
nav ul li a{color:black;font-size:1em;padding:10px 30px;display:block;border-bottom:1px solid rgba(225,225,225,0.1)}
nav ul li a:hover {background-color:#CFCFCF;}
/**/
/* Адаптивність для галереї фото */
    .photo-preview-wrapper {
        width: 100px;
        height: 100px;
    }
    .photo-file-name {
        font-size: 0.7em;
    }
    .custom-file-upload,
    .upload-button {
        width: 100%;
        text-align: center;
    }
}