/*  
#3c8dbc - синий с RC 
#f8aa00 - оранжевый 
*/

/* Разрешаем выделение текста в контентных элементах */
p, div, span, td, th, li, label, h1, h2, h3, h4, h5, h6,
.datatable, .datatable2, .device_table, .admin_table,
.table_track_stat, .report_table, .stat_table {
    -ms-user-select: text;
    user-select: text;
    -webkit-user-select: text;
}
.horizontalbar-menu-item:hover {
    background-color : #3c8dbc;
}
 
.horizontalbar-menu-item.active {
    background-color : #3c8dbc;
}

.x-monitoring-unit-row:hover, .x-monitoring-unit-row .active {
    background-color : #ddd !important;   
  
}

.track_left_trs.is-selected {
    background-color: #d6e6f7 !important;
}

#dPanel-bottom {
    background-color : #3c8dbc;
}

.gm-ui-hover-effect>span {
	background-color: #fff !important;
}

#routes_add_settings {
	align-items: flex-start;
	display : block !important;
	text-align : right;
    margin-bottom: 8px;
}

#routes_add_settings img {
    --space-x-reverse: 0;
    margin-right: calc(8px* var(--space-x-reverse));
    margin-left: calc(8px* calc(1 - var(--space-x-reverse)));
	cursor : pointer;
}

.cluster {
	color : #ffffff !important;
	padding-top : 0px !important;
	line-height: 11px !important;
	text-align: right !important;
	padding-right : 7px !important;	
	padding-top : 11px !important;	
    box-sizing : border-box;
}

table tr td.fast_button_td {
	color : #888 !important;
}

table tr td.fast_button_td.active {
	color: #fff !important;
	background-color: #3c8dbc;
}

#track_info.track-info-loading > :not(#track_info_progress) {
	display: none !important;
}

#track_info_progress {
	position: absolute;
	top: 44%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 80%;
	max-width: 520px;
	display: none;
	pointer-events: none;
}

#track_info_progress .track-info-progress-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 10px;
}

#track_info_progress .track-info-progress-pill {
	background: #cfe3f4;
	color: #3c8dbc;
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.5px;
	padding: 6px 14px;
	border-radius: 999px;
}

#track_info_progress .track-info-progress-percent {
	font-weight: 700;
	font-size: 14px;
	color: #3c8dbc;
}

#track_info_progress .track-info-progress-bar {
	width: 100%;
	height: 8px;
	background: #e5e9ef;
	border-radius: 999px;
	overflow: hidden;
}

#track_info_progress .track-info-progress-fill {
	height: 100%;
	width: 0%;
	background: #3c8dbc;
	border-radius: 999px;
	transition: width 0.2s ease;
}

#track_info_progress .track-info-progress-spinner {
	margin: 12px auto 0;
	width: 28px;
	height: 28px;
	border: 3px solid #d9e6f2;
	border-top-color: #3c8dbc;
	border-radius: 50%;
	animation: trackInfoSpin 0.9s linear infinite;
}

#events_progress {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 80%;
	max-width: 520px;
	display: none;
	pointer-events: none;
}

#events_progress .track-info-progress-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 10px;
}

#events_progress .track-info-progress-pill {
	background: #cfe3f4;
	color: #3c8dbc;
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.5px;
	padding: 6px 14px;
	border-radius: 999px;
}

#events_progress .track-info-progress-percent {
	font-weight: 700;
	font-size: 14px;
	color: #3c8dbc;
}

#events_progress .track-info-progress-bar {
	width: 100%;
	height: 8px;
	background: #e5e9ef;
	border-radius: 999px;
	overflow: hidden;
}

#events_progress .track-info-progress-fill {
	height: 100%;
	width: 0%;
	background: #3c8dbc;
	border-radius: 999px;
	transition: width 0.2s ease;
}

#events_progress .track-info-progress-spinner {
	margin: 12px auto 0;
	width: 28px;
	height: 28px;
	border: 3px solid #d9e6f2;
	border-top-color: #3c8dbc;
	border-radius: 50%;
	animation: trackInfoSpin 0.9s linear infinite;
}

@keyframes trackInfoSpin {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}

.gm-style-iw {
	padding : 0px !important;
	overflow-x: hidden;
	overflow-y: hidden;
}

.iw-content { 
	height : 350px !important;
	padding : 10px 0px 0px 0px !important;
	overflow-x: hidden;
	overflow-y: hidden;

}

.gm-style-iw-d {
	overflow-x: hidden !important;
	overflow-y: hidden !important;
	max-height : auto !important;
}

.iw-content table td {
	padding-top : 2px;
	padding-bottom : 2px;
	padding-left : 10px;
}

.iw-title {
	background : #3c8dbc;
	padding : 5px 10px;
}

