.m-ui .ff-bebas { font-family: 'Bebas' !important; }

.m-ui .ff-menlo { font-family: 'MenloRegular' !important; }
.m-ui .ff-menlo-bold { font-family: 'MenloBold' !important; }

.m-ui .ff-djvu { font-family: 'DejaVu' !important; }
.m-ui .ff-djvu-bold { font-family: 'DejaVu-Bold' !important; }

.m-ui .ff-number { font-family: 'Number' !important; }
.m-ui .ff-number-bold { font-family: 'NumberBold' !important; }

* {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}


.offline {
	
}
[ng-click] {
	cursor: pointer;
}
[ng-click]:hover {
 opacity: .8;
}


/*iOS pwa corections */
.m-ui body{
  padding-top: calc(env(safe-area-inset-top)) !important;
}

/*iPad pwa corection */

/*img.logo {
    height: 15px;
    margin: 8px 0px;
    vertical-align: middle;
}*/
.login-logo {
	font-family: MenloBold;
    line-height: 36px;
    color: var(--m-grey);
/*    font-size: 21px;*/
    text-align: center;
    display: block;
    margin: 20px 0;
}

#loading {
	position: fixed;
    z-index: 100;
    background: rgb(0 0 0 / 30%);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-radius: 30px;
    top: 50vh;
    transform: translate(calc(-50%),calc(-50%));
    -webkit-transform: translate(calc(-50%),calc(-50%));
    -moz-transform: translate(calc(-50%),calc(-50%));
    left: 50vw;
    padding: 30px;
}

#reloadpage {
	top: 60px;
    position: fixed;
    background: pink;
    width: 100%;
    height: 0px;
    max-height: 70px !important;
    overflow: hidden;
}
#reloadpage * {
	line-height: 70px;
    padding: 0 15px;
}

#reloadpagegif {
  position: fixed;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  background: var(--m-yellow);
/*  background: url(/assets/images/iron-man.gif) center no-repeat;*/
  background-size: cover;
  border-radius: 50%;
  transition: width 0s ease, height 0s ease;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

@media screen and (orientation:portrait){
	#notify-parent {
		display: block;
		padding: 0px 0px !important;
		width: 100% !important;
		text-align: center;
	}
	#notify-parent [m-notify] {
	    box-shadow: none !important;
	    -webkit-box-shadow: none !important;
	    margin: 0 !important;
	    border-radius: 0;
	    padding: 10px 10px !important;
	    padding-bottom: 10px !important;
	    text-align: left;
	    width: 100vw !important;
	    text-align: center;
	    font-size: .8em;
	}
	.m-ui.is-pwa.is-ios #notify-parent [m-notify] {
	  padding: 45px 10px 10px !important;
	}
}

@media screen and (max-width: 600px){
	.m-ui [m-popup] {
		overflow: hidden !important;
	}
	.m-ui [m-popup] > content {
		max-width: 100% !important;
		width: 100vw !important;
		height: auto !important;
		max-height: 90vh !important;
		bottom: -100vh;
		position: fixed !important;
		left: 10vw;
		margin-bottom: 0 !important;
		border-radius: 40px 40px 0 0 !important;
		overflow: auto;
		padding-bottom: 30px !important;
	}
	.m-ui [m-popup].active > content {
		bottom: 0;
	}
}

.m-ui [m-popup] > content .title {
	margin: 0 30px 40px;
	text-align: center;
}

.m-ui [m-popup] > content .title h6 {
	color: var(--m-grey);
}

.m-ui [m-popup] > content .title h4{
	/*font-size: 1.6rem;*/
}

.m-ui [m-popup] > content .title h6 + h4,
.m-ui [m-popup] > content .title h4 + h6 {
	margin-top: 10px;
}

.m-ui [m-popup] > content .title + m-line {
	background: transparent;
}

.m-ui [m-popup] section.buttons {
	text-align: center;
}

.m-ui [m-popup] > content controls ,
.m-ui [m-subpopup] > content controls {
	margin-top: 40px;
	display: block;
}

.m-ui [m-popup].with-controls > content controls ,
.m-ui [m-subpopup].with-controls > content controls {
	display: block;
}
.m-ui [m-popup] > controls ,
.m-ui [m-subpopup] > controls {
	display: none;
}

