@import url("colors.css");
@import url("default_styles.css");
@import url("scroll.css");
@import url("form_elements.css");
@import url("modal.css");
@import url("popover.css");

@font-face {
	font-family: 'Roboto';
	src: url(/css/Roboto-Light.ttf) format("truetype");
	font-weight: 300;
	font-style: normal;
	font-display: fallback;
}

@font-face {
	font-family: 'Roboto';
	src: url(/css/Roboto-Regular.ttf) format("truetype");
	font-weight: 400;
	font-style: normal;
	font-display: fallback;
}

@font-face {
	font-family: 'Roboto';
	src: url(/css/Roboto-Medium.ttf) format("truetype");
	font-weight: 500;
	font-style: normal;
	font-display: fallback;
}

body:has([data-ng-controller="contents"]) {
	overflow-y: hidden;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
}

i.left {
  float: left;
  margin-right: 15px;
}

i.right {
  float: right;
  margin-left: 15px;
}

i.small {
  font-size: 2rem;
}

.materials_pointer {
	cursor: pointer;
	color: #1e88e5;
	font-size: 20px;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
}

.display-grid-block-second .label {
	color: var(--main-text);
}

.display-grid-block .icon_block i:not(.material-icons_add) {
	opacity: 0.6;
}

.icon_block {
	justify-content: end;
	align-self: center;
	display: flex;
}

.display-grid-header .material-icons_add,
.grid-header .material-icons_add {
	position: absolute;
	margin-top: -4px;
	right: 5px;
}

.materials_pointer:hover {
	color: red;
}

.display-grid-row>div {
	vertical-align: middle;
	overflow: hidden;
	display: flex;
	align-items: center;
}

.display-grid-row > div.custom_date {
	overflow: visible;
}

.display-grid-row>div:first-child {
	padding-left: 5px;
}

.display-grid-block .display-grid-row>div.text-right,
.display-grid-block .display-grid-row>div.pc-right,
.display-grid-header>div.text-right,
.display-grid-header>div.pc-right {
	justify-content: end;
}

.display-grid-block .display-grid-row>div.text-center,
.display-grid-block .display-grid-row>div.pc-center,
.display-grid-header>div.text-center,
.display-grid-header>div.pc-center {
	justify-content: center;
}


/*при редактировании разрешить выход за границы блока*/

.on_edit .display-grid-row>div {
	overflow: inherit;
}

.grid-header {
	box-shadow: inset 0 -1px 0 #000;
	height: 30px;
	margin-bottom: 2px;
	padding-left: 5px;
	padding-right: 5px;
	gap: 10px;
}

.grid-header > div {
	padding-bottom: 5px;
	padding-top: 10px;
	font-size: 12px;
	text-transform: uppercase;
	color: black;
	font-weight: 500;
	padding-left: 0px;
	padding-right: 0px;
	white-space: nowrap;
}

.color_value {
	background: #F5F5F5;
	border: 1px solid #D9D9D9;
	box-sizing: border-box;
	border-radius: 3px;
	height: 28px;
	line-height: 30px;
	padding-left: 5px;
	padding-right: 5px;
	margin-right: 5px;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	color: var(--black-text);
}

/******Пользовательские*******/

.logo_header1 {
	font-weight: 500;
	color: #79B8E5;
	font-style: italic;
	font-size: 16px;
	margin-left: -10px;
	margin-right: 10px;
}

.header_row_buttons_top_menu {
	height: 42px;
	display: flex;
	align-items: center;
	border-bottom: 1px solid var(--main-text);
	padding: 10px 0 6px;
}

/*Блок кнопок -должее появляться только в момент прокрутки*/

.mainpanel_row {
	border-bottom: 1px solid #BDBDBD;
	white-space: nowrap;
	padding-top: 3px;
	padding-bottom: 3px;
	/*background  : #fafafa;*/
}

/*Кнопки и кликабельные элементы:*/

.panel_button_new {
	color: var(--gray-text);
	font-size: 12px;
	padding: 3px 3px;
	border: 1px solid #8C92A0;
	margin: 0 1px;
	text-transform: uppercase;
	border-radius: 2px;
	display: inline-block;
	background: #fafafa;
}

a.panel_button_new {
	color: #7F7F7F;
}

.panel_button_new:hover {
	color: #0966CA;
	border-color: #0966CA;
	cursor: pointer;
	background-color: #E0EDFA;
}

.panel_button_new.active {
	color: #F44336;
	border-color: #0966CA;
	background: #E0EDFA;
}

.filter_panel_icon {
	color: lightgrey;
	cursor: pointer;
	font-size: 18px;
	line-height: 18px;
}

.filter_panel_icon_cancel {
	color: red;
	font-size: 16px;
	cursor: pointer;
	line-height: 22px;
	position: relative;
	right: 21px;
	top: 2px;
}

.filter_panel_label_cancel {
	position: relative;
	right: 107px;
	width: 60px;
	text-align: right;
	display: inline-block;
	opacity: 0.4;
}

.panel_button_icon {
	height: 26px;
	vertical-align: middle;
	white-space: nowrap;
	padding: 0;
}

.panel_button_icon i {
	font-size: 24px;
	padding: 0;
	width: 27px;
}

.panel_button_icon i:not(:first-child) {
	margin-left: -8px;
}

/*подписи кнопок*/

.panel_label {
	text-align: center;
	line-height: 12px;
	text-transform: lowercase;
}

.panel_label.text-left {
	text-align: left;
}

.material-icons_comment {
	color: #3c3c43;
	opacity: 0.18;
}

.icon_right_block .material-icons {
	font-size: 20px;
	color: black;
}

.bg_hover_lightgrey:hover {
	background: #dee2e6;
	cursor: pointer;
}

.row_in_table {
	background: white;
	margin-bottom: 15px;
	border-radius: 10px;
	border: 1px solid #dee2e6;
	padding-top: 15px;
	padding-bottom: 15px;
}

