/* ===== базовая оболочка ===== */

.front {
	max-width: 1240px;
	margin: 0 auto;
	padding: 20px;
	font-family: Arial, sans-serif;
	color: #222;
}

.table-main-title {
	text-align: center;
	margin-bottom: 18px;
}

.table-main-title h1,
.front-confirm > h3 {
	margin: 0;
	font-size: 28px;
	line-height: 1.3;
	color: #0067b0;
	font-weight: 700;
}

.front-confirm > h3 {
	margin-bottom: 18px;
}

/* ===== табы ===== */

.tabs-cont {
	margin-bottom: 0;
}

.tabs {
	display: flex;
	gap: 6px;
	align-items: flex-end;
	border-bottom: 2px solid #0067b0;
}

.tabs a {
	display: inline-block;
	position: relative;
	top: 2px;
	padding: 12px 20px;
	text-decoration: none;
	color: #fff;
	background: #0067b0;
	border: 2px solid #0067b0;
	border-bottom: none;
	border-radius: 4px 4px 0 0;
	transition: 0.2s ease;
}

.tabs a.active {
	background: #fff;
	color: #0067b0;
}

.tabs a:hover {
	background: #187CA4;
	color: #fff;
}

.tabs a.active:hover {
	background: #fff;
	color: #0067b0;
}

.tabs a h3 {
	margin: 0;
	font-size: 15px;
	font-weight: 400;
}

.desc-show {
	display: inline;
}

.mob-show {
	display: none;
}

/* ===== первый экран ===== */

.main-table {
	display: grid;
	grid-template-columns: minmax(0, 464px) minmax(0, 1fr);
	gap: 42px;
	align-items: start;
	padding-top: 20px;
}

.main-form-side {
	width: 100%;
	min-width: 0;
}

.main-form-side .tab-cont {
	display: none;
}

.main-form-side .tab-cont.active {
	display: block;
}

.lcspan,
.adrpan,
.adrPanel {
	width: 100%;
	min-width: 0;
	box-sizing: border-box;
}

.adrPanel {
	padding: 0;
	background: transparent;
	border: none;
	border-radius: 0;
	box-shadow: none;
}

.adrpan {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px 16px;
	align-items: start;
}

.adrpan > div {
	min-width: 0;
	margin-bottom: 0;
}

.adrpan > div:last-child {
	grid-column: 1 / -1;
}

.adrpan p,
.adrPanel p {
	margin-bottom: 6px !important;
	font-weight: 400;
	color: #0067b0;
}

.cont-btn-tr {
	margin-top: 20px;
}

.table-img {
	min-width: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.table-img img {
	width: 100%;
	max-width: 760px;
	height: auto;
	border: none;
	border-radius: 0;
	box-shadow: none;
}

/* ===== поля / селекты ===== */

.form-control,
.adrpan select,
.adrPanel input,
.lcspan input {
	width: 100%;
	max-width: 100%;
	height: 44px;
	padding: 12px 14px;
	box-sizing: border-box;
	font-size: 15px;
	background: #fff;
	border: 1px solid #c9d8e3;
	border-radius: 4px;
	outline: none;
}

.form-control:focus,
.adrpan select:focus,
.adrPanel input:focus,
.lcspan input:focus {
	border-color: #0067b0;
	box-shadow: 0 0 0 3px rgba(0, 103, 176, 0.12);
}
.fix1 {
    display: inline-block;
    width: max-content;
}
.sogl-old{
    width: auto !important;
    height: auto !important;
    line-height: 0 !important;
}
/* ===== chosen ===== */

.chosen-container:not(#month_chosen):not(#year_chosen) {
	width: 100% !important;
}

.chosen-container-single .chosen-single {
	height: 44px;
	line-height: 42px;
	padding-left: 14px;
	color: #222;
	background: #fff;
	border: 1px solid #c9d8e3;
	border-radius: 4px;
	box-shadow: none;
}

.chosen-container-single .chosen-single div b {
	background-position: 0 11px;
}

.chosen-container-active.chosen-with-drop .chosen-single,
.chosen-container-active .chosen-single {
	border-color: #0067b0;
	box-shadow: 0 0 0 3px rgba(0, 103, 176, 0.12);
}

.chosen-container .chosen-drop {
	border: 1px solid #c9d8e3;
	border-top: none;
	border-radius: 0 0 4px 4px;
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
}

.chosen-container .chosen-results li.highlighted {
	background: #0067b0;
	color: #fff;
}

/* ===== чекбокс / кнопки ===== */

.cont-btn {
	text-align: left;
}

.cont-btn label {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	line-height: 1.4;
	cursor: pointer;
}

.cont-btn input[type="checkbox"] {
	width: 18px;
	height: 18px;
	margin: 0;
	flex: 0 0 18px;
	accent-color: #0067b0;
	position: relative !important;
	top: 0 !important;
}

.cont-btn p {
	margin: 18px 0 0;
}

.agree-text {
	font-size: 14px;
	font-weight: 400;
	color: #2f3e49;
}

.button,
.btn.btn-default,
#shkbtn,
#next {
	display: inline-block;
	padding: 13px 28px;
	font-size: 15px;
	font-weight: 400;
	color: #fff;
	background: #0067b0;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	transition: 0.2s ease;
	box-shadow: 0 8px 18px rgba(0, 103, 176, 0.18);
}