@media screen and (max-width: 600px){
	.m-ui [m-popup].with-controls > content ,
	.m-ui [m-subpopup].with-controls > content {
		padding-bottom: 125px !important;
	}
	.m-ui [m-popup].with-controls.double > content ,
	.m-ui [m-subpopup].with-controls.double > content {
		padding-bottom: 170px !important;
	}
	.m-ui [m-popup].with-controls > content controls ,
	.m-ui [m-subpopup].with-controls > content controls {
		display: none !important;
	}
	.m-ui [m-popup].with-controls > controls ,
	.m-ui [m-subpopup].with-controls > controls {
		display: block;
		position: fixed;
		z-index: 13;
		width: 100vw;
		padding: 10px 20px 30px;
		bottom: -80px;
		left: 0;
		background: var(--m-dark-grey);
	}
	.m-ui [m-popup].active.with-controls > controls ,
	.m-ui [m-subpopup].active.with-controls > controls {
		bottom: 0px;
	}
}

.m-ui [m-popup] section.buttons [m-button] ~ [m-button],
.m-ui [m-popup].with-controls > controls [m-button] ~ [m-button] {
	margin-top: 10px;
}

.badge {
	background: #000;
	color: #fff;
	font-size: .8em;
	font-family: Bold;
	line-height: 30px;
	padding: 0px 10px;
	margin: 0 5px 10px 0;
	border-radius: 20px;
	display: inline-block;
}

.badge.mini {
	line-height: 20px;
	padding: 0px 7px;
/*	font-size: .9em;*/
/*	font-family: var(--normal);*/
}

.badge.medium {
	line-height: 35px;
	font-size: 1em;
	padding: 0px 15px;
/*	font-family: var(--normal);*/
}

/*button check*/

.m-ui input + label[m-button] {
	background-color: transparent;
	font-family: Medium;
	border: 1px solid var(--m-grey);
	border-width: 1px;
	color: var(--m-white);
}

.m-ui input:checked + label[m-button] {
	background: var(--m-white);
	color: var(--m-black);
	border-color: var(--m-white);
}

.m-ui header {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1;
	width: 100%;
	padding: 0 15px;
	text-shadow: 0px 0px 4px rgba(0,0,0,.5);
}

.m-ui logo {
	background: url(/assets/images/index.svg);
  background-position: center;
  background-size: 26px;
  background-repeat: no-repeat;
  width: 30px;
  height: 45px;
  display: block;
}

/*iOS pwa corections */
.m-ui header {	
	padding-top: calc(env(safe-area-inset-top) + 15px);
	border-color: transparent;
}

@media screen and (max-width: 600px){
	.m-ui.is-pwa header {
		padding-top: calc(env(safe-area-inset-top) + 0px) !important;
	}
}

@media screen and (min-width: 600px){
	.m-ui header {	
		padding-top: calc(env(safe-area-inset-top) + 30px) !important;
		border-color: transparent;
	}
}

/*iOS pwa corections */
.m-ui.is-pwa.is-ios header.active:not(.transparent) {
	/*background: rgb(0 0 0 / 90%);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);*/
}