.infocontent {
	margin : 0px !important;
	width : 330px !important;
}

.datatable td, .datatable2 td  {
    padding : 8px 10px;
    border-bottom : 1px solid #aaa;
}

.datatable tr:hover {
    background-color : #e6e6e6 !important;
    cursor : pointer;
}

.datatable2 tr:hover {
    background-color : #ddd !important;
}

.green, .text-green {
	color : #5cb85c !important;
}

.blue, .text-blue {
	color : #367fa9 !important;
}

.red, .text-red {
	color : #dd4b39  !important;
}

.yellow, .text-yellow {
	color : #3c8dbc  !important;
}

.grey, .text-grey {
	color : #aaa  !important;
}

.white, .text-white {
	color : #fff  !important;
}

.gm-style-iw-chr {
	position : absolute  !important;
	right : -10px !important;
	top : -11px !important;
	left : auto !important;
}

.tr-sort i {
	font-size : 16px !important;
}

.colors-select {
	margin-left : 5px;
	font-size : 14px !important;
}

.tt_icons {
	font-size : 18px;
	
}

.tt_icons:hover {
	font-size : 18px;
	color : #3c8dbc  !important;
}


.gz-row.active {
	background-color: #e6e6e6 !important;
}

.iw-container {
	margin-bottom: 10px;
}

.iw-container hr {
	margin : 0px;
	margin-top : 5px;
	margin-bottom : 3px;
	border-top : 1px solid #3c8dbc;
	margin-left : -15px;
	margin-right : -10px;
	padding : 0px;
}

.iw-container .iw-can-divider {
	margin : 0px;
	margin-top : 5px;
	margin-bottom : 3px;
	margin-left : -15px;
	margin-right : -10px;
	height : 12px;
	line-height : 12px;
	background-color : #3c8dbc;
	color : #fff;
	text-align : center;
	font-size : 9px;
	font-weight : 600;
}

.iw-content i {
	font-size : 20px;
	color : #3c8dbc;
	opacity : 0.85;
}

.iw-content td {
	padding-bottom : 2px;
}

.iw-content span {
	font-size : 12px;
	color :  #888;
}

.gps-coords-copy {
	cursor : pointer;
	color : #367fa9;
	text-decoration : underline;
}

.gps-coords-copy:hover {
	color : #2b678a;
}

.gps-coords-copy.is-copied {
	color : #2f9e5f;
}

.iw-meta-grid {
	display : grid;
	grid-template-columns : 50% 50%;
	grid-template-rows : 50% 50%;
	height : 56px;
	margin-top : 2px;
	margin-left : 8px;
	margin-right : 0px;
}

.iw-meta-cell {
	padding : 2px 8px 2px 6px;
	overflow : hidden;
}

.iw-meta-label {
	font-size : 10px;
	line-height : 11px;
	color : #888;
}

.iw-meta-value {
	font-size : 11px;
	line-height : 12px;
	color : #333;
	font-weight : 400;
	white-space : nowrap;
	overflow : hidden;
	text-overflow : ellipsis;
}

.iw-title {
	font-family: 'Open Sans Condensed', sans-serif;
	font-size: 18px;
	width : 100% !important;
	font-weight: 400;
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 10px;
	padding-right: 5px;
	background-color: #3c8dbc;
	color: white;
	margin: 0;
	border-radius: 2px 2px 0 0;
}

.iw-title .iw-title-icon {
	font-size: 14px;
	margin-right: 8px;
	color: #fff;
	opacity: 0.95;
}

.iw-container .iw-content {
	font-size: 13px;
	line-height: 18px;
	font-weight: 400;
	margin-right: 1px;
	padding: 10px 5px 20px 15px;
	overflow-y: auto;
	overflow-x: hidden;
}
.iw-content img {
	float: right !important;
	margin: 0 5px 5px 10px !important;	
}
.iw-subTitle {
	font-size: 16px;
	font-weight: 700;
	padding: 5px 0;
}
.iw-bottom-gradient {
	position: absolute;
	width: 326px;
	height: 25px;
	bottom: 10px;
	right: 18px;
	background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
	background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
	background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
	background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
}


#wizard_dlg_target .dlg-page-with-tabs-nav {
    display: flex;
    flex-direction: column
}

#wizard_dlg_target .dlg-page-with-tabs-nav>.tabs-nav {
    flex-shrink: 0;
    border-bottom-width: 1px;
    padding-bottom: 4px;
    margin-bottom: 8px
}

#wizard_dlg_target .dlg-page-with-tabs-nav>.tabs-container {
    flex-grow: 1;
    overflow: auto;
    -ms-user-select: text;
    user-select: text
}

