@charset "utf-8";

@font-face {
   font-family: "PT Sans";
   font-weight: normal;
   font-style: normal;
   src: url('../fonts/PTSans-Regular.ttf');
}

@font-face {
   font-family: "Roboto-Regular";
   font-weight: normal;
   font-style: normal;
   src: url('../fonts/Roboto/Roboto-Regular.ttf');
}

@font-face {
   font-family: "Mono Regular";
   font-weight: normal;
   font-style: normal;
   src: url('../fonts/RobotoMono-Regular.ttf');
}

@font-face {
   font-family: "Mono Bold";
   font-weight: normal;
   font-style: normal;
   src: url('../fonts/RobotoMono-Bold.ttf');
}


@font-face {
   font-family: "Material-Icons";
   font-weight: normal;
   font-style: normal;
   src: url('../fonts/MaterialIcons-Regular.ttf');
}

*,
*:before,
*:after {
   -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
           box-sizing: border-box;
   scroll-behavior: smooth;
}
:focus-visible {
   outline: none;
}
/* Basic elements */
html, body {
   font-family: 'Roboto-Regular', Helvetica, sans-serif;
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   height: calc(100% - 20px);
   background-color: #18191a;
   font-size: 100%;
   color: #eee;
   padding: 0;
   margin: 0;
}
a {
   text-decoration: none;
   color: #0065df;
}
table {
   border-collapse: collapse;
   background-color: #333;
   border-spacing: 0;
   min-width: 100%;
}
.noselect {
   -webkit-touch-callout: none; /* iOS Safari */
     -webkit-user-select: none; /* Safari */
      -khtml-user-select: none; /* Konqueror HTML */
        -moz-user-select: none; /* Old versions of Firefox */
         -ms-user-select: none; /* Internet Explorer/Edge */
             user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
}
*::selection {
   background-color: #ffe53e;
   color: #000;
}
.nowrap {
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
}
.resizable-textarea {
   resize: vertical !important;
}
.offscreen {
   position: absolute;
   left: -999em;
}
.scroll-content {
   height: calc(100% - 40px);
   overflow-y: auto;
}
.next-button { margin-left: 14px }
/* Прибираємо стрілочки з input ~> number */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
   -webkit-appearance: none;
   margin: 0;
}
.login-background {
   background: url(../img/LoginBg.jpg) no-repeat center fixed;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
}