.button:hover,
.btn.btn-default:hover,
#shkbtn:hover,
#next:hover,
.button:focus,
.btn.btn-default:focus,
#shkbtn:focus,
#next:focus,
.button:active,
.btn.btn-default:active,
#shkbtn:active,
#next:active {
	background: #187CA4;
	color: #fff;
	outline: none;
}

.btn-default.noactive,
#shkbtn.noactive {
	background: #a9bcc8 !important;
	color: #eef4f7 !important;
	box-shadow: none;
	cursor: not-allowed;
}

/* ===== нижний текст ===== */

.botmsg {
	max-width: 900px;
	margin: 28px auto 0;
	text-align: center;
}

.botmsg p {
	margin-bottom: 14px;
	font-size: 14px;
	line-height: 1.6;
	color: #333;
}

/* ===== попап ===== */

#dialog {
	display: none;
	position: fixed !important;
	left: 50% !important;
	top: 50% !important;
	right: auto !important;
	bottom: auto !important;
	z-index: 99999 !important;
	width: calc(100% - 40px);
	max-width: 560px;
	margin: 0 !important;
	padding: 28px 24px 22px;
	text-align: center;
	background: linear-gradient(180deg, #ffffff 0%, #f3f9fd 100%);
	border: 2px solid #0067b0;
	border-radius: 10px;
	box-shadow: 0 18px 45px rgba(0, 56, 98, 0.28);
	transform: translate(-50%, -50%) !important;
}

#dialog h4,
#dialog h5 {
	margin: 0;
	font-size: 20px;
	line-height: 1.45;
	font-weight: 700;
	color: #004f87;
}

#dialog a {
	color: #0067b0;
	font-weight: 700;
	text-decoration: underline;
}

#dialog .jqmClose {
	position: absolute;
	right: 12px;
	top: 12px;
	width: 22px;
	height: 22px;
	cursor: pointer;
	opacity: 0.85;
}

#dialog .jqmClose:hover {
	opacity: 1;
}

.jqmOverlay {
	background: rgba(0, 36, 63, 0.55) !important;
}

/* ===== второй экран ===== */

.front-confirm {
	max-width: 1240px;
}

.front-confirm > table.confirm-layout {
	width: 100% !important;
	table-layout: fixed !important;
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	background: #fff;
	border: 1px solid #d8e6ef;
	border-radius: 6px;
	box-shadow: 0 6px 18px rgba(0, 103, 176, 0.06);
}

.front-confirm .confirm-left {
	width: 50%;
	padding: 22px 12px 0 22px !important;
	vertical-align: top;
}

.front-confirm .confirm-right {
	width: 40%;
	padding: 22px 22px 22px 12px !important;
	vertical-align: top;
}

.front-confirm p {
	margin: 0 0 12px;
	font-size: 15px;
	line-height: 1.55;
}