.scroll_content {
	padding-right: 5px;
	max-height: calc(100dvh - 125px);
	padding-top: 1px;
	overflow-y: auto;
	color: rgba(0, 0, 0, 0.87);
	overflow-x: hidden;
}

.mainpage_statuse {
	position: absolute;
	right: 5px;
}

.active_order {
	border: 1px solid #0966CA;
}

.order_block .sup_body {
	background: white;
}

.scroll_content2 {
	height: calc(100dvh - 128px);
	overflow-y: auto;
	color: rgba(0, 0, 0, 0.87);
	overflow-x: hidden;
}

.my_table {
	border-collapse: collapse;
}

.my_table thead tr {
	border-bottom: none;
}

.my_table thead tr.border-bottom-0 {
	border-bottom: none;
}

.my_table:not(.mytable_noborder) thead th {
	box-shadow: inset 0 -1px 0 #000;
	border-radius: 0;
}

.my_table tr th:first-child,
.my_table tr td:first-child {
	padding-left: 10px;
}

.my_table tr th:last-child,
.my_table tr td:last-child {
	padding-right: 10px;
}

.my_table th {
	padding-bottom: 5px;
	padding-top: 10px;
	font-size: 12px;
	text-transform: uppercase;
	color: black;
	font-weight: 500;
}

.my_table td {
	padding: 3px 5px;
	color: #333;
}

/*вторичная таблица*/

.second_table {
	background: #f5f5f5;
	margin-top: 3px;
	margin-bottom: 5px;
}

.second_table tbody tr {
	border-bottom: none;
}

.total_body tr:nth-last-child(2) {
	border-bottom: 2px solid black;
}

.my_table_fixed:not(.second_table) th {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	z-index: 2;
	background: white;
	padding-top: 15px;
	border-radius: 0;
}

.mytable_noborder tr {
	border: none;
}

.mytable_noborder thead {
	border-bottom: 1px solid #000;
}

.header_row .active {
	color: var(--extra-black);
	font-weight: 500;
}

.header_row a {
	text-transform: uppercase;
	font-size: 16px;
	line-height: 2.5;
}

:is(.header_row a, .header_row summary i):hover {
	color: #6B6B6B;
}

.header_row a, .header_row summary i {
	padding: 0 5px;
	color: #7F7F7F;
}

.header_name {
	color: black;
	text-transform: uppercase;
	font-weight: 500;
}

.panel_button {
	margin-left: 8px;
	text-transform: uppercase;
}

.border-bottom {
	border-bottom: 1px solid #ababab;
	margin-bottom: 3px;
}

.tooltip-table td {
	padding: 3px;
}

.display-grid-row .edit_mode_toggle {
	display: flex;
	align-items: center;
	flex: 1 0;
}

@media only screen and (min-width: 601px) {
  .container {
	width: 85%;
  }
}

@media only screen and (min-width: 993px) {
  .container {
	width: 70%;
  }
}

.container {
  margin: 0 auto;
  max-width: 1280px;
  width: unset;
}

.icon_cell {
	display: flex;
	justify-content: end;
	align-self: center;
}

.icon_cell_block {
	display: flex;
}

.bonus_fine_div_repeat {
	background: rgba(116, 116, 128, 0.08);
	border: 1px solid #E5E5EA;
	border-radius: 2px;
	margin-top: 5px;
	gap: 10px;
	align-items: center;
}

.display-grid-block .bonus_fine_div_repeat {
	min-height: 38px;
}

.display-grid-header {
	background: none;
	border: none;
	border-bottom: 1px solid rgba(60, 60, 67, 0.6);
	text-transform: uppercase;
	position: relative;
	gap: 10px;
	border-radius: 0;
}

.display-grid-header>div {
	line-height: 18px;
	color: var(--black-text);
	font-size: 12px;
	/*padding: 0px 5px;*/
	height: 20px;
}

.sticky_header,
.sticky_header_colored,
.secondary_modal_header.sticky_header_colored {
	position: sticky;
	top: 0;
	z-index: 1;
}

.sticky_header {
	background: white;
}

.second_grid_row_repeat {
	border: 1px solid #d9d9d9;
	background: rgba(116, 116, 128, 0.08);
	border-radius: 3px;
}

.second_grid_row_repeat:before {
	content: "";
	position: absolute;
	width: 10px;
	margin-left: -10px;
	border-bottom: 1px solid #ccc;
	top: 14px;
}

.display-grid-block-second {
	margin: 0 0 0 30px;
}

.display-grid-block-second>div {
	position: relative;
	padding: 0;
	margin-top: 5px;
}

.display-grid-block-second>div:before {
	content: "";
	top: 0;
	position: absolute;
	left: -10px;
	border-left: 1px solid #ccc;
	height: calc(100% + 8px);
}

.display-grid-block-second>div:first-child:before {
	height: calc(100% + 23px);
	top: -5px;
}

.display-grid-block-second>div:last-child:before {
	height: 15px;
}

.display-grid-block-second>div:only-child:before {
	top: -5px;
	height: 20px;
}

.small_hint {
	white-space: nowrap;
	display: block;
	line-height: 0;
	font-size: 10px;
	margin-top: -5px;
	font-style: italic;
	color: grey;
}

.action_button {
	color: var(--gray-text);
	padding: 3px 3px;
	border: 1px solid transparent;
	border-radius: 2px;
	margin: 0 1px;
	text-transform: uppercase;
	background-color: inherit;
	display: flex;
	align-items: center;
	cursor: pointer;
	height: 30px;
}

button.action_button:focus {
	background: inherit;
}

.action_button:hover {
	background-color: #F7F7F7;
	color: var(--gray-text);
}

.action_button span {
	font-size: 10px;
	line-height: 12px;
}

.action_button span.line_height_20 {
	line-height: 20px;
}

.action_button.uppercase span {
	font-size: 12px;
}