/* Загальні додатку */
.erplite-right-align { margin-left: auto }
.erplite-default-container {
   background-color: #777;
   border-radius: 6px;
   height: 32px;
}
.erplite-button {
   display: inline-flex;
   flex-direction: row;
   align-items: center;
   background-color: #232323; /*0362d9;*/
   border-radius: 32px;
   text-align: center;
   line-height: 28px;
   min-height: 28px;
   overflow: hidden;
   padding: 0 16px;
   font-size: 14px;
   cursor: pointer;
   height: 28px;
   color: #fff;
}
.erplite-button:hover { background-color: #2a2a2a }
.erplite-button:active { background-color: #1e1e1e }
.erplite-button-icon {
   line-height: 24px;
   min-height: 24px;
   min-width: 24px;
   font-size: 20px;
   height: 24px;
   width: 24px;
}
.erplite-button-label { margin: 0 auto }
.erplite-mid-round-button {
   display: inline-block;
   border-radius: 40px;
   text-align: center;
   line-height: 28px;
   min-height: 28px;
   min-width: 28px;
   cursor: pointer;
   height: 28px;
   width: 28px;
}
.erplite-top-toolbar {
   display: flex;
   flex-direction: row;
   align-items: center;
   max-height: 40px;
   height: 40px;
}
.erplite-top-button {
   line-height: 32px;
   min-height: 32px;
   min-width: 32px;
   height: 32px;
   width: 32px;
}
.erplite-middle-container {
   position: relative;
   height: 100%;
   width: 100%;
}
.erplite-side-panel {
   display: none;
   flex-wrap: nowrap;
   flex-direction: column;
   background-color: #333;
   border-right: 1px solid #4a4a4a;
   min-height: 100%;
   min-width: 280px;
   overflow: auto;
   padding: 8px;
   height: 100%;
   width: 280px;
}
.erplite-scroll-block {
   overflow: auto;
   height: 100%;
   width: 100%;
}
.erplite-bottom-panel {
   position: relative;
   border-top: 1px solid #4a4a4a;
   background-color: #333;
   min-height: 40px;
   padding: 0 8px;
   height: 40px;
   width: 100%;
}
.erplite-total-item {
   line-height: 28px;
   min-height: 28px;
   font-size: 14px;
   height: 28px;
   color: #eee;
}
.erplite-total-item:not(:first-child) { margin-left: 16px }
.erplite-total-label { font-weight: 700 }
.erplite-total-value { margin-left: 4px }
.erplite-filter-indicator {
   display: none;
   position: absolute;
   background-color: #ff9800;
   border-radius: 32px;
   line-height: 18px;
   min-height: 18px;
   min-width: 18px;
   font-size: 13px;
   height: 18px;
   width: 18px;
   color: #000;
   z-index: 5;
   left: 4px;
   top: 2px;
}
.erplite-toggle-sidebar-button { transition: all 0.6s ease-out }
.erplite-toggle-sidebar-button:hover {
   background-color: #a26eff;
   color: #772bff;
}
.erplite-toggle-sidebar-button-select {
   background-color: #8745ff;
   color: #e1d0ff;
}
.erplite-pager-container *:not(:first-child, .mf-list-item) { margin-left: 4px }
.erplite-pager-button {
   border-radius: 50%;
   line-height: 24px;
   min-height: 24px;
   min-width: 24px;
   cursor: pointer;
   height: 24px;
   width: 24px;
}
.erplite-page-size-button {
   font-family: 'Roboto-Regular';
   text-align: center;
   font-size: 10px;
}
.erplite-page-size-select {
   background-color: #707070;
   color: #fff;
}
.erplite-pager-input {
   line-height: 24px;
   min-height: 24px;
   font-size: 14px;
   border: none;
   height: 24px;
   width: 100px;
}
.erplite-form-toolbar {
   height: 40px;
   width: 100%;
}
.erplite-form-toolbar-left-block,
.erplite-form-toolbar-right-block {
   position: relative;
   height: 40px;
}
.erplite-form-toolbar-left-block > *:not(:first-child),
.erplite-form-toolbar-right-block > *:not(:first-child) { margin-left: 12px; }
.erplite-form-toolbar-right-block { margin-left: auto; }
.button-disable { background-color: #4e4e4e !important }
.button-disable:active { background-color: #4e4e4e !important }
.send-button { background-color: #0362d9 }
.del-button { background-color: #f44336 }
.del-action { color: #ff6256 }
.del-confirm-info {
   background-color: #204352;
   border-radius: 6px;
   padding: 8px;
   width: 100%;
   color: #eee;
}
.del-confirm-info-icon {
   margin-right: 8px;
   color: orange;
}
.erplite-form-top-panel {
   background-color: #2a3a54;
   border-radius: 4px;
   position: sticky;
   padding: 0 8px;
   height: 40px;
   z-index: 15;
   top: 0;
}
.erplite-form-label {
   font-size: 14px;
   margin: 0;
   margin-top: 8px;
}
.erplite-404-container {
   background-color: #333;
   border-radius: 8px;
   text-align: center;
   margin: 16px auto;
   padding: 16px;
   color: #ccc;
   height: 95%;
   width: 95%;
}
.erplite-404-icon {
   display: block;
   position: relative;
   border-radius: 100%;
   background-color: #5d4037;
   background-clip: content-box;
   background-repeat: no-repeat;
   background-position: center;
   background-image: url('../img/404.svg');
   background-size: 86%;
   margin: 4px auto;
   height: 160px;
   width: 160px;
}
.erplite-form-id-label {
   padding-right: 4px;
   line-height: 40px;
   font-size: 14px;
   color: #607d8b;
   height: 40px;
   width: 100%;
}
.erplite-share-indicator {
   display: none;
   position: absolute;
   background-color: #c5d800;
   border-radius: 32px;
   line-height: 22px;
   min-height: 22px;
   min-width: 22px;
   font-weight: 800;
   font-size: 16px;
   cursor: pointer;
   height: 22px;
   right: 108px;
   width: 22px;
   color: #111;
   top: 9px;
}


.erplite-panel {
   position: relative;
   display: flex;
   flex-direction: row;
   align-items: center;
   background-color: #333;
   padding: 0 8px;
}
.erplite-top-panel-item {
   display: inline-flex;
   overflow: hidden;
}
/* DEPRECATE */
.erplite-button-old {
   display: inline-flex;
   flex-direction: row;
   text-align: center;
   align-items: center;
   /* Шоифт прописан у html, body */
   /*font-family: 'Roboto-Regular';*/
   background: #0362d9;
   border-radius: 32px;
   line-height: 28px;
   overflow: hidden;
   padding: 0 16px;
   font-size: 14px;
   cursor: pointer;
   height: 28px;
   color: #fff;
}
.erplite-round-button {
   display: inline-block;
   border-radius: 28px;
   line-height: 24px;
   text-align: center;
   cursor: pointer;
   height: 24px;
   width: 24px;
}
.erplite-tool-round-button {
   display: inline-block;
   border-radius: 32px;
   text-align: center;
   line-height: 26px;
   min-height: 26px;
   min-width: 26px;
   cursor: pointer;
   height: 26px;
   width: 26px;
}
.erplite-28-button {
   display: inline-block;
   border-radius: 32px;
   text-align: center;
   line-height: 28px;
   min-height: 28px;
   min-width: 28px;
   cursor: pointer;
   height: 28px;
   width: 28px;
}
.erplite-large-round-button {
   display: inline-block;
   background-color: #23a929;
   border-radius: 32px;
   line-height: 28px;
   font-weight: bold;
   min-height: 28px;
   min-width: 28px;
   cursor: pointer;
   height: 28px;
   width: 28px;
   color: #fff;
}
.erplite-button-text {
   line-height: 28px;
   height: 28px;
}
.erplite-button-icon-ok { color: green }
.erplite-form-input {
   background-color: #3a3b3c;
   border: 2px solid #454545;
   border-radius: 4px;
   padding: 0 8px;
   height: 28px;
   width: 100%;
   color: #eee;
}
.erplite-form-duo-block {
   display: flex;
   flex-direction: row;
   align-items: center;
   flex-wrap: nowrap;
}
.erplite-form-block,
.erplite-form-vblock {
   display: flex;
   flex-direction: column;
   width: 100%;
}
.erplite-form-vblock:not(:first-child) { margin-left: 4px }
.erplite-scroll-form {
   position: relative;
   height: calc(100% - 50px);
   overflow: hidden;
   overflow-y: auto;
   padding: 0 4px;
}
.erplite-actions-menu {
   font-family: 'Roboto-Regular';
   text-align: left;
}
.car-scroll-form {
   position: relative;
   height: 100%;
   overflow: hidden;
   overflow-y: auto;
   padding: 0 4px;
}
.cancel-button { background-color: #0d47a1 }
.del-button { background-color: red }
.module-top-buttons-block > *:not(:first-child) { margin-left: 8px }
.module-top-left-block > *:not(:first-child, .erplite-filter-indicator) { margin-left: 16px }

.grid-container { width: fit-content }
.grid-container .dx-datagrid-headers {
   background-color: #232323;
   border-bottom: #1b1b1b;
   border-bottom: none;
}
.grid-container .dx-datagrid-header-panel {
   background-color: #2a2a2a;
   padding-top: 6px;
   position: sticky;
   z-index: 2;
   top: 0px;
}
.grid-container .dx-datagrid-header-panel .dx-toolbar { margin-bottom: 6px }
.grid-container .dx-group-cell { color: #00acc1 }
.grid-container .dx-button { border-width: 2px }
.grid-container .dx-button-mode-contained { border-color: #4482cf }
.grid-container .dx-datagrid-search-panel { border: 2px solid #4482cf }
.grid-container .dx-toolbar-before { margin-left: 8px }
.grid-container .dx-toolbar-after { margin-right: 8px }
.grid-container .dx-datagrid-group-panel .dx-group-panel-item {
   border: 2px solid #4482cf;
   border-radius: 4px;
}
.grid-container .dx-header-filter { font-size: 12px }
.grid-container .dx-datagrid-total-footer { display: none }
.grid-container .dx-datagrid .dx-header-filter { color: #ff9800 }
.grid-container .dx-datagrid .dx-header-filter-empty { color: #75757580 }
.grid-container .dx-placeholder { line-height: 14px }
.grid-container .dx-datagrid-group-space {
   max-width: 30px !important;
   width: 30px !important;
}
.grid-container .dx-state-active { background-color: #ecf9ff }
.grid-container .dx-header-row > td > .dx-datagrid-text-content {
   white-space: nowrap;
   color: #48d5fb;
}

.contact-is-task-icon {
   margin-right: 4px;
   font-size: 14px;
   color: #ff79a7;
}
.contact-is-task { color: #4caf50 }
.contact-is-admin { color: #8496ff }

/* ----------------------------------------------------------------  */

/* Індикатор очикування */
#loading {
   display: none;
   position: fixed;
   top: 50%;
   left: 50%;
   width: 78px;
   height: 78px;
   margin-top: -62px;
   margin-left: -39px;
   border-radius: 100px;
   box-shadow: 0 0 4px 0 #333;
   background-color: #1b1b1b;
   background-image: url('../img/waitme.svg');
   background-clip: content-box;
   background-repeat: no-repeat;
   background-position: center;
   background-size: 102px;
   z-index: 999996;
}

/* Модулі */
.module {
   position: relative;
   overflow: hidden;
   font-size: 16px;
}
.module-container {
   width: 100%;
   height: 100%;
   overflow: hidden;
}
.module-preload {
   position: fixed;
   display: none;
   margin: -14px 0 0 -43px;
   z-index: 10000;
   height: 28px;
   width: 86px;
   left: 50%;
   top: 50%;

   background-position: center;
   background-repeat: no-repeat;
   background-image: url(../img/module-preload.svg);
   background-size: 86px;
}
.module-top-panel {
   display: flex;
   align-items: center;
   flex-direction: row;
   background-color: #333;
   height: 32px;
   width: 100%;
}
.module-top-left-block { width: 100% }
.module-top-right-block {
   margin-left: auto;
   padding: 0 6px;
}

/* Перетаскування полів форми Задача */
.ui-state-highlight {
   display: block;
   padding: 0.5em 1em;
   height: 2.5em;
   max-width: 100%;
   background-color: #fdfd96;
}
.field-draggable-block {
   position: relative;
}
.field-draggable-block:not(:first-child) {
   margin-top: 8px;
}
.drag-helper {
   display: inline-block;
   position: absolute;
   top: 4px;
   left: 4px;
   width: 18px;
   height: 24px;
   margin-right: 4px;
   cursor: grab;
   background-image: url('../img/drag-vertical.svg');
   background-repeat: no-repeat;
   background-position: center;
   background-size: 18px;
}
.drag-helper:active {
   cursor: grabbing;
}

/* Основний контейнер додатку */
#container {
   position: relative;
   margin-top: 40px;
   overflow: hidden;
   min-width: 100%;
   height: 100%;
   width: 100%;
}
/* Форма авторизації */
#entry-container,
#entry-sms-container {
   margin: 32px auto 0 auto;
   width: calc(100% - 8px);
   background-color: #333;
   border-radius: 6px;
   padding: 16px 0;
}
.entry-title {
   text-align: center;
   font-size: 26px;
   margin: 0px;
}
#entry-form { padding: 0 24px }
.entry-label {
   display: block;
   padding: 16px 0;
   font-size: 14pt;
}
.entry-input {
   line-height: 36px;
   border-radius: 6px;
   font-size: 20px;
   padding: 0 8px;
   margin: 0 auto;
   outline: none;
   border: none;
   height: 36px;
   width: 100%;
}
.entry-input-box {
   position: relative;
   border: 2px solid #ddd;
   background-color: #fff;
   border-radius: 6px;
   margin: 0 auto;
   padding: 0 8px;
   height: 44px;
   width: 100%;
}
.entry-clear {
   background-color: #777;
   border-radius: 50%;
   line-height: 32px;
   margin-left: 4px;
   min-height: 32px;
   min-width: 32px;
   cursor: pointer;
   height: 32px;
   width: 32px;
}
.input-clear {
   display: block;
   position: absolute;
   background-image: url('../img/cross.svg');
   background-repeat: no-repeat;
   background-position: center;
   background-size: 18px;
   border-radius: 50%;
   cursor: pointer;
   height: 40px;
   z-index: 100;
   right: -2px;
   width: 38px;
   top: -4px;
}
.input-clear:hover { opacity: 0.8 }
#entry-button {
   display: block;
   background-color: #1565c0;
   border: 2px solid #1565c0;
   border-radius: 6px;
   padding: 8px 16px;
   margin: 16px auto;
   font-weight: bold;
   font-size: 14pt;
   width: 100%;
   color: #fff;
}
#entry-info {
   text-align: center;
   margin-top: 16px;
   height: 24px;
   width: 100%;
}
.entry-info-warning {
   background-image: url('../img/rwarning.png');
   background-position: left center;
   background-repeat: no-repeat;
   background-size: 18px;
   line-height: 24px;
   color: #f44336;
   width: 24px;
}
.entry-info-default {
   line-height: 24px;
   color: #38a;
   width: 24px;
}
.entry-hblock {
   display: flex;
   flex-direction: row;
   align-items: center;
   line-height: 38px;
   height: 38px;
   width: 100%;
}
.entry-bottom-block {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   padding: 8px 24px;
   width: 100%;
}
.entry-link { color: #3b94ff }
.entry-remember { display: none }
.entry-remember-button { cursor: pointer; color: #ff9800 }
.entry-version-label { margin-left: auto; text-align: right }
#entry-sms-container { padding: 36px 24px; display: none }
.entry-send-phone {
   background-color: #1565c0;
   justify-content: center;
   border-radius: 6px;
   line-height: 40px;
   min-height: 40px;
   margin-top: 24px;
   cursor: pointer;
   height: 40px;
}
.entry-i-remembered { margin-top: 24px; cursor: pointer; color: #91f403 }
.entry-remember-info {
   background-color: #36454d;
   border-radius: 6px;
   margin-top: 16px;
   min-height: 36px;
   padding: 8px;
}

/* Верхня панель додатку (видима завжди) */
#top-panel {
   position: fixed;
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
   background-color: #232323;
   background-repeat: no-repeat;
   border-bottom: 1px solid #222;
   margin-bottom: 8px;
   z-index: 9990;
   height: 40px;
   width: 100%;
   top: 0;
}
#top-loading {
   display: none;
   position: absolute;
   background-image: url('../img/rolling-preloader.svg');
   background-repeat: no-repeat;
   background-position: center;
   background-size: 44px;
   min-height: 40px;
   min-width: 40px;
   height: 40px;
   width: 40px;
   left: 44px;
   top: 0;
}
.top-panel-item {
   display: inline-flex;
   flex-direction: row;
   align-items: center;
}
#top-panel-left-block { width: 114px }
#top-panel-toolbar {
   min-height: 40px;
   padding: 0 8px;
   height: 40px;
   width: 100%;
}
#go-to-erp-button {
   border-radius: 32px;
   line-height: 32px;
   margin-left: 8px;
   min-height: 32px;
   min-width: 32px;
   cursor: pointer;
   height: 32px;
   width: 32px;
   color: #eee;
}
#menu-button {
   display: inline-flex;
   flex-direction: row;
   align-items: center;
   justify-content: center;
   line-height: 40px;
   min-height: 40px;
   min-width: 40px;
   font-size: 36px;
   cursor: pointer;
   height: 40px;
   width: 40px;
}
.current-page {
   border-right: 6px solid #2196f3;
   background: rgb(255,255,255);
   background: linear-gradient(90deg, rgba(51,51,51,1) 0%, rgba(63,48,132,1) 32%, #ff9800 100%);
}
#top-title {
   display: inline-block;
   text-align: right;
   line-height: 40px;
   margin-left: auto;
   font-weight: bold;
   min-width: 176px;
   overflow: hidden;
   padding: 0 8px;
   height: 40px;
   color: #eee;
}
#progress-wrapper {
   position: fixed;
   z-index: 900;
   height: 3px;
   width: 100%;
   top: 40px;
   left: 0;
}
#progress-bar {
   background-color: #1e90ff;
   height: 100%;
   width: 0;
}

/* Сендвич-меню */
#main-menu {
   position: fixed;
   background-color: #333;
   border-right: 1px solid #3e3e3e;
   box-shadow: 6px 0 10px 0 #000;
   transition: width 0.2s;
   min-height: 100%;
   overflow: hidden;
   font-size: 16px;
   z-index: 9999;
   height: 100%;
   width: 0;
   top: 0;
}
#main-menu-top {
   display: flex;
   flex-direction: row;
   align-items: center;
   border-bottom: 1px solid #3e3e3e;
   background-color: #232323;
}
#main-menu-account-href {
   display: inline-block;
}
#main-menu-account {
   display: inline-block;
   padding-left: 8px;
   line-height: 38px;
   font-size: 10pt;
   height: 38px;
   color: #eee;
}
.main-menu-top-right-block {
   display: flex;
   flex-direction: row;
   align-items: center;
   margin-left: auto;
   height: 40px;
}
#main-menu-version {
   display: inline-flex;
   flex-direction: row;
   align-items: center;
   line-height: 40px;
   font-size: 14px;
   padding: 8px;
   height: 40px;
   color: #eee;
}
#main-menu-close {
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: center;
   border-radius: 40px;
   line-height: 32px;
   margin-right: 8px;
   cursor: pointer;
   font-size: 24px;
   z-index: 9999;
   height: 32px;
   width: 32px;
}
#main-menu-exit { color: #ff7ba8 }
.main-menu-contact-info {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   background-color: #2a2a2a;
   line-height: 32px;
   font-size: 14px;
   min-width: 100%;
   padding: 0 10px;
   width: 100%;
}
.main-menu-info { height: 32px; width: 100% }
.main-menu-contact-info-title {
   padding: 0 4px;
   color: #937a61;
   height: 32px;
}
.main-menu-info-item {
   display: flex;
   flex-direction: row;
   align-items: center;
   line-height: 32px;
   padding: 0 12px;
   color: #03a9f4;
   height: 32px;
}
#main-menu-items {
   height: calc(100% - 142px);
   padding-right: 2px;
   margin-top: 4px;
   overflow: hidden;
   overflow-y: auto;
   width: 100%;
}
.main-menu-item {
   display: block;
   line-height: 42px;
   font-weight: bold;
   color: #eee !important;
   padding-left: 10px;
   margin-left: 14px;
   cursor: pointer;
   height: 42px;
   width: auto;
}
.main-menu-item:hover {
   background-color: #474747;
}
#main-menu-logout {
   line-height: 42px;
   padding-left: 24px;
   cursor: pointer;
   color: #ff6e41;
   height: 42px;
   width: 100%;
}

