@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: #e6cf3c;
   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;
}
.grid-content { width: fit-content }
.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;
   z-index: 5;
   color: #333;
   top: 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-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: 38px;
   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-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%;
}
/* Класичний Radio-buttons */
.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";
   line-height: 32px;
   margin-right: 6px;
   font-family: "Material-Icons";
   font-weight: normal;
   font-style: normal;
   text-align: center;
   font-size: 18px;
   letter-spacing: normal;
   text-transform: none;
   -webkit-font-feature-settings: 'liga';
   -webkit-font-smoothing: antialiased;
}
.form-action-radio-select:before { content: "\e837" }

.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;
}
.ui-state-highlight {
   display: block;
   background-color: #fdfd96;
   padding: 0.5em 1em;
   max-width: 100%;
   height: 2.5em;
}
/* Форми */
.form-combo {
   position: relative;
   display: flex;
   flex-direction: column;
   align-items: stretch;
   background-color: #222;
   border-radius: 6px;
   overflow: hidden;
   margin-top: 8px;
   padding: 4px;
   height: auto;
   width: 100%;
}
.form-item-top-block {
   justify-content: flex-start;
   min-height: 28px;
   height: 28px;
   width: 100%;
}
.form-form-toggle-field { margin-right: 8px }
.form-item-drag-helper {
   line-height: 18px;
   min-height: 18px;
   cursor: grab;
   height: 18px;
   width: 30px;
}
.form-item-drag-helper:after { content: "\e945" }
.form-item-drag-helper:active { cursor: grabbing }
.form-item-number {
   position: absolute;
   background-color: #414141;
   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;
}
.form-item-label {
   font-family: 'Roboto-Regular';
   font-size: 14px;
}
/* Стилі контролів приоритетів */
.priority-color-block, .priority-order-block { margin: 8px }
.priority-color-item {
   display: inline-block;
   text-align: center;
   border-radius: 50%;
   line-height: 24px;
   font-weight: bold;
   min-height: 24px;
   min-width: 24px;
   cursor: pointer;
   font-size: 14px;
   height: 24px;
   width: 24px;
   color: #000;
}
.priority-color-item:not(:first-child),
.priority-order-item:not(:first-child) { margin-left: 8px }
.priority-color-red {
   background-color: #f44336;
   border: 2px solid #f44336;
}
.priority-color-yellow {
   background-color: #ffc107;
   border: 2px solid #ffc107;
}
.priority-color-green {
   background-color: #388e3c;
   border: 2px solid #388e3c;
}
.priority-color-none {
   background-color: #ccc;
   border: 2px solid #ccc;
}
.priority-order-item {
   display: inline-block;
   border: 2px solid #ccc;
   border-radius: 50%;
   text-align: center;
   line-height: 21px;
   cursor: pointer;
   font-size: 12px;
   height: 24px;
   width: 24px;
}
.priority-order-none {
   background-repeat: no-repeat;
   background-position: center;
   background-size: 14px;
}
.priority-order-none:after { content: "\e5cd" }
.priority-color-item-select {
   border-color: #222 !important;
   line-height: 22px;
}
.priority-color-item-select:after { content: "\e5ca" }
.priority-order-item-select { border-color: #2a95ff !important }

/* Індикатор очикування */
#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;
}
/* Основний контейнер додатку */
#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;
}

/* Модулі */
.module {
   position: relative;
   overflow: hidden;
   font-size: 16px;
}
.module-container {
   overflow: hidden;
   height: 100%;
   width: 100%;
}
.module-preload {
   display: none;
   position: fixed;
   background-image: url(../img/module-preload.svg);
   background-repeat: no-repeat;
   background-position: center;
   background-size: 86px;
   margin: -14px 0 0 -43px;
   z-index: 10000;
   height: 28px;
   width: 86px;
   left: 50%;
   top: 50%;
}
.module-top-panel {
   border-bottom: 1px solid #444;
   background-color: #333;
   min-height: 40px;
   height: 40px;
   width: 100%;
}
.module-top-left-block { width: 100% }
.module-top-right-block {
   margin-left: auto;
   padding: 0 6px;
}
.module-top-left-block { padding: 0 6px }
.module-top-left-block > *:not(:first-child, .grid-filter-indicator) { margin-left: 16px }