.action_button span:first-letter {
	font-size: 12px;
}

.action_button:hover span {
	text-decoration: underline;
}

details.action_button {
	height: 30px;
}

details.action_button summary.mt_3 {
	margin-top: 3px;
	height: calc(100% - 6px);
}

.action_button.action_button_active,
details[open].action_button,
details[open] .action_button,
.action_button details[open] {
	background-color: #F3F8FD;
	border: 1px solid #E0EDFA;
	color: #75AFE9;
}

.action_button.action_button_active i,
details[open].action_button summary i {
	color: #4794E1;
}

details.action_button summary i.dropdown_arrow,
details.dropdown_list summary i.dropdown_arrow {
	transition: transform 0.5s;
}

details[open].action_button summary i.dropdown_arrow,
details[open].dropdown_list summary i.dropdown_arrow {
	transform: rotate(90deg);
}

.action_button .toggle_filter {
	border-right: 1px solid;
	border-color: #BDBDBD;
}

.action_button .toggle_filter i,
.action_button i.dropdown_arrow {
	margin-right: 0;
}

.action_button .toggle_filter .icon_container:hover {
	background-color: #D9D9D9;
}

.action_button.action_button_active .toggle_filter .icon_container:hover {
	background-color: #E0EDFA;
}

.action_button.action_button_active .toggle_filter i {
	transform: rotate(45deg);
}

.action_button .toggle_filter i {
	transition: transform 0.3s;
}

.action_button .toggle_filter+.edit_filter {
	padding-left: 5px;
}

.action_button.action_button_active .toggle_filter {
	border-color: #ADCFF2;
}

.action_button i:not(.select_search_expand),
.action_button .toggle_filter+.edit_filter>i,
.action_button .icon_container {
	margin-left: 1px;
	margin-right: 3px;
}

.action_button .icon_container {
	height: 24px;
}

.custom_button {
	border-radius: 3px;
	cursor: pointer;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #333333;
}

.custom_button:hover {
	background-color: #DEDEDE;
}

.custom_button.custom_button_active,
.custom_button:hover {
	background-color: #DEDEDE;
}

.custom_button.custom_button_disabled {
	color: #BDBDBD;
	background-color: #ffffff;
	cursor: default;
	pointer-events: none;
}

.custom_button.custom_button_active.custom_button_disabled {
	color: #ffffff;
	background-color: #DEDEDE;
	cursor: default;
}

.custom_button:active {
	outline: 1px solid var(--active);
}

.custom_button.custom_button_open {
	background-color: var(--active);
	border: 1px solid var(--active);
	color: #ffffff;
}

.custom_button.custom_button_close:hover {
	color: #FF3B30;
}

.table_block_extended_row {
	padding: 0 10px 5px;
	height: 33px;
}

.info_icon,
.right_test .material-icons.info_icon {
	font-size: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #FF3B30;
}

.materials_group_content {
	padding: 10px 0 10px 15px;
}

.materials_group_content>.with_right_offset {
	padding-right: 11px;
}

.default_table_row {
	height: 38px;
	font-size: 14px;
	padding: 0 15px;
}

.default_table_row:not(.default_table_header) {
	margin-top: 10px;
}

.default_table_row.default_table_header {
	padding-top: 10px;
	font-size: 12px;
}

.active_lightblue_row,
.active_lightblue_row.materials_table,
.active_lightblue_row.selectable_row {
	background-color: var(--active-blue-row);
	color: #ffffff;
}

.active_lightblue_row.selectable_row * {
	color: #ffffff;
}

.active_lightblue_row.selectable_row details * {
	color: var(--black-text);
}

.active_lightblue_row.selectable_row i  {
	color: var(--black-text);
}

.active_lightblue_row.selectable_row i:is(.actual_red_text, .actual_orange_text, .text_green) {
	color: #ffffff !important;
	border-radius: 2px;
}

.active_lightblue_row.selectable_row i.actual_orange_text {
	background-color: var(--orange);
}

.active_lightblue_row.selectable_row i.text_green {
	background-color: var(--green);
}

.active_lightblue_row.selectable_row i.actual_red_text {
	background-color: var(--red);
}

.action_button.with_divider_before:before {
	content: "";
	height: 30px;
	/*border-left: 1px solid var(--gray-text);*/
	border-left: 1px solid #bdbdbd;
	position: absolute;
	left: -5px;
}

.action_button.with_divider_before {
	position: relative;
	margin-left: 5px;
}

.div_with_divider_before {
	position: relative;
	margin-left: 15px;
}

.div_with_divider_before:before {
	content: "";
	height: 30px;
	/* border-left: 1px solid var(--gray-text); */
	border-left: 1px solid #bdbdbd;
	position: absolute;
	left: -5px;
}

.object_row {
	display: grid;
	grid-template-columns: 25px 1fr 40px 150px 150px;
	align-items: center;
	padding: 0 10px;
	height: 44px;
	margin-left: 15px;
}

.object_row:not(div:last-of-type) {
	border-bottom: 1px solid var(--inner-border);
}

:is(.object_row, .selectable_row) .bottom_line {
	font-size: 14px;
	line-height: 14px;
}

.object_row> :is(label, div:first-of-type) {
	margin-left: -15px;
}

.excel_export_body {
	height: 100%;
	min-height: 100px;
	position: relative;
}

.top-40,
.popover.custom_popover.top-40 {
	top: 40px;
}

.objects_list_grouping {
	padding: 2px 10px;
	min-height: 36px;
	font-size: 14px;
}

.selectable_row {
	display: grid;
	align-items: center;
	color: var(--main-text);
	padding-right: 10px;
	height: 36px;
	cursor: pointer;
	border: 1px solid transparent;
	line-height: 18px;
}

.selectable_row:not(:first-child):not(.selectable_row_active) {
	border-top: 1px solid rgba(60, 60, 67, 0.38);
}