.slide-main-menu {
   width: 80% !important;
}
.round-button {
   justify-content: center;
   border-radius: 50%;
   cursor: pointer;
}
.car-top-button {
   line-height: 32px;
   margin-left: 4px;
   min-height: 32px;
   min-width: 32px;
   height: 32px;
   width: 32px;
}
.share-button {
   display: inline-block;
   margin-left: 14px;
   border-radius: 32px;
   line-height: 28px;
   font-weight: bold;
   min-height: 28px;
   min-width: 28px;
   cursor: pointer;
   height: 28px;
   width: 28px;
   color: #fff;
}

/* Модуль Авто */
.cars-top-panel {
   overflow: hidden;
   min-height: 40px;
   padding: 0 6px;
   height: 40px;
}
.cars-search-container { width: 100% }
.cars-search-input {
   background-color: #444;
   border-radius: 80px;
   padding: 0 16px;
   border: none;
   color: #eee;
}
.cars-menu-container { margin-right: 8px }
#cars-scroll-block {
   overflow: auto;
   height: 100%;
   width: 100%;
}
.cars-total-item {
   display: flex;
   flex-direction: row;
   align-items: center;
   line-height: 28px;
   font-size: 14px;
   height: 28px;
   color: #eee;
}
.cars-total-item:not(:first-child) { margin-left: 16px }
.cars-total-label { font-weight: 700 }
.cars-total-value { margin-left: 4px }

