@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;
}
.redirect-container { text-align: center; margin: 0 auto; width: 300px }
.redirect-title { display: flex; flex-direction: row; align-items: center; justify-content: center; font-size: 32px; }
.redirect-icon { font-size: 32px; margin-right: 12px; color: #10cee7 }
.success-container { text-align: center; margin: 0 auto; width: 300px }
.success-title { display: flex; flex-direction: row; align-items: center; justify-content: center; font-size: 32px; }
.success-icon { font-size: 32px; margin-right: 12px; color: #83d91e }
.success-exit { font-style: italic; font-size: 14px }
.error-container { text-align: center; margin: 0 auto; width: 300px }
.error-title { display: flex; flex-direction: row; align-items: center; justify-content: center; font-size: 32px; }
.error-icon { font-size: 32px; margin-right: 12px; color: #ff4537 }
.error-exit { font-style: italic; font-size: 14px }
.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;
}
.grid-filter-indicator {
   display: none;
   position: absolute;
   background-color: #ffc000;
   border-radius: 32px;
   line-height: 18px;
   min-height: 18px;
   min-width: 18px;
   font-size: 13px;
   height: 18px;
   width: 18px;
   color: #333;
   z-index: 5;
   top: 0;
}

/* Загальні додатку */
.erplite-right-align { margin-left: auto }
.erplite-default-container {
   background-color: #3a3b3c;
   border-radius: 6px;
   height: 32px;
}
.erplite-panel {
   position: relative;
   display: flex;
   flex-direction: row;
   align-items: center;
   background-color: #333;
   padding: 0 8px;
}
.erplite-round-button {
   display: inline-block;
   border-radius: 28px;
   line-height: 24px;
   text-align: center;
   cursor: pointer;
   height: 24px;
   width: 24px;
}
.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-form-top-panel {
   background-color: #1b1b1b;
   border-radius: 4px;
   height: 40px;
}
.erplite-scroll-form {
   position: relative;
   height: calc(100% - 50px);
   overflow: hidden;
   overflow-y: auto;
   padding: 0 4px;
}
.erplite-button {
   display: inline-flex;
   flex-direction: row;
   align-items: center;
   background-color: #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: #006aef }
.erplite-button:active { background-color: #0050b3 }
.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-adaptive-block {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   justify-content: flex-start;
   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: #ffc000;
   border-radius: 32px;
   line-height: 18px;
   min-height: 18px;
   min-width: 18px;
   font-size: 13px;
   height: 18px;
   width: 18px;
   color: #333;
   z-index: 5;
   top: 0px;
}
.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: 14px; }
.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%;
}

.waybill-scroll-form {
   position: relative;
   overflow: hidden;
   overflow-y: auto;
   padding: 0 4px;
   height: 100%;
}
.cancel-button { background-color: #0d47a1 }

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

/* Індикатор очикування */
#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 {
   padding: 0 6px;
   width: 100%;
}
.module-top-right-block {
   margin-left: auto;
   padding: 0 6px;
}
.module-top-left-block > *:not(:first-child, .erplite-filter-indicator) { margin-left: 16px }
/* Перетаскування полів форми Задача */
.ui-state-highlight {
   display: block;
   background-color: #fdfd96;
   padding: 0.5em 1em;
   max-width: 100%;
   height: 2.5em;
}
.field-draggable-block { position: relative }
.field-draggable-block:not(:first-child) { margin-top: 8px }
.drag-helper {
   position: absolute;
   display: inline-block;
   background-image: url('../img/drag-vertical.svg');
   background-repeat: no-repeat;
   background-position: center;
   background-size: 18px;
   margin-right: 4px;
   cursor: grab;
   height: 24px;
   width: 18px;
   left: 4px;
   top: 4px;
}
.drag-helper:active { cursor: grabbing }
.form-action-radio-block {
   border: 2px solid #ddd;
   border-radius: 6px;
   padding: 8px;
}
.form-action-radio-container {
   display: flex;
   flex-direction: column;
   align-items: start;
}
.form-action-radio-item {
   line-height: 32px;
   height: 32px;
}
.form-action-radio-item:before {
   content: "\e836";
   -webkit-font-feature-settings: 'liga';
   -webkit-font-smoothing: antialiased;
   font-family: "Material-Icons";
   letter-spacing: normal;
   text-transform: none;
   font-weight: normal;
   font-style: normal;
   text-align: center;
   line-height: 32px;
   margin-right: 6px;
   font-size: 18px;
}
.form-action-radio-select:before { content: "\e837" }

/* Основний контейнер додатку */
#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 #121212;
   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-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,
.main-menu-group-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,
.main-menu-group-item:hover { background-color: #474747 }
.main-menu-group {
   display: flex;
   flex-direction: column;
   border: 1px dashed #7365ff;
   width: calc(100% - 10px);
   border-radius: 6px;
   padding-right: 2px;
   margin-left: 10px;
}
.main-menu-group-title {
   width: calc(100% - 14px);
   line-height: 42px;
   font-weight: bold;
   margin-left: 14px;
   cursor: pointer;
   height: 42px;
}
.main-menu-group-title-text { width: 100% }
.main-menu-group-title-icon {
   margin-left: auto;
   margin-right: 8px;
   font-size: 28px;
}
.main-menu-group-container {
   display: none;
   margin-left: 14px;
   padding: 6px 0;
   width: 96%;
}
#main-menu-exit { color: #ff7ba8 }
#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;
}
.flex-container {
   display: flex;
   flex-direction: row;
   align-items: center;
}
.waybill-top-button {
   line-height: 32px;
   min-height: 32px;
   min-width: 32px;
   height: 32px;
   width: 32px;
}
.waybill-top-button:not(:first-child) { margin-left: 4px }
/* Діалогове вікно Заявка */
.waybill-name-container { width: 100% }
.route-editor-template,
.waybill-template-button { font-size: 20px }
.waybill-form-toolbar { width: 100% }
.waybill-form-toolbar-left-block,
.waybill-form-toolbar-right-block { position: relative }
.waybill-form-toolbar-right-block { margin-left: auto }
.waybill-block:not(:first-child) { margin-top: 16px }
.waybill-device-container { width: 100% }
.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;
}
.waybill-template-main-controls {
   background-color: #1d223a;
   height: fit-content;
   border-radius: 6px;
   padding: 0 8px 4px;
}
.waybill-result-exists {
   background-color: #212121;
   padding-bottom: 8px;
   border-radius: 6px;
   margin-top: 8px;
}
.waybill-result-title {
   border-top-right-radius: 6px;
   border-top-left-radius: 6px;
   background-color: #3f51b5;
   line-height: 32px;
   min-height: 32px;
   font-size: 14px;
   padding: 0 8px;
   color: #d2d2d2;
   height: 32px;
   width: 100%;
}
.waybill-result-item {
   margin-top: 16px;
   padding: 0 8px;
}
.waybill-result-item-title {
   font-size: 14px;
   color: #c4c4c4;
}
.waybill-result-field { margin-top: 4px }
.waybill-result-field-name { color: #607d8b }
.waybill-result-field-value { margin-left: 6px }
/* Модуль Заявка */
#waybill { height: 100% }
#waybill-content {
   background-color: #242526;
   padding: 8px;
}
#waybill-content-container {
   overflow: hidden ;
   height: calc(100% + 38px);
}
.waybill-form-top-panel {
   background-color: #1b1b1b;
   position: -webkit-sticky;
   border-radius: 4px;
   position: sticky;
   height: 40px;
   z-index: 12;
   top: 0px;
}
.waybill-order-top-panel { top: -8px }
.waybill-form-top-block { margin-left: 8px }
.waybill-number-container { width: 140px }
.waybill-status-container { margin-left: 4px; width: 140px }
.waybill-regions-panel { margin-top: 8px }
.waybill-regions-label {
   margin-left: 8px;
   font-size: 14px;
}
.waybill-add-clarify,
.waybill-reverse {
   min-height: 28px;
   min-width: 28px;
   font-size: 24px;
   height: 28px;
   width: 28px;
}
.waybill-filter-button {
   display: inline-block;
   padding: 8px 16px;
   line-height: 15px;
   cursor: pointer;
   height: 30px;
}