/* Верхня панель додатку (видима завжди) */
#top-panel {
   display: flex;
   position: fixed;
   flex-wrap: nowrap;
   flex-direction: row;
   align-items: center;
   justify-content: space-between;
   border-bottom: 1px solid #222;
   background-color: #232323;
   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;
   margin-left: 8px;
   min-height: 40px;
   min-width: 40px;
   height: 40px;
   width: 40px;
   left: 40px;
   top: 0;
}
#menu-metro-button {
   line-height: 40px;
   margin-left: 8px;
   min-height: 40px;
   min-width: 40px;
   height: 40px;
   width: 40px;
   color: #fff;
}
#top-panel-toolbar {
   min-height: 40px;
   padding: 0 8px;
   height: 40px;
}
.top-panel-item {
   display: inline-flex;
   flex-direction: row;
   align-items: center;
}
#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: 32px;
   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;
   block-size: fit-content;
   box-sizing: content-box;
   width: max-content;
   line-height: 40px;
   margin-left: auto;
   font-weight: bold;
   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-info {
   display: flex;
   flex-direction: column;
   background-color: #2c2c2c;
   width: 100%;
}
.main-menu-info-item {
   line-height: 28px;
   min-height: 28px;
   min-width: 100%;
   font-size: 12px;
   padding: 0 12px;
   color: #87f0ff;
   height: 28px;
   width: 28px;
}
.main-menu-info-phone { color: #8bc34a }
#main-menu-items {
   height: calc(100% - 154px);
   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 }

