/* Import font */
@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');

.rubik-<uniquifier> {
  font-family: "Rubik", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}

* {
    font-family: 'Rubik', sans-serif;
    box-sizing: border-box;
}

.mw_100_p {
	max-width: 100px;	
}

/* Authorization page */

	.auth-menu-container {
		background-color: #2F2F2F;
	    display: flex; /* Для центрованого контенту */
	    justify-content: center; /* Горизонтальне вирівнювання */
	    align-items: center; /* Вертикальне вирівнювання */
	}

    .auth-body {
        font-family: Arial, sans-serif;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
    }

    .auth-container {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        width: 100%;
        max-width: 1000px;
        gap: 40px;
        border-radius: 12px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }

    .auth-block {
        flex: 1 1 100%;
        max-width: 48%;
        background-color: #e4e4e4;
        text-align: center;
        padding: 20px;
        border-radius: 8px;
    }

    .auth-left {
        background-color: #2F2F2F;
    	display: flex; /* Для центрованого контенту */
    	justify-content: center; /* Горизонтальне вирівнювання */
    	align-items: center; /* Вертикальне вирівнювання */
    }

    .auth-right {
        background-color: #FFFFFF;
    }

    .auth-main-padding {
    	padding: 1rem;
    }

    @media (max-width: 768px) {

    	.auth-main-padding {
    		padding-left: 0;
    		padding-right: 0;
    	}

	    .auth-block {
	    	padding: 0;
	        max-width: 100vw;
	    }

	    .auth-logo-img {
	    	max-width: 90vw;
	    	margin: 20px 40px 20px 40px;
	    }

		.auth-container {
		    display: flex;
		    flex-direction: column; /* Змінюємо напрямок на колонку на малих екранах */
		    min-height: 100vh; /* Розтягування на всю висоту екрану */
		    min-width: 100vw;
		    background-color: #FFFFFF;
		    border-radius: 0;
		    margin: 0;
		    padding: 0;
		    row-gap: 0;
		}

		.auth-left {		    
		    flex: 0 0 30%;
    		width: 100%;
    		display: flex;
    		align-items: center;
    		justify-content: center;
    		text-align: center;
    		border-radius: 0;
    		border-radius: 0 !important;
		}

		.auth-right {
		    width: 100vw; /* Займають всю ширину */
		    height: 70%;
		    border-radius: 0 !important;
			flex: 1; /* Займає залишковий простір */
		    width: 100%; /* Розтягується на всю ширину */
		    display: flex;
		    align-items: flex-start; /* Центрування контенту по вертикалі */
		    justify-content: center; /* Центрування контенту по горизонталі */
		    background-color: #FFFFFF; /* Для перевірки, можна видалити */		    
		}

		.auth-numtel-label {
			display: none !important;
		}

		.mainpage_container_input {
	        flex-direction: column; /* Переводимо flex-контейнер у вертикальний режим */
	        align-items: stretch; /* Елементи розтягуються на всю ширину */
	    }

	    .mainpage_container_input > div {
	        width: 100%; /* Забезпечує повну ширину кожного блоку */
	    }

	    #invalid_auth_login {
	        position: static; /* Скасовує position-absolute, щоб елементи займали своє місце */
	        margin-top: -48px; /* Коригування, щоб було ближче до input, якщо потрібно */
	    }

	    #valid_auth_login {
	        position: static; /* Скасовує position-absolute, щоб елементи займали своє місце */
	        margin-top: 5px; /* Коригування, щоб було ближче до input, якщо потрібно */

		}

	    .send-password-button {
	        margin-top: 27px; /* Відступ для кнопки */
	    }		

	    .auth-block-auth {
	    	margin: 0 10% 0 10%;
	    }

		.mainmenu_button, .mainmenu_button:focus {
			width: 100%;
			font-size: 1.1rem !important;			
		}

		.auth-input-login {
			border-radius: 10px !important;
			height: 100%;
			font-size: 1.1rem !important;
		}

		.auth-input-password {
			height: 90% !important;
			border-radius: 10px 0 0 10px;
			border-right: 0 !important;
		}

		.auth-password-input {
			border-radius: 0 10px 10px 0 !important;
			border-left: 0 !important;
		}
		
		.auth-mainpage-title {
			text-align: center !important;
			font-size: 1.5rem !important;
		}

		.auth-mainpage-text {
			font-size: 1.1rem !important;
			text-align: center !important;
		}

		.btn.auth-button-enter, .btn.auth-button-enter:hover, .btn.auth-button-enter:active {
			font-size: 1.1rem !important;
		}


    }


/* Background */

.menu_container {
	background-color: #2F2F2F !important;
	min-height: 100vh; /* Висота екрану */
    display: flex; /* Для центрованого контенту */
    justify-content: center; /* Горизонтальне вирівнювання */
    align-items: center; /* Вертикальне вирівнювання */    
}

	.main-site-container {
		padding: 0 !important;
	}

@media (max-width: 768px) {
	.main-container-reg {
		padding-left: 0;
		padding-right: 0;
	}

	.body-content-container {
		width: 100vw;
	}

	.main-site-container {
		padding: 0 !important;
	}
}

.w_50p {
	width: 50%;
}

.no_br_right {
	 border-radius: 10px 0 0 10px;
}

.no_br_left {
	 border-radius: 0 10px 10px 0;
}

.mainpage_title {
	font-size: 1.19rem;
	color: #2F2F2F;
	font-weight: 500;
	line-height: 2.5;
	text-align: left;
}

.mainpage_text {
	font-size: 0.87rem;
	color: #767B8E;
	font-weight: 400;
	text-transform: none;
	text-align: left;
	display: block;
}

.mainpage_link {
	color: #1263DC;
	font-size: 0.87rem;
	text-decoration: underline;
}

.mainpage_input {
    height: 100%; /* Зробимо висоту поля на 100% */
    flex-grow: 1; /* Поле вводу займає всю доступну ширину */
}

.mainpage_input::placeholder {
    color: #767B8E; /* Встановлюємо темніший блакитний відтінок */
    opacity: 1; /* Необов'язково, щоб зробити колір більш насиченим */
}

.mainpage_input:focus {
	outline: none;
	border-color: #BBBBBB;
}

.mainpage_input:focus::placeholder {
	letter-spacing: -2.5px !important;
}


/* Для браузера Firefox */
.mainpage_input:-moz-placeholder {
    color: #767B8E;
    opacity: 1;
}

/* Для браузера Internet Explorer */
.mainpage_input:-ms-input-placeholder {
    color: #767B8E;
}