.waybill-filter-item-select { border-bottom: 3px solid #1976d2 }
.waybill-type-container { margin-left: auto }
.waybill-days-of-week-block {
   display: none;
   margin-top: 8px;
}
.waybill-days-of-week-container {
   background-color: #222;
   padding: 4px 2px;
}
.waybill-clarify-control-container {
   display: flex;
   position: relative;
   flex-direction: column;
   align-items: stretch;
   background-color: #545454;
   border-radius: 6px;
   margin-top: 8px;
   padding: 4px;
   height: auto;
   width: 100%;
}
.waybill-item-drag-helper {
   line-height: 18px;
   min-height: 18px;
   cursor: grab;
   height: 18px;
   width: 100%;
}
.waybill-item-drag-helper:after { content: "\e25d" }
.waybill-item-drag-helper:active { cursor: grabbing }
.waybill-item-number {
   position: absolute;
   background-color: #ddd;
   border-radius: 32px;
   text-align: center;
   line-height: 14px;
   margin-right: 0px;
   min-height: 14px;
   min-width: 14px;
   font-size: 10px;
   height: 14px;
   width: 14px;
   color: #333;
   left: 12px;
   top: 3px;
}
.waybill-date-control { margin-top: 8px }
.waybill-date-control:not(:first-child) { margin-left: 4px }
.waybill-date-input { font-size: 14px }
.waybill-region-color {
   border: 2px solid #ddd;
   border-radius: 6px;
   line-height: 28px;
   padding: 0 8px;
   outline: none;
   height: 32px;
   width: 100%;
}
.waybill-region-color-item {
   height: 28px;
   width: 100%;
}
.waybill-description {
   font-family: 'Roboto-Regular';
   font-size: 14px;
   resize: vertical;
   min-height: 38px;
   padding: 4px 8px;
   font-size: 12pt;
   height: 80px;
}
#waybill-number-preloader {
   position: absolute;
   left: 4px;
   top: 6px;
}
.waybill-dialog-top-panel { margin-bottom: 0 }
.waybill-analytics-container {
   border: 1px solid #3f3f3f;
   border-radius: 4px;
   margin-top: 8px;
   padding: 8px;
}
.waybill-analytics-field {
   display: flex;
   flex-direction: row;
   align-items: center;
   background-color: #212121;
   border-radius: 6px;
   padding: 0 8px;
   height: 32px;
}
.waybill-analytics-scenario-key {
   line-height: 32px;
   min-height: 32px;
   margin-top: 8px;
   height: 32px;
   width: 100%;
}
.waybill-id-label {
   margin-left: 8px;
   cursor: pointer;
   color: #607d8b;
}
.waybill-number-set-button {
   border-radius: 32px;
   line-height: 16px;
   margin-left: 2px;
   min-height: 16px;
   min-width: 16px;
   font-size: 14px;
   cursor: pointer;
   height: 16px;
   width: 16px;
}
.contact-is-task-icon,
.waybill-contact-is-task-icon {
   margin-right: 4px;
   font-size: 14px;
   color: #ff79a7;
}
.contact-is-task,
.waybill-contact-is-task { color: #4caf50 }
.contact-is-admin { color: #8496ff }
.waybill-real-mileage {
   background-color: #242424;
   border: 2px solid #3a3b3c;
   border-radius: 6px;
   line-height: 30px;
   min-height: 32px;
   padding: 0 8px;
   height: 32px;
}
/* Налаштування нагадувань */
.waybill-notify-settings {
   background-color: #212121;
   table-layout: fixed;
   border-radius: 6px;
   margin-top: 4px;
   width: 100%
}
.waybill-notify-item { vertical-align: middle }
.waybill-notify-item td { vertical-align: middle; }
.waybill-notify-item td > * { text-align: initial }
.waybill-notify-item td:first-child { width: calc(100% - 124px) }
.waybill-notify-item td:last-child { width: 140px }
.waybill-notify-header { font-size: 14px;color: #e48800; height: 28px }
.waybill-notify-contact-chief { width: 100% !important }
/* Таблиця маршрутів */
#waybills { height: 100% }
#waybills-top-panel,
#waybill-templates-top-panel {
   min-height: 40px;
   height: 40px;
}
#waybills-search-container,
#waybill-templates-search-container {
   padding: 0px;
   width: 100%;
}
.waybills-search-input {
   background-color: #444;
   border-radius: 80px;
   padding: 0 16px;
   border: none;
   color: #eee;
}
.waybills-archive-indicator {
   display: none;
   position: absolute;
   background-color: #e91e63;
   border-radius: 32px;
   line-height: 22px;
   min-height: 22px;
   min-width: 22px;
   font-size: 12px;
   cursor: pointer;
   height: 22px;
   width: 22px;
   color: #eee;
   right: 108px;
   top: 9px;
}
.waybills-preset-menu-container { margin-left: 4px }
.waybills-preset-button {
   min-height: 32px;
   min-width: 32px;
   font-size: 21px;
   height: 32px;
   width: 32px;
}
.waybills-middle-container,
.waybill-templates-middle-container {
   align-items: flex-start;
   height: calc(100% - 80px);
}
.waybills-sidebar-mode-item-select { background-color: #b2ebf2 }
.waybills-sidebar-amount-container { margin-top: 16px }
.waybills-sidebar-amount {
   background-color: #005f6b;
   border-radius: 6px;
}
.waybills-sidebar-amount-label {
   font-family: 'Roboto-Regular';
   margin-bottom: 10px;
   font-size: 16px;
   color: #aaa;
   width: 100%;
}
.waybills-sidebar-amount-label > *:not(:first-child) { margin-left: 8px }
.waybills-sidebar-amount-button {
   font-family: 'Roboto-Regular';
   line-height: 22px;
   font-size: 10px;
   padding: 0 7px;
   height: 22px;
}
.waybills-sidebar-amount-button-select { background-color: #0095a8 }
.waybills-sidebar-amount-block {
   background-color: #444;
   border-radius: 6px;
   padding: 8px;
}
.waybills-sidebar-amount-label {
   font-family: 'Roboto-Regular';
   margin-bottom: 10px;
   font-size: 16px;
   color: #aaa;
   width: 100%;
}
.waybills-sidebar-period-container { margin-top: 16px }
.waybills-refresh-button {
   margin-left: auto !important;
   color: #eee;
}
.waybills-period-buttons {
   position: relative;
   border-radius: 50%;
   line-height: 28px;
   min-height: 28px;
   min-width: 28px;
   cursor: pointer;
   margin: 0 auto;
   height: 28px;
   width: 28px;
}
#waybills-date-box { margin: 0 4px }
.waybills-row-actions-block {
   display: flex;
   flex-direction: row;
   align-items: center;
   position: relative;
}
.waybills-save-as-row-btn { color: #00bc00 }
.waybills-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;
}
.waybills-full-text { display: none }

.waybills-calendar-popup-panel {
   display: flex;
   justify-content: center;
   position: relative;
   margin-bottom: 8px;
}
.popup-calendar-buttons {
   display: inline-block;
   border: 2px solid #1976d2;
   text-align: center;
   line-height: 28px;
   padding: 0 16px;
   cursor: pointer;
   flex-grow: 1;
   height: 32px;
}
.popup-calendar-buttons:active { background-color: #e3f2fd }
.waybills-calendar-popup-panel *:first-child {
   border-bottom-left-radius: 6px;
   border-top-left-radius: 6px;
   border-right: 1px;
}
.waybills-calendar-popup-panel *:last-child {
   border-bottom-right-radius: 6px;
   border-top-right-radius: 6px;
}
.deal-scenario-filter-block { width: auto }
#waybills-mode-popup-panel {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 8px;
}
.waybills-scenario-filter-item {
   padding: 8px 14px;
   line-height: 18px;
   overflow: hidden;
   cursor: pointer;
   font-size: 14px;
   height: 32px;
}
.waybills-scenario-filter-item-select { border-bottom: 3px solid #1976d2 }
.waybills-side-buttons-panel {
   display: flex;
   flex-direction: column;
   padding-bottom: 8px;
   padding-right: 16px;
   overflow: hidden;
   width: 100%;
}
.waybills-side-buttons-panel > *:not(:first-child) { margin-top: 14px }
.del-waybill-info {
   background-color: #204352;
   border-radius: 6px;
   padding: 8px;
   color: #eee;
   width: 100%;
}
.del-waybill-info-icon {
   margin-right: 8px;
   color: orange;
}
.waybill-is-web4-container { margin-top: 8px }
#waybills-content .dx-datagrid-header-panel,
#waybill-templates-content .dx-datagrid-header-panel {
   background-color: #2a2a2a;
   position: sticky;
   z-index: 2;
   top: 0px;
}
#waybills-content .dx-datagrid-content .dx-datagrid-table .dx-row > td,
#waybills-content .dx-datagrid-content .dx-datagrid-table .dx-row > tr > td {
   vertical-align: inherit
}
.waybills-actions-menu {
   font-family: 'Roboto-Regular';
   text-align: left;
}
#waybills-filter-indicator {
   display: none;
   position: absolute;
   background-color: #ef6c00;
   border-radius: 32px;
   line-height: 18px;
   min-height: 18px;
   min-width: 18px;
   font-size: 13px;
   height: 18px;
   width: 18px;
   left: 226px;
   z-index: 50;
   top: 0;
}
#waybills-main-menu-container,
#waybill-templates-main-menu-container { margin-right: 8px }
.waybills-column-actions {
   justify-content: center;
   height: 28px;
}
.waybills-add-button {
   line-height: 28px;
   height: 28px;
   width: 28px;
}
.waybill-button {
   display: inline-block;
   border-radius: 50%;
   text-align: center;
   line-height: 28px;
   margin-left: 6px;
   cursor: pointer;
   height: 28px;
   width: 28px;
}
.waybills-top-right-block {
   display: inline-flex;
   align-items: center;
   justify-content: flex-start;
   flex-wrap: wrap;
   margin-left: auto;
   padding: 0 8px;
}
.waybills-action-button {
   border-radius: 32px;
   line-height: 28px;
   cursor: pointer;
   height: 28px;
   width: 28px;
}
.waybills-action-button:not(:first-child) { margin-left: 6px }
#waybills-scroll-block,
#waybill-templates-scroll-block {
   overflow: auto;
   height: 100%;
   width: 100%;
}
.waybills-geolocation-link { color: #64b5f6 }
#waybills-total-count-container { display: none }
#waybills-total-container {
   display: flex;
   flex-direction: row;
   align-items: center;
   background-color: #232323;
   font-family: 'Roboto-Regular';
   padding: 0 8px;
   height: 40px;
}
#waybills-pager-container {
   display: flex;
   flex-direction: row;
   align-items: center;
   margin-left: auto;
   height: 28px;
}
.waybills-total-item {
   display: flex;
   flex-direction: row;
   align-items: center;
   line-height: 28px;
   font-size: 14px;
   height: 28px;
   color: #eee;
}
.waybills-total-item:not(:first-child) { margin-left: 16px }
.waybills-total-label { font-weight: 700 }
.waybills-total-value { margin-left: 4px }
.waybill-grid-delete { color: red }
.waybill-group1-block { margin-top: 8px }
.waybill-group1-content {
   padding: 0 8px;
   padding-bottom: 8px;
}
.route-grid-map-button {
   margin-right: 8px;
   font-size: 18px;
   color: #47c14c;
}
.route-geolocation-link { color: #3faaff }
.waybill-grid-is-overdue {
   display: inline-block;
   background-color: #c62521;
   border-radius: 32px;
   line-height: 22px;
   padding: 0 12px;
   height: 22px;
   color: #eee
}
.waybill-grid-status {
   background-color: #8ee;
   border-radius: 40px;
   width: fit-content;
   line-height: 20px;
   min-height: 20px;
   font-size: 12px;
   padding: 0 12px;
   height: 20px;
   color: #111;
}
.waybill-status-color-0 { background-color: grey }
.waybill-status-color-1682 { background-color: #ffb300 } /* Чернетка */
.waybill-status-color-1683 { background-color: #00b5a4 } /* Заявка */
.waybill-status-color-1705 { background-color: #3f51b5; color: #eee; } /* Маршрут */
.waybill-status-color-1684 { background-color: #03a9f4 } /* В роботі */
.waybill-status-color-1685 { background-color: #6cca00 } /* Виконано */
.waybill-status-color-1686 { background-color: #ff3232; color: #eee; } /* Скасовано */
.waybill-status-color-1687 { background-color: #e91e63; color: #fff } /* Архів */
.waybill-status-color-1688 { background-color: #bcaaa4 } /* Брак */
/* Редактор маршрутів */
.route-editor {
   display: flex;
   flex-direction: column;
   height: 100%;
   width: 100%;
}
.route-form-status-button {
   background-color: #cddc39;
   border-radius: 40px;
   line-height: 24px;
   margin-left: 8px;
   min-height: 24px;
   cursor: pointer;
   padding: 0 8px;
   height: 24px;
   color: #333;
}
.route-form-status-icon {
   line-height: 24px;
   min-height: 24px;
   font-size: 12px;
   height: 24px;
}
.route-form-status-label {
   font-family: 'Roboto-Regular';
   line-height: 24px;
   margin-left: 4px;
   font-size: 12px;
}
.route-form-status-popover { z-index: 9999 }
.route-editor-form,
.route-editor-map-box {
   position: relative;
   padding: 0 4px;
   height: 100%;
}
.route-editor-form { overflow: auto }
.route-editor-map-box {
   display: flex;
   flex-direction: column;
   background-color: #171c19;
   width: 100%;
}
.route-editor-map-top-panel {
   background-color: #121212;
   min-height: 40px;
   height: 40px;
   width: 100%;
}
.route-editor-map {
   position: relative;
   height: calc(100% - 40px);
   overflow: hidden;
   width: 100%;
}
.route-editor-map-editable {
   cursor: default;
   cursor: url('../img/pen.svg') 2 20, auto;
}
.google-button { background-image: url('../img/GoogleMapsSchemeSel.png') }
.satellite-button { background-image: url('../img/GoogleMapsSputnikSel.png') }
.visicom-button { background-image: url('../img/VisicomLogoSel2.png') }
.openstreet-button {  background-image: url('../img/OpenStreetLogoSel3.png') }
.clarify-map-button-selected { background-color: #333333 }
.route-editor-maps-button {
   font-family: 'Roboto-Regular';
   background-color: #303f9f;
   border-radius: 40px;
   text-align: center;
   line-height: 24px;
   margin-left: 2px;
   min-height: 24px;
   min-width: 96px;
   padding: 0 16px;
   font-size: 12px;
   cursor: pointer;
   height: 24px;
   width: 112px;
}
.route-waypoint-info-item {
   padding: 0;
   margin: 0;
}
.route-waypoint-info-name { font-weight: 600 }
.route-waypoint-panel { justify-content: space-around }
.route-waypoint-copy,
.route-waypoint-delete {
   border-radius: 50%;
   line-height: 26px;
   min-height: 26px;
   min-width: 26px;
   cursor: pointer;
   height: 26px;
   width: 26px;
}
.route-waypoint-delete { color: #ff8888 }
.route-waypoint-copy { font-size: 16px }
.route-editor-fit-map,
.route-editor-edit-point,
.route-editor-toggle-map,
.route-editor-toggle-rule,
.route-editor-refresh-route,
.route-editor-approach-auto-refresh {
   border-radius: 40px;
   margin-left: 16px;
   line-height: 26px;
   min-height: 26px;
   min-width: 26px;
   cursor: pointer;
   height: 26px;
   width: 26px;
}
.route-editor-toggle-map {
   margin-right: 4px;
   margin-left: auto;
   font-size: 24px;
}
.route-editor-edit-point-enable {
   background-color: #ff9800;
   color: #000;
}
.route-editor-auto-refresh-enable {
   background-color: #4caf50;
   color: #000;
}
.route-editor-name { width: 100% }
.route-editor-title {
   cursor: pointer;
   margin: 8px 0;
   color: #00bcd4
}
.route-editor-main { color: #ff6737 }
.route-editor-info-top-panel {
   background-color: #333;
   border-radius: 6px;
   min-height: 32px;
   margin-top: 8px;
   padding: 0 8px;
   height: 32px;
   width: 100%;
}
.route-editor-get-approach-route {
   border-radius: 40px;
   line-height: 26px;
   min-height: 26px;
   min-width: 26px;
   cursor: pointer;
   height: 26px;
   width: 26px;
}
.route-editor-instructions-panel {
   background-color: #333;
   border-radius: 24px;
   min-height: 24px;
   margin: 8px 0;
   height: 24px;
   width: 100%;
}
.route-editor-instructions-title {
   margin-left: 12px;
   font-size: 14px;
}
.route-editor-instructions-fold {
   border-radius: 40px;
   margin-right: 8px;
   line-height: 20px;
   min-height: 20px;
   min-width: 20px;
   cursor: pointer;
   height: 20px;
   width: 20px;
}
.route-editor-info-table { display: none; background-color: #121212 }
.route-editor-info-table th,
.route-editor-info-table td { padding: 4px 6px }
.route-editor-info-table th {
   text-align: left;
   font-size: 12px;
   color: #aaa;
}
.route-editor-info-table td {
   border: 1px solid #40535b;
   text-align: left;
   font-size: 12px;
}
.route-editor-step {
   display: inline-block;
   background-color: #cddc39;
   background-image: url(../js/leaflet/leaflet.routing.icons.svg);
   -webkit-background-size: 240px 20px;
   background-repeat: no-repeat;
   background-size: 240px 20px;
   vertical-align: middle;
   border-radius: 50%;
   height: 20px;
   width: 20px;
}
.route-icon-continue         { background-position: 0 0; }
.route-icon-sharp-right      { background-position: -20px 0; }
.route-icon-turn-right       { background-position: -40px 0; }
.route-icon-bear-right       { background-position: -60px 0; }
.route-icon-u-turn           { background-position: -80px 0; }
.route-icon-sharp-left       { background-position: -100px 0; }
.route-icon-turn-left        { background-position: -120px 0; }
.route-icon-bear-left        { background-position: -140px 0; }
.route-icon-depart           { background-position: -160px 0; }
.route-icon-enter-roundabout { background-position: -180px 0; }
.route-icon-arrive           { background-position: -200px 0; }
.route-icon-via              { background-position: -220px 0; }
.route-editor-clarify-control-container {
   display: flex;
   position: relative;
   flex-direction: column;
   align-items: stretch;
   background-color: #545454;
   border-radius: 6px;
   margin-top: 8px;
   padding: 4px;
   height: auto;
   width: 100%;
}
.route-editor-item-drag-helper {
   line-height: 18px;
   min-height: 18px;
   cursor: grab;
   height: 18px;
   width: 100%;
}
.route-editor-item-drag-helper:after { content: "\e25d" }
.route-editor-item-drag-helper:active { cursor: grabbing }
.route-editor-item-number {
   position: absolute;
   background-color: #ddd;
   border-radius: 32px;
   text-align: center;
   line-height: 14px;
   margin-right: 0px;
   min-height: 14px;
   min-width: 14px;
   font-size: 10px;
   height: 14px;
   width: 14px;
   color: #333;
   left: 12px;
   top: 3px;
}
.route-editor-date-control { margin-top: 8px }
.route-editor-date-control:not(:first-child) { margin-left: 4px }
.route-editor-map-fold { height: 40px; }
.erplite-form-id-label {
   font-family: 'Roboto-Regular';
   background-color: #59beff;
   border-radius: 40px;
   line-height: 24px;
   min-height: 24px;
   cursor: pointer;
   padding: 0 10px;
   font-size: 14px;
   color: #3f51b5;
   height: 24px;
}
.erplite-form-id-label-value { margin-left: 2px }

/*.leaflet-routing-container { background-color: #2a323e }*/
.leaflet-routing-container { color: #111 }
.leaflet-routing-alt table { background-color: #fff }
.leaflet-container.crosshair { cursor: crosshair !important }
.route-marker {
   background: url(../img/marker32.png) center no-repeat;
   height: 32px !important;
   width: 32px !important;
   user-select: none;
   cursor: pointer;
}
.route-marker-label {
   text-align: center;
   font-weight: bold;
   user-select: none;
   margin-left: 0px;
   margin-top: 4px;
   font-size: 12px;
   height: 32px;
   width: 32px;
   color: #00f;
}
.waybill-item-remove,
.route-editor-item-remove {
   position: absolute;
   border-radius: 32px;
   line-height: 16px;
   min-height: 16px;
   min-width: 16px;
   font-size: 16px;
   cursor: pointer;
   color: #ff774c;
   height: 16px;
   width: 16px;
   right: 12px;
   top: 2px;
}
.route-line { background-color: #00c008 }
.route-editor-approach-info {
   background-color: #20253d;
   border-radius: 6px;
   overflow: hidden;
   font-size: 14px;
   margin-top: 8px;
   padding: 8px;
}
.route-editor-report-title,
.route-editor-approach-title { margin-bottom: 6px; margin-top: 4px; font-size: 16px }
.route-editor-pre-route-info { color: #00bcd4 }
.route-editor-post-route-info { margin-top: 6px; color: #ffca28 }
.route-editor-report {
   background-color: #192a32;
   border-radius: 6px;
   overflow: hidden;
   font-size: 14px;
   margin-top: 8px;
   padding: 8px;
}
.route-editor-report-info-distance { color: #00d108 }
.route-editor-refresh-events { margin-left: 8px }
.route-editor-report-container { margin-top: 8px }
.route-editor-report-container .dx-data-row td {
   vertical-align: middle !important;
   padding: 2px 6px;
   height: 32px;
}
.route-editor-filter-event,
.route-editor-draw-event { margin-left: 10px }
.route-editor-filter-event-enable {
   background-color: #45c8ec;
   color: #000;
}
.route-editor-draw-point-enable {
   background-color: #bfce2c;
   color: #000;
}

.add-event-form { padding: 0 6px }
.event-message-block { margin-top: 8px }

#settings,
#waybillTemplate { height: 100% }
.waybill-template-link {
   margin: 0 auto;
   border-radius: 50%;
   line-height: 28px;
   min-height: 28px;
   min-width: 28px;
   cursor: pointer;
   height: 28px;
   width: 28px;
}
/* Конструктор фільтрів */
/*.filter-dialog { font-family: 'Roboto-Regular' !important }*/
.filter-dialog-content { padding: 0 4px }
.filters-set-container { margin-top: 16px }
.filter-builder-item { width: 100% }
.filter-builder-item:not(:first-child) { margin-top: 8px }
.filter-builder-item > *:not(:first-child) { margin-left: 8px }
.filter-favorite-button {
   border-radius: 40px;
   line-height: 28px;
   min-height: 28px;
   min-width: 28px;
   cursor: pointer;
   height: 28px;
   width: 28px;
}
.filter-item-control-row { width: 100% }
.filter-option-cell { width: auto; }
.filter-control-cell {
   margin-left: 4px;
   overflow: hidden;
   width: 100%;
}
.filter-item-control-container {
   position: relative;
   display: flex;
   flex-direction: column;
   align-items: stretch;
   background-color: #162e47;
   border-radius: 6px;
   overflow: hidden;
   margin-top: 8px;
   padding: 4px;
   height: auto;
   width: 100%;
}
.filter-item-top-block {
   min-height: 18px;
   height: 18px;
   width: 100%;
}
.filter-item-drag-helper {
   line-height: 18px;
   min-height: 18px;
   margin: 0 auto;
   cursor: grab;
   height: 18px;
   width: 40px;
}
.filter-item-drag-helper:after { content: "\e25d" }
.filter-item-drag-helper:active { cursor: grabbing }
.filter-item-number {
   position: absolute;
   background-color: #0097a7;
   border-radius: 32px;
   text-align: center;
   line-height: 14px;
   margin-right: 0px;
   min-height: 14px;
   min-width: 14px;
   font-size: 10px;
   height: 14px;
   width: 14px;
   color: #fff;
   left: 12px;
   top: 3px;
}
.filter-item-compare-block {
   position: absolute;
   left: 40px;
   top: 1px;
}
.filter-compare-button {
   min-height: 18px;
   min-width: 18px;
   font-size: 16px;
   height: 18px;
   width: 18px;
}
.filter-noop-placeholder {
   background-color: #162e47;
   padding: 0 8px;
}
.filter-noop-placeholder-text {
   display: inline-block;
   line-height: 28px;
   min-height: 28px;
   margin-left: 4px;
   color: #bdbdbd;
   height: 28px;
}
.filter-item-disabled { background-color: #3a3b3c }
.filter-preset-item-name { margin-left: 8px }
.filter-preset-item-actions > *:not(:first-child) { margin-left: 4px }
.filter-preset-is-public-label { margin-left: 4px }
.filter-preset-item-button {
   border-radius: 40px;
   line-height: 28px;
   min-height: 28px;
   min-width: 28px;
   height: 28px;
   width: 28px;
}

.dx-datagrid-group-panel { display: inline-flex }

/* Панель з кнопками */
#buttons { height: 100% }
.waybill-buttons-panel {
   position: sticky;
   min-height: 40px;
   padding: 0 8px;
   height: 40px;
}
.waybill-buttons-selector { width: 100% }
.waybill-buttons-container { overflow-y: auto; height: 100% }
.waybill-buttons-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   justify-content: space-between;
   justify-items: stretch;
   align-items: start;
   width: 100%;
}
.waybill-action-button {
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: center;
   background-color: grey;
   border-radius: 6px;
   cursor: pointer;
   padding: 32px;
   margin: 4px;
}
.waybill-action-icon {
   line-height: 26px;
   min-height: 26px;
   min-width: 26px;
   height: 26px;
   width: 26px;
}
.waybill-action-label {
   line-height: 26px;
   margin-left: 4px;
   min-height: 26px;
   height: 26px;
}
.waybill-action-accept { background-color: #009688 }
.waybill-action-start { background-color: #1976d2 }
.waybill-action-add-point { background-color: #808d00 }
.waybill-action-finish { background-color: #008d00 }
.waybill-action-event { background-color: #9c27b0 }
.waybill-action-waybill { background-color: #3f51b5 }
.waybill-action-fuelin { background-color: #ff5722 }
.waybill-action-comment { background-color: #4f6e7d }
/* Форма Додати заправку */
.waybill-buttons-capture {
   background-color: #28a745;
   border-radius: 65px;
   text-align: center;
   line-height: 54px;
   min-height: 54px;
   margin-top: 16px;
   font-size: 16px;
   cursor: pointer;
   height: 54px;
   border: none;
   color: #eee;
}
.buttons-capture-panel {
   min-height: 28px;
   margin-top: 16px;
   height: 28px;
}
.capture-reset-button,
.capture-rotation-button {
   border-radius: 32px;
   text-align: center;
   line-height: 26px;
   min-height: 26px;
   min-width: 26px;
   cursor: pointer;
   height: 26px;
   width: 26px;
}
.capture-rotation-button { margin-left: 8px }
#buttons-capture-info {
   background-color: #222;
   border-radius: 6px;
   margin-right: 12px;
   line-height: 28px;
   min-height: 28px;
   font-size: 14px;
   padding: 0 6px;
   height: 28px;
   width: 100%;
}
.buttons-capture-preview-container {
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: center;
   min-height: 240px;
   margin-top: 20px;
   min-width: 100%;
   height: 240px;
   width: 100%;
}
#buttons-capture-preview {
   display: none;
   border-radius: 8px;
   max-height: 240px;
   height: 240px;
}
/* Події */
.event-field-visible { color: #00d909 }
.event-field-unvisible { color: #ff5e53 }
.event-template-form-menu { margin-left: 16px !important }
.event-waybill-helper-icon {
   background-color: #8ee;
   border-radius: 40px;
   line-height: 12px;
   margin-right: 6px;
   min-height: 12px;
   min-width: 12px;
   font-size: 8px;
   height: 12px;
   width: 12px;
   color: #111;
}
.waybill-status-color-1682 { background-color: #ffb300 } /* Чернетка */
.waybill-status-color-1683 { background-color: #00b5a4 } /* Заявка */
.waybill-status-color-1705 { background-color: #3f51b5; color: #eee; } /* Маршрут */
.waybill-status-color-1684 { background-color: #03a9f4 } /* В роботі */
.waybill-status-color-1685 { background-color: #6cca00 } /* Виконано */
.waybill-status-color-1686 { background-color: #ff3232; color: #eee; } /* Скасовано */
.waybill-status-color-1687 { background-color: #e91e63; color: #fff } /* Архів */
.waybill-status-color-1688 { background-color: #bcaaa4 } /* Брак */

.button-constructor-visual-container {
   position: relative;
   min-width: 100%;
   width: 100%;
}
.button-constructor-device-type {
   background-color: #2b3155;
   text-align: center;
   border-radius: 6px;
   line-height: 40px;
   min-height: 40px;
   font-size: 14px;
   height: 40px;
   color: #fff;
}
.button-constructor-scenario-url {
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: center;
   background-color: #212121;
   text-align: center;
   border-radius: 6px;
   line-height: 16px;
   min-height: 40px;
   overflow: hidden;
   font-size: 12px;
   color: #33e000;
   padding: 18px;
   height: 98px;
}
.button-constructor-scenario-url-copy {
   position: absolute;
   border-radius: 40px;
   text-align: center;
   line-height: 26px;
   min-height: 26px;
   min-width: 26px;
   font-size: 16px;
   cursor: pointer;
   height: 26px;
   width: 26px;
   right: 4px;
   top: 52px;
}

/* Неперекриваємі властивості */
#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 {
   display: inline-flex;
   background-color: #232323;
   border: 2px solid #4482cf;
   border-radius: 32px;
   width: fit-content;
   padding: 4px 16px;
   overflow: hidden;
   color: #eee;
}
#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;
}
.top-horizontal-menu-button-down { background-image: url('../img/arrow-down.svg') }
.top-horizontal-menu-button-up { background-image: url('../img/arrow-up.svg') }
#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-color: #d1d1d1;
   font-size: 14px;
   color: #1976d2;
   height: 18px;
   width: 18px;
}
.dx-texteditor-input-container { align-items: center }
.grid-content {
   overflow: hidden;
   height: 100%;
   width: 100%;
}
.grid-scroll-content { width: fit-content }
.grid-unfold-row td {
   word-wrap: break-word;
   white-space: normal;
}
.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;
}
.gear-preloader {
   display: none;
   position: fixed;
   top: 130px;
   left: calc(50% - 50px);
   width: 100px;
   height: 100px;
   background-image: url('../img/preloader-gear.svg');
   background-clip: content-box;
   background-repeat: no-repeat;
   background-position: center center;
   z-index: 999996;
}
.actions-description {
   min-height: 180px;
   height: 180px;
   padding: 8px;
}

/* Анімація */
@keyframes slideInDown {
   from {
      opacity: 0;
      transform: translateY(-20px);
   }
   to {
      opacity: 1;
      transform: translateY(0);
   }
}
@keyframes fadeOutDown {
   from {
      opacity: 1;
      transform: translateY(0);
   }
   to {
      opacity: 0;
      transform: translateY(-20px);
   }
}
@keyframes slideInUp {
   from {
      opacity: 0;
      transform: translateY(20px);
   }
   to {
      opacity: 1;
      transform: translateY(0);
   }
}
@keyframes fadeOutUp {
   from {
      opacity: 1;
      transform: translateY(0);
   }
   to {
      opacity: 0;
      transform: translateY(20px);
   }
}

/* Планшетна компоновка */
@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 }
   #waybills-total-count-container { display: flex }
}

@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;
   }
   .erplite-adaptive-block {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      width: 100%;
   }
   .waybill-is-web4-container { margin-top: 0 }
   .waybill-clarify-control-container {
      flex-direction: row;
      align-items: center;
      background-color: #545454;
      padding: 0 4px;
      height: 40px;
      width: 100%;
   }
   .waybill-item-drag-helper {
      line-height: 28px;
      min-height: 28px;
      min-width: 28px;
      cursor: grab;
      height: 28px;
      width: 28px;
   }
   .waybill-item-drag-helper:after { content: "\e945" }
   .waybill-item-number {
      position: static;
      margin-right: 8px;
   }
   .waybill-item-remove { display: none }
   .waybill-date-control {
      margin-left: 4px;
      margin-top: 0;
   }
   .waybill-date-input { font-size: 16px }
   .waybill-clarify-control-container .mf-datetime-box-input { width: 128px }
   .route-editor {
      display: grid;
      grid-template-columns: 520px 1fr;
      justify-content: space-between;
      justify-items: stretch;
      align-items: start;
      height: 100%;
      width: 100%;
   }
   .route-editor-map-fold { height: 100% }

   .filter-item-control-container {
      flex-direction: row;
      align-items: center;
      padding: 0 4px;
      height: 40px;
      width: 100%;
   }
   .filter-item-top-block { width: auto }
   .filter-item-drag-helper {
      line-height: 28px;
      min-height: 28px;
      min-width: 28px;
      cursor: grab;
      height: 28px;
      width: 28px;
   }
   .filter-item-drag-helper:after {
      content: "\e945";
   }
   .filter-item-number {
      position: static;
      margin-right: 8px;
      line-height: 17px;
      min-height: 17px;
      min-width: 17px;
      height: 17px;
      width: 17px;
   }
   .filter-option-cell { min-width: 180px; width: 180px }
   .filter-control-cell { margin-left: initial }
   .filter-item-compare-block {
      position: static;
      margin-left: 2px
   }
   .filter-compare-button {
      min-height: 28px;
      min-width: 28px;
      font-size: 18px;
      height: 28px;
      width: 28px;
   }
   .filter-noop-placeholder-text { display: none }
}