.selectable_row:not(.selectable_row_active):hover {
	background-color: #F2F2F2;
	padding-left: 10px;
	margin-left: 0;
	border: 1px solid #BDBDBD;
}

.selectable_row:first-child {
	border-top-left-radius: var(--rounded-border-radius);
	border-top-right-radius: var(--rounded-border-radius);
}

.selectable_row:last-child {
	border-bottom-left-radius: var(--rounded-border-radius);
	border-bottom-right-radius: var(--rounded-border-radius);
}

.selectable_row:not(.selectable_row_active):hover+.selectable_row {
	border-top: 1px solid transparent;
}

.selectable_row:not(.selectable_row_active) {
	margin-left: 10px;
	padding-left: 0;
}

.selectable_row.selectable_row_active {
	padding-left: 10px;
	border-top: 1px solid transparent;
}

.selectable_row.selectable_row_active+.selectable_row {
	border-top: 1px solid transparent;
}

@media (max-width: 820px) {
	.header_row a {
		padding: 0 3px;
		font-size: 13px;
	}
	.topsearch > input {
		width: 210px;
	}
}

.car_data_block {
	padding: 10px 10px 0;
}

.car_data_block:not(:last-child)>.car_data_row:last-child {
	border-bottom: 1px solid rgba(60, 60, 67, 0.6);
	padding-bottom: 20px;
	box-sizing: content-box;
	margin-bottom: 20px;
}

.active_lightblue_row .actual_black_text {
	color: #ffffff !important;
}

.car_data {
	display: grid;
	grid-template-columns: minmax(20%, 150px) minmax(15%, 225px) minmax(15%, 140px) minmax(15%, 100px) minmax(15%, 75px) 1fr;
	align-items: center;
}

.car_data_row {
	font-size: 12px;
	color: var(--main-text);
	min-height: 32px;
}

.car_data_row.car_data_row_dates {
	display: grid;
	grid-template-columns: 1fr repeat(2, 110px);
}

.car_data_row.car_data_row_dates_with_icon {
	display: grid;
	grid-template-columns: 1fr repeat(2, 100px) 1fr;
}

.actual_object {
	border: 1px solid rgba(60, 60, 67, 0.38);
	border-radius: 8px;
	margin-bottom: 18px;
}

.actual_object:hover {
	box-shadow: none;
}

.actual_object:not(.active_order):hover {
	background-color: var(--default-hover);
}

.active_order {
	background-color: var(--yellow-hover);
}