.front-confirm p strong {
	font-weight: 500;
	color: #4a5e6c;
}

.front-confirm .confirm-main-card {
	padding: 18px;
	background: #fbfdff;
	border: 1px solid #e7eef4;
	border-radius: 6px;
	box-shadow: none;
	height: auto;
}

.front-confirm .confirm-side-card {
	padding: 0;
	background: transparent;
	border: none;
	border-radius: 0;
	box-shadow: none;
	height: auto;
	min-height: 0;
}

.front-confirm .form-control {
	height: 42px;
	padding: 10px 12px;
	font-size: 15px;
	border: 1px solid #c9d8e3;
	border-radius: 4px;
	box-shadow: none;
}

.front-confirm .form-control:focus {
	border-color: #0067b0;
	box-shadow: 0 0 0 3px rgba(0, 103, 176, 0.12);
}

.front-confirm select.form-control,
.front-confirm input.form-control {
	display: inline-block;
	vertical-align: middle;
}

/* ===== строки периода и суммы ===== */

.front-confirm .period-line,
.front-confirm .sum-line {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
}

.front-confirm .period-line strong,
.front-confirm .sum-line strong {
	flex: 0 0 100%;
	margin: 0 0 2px;
}

.front-confirm .period-item,
.front-confirm .sum-item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex-wrap: nowrap;
	white-space: nowrap;
	min-width: 0;
}

.front-confirm .period-unit,
.front-confirm .sum-unit {
	white-space: nowrap;
}

.front-confirm #month_chosen {
	width: 125px !important;
	min-width: 125px !important;
	max-width: 125px !important;
}

.front-confirm #year_chosen {
	width: 88px !important;
	min-width: 88px !important;
	max-width: 88px !important;
}

.front-confirm .sum-input {
	width: 100px !important;
	max-width: 100px !important;
}

.front-confirm .sum-input-kop {
	width: 70px !important;
	max-width: 70px !important;
}

/* ===== таблица счетчиков ===== */

.front-confirm .table-scroll {
	width: 100%;
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
}

.front-confirm #countersPanel {
	margin: 0;
	padding: 0;
	background: transparent;
	border: none;
}

.front-confirm #tbl_1 {
	width: 100% !important;
	min-width: 0 !important;
	margin: 0;
	table-layout: auto;
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	background: #fff;
	border: 1px solid #e3edf4;
	border-radius: 4px;
}

.front-confirm #tbl_1 th {
	padding: 9px 8px;
	font-size: 13px;
	line-height: 1.35;
	font-weight: 600;
	text-align: center;
	color: #4f6473;
	background: #f8fbfd;
	border-bottom: 1px solid #e7eef4;
}

.front-confirm #tbl_1 td {
	padding: 8px 8px;
	font-size: 13px;
	line-height: 1.35;
	vertical-align: middle;
	white-space: normal;
	word-break: break-word;
	border-bottom: 1px solid #eef3f7;
}

.front-confirm #tbl_1 tr:last-child td {
	border-bottom: none;
}

.front-confirm #tbl_1 td:first-child,
.front-confirm #tbl_1 th:first-child {
	text-align: left;
}

.front-confirm #tbl_1 h4,
.front-confirm #tbl_1 h4 strong,
.front-confirm #tbl_1 th h4 {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
	color: #0067b0;
}

.front-confirm #tbl_1 input[type="text"] {
	width: 100% !important;
	max-width: 110px;
	height: 34px;
	padding: 6px 8px;
	font-size: 13px;
	border: 1px solid #cfdbe4;
	border-radius: 4px;
}

.front-confirm #tbl_1 input[type="text"]:focus {
	outline: none;
	border-color: #0067b0;
	box-shadow: 0 0 0 3px rgba(0, 103, 176, 0.12);
}

/* ===== действия ===== */

.front-confirm .confirm-actions-row td {
	padding: 18px 22px 22px !important;
	border-top: 1px solid #e6edf3;
}

.front-confirm .confirm-actions {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
}

.front-confirm .btn.btn-default,
.front-confirm #go {
	font-size: 15px;
	padding: 13px 28px;
}

