@font-face {
    font-family: 'Nunito';
    font-weight: normal;
    src: url('/font/Nunito-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'Nunito';
    font-weight: bold;
    src: url('/font/Nunito-Bold.ttf') format('truetype');
}

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    font-family: 'Nunito', sans-serif;
}

/* Custom fonts */
.x-body {
    font-family: 'Nunito', sans-serif;
}
.x-grid-cell {
    font-family: 'Nunito', sans-serif;
}
.x-form-field {
    font-family: 'Nunito', sans-serif;
}
.x-grid-empty {
    font-family: 'Nunito', sans-serif;
}
.x-toolbar-text {
    font-family: 'Nunito', sans-serif;
}
.x-form-cb-label {
    font-family: 'Nunito', sans-serif;
}
.x-column-header {
    font-family: 'Nunito', sans-serif;
}
.x-form-item-label {
    font-family: 'Nunito', sans-serif;
}
.x-panel-body-default {
    font-family: 'Nunito', sans-serif;
}
.x-form-display-field {
    font-family: 'Nunito', sans-serif;
}
.x-fieldset-header-text {
    font-family: 'Nunito', sans-serif;
}
.x-grid-row-summary .x-grid-cell {
    font-family: 'Nunito', sans-serif;
}
.x-btn-default-small .x-btn-inner,
.x-btn-default-medium .x-btn-inner,
.x-btn-default-large .x-btn-inner{
    font-family: 'Nunito', sans-serif;
}
.x-panel-header-text-container-default {
    font-family: 'Nunito', sans-serif;
}
.x-grouptabpanel .x-grouptab .x-grid-cell-inner {
    font-family: 'Nunito', sans-serif;
}
.x-window-header-text-container-default {
    font-family: 'Nunito', sans-serif;
}
.x-boundlist-item {
    font-family: 'Nunito', sans-serif;
}

/* Remove blue thick outline border for input fields and links in Firefox */
input {
    outline: none;
}
a {
    outline: none;
}

@font-face {
    font-family: 'Twemoji';
    src: url('/font/Twemoji.Mozilla.ttf') format('truetype');
}

i.flag {
    font-family: 'Twemoji';
    font-style: normal;
}

/* Fixes */
.x-mask-msg {
    z-index: 1000; /* Default: 20001 (?) */
}

/* Заголовок приложения */

div#header {
    width: 100%;
    height: 42px;
    display: flex;
    padding-right: 5px;
    flex-direction: row;
    background-color: #888888;
}

div#header .center {
    flex-grow: 1;
    align-self: center;
    text-align: center;
}

div#header .right {
    align-content: center;
}

div#header .center span.header {
    color: white;
    font-size: 16pt;
}

/* Icons */

.size-16x16 {
    background-size: 16px 16px;
}

.icon-plus-16 {
    background-image: url(/img/32/list-add.png);
    background-size: 16px 16px;
}

.icon-logs-24 {
    background-image: url(/img/64/system-monitor.png) !important;
    background-size: 24px 24px;
}

.icon-accounts-24 {
    background-image: url(/img/64/preferences-system.png) !important;
    background-size: 24px 24px;
}

.icon-agents-24 {
    background-image: url(/img/64/system-users.png) !important;
    background-size: 24px 24px;
}

.icon-gateways-24 {
    background-image: url(/img/64/system-switch-user-icon.png) !important;
    background-size: 24px 24px;
}

.icon-merchants-24 {
    background-image: url(/img/64/resource-group-icon.png) !important;
    background-size: 28px 28px;
    background-position: -3px -5px;
}

.icon-information-24 {
    background-image: url(/img/64/data-information.png) !important;
    background-size: 24px 24px;
}

.icon-transactions-24 {
    background-image: url(/img/64/kspread.png) !important;
    background-size: 24px 24px;
}

.icon-exchange-rate-24 {
    background-image: url(/img/128/accessories-calculator.png) !important;
    background-size: 24px 24px;
}

