:root {
    --base-foreground: #555;
    --base-foreground-focused: #5a41b4;
    --base-background: #f8f7fc;
    --base-background-focused: #e1d8fe;
    --base-border-color: #947aff;
    --base-separator-color: #eaeaea;
    --form-column-count: 2;
    --form-column-gap: 40px;
}

html, body {
    font-family: 'Roboto';
    font-size: 11px;
    interpolate-size: allow-keywords;
}

.dxbl-modal-body {
    font-family: 'Roboto';
    font-size: 11px;
    padding: 0 !important;
}

.no-select {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.hidden {
    display: none !important;
}

.disabled {
    pointer-events: none !important;
}

.dxbl-popup-cell {
    z-index: 999999 !important;
}

.dxbl-btn {
    --dxbl-btn-font-size: 1rem !important;
}

.dxbl-toast-accent-line {
    --dxbl-toast-accent-line-width: 5px !important;
}

.dxbl-toast-body {
    padding: 15px !important;
}

.dxbl-toast-icon-column,
.dxbl-toast-close-btn {
    padding: 0 !important;
}

    .dxbl-toast-icon-column svg,
    .dxbl-toast-close-btn svg {
        --dxbl-image-width: 1.5rem !important;
        --dxbl-image-height: 1.5rem !important;
    }

    .dxbl-toast-close-btn svg {
        margin: 4px;
    }

.dxbl-toast-header {
    font-size: 16px !important;
}

.dialogbox-text-copy .dxbl-toast-icon-column {
    display: flex;
    flex-direction: column;
    pointer-events: none;
}

    .dialogbox-text-copy .dxbl-toast-icon-column::after {
        content: "";
        display: inline-block;
        background-image: url('images/copy-gray.png');
        background-repeat: no-repeat;
        background-position: left;
        background-size: 1.5rem 1.4rem;
        width: 1.5rem !important;
        height: 1.5rem !important;
        margin-top: 5px;
        cursor: pointer;
        pointer-events: all;
    }

.dxbl-toast-text {
    font-size: 13px !important;
    word-wrap: break-word !important;
    overflow: hidden !important;
    display: -webkit-box !important;
    --dxbl-toast-line-clamp: 3;
    -webkit-box-orient: vertical !important;
    --dxbl-toast-text-line-height: 1.65rem !important;
}

.dxbl-toast-text-expanded {
    --dxbl-toast-line-clamp: 50;
}

.dxbl-toast-portal {
    overflow: hidden;
    max-height: 100vh;
    z-index: 9999999 !important;
}

.dialogbox .dxbl-modal-content {
    padding: 25px !important;
}

.dialogbox .dxbl-message-box-header {
    padding: 0 !important;
}

.dialogbox .dxbl-popup-header,
.dialogbox .dxbl-message-box-body {
    padding: 0 !important;
}

    .dialogbox .dxbl-popup-header span {
        font-size: 16px !important;
        padding: 5.5px 8.25px;
    }

    .dialogbox .dxbl-message-box-body span {
        font-size: 13px !important;
        padding: 5.5px 8.25px;
    }

.dialogbox .dxbl-btn {
    font-size: 13px;
    color: #5d5d5d;
    background-color: white !important;
    border-color: #c9c9c9 !important;
    outline: none !important;
    padding: 5px 17.5px;
}

    .dialogbox .dxbl-btn:hover {
        color: #5d5d5d !important;
        background-color: var(--base-background-focused) !important;
        border-color: var(--base-border-color) !important;
    }

.dialogbox-title-icon .dxbl-popup-header span {
    background-image: url('images/question.png');
    background-repeat: no-repeat;
    background-position: left;
    background-size: 25px 25px;
    padding-left: 30px;
    display: block;
}

.dialogbox-text-icon .dxbl-message-box-body span {
    background-image: url('images/question.png');
    background-repeat: no-repeat;
    background-position: left;
    background-size: 25px 25px;
    padding-left: 30px;
    display: block;
}

.animate-in {
    animation: fadeIn 0.2s ease-out forwards;
}

.animate-out {
    animation: fadeOut 0.2s ease-out forwards;
    pointer-events: none;
}

@keyframes fadeIn {
    from {
        transform: scale(0.85);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes fadeOut {
    from {
        transform: scale(1);
        opacity: 1;
    }

    to {
        transform: scale(0.85);
        opacity: 0;
    }
}

.input-combobox-dropdown > div {
    border: none !important;
    border-radius: 0 !important;
}

.input-combobox-dropdown li {
    font-size: 11px;
    min-height: 28px;
    color: #5d5d5d;
}

    .input-combobox-dropdown li:hover {
        color: #5d5d5d !important;
        background-color: var(--base-background-focused) !important;
    }

    .input-combobox-dropdown li.dxbl-list-box-item-selected:not(:hover) {
        color: #5d5d5d !important;
        background-color: #e2e2e2 !important;
    }

.input-combobox-dropdown-colored .dxbl-list-box-render-container > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > ul > li.dxbl-list-box-item-selected:not(.dxbl-list-box-item-disabled)::before {
    background-color: transparent !important;
}

.input-combobox-dropdown-colored ul {
    overflow: hidden !important;
}

.input-combobox-dropdown-colored li {
    padding: 0 !important;
    border-width: 0 !important;
}

    .input-combobox-dropdown-colored li .combobox-dropdown-item {
        align-content: center;
        min-height: 28px;
        padding: var(--dxbl-list-box-item-padding-y) var(--dxbl-list-box-item-padding-x);
    }

    .input-combobox-dropdown-colored li:hover .combobox-dropdown-item,
    .input-combobox-dropdown-colored li.dxbl-list-box-item-selected:not(:hover) .combobox-dropdown-item {
        background-color: var(--base-background-focused) !important;
    }

.dxbl-calendar {
    font-size: 13px !important;
}

    .dxbl-calendar .dxbl-btn-caption {
        font-size: 14px !important;
        padding: 3px !important;
    }

    .dxbl-calendar .dxbl-calendar-content {
        padding: 12px 18px !important;
    }

    .dxbl-calendar .dxbl-calendar-cell {
        padding: 6px !important;
    }

.dxbl-btn-dropdown-item {
    min-width: 110px !important;
    min-height: 37px !important;
}

    .dxbl-btn-dropdown-item button {
        padding-right: 8.25px !important;
    }

    .dxbl-btn-dropdown-item .dxbl-btn-caption {
        color: #5d5d5d !important;
        margin: 0 4.125px !important;
    }

    .dxbl-btn-dropdown-item:hover {
        background-color: var(--base-background-focused) !important;
    }

.action-button-icon {
    background-repeat: no-repeat;
    background-position: center;
    background-size: 16px 16px;
    width: 16px;
    height: 16px;
    outline: none;
    border: none;
}

.icon-send {
    background-image: url('images/icon-send.png');
}

.icon-print {
    background-image: url('images/icon-print.png');
}

.icon-import {
    background-image: url('images/icon-import.png');
}

.icon-export {
    background-image: url('images/icon-export.png');
}

.icon-export-excel {
    background-image: url('images/icon-export-excel.png');
}

.icon-export-pdf {
    background-image: url('images/icon-export-pdf.png');
}

.icon-new {
    background-image: url('images/plus-sign.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 18px 18px;
    width: 18px;
    height: 18px;
    outline: none;
    border: none;
}

.icon-delete {
    background-image: url('images/delete.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 15px 18px;
    width: 18px;
    height: 18px;
    outline: none;
    border: none;
}

.icon-save {
    background-image: url('images/save.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 18px 18px;
    width: 18px;
    height: 18px;
    outline: none;
    border: none;
}

.icon-copy {
    background-image: url('images/copy.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 18px 18px;
    width: 18px;
    height: 18px;
    outline: none;
    border: none;
}

.icon-khan-bank {
    background-image: url('images/khanbank.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 18px 18px;
    width: 18px;
    height: 18px;
    outline: none;
    border: none;
}

.icon-tdb-bank {
    background-image: url('images/tdb.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 18px 18px;
    width: 18px;
    height: 18px;
    outline: none;
    border: none;
}

.icon-khas-bank {
    background-image: url('images/has.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 18px 18px;
    width: 18px;
    height: 18px;
    outline: none;
    border: none;
}

.icon-golomt-bank {
    background-image: url('images/golomt.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 18px 18px;
    width: 18px;
    height: 18px;
    outline: none;
    border: none;
}

.dxbl-dropdown-body.input-combobox-dropdown li {
    font-size: 12px;
}

.combobox-icon {
    background-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    background-position: center center;
    background-color: currentColor;
    height: 14px;
    width: 14px;
    opacity: 70%;
}

.combobox-icon-add {
    -webkit-mask-image: url('images/combobox-add.svg');
    mask-image: url('images/combobox-add.svg');
}

.combobox-auto-hide-btn .combobox-action-btn {
    display: none !important;
    border: none;
}

.combobox-auto-hide-btn:focus-within .combobox-action-btn {
    display: inline-flex !important;
}

.combobox-colored .dxbl-btn {
    --dxbl-btn-bg: transparent !important;
}

.combobox-colored .dxbl-btn-group {
    background-color: transparent !important;
}

.dxbl-modal > .dxbl-modal-back {
    animation: modalFadeIn 0.2s ease-out forwards;
}

    .dxbl-modal > .dxbl-modal-back.modal-back-fadeout {
        animation: modalFadeOut 0.2s ease-out forwards;
    }

@keyframes modalFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 0.4;
    }
}

@keyframes modalFadeOut {
    from {
        opacity: 0.4;
    }

    to {
        opacity: 0;
    }
}

.dxbl-dropdown-dialog.lookup-dropdown-grid {
    margin-top: 5.5px !important;
    margin-bottom: 5.5px !important;
}

.dxbl-grid-filter-menu-dropdown .dxbl-checkbox {
    --dxbl-checkbox-check-element-checked-bg: #c0c0c0;
    --dxbl-checkbox-check-element-checked-hover-bg: #947aff;
    --dxbl-checkbox-check-element-unchecked-border-width: 1px;
    --dxbl-checkbox-check-element-unchecked-border-color: #c0c0c0;
    --dxbl-checkbox-check-element-unchecked-hover-border-color: #947aff;
    --dxbl-checkbox-checked-focus-shadow-spread: 0;
    --dxbl-checkbox-unchecked-focus-shadow-spread: 0;
}

.dxbl-grid-filter-menu-dropdown li {
    font-size: 12px
}

    .dxbl-grid-filter-menu-dropdown li:hover:focus {
        background-color: var(--base-background-focused);
    }

    .dxbl-grid-filter-menu-dropdown li:hover:not(:focus) {
        background-color: var(--base-background-focused);
    }

.dxbl-list-box {
    --dxbl-list-box-item-hover-bg: var(--base-background-focused);
    --dxbl-list-box-item-multi-selected-bg: var(--base-background-focused);
    --dxbl-list-box-item-multi-selected-hover-bg: var(--base-background-focused);
}

.dxbl-list-box-select-all-container {
    font-size: 12px
}

.date-range-combobox-dropdown dxbl-scroll-viewer {
    max-height: 494px !important;
    height: 494px !important;
    display: block !important;
    overflow: hidden !important;
}

    .date-range-combobox-dropdown dxbl-scroll-viewer .dxbl-scroll-viewer-content {
        max-height: 494px !important;
        height: 494px !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }

.date-range-combobox-dropdown .dxbl-list-box-render-container {
    max-height: 494px !important;
    overflow: hidden !important;
}

.date-range-combobox-dropdown li {
    min-height: 15px !important;
    padding-top: 1px !important;
    padding-bottom: 1px !important;
    line-height: 15px !important;
}

.period-year-dropdown li {
    font-size: 12px;
    line-height: 15px;
    color: #5f5f5f;
}

    .period-year-dropdown li.dxbl-list-box-item-selected,
    .period-year-dropdown li[aria-selected="true"] {
        color: #ffffff;
    }

.icon-user-group {
    background-image: url('images/user-group.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 16px 14px;
    width: 18px;
    height: 18px;
    outline: none;
    border: none;
}