/* Metro */
#metro-container {
   display: grid;
   grid-template-columns: 1fr 1fr;
   grid-template-rows: repeat(auto, 1fr);
   background-color: #333;
   align-content: start;
   align-items: center;
   max-width: 1024px;
   overflow: hidden;
   overflow-y: auto;
   margin: 0 auto;
   padding: 2px;
   height: 100%;
   width: 100%;
}
.metro-item-link {
   display: grid;
   position: relative;
   grid-template-columns: 100%;
   grid-template-rows: 100%;
   justify-content: center;
   align-items: center;
   color: #333;
}
.metro-item-container {
   position: relative;
   display: inline-flex;
   flex-direction: row;
   background-color: #8bc34a;
   border: 3px solid #333;
   transition: all 160ms;
   border-radius: 8px;
   overflow: hidden;
   cursor: pointer;
   padding: 16px;
   width: 100%;
   clear: both;
}
.metro-item-container:hover {
   background-color: #dfebff;
   opacity: 0.8;
}
.metro-item-icon {
   display: inline-block;
   background-color: #e0f2f1;
   background-repeat: no-repeat;
   background-position: center;
   background-size: 24px;
   border-radius: 28px;
   line-height: 28px;
   overflow: hidden;
   min-height: 28px;
   min-width: 28px;
   height: 28px;
   width: 28px;
}
.metro-item-text {
   display: inline-block;
   width: calc(100% - 36px);
   text-align: center;
   line-height: 28px;
   font-style: 24px;
   margin-left: 8px;
   height: 28px;
}
.metro-item-count {
   display: none;
   position: absolute;
   font-family: 'Roboto-Regular';
   background-color: #f44336;
   border-radius: 40px;
   text-align: center;
   line-height: 24px;
   min-height: 24px;
   min-width: 24px;
   font-size: 12px;
   height: 24px;
   width: 24px;
   color: #fff;
   right: 6px;
   top: 6px;
}
.metro-item-icon-company {
   background-image: url(../img/company.svg);
   background-size: 22px;
}
.metro-item-icon-contact {
   background-image: url(../img/contact.svg);
   background-size: 18px;
}
.metro-item-icon-settings {
   background-image: url(../img/settings.svg);
   background-size: 18px;
}
.metro-item-icon-electric {
   background-image: url(../img/electric.svg);
   background-size: 20px;
}
.metro-item-icon-car {
   background-image: url(../img/car.svg);
   background-size: 26px;
}
.metro-item-icon-waybill {
   background-image: url(../img/route.svg);
   background-size: 24px;
}
.metro-item-icon-region {
   background-image: url(../img/region.svg);
   background-size: 24px;
}
.metro-item-icon-events {
   background-image: url(../img/event.svg);
   background-size: 22px;
}
.metro-item-icon-eventTemplate {
   background-image: url(../img/task.svg);
   background-size: 22px;
}
.metro-item-icon-notification {
   background-image: url(../img/notification.svg);
   background-size: 22px;
}
.metro-item-icon-tasks {
   background-image: url(../img/task.svg);
   background-size: 22px;
}
.metro-item-icon-forms {
   background-image: url(../img/form.svg);
   background-size: 22px;
}
.metro-item-icon-accounting {
   background-image: url(../img/accounting.png);
   background-size: 26px;
}
.metro-item-icon-webtask {
   background-image: url(../img/messenger.ico);
   background-size: 18px;
}
.metro-item-icon-program {
   background-image: url(../img/ControlPlus.ico);
   background-size: 18px;
}
.metro-item-icon-site {
   background-image: url(../img/ControlPlus.ico);
   background-size: 18px;
}
.metro-item-icon-helper {
   background-image: url(../img/helper.png);
   background-size: 18px;
}
.metro-item-icon-tbot {
   background-image: url(../img/bot.svg);
   background-size: 18px;
}
.metro-dashboard-buttons {
   display: flex;
   grid-column: 1 / -1;
   flex-direction: row;
   align-items: center;
   justify-content: center;
   background-color: #333;
   border-radius: 8px;
   max-width: 1024px;
   min-height: 100px;
   overflow: hidden;
   overflow-y: auto;
   margin: 0 auto;
   width: 100%;
}
.metro-dashboard-pad {
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: center;
   background-color: #232323;
   border: 3px solid #333;
   border-radius: 8px;
   padding: 32px 24px;
   min-height: 96px;
   cursor: pointer;
   height: 96px;
   width: 100%;
}
.metro-dashboard-icon {
   display: inline-block;
   border-radius: 28px;
   line-height: 28px;
   min-height: 28px;
   min-width: 28px;
   height: 28px;
   width: 28px;
}
.metro-dashboard {
   display: none;
   grid-column: 1 / -1;
   width: 100%;
}
.metro-dashboard-item {
   /* Окремий блок дашборда */
   background-color: #232323;
   border: 3px solid #333;
   border-radius: 8px;
   min-height: 100px;
   padding: 8px;
   width: 100%;
}