.icon-fee-rate-24 {
    background-image: url(/img/128/kchart.png) !important;
    background-size: 24px 24px;
}

.icon-reports-24 {
    background-image: url(/img/64/charm.png) !important;
    background-size: 24px 24px;
}

.icon-payments-24 {
    background-image: url(/img/64/kwalletmanager.png) !important;
    background-size: 24px 24px;
}

.icon-stats-24 {
    background-image: url(/img/64/office-chart-area.png) !important;
    background-size: 24px 24px;
}

.icon-control-24 {
    background-image: url(/img/64/irc-operator-icon.png) !important;
    background-size: 24px 24px;
}

/* Main panel style (GroupTabPanel) */

.x-grouptabpanel {
    background-color: #888;
    border: solid 5px #888;
    border-top: 0;
}

.x-grouptabbar .x-panel-body {
    background-color: initial;
}

.x-grouptabbar .x-grid-cell-inner {
    color: #fff;
}

.x-grouptabbar .x-grouptab-cell .x-grid-cell-inner {
    cursor: pointer;
    padding-left: 6px;
}

.x-grouptabbar .x-active-tab {
    border-top-left-radius: 0.5em;
    border-bottom-left-radius: 0.5em;
}

.x-grouptabbar .x-active-tab .x-grid-cell-inner {
    background-color: initial;
}

.x-grouptabbar .x-grouptab-cell .x-tree-node-text {
    top: 9px;
    position: absolute;
    padding-left: 8px;
}