header.transparent {
	 background: linear-gradient(180deg, #000, transparent) !important;
	/*background: transparent !important;*/
}

header {
	background: linear-gradient(180deg, #000, transparent) !important;
}

header .back {
	/*font-size: 30px !important;*/
    padding: 2px 0 !important;
}
.header-label-container {
	width: 500% !important;
	opacity: 0;
	height: 50px;
	padding-top: 50px;
	overflow: hidden;
}
.header-label-container.active { 
	padding-top:0; 
	opacity: 1;
}
.header-label-container > * {
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
	}
@media screen and (orientation:portrait){
	.header-label-container > * {
		max-width: 100%;
	}
}
.m-ui [m-button][m-type=circle].with-icon.mini.e145:before {
    font-size: 22px;
    width: 22px;
    margin: -11px 0 0 -11px;
}

.m-ui [m-button][m-type=circle].with-icon.mini.e5ca:before {
    font-size: 24px;
    width: 24px;
    margin: -12px 0 0 -12px;
}

.wrapper {
	padding: 150px 15px 100px;
}

@media screen and (min-width: 600px){
	.wrapper {
    padding: 200px 30px 100px;
    max-width: 1600px;
    margin: auto;
  }
	.m-ui header {
		padding: 30px 30px 0;
	}
	.m-ui header > div {
		max-width: 1540px;
		margin: auto;
	}
	.m-ui .search {

	}
	.m-ui .search > div {
		
	}
	.wrapper .header {

	}
}

@media screen and (min-width: 1100px){
	.m-ui header {
		top: 0px;
		padding-top: 30px !important;
		/* background: none !important; */
	}
}

.wrapper .header {
	width: calc(100% - 360px);
    overflow: hidden;
    position: fixed;
    /*top: 80px;*/
    top: 0px;
    padding-top: 40px;
    position: fixed;
    z-index: 1;
    background: linear-gradient(180deg, #000, transparent) !important;
    /* background: transparent !important; */
}

@media screen and (min-width: 800px){
	.wrapper.with-sidebar {
		padding-left: 350px;
		padding-top: 130px;
	}
}

.header {
	padding: 50px 0 30px;
}

.header .carname:last-child {
	padding-right: 30%;
	margin-bottom: 0px !important;
}

.header h2 {
	font-size: 2.6rem !important;
}

/*TABS*/

.tabs-container {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch; /* плавная прокрутка на мобильных */
  scrollbar-width: thin; /* Firefox */
}

.tabs-container circle {
	vertical-align: top;
	display: inline-block;
	margin: 0px;
	text-align: center;
	width: 100px;
}

.tabs-container circle > * {
	white-space: normal;
	vertical-align: top;
}

.tabs-container circle > figure {
	display: block;
	width: 80px;
	height: 80px;
	margin: 0 auto 10px;
	border-radius: 50%;
	background-position: center;
	background-size: 30px;
	background-repeat: no-repeat;
}

nav {
	display: block;
	position: fixed;
	bottom: 0;
	width: 100%;
	left: 0;
	padding: 10px 0;
	padding-bottom: calc(env(safe-area-inset-bottom) + 10px);
	text-align: center;
	letter-spacing: 0.7px;
	border-top: none;
	color: var(--m-white);
	background: var(--m-black);
	z-index: 2;
}

nav.top {
	line-height: 40px;
	padding-bottom: calc(env(safe-area-inset-bottom) + 10px);
	border-top: 1px solid var(--m-semidark-grey);
}

nav.top > div > *:hover,
nav.top > div > *.active {
	opacity: 1 !important;
}
nav.top > div > *:first-child {
	text-align: left;
}
nav.top > div > *:last-child {
	text-align: right;
}

@media screen and (min-width: 600px){
	nav {
		padding-bottom: calc(env(safe-area-inset-bottom) + 10px);
	}

	nav > div {
		max-width: 1600px;
	  margin: auto;
	  padding-left: 30px;
	  padding-right: 30px;
	}	
}


.is-ios nav{
	padding-bottom: calc(env(safe-area-inset-bottom));
}

nav.hide {
	bottom: -80px;
}

nav article {
	opacity: .8;
	color: var(--m-white);
}

nav article:hover,
nav article.active {
	opacity: 1 !important;
}

	nav article span {
	    display: inline-block;
	    height: 45px;
	    width: 45px;
	    border-radius: 50%;
	    margin: auto;
    	vertical-align: middle;
	}

	nav  .car {
		background: url(/assets/images/car-icon-white.svg) center no-repeat;
		background-size: 26px;
	}

	nav  .car photo {
		display: block;
		margin: 10%;
		padding: 0;
		width: 80%;
		height: 80%;
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		border-radius: 50%;
	}

	nav photo {
		display: inline-block;
		margin-right: 15px;
		padding: 0;
		width: 34px;
		height: 34px;
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		border-radius: 50%;
		vertical-align: middle;
	}


	nav .active .car {
		background: url(/assets/images/car-icon-active-white.svg) center no-repeat;
		background-size: 28px;
	}

	nav  .history {
		background: url(/assets/images/history-icon-white.svg) center no-repeat;
		background-size: 20px;
	}

	nav .active .history {
		background: url(/assets/images/history-icon-active-white.svg) center no-repeat;
		background-size: 20px;
	}

	nav  .check {
		background: url(/assets/images/check-icon-white.svg) center no-repeat;
		background-size: 22px;
	}

	nav .active .check {
		background: url(/assets/images/check-icon-active-white.svg) center no-repeat;
		background-size: 24px;
	}

	nav  .barcode {
		background: url(/assets/images/barcode-icon-white.svg) center no-repeat;
		background-size: 22px;
	}

	nav .active .barcode {
		background: url(/assets/images/barcode-icon-active-white.svg) center no-repeat;
		background-size: 24px;
	}

	nav  .money {
		background: url(/assets/images/money-icon-white.svg) center no-repeat;
		background-size: 24px;
	}

	nav .active .money {
		background: url(/assets/images/money-icon-active-white.svg) center no-repeat;
		background-size: 24px;
	}


.carphoto {
	width: 150px;
	height: 150px;
	background-color: var(--m-yellow);
	border-radius: 50%;
	margin: 0 auto 30px;
	display: grid;
  	place-items: center;
}

.carphoto i {
	color: var(--m-black) !important;
    font-size: 5rem !important;
}


.carlog_list .swipeable.active button.delete-log {
	position: absolute;
    right: -50px;
    transform: scale(1);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
}

.carlog_list {} 

.carlog_list .desc,
.parts_list .desc {
	/*margin: 10px 0 0px;*/
    /*padding-right: 80px;*/
    max-width: 500px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
} 

.editing-text {
	background: var(--m-dark-blue);
	color: var(--m-white);
	/*padding: 0 5px;*/
	border-radius: 10px;
	display: inline;
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
}

.editing-text:hover,
.editing-text:active {
	/*text-decoration: underline;*/
	cursor: pointer;
}

[contenteditable]{
	outline: none;
}



.m-ui .searching header,
.m-ui.is-mobile .searching .header,
.m-ui.is-mobile .searching .search + m-line {
	display: none;
}

@media screen and (min-width: 800px){
	.m-ui .searching header {
		display: block;
	}
}

.m-ui.is-pwa.is-ios body.searching {
	height: 100% !important;
	overflow: hidden !important;

}

.m-ui.is-pwa.is-ios body.searching .wrapper {
	height: 100lvh;
	overflow: auto;
}

.m-ui.is-mobile .searching .wrapper {
	padding-top: 100px;
}

/*Search*/

.m-ui .search { /*.is-pwa.is-ios*/
	display: block;
	width: 100%;
	height: 75px;
	position: absolute;
	z-index: 3;
	top: 0;
	left: 0;
	padding: 15px;
	padding-top: calc(env(safe-area-inset-top) + 15px);
	border-bottom: 0px solid var(--m-dark-grey);
	background: var(--m-black);
}

@media screen and (max-width: 600px){
	.m-ui.is-pwa .search {
		padding-top: calc(env(safe-area-inset-top)) !important;
		height: auto;
		transition: 0s ease-out;
	    -webkit-transition: 0s ease-out;
	    -moz-transition: 0s ease-out;
	    -o-transition: 0s ease-out;
	}
}

@media screen and (min-width: 600px){
	.m-ui .search {
		padding: 30px;
	}
}

@media screen and (min-width: 800px){
	.m-ui .search {
		padding: 0;
		padding-top: 0;
		height: auto;
		width: calc(100% - 320px);
		left: 320px;
		background: transparent;
	}

	.m-ui .search > div {
		margin: auto;
		max-width: 1540px;
	}

	search {
		/* font-size: 3.5rem !important; */
	}
}

search {
    white-space: nowrap;
    overflow-x: hidden;
    height: auto !important;
    margin: 0 0 0 !important;
    padding: 0 15px !important;
    position: relative;
    /*font-size: 1.9rem;*/
    line-height: 45px;
    /*font-family: Bold !important;*/
    overflow: hidden;
    background: var(--m-black) !important;
}
search[data-empty="true"]::before {
    content: attr(placeholder);
    color: var(--m-grey);
    position: absolute;
    pointer-events: none;
    top: 50%;
    transform: translateY(-50%);
    left: 15px;
    white-space: nowrap;
}

.swipeable {
	position: absolute;
	right: 0;
	width: 50px;
	height: 100%;
}

.active > .swipeable {

}

.swipeable + .buttons {
	position: absolute;
    right: -100px;
    transform: scale(0);
    -webkit-transform: scale(0);
}

.active > .swipeable + .buttons {
	right: -60px;
    transform: scale(1);
    -webkit-transform: scale(1);
}

.swipeable + .buttons button {

}

.active > .swipeable + .buttons button {

}

.lgb {
  /* Эффект стекла */
  background: rgba(255, 255, 255, 0.05) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  
  /* Граница и внутреннее свечение */
  box-shadow: 
    0 4px 24px rgba(0, 0, 0, 0.1), /* Внешняя тень */
    inset 0 0 0 1px rgba(255, 255, 255, 0.05), /* Тонкий ободок */
    inset 0 1px 2px rgba(255, 255, 255, 0.15) !important; /* Блик сверху */
}
.lgb:hover {
  background: rgba(255, 255, 255, 0.15);
  transform: scale(1.02);
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.15),
    inset 0 0 0 1px rgba(255, 255, 255, 0.3);
}

.lgb:active {
  transform: scale(0.96);
  background: rgba(255, 255, 255, 0.05);
}

/* IMAGE VIEWER ОСНОВНОЙ КОНТЕЙНЕР */
img-viewer {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 18; /* Поднимаем повыше */
  display: none;
  background: #000;
  overflow: hidden;
  touch-action: none; /* Запрещаем системные жесты браузера */
  transition: none;
}

img-viewer.active {
  display: block;
}

/* КОНТЕНТ (Обертка для зума и трека) */
img-viewer > content {
  display: flex;
  touch-action: none;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: 100vh;
  position: relative;
  opacity: 0;
  transform: translateY(50px); /* Легкий эффект появления вместо прыжка со 100vh */
  transition: opacity 0.3s ease, transform 0.3s ease;
}

img-viewer.active > content {
  opacity: 1;
  transform: translateY(0);
}

/* ТРЕК (Лента из 3-х картинок) */
img-viewer .viewer-track {
  display: flex;
  width: 300%; /* Три экрана */
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  will-change: transform;
  touch-action: none;
  /* Важно: исходное положение — центральная картинка */
  transform: translateX(-33.333%); 
}

/* КАРТИНКИ */
img-viewer .viewer-img {
  width: 33.333%; /* 1/3 от 300% трека = ровно 1 экран */
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background-size: contain;    /* сохраняем пропорции */
  background-repeat: no-repeat;
  background-position: center;
  transition: 0s !important;
  pointer-events: auto;
  touch-action: none;
  -webkit-user-drag: none;
  user-select: none;
}

img-viewer .viewer-shield {
	position: fixed;
    top: 0px;
    left: 0px;
    width: 100vw;
    height: 100vh;
    display: block;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    z-index: 2;
    opacity: 1;
    transition: none;
    display: none;
}


/* УПРАВЛЕНИЕ */
img-viewer > controls {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 19;
  padding: 15px;
  padding-top: calc(env(safe-area-inset-top) + 15px);
  pointer-events: none; /* Чтобы кнопки не мешали тапам по картинке */
}

@media screen and (max-width: 600px){
	.m-ui.is-pwa img-viewer > controls {
		padding-top: calc(env(safe-area-inset-top) + 0px) !important;
	}
}

@media screen and (min-width: 600px){
	img-viewer > controls {
		padding: 30px 30px 0;
		padding-top: calc(env(safe-area-inset-top) + 30px) !important;
	}
}


img-viewer > controls button, 
img-viewer > controls div {
  pointer-events: auto; /* Возвращаем кликабельность кнопкам */
}

/* Адаптив под челки iOS */
.m-ui.is-pwa.is-ios img-viewer > controls {
  padding-top: 50px;
}


/* DRAG FILES AREA */

[file-dropzone]:after {
	  font-family: material !important;
    content: '\e147';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    display: none;
    text-align: center;
    align-items: center;
    font-size: 4rem;
    background: var(--m-dark-grey);
    color: var(--m-green);
    border-radius: 40px 40px;
    z-index: 15;
}

[file-dropzone].drag-over:after {
	display: grid;
}

[file-dropzone].drag-over {
	overflow: hidden !important;
	height: calc(100vh - 120px) !important;
	max-height: calc(100vh - 80px) !important;
	min-height: calc(100vh - 80px) !important;
}

@media screen and (max-width: 600px){
	[file-dropzone].drag-over {
		height: 90vh !important;
	}
}


sidebar {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	overflow: hidden;
	width: 320px;
}

@media screen and (min-width: 800px){
	sidebar {
		display: block;
	}
}
@media screen and (min-width: 1600px){
	sidebar {
		left: 50%;
		transform: translate(-800px, 0px);
	}
}

sidebar > div {
	padding: 130px 30px 100px 30px;
	width: calc(100% + 30px);
	overflow: auto;
	height: 100%;
}