.mainmenu_button, .mainmenu_button:focus {
	display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #000000;
    font-size: 0.87rem;
    padding: 0 1.25rem;
    height: 2.125rem;
    background-image: linear-gradient(45deg, #D8AE5E, #F2D7A5);
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    border: 1px solid rgba(217, 217, 217, 1) !important;
    border-left: 0 !important;
    transition: background 0.3s ease;	
    color: #000000 !important;
}

.mainmenu_button:hover {
	color: #000000 !important;
	display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 0.87rem;
    padding: 0 1.25rem;
    height: 2.125rem;
    background-image: linear-gradient(45deg, #D8AE5E, #F2D7A5);
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    border: 0 !important;
    border-left: 0 !important;
    transition: background 0.3s ease;	
	box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
}

.mainmenu_button:active {
	display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #000000 !important;
    font-size: 0.87rem;
    padding: 0 1.25rem;
    height: 2.125rem;
    background-image: linear-gradient(45deg, #D8AE5E, #F2D7A5);
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    border: 0 !important;
    border-left: 0 !important;
    transition: background 0.3s ease;	
	box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25) inset;
}

.password_field, .password_field:focus {
	outline: none !important;
	border-color: #D9D9D9 !important;
}

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

.login_input {
	border-radius: 10px;
	border: 1px solid rgba(217, 217, 217, 1)	
}

.d-flex {
    display: flex;
    align-items: center;
}

.flex-grow-1 {
    flex-grow: 1;
}

.mainpage_message {
	 top: 93%; 
	 left: 0%;
	 text-align: left;
}

/* Стиль для стандартного стану іконки */
.bx {
  color: #6c757d; /* колір за замовчуванням */
  transition: color 0.3s ease;
}

/* Стиль для стану при натисканні */
.bx:active {
  background: linear-gradient(90deg, #ff7e5f, #feb47b);
  -webkit-background-clip: text;
  color: transparent; /* щоб застосувати градієнт лише до тексту */
}

/* Main menu */

.mainmenu_icon_main {
	content: url('/img/mainmenu_main.svg');	
}

.mainmenu_icon_monitoring {
	content: url('/img/mainmenu_monitoring.svg');	
}

.mainmenu_icon_spr {
	content: url('/img/mainmenu_spr.svg');	
}

.mainmenu_icon_biling {
	content: url('/img/mainmenu_biling.svg');	
}

.mainmenu_icon_oferta {
	content: url('/img/mainmenu_oferta.svg');
}

.mainmenu_icon_object {
	content: url('/img/mainmenu_object.svg');	
}

.mainmenu_icon_order {
	content: url('/img/mainmenu_order.svg');	
}

.mainmenu_icon_setting {
	content: url('/img/mainmenu_setting.svg');	
}

.mainmenu_icon_logout {
	content: url('/img/mainmenu_logout.svg');	
}

.menu-icon.imainmenu {
	width: 1rem;	
}

.mainmenu_text {
	color: #FFFFFF;
	font-weight: 500;
}

.mainmenu_li {
	border-radius: 10px;
	margin: 0 18px 0 18px;
	padding: 10px 16px 10px 16px;
}

.mainmenu_li:hover, .mainmenu_li:active, .menu-item.active .mainmenu_li {
	background: linear-gradient(#D8AE5E, #F2D7A5);
	border-radius: 10px;
	margin: 0 16px 0 16px;
}

.menu-item {
	margin: 2px 0 2px 0;
}


@media (max-width: 768px) {
	.mainmenu_li:hover, .mainmenu_li:active, .menu-item.active .mainmenu_li {
		background: none;
	}

	.menu-item.active {
		 padding-left:31%; 
		 background-image: linear-gradient(45deg, #D8AE5E, #F2D7A5);
	}

	.menu-item {
		margin: 3% 0 3% 0;
		padding-left:31%;
	}

	.menu_container {
		height: auto; /* Висота екрану */
		background-color: #2F2F2F !important;
	    display: flex; /* Для центрованого контенту */
	    justify-content: center; /* Горизонтальне вирівнювання */
	    align-items: stretch; /* Вертикальне вирівнювання */
	}

	.mainmenu_li {
		border-radius: 0 !important;
		margin: 0 16px 0 16px !important;
		padding: 5px 0 5px 0 !important;
	}

	.b-menu-block {
		 padding: 0;
	}

	.b-menu-ul {
		margin-top: 10%;
		max-width: 100vw;
		min-width: 99vw;
	}

	.menu-link.mainmenu_li, .menu-link.mainmenu_li:hover, .menu-link.mainmenu_li:active {
		margin-left : 0% !important;
		margin-right : 0% !important;
	}

	.menu-icon-open,
	.menu-icon-closed {
    	transition: opacity 0.3s ease; /* Анімація для плавності */
	}

	.big-block {
		display: none;
	}

	.big-header {
		margin-bottom: 0 !important;
	}

	.small-block {
		display: inline-block !important;
	}

	.nav-arrow-left {
		margin: -4px 5px 0 0;
		height: 19px;
	}

	.small-text {
		 color:#2f2f2f !important;
	}

	body {
		background-color: #EEEEEE;
	}


}

.small-block {
	display: none;
}


/* Title сторінок */

.shadow_block {
	border-radius: 10px;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25); /* Додає тінь до рамки */
}

/* Зміна кольору дати/часу */ /* Зміна кольору тексту привітання */ /* Зміна кольору імені користувача */
.navbar-search-wrapper .now-time,  .navbar-nav-right .nav-link .d-block, .navbar-nav-right .nav-link {
    color: #000000; /* Колір тексту для дати/часу */
}

.title_active {
	font-weight: 500;
	font-style: 56px;
}

/* Main Page */

.apexcharts-legend {
    display: flex;
    flex-direction: column;
    justify-content: center; /* Центрування по вертикалі */
    align-items: flex-start;
    height: 100%;
}

.filter_value::placeholder {
	color: #767B8E !important;

}

.filter_value:focus {
	border: 1px solid rgba(217, 217, 217, 1) !important;
}

.form-control.filter_value, .form-control.filter_value:focus {
	border: 1px solid rgba(217, 217, 217, 1) !important;
}

/* Зміна кольору фону і тексту кнопок */
.btn.btn-outline-primary {
    background-color: #007bff; /* Колір фону кнопки */
    color: #ffffff; /* Колір тексту кнопки */
    border-color: #007bff; /* Колір рамки кнопки */
}

/* Зміна кольору кнопок при наведенні */
.btn.btn-outline-primary:hover {
    background-color: #0056b3; /* Змінений колір фону при наведенні */
    color: #ffffff; /* Колір тексту при наведенні */
    border-color: #0056b3; /* Колір рамки при наведенні */
}

/* Зміна кольору кнопок при натисканні */
.btn.btn-outline-primary:active {
    background-color: #004085; /* Змінений колір фону при натисканні */
    color: #ffffff; /* Колір тексту при натисканні */
    border-color: #004085; /* Колір рамки при натисканні */
}

.mon_tr dt {
    font-weight: 500; 
}

.mon_tr dd a {
	font-weight: 400;
	color: #767B8E;
}

/* Стиль для кнопки "Очистити" */
.main_clear_btn {
    background-color: white;
    color: #6c757d; /* Темний колір тексту */
    border: 1px solid #D9D9D9 !important; /* Колір рамки */
}

.main_clear_btn:hover {
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.25), 
                inset 0 1px 3px rgba(255, 255, 255, 0.7);
    color: #6c757d; /* Темний колір тексту */
    background-color: white; /* Світло-зелений колір фону */
}

/* Стиль для кнопки "Фільтрувати" */
.btn.main_filter_btn {
    background-color: #9BC1BC; /* Світло-зелений колір фону */
    color: white; /* Білий текст */
    border: 1px solid #D9D9D9; /* Колір рамки відповідає кольору фону */
}

.btn.main_filter_btn.active {
    background-color: #9BC1BC; /* Світло-зелений колір фону */
    color: white; /* Білий текст */
    border: 1px solid #D9D9D9; /* Колір рамки відповідає кольору фону */
    box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.7), /* Глибша внутрішня тінь */
                0 0 7px rgba(255, 255, 255, 0.5); /* Яскравіша зовнішня тінь */
}

.btn.main_filter_btn:hover {
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.25), 
                inset 0 1px 3px rgba(255, 255, 255, 0.7);
    color: white;
    background-color: #9BC1BC; /* Світло-зелений колір фону */
}

/* Monitoring */

h5.h_title {
	font-size: 1.56rem;
	color: #000000 !important;
	font-weight: 400;
}

	.mon-table {
	    display: flex;
	    flex-direction: column;	    
	}

	.mon-row {
	    display: flex;
	    border-bottom: 1px solid #767B8E;
	}

	.mon-row:last-child {
	    border-bottom: none;
	}

	.mon-cell {
	    padding: 10px;
	    box-sizing: border-box;
	    text-align: center;
	}

	.mon-cell.a-left {
		text-align: left;
	}

	.mon-cell.m-header {
		font-size: 0.87rem;
		color: #000000;
		font-weight: 500;
		text-transform: uppercase;
		letter-spacing: 1px;
	}

	.mon-cell, .mon-cell a {
		font-size: 0.87rem;
		color: #000000;
		font-weight: 400;
	}

	.mon-col-1 {
	    flex: 1;
	}

	.mon-col-2 {
	    flex: 4;
	}

	.mon-col-3 {
	    flex: 2;
	}

/*
.mon_table th {
	font-size: 0.87rem !important;
	color: #000000 !important;
	font-weight: 500;
}

.mon_table td, .mon_table td a {
	font-size: 0.87rem;
	color: #000000 !important;
	font-weight: 400;
}

.mon_table tr.d_gr {
	background-color: #EEEEEE;
}

.mon_table td div.full_short_group p {
	color: #31D02E;
}

	.full_short_group p {
		margin-bottom: 0;
	}

	.mon_submit, .mon_submit:hover {
		background-color: #9BC1BC;
		padding: 0.63rem 1.25rem;
	}
*/
/*.mon_search::placeholder {
	color: #767B8E;
	border-color: #DDDDDD;
}

.placeholder-alt {
    visibility: hidden;
    position: absolute;
    left: 1.25rem;
    top: 100%;
    background-color: #FFFFFF;
    color: #767B8E;
    padding: 5px 15px 5px 15px;
    border-radius: 0;
    text-transform: none;
    font-size: 0.75rem;
    font-weight: 300;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}


.mon_search:hover + .placeholder-alt {
    visibility: visible;
    opacity: 1;
}
*/
	.mon_search::placeholder {
		color: #767B8E;
		border-color: #DDDDDD;
		font-size: 0.75rem;
	}

	.mon_search:focus {
    	border-color: #BBBBBB; /* Той же самий або інший бажаний колір */
    	box-shadow: 0 0 0 0.05rem #BBBBBB; /* Опціонально: зміна тіні */
	}

	.mon-small-table {
		display: none;
	}

	.title-page-padding {
		padding-top: 1.625rem !important;
		padding-bottom: 1.625rem !important;
	}

	@media (max-width: 768px) {

		.title-page-padding {
			padding-top: 0.625rem !important;
			padding-bottom: 1.625rem !important;
		}

		.small-backg {
			background-color: #EEEEEE;
			border: 0;
			box-shadow: none;
		}

		.small-padding {
			padding-top: 0.8rem !important;
		}

		.mon-table {
	    	display: none;
	    }

        .mon-small-table {
            display: flex;
            flex-direction: column;
            gap: 10px; /* Відступ між блоками */
	    	background-color: #EEEEEE;
	    	border: 0 !important;
        }

        .mon-small-block-container {
        	box-shadow: 0px 4px 4px 0px #00000040;
        	background-color: #FEFEFF;        	
        }

        .mon-small-row {
            display: flex;
            padding: 10px;
    		flex-wrap: wrap; /* Дозволяє перенесення дочірніх елементів */
        }

        .mon-small-row div {
        	font-size: 0.7rem;
        }

        .mon-small-col-1 {
            flex: 2;
            flex-shrink: 0;
            width: 70%;
        }

        .mon-small-col-2 {
        	flex: 1;
    		display: flex;
    		flex-direction: column;
    		justify-content: center;  
    		align-items: center;          
    		gap: 7px;
    		min-width: 0; /* Дозволяє блоку стискатися */
    		max-width: 100px; /* Гарантує, що блок не розширюватиметься за межі батьківського контейнера */
        }

        .mon-small-col-2 > * {
 		   	max-width: 100%; /* Обмежує елементи по ширині контейнера */
    		word-wrap: break-word; /* Переносить довгі слова */
    		text-align: center; /* Вирівнює текст, якщо це потрібно */
		}


		.mon-small-col-3 {
    		padding: 10px;
    		box-sizing: border-box;
			background-color: #EEEEEE;    		
			gap: 0px;
			border-radius: 0px 0px 10px 10px;
			opacity: 0px;
			box-shadow: 0px 4px 4px 0px #00000040;
		}

		.mon-small-inner-table {
		    display: table;
		    width: 100%; /* Таблиця займає всю ширину */
		    border-collapse: collapse; /* Для зняття зайвих проміжків */
		}

		.mon-small-inner-row {
		    display: table-row; /* Кожен рядок поводиться як <tr> */
		    width: 100%;
		}

		.mon-small-inner-col-1,
		.mon-small-inner-col-2 {
		    display: table-cell; /* Кожна колонка поводиться як <td> */
		    vertical-align: top; /* Вирівнювання по вертикалі */
		}

		.mon-small-inner-col-1 {
		    width: 30%; /* Ширина першої колонки */
		    color: #767B8E;
		    font-weight: 400;
		}

		.mon-small-inner-col-2 {
		    width: 70%; /* Ширина другої колонки */
		}

		.mon-small-inner-col-2 a {
		    color: #000000;
		    font-weight: 400;
		}

		.mon-small-col-2-title {
		    color: #767B8E;
		    font-weight: 400;			
		}

		.mon-small-col-2-text {
		    color: #000000;
    		font-weight: 400;
    		display: inline-block;
    		overflow-wrap: anywhere; /* Забезпечує перенесення довгих слів */
    		word-break: break-word; /* Переносить слова, якщо вони занадто довгі */
    		white-space: normal; /* Забезпечує звичайний перенос рядків */
    		text-align: center; /* Вирівнювання тексту */
		}

		.mon-small-col-3 {
		    display: table;
		    width: 100%; /* Таблиця займає всю ширину */
		    border-collapse: collapse; /* Для зняття зайвих проміжків */			
		}

		.mon-small-detail-row {
		    display: table-row; /* Кожен рядок поводиться як <tr> */
		    width: 100%;	
		    border-bottom: 1px solid #767B8E;		
		}

		.mon-small-detail-row:last-child {
			border: 0;
		}

		.mon-small-detail-row div {
			font-size: 0.7rem;
		}

		.mon-small-detail-col-1, .mon-small-detail-col-2, .mon-small-detail-col-3 {
		    display: table-cell; /* Кожна колонка поводиться як <td> */
		    vertical-align: top; /* Вирівнювання по вертикалі */			
		    padding: 15px 0 15px 0;
		}

		.mon-small-detail-col-1 a, .mon-small-detail-col-2 a, .mon-small-detail-col-3 {
			color: #000000;
		}

		.mon-small-detail-col-1 {
			padding-left: 10px;
			width: 43%;
		}

		.mon-small-detail-col-2 {
			width: 14%;
		}

		.mon-small-detail-col-3 {
			width: 43%;
			text-align: center;
		}

	}
/*
th.search_field {
	position: relative;
}
*/
/* Working */

label.form-label.label_filter {
	font-size: 0.93rem;
	color: #000000;
	font-weight: 400;
}

.filter_input {
	border: 1px solid #DEDEDE;
	border-radius: 10px;
}

.filter_input:focus {
	border: 1px solid #BBBBBB;
	border-radius: 10px;
}

.button_export, .button_export:focus, .button_agree, .button_agree:focus  {
	color: #000000 !important;
	background-image: linear-gradient(45deg, #D8AE5E, #F2D7A5) !important;
	border-radius: 10px !important;
	border: 0 !important;
	transition: background 0.3s ease !important;
	margin-right: 1rem !important;
	font-size: 0.87rem !important;
	outline: none !important;
}

.button_export:hover, .button_agree:hover {
	color: #000000 !important;
	background-image: linear-gradient(45deg, #D8AE5E, #F2D7A5) !important;
	border-radius: 10px !important;
	border: 0 !important;
	transition: background 0.3s ease !important;
	margin-right: 1rem !important;
	font-size: 0.87rem !important;
	box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
}

.button_export:active, .button_agree:active {
	color: #000000 !important;
	background-image: linear-gradient(45deg, #D8AE5E, #F2D7A5) !important;
	border-radius: 10px !important;
	border: 0 !important;
	transition: background 0.3s ease !important;
	margin-right: 1rem !important;
	font-size: 0.87rem !important;
	box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25) inset;
}

.checkbox_agree .form-check-input:focus {
	border-color: #D8AE5E;
	box-shadow: 0 2px 4px 0 rgba(242, 215, 165, .4);
}

.checkbox_agree .form-check-input:checked {
	background-color: #D8AE5E;
	border-color: #D8AE5E;
	box-shadow: 0 2px 4px 0 rgba(242, 215, 165, .4);
}

.button_export img {
	margin: -2px 7px 0 0;
}

.title_export {
	font-size: 1rem !important;
	margin-left: 0.37rem !important;
}

#dt-search-0 {
    border: 1px solid rgba(217, 217, 217, 1);
    padding: 8px; /* Внутрішні відступи */
    border-radius: 10px; /* Закруглені кути */
    background-color: #FFFFFF; /* Фон поля */
    color: #D9D9D9; /* Колір тексту */
}

#dt-search-0::placeholder {
    color: #D9D9D9; /* Зміна кольору Placeholder */
    opacity: 1; /* Для забезпечення сумісності в різних браузерах */
}

#dt-length-0 {
    border: 1px solid rgba(217, 217, 217, 1);
    border-radius: 10px; /* Закруглені кути */
    background-color: #FFFFFF; /* Фон поля */
    color: #767B8E; /* Колір тексту */	
    font-weight: 400;
}