.x-grouptabbar .x-grouptab .x-tree-icon-parent {
    width: 24px;
    display: initial;
    filter: drop-shadow(1px 1px 1px #333);
}

.x-grouptabpanel > .x-box-inner > .x-box-target > .x-grouptabcontainer {
    padding: 5px;
}

/* ExtJS - Menu */

.x-menu {
    border: none;
}

.x-menu-body {
    border: none;
}

/* ExtJS - Tab bar */

.x-tab-bar-default {
    background-color: transparent;
}

/* ExtJS - Splitter */

.x-splitter {
    background-color: #fff;
}

.x-splitter-vertical {
    background-size: 5px;
    background-image: url(/img/extjs/splitter-vr.svg);
    background-repeat: no-repeat;
    background-position: center;
}

.x-layout-split-top {
    background-image: none;
}

.x-splitter-horizontal {
    background-size: contain;
    background-image: url(/img/extjs/splitter-hr.svg);
    background-repeat: no-repeat;
    background-position: center;
}
.x-splitter-horizontal.x-splitter-collapsed {
    background-position-y: 0.5px;
}
.x-splitter-horizontal.x-splitter-collapsed .x-layout-split-top {
    background: none;
}

.x-form-checkbox {
    background-size: 30px;
    background-image: url(/img/extjs/checkbox@2x.png);
}

.x-grid-checkcolumn {
    background-size: 30px;
    background-image: url(/img/extjs/checkbox@2x.png);
}

.x-form-trigger.x-form-arrow-trigger {
    background-image: url(/img/extjs/trigger@2x.png);
    background-size: auto 22px;
}

.x-grid-row-checker {
    background-image: url(/img/extjs/checkbox@2x.png);
    background-size: auto 30px;
}

.x-column-header-checkbox .x-column-header-text {
    background-image: url(/img/extjs/checkbox@2x.png);
    background-size: auto 30px;
}

.x-form-radio {
    transform: rotate(1deg);
    background-image: url(/img/extjs/radio@2x.png);
    background-size: 30px 30px;
}

.x-form-file-wrap .x-form-text {
    color: #000;
}

/* ExtJS - Tool icons */

.x-tool .x-tool-img {
    opacity: 1.0;
}

.x-tool-img {
    margin-left: -0.5px;
}

.x-btn-icon-el.x-btn-glyph {
    left: 0.5px;
}

.x-tool-close {
    background-size: 16px;
    background-image: url(/img/extjs/tool-sprites@2x.png);
}
.x-tool-erase {
    background-size: 16px;
    background-image: url(/img/svg/erase-white.svg);
    background-repeat: no-repeat;
    background-position: 0 0;
}
.x-tool-gear {
    background-size: 16px;
    background-image: url(/img/svg/gear-white.svg);
    background-repeat: no-repeat;
    background-position: 0 0;
}
.x-tool-refresh {
    background-size: 16px;
    background-image: url(/img/svg/refresh.svg);
    background-repeat: no-repeat;
    background-position: 0 0;
}

.x-tool-expand-top {
    background-size: 16px;
    background-image: url(/img/svg/collapse-white.svg);
    background-repeat: no-repeat;
    background-position: 0 0;
}

.x-tool-collapse-top {
    background-size: 16px;
    background-image: url(/img/svg/collapse-white.svg);
    background-repeat: no-repeat;
    background-position: 0 0;
}

.x-tool-expand-bottom {
    background-size: 16px;
    background-image: url(/img/svg/expand-white.svg);
    background-repeat: no-repeat;
    background-position: 0 0;
}

.x-tool-collapse-bottom {
    background-size: 16px;
    background-image: url(/img/svg/expand-white.svg);
    background-repeat: no-repeat;
    background-position: 0 0;
}

.x-fieldset .x-tool-toggle {
    background-size: 16px;
    background-image: url(/img/svg/collapse-tool-top.svg);
    background-repeat: no-repeat;
    background-position: 0 0;
}

.x-fieldset-collapsed .x-tool-toggle {
    background-size: 16px;
    background-image: url(/img/svg/collapse-tool-bottom.svg);
    background-repeat: no-repeat;
    background-position: 0 0;
}

.x-fieldset .x-tool-over .x-tool-toggle {
    filter: opacity(50%);
    background-position: 0 0;
}

/* ExtJS - Drop down button */

.x-btn-default-small .x-btn-arrow {
    background-image: url(/img/svg/default-small-arrow.svg);
}

/* ExtJS - Paging toolbar */

.x-tbar-loading {
    background-size: 16px;
    background-image: url(/img/extjs/paging/refresh-grey.png);
}
.x-tbar-page-prev {
    background-size: 16px;
    background-image: url(/img/extjs/paging/page-prev.png);
}
.x-tbar-page-next {
    background-size: 16px;
    background-image: url(/img/extjs/paging/page-next.png);
}
.x-tbar-page-last {
    background-size: 16px;
    background-image: url(/img/extjs/paging/page-last.png);
}
.x-tbar-page-first {
    background-size: 16px;
    background-image: url(/img/extjs/paging/page-first.png);
}

.x-form-clear-trigger {
    background-image: url(/img/extjs/clear-trigger@2x.png);
    background-size: auto 22px;
}

/* ExtJS - Invalid field marker */

.x-form-invalid-icon {
    background-image: url(/img/extjs/exclamation@2x.png);
    background-size: 16px;
}
.x-tip-body-form-invalid {
    background-image: url(/img/extjs/exclamation@2x.png);
    background-size: 16px;
}

/* ExtJS - Ext.MessageBox icons */

.x-message-box-info {
    background-size: 32px 32px;
    background-image: url(/img/64/dialog-information.png);
}

.x-message-box-error {
    background-size: 32px 32px;
    background-image: url(/img/64/dialog-error.png);
}

.x-message-box-warning {
    background-size: 32px 32px;
    background-image: url(/img/64/dialog-warning.png);
}

.x-message-box-question {
    background-size: 32px 32px;
    background-image: url(/img/64/system-help.png);
}

.x-message-box-forbidden {
    background-size: 32px 32px;
    background-image: url(/img/svg/shield-warning.svg);
    background-repeat: no-repeat;
}

/* ExtJS - Fix close button */

.x-tool.x-box-item.x-tool-default.x-tool-after-title {
    transform: translate(-1px, 0px);
}

.x-btn.x-btn-default-small span.x-btn-inner {
    line-height: 16px;
}

.x-btn.x-toolbar-item {
    margin-bottom: 2px;
}

/* Toolbar */

.x-toolbar.x-docked-top {
    /*border-bottom-width: 1px !important;*/
}

/* ExtJS - Fix bottom toolbar height & padding */

.x-toolbar.x-docked-bottom {
    /*margin-bottom: 1px;*/
    /*padding-bottom: 5px;*/
}

/* HtmlComboBox */

.x-form-text-wrap {
    position: relative;
}

.x-form-field-overlay {
    bottom: 0;
    margin-bottom: 2px;
    position: absolute;
    width: calc(100% - 22px);
    height: 20px !important;
    line-height: 13px;
    background-color: #ffffff;
}
.x-field.extra-trigger .x-form-field-overlay {
    width: calc(100% - 44px);
}

.x-form-trigger-wrap .x-form-text {
    height: 21px;
}
.x-form-required-field-overlay {
    top: 1px;
    position: absolute;
    width: calc(100% - 22px);
    overflow: hidden;
    white-space: nowrap;
}
.x-field.x-form-readonly .x-form-required-field-overlay {
    width: calc(100% - 2px);
}

.x-boundlist-item {
    overflow: hidden;
    white-space: nowrap;
}

/* Ux.Notification */

.ux-notification-icon-information {
    background-size: 16px 16px;
    background-image: url(/img/64/dialog-information.png);
}

.ux-notification-icon-error {
    background-size: 16px 16px;
    background-image: url(/img/64/dialog-error.png);
}

.ux-notification-window.x-window {
    background-color: #3892D3;
}

.ux-notification-window .x-window-body {
    color: #fff;
    background-color: #3892d3;
    padding: 5px 5px 5px 5px;
}

.ux-notification-window .x-window-header {
    padding-bottom: 0;
}

.ux-notification-window .x-window-header .x-header-text i.icon {
    font-size: 16px;
}
.ux-notification-window .x-window-header .x-header-text span.title {
    vertical-align: top;
    line-height: 18px;
}

.x-form-checkboxgroup.no-padding .x-form-checkboxgroup-body {
    padding: 0;
}

/* Custom styles */

a:visited:not([role=button]) {
    color: blue;
}

.tag {
    padding: 0 2px 1px 2px;
    font-weight: bold;
    border-radius: 0.25rem;
}

.tag-red {
    color: #fff;
    background-color: #BE0202;
}

.tag-orange {
    color: #fff;
    background-color: #EC7231;
}

.tag-green {
    color: #fff;
    background-color: #37A42C;
}

.tag-black {
    color: #fff;
    background-color: #000;
}

.opacity-1 {
    opacity: 1.0 !important;
}

.color-grey {
    color: grey;
}

.font-weight-bold {
    font-weight: bold;
}

.font-weight-semi-bold {
    font-weight: 550;
}

.font-style-italic {
    font-style: italic;
}

.tool-opacity-1 .x-tool-img {
    opacity: 1.0;
}

.x-panel.header-border-blue .x-grid-header-ct {
    border-color: #157fcc;
}

.x-column-header-sort-ASC .x-column-header-text {
    background-size: 16px 16px;
    background-image: url(/img/extjs/sort_asc.svg);
}

.x-column-header-sort-DESC .x-column-header-text {
    background-size: 16px 16px;
    background-image: url(/img/extjs/sort_desc.svg);
}

.x-mask-msg-error div.x-mask-msg-text {
    padding: 37px 0 0;
    min-width: 40px;
    text-align: center;
    background-size: 32px 32px;
    background-image: url(/img/svg/icon-error.svg);
}
.x-mask-msg-info div.x-mask-msg-text {
    padding: 37px 0 0;
    min-width: 40px;
    text-align: center;
    background-image: url('/extjs/resources/ext-theme-neptune/images/shared/icon-info.png');
}
.x-mask-msg-shield div.x-mask-msg-text {
    padding: 37px 0 0;
    min-width: 40px;
    text-align: center;
    background-size: 32px 32px;
    background-image: url(/img/svg/shield-warning.svg);
}

.x-grid-cell.font-family-monospace .x-grid-cell-inner {
    font-size: 12px;
    font-family: "Iosevka Web", monospace;
    font-weight: 400;
    font-stretch: expanded;
}
.x-field.font-family-monospace .x-form-display-field {
    font-size: 12px;
    font-family: "Iosevka Web", monospace;
    font-weight: 400;
    font-stretch: expanded;
}

.tx-status-failed {
    color: #BE0202;
    font-weight: bold;
}

.vertically-centered-cells td.x-grid-cell {
    vertical-align: inherit;
}

span.currency-symbol {
    color: #37A42C;
    font-weight: bold;
}

.x-window-header {
    margin-left: -0.5px;
}

.x-grouptabpanel .x-tree-view {
    overflow-x: hidden !important;
}

.x-grouptabpanel .x-tree-view .x-grid-cell-inner {
    text-overflow: clip;
}

span.x-btn-glyph.icon-chevron-right {
    padding-left: 3px;
}

table.credit-card {
    border: 1px solid #bbb;
    padding: 10px;
    min-width: 300px;
    font-size: 15px;
    border-radius: 0.5rem;
    background-image: linear-gradient(-45deg, #bbb, #fff);
}
table.credit-card .first-line {
    display: flex;
    align-items: center;
}
table.credit-card .first-line span {
    padding-left: 5px;
}
table.credit-card .second-line {
    display: flex;
    justify-content: space-between;
}

table.credit-card tr:not(:first-child) td {
    /*text-align: right;*/
}

table.credit-card tr:first-child td {
    max-width: 300px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

table.credit-card td.number {
    font-weight: bold;
}

table.credit-card td img {
    vertical-align: sub; /*text-top*/
    padding-left: 0.5px;
}

table.credit-card tr:not(:last-child) td {
    padding-bottom: 1.75em;
}

.grid-show-overflow-x .x-grid-body .x-box-inner {
    overflow-x: auto;
}
.grid-show-overflow-x .x-grid-header-ct .x-box-inner {
    overflow: hidden;
}

.ex-rate-source-orange {
    color: #FF9900;
}

.ex-rate-source-green {
    color: #6AA84F;
}

.blue-border {
    border: 1px solid #157fcc;
}
.blue-border .x-grid-header-ct {
    border-left: none;
    border-right: none;
}
.blue-border .x-toolbar-docked-top {
    border-top: 0;
    border-left: 0;
}
.blue-border .x-toolbar-docked-bottom {
    border-left: 0;
    border-right: 0;
}
.blue-border .x-grid-body {
    border-left: none;
    border-right: none;
}
.blue-border .x-grid-body:last-child {
    border-bottom: none;
}
.blue-border .x-toolbar-docked-bottom {
    border-bottom: none;
}

.x-column-header.table-blue-header {
    background-color: #C9DAF8;
}
.x-column-header.table-yellow-header {
    background-color: #FFF2CD;
}
.x-grid-cell.cell-disabled {
    background-color: #eee;
}

.x-grid-row-over .x-grid-cell.cell-red {
    background-color: #F5A9A6;
}
.x-grid-row-selected .x-grid-cell.cell-red {
    background-color: #F08682;
}
.x-grid-cell.cell-red {
    background-color: #F9CCCA;
}
.x-grid-row-over .x-grid-cell.cell-green {
    background-color: #C5DDA9;
}
.x-grid-row-selected .x-grid-cell.cell-green {
    background-color: #B1D28F;
}
.x-grid-cell.cell-green {
    background-color: #D8E8C2;
}
.x-grid-row-over .x-grid-cell.cell-yellow {
    background-color: #FFF4B1;
}
.x-grid-row-selected .x-grid-cell.cell-yellow {
    background-color: #FFF299;
}
.x-grid-cell.cell-yellow {
    background-color: #FFF6C8;
}

/* Button Red */
.x-btn.button-red {
    border-color: #BF0303;
    background-image: linear-gradient(#FF8080, #E20800 50%, #E20800 51%, #E20800);
}
/* HSV, V - 20 */
.x-btn.x-btn-over.button-red {
    border-color: #9C0F0F;
    background-image: linear-gradient(#cc6666, #cc0000 50%, #cc0000 51%, #af0600);
}
/* HSV, V - 30 */
.x-btn.x-btn-pressed.button-red {
    border-color: #9C0F0F;
    background-image: linear-gradient(#b35a5a, #800000 50%, #800000 51%, #950500);
}

/* Button Orange */
.x-btn.button-orange {
    border-color: #EC7231;
    background-image: linear-gradient(#FFA500, #EC7231 50%, #EC7231 51%, #CE4912);
}
.x-btn.x-btn-over.button-orange {
    border-color: #b95926;
    background-image: linear-gradient(#cc8400, #b95926 50%, #b95926 51%, #9b370e);
}
.x-btn.x-btn-pressed.button-orange {
    border-color: #b95926;
    background-image: linear-gradient(#b37400, #9f4d21 50%, #9f4d21 51%, #822e0c);
}

.x-column-header-align-right .x-column-header-text {
    float: right;
    margin-right: 0;
}

.x-column-header.multiline .x-column-header-text {
    display: inline-block;
}

.x-docked-summary {
    background-color: #fff;
    border-bottom-color: silver;
}
.x-docked-summary-bottom {
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: none;
}
.x-docked-summary-bottom > div {
    border-top: 1px solid silver;
}
input[type="color"] {
    padding: 1px;
}
input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 1px;
}
.x-form-item-body.input-color-narrow input[type="color"] {
    height: 20px;
    vertical-align: -webkit-baseline-middle;
    vertical-align: -moz-middle-with-baseline;
}
.inline-button {
    display: inline-block;
    margin-left: 3px;
    background-color: lightgray;
    border-radius: 1rem;
    /*padding-top: 1px;*/
    padding-left: 2px;
    padding-right: 2px;
    padding-top: 1px;
    cursor: pointer;
    /*box-shadow: 1px 1px 1px #888;*/
    border: 1px solid #666;
}
.inline-button:hover {
    background-color: #eee;
}
.inline-button i {
    font-size: 90%;
}
.merchant-balance {
    margin-top: 15px;
    margin-bottom: 10px;
}
.merchant-chart-header {
    margin-top: 5px;
    margin-bottom: 5px;
    text-align: center;
}
.x-container.rounded-header {
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
}

tr.x-grid-row.not-active-payment .x-grid-cell {
    background-color: #ccc;
}
tr.x-grid-row-selected.not-active-payment .x-grid-cell {
    background-color: #aec7d9;
    backdrop-filter: saturate(50%);
}

/* Animations */
@-webkit-keyframes rotate /* Safari and Chrome */ {
    from {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@keyframes rotate {
    from {
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to {
        -moz-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
.animation-rotate:before {
    display: inline-block;
    transform-origin: 50% 57%;
    -webkit-animation: rotate 2s linear infinite;
    -moz-animation: rotate 2s linear infinite;
    animation: rotate 2s linear infinite;
}

/* JSON highlighting */
pre.json {
    margin-top: 0;
    margin-bottom: 0;
}
.json-string {
    color: #067D17;
}
.json-number {
    color: #1750EB;
}
.json-boolean {
    color: #0033B3;
}
.json-null {
    color: #0033B3;
}
.json-key {
    color: #871094;
}