.cars-row-actions-block {
   display: flex;
   flex-direction: row;
   align-items: center;
   position: relative;
}
.cars-save-as-row-btn { color: #00bc00 }
.cars-toggle-row-btn {
   border-radius: 50%;
   line-height: 28px;
   margin-left: 4px;
   min-height: 28px;
   min-width: 28px;
   font-size: 24px;
   cursor: pointer;
   height: 28px;
   width: 28px;
}
.cars-full-text { display: none }

.car-form-device-label { color: #f44336 }
#car-container .dx-datagrid-total-footer { display: none }
.cars-middle-container { height: calc(100% - 80px) }
.cars-search-clear { font-size: 18px }
.grid-filter-indicator {
   display: none;
   position: absolute;
   background-color: #ffc107;
   border-radius: 32px;
   line-height: 18px;
   min-height: 18px;
   min-width: 18px;
   font-size: 13px;
   height: 18px;
   width: 18px;
   z-index: 5;
   top: 0;
}
.cars-toggle-sidebar-button { transition: all 0.6s ease-out }
.cars-toggle-sidebar-button:hover {
   background-color: #a26eff;
   color: #772bff;
}
.cars-toggle-sidebar-button-select {
   background-color: #8745ff;
   color: #e1d0ff;
}
.car-form-id-label {
   font-family: 'Roboto-Regular';
   font-size: 14px;
   color: #607d8b;
}
.cars-side-sort-panel {
   background-color: #444;
   border-radius: 6px;
   margin-top: 8px;
   padding: 16px;
}
.cars-sorting-label {
   background-color: #333;
   text-align: center;
   border-radius: 4px;
   line-height: 22px;
   min-height: 22px;
   font-size: 12px;
   color: #a4a4a4;
   height: 22px;
}
.cars-align-top-button { margin-top: 14px; width: 100% }
.device-fields-container { margin-top: 16px }
#car-container .dx-datagrid-content .dx-datagrid-table .dx-row > td,
#contact .dx-datagrid-content .dx-datagrid-table .dx-row > tr > td {
   vertical-align: inherit;
}
.car-button-type-active { border: 2px solid #00a907 }
.car-button-type-paused { border: 2px solid #ff5722 }

/* Неперекриваємі властивості */
#container .dx-datagrid-headers {
   background-color: #232323;
   border-bottom: #1b1b1b;
   border-bottom: none;
}
#container .dx-datagrid-header-panel {
   padding-top: 6px;
}
#container .dx-datagrid-header-panel .dx-toolbar {
   margin-bottom: 6px;
}
#container .dx-group-cell {
   color: #00acc1;
}
#container .dx-button {
   border-width: 2px;
}
#container .dx-button-mode-contained {
   border-color: #4482cf;
}
#container .dx-datagrid-search-panel {
   border: 2px solid #4482cf;
}
#container .dx-toolbar-before {
   margin-left: 8px;
}
#container .dx-toolbar-after {
   margin-right: 8px;
}
#container .dx-datagrid-group-panel .dx-group-panel-item {
   border: 2px solid #4482cf;
   border-radius: 4px;
}
#container .dx-header-filter {
   font-size: 12px;
}
#container .dx-datagrid-total-footer {
   display: none
}
#container .dx-datagrid .dx-header-filter {
   color: #ff9800;
}
#container .dx-datagrid .dx-header-filter-empty {
   color: #75757580;
}
.filter-clear-button {
   color: #bbb;
}
.mobile-module {
   height: calc(100% - 8px);
   margin-top: 6px;
}
#container .dx-placeholder {
   line-height: 14px;
}
#container .dx-datagrid-group-space {
   max-width: 30px !important;
   width: 30px !important;
}
#container .dx-state-active { background-color: #ecf9ff }
#container .dx-header-row > td > .dx-datagrid-text-content {
   white-space: nowrap;
   color: #48d5fb;
}
#container .dx-checkbox-icon {
   border: 2px solid #eee;
   border-color: #eee;
   font-weight: bold;
   font-size: 14px;
   color: #1976d2;
   height: 18px;
   width: 18px;
}
#container .dx-checkbox-checked .dx-checkbox-icon {
   font: 14px / 16px DXIcons;
   background-color: #eee;
   text-align: center;
   font-weight: bold;
   color: #000;
}
#container .dx-checkbox-checked .dx-checkbox-icon::before {
   display: block;
   content: "\f005";
   position: relative;
   margin-left: -10px;
   margin-top: -8px;
   height: 20px;
   width: 20px;
   left: 50%;
   top: 50%;
}
.dx-texteditor-input-container { align-items: center }
.grid-content {
   overflow: hidden;
   height: 100%;
   width: 100%;
}
.grid-scroll-content { width: fit-content }
.blinker-class {
   animation: blink 0.5s linear infinite;
}
@keyframes blink {
   25% {
      opacity: 0.5;
   }
   50% {
      opacity: 0;
   }
   75% {
      opacity: 0.5;
   }
}
.instance-preload {
   /* Локальний прелоадер контролів */
   margin: 0 auto;
   height: 28px;
   width: 28px;

   background-position: center;
   background-repeat: no-repeat;
   background-image: url(../img/preloader-gear.svg);
   background-size: 28px;
}
.actions-description {
   min-height: 180px;
   height: 180px;
   padding: 8px;
}