label[for="dt-length-0"] {
    color: #767B8E; /* Встановлення бажаного кольору */
    font-weight: 400; /* Додатково, якщо потрібно зробити текст жирним */
}

div.dt-length, div.dt-info {
	margin-left: 1.69rem;
}

button.dt-paging-button.current {
	border-radius: 10px !important; /* Закруглені кути */
}

button.dt-paging-button:hover {
	border-radius: 10px !important; /* Закруглені кути */
}

/* Object */

	.object-card {
		background-color: #FFFFFF;
		padding: 0.7rem 1.25rem 0.7rem 1.25rem;
	}

	.object-table {
	    display: table;
	    width: 100%; /* Таблиця займає всю ширину */
	    border-collapse: collapse; /* Для зняття зайвих проміжків */
	}

	.object-row {
	    display: table-row; /* Кожен рядок поводиться як <tr> */
	    width: 100%;
	}

	.object-col-1,
	.object-col-2 {
	    display: table-cell; /* Кожна колонка поводиться як <td> */
	    vertical-align: top; /* Вирівнювання по вертикалі */
	    padding: 0.5rem 0 0.5rem 0;
	}

	.object-col-1 {
	    width: 30%; /* Ширина першої колонки */
	    color: #767B8E;
	    font-size: 1.125rem;
	    font-weight: 500;
	}

	.object-col-2 {
	    width: 70%; /* Ширина другої колонки */
	    font-size: 1.125rem;
	    color: #000000;
	}

	.object_block dt {
		font-size: 1.125rem !important;
		color: #000000 !important;
		font-weight: 500;
	}

	.object_block dd {
		font-size: 1.125rem !important;
		color: #767B8E !important;
		font-weight: 400;
	}


	.object_block {
		padding-left: 1.43rem;
	}

	.object-label {
		padding-left: 0;
		padding-right: 0;
		color: #000000;
		vertical-align: middle;
	}

	.object-input {
	}

	.object-navigator-change {
		margin-bottom: 20px;
	}

	.object-navigator-change-content {
		margin-left: -20px;
	}


	.personal_label {
		font-size: 1.125rem !important;
		color: #000000 !important;
		font-weight: 500;
		text-transform: none;
	}

	.personal_select {
		font-size: 1rem;
		color: #767B8E;
		font-weight: 400;
	}

	.personal_select:focus {
		border-color: #BBBBBB;
	}

	.personal_title {
		font-size: 1.125rem !important;
		color: #000000 !important;
		font-weight: 500;
		text-transform: uppercase;
	}



	@media (max-width: 768px) {
		.custom-select {
		  position: relative;
		  display: inline-block;
		  width: 60%;
		  margin-left: auto;
		}

		.select-button {
		  width: 100%;
		  padding: 10px;
		  font-size: 16px;
		  cursor: pointer;
		  border: 1px solid #ccc;
		  background-color: #fff;
		  display: flex;
		  align-items: center;
		  gap: 10px;
		  border-radius: 10px;
		  background: linear-gradient(90deg, #D9AF60 0%, #F2D7A5 100%);
		}

		.select-button img.selected-image {
		  width: 20px;
		  height: 20px;
		  display: none; /* Приховано до вибору */
		}

		.options {
		  display: none;
		  position: absolute;
		  top: 100%;
		  left: 0;
		  width: 100%;
		  border: 1px solid #ccc;
		  background-color: #fff;
		  z-index: 10;
		  max-height: 200px;
		  overflow-y: auto;
		}

		.option {
		  display: flex;
		  align-items: center;
		  padding: 10px;
		  cursor: pointer;
		}

		.option img {
		  width: 20px;
		  height: 20px;
		  margin-right: 10px;
		}

		.option:hover {
		  background-color: #f0f0f0;
		}

		.object-title {
			font-size: 1.2rem !important;
		}

		.object-col-1 {
			width: 40%;
		    color: #767B8E;
		    font-size: 0.9rem;
		    font-weight: 400;
		}

		.object-col-2 {
			width: 60%;
		    font-size: 0.9rem;
		    color: #000000;
		}

		.object-navigator-change {
			margin-top: 20px;
		}

		.object-label {
			font-weight: 400 !important;
			color: #000000;
		}

		.personal_select {
			font-size: 0.9rem;
		}


	}

.object_navigator li img {
	margin-right: 5px;
	margin-top: -1px;
}

.object_navigator li button {
	color: #000000 !important;
}

.object_navigator .active {
	background: linear-gradient(90deg, #D8AE5E 0%, #F2D7A5 100%);
	border-radius: 10px;
}

	/* History */

    .history-table {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .history-row {
        display: flex;
        border-bottom: 1px solid #767B8E;
    }

    .history-row:last-child {
        border-bottom: none;
    }

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

    .history-cell.head {
    	font-size: 0.938rem;
    	font-weight: 500;
    	color: #000000;
    	text-transform: uppercase;
    	letter-spacing: 1px;
    }

    .history-data {
    	font-size: 0.938rem;
    	font-weight: 400;
    	color: #000000;
    }

    .history-header {
        font-weight: bold;
    }

    .history-col-1 {
        flex: 1;
    }

    .history-col-2 {
        flex: 2;
    }

    .history-col-3 {
        flex: 3;
    }

    .history-col-4 {
        flex: 4;
    }

    .history-col-5 {
        flex: 5;
    }

    .history-col-6 {
        flex: 6;
    }

    .history-description {
        display: none;
    }

    @media (max-width: 768px) {
        .history-header {
            display: none;
        }

        .history-row {
            flex-direction: column;
        }

        .history-cell {
            flex: none;
            width: 100%;
            display: flex;
        }

        .history-cell.n-obj {
        	display: none;
        }

        .history-description {
            display: block;
            text-align: start;
            flex: 1;
        }

        .history-data {
            flex: 2;
            text-align: start;
            margin-left: 10px;
        }
    }

    .navigation {
    	display: flex;
    	width: 100%;
    	justify-content: center;
    }

    .navigation-item {
	  padding: 5px 10px;
	  cursor: pointer;    	
    }

    .navigation-link {
		color: rgb(105, 122, 141);
		background-color: #FFFFFF;
		border: 0;
		border-radius: 10px;
		padding: 9px 14px 9px 13px;
  		cursor: pointer;    	
      }

    .navigation-link:hover {
		background-image: linear-gradient(rgb(88, 88, 88) 0%, rgb(17, 17, 17) 100%);
		border: 1px solid rgb(17, 17, 17);	
		color: rgb(255, 255, 255);
		border-radius: 10px;
		padding: 9px 14px 9px 13px;
  		cursor: pointer;    	
      }

    .navigation-link.active {
  		border: 1px solid rgba(0, 0, 0, 0.3);
	    box-shadow: 0 .125rem .25rem rgba(105, 108, 255, .4)
    }

    /* Tech */

    .tech-table {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .tech-row {
        display: flex;
        border-bottom: 1px solid #767B8E;
    }

    .tech-row:last-child {
        border-bottom: none;
    }

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

    .tech-cell.head {
    	font-size: 0.938rem;
    	font-weight: 500;
    	color: #000000;
    	text-transform: uppercase;
    	letter-spacing: 1px;
    }

    .tech-data {
    	font-size: 0.938rem;
    	font-weight: 400;
    	color: #000000;
    }

    .tech-header {
        font-weight: bold;
    }

    .tech-col-1 {
        flex: 1;
    }

    .tech-col-2 {
        flex: 2;
    }

    .tech-col-3 {
        flex: 3;
    }

    .tech-col-4 {
        flex: 4;
    }

    .tech-col-5 {
        flex: 5;
    }

    .tech-col-6 {
        flex: 6;
    }

    .tech-description {
        display: none;
    }

    @media (max-width: 768px) {
        .tech-header {
            display: none;
        }

        .tech-row {
            flex-direction: column;
        }

        .tech-cell {
            flex: none;
            width: 100%;
            display: flex;
        }

        .tech-cell.n-obj {
        	display: none;
        }

        .tech-description {
            display: block;
            text-align: start;
            flex: 1;
        }

        .tech-data {
            flex: 2;
            text-align: start;
            margin-left: 10px;
        }
    }

    /* Grafic */

    .grafic-table {
        display: flex;
        flex-direction: row;
        width: calc(100% - 1.5rem * 2);
        margin: 0 1.5rem;
    }

    .grafic-row {
        display: flex;
        width: 100%;
        flex-direction: column;
    }

    .g-row-first {
    	flex: 2;
    }

    .g-row-last {
    	flex: 1;
    }

    .grafic-col {
        display: flex;
        width: 100%;
        flex-direction: row;
        padding: 0.55rem 0;
        border-bottom: 1px solid #767B8E;
        text-align: center;
    }

    .grafic-col.save-button {
    	border-bottom: 0;
    }

    .grafic-col-title {
    	font-size: 0.938rem;
    	font-weight: 400;
    	color: #000000;
    	flex: 2;
    	text-align: left;
    	align-items: center;
    }

    .grafic-col-title:not(.small-block) {
    	display: flex;
    }

    .grafic-col-data {
    	font-size: 0.938rem;
    	font-weight: 500;
    	color: #000000;
    	flex : 1;
    	display: flex;
    	justify-content: center;
    	text-align: center;
    	width: 100%;
    }

    .grafic-col-empty {
    	flex: 7;
    }

    .grafic-col-data.save-button {
    	justify-content: flex-end;
    }

    .grafic-table-input {
    	width: 6.5rem;
    	text-align: center;
    }

    @media (max-width: 768px) {
    	.grafic-table {
    		flex-direction: column;
    	}

   	    .grafic-col-title.first-element {
   	    	display: none;
   	    }

   	    .grafic-col.save-button {
   	    	gap: 27px;
   	    }

	}    

	/* Biling */

	.biling-table {
		display: flex;
		flex-direction: column;
        width: calc(100% - 1.5rem * 2);
        margin: 0 1.5rem;		
	}

	.biling-row {
		display: flex;
		flex-direction: row;
		padding: 0.55rem 0;
		width: 100%;
		border-bottom: 1px solid #767B8E;
	}

	.biling-row:last-child {
		border-bottom: 0;
	}

	.biling-col {
		text-align: center;
		align-content: center;
	}

	.bc-1 {
		flex: 1;
	}

	.bc-2 {
		flex: 2;
	}

	.bc-3 {
		flex: 3;
	}

	.bc-4 {
		flex: 4;
		text-align: left;
	}

	.bc-5 {
		flex: 5;
	}

	.bil-descr {
		display: none;
	}

	.b-head {
    	font-size: 0.938rem;
    	font-weight: 500;
    	color: #000000;
    	text-transform: uppercase;
	}

	.b-data, .b-data:hover {
    	font-size: 0.938rem;
    	font-weight: 400;
    	color: #000000;
	}

    @media (max-width: 768px) {
    	.biling-row.biling-header {
    		display: none;
    	}

		.biling-table {
	        width: 100%;
	        margin: 0;
	        row-gap: 10px;
		}

		.biling-row {
			display: flex;
			flex-direction: column;
			padding: 0.55rem 0;
			width: 100%;
			border-radius: 10px;
		    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25); /* Додає тінь до рамки */
        	background-color: #FEFEFF;             	
		}

		.biling-col {
			display: flex;
			flex-direction: row;
			width: 100%;
			margin: 0.2rem 0;
		}

		.bil-descr {
			display: flex;
			flex: 1;
			font-size: 0.7rem;
			padding-left: 1rem;
		}

		.bil-data {
			display: flex;
			flex: 2;
			font-size: 0.7rem;
		}

		.b-data {
			font-size: 0.7rem;
		}

		.bc-5 {
			display: none;
		}

		.biling-col.bc-3 {
			
		}

		.biling-col.bc-3 .bil-data {
			display: flex;
    		justify-content: flex-end;
    		align-items: center;
    		width: 100%;
    		text-align: right;
    	}

		.biling-col.bc-3 .bil-descr {
			display: none;
		}
    }

    .bdet-table {
    	display: flex;
		flex-direction: row;
        width: calc(100% - 1.5rem * 2);
        margin: 0 1.5rem;		
    }

    .bdet-row-left {
    	flex: 2;
    }

    .bdet-row-right {
    	flex: 4;
    }

    .bdet-row-delim {
    	flex: 1;
    	margin-right: 5rem;
    }

    .bdet-block {
    	display: flex;
    	flex-direction: row;
    	margin: 0.7rem 0;
    }

    .bdet-col {
    	flex: 1;
		font-size: 0.95rem;
		color: #000000;
		font-weight: 400;
    }

    .bdet-col.input-pay {
    	margin-right: 2rem;
    }

    .bdet-col.head {
		font-weight: 500;
		text-transform: uppercase;    	
    }

    .bdet-row-delim {
    	border-right: 1px solid #767B8E;
    }


    @media (max-width: 768px) {
	    .bdet-table {
			flex-direction: column;
	        padding-bottom: 0 !important;
	    }

	    .bdet-row-delim {
    		display: none;
    	}
	    .bdet-row-left, .bdet-row-right {
    		flex: 1;
    	}
    	.bdet-col {
    		font-size: 0.7rem;
    	}

	}

/* Detail */


.personal_table th {
	font-size: 1.125rem !important;
	color: #000000 !important;
	font-weight: 500;
	text-transform: none;	
}

.personal_table td {
	font-size: 0.938rem !important;
	color: #000000 !important;
	font-weight: 400;
	text-transform: none;	
}

.detail_access_no {
	color: #BC5241;
	font-weight: 400;
	font-size: 0.938rem;
	text-transform: uppercase;
	border: 1px solid rgba(188, 82, 65, 1);
	border-radius: 10px;
	background: rgba(188, 82, 65, 0.25);
	padding: 5px 25px 5px 25px;
}

.detail_access_yes {
	color: #31D02E;
	font-weight: 400;
	font-size: 0.938rem;
	text-transform: uppercase;
	border: 1px solid rgba(49, 208, 46, 1);
	border-radius: 10px;
	background: rgba(49, 208, 46, 0.25);
	padding: 5px 25px 5px 25px;
}

.detail_delete_person {
	border: 1px solid rgba(217, 217, 217, 1);
	background: rgba(255, 255, 255, 1);
	color: #767B8E;
	font-weight: 400;
	font-size: 0.938rem;
	border-radius: 10px;	
	padding: 5px 25px 5px 25px;
}

.personal_table td img {
	margin: -5px 10px 0 0;
}

.button_export.add_person {
	padding: 9px 21px 9px 21px;
	font-size: 0.938rem !important;
}

.icon_generate_code {
	margin: -1px 5px 0 0;
}

.icon_add_order {
	margin: -2px 5px 0 0;
}

.add_order {
	font-size: 0.938rem !important;
    color: #000000 !important;
    font-weight: 500;
}

.add_order_input, .add_order_input:focus {
	border: 1px solid rgba(221, 221, 221, 1);
}

.tech_work {
	color: #31D02E;
	font-weight: 400;
	font-size: 0.938rem;
	text-transform: uppercase;
	border: 1px solid rgba(49, 208, 46, 1);
	border-radius: 10px;
	background: rgba(49, 208, 46, 0.25);
	padding: 5px 25px 5px 25px;
}

.tech_create {
	color: #FFC107;
    font-weight: 400;
    font-size: 0.938rem;
    text-transform: uppercase;
    border: 1px solid rgba(255, 193, 7, 1);
    border-radius: 10px;
    background: rgba(255, 193, 7, 0.25);
    padding: 5px 25px;}

.tech_close {
	border: 1px solid rgba(217, 217, 217, 1);
	background: rgba(255, 255, 255, 1);
    text-transform: uppercase;
	color: #767B8E;
	font-weight: 400;
	font-size: 0.938rem;
	border-radius: 10px;	
	padding: 5px 25px 5px 25px;	
}

.grafic_table th {
	color: #767B8E;
	font-weight: 500;
	text-transform: none;
	font-size: 0.938rem;
	text-align: center;
}

.grafic_table td {
	color: #000000;
	font-weight: 400;
	text-transform: none;
	font-size: 0.938rem;
}

.grafic_table_input, .grafic_table_input:focus {
	color: #767B8E;
	font-size: 0.938rem;
	font-weight: 400;
	border: 1px solid #DDDDDD;
	border-radius: 10px;
}

.copy_grafic {
	color: #000000;	
	border-radius: 10px;
	border: 1px solid #767B8E;
	font-size: 0.938rem;
	font-weight: 400;
}

.icon_copy_grafic {
	margin: -2px 5px 0 -5px;
}

.table_history th {
	color: #000000 !important;
	text-transform: uppercase;
	font-size: 0.938rem;
	font-weight: 500;
}

.table_history td {
	color: #000000;
	text-transform: none;
	font-size: 0.938rem;
	font-weight: 400;
}

/* Scroll for history */

li a.page-link {
	color: rgb(105, 122, 141) !important;
	background-color: #FFFFFF !important;
	border: 0 !important;
	border-radius: 10px !important;
}

li a.page-link:hover {
	background-image: linear-gradient(rgb(88, 88, 88) 0%, rgb(17, 17, 17) 100%) !important;
	border: 1px solid rgb(17, 17, 17) !important;	
	color: rgb(255, 255, 255) !important;
	border-radius: 10px !important;
}

li.page-item.active a.page-link, li.page-item.active a.page-link:hover {
	border: 1px solid rgba(0, 0, 0, 0.3) !important;
	border-radius: 10px !important;
	background-image: linear-gradient(rgba(230, 230, 230, 0.05) 0%, rgba(0, 0, 0, 0.05) 100%) !important;
	color: rgb(105, 122, 141) !important;
}

.table_img2 {
	margin-top: -5px;
	margin-right: 3px;
}

/* Setting */

.setting_title {
	font-size: 1.13rem;
	font-weight: 500;
	text-transform: uppercase;
	color: #000000;
}

.setting_img {
	 margin-top: -0.31rem;
}

.setting_edit {
	font-size: 1.25rem;
	color: #767B8E;
}

.setting_edit:focus {
	font-size: 1.25rem;
	color: #767B8E;
	border: 1px solid #BBBBBB;
}

.setting_save {
	margin : -2px 10px 0 0;
}

#setting_submit {
	font-size: 0.94rem !important;
}

/* Billing */

.billing_none {
	background-color: #FFE0DB !important;
}

.billing_none_text {
	font-size: 1.12rem;
	font-weight: 400;
	color: #BC5241;
}

.billing_none_img {
	margin: -0.25rem 0.44rem 0 0.44rem;
}

.billing_none_tr {
	outline: 1px solid #767B8E;
}

.billing_detail_title {
	font-size: 0.95rem;
	color: #000000;
	font-weight: 500;
	text-transform: uppercase;
	padding-left: 0 !important;
}

.billing_detail_text {
	font-size: 0.95rem;
	color: #000000;
	font-weight: 400;
}

.pl_0 {
	padding-left: 0;
}

.billing_input {
	border: 1px solid #DDDDDD;
	border-radius: 10px;
	color: #767B8E;
}

.billing_input:focus {
	border: 1px solid #BBBBBB;
	border-radius: 10px;
}

.billing_pay_img {
	margin-right: 10px; 
}

.border_right {
	border-right: 1px solid #767B8E;
}

.border_bottom {
	border-bottom: 1px solid #767B8E;
	padding-bottom: 2.03rem;
}

/* Personal Detail - Grid styles */

.table_grid {
	display: flex;
	flex-direction: column; /* Відображає рядки вертикально */
}

.row_grid {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr; /* Три стовпчики в рядку */
	border-bottom: 1px solid rgba(118, 123, 142, 1);
}

.row_grid.last-row {
	border: 0;
}

.cell_grid {
	padding: 10px;
	text-align: center;
	cursor: move;
	font-size: 0.938rem !important;
	color: #000000 !important;
	font-weight: 400;
	text-transform: none;	
}

.cell_grid.action {
	padding: 10px;
	text-align: center;
	cursor: default;
}

.detail_delete_person_img {
	margin: -1px 5px 0 5px;
}

.header .cell_grid {
	font-weight: bold; /* Стилізація заголовків */
	cursor: default; /* Відключаємо вказівник перетягування для заголовків */
	font-size: 1.125rem;
	color: #000000;
	font-weight: 500;
	text-transform: none;	
}

.last-row .cell_grid {
	cursor: default; /* Відключаємо вказівник перетягування для заголовків */
}

.sortable-ghost {
	opacity: 0.4; /* Прозорість під час перетягування */
}


/* Стиль для останнього рядка */
.last-row {
	grid-template-columns: 2fr 1fr 1fr; /* Перший стовпчик більший, а другий і третій як третій у попередніх рядках */
}

.last-row .cell {
  text-align: center;
}

.save_move {
	padding: 10px 30px 10px 30px;
}

/* Адаптивна верстка для екранів менше 768px */
@media (max-width: 768px) {
	.row_grid {
    	grid-template-columns: 1fr 1fr; /* Два стовпчики для маленьких екранів */
    	grid-auto-rows: minmax(50px, auto); /* Забезпечує мінімальну висоту для клітинок */
  	}

	/* Перша колонка стає висотою як дві */
	.row_grid .cell_grid:nth-child(1) {
		grid-row: 1 / span 2; /* Перша колонка займає два рядки */
		display: flex;
		align-items: center;
		justify-content: center; /* Центрування тексту */
		height: 100%; /* Забезпечує, що стовпчик займає дві клітинки по висоті */
	}

	/* Друга колонка залишається на місці */
	.row_grid .cell_grid:nth-child(2) {
		grid-column: 2 / 3;
		grid-row: 1;
	}

	/* Третя колонка переміщується під другу */
	.row_grid .cell_grid:nth-child(3) {
		grid-column: 2 / 3;
		grid-row: 2; /* Переміщаємо на другий рядок */
	}

	/* Четверта колонка стає висотою як дві */
	.row_grid .cell_grid:nth-child(4) {
		grid-column: 1 / 2;
		grid-row: 3 / span 2; /* Четверта колонка займає два рядки */
		display: flex;
		align-items: center;
		justify-content: center; /* Центрування тексту */
		height: 100%; /* Забезпечує, що стовпчик займає дві клітинки по висоті */
	}

	.row_grid:first-child .cell_grid:nth-child(4) {
		display: none; /* Прибирає четвертий стовпчик тільки для першого рядка */
	}

	.row_grid.last-row .cell_grid:nth-child(1) {
		display: none; /* Прибирає перший стовпчик для останнього рядка */
	}

	.row_grid.last-row .cell_grid:nth-child(2) {
		grid-column: 1 / 2; /* Розміщує другий стовпчик на місці першого */
	}

	.row_grid.last-row .cell_grid:nth-child(3) {
		grid-column: 2 / 3; /* Залишає третій стовпчик у другій колонці */
		grid-row: 1; /* Зміщує третій стовпчик, щоб він займав дві стрічки */
	}  
}

/* Groups for Detail */

.table_container {
    display: grid;
    grid-template-columns: repeat(3, 1fr) 2fr; /* Три колонки і одна ширша */
    gap: 0;
    width: 100%;
    margin: 0; /* Розташування таблиці ліворуч */
}

.row_table {
	display: contents;
}

.row_table div {
	border-bottom: 1px solid #ccc; /* Підкреслення рядка */
    padding: 10px;
    font-size: 16px;
}

/* Прибрати бордер у третій і четвертій колонках */
.row_table div:nth-child(3),
.row_table div:nth-child(4) {
	border-right: none;
}

/* Останній рядок без бордерів */
.row_table:last-child div {
	border-bottom: none;
}

.col_table_header {
	text-align: left;
	font-size: 1.125rem;
	color: #000000;
	font-weight: 500;
	text-transform: none;	
}

.col_table {
	text-align: left;
	font-size: 0.938rem;
	color: #000000;
	font-weight: 400;
	text-transform: none;	
}

.name_group, .name_group:active, .name_group:focus {
	font-size: 0.938rem;
	color: #000000;
	font-weight: 400;
	border: 1px solid rgba(221, 221, 221, 1);
}


/* Сховати останню колонку на мобільних пристроях */
@media (max-width: 768px) {
	.row_table div:nth-child(4) {
    	display: none;
    }

    .table_container {
    	grid-template-columns: repeat(3, 1fr); /* Повертаємо три колонки на мобільних */
	}
}


/* Головна сторінка */

    .container-main {
        display: grid;
        background-color: #EEEEEE;
    	grid-template-areas:
        	"block-1 block-1"
        	"block-2-4 block-5"
        	"block-6 block-5";
    	grid-template-columns: 40% calc(60% - 20px); /* Встановлює пропорції між блоками */
    	gap: 20px; /* Відступи між блоками */
    	align-items: start;
    }

	.black-shadow {
		border-radius: 10px;
		box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
	}

    .block-1 {
        background-color: #2F2F2F;
        grid-area: block-1;
    }

    .block-2-4 {
        grid-area: block-2-4;
    }

    .block-2 {
        margin-bottom: 20px; 
        background-color: #FFFFFF;   	
    }

    .block-3 {
        background-color: #2F2F2F;
        margin-bottom: 20px !important;
    }   
     
    .block-4 {
        background-color: #2F2F2F;
    }

    .block-5 {
        background-color: #2F2F2F;
        grid-area: block-5;
    }

    .block-6 {
        background-color: #2F2F2F;
        grid-area: block-6;
    }

	@media (max-width: 768px) {
	    .container-main {
	        grid-template-columns: 1fr; /* Одна колонка */
	        grid-template-areas:
	        	"block-1" 
	            "block-2-4"
	            "block-5"
	            "block-6"; /* Розташовує блоки один під одним */
	    }

	    .main-menusmall {
	    	background-color: #2F2F2F !important;
	    }

	    .main-small-row {
	    	min-width: 100vw;
	    	max-width: 100vw;
			--bs-gutter-x: 2rem;
		    margin-right: calc(-0.5*var(--bs-gutter-x));
    		margin-left: calc(-0.5*var(--bs-gutter-x))	    	
	    }

	    .main-menusmall-logo {
	    	width: 80%;
	    }

	    .main-menusmall {
    		position: relative;
    		z-index: 1000; /* Логотип і бургер залишаються зверху */
		}

		.menu-icon-closed {
			width: 70%;
		}

		.main-menu-logo {
			display: none !important;
		}

	}

 	.contact-section {
        color: #fff; 
        padding: 20px;
        font-family: Arial, sans-serif;
        font-size: 14px;
        line-height: 1.6;
        width: 100%; 
    }

    .contact-item {
        display: flex;
        align-items: center;
        margin-bottom: 10px;
    }

    .icon {
    	width: 0.87rem;
    	margin: -2px 10px 0 0;
    }

    .description {
        margin-left: 10px;
        font-size: 0.91rem;
		font-weight: 300;
    }

    .contact-item span {
    	color: #FFFFFF;
    }

    .contact-item a, .contact-item a:hover {
    	color: #FFFFFF;
        font-size: 0.91rem;
		font-weight: 300;
    }

    .contact-title {
    	font-size: 1.1rem;
    }

	.tech-support-block {
	    display: flex;
	    align-items: center;
	    padding: 10px;
	    background-color: #333; 
	    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); 
	    border-radius: 8px;
	    color: #fff;
	    margin: 10px 0; 
	}

	.tech-icon img {
	    height: 4.38rem;
	    margin-right: 15px;
	    cursor: pointer;
	}

	.tech-text {
	    display: flex;
	    flex-direction: column;
	}

	.tech-text .title {
	    font-size: 1.1rem;
	    font-weight: 400;
    	margin-bottom: 0.3rem;
	}

	.tech-text .subtitle {
	    font-size: 0.91rem;
	    font-weight: 300;
	}

	.tech-text a.title, .tech-text a.subtitle {
    	cursor: pointer;
	}

	.tech-text a.title:hover, .tech-text a.subtitle:hover {
    	cursor: pointer;
    	background: linear-gradient(90deg, #D8AE5E 0%, #F2D7A5 100%);
      	-webkit-background-clip: text;
      	-webkit-text-fill-color: transparent; /* Робимо текст прозорим */
      	transition: background 0.3s ease; /* Анімація на hover */
	}

	.black-border {
		border: 1px solid #767B8E;
	}

	.main-modal-header {
		background-color: #2F2F2F;
	}

	.main-modal-title {
		color: #FFFFFF !important;
		background-color: #2F2F2F !important;
		font-weight: 300 !important;
		font-size: 1.3rem !important;
	}

	.modal-img-close {
		margin-top: -12px;
		cursor: pointer;
		width: 15px;
	}

	.main-modal-readonly {
		color: #767B8E;
		position: relative;
		border: 1px solid #DDDDDD;
		border-radius: 7px;
		padding: 8px 7px 7px 14px;
	}

	.main-modal-readonly::after {
    	content: '';
    	position: absolute;
    	top: 45.5%;
    	right: 14px; /* Відступ від правого краю */
    	transform: translateY(-50%);
    	width: 13px; /* Ширина стрілочки */
    	height: 13px; /* Висота стрілочки */
    	background: url('/img/icon_ok.svg') no-repeat center center;
    	background-size: contain;
	}

	.main-modal-select, .main-modal-select:focus {
		color: #2F2F2F;
		border: 1px solid #DDDDDD;
	}

	.main-modal-error {
		border: 1px solid red !important;
	}

	.smaller-margin {
 		margin-bottom: 0px; 
	}

    .balance-block {
        display: flex;
        align-items: center;
        padding: 10px;
    }

    .b-icon {
        height: 4.38rem;
        margin-right: 15px;
    }

    .text-content {
        flex-grow: 1;
    }

    .balance {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 16px;
        margin-bottom: 8px;
    }

    .balance .amount, .balance .amount a {
        background-color: #333;
        color: #DDB66A;
        padding: 5px 10px;
        border-radius: 7px;
        font-weight: 400;
    }

    .balance .amount a:hover {
        color: #FFC77B;
    }

    .balance span {
        font-weight: bold;
        color: #333;
    }

    .payment-link {
        font-size: 14px;
        color: #555;
    }

    .payment-link div a {
        font-weight: 400;
        color: #555;
    }

    .payment-link div a:hover {
        font-weight: 400;
        color: #000;
    }

    .balance .title, .payment-link .title {
	    font-size: 1.1rem;
	    font-weight: 400;
    	margin-bottom: 0.3rem;
	}

	.payment-link .subtitle {
	    font-size: 0.91rem;
	    font-weight: 300;
	}

    .personal-cabinet {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background-color: #333;
      color: #fff;
      padding: 20px;
      border-radius: 8px;
    }

    .personal-cabinet .left {
      max-width: 60%;
    }

    .personal-cabinet .title {
      font-size: 18px;
      font-weight: bold;
      margin-bottom: 10px;
    }

    .personal-cabinet .contact-info {
      font-size: 16px;
      line-height: 1.5;
    }

    .personal-cabinet .right {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
		height: 100px;
		position: relative;
    }

    .personal-cabinet .greeting {
      font-size: 18px;
      margin-bottom: 10px;
    }

    .personal-cabinet .edit-wrapper {
    	display: flex;
	    justify-content: flex-end;
		width: 100%;    	
  	}

    .personal-cabinet .edit-button {
      display: inline-block;
      font-size: 0.66rem;
      font-weight: 400;
      padding: 8px 15px;
      text-decoration: none;
    }

    .personal-cabinet .edit-button a {
		color: #000000;
    }

    .personal-cabinet .edit-button:hover {
      background-color: #b8932e;
    }

    .personal-cabinet .title, .right .greeting {
	    font-size: 1.1rem;
	    font-weight: 400;
    	margin-bottom: 0.3rem;
	}

	.contact-info div {
	    font-size: 0.96rem;
	    font-weight: 300;
	}

    @media (max-width: 768px) {
        .personal-cabinet .greeting {
            display: none;
        }

        .personal-cabinet .edit-wrapper {
      		margin: auto; 
    	}
  	}

    .block {
      background-color: #333;
      color: #fff;
      border-radius: 10px;
      overflow: hidden;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }

    .block-header {
      background-color: #2F2F2F;
      padding: 15px;
      font-size: 18px;
      font-weight: bold;
    }

    .block-divider {
      height: 1px;
      background-color: #FFFFFF;
      margin: 0;
    }

    .block-content {
      padding: 0;
      background-color: #fff;
      color: #333;
    }

    .row-m {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #ddd;
      font-size: 0.79rem;
      font-weight: 300;
    }

    .row-m-title {
      background-color: #2F2F2F;
      color: #fff;
      font-size: 0.91rem;
      font-weight: 300;
    }

   
    .row-m > div {
      text-align: center;
      padding: 10px;
      line-height: 1.5;
      word-wrap: break-word;
    }

    
    .row-m > div:first-child {
      flex: 0 0 24%;
    }

    .row-m > div:nth-child(2) {
      flex: 0 0 24%; 
    }

    .row-m-title > div:nth-child(3) {
      flex: 0 0 49%; 
    }

    .row-m:not(.row-m-title) > div:nth-child(3),
    .row-m:not(.row-m-title) > div:nth-child(4) {
      flex: 0 0 24%; 
    }

    .block-footer {
      background-color: #222;
      color: #fff;
      text-align: center;
      padding: 10px;
      font-size: 14px;
    }

    .block-footer a {
    	color: #fff;
    }

    .block-footer a:hover {
    	color: #ddd;
    }

    .block-header {
	    font-size: 1.1rem;
	    font-weight: 400;
	}

	.main-icon {
		height: 0.8rem;
		margin: -2px 3px 0 0;
	}

	.main-modal-title {
	    font-size: 1.1rem;
	    font-weight: 400;
	    background-color: #333; 
	    color: #000000;
	}

	.main-modal-link .subtitle {
	    font-size: 0.91rem;
	    font-weight: 300;
	}
		
	.navbar-toggler-icon {
	    display: inline-block;
	    width: 30px;
	    height: 2px;
	    background-color: #000;
	    position: relative;
	}

	.navbar-toggler-icon::before,
	.navbar-toggler-icon::after {
	    content: '';
	    position: absolute;
	    width: 30px;
	    height: 2px;
	    background-color: #000;
	    left: 0;
	    transition: all 0.3s ease;
	}

	.navbar-toggler-icon::before {
	    top: -8px;
	}

	.navbar-toggler-icon::after {
	    top: 8px;
	}

    .table-working {
      display: grid;
      grid-template-columns: 1fr 2fr 2fr 3fr 3fr 3fr 3fr 3fr;
      gap: 10px;
      width: 100%;
    }

    .header-working, .row-working {
      display: contents;
    }

    .cell-working {
      padding: 8px;
      border: 1px solid #ccc;
      box-sizing: border-box;
      text-align: left;
    }

    .header-working .cell-working {
      font-weight: bold;
      background-color: #f9f9f9;
    }

    /* Адаптивність для малих екранів */
    @media (max-width: 768px) {
      .table-working {
        grid-template-columns: 1fr; /* Одна колонка для мобільних пристроїв */
      }

      .row-working {
        display: grid;
        grid-template-columns: 1fr 1fr; /* Дві колонки для малих екранів */
        gap: 5px;
      }

      .header-working {
        display: none;
      }

      /* Порядок для малих екранів */
      .cell-working:nth-child(1) {
        grid-column: 1 / -1; /* № займає всю ширину */
        font-weight: bold;
        background-color: #f1f1f1;
        text-align: center;
      }

      .cell-working:nth-child(2),
      .cell-working:nth-child(3) {
        order: 2; /* Дата і Пультовий номер */
        grid-column: span 1;
      }

      .cell-working:nth-child(5),
      .cell-working:nth-child(6) {
        order: 3; /* Найменування об'єкта і Адреса об'єкта */
        grid-column: span 1;
      }

      .cell-working:nth-child(4),
      .cell-working:nth-child(7) {
        order: 4; /* Кваліфікація події і Результати обстеження */
        grid-column: span 1;
      }

      .cell-working:nth-child(8) {
        order: 5; /* Примітка займає всю ширину */
        grid-column: 1 / -1;
      }
    }

ul.pagination {
  list-style: none;
  display: flex;
  gap: 10px;
}

ul.pagination li {
  padding: 5px 10px;
  border: 1px solid #ddd;
  cursor: pointer;
}

.header-working {
    display: flex;
    position: sticky;
    top: 0;
    background: #ffffff;
    z-index: 10;
}

.header-working .cell-working, .row-working .cell-working {
    flex: 1; /* Однакова ширина */
    text-align: center;
    padding: 10px;
    border: 1px solid #ddd;
}

td a.biling-link {
	color: #767B8E !important;
}