#wizard_dlg_target .dlg-page-with-tabs-nav>.tabs-container.tabs-hide {
    display: none
}

#wizard_dlg_target .dlg-page-with-tabs-nav .tabs-nav a {
    position: relative;
    padding: 0 14px 0 0
}

#wizard_dlg_target .dlg-page-with-tabs-nav .tabs-nav a>span {
    width: auto;
    min-width: 0;
    height: 21px;
    min-height: 21px;
    box-sizing: content-box;
    padding: 7px 0 0 14px;
    margin: 0
}

#wizard_dlg_target .dlg-page-with-tabs-nav .tabs-nav a>span.items-dialog-tabs-nav-whatsnew-indicator {
    display: none;
    position: absolute;
    top: 50%;
    margin: -2px 0 0;
    width: 4px;
    height: 4px;
    left: 6px;
    border-radius: 50%;
    background: var(--featured-dot-background);
    min-width: 0;
    min-height: 0;
    box-sizing: border-box;
    padding: 0
}

#wizard_dlg_target .dlg-page-with-tabs-nav .tabs-nav a>span.items-dialog-tabs-nav-whatsnew-indicator.items-dialog-tabs-nav-whatsnew-indicator-active {
    display: block
}

.tabs-nav li {
	background-color : #ddd;
	border-bottom : 3px solid #fff;
}

.tabs-nav li:hover, .tabs-nav li.tabs-selected {
	border-bottom : 3px solid #3c8dbc;
}

.table_tt th {
	font-size : 10px !important;
}

.table_tt td {
	font-size : 11px !important;
	padding-right : 10px !important;
}

.table_tt tr:hover {
	background-color: #ddd;
}

.table_tt td {
	white-space:nowrap !important;
	
}

table.table_track_stat {
	width : 100% !important;
}

.table_track_stat td {
	font-size : 12px !important;
	padding : 2px 0px !important;
	padding-right : 10px !important;
}

.table_track_stat tr:hover {
	background-color: #ddd;
}

.table_track_stat td {
	white-space:nowrap !important;
	border-bottom : 1px solid #dedede;

}

td.text-right {
	text-align : right !important;
}

table.hpointer tr {
	cursor : pointer;
}



.report_tabs {
	box-sizing: border-box; 
	float : left;  
	color : #000; 
	padding : 8px 15px; 
	border-right : 1px solid #ccc;
	cursor : pointer;
}

.report_tabs:hover, .report_tabs.active {
	background-color : #3c8dbc;
	color : #fff;
}

.report_icons {
	box-sizing: border-box; 
	float : right;  
	color : #464646; 
	padding : 7px 15px; 
	border-left : 1px solid #ccc;
	cursor : pointer;
}

.report_icons i {
	font-size : 16px;
}

.report_icons:hover {
	background-color : #3c8dbc;
	color : #fff;
}


.reports_data {
	width : 100%;
	height : auto;
	min-height : 100%;
}

.flot_legend td {
	color : #666;
	padding : 2px 10px;
}

.report_table td, .stat_table td {
	border : 1px solid #ccc;
	text-align : right;
	white-space: nowrap;
	padding : 5px 10px;
}

.report_table tr:hover, .stat_table tr:hover {
	background-color : #eee;
}

.report_table th, .stat_table tr td:first-child {
	background-color : #eee;
	border : 1px solid #ccc;
	text-align : right;
	white-space: nowrap;
	padding : 5px 10px;
}







.admin_table td  {
	border : 1px solid #ccc;
	text-align : right;
	white-space: nowrap;
	min-width : 40px;
	padding : 0px 0px;
}

.admin_table tr:hover{
	background-color : #eee;
}

.admin_table th {
	background-color : #eee;
	border : 1px solid #ccc;
	text-align : right;
	white-space: nowrap;
	padding : 5px 10px;
}

.admin_table input, .admin_table span {
	width : 100%;
	margin : 0px;
	padding : 5px 10px;
	text-align : right;
	min-height : 30px;
}

.admin_valid_table td,
.admin_valid_table th {
	padding: 5px 10px;
}

.admin-valid-row {
	cursor: pointer;
}




.device_table td  {
	border : 1px solid #ccc;
	text-align : right;
	white-space: nowrap;
	min-width : 40px;
	padding : 5px 10px;
	cursor : pointer;
}

.device_table tr:hover{
	background-color : #eee;
}

.device_table span {
	width : 100%;
	margin : 0px;
	text-align : right;
	/*min-height : 30px; */
}

.device_table thead th {
    position: sticky;
    top: 0;

	background-color : #eee;
	border : 1px solid #ccc;
	text-align : right;
	white-space: nowrap;
	padding : 5px 10px;

    z-index: 10;
}