.card-top-left-block { width: 100% }
.card-top-right-block {
   justify-content: flex-end
   margin-left: auto;
}
.card-status-icon {
   justify-content: center;
   font-family: 'Roboto-Regular';
   border: 1px solid #1e90ff;
   border-radius: 32px;
   text-align: center;
   line-height: 20px;
   margin-right: 4px;
   margin-left: 8px;
   min-height: 22px;
   min-width: 22px;
   font-size: 10px;
   height: 22px;
   width: 22px;
   color: #fff;
}
.card-title {
   margin-left: 8px;
   min-width: 100px;
   width: 100%;
}
.card-item-fold {
   text-align: center;
   line-height: 32px;
   font-size: 26px;
   cursor: pointer;
   height: 32px;
   width: 32px;
}
.card-exinfo-table tr:nth-child(even) { background-color: #444 }
.card-exinfo-table td {
   line-height: 32px;
   padding: 0 8px;
   height: 32px;
}


/* Компанія */
#company { height: 100% }
.company-left-block > *:not(:first-child) { margin-left: 12px }
.cards-container { height: 100%; padding: 6px }
/* Карточка Компанії */
.company-card {
   background-color: #333;
   border-radius: 6px;
   max-width: 940px;
   overflow: hidden;
   height: 100%;
   width: 100%;
}
.company-card-top {
   position: relative;
   border-top-right-radius: 6px;
   border-top-left-radius: 6px;
   line-height: 32px;
   overflow: hidden;
   height: 33px;
   width: 100%;
}
.company-card-panel {
   background-color: #282828;
   min-height: 40px;
   padding: 0 6px;
   height: 40px;
}
.company-status-icon {
   line-height: 20px;
   min-height: 20px;
   min-width: 20px;
   margin: 0 8px;
   height: 20px;
   width: 20px;
}
.company-ok { color: green }
.company-top-ok { color: #333; background-color: #8eff61 }
.company-test { color: orange }
.company-top-test { color: #333; background-color: #ffe138 }
.company-paid { color: green }
.company-disable { color: red }
.company-top-disable { background-color: #ffdbcc }
.company-top-all-devices-on-pause { background-color: #ffff00 }
.company-old { color: black }
.company-all-devices-on-pause { color: orange }
.company-disable-by-reason { color: red }
.company-top-old { background-color: #7fffd4 }
.company-top-disable-by-reason { background-color: #ff9d7e }
.company-card-exinfo {
   height: calc(100% - 80px);
   overflow-y: auto;
}
/*.company-exinfo-table tr:nth-child(even) { background-color: #444 }
.company-exinfo-table td {
   line-height: 32px;
   padding: 0 8px;
   height: 32px;
}*/

/* Контакт */
#region,
#contact,
#events,
#eventTemplate,
#notification {
   display: flex;
   flex-direction: column;
   overflow: hidden;
   height: 100%;
   width: 100%;
}
#contact-list {
   position: relative;
   overflow-y: auto;
   padding: 0px;
   padding-top: 6px;
   height: 100%;
   width: 100%;
}
.contact-search-container { width: 100% }
.contact-search-input {
   background-color: #444;
   border-radius: 80px;
   padding: 0 16px;
   border: none;
   color: #eee;
}
.contact-middle-container {
   align-items: flex-start;
   height: calc(100% - 80px);
}
.contact-side-buttons-panel {
   display: flex;
   flex-direction: column;
   padding-bottom: 8px;
   padding-right: 16px;
   overflow: hidden;
   width: 100%;
}
.contact-side-buttons-panel > *:not(:first-child) { margin-top: 14px }
/* Карточка контату */
.contact-card {
   background-color: #333;
   border-radius: 6px;
   margin-bottom: 6px;
   max-width: 940px;
   overflow: hidden;
   width: 100%;
}
.contact-card-top {
   position: relative;
   border-top-right-radius: 6px;
   border-top-left-radius: 6px;
   background-color: #555;
   line-height: 32px;
   overflow: hidden;
   height: 33px;
   width: 100%;
}
.contact-menu-container { margin-right: 8px }
.contact-item-exinfo {
   display: none;
   margin-bottom: 8px;
   overflow: hidden;
}
.contact-main-info {
   position: relative;
   overflow: hidden;
   width: 100%;
}
.contact-car-row { background-color: #455a64 }
.contact-side-sort-panel {
   background-color: #444;
   border-radius: 6px;
   margin-top: 8px;
   padding: 16px;
}
.contact-sorting-label {
   background-color: #333;
   text-align: center;
   border-radius: 4px;
   line-height: 22px;
   min-height: 22px;
   font-size: 12px;
   color: #a4a4a4;
   height: 22px;
}
.contact-sorting-block {
   margin-top: 10px;
   height: 24px;
   width: 100%;
}
.contact-sorting-item {
   border-radius: 40px;
   padding: 2px 11px;
   font-size: 14px;
}
.contact-sorting-item-select { background-color: #009e85 }
.contact-sorting-direction { font-size: 16px }
.contact-sorting-direction-select {
   background-color: #555;
   border-radius: 6px;
}
.contact-side-add-button { font-size: 28px }
.contact-align-top-button { margin-top: 14px; width: 100% }
.contact-add-button { font-size: 20px }
.contact-view-item {
   border: 1px solid #333;
   border-radius: 4px;
   line-height: 32px;
   min-height: 32px;
   min-width: 32px;
   font-size: 26px;
   height: 32px;
   width: 32px;
}
.contact-view-item-select { border-color: #ccc }
.contact-grid-phone { color: #2a89ff }
.contact-grid-type {
   background-color: grey;
   width: fit-content;
   border-radius: 40px;
   line-height: 20px;
   min-height: 20px;
   font-size: 12px;
   padding: 0 12px;
   height: 20px;
   color: #111;
}
.contact-grid-type-1 { background-color: #ffff70 }
.contact-grid-type-2 { background-color: #7ca7ff }
.contact-grid-type-3 { background-color: #00bcd4 }
.contact-grid-type-4 { background-color: #e966ff }
.contact-button-type-1 { border: 2px solid #ffff70 }
.contact-button-type-2 { border: 2px solid #7ca7ff }
.contact-button-type-3 { border: 2px solid #00bcd4 }
.contact-button-type-4 { border: 2px solid #e966ff }
#contact .dx-datagrid-content .dx-datagrid-table .dx-row > td,
#contact .dx-datagrid-content .dx-datagrid-table .dx-row > tr > td {
   vertical-align: inherit
}
.contact-actions-menu {
   font-family: 'Roboto-Regular';
   text-align: left;
}

.exinfo-label {
   max-width: 136px;
   min-width: 120px;
   width: 136px;
}
.exinfo-value {
   word-break: break-word;
   overflow: hidden;
   min-width: 0;
}
.exinfo-additional {
   position: relative;
   overflow: hidden;
   margin: 4px 0;
   width: 100%;
}
.exinfo-additional-top {
   justify-content: flex-start;
   flex-wrap: nowrap;
   height: 24px;
   width: 100%;
}
.exinfo-additional-title {
   display: inline-flex;
   flex-direction: row;
   width: calc(100% - 24px);
   line-height: 20px;
   height: 20px;
}
.exinfo-additional-add {
   border-radius: 50%;
   margin-left: 8px;
   min-height: 20px;
   min-width: 20px;
   cursor: pointer;
   height: 20px;
   width: 20px;
}
.exinfo-additional-fold {
   border-radius: 32px;
   line-height: 20px;
   min-height: 20px;
   min-width: 20px;
   cursor: pointer;
   height: 20px;
   width: 20px;
}
.exinfo-additional-content {
   display: none;
   overflow-x: auto;
   font-size: 14px;
   padding: 4px;
   width: 100%;
}
.exinfo-additional-phone {
   max-width: 140px;
   width: 140px;
}
.exinfo-account-container {
   background-color: #444;
   border-radius: 6px;
   padding: 8px;
}
.exinfo-additional-table td { border: 1px solid #888 }
.exinfo-additional-th {
   background-color: #333;
   color: #888;
}
.exinfo-additional-actions-td {
   width: 80px;
   max-width: 80px;
}
.exinfo-additional-actions-block {
   display: flex;
   flex-direction: row;
   height: 20px;
}
.exinfo-additional-actions {
   display: inline-block;
   border-radius: 32px;
   line-height: 20px;
   min-height: 20px;
   min-width: 20px;
   cursor: pointer;
   height: 20px;
   width: 20px;
}
.exinfo-additional-actions:not(:first-child) { margin-left: 18px }
.exinfo-account-info {
   margin-top: 16px;
   padding: 0 8px;
}
.exinfo-account-availability {
   display: inline-block;
   line-height: 20px;
   margin-left: 8px;
   min-height: 20px;
   min-width: 20px;
   font-size: 16px;
   color: #4fe355;
   height: 20px;
   width: 20px;
}
.exinfo-account-availability-check { background-image: url('../img/check-black.svg'); }

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

/* Регіони */
.events-search-container,
.region-search-container,
.notification-search-container { width: 100% }
.events-menu-container,
.region-menu-container,
.event-template-menu-container,
.notification-menu-container { margin-right: 8px }
.events-middle-container,
.region-middle-container,
.notification-middle-container {
   align-items: flex-start;
   height: calc(100% - 80px);
}
.region-form { padding: 0 4px }
.region-shape-radio-block {
   background-color: #162f49;
   border-radius: 6px;
   padding: 8px;
}
.region-shape-radio-item {
   font-family: 'Roboto-Regular';
   line-height: 22px;
   font-size: 14px;
   padding: 0 8px;
   height: 22px;
}
.region-shape-radio-select { background-color: #006f7c }
.region-geolocation-link { color: #3faaff }
.region-pager-input {
   line-height: 24px;
   min-height: 24px;
   font-size: 14px;
   border: none;
   height: 24px;
   width: 100px;
}
.region-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;
}
.region-grid-map-button {
   margin-right: 8px;
   font-size: 14px;
   color: #47c14c;
}
#region .dx-datagrid-content .dx-datagrid-table .dx-row > td,
#region .dx-datagrid-content .dx-datagrid-table .dx-row > tr > td,
#events .dx-datagrid-content .dx-datagrid-table .dx-row > td,
#events .dx-datagrid-content .dx-datagrid-table .dx-row > tr > td {
   vertical-align: middle;
}
/* Події */
.event-field-visible { color: #00d909 }
.event-field-unvisible { color: #ff5e53 }
.event-template-form-menu { margin-left: 16px !important }
.events-sidebar-amount-block {
   background-color: #232323;
   border-radius: 6px;
   margin-top: 16px;
   padding: 8px;
}
.events-sidebar-mode-item-select { background-color: #b2ebf2 }
.events-sidebar-amount-container { margin-top: 16px }
.events-sidebar-amount {
   background-color: #008090;
   border-radius: 6px;
}
.events-sidebar-amount-label {
   font-family: 'Roboto-Regular';
   margin-bottom: 10px;
   font-size: 16px;
   color: #aaa;
   width: 100%;
}
.events-sidebar-amount-label > *:not(:first-child) { margin-left: 8px }
.events-sidebar-amount-button {
   font-family: 'Roboto-Regular';
   line-height: 22px;
   font-size: 10px;
   padding: 0 7px;
   height: 22px;
}
.events-sidebar-amount-button-select { background-color: #00454e }
.events-sidebar-period-container { margin-top: 16px }
.events-period-buttons {
   position: relative;
   border-radius: 50%;
   line-height: 28px;
   min-height: 28px;
   min-width: 28px;
   cursor: pointer;
   height: 28px;
   width: 28px;
}
.events-period-buttons:hover { background-color: #444 }
.events-period-buttons:active { background-color: #455a63 }
.events-calendar-popup-panel {
   justify-content: center;
   position: relative;
   margin-bottom: 8px;
}
.popup-calendar-buttons {
   display: inline-block;
   flex-grow: 1;
   height: 32px;
   padding: 0 16px;
   line-height: 28px;
   text-align: center;
   border: 2px solid #1976d2;
   cursor: pointer;
}
.popup-calendar-buttons:active {
   background-color: #e3f2fd;
}
.events-calendar-popup-panel :first-child {
   border-top-left-radius: 6px;
   border-bottom-left-radius: 6px;
   border-right: 1px;
}
.events-calendar-popup-panel :last-child {
   border-bottom-right-radius: 6px;
   border-top-right-radius: 6px;
}
.events-mode-popup-panel {
   position: relative;
   justify-content: center;
   margin-top: 8px;
}
.events-scenario-filter-block { width: auto }
.events-scenario-filter-item {
   padding: 8px 14px;
   line-height: 18px;
   overflow: hidden;
   cursor: pointer;
   font-size: 14px;
   height: 32px;
}
.events-scenario-filter-item-select { border-bottom: 3px solid #1976d2 }
.event-grid-type-1 { background-color: #ffff70 }
.event-grid-type-2 { background-color: #7ca7ff }
.event-grid-type-3 { background-color: #00bcd4 }
.event-grid-type-4 { background-color: #e966ff }
.event-grid-type-5 { background-color: #8cd835 }
.event-grid-type-6 { background-color: #548aa4 }
.event-grid-type-7 { background-color: #a1887f }
.event-grid-binding-link { color: #3faaff }
.add-event-form { padding: 0 6px }
.event-message-block { margin-top: 8px }
.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;
}
.event-grid-color {
   background-color: grey;
   width: fit-content;
   border-radius: 40px;
   line-height: 20px;
   min-height: 20px;
   font-size: 12px;
   padding: 0 12px;
   height: 20px;
   color: #000;
}
.event-grid-color-1 { color: #fff; background-color: #ff2e1f }
.event-grid-color-2 { background-color: #f2d900 }
.event-grid-color-3 { background-color: #00d300 }
.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 } /* Брак */

/* Налаштування нагадувань */
.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-row-actions-block {
   display: flex;
   flex-direction: row;
   align-items: center;
   position: relative;
   width: 100%;
}
.waybills-save-as-row-btn { color: #00bc00 }
.events-preset-menu-container { margin-left: 12px }
.events-template-button,
.events-preset-button {
   min-height: 32px;
   min-width: 32px;
   font-size: 21px;
   height: 32px;
   width: 32px;
}
/* Форми */
.forms-content {
   background-color: #333;
   border-radius: 4px;
   padding: 16px;
   margin: 8px;
}
.forms-button {
   display: inline-flex;
   flex-direction: row;
   align-items: center;
   background-color: #111;
   border-radius: 40px;
   overflow: hidden;
   min-height: 40px;
   padding: 0 16px;
   cursor: pointer;
   height: 40px;
}
.forms-button-icon {
   text-align: center;
   line-height: 26px;
   min-height: 26px;
   min-width: 26px;
   height: 26px;
   width: 26px;
}
.forms-button-text {
   line-height: 26px;
   margin-left: 4px;
   min-height: 26px;
   height: 26px;
}
.forms-button-devuce-command { color: #00bcd4 }

.erplite-pager-container *:not(:first-child, .mf-list-item) { margin-left: 4px }
.erplite-pager-button {
   border-radius: 32px;
   line-height: 24px;
   min-height: 24px;
   min-width: 24px;
   height: 24px;
   width: 24px;
}
.erplite-page-size-button {
   font-family: 'Roboto-Regular';
   text-align: center;
   font-size: 12px;
   cursor: pointer;
   padding: 0 4px;
   width: auto;
}
.erplite-page-size-select {
   background-color: #006d9c;
   color: #fff;
}

.task-top-panel {
   display: flex;
   flex-wrap: nowrap;
   flex-direction: row;
   justify-content: space-between;
   box-shadow: 0 1px 1px -1px #3338;
   background-color: #2a3a54;
   position: sticky;
   padding: 8px;
   z-index: 20;
   width: 100%;
   top: 0;
}
.task-link-button-container {
   margin-left: 2px;
   height: 28px;
}
.task-form-link-button {
   display: flex;
   flex-direction: row;
   align-items: center;
   background-color: #0362d9;
   border-radius: 32px;
   min-height: 28px;
   cursor: pointer;
   height: 28px;
}
.task-form-link-button-label {
   background-repeat: no-repeat;
   background-position: left 12px center;
   background-size: 13px;
   background-image: url(../img/link.svg);
   padding-left: 32px;
   line-height: 28px;
   min-height: 28px;
   height: 28px;
}
.task-form-link-button-value {
   padding-right: 14px;
   line-height: 28px;
   margin-left: 4px;
   height: 28px;
}
.task-is-notify-container { margin-top: 16px }

/* Конструктор фільтрів */
/*.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;
}
.filter-clear-button { color: #bbb }

@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;
   }

   .form-item-number {
      position: static;
      margin-right: 8px;
      line-height: 17px;
      min-height: 17px;
      min-width: 17px;
      height: 17px;
      width: 17px;
   }

   .module { font-size: inherit }
   .module-container {
      overflow: hidden;
      height: 100%;
      width: 50%;
   }
   .mobile-module {
      height: calc(100% - 8px);
      margin-top: 6px;
   }
   #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 }
   #metro-container {
      grid-template-columns: auto auto auto auto;
      grid-template-rows: minmax(100px, 1fr);
      border-radius: 8px;
      height: auto;
   }
   .metro-item-container { padding: 32px 24px }
   .cards-container {
      position: relative;
      overflow-y: auto;
      padding: 6px 0px;
      height: 100%;
   }
   .contact-card,
   .company-card {
      margin: 0 auto;
      height: auto;
      width: 96%;
   }
   .contact-card { margin-bottom: 6px }
   .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 }
}