/* chosen на втором экране */
.front-confirm .chosen-container-single .chosen-single {
	height: 42px;
	line-height: 40px;
	padding-left: 12px;
	color: #222;
	background: #fff;
	border: 1px solid #c9d8e3;
	border-radius: 4px;
	box-shadow: none;
}

.front-confirm .chosen-container-active.chosen-with-drop .chosen-single,
.front-confirm .chosen-container-active .chosen-single {
	border-color: #0067b0;
	box-shadow: 0 0 0 3px rgba(0, 103, 176, 0.12);
}

.front-confirm .chosen-container .chosen-drop {
	border: 1px solid #c9d8e3;
	border-top: none;
	border-radius: 0 0 4px 4px;
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
}

.front-confirm .chosen-container .chosen-results li.highlighted {
	background: #0067b0;
	color: #fff;
}

/* когда правого блока нет */
.front-confirm.no-side-panel .confirm-right {
	display: none !important;
}

.front-confirm.no-side-panel .confirm-left {
	width: 100% !important;
	padding-right: 22px !important;
}

.front-confirm.no-side-panel .confirm-actions-row td {
	border-top: none;
}

/* ===== адаптив ===== */

@media (max-width: 980px) {
	.front-confirm > table.confirm-layout {
		display: block;
		width: 100% !important;
	}

	.front-confirm > table.confirm-layout > tbody {
		display: block;
		width: 100%;
	}

	.front-confirm > table.confirm-layout > tbody > tr {
		display: block;
		width: 100%;
	}

	.front-confirm > table.confirm-layout > tbody > tr > td {
		display: block;
		width: 100% !important;
		box-sizing: border-box;
	}

	.front-confirm .confirm-left,
	.front-confirm .confirm-right {
		padding: 18px 18px 0 !important;
	}

	.front-confirm .confirm-right {
		padding-top: 14px !important;
	}

	.front-confirm .confirm-actions-row td {
		padding: 18px !important;
		border-top: none;
	}

	.front-confirm .confirm-actions {
		justify-content: center;
	}

	.front-confirm #tbl_1 {
		min-width: 560px;
	}
}

@media (max-width: 900px) {
	.main-table {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.table-img {
		order: 2;
	}

	.table-img img {
		max-width: 100%;
	}

	.tabs {
		flex-wrap: wrap;
	}
}

@media (max-width: 700px) {
	.adrpan {
		grid-template-columns: 1fr;
	}

	.adrpan > div:last-child {
		grid-column: auto;
	}
}

@media (max-width: 600px) {
	.front {
		padding: 15px;
	}

	.table-main-title h1,
	.front-confirm > h3 {
		font-size: 22px;
	}

	.tabs a {
		padding: 10px 14px;
	}

	.tabs a h3 {
		font-size: 15px;
	}

	.desc-show {
		display: none;
	}

	.mob-show {
		display: inline;
	}

	#dialog {
		padding: 22px 18px 18px;
	}

	#dialog h4,
	#dialog h5 {
		font-size: 18px;
	}

	.front-confirm #tbl_1 th,
	.front-confirm #tbl_1 td {
		font-size: 12px;
		padding: 7px 6px;
	}

	.front-confirm #tbl_1 input[type="text"] {
		max-width: 90px;
		height: 32px;
		font-size: 12px;
	}
}

/* сначала пары идут в строку, а на совсем узких — сами блоки становятся столбцом */
@media (max-width: 480px) {
	.front-confirm .period-line,
	.front-confirm .sum-line {
		display: grid;
		grid-template-columns: 1fr;
		gap: 8px;
	}

	.front-confirm .period-item,
	.front-confirm .sum-item {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 40px;
		align-items: center;
		gap: 6px 8px;
		width: 100%;
	}

	.front-confirm #month_chosen,
	.front-confirm #year_chosen,
	.front-confirm .sum-input,
	.front-confirm .sum-input-kop {
		width: 100% !important;
		min-width: 0 !important;
		max-width: none !important;
	}

	.front-confirm .period-unit,
	.front-confirm .sum-unit {
		font-size: 13px;
	}
}