#table_area {
  display: flex;
  flex-direction: column;
  height: 50%;
  border-top: 1px solid #d0cecf;
}

#report_tabs_area {
  height: 30px;
  flex-shrink: 0; /* не сжимать */
  border-top: 1px solid #d0cecf;
  border-bottom: 1px solid #d0cecf;
}

#report_data_area {
  flex: 1 1 auto; /* занимает всё оставшееся */
  overflow-x: auto;
  overflow-y: auto;
  box-sizing: border-box;
}

.left_menu li {
	display : block;
	width : 100%;
	padding : 10px 10px;
	border-bottom : 1px solid #ddd;
	cursor : pointer;
	background-color: #fff;
	
}

.left_menu li.active {
	background-color: #3c8dbc;
	color : #fff;
}

.left_menu li:hover {
	background-color: #3c8dbc;
	color : #fff;
}

button {
	cursor : pointer;
}

input.input_form {
	box-sizing: border-box;
    min-height: 24px;
    border: 1px solid var(--input-border-color);
    border-radius: var(--button-border-radius);
    padding: var(--input-padding-y) var(--input-padding-x);
    font-size: 1rem;
    text-align: left;
    font-family: inherit;
    color: var(--input-color);
    resize: none;
    outline: none;
}

select.input_form {
    box-sizing: border-box;
    min-height: 24px;
    border: 1px solid var(--input-border-color);
    border-radius: var(--button-border-radius);
    padding: var(--input-padding-y) var(--input-padding-x);
    font-size: 1rem;
    font-family: inherit;
    color: var(--input-color);
    background-color: #fff;
    outline: none;
}

.btn {
    border: 1px solid var(--input-border-color);
    border-radius: var(--button-border-radius);
    padding: var(--input-padding-y) var(--input-padding-x);
	font-size : 14px !important;
}

.highlighted-row {
        background-color: #ffff99 !important;
}

.hide-scroll {
	overflow-y: auto;
  	scrollbar-width: none;
	-ms-overflow-style: none; 
} 

.hide-scroll::-webkit-scrollbar {
  display: none; /* Chrome, Safari и Opera */
}

/* Datepicker */
.ui-datepicker {
	background-color: #fff;
	border: 1px solid #cfd7df;
	border-radius: 4px;
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
	padding: 8px 10px;
	font-size: 13px;
	font-family: inherit;
	color: #2f3b52;
	z-index: 10050 !important;
}

.ui-datepicker .ui-datepicker-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 8px;
	font-weight: 600;
	color: #2f3b52;
}

.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
	cursor: pointer;
	padding: 4px 6px;
	border-radius: 4px;
	color: #2f3b52;
}

.ui-datepicker .ui-datepicker-prev:hover,
.ui-datepicker .ui-datepicker-next:hover {
	background-color: rgba(60, 141, 188, 0.12);
	color: #3c8dbc;
}

.ui-datepicker table {
	width: 100%;
	border-collapse: collapse;
}

.ui-datepicker th {
	font-size: 11px;
	font-weight: 500;
	color: #7a869a;
	padding: 4px;
	text-align: center;
}

.ui-datepicker td {
	padding: 0;
}

.ui-datepicker td span,
.ui-datepicker td a {
	display: block;
	padding: 6px 0;
	text-align: center;
	border-radius: 4px;
	color: #2f3b52;
	text-decoration: none;
}

.ui-datepicker td a:hover {
	background-color: rgba(60, 141, 188, 0.15);
	color: #3c8dbc;
}

.ui-datepicker .ui-datepicker-today a {
	border: 1px solid #3c8dbc;
}

.ui-datepicker .ui-state-active {
	background-color: #3c8dbc;
	color: #fff;
}

.ui-datepicker .ui-state-disabled {
	opacity: 0.35;
	color: #a0aabf;
}

.admin-row-selected {
	background-color: rgba(60, 141, 188, 0.15) !important;
}

.admin-user-tt-item {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
}

.admin-user-tt-empty {
	color: #777;
	font-style: italic;
}
.toggle-switch {
	position: relative;
	display: inline-block;
	width: 42px;
	height: 25px;
}

.toggle-switch input {
	opacity: 0;
	width: 0;
	height: 0;
}

.toggle-slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin-right : 0px !important;
	background-color: #ccc;
	transition: 0.2s;
	border-radius: 22px;
}

.toggle-slider:before {
	position: absolute;
	content: "";
	height: 20px;
	width: 20px;
	left: 2px;
	top: 2px;
	background-color: white;
	transition: 0.2s;
	border-radius: 50%;
}

.toggle-switch input:checked + .toggle-slider {
	background-color: #4caf50;
}

.toggle-switch input:checked + .toggle-slider:before {
	transform: translateX(18px);
}