.contract_right_column {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.contract_summary_row {
	display: flex;
	align-items: center;
	height: 28px;
	justify-items: center;
	gap: 8px;
	justify-content: flex-end;
}

.contract_summary_row>.text-right {
	justify-self: right;
}

.contract_summary_row.height_unset {
	height: unset;
}

@media (max-width: 1280px) {
	.selectable_filter {
		flex-wrap: wrap;
		gap: 5px;
		align-items: flex-start;
	}
	.selectable_filter .selectable_filter_checkbox {
		order: 2;
		margin-top: 3px;
	}
	.selectable_filter .selectable_filter_label {
		order: 3;
		max-width: 180px;
	}
	.objects_list_grouping {
		gap: 10px;
		align-items: flex-start;
	}
	.ms_cars_association_modal {
		max-width: 95vw;
		width: 95vw;
	}
	.scrollable_modal_left_block {
		overflow-x: hidden;
	}
}

button.material-icons {
	padding: 0;
	background: none;
	border: none;
	cursor: pointer;
}

.objects_filters_selected {
	height: 36px;
	margin-left: 10px;
	padding-right: 10px;
}

.objects_filters_selected:not(:last-child) {
	border-bottom: 1px solid rgba(60, 60, 67, 0.38);
}

.add_button_green {
	color: var(--button-green);
}

.purple_button {
	color: var(--purple);
	cursor: pointer;
}

.custom_date {
	overflow: visible;
}

.custom_date > i.material-icons {
	top: 3px;
	right: 5px;
}

.custom_date > input[type="text"] {
	padding-right: 30px;
}

.custom_date .material-icons:not(.nonhover):not(.icon_noneditable):not(.icon_common):hover {
	border-radius: 50%;
}

.display-grid-row {
	gap: 10px;
}

.font_18.material-icons {
	width: 22px;
	height: 22px;
}

.hover_red {
	cursor: pointer;
}

.hover_red:hover {
	color: red !important;
}

.custom_tooltip_2023 {
	position: absolute;
	z-index: 2000;
	min-height: 36px;
	padding: 10px 8px;
	overflow: hidden;
	background-color: #323232;
	color: #ffffff;
	border-radius: 2px;
	font-size: 1rem;
	line-height: 120%;
	text-align: center;
	pointer-events: none;
}

i.font_20 {
   font-size: 20px;
}

.qs-datepicker-container {
	font-size: 15px;
	box-shadow: none;
}

.qs-month-year, .qs-current, .qs-day {
	font-weight: 500;
}

.qs-controls, .qs-squares {
	filter: none;
}

/*Новое стилевое оформление*/
.bg-white{
	background:white!important;
}
.modal .modal-content.common_style1{
	background:    rgba(242, 242, 247, 1)!important;
	padding:38px 15px 20px 15px;
}

.modal .modal-content.common_style1 .cs_headers{
	display:grid;
	color:    rgba(0, 0, 0, 1);
	font-weight:500;
	font-size:14px;
	gap:15px;
	height:40px;
	align-items: center;
	border-bottom: 1px solid rgba(60, 60, 67, 0.38);
	padding-top:15px;
	z-index: 1;
}
.modal .modal-content.common_style1  .cs_headers_sticky{
	position:sticky;
	top:0px;
	background-color:  rgba(242, 242, 247, 1);
	z-index:1;
	padding-top: 10px;
}

.cs_headers_sticky_top_one{
	max-height: 60vh;
	overflow-y: scroll;
}
.cs_headers_item_icon{
	text-align:center;
}
.cs_headers_item_icon i.material-icons{
	font-size:16px;
}
.cs_headers_item_icon i.material-icons:hover{
	background: none!important;
	cursor: inherit!important;
}
.modal .modal-content.common_style1 .cs_rubrics{
	color:    rgba(0, 0, 0, 1);
	font-weight:500;
	font-size:14px;
	height:36px;
	display:flex;
	text-transform:uppercase;
	align-items: center;
}
.modal .modal-content:is(.common_style1, .modal_gray) .cs_block{
	border-radius:8px;
	background:white;
	margin-bottom:10px;
}
.cs_row_content{
	height:40px;
	gap:15px;
	align-items: center;
	margin-left:10px;
}
.cs_row:not(:first-child) .cs_row_content{
	border-top:1px solid rgba(229, 229, 234, 1) ;
}
.cs_modal_header{
	text-align:center;
	font-weight: 500;
	font-size:16px;
}


.modal .modal-content:is(.common_style1, .modal_gray) .cs_block .cs_row:first-child{
	border-top-left-radius: 8px;
	border-top-right-radius: 8px;
}
.modal .modal-content:is(.common_style1, .modal_gray) .cs_block .cs_row:last-child{
	border-bottom-left-radius: 8px;
	border-bottom-right-radius: 8px;
}

.cs_block {
	.cs_row_active_editable:first-child {
		border-top: none;
	}

	.cs_row_active_editable:last-child {
		border-bottom: none;
	}
}

.cs_header_top_block{
	height: 40px;
	display:flex;
	align-items: center;
	color:black;
	font-weight: 500;
	background:rgba(242, 242, 247, 1);
	padding-left:15px;
}

.cs_valuetext{
	color:    rgba(60, 60, 67, 0.6);
	font-weight:500;
	font-size:14px;
	white-space: nowrap;
	overflow:hidden;
	text-overflow: ellipsis;
}
.cs_valuetext_edit{
	color: #424242;
	font-weight:400;
	font-size:14px;
	white-space: nowrap;
	overflow:hidden;
	text-overflow: ellipsis;
}
.cs_label_show{
	color: #555;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}


.cs_labeltext{
	color:#000;
	font-size:14px;
}
.cs_placeholder1{
	color: rgba(60, 60, 67, 0.60);
	font-size: 14px;
	font-weight: 500;
}
.cs_placeholder2{
	color: rgba(60, 60, 67, 0.60);
	font-size: 14px;
}

.cs_hint{
	font-size: 12px;
	color:#757575;
}

.cs_input_datetime_div>input[type=text]{
	border-radius: 3px;
	border: 1px solid  var(--fixed-select-border);
	font-size: 14px;
	color: #424242;
	text-align: center;
	width: 120px;
	background:white;
 }

.cs_input_selectsearch_div  input{
	border-color: var(--fixed-select-border-hover);
	cursor: text;
}
.cs_input_selectsearch_div  input:focus{
	border-color: var(--light-blue);
}

.cs_row_active {
	background: rgba(0, 122, 255, 0.55)
}
.cs_row_active .cs_valuetext{
	color:white;
}
.cs_row_active_editable{
	/*border-color: 1px solid #DDD;*/
	background: #E8E8E8;
}
.cs_row_active_editable{
	border-top: 1px solid #DDD;
	border-bottom: 1px solid #DDD;
}


/*убираем линии у активного*/
.cs_row_active_editable .cs_row_content,.cs_row_active .cs_row_content{
	border-top:none!important;
}
/*и следующего за ним*/
.cs_row_active_editable + .cs_row .cs_row_content,.cs_row_active + .cs_row .cs_row_content{
	border-top:none!important;
}
.cs_row:hover:not(.cs_row_active):not(.cs_row_active_editable) .cs_row_content{
	position:relative;
}
.cs_row:not(.cs_row_active, .cs_row_no_hover):not(.cs_row_active_editable) .cs_row_content:hover:after{
	position:absolute;
	content:"";
	width:3px;
	height:30px;
	right:0;
	background: #007AFF;
}

.cs-border_add_header{
	padding-left:10px;
	padding-right:10px;
}
.cs-border_add_header>div{
	display:flex;
	justify-content: space-between;
	align-items: center;
	height: 38px;
}

.cs-border_bottom_header>div{
	border-bottom: 1px solid rgba(60, 60, 67, 0.38);
}
.cs-border_bottom_header  + .cs_row .cs_row_content{
	border-top:none!important;
}



.cs_add_icon_div_width{
	width:30px;
}
.cs_material_icons i{
	width: 26px;
	height: 26px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.cs_row_active_editable  [type="checkbox"].checkbox_2023 + span:not(.lever):before{
	background:white;
}

.cs_row_with_divider>div:not(:last-child){
	border-right: 1px solid rgba(60, 60, 67, 0.38);
	padding-right:10px;
}
.col-padding{
	padding: 0 0.75rem;
}
.main_scrollbar {
	overflow-y: hidden;
}

.navigate_next, .navigate_before {
	color: transparent;
	border-radius: 3px;
}

:is(.navigate_next, .navigate_before):hover {
	color: #424242;
}

:is(.navigate_next, .navigate_before)::before {
	content: '.';
	position: absolute;
	width: 200px;
	z-index: -1;
	color: transparent;
	pointer-events: none;
}

.tabs_buttons{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 37px;
	margin-top: 15px;
	background: #FFFFFF;
	border-radius: 5px;
	button{
		display: flex;
		height: 25px;
		gap: 10px;
		border: 2px solid #FFFFFF;
		background: #FFFFFF;
		font-size: 14px;
		color: #8A8A8E;
		cursor: pointer;
	   
	}
	.tabs_buttons_active {
		color: #000000;
		border-bottom: 2px solid #0D99FF;
	}
}

.navigate_next::before {
	right: 0;
	background: linear-gradient(to right, transparent, white);
}
.navigate_before::before {
	left: 0;
	background: linear-gradient(to left, transparent, white);
}

@media only screen and (max-width: 992px) {
  .navigate_next, .navigate_before {
	display: none !important;
  }
  .main_scrollbar::before {
	content: "";
	width: var(--main-scrollbar-width, 100%);
	height: 27px;
	position: fixed;
	pointer-events: none;
  }
  .main_scrollbar.left_shadow::before {
	background: linear-gradient(to right, white, transparent 30%);
  }
  .main_scrollbar.right_shadow::before {
	background: linear-gradient(to right, transparent 70%, white);
  }
  .main_scrollbar.left_shadow.right_shadow::before {
	background: linear-gradient(to right, white, transparent 30%, transparent 70%, white);
  }
}

.column {
	-webkit-column-width: 150px;
	-moz-column-width: 150px;
	column-width: 150px;
	-webkit-column-count: 3;
	-moz-column-count: 3;
	column-count: 3;
	-webkit-column-gap: 30px;
	-moz-column-gap: 30px;
	column-gap: 30px;
	-webkit-column-rule: 1px solid #ccc;
	-moz-column-rule: 1px solid #ccc;
	column-rule: 1px solid #ccc;
}

.color_value {
	background: #F5F5F5;
	border: 0;
	box-sizing: border-box;
	border-radius: 3px;
	height: 30px;
	line-height: 30px;
	padding-left: 5px;
	padding-right: 5px;
	margin-right: 5px;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}

.name_box {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-direction: row;
	width: 100%;
	height: 38px;
	padding: 12px 10px 5px 10px;
	background: #ffffff;
	color: var(--black-text);
	border-top: 1px solid var(--border-038);
	position: sticky;
	top: 0;
	z-index: 1;
}

.calendar_month {
	width: 84px;
	padding: 7px 5px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight: 400;
	border-radius: 3px;
	color: #757575;
	cursor: pointer;
}

.calendar_month_active {
	background: #549BE2;
	color: #FFFFFF;

	&:hover {
		background: #549BE2;
		color: #FFFFFF;
	}
}

.material-icons.icon_null,
.material-icons-outlined.icon_null {
	color: #BDBDBD;
	cursor: auto;
}

.column_window {
	display: flex;
	flex-direction: row;
	overflow: hidden;
	height: 100%;
}

.left_column_window {
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
	flex-direction: column;
	padding: 15px 15px 20px;
	background: var(--modal-gray-background);
	overflow-y: auto;
	width: 100%;
	gap: 10px;
	height: 100%;
}

.right_column_window {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	flex-direction: column;
	width: 325px;
	flex-shrink: 0;
	background: #FFFFFF;
	overflow-y: auto;
	border-left: 1px solid #BDBDBD;
	font-size: 12px;
}

.right_column_window {
	color: var(--gray-text);
	.shedule_option_label {
		position: relative;
		top: 2px;
		left: -2px;
		width: 13px;
	}
}

.right_column_box {
	display: flex;
	flex-direction: column;
	width: 100%;
	padding: 5px 10px 10px 5px;
}

.white_line {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	padding: 5px 10px;
	border-radius: 8px;
	background: #FFFFFF;
}

.box_line {
	display: flex;
	align-items: center;
	height: 28px;
}

.border_hover:not(:first-child) > .top_table_border {
	border-top: 1px solid rgba(0, 0, 0, 0.12);
}

.border_hover:not(:first-child).active_line .top_table_border {
	border: none;
}

.border_hover.active_line + .border_hover > .top_table_border {
	border: none;
}

.border_hover:not(.offset_list_active, .active_line):hover {
	border-left: 3px solid #007AFF;
	margin: 2px 0 2px 0;
	padding-left: 7px;
}

.border_hover:not(.active_line):hover :is(.list_shedule, .grid_offset_list, .main_modal_line) {
	margin: -2px 0 -2px 0;
}

.border_hover:not(.active_line) {
	margin-left: 10px;
}

.active_line {
	color: #FFFFFF;
	background: #73B6FF;
	margin: 0;
	padding-left: 10px;
	border: none;
}

.active_line:first-child {
	border-top-left-radius: var(--rounded-border-radius);
	border-top-right-radius: var(--rounded-border-radius);
}

.active_line:last-child {
	border-bottom-left-radius: var(--rounded-border-radius);
	border-bottom-right-radius: var(--rounded-border-radius);
}

.remark_text {
	font-size: 12px;
	font-weight: 400;
	padding: 0 10px 2px 10px;
	color: var(--gray-text);
	margin: 0;
}

.name_object {
	color: rgba(60, 60, 67, 0.60);
	font-weight: 500;
}

.search_position {
	display: flex;
	align-items: center;
	margin: 0 10px;
	flex-grow: 1;
	min-height: 40px;
}

.demarcation_line {
	border-bottom: 1px solid #E5E5EA;
}

.selected_option {
	color: rgba(60, 60, 67, 0.6);
	font-weight: 500;
}

.marked_items {
	color: rgba(60, 60, 67, 0.60);
	font-weight: 500;
}

.modal_comment {
	display: flex;
	flex-direction: column;
	color: var(--gray-text);
	font-size: 12px;
	gap: 5px;
	padding: 0px 10px;
}

.position-sticky_t0_z1 {
	position: sticky;
	top: 0;
	z-index: 1;
}

.row_gap_10 {
	row-gap: 10px;
}

.column_gap_10 {
	column-gap: 10px;
}

.scrollbar-stable {
	scrollbar-gutter: stable;
}

.modal_reporting_value_text {
	color: #3c3c43;
	opacity: 0.6;
	font-weight: 500;
}

.text-capitalize {
	text-transform: capitalize;
}

.card_option_header {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 15px;
	margin-bottom: 10px;
	margin-top: 5px;

	span {
		color: #8A8A8E;
		text-align: center;
		font-size: 13px;
		font-weight: 400;
		cursor: pointer;
		padding: 3px 5px;
		border: 2px solid transparent;

		&:hover {
			color: rgba(0, 0, 0, 0.89);
			border-radius: 4px;
			background: #F5F5F5;
		}

		&.card_option_selected {
			color: #000000;
			border-bottom: 2px solid #0D99FF;
			background: none;
			border-radius: 0;
		}
	}
}

.white_box {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 5px 10px;
	border-radius: 8px;
	background: #FFFFFF;
}

.white_box_line {
	display: flex;
	flex-direction: row;
	align-items: center;
	padding: 0 10px;
	border-radius: 8px;
	background: #FFFFFF;
}

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

.templates_card,
.templates_card_wtite {
	display: flex;
	flex-direction: column;
	height: auto;
	margin: 0 10px;
	border: 1px solid #D9D9D9;
	border-radius: 8px;
}

.templates_card {
	background: var(--light-gray-background);
	padding: 5px 0;
}

.templates_card_wtite {
	background: #FFFFFF;
	padding: 5px 10px;
	font-size: 14px;

	&:hover {
		background: var(--light-gray-background);
	}

	.templates_list_line {
		padding: 5px 0;

		&:first-child {
			border-bottom: 1px solid #D9D9D9;
		}
	}
}

.templates_list_line .qs-datepicker-container {
	right: 0;
}

.templates_list {
	display: flex;
	flex-direction: column;
	padding-bottom: 10px;
}

.templates_list_line {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 2px 10px;
	gap: 10px;

	&.pb-5 {
		padding: 0px 10px 5px 10px;
	}
}

.templates_list_line_date {
	display: flex;
	gap: 10px;
	align-items: center;
	padding: 2px 10px;
	margin-left: 15px;

	.overflow-initial span {
		display: block;
		width: 100%;
		text-align: end;
		font-weight: 500;
	}
}

.main_modal_box {
	display: flex;
	flex-direction: column;
	width: 100%;
	margin-top: 5px;
	padding: 0;
	border-radius: var(--rounded-border-radius);
	background: #FFFFFF;
}

.sticky_head {
	display: flex;
	flex-direction: column;
	position: sticky;
	width: 100%;
	top: -15px;
	left: -10px;
	padding-top: 15px;
	margin-top: -15px;
	gap: 10px;
	background: var(--modal-gray-background);
}

.right_general_box {
	display: flex;
	flex-direction: column;
	color: #6F6F6F;
	font-size: 14px;
	font-weight: 400;
	gap: 4px;
	margin: 0 10px;
}

.general_box_line {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 35px;
	background: #F5F5F5;
	padding: 10px;

	&:first-child {
		border-top-left-radius: var(--rounded-border-radius);
		border-top-right-radius: var(--rounded-border-radius);
	}

	&:last-child {
		border-bottom-left-radius: var(--rounded-border-radius);
		border-bottom-right-radius: var(--rounded-border-radius);
	}
}

.general_box_line.templates_list_line_double {
	display: flex;
	flex-direction: column;
	align-items: stretch;
}

.switching-pages {
	display: flex;
	gap: 10px;
	min-height: 44px;
	font-size: 24px;
	align-items: center;
	justify-content: center;
	border-top: 1px solid #D9D9D9;
	background: #FFFFFF;
	overflow-x: auto;

	i {
		color: #0D99FF;
		cursor: pointer;

		&:hover {
			border-radius: 4px;
			background: #F5F5F5;
		}

		&:nth-child(2) {
			transform: rotate(180deg);
		}
	}

	span {
		display: flex;
		width: 24px;
		height: 24px;
		align-items: center;
		justify-content: center;
		font-size: 14px;
		font-weight: 500;
		color: #8A8A8E;
		border: 1px solid transparent;
		border-radius: 4px;
		cursor: pointer;

		&:hover {
			color: #000000;
			background: #F5F5F5;
		}

		&.select-page {
			color: #000000;
			border: 1px solid #0D99FF;
			background: var(--white);
		}
	}
}

.switching-pages_numbers {
	display: flex;
	width: fit-content;
	gap: 10px;
	justify-content: flex-start;
}

.top-menu_button,
.top-menu_button_filter summary {
	display: flex;
	height: 30px;
	padding: 5px;
	font-size: 12px;
	align-items: center;
	color: #757575;
	border-radius: 3px;
	cursor: pointer;
	box-sizing: border-box;

	> i {
		font-size: 20px;
	}

	span {
		&:hover {
			text-decoration: underline;
		}
	}

	&:hover {
		background: #E8E8E8;
	}
}

.top-menu_button {
	gap: 3px;
}

.top-menu_button_filter.action_button_active summary,
details[open].top-menu_button_filter summary {
	color: #FFFFFF;
	background: #549BE2;

	button {
		background: #549BE2;

		&:hover {
			background: #54688A;
		}
	}

	&:hover {
		background: #549BE2;
	}
}

.sort-buttons {
	display: flex;

	span {
		display: flex;
		width: 50px;
		height: 24px;
		font-size: 12px;
		align-items: center;
		justify-content: center;
		color: #424242;
		background: #FFFFFF;
		border: 1px solid #ECECEC;
		cursor: pointer;

		&.w-75 {
			width: 75px;
		}

		&:not(:last-child) {
			border-right: none;
		}

		&:first-child {
			border-top-left-radius: 4px;
			border-bottom-left-radius: 4px;
		}

		&:last-child {
			border-top-right-radius: 4px;
			border-bottom-right-radius: 4px;
		}

		&.sort-buttons_active {
			background: #F2F9FF;
			border: 1px solid #BDE3FF;

			+ span {
				border-left: none;
			}
		}

		&.sort-buttons_disabled {
			color: #BDBDBD;
		}
	}
}

.video-card {
	display: flex;
	flex-direction: column;
	border: 1px solid #D9D9D9;
	border-radius: 8px;

	> div {
		&:first-child {
			display: flex;
			padding: 5px 10px;
			font-size: 14px;
			color: #000000;
			background: #F5F5F5;
			border-bottom: 1px solid #D9D9D9;
			border-top-left-radius: 8px;
			border-top-right-radius: 8px;
		}

		&:last-child {
			display: flex;
			justify-content: space-between;
			background: #FFFFFF;
			padding: 5px 10px;
			border-bottom-left-radius: 8px;
			border-bottom-right-radius: 8px;
		}
	}
}

.m-video-card {
	display: flex;
	flex-direction: column;
	background: #FFFFFF;
	border-radius: 8px;

	> div {
		&:first-child {
			display: flex;
			height: 30px;
			padding: 5px;
			align-items: center;
			font-size: 14px;
			font-weight: 500;
			color: #000000;
			border-bottom: 1px solid #D9D9D9;
			white-space: nowrap;
			overflow-x: auto;
			overflow-y: hidden;
			scrollbar-width: none;

			.card-gray-car {
				font-size: 12px;
				color: #757575;
				padding-left: 5px;
			}
		}

		&:last-child {
			padding: 5px;
			font-size: 12px;
			font-weight: 500;
			color: #757575;
		}
	}

	.video-camera img {
		width: 60px;
		height: 60px;
	}
}

.video-card_data {
	display: flex;
	flex-direction: column;
	gap: 5px;
	font-size: 14px;
	color: #6F6F6F;

	> div:first-child {
		display: flex;
		align-items: center;
		gap: 5px;
		color: #000000;
	}

	> span {
		font-weight: 500;
	}

	i {
		font-size: 18px;
	}
}

.m-video-card_data {
	display: flex;
	gap: 5px;
	font-weight: 500;

	i {
		display: flex;
		align-items: center;
		font-size: 12px;
	}
}

.video-camera {
	display: flex;
	gap: 10px;
	cursor: pointer;
	align-items: center;

	img {
		width: 83px;
		height: 83px;
		border:1px solid #D9D9D9;
		object-fit: cover;
	}
}

.video-card_camera {
	display: flex;
	gap: 15px;
	width: 270px;
	justify-content: space-between;
}

.grid-85-50 {
	display: grid;
	grid-template-columns: 85px 50px;
}

.save-button {
	position: sticky;
	bottom: 0;
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	padding: 5px;
	background: #FFFFFF;
	border-top: 1px solid #D9D9D9;
	border-bottom-left-radius: 8px;
	border-bottom-right-radius: 8px;

	button {
		width: auto;
		border: none;
		border-radius: 3px;
		padding: 5px 10px;
		font-size: 12px;
		font-weight: 400;
		color: #FFFFFF;
		background: #E8E8E8;
		cursor: pointer;

		&.save-button_active {
			background: var(--blue-button-background);
		}
	}
}

.transform-page_main {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	justify-content: space-between;
	overflow: hidden;
}

.mainpanel_row_transform-page {
	position:sticky;
	top:0;
	display: flex;
	align-items: center;
	background: #FFFFFF;
	z-index: 1;
}

.bb_D9 {
	border-bottom: 1px solid #D9D9D9;
}

.named_parameter {
	display: grid;
	grid-template-rows: 26px 28px;

	> span {
		display: flex;
		align-items: center;
		height: 26px;
		font-size: 14px;
		font-weight: 500;
		color: #8A8A8E;
	}
}

.gray_table {
	table-layout: fixed;
	border-spacing: 0 2px;
	border-collapse: separate;

	tr {
		padding: 5px;
		border: none;
	}

	thead th {
		padding: 3px 10px 3px 5px;
		border-bottom: 1px solid rgba(0, 0, 0, 0.12);
		font-size: 12px;
		font-weight: 500;
		color: rgba(0, 0, 0, 0.89);
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;

		&:first-child {
			width: 120px;
		}

		span {
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;
		}
	}

	tbody tr {
		background-color: #F5F5F5;

		td {
			padding: 5px;
			font-size: 14px;
			font-weight: 500;
			color: #6F6F6F;
			border-radius: 0;

			span {
				width: 30px;
			}

			&:first-child {
				width: 120px;
				padding: 5px 20px 5px 5px;
				font-size: 12px;
				font-weight: 400;
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
			}

			&:not(:first-child) {
				span {
					padding-right: 15px;
				}
			}
		}
	}
}

.gray_table tbody {
	 &:nth-child(2) {
	 	tr:first-child > td:first-child {
			border-top-left-radius: 8px;
		}
		tr:first-child > td:last-child {
			border-top-right-radius: 8px;
		}
	 }

	&:last-child {
		tr:last-child > td:first-child {
			border-bottom-left-radius: 8px;
		}
		tr:last-child > td:last-child {
			border-bottom-right-radius: 8px;
		}
	}
}

.table-production-driver-details {
	thead tr {
		height: 30px;
		border-bottom: 1px solid #B5B5B7;

		th {
			border: none;
			padding: 0;
			font-size: 14px;
			font-weight: 400;
			color: #424242;

			&:first-child {
				width: 120px;
			}

			&:nth-child(2) {
				width: 65px;
				padding: 0 20px;
			}
		}
	}

	tbody tr {
		height: 38px;
		border: none;

		td {
			border: none;
			padding: 0;
			font-size: 14px;
			font-weight: 500;
			color: #3C3C43;
			opacity: 0.6;

			&:first-child {
				width: 120px;
				font-weight: 400;
				color: #424242;
				opacity: 1;
			}

			&:nth-child(2) {
				width: 65px;
				padding: 0 20px;
			}
		}
	}
}

.second_header {
	display: flex;
	align-items: center;
	height: 26px;
	padding: 10px 15px 2px 10px;
	font-size: 12px;
	font-weight: 500;
	color: #757575;
}