/* TODO: видалити це згодом */
.top-horizontal-menu-button-down {
   background-image: url('../img/arrow-down.svg');
}
.top-horizontal-menu-button-up {
   background-image: url('../img/arrow-up.svg');
}

/* Планшетна компоновка */
@media screen and (min-width: 520px) {
   #entry-container,
   #entry-sms-container { width: 420px }
   #top-panel { z-index: 1000 }
   #main-menu { z-index: 1055 }
   .erp-desktop {
      margin-top: 40px !important;
      width: 100% !important;
   }
   .slide-main-menu { width: 296px !important }
}

@media screen and (min-width: 800px) {
   /* Кастомний стиль скрол-бару */
   *::-webkit-scrollbar {
      background-color: transparent;
      -webkit-border-radius: 1ex;
      border-radius: 1ex;
      height: 10px;
      width: 10px;
   }
   *::-webkit-scrollbar-track {
      background-color: #333;
      border-radius: 1ex;
   }
   *::-webkit-scrollbar-thumb {
      -webkit-border-radius: 1ex;
      background-color: #5a5a5a;
   }
   *::-webkit-scrollbar-corner {
      background: #454545;
   }
   .dx-overlay-wrapper {
      height: auto !important;
      width: auto !important;
   }
   .module { font-size: inherit }
   .module-container { overflow: hidden; height: 100%; width: 50% }
   .mobile-module { height: calc(100% - 8px); margin-top: 6px }
   .car-item-drag-helper {
      line-height: 28px;
      min-height: 28px;
      min-width: 28px;
      cursor: grab;
      height: 28px;
      width: 28px;
   }
   .car-item-drag-helper:after { content: "\e945" }
   .car-item-number { position: static; margin-right: 8px }
   .car-date-control { margin-left: 4px; margin-top: 0 }
   .mf-datetime-box-input { width: 128px }
}