@charset "utf-8";

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

.mf-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 */
}
.mf-nowrap {
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
}
.mf-offscreen {
   position: absolute;
   left: -999em;
}
.mf-icons {
   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;
}
.mf-component:hover {
   background-color: #444;
}
.mf-component:active {
   background-color: #673ab7;
}
.mf-table-fixed {
   table-layout: fixed;
}
/*.mf-table-fixed tr > th:first-child,
.mf-table-fixed tr > td:first-child {
   background-color: #fff;
   position: sticky;
   left: 0;
}*/
.mf-flex {
   display: flex;
   flex-direction: row;
   align-items: center;
}
.mf-flex-column {
   display: flex;
   flex-direction: column;
}
.mf-input {
   font-family: 'Roboto-Regular';
   border: 2px solid #3f3f3f;
   background-color: #3a3b3c;
   border-radius: 6px;
   outline: none;
   color: #eee;
}
.mf-input:focus { border-color: #0262da }
.mf-input::placeholder {
   opacity: 0.5;
   color: #aaa;
}
.mf-textarea {
   font-family: 'Roboto-Regular';
   border: 2px solid #3f3f3f;
   background-color: #3a3b3c;
   border-radius: 6px;
   resize: vertical;
   min-height: 38px;
   padding: 4px 8px;
   font-size: 14px;
   outline: none;
   height: 80px;
   width: 100%;
   color: #eee;
}
/*.mf-list {
   box-shadow: 1px 1px 8px 2px #00000064;
   background-color: #1b1b1b;
   border-radius: 6px;
   overflow: hidden;
   overflow-y: auto;
   padding: 6px 0;
   z-index: 500;
   width: 100%;
}*/
.mf-control-preloader {
   /* Локальний прелоадер контролів */
   display: none;
   position: absolute;
   background-position: center;
   background-repeat: no-repeat;
   background-image: url(../img/control-preload.svg);
   background-size: 32px;
   min-height: 32px;
   min-width: 32px;
   margin: 0 auto;
   height: 32px;
   width: 32px;
}
.mf-disabled {
   pointer-events: none;
   opacity: 0.6;
}
/* Список  */
.mf-list-element {
   display: none;
   position: absolute;
   box-shadow: 1px 1px 8px 0px #0005;
   background-color: #1b1b1b;
   border-radius: 6px;
   max-height: 100px;
   overflow: hidden;
   overflow-y: auto;
   padding: 6px 0;
   z-index: 500;
}
.mf-list {
   position: relative;
   box-shadow: none;
   overflow-y: auto;
   padding: 0 4px;
   width: 100%;
   margin: 0;
}
.mf-list-group-header {
   background-color: #eee;
   margin-top: 0.5rem;
   line-height: 32px;
   min-height: 32px;
   padding: 0 8px;
   color: #374151;
   height: 32px;
}
.mf-list-group-header:first-child { margin-top: 0 }
.mf-list-group-header-title {
   font-weight: 600;
   color: #a0a0a0;
}
.mf-list-group-toggle {
   margin-left: auto;
   cursor: pointer;
}
.mf-list-item {
   transition: background-color 0.2s;
   font-family: 'Roboto-Regular';
   white-space: nowrap;
   text-overflow: ellipsis;
   line-height: 32px;
   overflow: hidden;
   font-size: 16px;
   cursor: pointer;
   padding: 0 8px;
   height: 32px;
   width: 100%;
   color: #eee;
}
.mf-list-item-nodata { color: #acb4bf }
.mf-list-item:not(.mf-list-item-selected, .mf-list-item-nodata):hover { background-color: #2b2b2b }
.mf-list-selected { background-color: #6400c3 }
.mf-list-item-selected {
   background-color: #0e4162;
   color: #cee6ff;
}
.mf-list-item-checkbox { margin-right: 8px }
.mf-list-hidden {
   visibility: hidden;
   height: 0px;
}
.mf-list-no-data-item,
.mf-list-no-matches {
   font-family: 'Roboto-Regular';
   line-height: 32px;
   font-size: 16px;
   cursor: default;
   padding: 0 8px;
   height: 32px;
   width: 100%;
   color: #aaa;
}
.mf-list-no-matches { display: none }
/* Checkbox component */
.mf-checkbox-container { display: inline-block }
.mf-custom-checkbox {
   display: inline-flex;
   flex-direction: row;
   align-items: center;
   position: relative;
   cursor: pointer;
   height: 20px;
   min-width: 20px;
}
.mf-custom-checkbox input {
   opacity: 0;
   height: 0;
   width: 0;
}
.mf-checkmark {
   /*--after-display: inline-block;*/
   position: absolute;
   top: 0;
   left: 0;
   height: 20px;
   width: 20px;
   background-color: #ecf9ff;
   border: 2px solid #ccc;
   border-radius: 6px;
}
.mf-custom-checkbox:hover input ~ .mf-checkmark { border-color: #aaa }
.mf-checkmark:after {
   content: "";
   position: absolute;
   display: none;
}
.mf-custom-checkbox input:checked ~ .mf-checkmark:after { display: inline-block }
.mf-custom-checkbox .mf-checkmark:after {
   top: 2px;
   left: 6px;
   width: 5px;
   height: 10px;
   border: solid #444;
   border-width: 0 3px 3px 0;
   -webkit-transform: rotate(45deg);
   -ms-transform: rotate(45deg);
   transform: rotate(45deg);
}
.mf-custom-checkbox-title {
   margin-left: 20px;
   line-height: 20px;
}
/* Checkbox 2 */
.mf-checkbox-element {
   display: flex;
   flex-direction: row;
   align-items: center;
   cursor: pointer;
}
.mf-checkbox-input {}
.mf-checkbox-checkmark {
   line-height: 24px;
   min-height: 24px;
   min-width: 24px;
   font-size: 24px;
   height: 24px;
   width: 24px;
}
.mf-checkbox-label {
   line-height: 24px;
   padding: 0 4px;
   height: 24px;
}
.mf-checkbox-disabled { color: #888 }
/* Switch */
.mf-switch-container { display: inline-block }
.mf-switch-element { cursor: pointer }
.mf-switch {
   line-height: 24px;
   min-height: 24px;
   min-width: 44px;
   font-size: 44px;
   height: 24px;
   width: 44px;
}
.mf-switch-disabled { color: #888 }
.mf-switch-label {
   line-height: 24px;
   padding: 0 4px;
   height: 24px;
}
/* Search component */
.mf-search-container {
   display: inline-flex;
   flex-direction: row;
   flex-wrap: nowrap;
   position: relative;
   align-items: center;
   width: 100%;
}
.mf-search-element {
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
   position: relative;
   align-items: center;
   width: 100%;
}
.mf-search-input {
   display: inline-block;
   font-family: 'Roboto-Regular';
   border: 2px solid #3f3f3f;
   background-color: #3a3b3c;
   width: 100%;
   height: 32px;
   padding: 4px;
   padding-left: 8px;
   padding-right: 34px;
   font-size: 12pt;
   font-weight: 500;
   outline: none;
   border-radius: 6px;
   overflow: hidden;
   color: #eee;
}
.mf-custom-clear {
   display: none;
   position: absolute;
   border-radius: 50%;
   line-height: 32px;
   vertical-align: middle;
   font-family: "Material-Icons";
   text-align: center;
   font-size: 24px;
   cursor: pointer;
   z-index: 100;
   height: 32px;
   width: 32px;
   color: #bbb;
   right: 4px;
   padding: 0;

}
.mf-custom-clear:hover { color: #888 }
.mf-custom-search-result-container {
   display: none;
   position: absolute;
   box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.4);
   border-radius: 0 0 4px 4px;
   overflow: hidden;
   z-index: 9999;
   width: 100%;
   top: 36px;
}
.mf-custom-search-result {
   display: flex;
   flex-direction: column;
   /* TODO: це винести у окремий клас спадаючого меню-списка... */
   background-color: #ffffff;
   max-height: 350px;
   overflow: hidden;
   padding: 16px;
   width: 100%;
}
.mf-custom-search-filter-panel {
   width: 100%;
   height: 40px;
   margin-bottom: 16px;
}
.mf-custom-search-result-list-container {
   position: relative;
   width: 100%;
   overflow: hidden;
   overflow-y: auto;
}
.mf-custom-search-result-list { width: 99.5% }
.mf-custom-search-result-section {
   height: 24px;
   line-height: 20px;
   margin-bottom: 4px;
   padding: 2px 8px;
   background-color: #9e9e9e;
   color: #fff;
}
.mf-custom-search-result-section:not(:first-child) { margin-top: 4px }
.mf-custom-search-result-item {
   display: flex;
   flex-direction: column;
   line-height: 32px;
   cursor: pointer;
   padding: 0 8px;
   margin: 0;
}
.mf-custom-search-result-item:hover {
   background-color: #eee;
   color: #38f;
}
.mf-custom-search-result-item-title {
   display: flex;
   flex-direction: row;
   line-height: 34px;
   height: 34px;
}
.mf-custom-search-result-item-icon {
   display: inline-block;
   height: 34px;
   width: 34px;

   background-repeat: no-repeat;
   background-position: center;
   background-size: 18px;
}
.mf-custom-search-result-item-text {
   display: inline-block;
   line-height: 34px;
   height: 34px;
}
.mf-custom-search-result-item-info {
   font-size: 12px;
   color: #888;
}
/* Radio component */
.mf-radio-container { display: inline-block }
.mf-radio-block {
   display: flex;
   flex-direction: row;
   width: 100%;
}
.mf-radio-buttos-container {
   display: flex;
   flex-direction: row;
   align-items: center;
   width: 100%;
}
.mf-radio-button {
   display: inline-block;
   text-align: center;
   cursor: pointer;
}
/* TimePicker */
.mf-timepicker-container {
   display: inline-flex;
   flex-direction: row;
   justify-content: center;
   width: 100%;
}
.mf-timepicker-input {
   display: inline-block;
   font-size: 14px;
   padding: 4px;
   height: 32px;
   width: 28%;
}
.mf-timepicker-input-minutes,
.mf-timepicker-input-seconds {
   margin-left: 8px;
}
/* Dialog */
.mf-dialog {
   display: none;
   position: fixed;
   background-color: #121212;
   border-radius: 4px;
   box-shadow: 0 0 16px 6px #00000064;
   margin-bottom: 8px;
   padding: 8px;
   padding-top: 4px;
   z-index: 5500;
}
.mf-dialog-top-panel,
.mf-dialog-top-panel-v2 {
   display: flex;
   flex-direction: row;
   justify-content: flex-start;
   align-items: center;
   flex-wrap: nowrap;
   margin-bottom: 8px;
   border-bottom: 1px solid #454545;
   padding-bottom: 2px;
   line-height: 40px;
   height: 40px;
}
.mf-dialog-top-panel-drag { cursor: grab }
.mf-dialog-top-panel-drag:active { cursor: grabbing }
.mf-dialog-title {
   line-height: 32px;
   color: #d2d2d2;
   height: 32px;
   width: 100%;
}
.mf-dialog-close {
   display: inline-block;
   border-radius: 50%;
   margin-left: auto;
   font-weight: bold;
   line-height: 26px;
   min-height: 26px;
   min-width: 26px;
   cursor: pointer;
   font-size: 19px;
   color: #d2d2d2;
   height: 26px;
   width: 26px;
}
.mf-dialog-content {
   position: relative;
   height: calc(100% - 50px);
   overflow: hidden;
   overflow-y: auto;
}
.mf-dialog-toolbar {
   display: flex;
   flex-direction: row;
   justify-content: flex-start;
   align-items: center;
   flex-wrap: nowrap;
   line-height: 40px;
   margin-right: 10px;
   height: 40px;
   width: 100%;
}
/* TextInput */
.mf-text-input-container {
   display: inline-flex;
   flex-direction: row;
   justify-content: center;
   width: 100%;
}
.mf-text-input-element {
   position: relative;
   display: inline-flex;
   flex-direction: row;
   justify-content: center;
   align-items: center;
   height: 32px;
   width: 100%;
}
.mf-text-input {
   display: inline-block;
   font-weight: 500;
   overflow: hidden;
   font-size: 16px;
   padding: 0 8px;
   height: 32px;
   width: 100%;
}
.mf-text-input-clear {
   display: none;
   position: absolute;
   border-radius: 28px;
   line-height: 24px;
   cursor: pointer;
   height: 24px;
   width: 24px;
   z-index: 10;
   right: 6px;
}
/* ToggleBox */
.mf-togglebox {
   border: 1px solid #3f3f3f;
   border-radius: 4px;
   padding: 4px;
   width: 100%;
}
.mf-togglebox-control {
   display: flex;
   flex-direction: row;
   overflow: hidden;
   height: 20px;
   width: 100%;
}
.mf-togglebox:not(:first-child) { margin-top: 8px }
.mf-togglebox-drag-helper {
   display: inline-block;
   line-height: 20px;
   font-size: 16px;
   cursor: grab;
   height: 20px;
   width: 20px;
}
.mf-togglebox-drag-helper:active { cursor: grabbing }
.mf-togglebox-control-label {
   padding: 0 2px;
   line-height: 20px;
   font-size: 12px;
   /* TODO: виставити колір або зробити загальний клас */
   color: #aaa;
}
.mf-togglebox-control-info-container {
   transition: visibility 0s, opacity 0.3s linear;
   visibility: hidden;
   overflow: hidden;
   height: 20px;
   opacity: 0;
}
.mf-togglebox-control-info {
   display: flex;
   flex-direction: row;
   align-items: center;
   line-height: 20px;
   font-size: 12px;
   overflow: hidden;
   height: 20px;
}
.mf-togglebox-control-fold-button {
   display: inline-block;
   border-radius: 50%;
   line-height: 20px;
   margin-left: auto;
   cursor: pointer;
   min-width: 20px;
   font-size: 20px;
   height: 20px;
   width: 20px;

   /*background-repeat: no-repeat;
   background-position: center;
   background-size: 14px;*/
}
/*.mf-togglebox-control-fold-button-down {
   background-image: url('../img/arrow-down.svg');
}
.mf-togglebox-control-fold-button-up {
   background-image: url('../img/arrow-up.svg');
}*/
.mf-togglebox-content { display: none }
.mf-togglebox-folded { padding-bottom: 0px }
/*  Button */
.mf-button {
   display: inline-flex;
   flex-direction: row;
   align-items: center;
   justify-content: space-between;
}
.mf-button-inner-span {
   display: inline-block;
}
/* Button */
.mf-round-button {
   border-radius: 50%;
   text-align: center;
   line-height: 28px;
   min-height: 28px;
   min-width: 28px;
   height: 28px;
   width: 28px;
}
.mf-button-disabled {
   background-color: #2e2e2e;
   color: #7f7f7f;
}
@media screen and (max-width: 1024px) {
   .mf-button-inner-span { display: none }
}
/* DropDownMenu */
.mf-dropdown-container {
   position: relative;
   display: inline-flex;
   justify-content: center;
   align-items: center;
}
.mf-dropdown-button {
   display: inline-flex;
   justify-content: center;
   align-items: center;
   line-height: 28px;
   font-size: 26px;
   border-radius: 28px;
   cursor: pointer;
   height: 28px;
   width: 28px;
}
.mf-dropdown-menu {
   display: none;
   position: fixed;
   border-radius: 8px;
   background-color: #1b1b1b;
   box-shadow: 0 2px 8px 1px rgba(0, 0, 0, 0.2);
   padding: 8px 0;
   overflow: hidden;
   visibility: hidden;
   opacity: 0;
   transition: visibility 0s, opacity 0.3s linear;
   z-index: 1000;
   left: auto;
   top: auto;
}
.mf-dropdown-menu-scrolled {
   overflow: hidden;
   overflow-y: auto;
   height: 100%;
}
.mf-dropdown-menu-item {
   display: flex;
   flex-direction: row;
   align-items: center;
   padding: 0 12px;
   cursor: pointer;
   line-height: 36px;
   height: 36px;
   width: 100%;
   overflow: hidden;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
}
.mf-dropdown-menu-item:not(.mf-dropdown-menu-item-sticky):hover { background-color: #343434 }
.mf-dropdown-menu-item:not(.mf-dropdown-menu-item-sticky):active { background-color: #673ab7 }
.mf-dropdown-menu-item-disable { color: #ccc }
.mf-dropdown-menu-item-icon {
   margin-right: 10px;
   text-align: center;
   line-height: 24px;
   height: 24px;
   width: 24px;
}
.mf-dropdown-menu-item-text {
   width: 100%;
   font-size: 16px;
   white-space: nowrap;
   overflow: hidden;
}
/* Chips */
.mf-chips {
   display: inline-flex;
   flex-direction: row;
   align-items: center;
   background-color: #ebebeb;
   border-radius: 32px;
   line-height: 24px;
   font-size: 14px;
   height: 24px;
}
.mf-chips-icon {
   display: inline-block;
   background-position: center;
   background-repeat: no-repeat;
   background-size: 20px;
   text-align: center;
   line-height: 17px;
   margin-right: -4px;
   margin-left: 6px;
   font-size: 17px;
   color: #757575;
   height: 17px;
   width: 17px;
}
.mf-chips-text {
   display: inline-block;
   line-height: 24px;
   padding: 0 6px 0 8px;
   height: 24px;
}
.mf-chips-button {
   display: inline-block;
   background-color: #757575;
   margin-right: 6px;
   border-radius: 32px;
   line-height: 17px;
   font-size: 12px;
   cursor: pointer;
   color: #ebebeb;
   height: 17px;
   width: 17px;
}
.mf-chips-disabled {
   background-color: #ccc;
   color: #a7a7a7;
}
/* Snackbar */
.mf-snackbar {
   position: fixed;
   display: flex;
   flex-wrap: nowrap;
   flex-direction: row;
   align-items: center;
   padding: 8px 16px;
   background-color: #323232;
   border-radius: 6px;
   box-shadow: 0 0 16px 6px #00000064;
   z-index: 9999;
   min-height: 48px;
   width: 344px;
}
.mf-snackbar-icon {
   display: inline-block;
   background-position: center;
   background-repeat: no-repeat;
   background-size: 20px;
   text-align: center;
   line-height: 24px;
   margin-right: 8px;
   font-size: 24px;
   color: #757575;
   height: 24px;
   width: 24px;
}
.mf-snackbar-text {
   display: inline-block;
   font-size: 14px;
   line-height: 24px;
   padding-right: 6px;
   min-height: 24px;
}
.mf-snackbar-button {
   display: inline-block;
   background-color: #757575;
   margin-left: auto;
   border-radius: 32px;
   line-height: 17px;
   font-size: 12px;
   cursor: pointer;
   color: #ebebeb;
   min-height: 17px;
   min-width: 17px;
   height: 17px;
   width: 17px;
}
.mf-snackbar-disabled {
   background-color: #4d4d4d;
   color: #a7a7a7;
}
/* SnackBar 2 */
.mf-snackbar-v2-position-container {
   display: flex;
   position: fixed;
   align-items: center;
   justify-content: center;
   pointer-events: none;
   z-index: 9999;
   width: 100%;
   gap: 10px;
}
.mf-snackbar-v2-position-container.top { top: 20px }
.mf-snackbar-v2-position-container.center {
   transform: translateY(-50%);
   top: 50%;
}
.mf-snackbar-v2-position-container.bottom { bottom: 20px }
.mf-snackbar-v2 {
   display: flex;
   align-items: center;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
   background-color: #f0f4f9;
   pointer-events: auto;
   border-radius: 8px;
   min-width: 300px;
   max-width: 90%;
   color: #1b1c1d;
   padding: 16px;
   opacity: 0;
   gap: 1rem;
}
.mf-snackbar-v2-icon {
   display: inline-block;
   background-position: center;
   background-repeat: no-repeat;
   background-size: 20px;
   text-align: center;
   line-height: 24px;
   margin-right: 8px;
   font-size: 20px;
   color: #1b1c1d;
   height: 24px;
   width: 24px;
}
.mf-snackbar-v2.slide-down { animation: slideInDown 0.3s forwards }
.mf-snackbar-v2.slide-down.fade-out { animation: fadeOutDown 0.3s forwards }
.mf-snackbar-v2.slide-up { animation: slideInUp 0.3s forwards }
.mf-snackbar-v2.slide-up.fade-out { animation: fadeOutUp 0.3s forwards }
.mf-snackbar-v2-close {
   display: inline-block;
   transition: background-color 0.2s ease;
   background-color: transparent;
   border-radius: 32px;
   line-height: 22px;
   margin-left: auto;
   min-height: 22px;
   min-width: 22px;
   font-size: 18px;
   cursor: pointer;
   color: #1b1c1d;
   height: 22px;
   width: 22px;
}
.mf-snackbar-v2-close:hover { background-color: #d0d5da }
.mf-snackbar-v2-text {
   display: inline-block;
   font-family: 'Roboto-Regular';
   padding-right: 8px;
   line-height: 24px;
   min-height: 24px;
   font-size: 14px;
   color: #1b1c1d;
}
.mf-snackbar-v2-bottom-panel {
   font-family: 'Roboto-Regular';
   box-sizing: border-box;
   border-radius: 6px;
   font-size: 14px;
   padding: 0 32px;
   width: 100%;
}
.mf-snackbar-v2-content-wrapper {
   display: flex;
   flex-direction: column;
   width: 100%;
}
/* DataGrid */
.mf-datagrid-element {
   position: relative;
   height: 100%;
   width: 100%;
}
.mf-datagrid-top-panel,
.mf-datagrid-group-panel,
.mf-datagrid-button-panel {
   background-color: #fff;
   position: relative;
   display: flex;
   flex-direction: row;
   align-items: center;
   height: 40px;
}
.mf-datagrid-top-panel {
   width: 100%;
}
.mf-datagrid-head-container {
   background-color: #fff;
   border: 1px solid #ddd;
}
.mf-datagrid-table-container {
   overflow-x: auto;
   margin-top: 0px;
}
.mf-datagrid-element table {
   width:100%;
   table-layout: fixed;
}
.mf-datagrid-element th,
.mf-datagrid-element td {
   vertical-align: middle;
   border: 1px solid #ddd;
   text-align: left;
   font-size: 12px;
   padding: 8px;
}
.mf-datagrid-element th {
   border-top: none;
   border-bottom: none;
}
.mf-datagrid-element th:first-child {
   border-left: none;
}
.mf-datagrid-element th:last-child {
   border-right: none;
}
.mf-datagrid-element td {
   color: #000;
}
.mf-datagrid-fixed-head {
   position: -webkit-sticky;
   position: sticky;
   z-index: 2;
   top: 0;
}
/* SelectSerach */
.mf-select-search-element {
   position: relative;
   display: flex;
   flex-direction: column;
}
.mf-select-search-input-container {
   position: relative;
   display: flex;
   flex-direction: row;
   align-items: center;
}
.mf-select-search-disabled {
   background-color: #222;
   color: #777;
}
.mf-select-search-buttons {
   display: none;
   position: absolute;
   border-radius: 28px;
   line-height: 24px;
   cursor: pointer;
   height: 24px;
   width: 24px;
   z-index: 10;
}
.mf-select-search-add-button {
   color: #008e00;
   left: 4px;
}
.mf-select-search-clear {
   right: 6px;
}
.mf-select-search-with-add {
   padding-left: 30px;
}
.mf-select-search-result-container {
   display: none;
   position: absolute;
   top: 36px;
   width: 100%;
   border-radius: 4px;
   box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.4);
   overflow: hidden;
   z-index: 9999;
}
.mf-select-search-result-list {
   max-height: 200px;
   background-color: #fff;
   overflow: hidden;
   overflow-y: auto;
   padding: 4px 0;
   width: 100%;
}
.mf-select-search-result-item {
   line-height: 32px;
   cursor: pointer;
   padding: 0 8px;
   height: 32px;
   margin: 0;
}
.mf-select-search-result-item:hover {
   background-color: #eee;
   color: #38f;
}
.mf-search-input-hidden {
   position: absolute;
   left: -999em;
}
.mf-select-search-values-area-container {
   display: none;
   margin-top: 4px;
   width: 100%;
}
.mf-select-search-values-area {
   display: flex;
   flex-direction: row;
   justify-content: flex-start;
   flex-wrap: wrap;
   background-color: #eee;
   border-radius: 6px;
   padding: 3px;
   width: 100%;
}
.mf-select-search-values-area > div {
   margin: 1px;
}
/* List */
.mf-list-element {
   display: none;
   position: absolute;
   box-shadow: 1px 1px 8px 0px #0005;
   background-color: #1b1b1b;
   border-radius: 6px;
   max-height: 200px;
   overflow: hidden;
   overflow-y: auto;
   padding: 6px 0;
   z-index: 500;
}
.mf-list-item {
   font-family: 'Roboto-Regular';
   white-space: nowrap;
   text-overflow: ellipsis;
   line-height: 32px;
   overflow: hidden;
   font-size: 16px;
   cursor: pointer;
   padding: 0 8px;
   height: 32px;
   width: 100%;
   color: #eee;
}
.mf-list-item:hover {
   background-color: #2b2b2b;
}
.mf-list-selected {
   background-color: #6400c3;
}
.mf-list-hidden {
   visibility: hidden;
   min-height: 0px !important;
   height: 0px !important;
}
.mf-list-no-data-item,
.mf-list-no-matches {
   line-height: 32px;
   font-size: 16px;
   cursor: default;
   padding: 0 8px;
   height: 32px;
   width: 100%;
   color: #9e9e9e;
   font-family: 'Roboto-Regular';
}
.mf-list-no-matches {
   display: none;
}
/* Counter */
.mf-counter-element {
   display: inline-flex;
   flex-direction: row;
   align-items: center;
}
.mf-counter-button {
   border: 2px solid #0362d9;
   line-height: 26px;
   cursor: pointer;
   font-size: 20px;
   height: 28px;
   width: 28px;
}
.mf-counter-button:active {
   background-color: #ecf9ff;
}
.mf-counter-decrement {
   border-top-left-radius: 6px;
   border-bottom-left-radius: 6px;
   border-right: none;
}
.mf-counter-increment {
   border-top-right-radius: 6px;
   border-bottom-right-radius: 6px;
   border-left: none;
}
.mf-counter-input {
   border: 2px solid #0362d9;
   line-height: 28px;
   font-size: 16px;
   padding: 0 6px;
   height: 28px;
   width: 60px;
}
/* SelectBox */
.mf-select-box-result-container {
   position: fixed;
   box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.4);
   border-radius: 4px;
   z-index: 9999;
   width: 100%;
   top: 34px;
}
/* SelectBox V2 */
.mf-selectbox-element {
   background-color: #3a3b3c;
   border-radius: 6px;
}
.mf-selectbox-input-wrapper {
   background-color: transparent;
   position: relative;
   width: 100%;
}
.mf-selectbox-input {
   font-family: 'Roboto-Regular';
   background-color: transparent;
   border: 2px solid #3a3b3c;
   padding: 0 32px 0 8px;
   border-radius: 6px;
   line-height: 30px;
   min-height: 32px;
   font-size: 16px;
   height: 32px;
   width: 100%;
   z-index: 8;
}
.mf-selectbox-input-placeholder {
    position: absolute;
    font-family: 'Roboto-Regular';
    border: 2px solid #3a3b3c;
    background-color: #3a3b3c;
    padding: 0 32px 0 8px;
    border-radius: 6px;
    line-height: 30px;
    min-height: 32px;
    font-size: 16px;
    height: 32px;
    width: 100%;
    color: #888;
    z-index: 0;
    left: 0px;
    top: 0px;
}
.mf-selectbox-disabled {
   pointer-events: none;
   opacity: 0.6;
}
.mf-selectbox-list-container {
   display: none;
   position: fixed;
   box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.4);
   background-color: #1b1b1b;
   border-radius: 6px;
   margin-top: 2px;
   z-index: 9999;
   padding: 6px;
}
.mf-selectbox-panel {
   margin-bottom: 8px;
   width: 100%;
}
.mf-selectbox-search { width: 100% }
.mf-selectbox-toggle-group {
   border-radius: 40px;
   line-height: 26px;
   margin-left: 8px;
   min-height: 26px;
   min-width: 26px;
   cursor: pointer;
   height: 26px;
   width: 26px;
}
.mf-selectbox-list-control {
   position: relative;
   height: 100%;
   width: 100%;
}
/* ExtButton (кнопка з меню) */
.mf-ext-button-element,
.mf-ext-button {
   display: inline-flex;
   flex-direction: row;
   align-items: center;
   line-height: 32px;
   height: 32px;
}
.mf-ext-button-element {
   position: relative;
   border-radius: 32px;
}
.mf-ext-button,
.mf-ext-button-menu-button {
   background-color: #0362d9;
}
.mf-ext-button {
   border-top-left-radius: 32px;
   border-bottom-left-radius: 32px;
   text-align: center;
   padding-left: 16px;
   padding-right: 8px;
   width: 100%;
   color: #fff;
}
.mf-ext-button-with-text {
   font-family: 'Roboto-Regular';
   font-size: 14px;
}
.mf-ext-button-inner-span {
   font-family: 'Roboto-Regular';
   text-align: center;
   line-height: 32px;
   font-size: 14px;
   height: 32px;
   width: 100%;
   color: #fff;
}
.mf-ext-button-menu-button {
   box-shadow: inset 1px 0px 0px 0px #1870de;
   border-top-right-radius: 32px;
   border-bottom-right-radius: 32px;
   text-align: left;
   text-indent: 6px;
   line-height: 32px;
   min-width: 32px;
   height: 32px;
   width: 32px;
   color: #fff;
}
.mf-ext-button:hover,
.mf-ext-button-menu-button:hover {
   background-color: #1870de;
}
.mf-ext-button-menu-container {
   display: none;
   position: absolute;
   background-color: #fff;
   border-radius: 6px;
   top: 32px;
}
.mf-ext-button-menu-item {
   font-size: 14px;
}
/* NumberBox */
.mf-number-box-element {
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
   position: relative;
   align-items: center;
   width: 100%;
}
.mf-number-box-input {
   font-family: 'Roboto-Regular';
   border: 2px solid #3f3f3f;
   background-color: #3a3b3c;
   display: inline-block;
   border-radius: 6px;
   padding-right: 34px;
   padding-left: 8px;
   font-weight: 500;
   overflow: hidden;
   font-size: 16px;
   outline: none;
   padding: 0 8px;
   height: 32px;
   width: 100%;
   color: #eee;
}
/* Уточнення */
.mf-clarify-element {
   display: flex;
   flex-direction: row;
   align-items: center;
   flex-wrap: nowrap;
   position: relative;
   height: 32px;
   width: 100%;
}
.mf-clarify-input {
   width: calc(100% - 72px);
   line-height: 26px;
   font-size: 14px;
   padding: 0 8px;
   height: 26px;
   border: none;
}
.mf-clarify-input-hidden {
   position: absolute;
   left: -999em;
}
.mf-clarify-actions {
   display: inline-block;
   border-left: 1px solid #777;
   line-height: 32px;
   min-height: 30px;
   min-width: 36px;
   cursor: pointer;
   height: 30px;
   width: 36px;
}
.mf-clarify-clear {
   font-size: 16px;
}
.mf-clarify-button {
   font-size: 20px;
}
.mf-clarify-top-bar {
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: space-between;
   border-bottom: 1px solid #777;
   background-color: #232323;
   overflow: hidden;
   padding: 0 4px;
   height: 38px;
   width: 100%;
}
.mf-clarify-close-map,
.mf-clarify-apply-coords {
   border-radius: 40px;
   line-height: 32px;
   min-height: 32px;
   min-width: 32px;
   font-size: 24px;
   cursor: pointer;
   height: 32px;
   width: 32px;
   color: #ddd;
}
.mf-clarify-map-buttons-block {
   position: relative;
   display: inline-flex;
   align-self: center;
}
.mf-clarify-search-result-container {
   display: none;
   position: fixed;
   transition: visibility 0s, opacity 0.3s linear;
   box-shadow: 0 2px 8px 1px rgba(0, 0, 0, 0.2);
   background-color: #1b1b1b;
   border-radius: 6px;
   visibility: hidden;
   overflow: hidden;
   z-index: 996;
   height: auto;
   opacity: 0;
   left: auto;
   top: auto;
}
.mf-clarify-filter-block {
   display: flex;
   flex-direction: row;
   align-items: center;
   background-color: #242424;
   padding: 16px;
}
.mf-clarify-regions-block,
.mf-clarify-search-result-block {
   background-color: #1b1b1b;
   max-height: 230px;
   overflow-x: hidden;
   overflow-y: auto;
}
.mf-clarify-result-box {
   background-color: #1b1b1b;
}
.mf-clarify-search-result-list {
   max-height: 200px;
   background-color: #1b1b1b;
   overflow: hidden;
   overflow-y: auto;
   padding: 4px 0;
   width: 100%;
}
.mf-clarify-search-result-item {
   line-height: 36px;
   min-height: 36px;
   cursor: pointer;
   padding: 0 8px;
   height: 36px;
   margin: 0;
}
.mf-clarify-search-result-item:hover {
   background-color: #262626;
   color: #38f;
}
.mf-clarify-search-settings-menu-button {
   margin-right: 8px;
   min-height: 30px;
   min-width: 30px;
   font-size: 20px;
   height: 30px;
   width: 30px;
}
.mf-clarify-main-actions-menu-button {
   border-radius: 0px;
   min-height: 30px;
   min-width: 30px;
   font-size: 20px;
   height: 30px;
   width: 30px;
}
.mf-clarify-search-result-item-icon {
   min-height: 32px;
   min-width: 32px;
   height: 32px;
   width: 32px;
   color: #bbb;
}
.mf-clarify-search-result-item-text {
   line-height: 32px;
   min-height: 32px;
   height: 32px;
}
.mf-clarify-null-island {
   background-color: #8c4847;
}
/* TagBox */
.mf-tag-box-element {
   position: relative;
   display: flex;
   flex-direction: column;
   width: 100%;
}
.mf-tags-container {
   position: relative;
   display: flex;
   flex-direction: row;
   align-items: center;
   width: 100%;
}
.mf-tag-box {
   display: flex;
   flex-direction: row;
   align-items: center;
   flex-wrap: nowrap;
   background-color: #fff;
   border: 2px solid #ddd;
   position: relative;
   border-radius: 6px;
   overflow: hidden;
   height: 32px;
   width: 100%;
}
.mf-tag-box > div {
   margin-left: 4px;
}
.mf-tag-box-list-container {
   display: none;
   position: fixed;
   box-shadow: 0 4px 8px 1px rgba(0, 0, 0, 0.4);
   border-radius: 4px;
   visibility: hidden;
   overflow: hidden;
   overflow-y: auto;
   z-index: 9999;
   width: 100%;
   opacity: 0;
   height: auto;
   top: auto;
}
.mf-tag-box-list {
   background-color: #fff;
   overflow-y: auto;
   padding: 6px 0;
}
.mf-tag-box-button-panel {
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: space-evenly;
   background-color: #eee;
   height: 28px;
}
.mf-tag-box-button {
   border-radius: 32px;
   line-height: 20px;
   cursor: pointer;
   padding: 0 8px;
   height: 20px;
}
.mf-tag-box-button:hover {
   background-color: #d7d7d7;
   color: #000;
}
/* DatePicker */
.mf-datepicker-element {
   background-color: #121212;
   width: 248px;
}
.mf-datepicker-top-panel {
   min-height: 40px;
   padding: 0 8px;
   height: 40px;
   width: 100%;
}
.mf-datepicker-button {
   display: inline-block;
   background-color: #0362d9;
   border-radius: 32px;
   line-height: 28px;
   font-weight: bold;
   min-height: 28px;
   min-width: 28px;
   cursor: pointer;
   height: 28px;
   width: 28px;
   color: #eee;
}
.mf-datepicker-button-reset,
.mf-datepicker-button-today {
   margin-left: 8px;
}
.mf-datepicker-button-today {
   font-weight: normal;
}
.mf-datepicker-timepicker-container {
   min-height: 40px;
   height: 40px;
}
.air-datepicker {
   --adp-color: #eee;
   --adp-color-other-month: #646464;
   --adp-border-color-inner: #454545;
   --adp-border-color: #454545;
   --adp-border-color-inline: #454545;
   --adp-cell-border-radius: 32px;
   --adp-background-color-hover: #242424;
   --adp-background-color-active: #000;
   background-color: #121212;
   border-color: #1b1b1b;
}
.air-datepicker .-focus- {
   background-color: #000;
}
/* DateTimeBox */
.mf-datetime-box-element {
   flex-wrap: nowrap;
   justify-content: flex-start;
   position: relative;
   padding-left: 8px;
   cursor: pointer;
   height: 32px;
   width: 100%;
}
.mf-datetime-box-input {
   cursor: pointer;
   font-size: 16px;
   outline: none;
   border: none;
   height: 28px;
   width: 100%;
}
.mf-datetime-box-clear,
.mf-datetime-box-icon {
   line-height: 32px;
   min-height: 32px;
   min-width: 32px;
   height: 32px;
   width: 32px;
}
.mf-datetime-box-clear {
   font-size: 16px;
}
/* Календар */
.mf-calendar-component {
   background-color: #121212;
   font-family: 'Roboto-Regular';
   --calendar-header-button-padding: 8px 12px;
   --calendar-header-font-size: 14px;
   --calendar-base-font-size: 14px;
   --calendar-month-item-gap: 12px;
   --calendar-grid-gap: 4px;
   --calendar-padding: 8px;
   padding: var(--calendar-padding);
   border-radius: 6px;
}
.mf-calendar-disabled {
   pointer-events: none;
   cursor: not-allowed;
   opacity: 0.6;
}
.mf-calendar-day-names {}
.mf-calendar-day-name {
   font-size: calc(var(--calendar-base-font-size) * 0.8);
   padding: var(--calendar-padding) 0;
   font-weight: 600;
   color: #718096;
}
.mf-calendar-days-grid {
   display: grid;
   grid-template-columns: repeat(7, 1fr);
   gap: var(--calendar-grid-gap);
   text-align: center;
}
.mf-calendar-months-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: var(--calendar-month-item-gap);
   text-align: center;
   margin: auto 0;
}
.mf-calendar-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-bottom: var(--calendar-padding);
}
.mf-calendar-prev-button,
.mf-calendar-next-button {
   /*padding: var(--calendar-header-button-padding);*/
   font-size: var(--calendar-base-font-size);
   transition: background-color 0.2s ease;
   border-radius: 80px;
   line-height: 32px;
   font-weight: 600;
   min-height: 32px;
   min-width: 32px;
   cursor: pointer;
   font-size: 24px;
   color: #92a9d0;
   height: 32px;
   width: 32px;
}
.mf-calendar-month-year {
   flex-grow: 1;
   padding: var(--calendar-header-button-padding);
   font-size: var(--calendar-header-font-size);
   transition: background-color 0.2s ease;
   border-radius: 6px;
   text-align: center;
   font-weight: 600;
   cursor: pointer;
   color: #92a9d0;
}
.mf-calendar-buttons-panel {
   display: flex;
   justify-content: space-around;
   gap: var(--calendar-padding);
   margin-top: auto;
   min-height: 32px;
   height: 32px;
}
.mf-calendar-today-button,
.mf-calendar-clear-button {
   /*padding: var(--calendar-header-button-padding);*/
   border-radius: 6px;
   line-height: 32px;
   min-height: 32px;
   padding: 0 12px;
   cursor: pointer;
   color: #3b82f6;
   height: 32px;
}
.mf-calendar-day-name {}
.mf-calendar-day,
.mf-calendar-month-item {
   display: flex;
   align-items: center;
   justify-content: center;
   transition: background-color 0.2s ease, color 0.2s ease;
   font-size: var(--calendar-base-font-size);
   padding: var(--calendar-padding) 0;
   font-weight: 500;
   cursor: pointer;
   color: #eee;
}
.mf-calendar-day-empty {
   background-color: transparent;
   cursor: default;
}
.mf-calendar-day {
   border-radius: 80px;
   line-height: 26px;
   min-height: 26px;
   min-width: 26px;
   height: 26px;
   width: 26px;
}
.mf-calendar-other-month { border-radius: 6px }
.mf-calendar-today {
   outline: 2px solid #1ca8dd;
   font-weight: 600;
   color: #6085ff;
}
.mf-calendar-selected {
   background-color: #3b82f6;
   outline: none;
   font-weight: 600;
   color: #fff;
}
.mf-calendar-month-item { border-radius: 6px }
.mf-calendar-current-month {
   background-color: #bfdbfe;
   font-weight: 600;
   color: #1e40af;
}
.mf-calendar-selected-month,
.mf-calendar-selected-start,
.mf-calendar-selected-end {
   background-color: #2563eb;
   font-weight: 600;
   color: #fff;
}
.mf-calendar-in-range {
   background-color: #93c5fd;
   color: #1e40af;
}
.mf-calendar-other-month {
   border-radius: 80px;
   line-height: 26px;
   min-height: 26px;
   min-width: 26px;
   color: #a0aec0;
   height: 26px;
   width: 26px;
}
.mf-calendar-day:not(.mf-calendar-selected, .mf-calendar-today):hover,
.mf-calendar-month-item:hover { background-color: #2b3951 } 
/* TimePicker (Аналоговий годинник) */
.mf-time-picker-element {
   display: flex;
   flex-direction: column;
}
.mf-time-picker-wrapper { position: relative; width: 320px; height: 320px; font-family: system-ui, sans-serif; }
.mf-time-picker-svg { width: 100%; height: 100%; display: block; user-select: none; -webkit-user-select: none; touch-action: none; }
.mf-time-picker-face { fill: #fff; stroke: #e5e7eb; stroke-width: 1; }
.mf-time-picker-center-dot { fill: #111827; }
.mf-time-picker-mark { stroke: #9ca3af; stroke-width: 2; stroke-linecap: round; }
.mf-time-picker-mark-hour { stroke-width: 3; }
.mf-time-picker-hand { stroke: #111827; stroke-linecap: round; transition: stroke-width .12s ease; }
.mf-time-picker-hand-hour { stroke-width: 5; }
.mf-time-picker-hand-minute { stroke-width: 3; }
.mf-time-picker-hand-second { stroke: #ef4444; stroke-width: 1; transition: none; }
.mf-time-picker-hand-grab { cursor: grab; }
.mf-time-picker-hand-grabbing { cursor: grabbing; }
.mf-time-picker-hand-active { stroke-width: 7; }
.mf-time-picker-ring { fill: none; stroke: #f3f4f6; stroke-width: 24; }
.mf-time-picker-inner-ring { fill: none; stroke: #e2e8f0; stroke-width: 20; }
.mf-time-picker-num {
   dominant-baseline: middle;
   text-anchor: middle;
   user-select: none;
   font-size: 12px;
   cursor: pointer;
   fill: #374151;
   height: 20px;
   width: 20px;
}
.mf-time-picker-num:hover { stroke: #00bcd4; fill: #111827; }
.mf-time-picker-num-24 { fill: #4b5563; font-size: 10px; }
.mf-time-picker-num-24:hover { fill: #111827; }
.mf-time-picker-marker { fill: #6366f1; stroke: #fff; stroke-width: 2; cursor: grab; }
.mf-time-picker-marker-active { fill: #4f46e5; }
.mf-time-picker-marker-second { fill: #ef4444; }
.mf-time-picker-marker-text {
   font-family: 'Roboto-Regular';
   dominant-baseline: middle;
   pointer-events: none;
   text-anchor: middle;
   font-weight: bold;
   font-size: 12px;
   fill: #fff;
}
.mf-time-picker-panel {
   min-height: 26px;
   padding: 0 16px;
   height: 26px;
   width: 100%;
}
.mf-time-picker-label {
   font-family: 'Mono Bold';
   background-color: #eee;
   border-radius: 6px;
   text-align: center;
   line-height: 26px;
   font-size: 24px;
   padding: 0 4px;
   color: #374151;
   height: 26px;
}
.mf-time-picker-toggle {
   display: inline-flex;
   flex-direction: row;
   background-color: #121212;
   border: 2px solid #9ca3af;
   border-radius: 6px;
   margin-left: auto;
   overflow: hidden;
   min-height: 26px;
   min-width: 64px;
   cursor: pointer;
   height: 26px;
   width: 76px;
}
.mf-time-picker-mode-am,
.mf-time-picker-mode-pm {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   font-family: 'Roboto-Regular';
   text-align: center;
   line-height: 24px;
   font-weight: 600;
   width: 38px;
}
.mf-time-picker-toggle-select { background-color: #00a4b9 }
.mf-datepicker-dial {
   height: 240px;
   width: 240px;
}
.mf-datepicker-timepicker-container-v2 {
   justify-content: center;
   margin-top: 8px;
   height: 100%;
}
/* Popover */
.mf-popover {
   position: absolute;
   box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
   transition: opacity 300ms ease-in-out;
   border: 1px solid #2a364d;
   background-color: #2a364d;
   border-radius: 0.5rem;
   pointer-events: none;
   padding: 1rem;
   z-index: 50;
   opacity: 0;
}
.mf-popover-is-visible {
   pointer-events: auto;
   opacity: 1;
}
.mf-popover-arrow-outer,
.mf-popover-arrow-inner {
   position: absolute;
   border-style: solid;
   height: 0;
   width: 0;
}
/* Загальні класи */
.mf-bottom-align { margin-bottom: 8px }
.mf-right-align { margin-left: auto }
.mf-left-align { margin-left: 8px }
.mf-top-align { margin-top: 8px }
.mf-next-16 { margin-left: 16px }
.mf-prev { margin-right: 8px }
.mf-next { margin-left: 8px }
.mf-rotate-90 {
   -webkit-transform: rotate(90deg);
      -moz-transform: rotate(90deg);
       -ms-transform: rotate(90deg);
        -o-transform: rotate(90deg);
           transform: rotate(90deg);
}

@media screen and (min-width: 800px) {
   .mf-datepicker-element {
      display: flex;
      flex-direction: row;
   }
   .mf-datepicker-dial { margin-top: 16px }
}