/*#region Change Objects Defaults*/
* {
    font-family: Tahoma;
    /*font-size: 12px;*/
    /*For Firefox*/
    scrollbar-color: #466ca5 #a3c3ec;
    scrollbar-width: unset;
}

.dx-rtl * {
    font-family: TTahoma;
    font-size: 12px;
    /* direction: rtl;Mehdi: do not uncoment it,because ctrl+shift in textbox work with dir attribute */
    line-height: normal;
}

span {
    white-space: pre;
}

input::selection {
    background: #bcbfb9;
    --border-radius: 4px;
}

:root {
    --border-radius: 0px;
    --BPM-SelectedFill: #ffe000;
}

:focus {
    /*Mehdi: in chrome focus object gets black outline ! */
    outline: unset;
}

g > text > tspan {
    stroke-width: 0;
    font-size: 14px;
    font-weight: 400;
}

.dx-rtl g > text > tspan {
    font-family: TTahoma;
}
/*#endregion*/

/*#region Fonts */
@font-face {
    font-family: 'DXIcons';
    src: url(./icons/dxicons.woff) format('woff'), url(./icons/dxicons.ttf) format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    src: url('/Content/Fonts/Yekan.ttf');
    font-family: 'Yekan';
}

@font-face {
    src: url('/Content/Fonts/TTahoma.ttf');
    font-family: 'TTahoma';
}

@font-face {
    font-family: 'B Mitra';
    src: url('/Content/Fonts/BMITRA.TTF');
}
/*#endregion */

/*#region Public Settings */
.ConsoleLoadingPanel {
    height: 100%;
    width: 100%;
    background-image: url(/Content/Images/backgrounds/login.png);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: absolute;
    left: 0px;
    top: 0px;
    background-repeat: no-repeat;
    background-size: cover;
}

    .ConsoleLoadingPanel .Inner {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 297px;
        background: rgba(255, 255, 255, 0.7);
        height: 186px;
        border-radius: 10px;
        -webkit-box-shadow: 0px 0px 21px 3px rgba(161,161,161,1);
        -moz-box-shadow: 0px 0px 21px 3px rgba(161,161,161,1);
        box-shadow: 0px 0px 47px 38px rgba(255, 255, 255, 0.7);
    }

    .ConsoleLoadingPanel .Text-Panel {
        flex: 0 0 auto;
        margin-top: 30px;
        color: #333333f0;
        direction: ltr;
        font-family: tahoma;
        font-size: large;
        text-shadow: 3px 2px 6px #b7b5d6;
    }

.Link {
    cursor: pointer;
    text-decoration: underline;
}


.TBackgroundPanel {
    background-color: #a3c3ec;
    height: 100%;
    margin: 0px;
    overflow: hidden
}

.noselect {
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

.MultilineText {
    white-space: pre-line;
}

.size-16x16 {
    width: 16px !important;
    height: 16px !important;
}

.size-24x24 {
    width: 24px !important;
    height: 24px !important;
}

.size-32x32 {
    width: 32px !important;
    height: 32px !important;
}

.size-48x48 {
    width: 48px !important;
    height: 48px !important;
}

.Text-Ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    /* Required for text-overflow to do anything */
    white-space: nowrap;
}




.dx-rtl title {
    font-family: 'TTahoma';
}

table {
    display: table;
    border-collapse: separate;
    border-spacing: 2px;
}


.TObjectMover {
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}

.IsMoving {
    /*pointer-events: none;*/
    transition: left 0ms, top 0ms !important;
}

.clear {
    clear: both;
}

.IsNotEnabled {
    opacity: 0.6;
    pointer-events: none;
}

.IsNotEnabled-Transparent {
    opacity: 1;
    pointer-events: none;
}

.TControl.TObjectResizer.IsVisible {
    bottom: -2px;
    left: -2px;
    position: absolute !important;
    right: -2px;
    top: -4px;
    display: block;
    width: unset !important;
    z-index: 3;
    pointer-events: none;
}

.TIconSelector-Image {
    width: 16px !important;
    height: 16px !important;
    margin-left: 3px;
    margin-right: unset;
    flex: 0 1 auto;
}

.TWindowControl {
    position: relative;
}

.TEditorTemplateContentPresenter {
    display: contents !important;
}

    .TEditorTemplateContentPresenter > * {
        flex: 1 1 auto;
    }

.TDesignerContentControl {
    width: 100%;
    height: 100%;
    flex: 1 1 auto;
    overflow: hidden;
}

    .TDesignerContentControl > .RedPanel {
        background-color: #ff000014;
        position: absolute;
        overflow: hidden;
        z-index: 1000;
        justify-content: center;
        display: flex;
        align-items: center;
    }



.TPopupContainer {
    position: fixed;
    width: 30vw;
    height: 44vh;
    z-index: 100;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    border: 1px solid;
    box-shadow: 1px 1px 4px 0px #000000a3;
    top: 0;
    left: 0;
    overflow: hidden;
    backdrop-filter: blur(10px);
}

    .TPopupContainer.TComboBox-Popup {
        display: flex;
        flex-direction: column;
        /* width: 100%; */
        /* height: 100%; */
        position: relative;
        box-sizing: border-box;
        /* overflow: auto; */
    }

        .TPopupContainer.TComboBox-Popup .TPopup-Root {
            padding: 5px;
            box-sizing: border-box;
        }


.TTemplatePresenter {
    display: contents !important;
}

.DragOver {
    outline-color: red;
    outline-style: solid;
    outline-width: 1px;
}


.TLayoutDesignerContext {
    position: absolute !important;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 10;
}

.TProposedPlace {
    background: #00000038;
    border: 1px solid black;
    position: absolute !important;
    border-radius: 2px;
}

    .TProposedPlace.IsMouseOver {
        background-color: #ffffff87;
    }

.TSimpleConditionValuePlaceHolder {
    flex: 1 0 auto !important;
}

.TValuePlaceHolderRemoveContainer {
    opacity: 0;
    position: absolute;
    width: 20px;
    height: 20px;
    bottom: 0px;
    right: -20px;
    pointer-events: none;
    z-index: 2;
}

.TSimpleConditionValuePlaceHolder:focus > .TValuePlaceHolderRemoveContainer,
.TSimpleConditionValuePlaceHolder:hover > .TValuePlaceHolderRemoveContainer,
.TSimpleConditionValuePlaceHolder:focus-within > .TValuePlaceHolderRemoveContainer,
.TSimpleConditionValuePlaceHolder > .TValuePlaceHolderRemoveContainer:hover {
    opacity: 1;
    pointer-events: visible;
    transition-duration: 500ms;
}

/*#endregion */


/*#region Layouting and Orientations */
.v-align-middle {
}

.TOrientation-Horizontal {
    display: flex;
    flex-direction: row !important;
}

.TOrientation-Vertical {
    display: flex;
    flex-direction: column !important;
}

.THorizontalAlignment-Left {
    display: flex;
}

.THorizontalAlignment-Center {
    display: flex;
}

.THorizontalContentAlignment-Center {
    justify-content: center;
}

.THorizontalContentAlignment-Left {
    justify-content: left;
}

.THorizontalContentAlignment-Right {
    justify-content: center;
}

.THorizontalAlignment-Right {
    display: flex;
}

.THorizontalAlignment-Stretch {
    display: flex;
    width: 100%;
    box-sizing: border-box;
}


.TVerticalAlignment-Top {
    display: flex;
}

.TVerticalAlignment-Center {
    display: flex;
    flex-basis: 0%;
    flex-shrink: 1;
}

.TVerticalContentAlignment-Center {
    justify-content: center;
}

.TVerticalAlignment-Bottom {
    display: flex;
}

.TVerticalAlignment-Stretch {
    display: flex;
    min-height: unset; /*for fixing firefox bug*/
    height: 100%;
    box-sizing: border-box;
    position: relative;
    max-height: 100%;
}

.TOrientation-Vertical > .TVerticalAlignment-Top {
    display: flex;
    flex-shrink: 1;
    order: 0;
    flex-basis: auto;
}

.TOrientation-Vertical > .TVerticalAlignment-Center {
    display: flex;
    flex-shrink: 1;
    flex-basis: auto;
    margin-top: auto !important;
    margin-bottom: auto;
    order: 50;
    flex-grow: 0;
}

.TOrientation-Vertical > .TVerticalAlignment-Bottom {
    display: flex;
    flex-shrink: 0;
    flex-basis: auto;
    order: 100;
}

.TOrientation-Vertical > .TVerticalAlignment-Stretch {
    display: flex;
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 100%;
    height: 0px;
}

.TOrientation-Vertical > .THorizontalAlignment-Left {
    display: flex;
    align-self: flex-start;
}

.TOrientation-Vertical > .THorizontalAlignment-Center {
    display: flex;
    align-self: center;
    margin-left: auto;
    margin-right: auto;
}

.TOrientation-Vertical > .THorizontalAlignment-Right {
    display: flex;
    align-self: flex-end;
}

.TOrientation-Vertical > .THorizontalAlignment-Stretch {
    display: flex;
    align-self: stretch;
    width: 100% !important;
    max-width: unset !important;
}

.TOrientation-Horizontal > .TVerticalAlignment-Top {
    align-self: flex-start;
}

.TOrientation-Horizontal > .TVerticalAlignment-Center {
    align-self: center;
}

.TOrientation-Horizontal > .TVerticalAlignment-Bottom {
    align-self: flex-end;
}

.TOrientation-Horizontal > .TVerticalAlignment-Stretch {
    align-self: stretch;
    height: 100% !important;
}

.TOrientation-Horizontal > .THorizontalAlignment-Left {
    display: flex;
    flex-shrink: 1;
    order: 0;
    flex-basis: auto;
    flex-grow: 0;
    width: unset;
}

.TOrientation-Horizontal > .THorizontalAlignment-Center {
    display: flex;
    flex-shrink: 0;
    flex-basis: auto;
    margin-left: auto;
    margin-right: auto;
    flex-grow: 0;
}

.TOrientation-Horizontal > .THorizontalAlignment-Right {
    display: flex;
    flex-shrink: 1;
    order: 100;
    flex-basis: auto;
    margin-left: auto;
    flex-grow: 0;
    width: auto;
}

.TOrientation-Horizontal > .THorizontalAlignment-Stretch {
    display: flex;
    flex-grow: 1;
    flex-shrink: 1;
    width: 100%;
}

.TOrientation-Horizontal > [class~="THorizontalAlignment-Left"] + .THorizontalAlignment-Right,
.TOrientation-Horizontal > .THorizontalAlignment-Right:only-child {
    margin-left: auto !important;
}

.dx-rtl .TOrientation-Horizontal > [class~="THorizontalAlignment-Left"] + .THorizontalAlignment-Right,
.dx-rtl .TOrientation-Horizontal > .THorizontalAlignment-Right:only-child {
    margin-right: auto !important;
    margin-left: unset !important;
}

.TOrientation-Vertical > .TVerticalAlignment-Top + .TVerticalAlignment-Bottom,
.TOrientation-Vertical > .TVerticalAlignment-Bottom:only-child {
    margin-top: auto !important;
}

.TOrientation-Vertical > .TVerticalAlignment-Top.TLayoutGroup,
.TOrientation-Vertical > .TVerticalAlignment-Bottom.TLayoutGroup,
.TOrientation-Vertical > .TVerticalAlignment-Center.TLayoutGroup {
    flex-basis: auto;
}

.TNeedMargin + .TNeedMargin {
    margin-left: 4px;
}

.TOrientation-Vertical > .TNeedMargin + .TNeedMargin {
    margin-left: unset;
    margin-top: 4px;
}

.dx-rtl .TNeedMargin + .TNeedMargin {
    margin-left: unset;
    margin-right: 4px;
}


.disabledDiv {
    pointer-events: none;
    opacity: 0.4;
}

.IsNotVisible {
    visibility: collapse;
    display: none !important;
}
/*#endregion */


/*#region TSelector_User*/
.TSelector_User {
    min-height: 20px !important;
}
/*#endregion*/

/*#region TFileSelectorBase*/
.TFileSelectorBase {
    min-height: 20px !important;
}

.TSingleFileSelector {
    min-height: 20px !important;
}
/*#endregion*/

/*#region Button */


.TButtonActiveRegion {
    z-index: 1;
    position: absolute;
    flex: 1 0 100%;
    width: 100%;
    height: 100%;
}

.TButton {
    display: flex;
    cursor: pointer;
    -moz-border-radius: var(--border-radius);
    -ms-border-radius: var(--border-radius);
    -o-border-radius: var(--border-radius);
    -webkit-border-radius: var(--border-radius);
    border-radius: var(--border-radius);
    border-color: transparent;
    border-style: solid;
    border-width: 1px;
    box-sizing: border-box;
    align-items: center;
    align-self: center;
    display: flex;
    flex: 1 1 auto;
    flex-direction: row;
    overflow: hidden;
    text-align: center;
    justify-content: center;
    padding: 1px;
}

    .TButton > .Content {
        box-sizing: border-box;
        display: flex;
        flex-direction: row;
        align-items: center;
        align-self: center;
        justify-content: center;
        flex: 1 1 auto;
        height: 100%;
        width: 100%;
        /* text-align: center; */
    }

    .TButton.ImageAlignment-Left > .Content {
        flex-direction: row;
    }

    .TButton.ImageAlignment-Top > .Content {
        flex-direction: column;
    }

    .TButton.ImageAlignment-Right > .Content {
        flex-direction: row-reverse;
    }

    .TButton.ImageAlignment-Bottom > .Content {
        flex-direction: column-reverse;
    }

    .TButton.Disabled {
        background: transparent;
        box-shadow: unset;
        cursor: default;
        opacity: 0.5;
        pointer-events: none;
    }

    .TButton > .Content > span:only-child {
        flex: 1 1 auto;
    }

    .TButton.ViewType-Normal {
        padding: 0px 5px;
        min-height: 20px;
        min-width: 10px;
    }

    .TButton:focus {
        outline: 1px dotted black;
    }

    .TButton.ViewType-Normal:active,
    .TButton.ViewType-Normal:focus,
    .TButton.ViewType-Normal:focus-within {
        border-color: #233c6e;
        background: #7b9ccb;
        opacity: 0.8;
        box-shadow: unset;
    }



    .TButton.ViewType-Flat {
        border-width: 0px;
    }

.TControl.TButton.ViewType-Inline {
    border: 1px solid #244580;
    background: rgb(73,104,160);
    background: -moz-linear-gradient(top, rgba(104,140,191,1) 0%, rgba(82,123,186,1) 45%, rgba(46,82,142,1) 46%, rgba(47,83,143,1) 54%, rgba(47,83,143,1) 54%, rgba(115,152,206,1) 100%);
    background: -webkit-linear-gradient(top,rgba(104,140,191,1) 0%,rgba(82,123,186,1) 45%,rgba(46,82,142,1) 46%,rgba(47,83,143,1) 54%,rgba(47,83,143,1) 54%,rgba(115,152,206,1) 100%);
    background: linear-gradient(to bottom, rgba(104,140,190,1) 0%,rgba(82,123,186,1) 45%,rgba(46,82,142,1) 46%,rgba(47,83,143,1) 54%,rgba(47,83,143,1) 54%,rgba(115,152,206,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4968a0', endColorstr='#7398ce',GradientType=0 );
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    color: white;
    min-width: 19px;
    min-height: 17px;
    padding: 0px;
    font-size: smaller;
    height: 100%;
    width: auto;
}

.dx-rtl .TButton > .Content > *:not(:first-child) {
    margin-left: unset;
    margin-right: 4px;
}

.TButton.ViewType-Inline + .TButton.ViewType-Inline {
    margin-left: 1px !important;
}

.dx-rtl .TButton.ViewType-Inline + .TButton.ViewType-Inline {
    margin-left: unset !important;
    margin-right: 1px !important;
}

.TButton.THorizontalContentAlignment-Left .Content {
    justify-content: center;
    text-align: left;
}
/*#endregion */

/*#region TControl*/
.TControl {
    -ms-content-zooming: none;
    /* -webkit-tap-highlight-color: rgba(0, 0, 0, 0); */
    -webkit-text-size-adjust: none;
    -webkit-touch-callout: none;
    box-sizing: border-box;
    display: flex;
    padding: 0;
    outline: 0;
    -webkit-print-color-adjust: exact;
    color-adjust: exact;
    font-weight: normal;
    font-size: 12px;
    position: relative;
}
/*#endregion*/

/*#region TColorPicker*/
.TColorEdit-ColorPresenter {
    width: 100%;
    height: 100%;
    border-radius: 1px;
    border: 1px solid #7897d0;
    padding: 2px 2px 2px 2px;
    display: block;
    box-sizing: border-box;
}

.TColorEdit-ColorSample {
    min-width: 16px;
    min-height: 16px;
    border-width: 1px;
    border-style: solid;
    border-radius: 3px;
    border-color: #00000087;
}

:root {
    --TColorPicker-BackgroundColor: rgb(198 220 247);
    --TColorPicker-Thumb-BorderColor: rgba(255, 255, 255, 0.7);
    --TColorPicker-Wheel-BoxShadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.45) inset;
    --TColorPicker-Brightness-BoxShadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.25) inset;
    --TColorPicker-Tab-Header-BackgroundColor: rgb(130, 164, 210, 1.0);
    --TColorPicker-Tab-Header-FontColor: rgb(37, 60, 150, 1.0);
    --TColorPicker-Tab-BackgroundColor: rgba(150, 180, 217, 0.1);
    --TColorPicker-RangeInputControl-BackgroundColor: #6489bc;
    --TColorPicker-RangeInputControl-BackgroundColor-focused: rgba(222, 220, 220, 0.5);
    --TColorPicker-RangeInputControl-FontColor: rgba(37, 60, 150, 1.0);
    --TColorPicker-RangeInputControl-SelectionColor: rgba(255, 255, 255, 0.5);
    --TColorPicker-RangeInputControl-ProgressColor: rgb(230 234 242);
    --TColorPicker-TextInput-BackgroundColor: rgba(130, 164, 210, 0.6);
    --TColorPicker-Input-BackgroundColor-Focused: rgba(222, 220, 220, 0.5);
    --TColorPicker-Input-FontColor: rgba(37, 60, 150, 1.0);
    --TColorPicker-TextInput-SelectionColor: rgba(255, 255, 255, 0.5);
    --TColorPicker-Tab-Selectedcolor: #a3c3ec;
}

.TColorPicker-Root {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 180px;
    height: auto;
    min-height: 226px;
    background: var(--TColorPicker-BackgroundColor);
    border-radius: 5px;
    -webkit-box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0,0,0,.12);
    -moz-box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0,0,0,.12);
    box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0,0,0,.12);
    z-index: 1000;
}

.TColorPicker-Root-Controls {
    position: relative;
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
}

.TColorPicker-Root-Controls-Group {
    position: relative;
    display: block;
    /*width: 100%;*/
    padding: 10px;
}

.TColorPicker-WheelControl {
    position: relative;
    display: flex;
    flex-direction: row;
    height: 100%;
    width: 140px;
    border: none;
}

    .TColorPicker-WheelControl::after {
        content: '';
        position: absolute;
        display: block;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: 1px solid var(--TColorPicker-BackgroundColor);
        border-radius: 50%;
        -webkit-box-shadow: var(--TColorPicker-Wheel-BoxShadow);
        -moz-box-shadow: var(--TColorPicker-Wheel-BoxShadow);
        box-shadow: var(--TColorPicker-Wheel-BoxShadow);
        margin: -1px;
        pointer-events: none;
    }

.TColorPicker-Brightness-Control {
    position: relative;
    display: flex;
    flex-direction: row;
    height: 100%;
    width: 8px;
    border: 1px solid transparent;
    border-radius: 3px;
    margin-left: 10px;
}

    .TColorPicker-Brightness-Control::after {
        content: '';
        position: absolute;
        display: block;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 3px;
        -webkit-box-shadow: var(--TColorPicker-Brightness-BoxShadow);
        -moz-box-shadow: var(--TColorPicker-Brightness-BoxShadow);
        box-shadow: var(--TColorPicker-Brightness-BoxShadow);
        pointer-events: none;
    }

.TColorPicker-WheelControl-Thumb,
.TColorPicker-Brightness-Control-Thumb {
    position: absolute;
    display: block;
    width: 10px;
    height: 10px;
    border: 1px solid var(--TColorPicker-Thumb-BorderColor);
    border-radius: 50%;
    -webkit-box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, .12);
    -moz-box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, .12);
    box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, .12);
    cursor: pointer;
    z-index: 1000;
}

.TColorPicker .wheel-canvas,
.TColorPicker .brightness-canvas {
    width: 100%;
    height: 100%;
    border-radius: 3px;
}

.TColorPicker-Root-input-controls {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--TColorPicker-Tab-BackgroundColor);
    border-radius: 3px;
    overflow: hidden;
}

.TColorPicker-Root-input-controls-tab-headers {
    position: relative;
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 25px;
    overflow: hidden;
}

    .TColorPicker-Root-input-controls-tab-headers button {
        position: relative;
        display: block;
        width: 33.33%;
        height: 100%;
        background: var(--TColorPicker-Tab-Header-BackgroundColor);
        font-size: 9px;
        color: var(--TColorPicker-Tab-Header-FontColor);
        border: none;
        outline: none;
    }

        .TColorPicker-Root-input-controls-tab-headers button.selected {
            background: var(--TColorPicker-Tab-Selectedcolor);
        }

.TColorPicker-Root-input-controls-tabs {
    position: relative;
    display: block;
    width: 95%;
    height: auto;
    padding: 4px;
}

.TColorPicker-Root-input-controls-tab {
    position: relative;
    display: flex;
    flex-direction: column;
}

    .TColorPicker-Root-input-controls-tab:not(.selected) {
        display: none;
    }


.TColorPicker input {
    font-size: 100%;
}

    .TColorPicker input::-webkit-outer-spin-button,
    .TColorPicker input::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    .TColorPicker input[type=number] {
        -moz-appearance: textfield;
    }

.TColorPicker .range-input-control {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    min-height: 20px;
    margin: 1px 0 0 0;
    background: var(--TColorPicker-RangeInputControl-BackgroundColor);
    font-size: 10px;
    cursor: ew-resize;
    overflow: hidden;
}

    .TColorPicker .range-input-control:hover,
    .TColorPicker .range-input-control.range-input-control--focused {
        background: var(--TColorPicker-RangeInputControl-BackgroundColor-focused);
    }

    .TColorPicker .range-input-control:first-child {
        border-top-left-radius: 3px;
        border-top-right-radius: 3px;
    }

    .TColorPicker .range-input-control:last-child {
        border-bottom-left-radius: 3px;
        border-bottom-right-radius: 3px;
    }

    .TColorPicker .range-input-control .range-input-enter-block,
    .TColorPicker .range-input-control .range-input-details-block {
        position: absolute;
        display: block;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }

    .TColorPicker .range-input-control:not(.range-input-control--key-input-mode) .range-input-enter-block {
        display: none;
    }

    .TColorPicker .range-input-control.range-input-control--key-input-mode .range-input-enter-block {
        display: block;
    }

    .TColorPicker .range-input-control:not(.range-input-control--key-input-mode) .range-input-details-block {
        display: block;
    }

    .TColorPicker .range-input-control.range-input-control--key-input-mode .range-input-details-block {
        display: none;
    }

    .TColorPicker .range-input-control input {
        position: absolute;
        display: block;
        top: 50%;
        transform: translate(0, -50%);
        width: 100%;
        height: auto;
        background: none;
        border: none;
        color: var(--TColorPicker-RangeInputControl-FontColor);
        text-align: center;
        outline: none;
    }

        .TColorPicker .range-input-control input::-moz-selection {
            background: var(--TColorPicker-RangeInputControl-SelectionColor);
        }

        .TColorPicker .range-input-control input::selection {
            background: var(--TColorPicker-RangeInputControl-SelectionColor);
        }

    .TColorPicker .range-input-control .range-input-progress {
        position: absolute;
        display: block;
        top: 0;
        left: 0;
        height: 100%;
        background: var(--TColorPicker-RangeInputControl-ProgressColor);
    }

    .TColorPicker .range-input-control .range-input-label,
    .TColorPicker .range-input-control .range-input-value {
        position: absolute;
        display: block;
        top: 50%;
        width: auto;
        height: auto;
        transform: translate(0, -50%);
        color: var(--TColorPicker-RangeInputControl-FontColor);
        pointer-events: none;
        color-rendering: optimizequality;
    }

    .TColorPicker .range-input-control .range-input-label {
        left: 5px;
    }

    .TColorPicker .range-input-control .range-input-value {
        right: 5px;
    }


.TColorPicker .text-input-control {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    min-height: 20px;
    background: var(--TColorPicker-TextInput-BackgroundColor);
    font-size: 10px;
    margin: 1px 0 0 0;
    cursor: text;
    overflow: hidden;
}

    .TColorPicker .text-input-control:hover,
    .TColorPicker .text-input-control.text-input-control--focused {
        background: var(--TColorPicker-Input-BackgroundColor-Focused);
    }

    .TColorPicker .text-input-control:first-child {
        border-top-left-radius: 3px;
        border-top-right-radius: 3px;
    }

    .TColorPicker .text-input-control:last-child {
        border-bottom-left-radius: 3px;
        border-bottom-right-radius: 3px;
    }

    .TColorPicker .text-input-control .text-input-enter-block,
    .TColorPicker .text-input-control .text-input-details-block {
        position: absolute;
        display: block;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }

    .TColorPicker .text-input-control:not(.text-input-control--focused) .text-input-enter-block {
        display: none;
    }

    .TColorPicker .text-input-control.text-input-control--focused .text-input-enter-block {
        display: block;
    }

    .TColorPicker .text-input-control:not(.text-input-control--focused) .text-input-details-block {
        display: block;
    }

    .TColorPicker .text-input-control.text-input-control--focused .text-input-details-block {
        display: none;
    }

    .TColorPicker .text-input-control input {
        position: absolute;
        display: block;
        top: 50%;
        transform: translate(0, -50%);
        width: 100%;
        height: auto;
        background: none;
        color: var(--TColorPicker-Input-FontColor);
        text-align: center;
        border: none;
        outline: none;
    }

        .TColorPicker .text-input-control input::-moz-selection {
            background: var(--TColorPicker-TextInput-SelectionColor);
        }

        .TColorPicker .text-input-control input::selection {
            background: var(--TColorPicker-TextInput-SelectionColor);
        }

    .TColorPicker .text-input-control .text-input-label,
    .TColorPicker .text-input-control .text-input-value {
        position: absolute;
        display: block;
        top: 50%;
        width: auto;
        height: auto;
        transform: translate(0, -50%);
        color: var(--TColorPicker-Input-FontColor);
        pointer-events: none;
    }

    .TColorPicker .text-input-control .text-input-label {
        left: 5px;
    }

    .TColorPicker .text-input-control .text-input-value {
        right: 5px;
    }

/*#endregion*/

/*#region Calendar*/
.TCalendar-BodyContainer {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    align-content: stretch;
    background-color: white
}

.TCalendar-Header {
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    align-self: stretch;
    display: flex;
    margin: 5px 10px;
}

    .TCalendar-Header .Title {
        cursor: pointer;
        flex: 1 0 auto;
        text-align: center;
    }

    .TCalendar-Header .MoveButton {
        flex: 0 0 auto;
        width: 16px;
        height: 16px;
        cursor: pointer;
        display: flex;
        position: relative;
        background: rgb(198 220 247);
        border: 1px solid rgb(39 77 138);
        border-radius: 36px;
        flex-direction: row;
        justify-content: center;
        justify-items: center;
        align-items: center;
        transition-duration: 300ms;
        color: rgb(77, 108, 152);
        font: 9px/1 DXIcons;
    }

        .TCalendar-Header .MoveButton:hover {
            color: white;
        }

        .TCalendar-Header .MoveButton.Previous:before {
            content: "\f012";
        }

        .TCalendar-Header .MoveButton.Next:before {
            content: "\f010";
        }


.TCalendar-Month-Table {
    width: 100%;
    height: 100%;
}

    .TCalendar-Month-Table th {
        text-align: center;
        width: 16px;
    }

    .TCalendar-Month-Table > thead > tr {
        border-bottom: 1px solid black;
    }

    .TCalendar-Month-Table td {
        text-align: center;
        cursor: pointer;
        border-width: 1px;
        border-color: transparent;
        border-style: solid;
    }

.TCalendar-Year-Table {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    flex: 1 1 auto;
    position: relative;
}

.TCalendar-Year-Table-item {
    flex: 0 0 32%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-width: 1px;
    border-color: transparent;
    border-style: solid;
    text-align: center;
}



.TCalendar *:focus {
    outline-width: 0px;
}
/*#endregion*/

/*#region TCheckEdit*/
.TCheckEdit {
    display: flex;
    flex-direction: row;
    align-content: flex-start;
    justify-content: flex-start;
    align-items: center;
}

    .TCheckEdit > .TCheckEdit-Root {
        display: flex;
        flex-direction: row;
        align-content: center;
        justify-content: flex-start;
        align-items: center;
        overflow: hidden;
    }

        .TCheckEdit > .TCheckEdit-Root > .TCheckEditCheckbox {
            position: relative;
            height: 15px;
            width: 15px;
            -webkit-border-radius: 2px;
            -moz-border-radius: 2px;
            -ms-border-radius: 2px;
            -o-border-radius: 2px;
            border-radius: 2px;
            border: 1px solid #2a4276;
            background: rgb(194,204,225);
            background: -moz-linear-gradient(top, rgba(194,204,225,1) 0%, rgba(253,253,254,1) 100%);
            background: -webkit-linear-gradient(top, rgba(194,204,225,1) 0%,rgba(253,253,254,1) 100%);
            background: linear-gradient(to bottom, rgba(194,204,225,1) 0%,rgba(253,253,254,1) 100%);
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c2cce1', endColorstr='#fdfdfe',GradientType=0 );
            cursor: pointer;
            display: flex;
            padding: 1px;
            box-sizing: border-box;
            color: rgb(47 83 143);
            /* flex: 1 0 15px; */
        }

        .TCheckEdit > .TCheckEdit-Root.CheckEditChecked > .TCheckEditCheckbox:before {
            display: block;
            left: 50%;
            position: absolute;
            top: 50%;
            font-family: DXIcons;
            transform: translate(-50%, -50%);
            font-size: 9px;
            content: "\f005";
        }

        .TCheckEdit > .TCheckEdit-Root.CheckEditNull > .TCheckEditCheckbox:before {
            position: relative;
            width: 100%;
            content: "";
            background-color: #6489bc;
            border-radius: 1px;
            height: 100%;
            box-sizing: border-box;
            border: 1px solid rgb(39 77 138);
        }

        .TCheckEdit > .TCheckEdit-Root > .TCheckEditText {
            flex: 1 1 auto;
            cursor: pointer;
            overflow: hidden;
            text-overflow: ellipsis;
        }

.TCheckEditContent {
    flex: 1 1 0%;
}

.TCheckEdit > .TCheckEdit-Root > .TCheckEditContent:empty {
    display: none !important;
}

.TCheckEdit > .TCheckEdit-Root:hover > .TCheckEditCheckbox {
    border: 1px solid #265a87;
    background: rgb(227,236,254);
    background: -moz-linear-gradient(top, rgba(227,236,254,1) 0%, rgba(174,198,240,1) 49%, rgba(174,198,240,1) 49%, rgba(152,186,236,1) 50%, rgba(174,203,254,1) 100%);
    background: -webkit-linear-gradient(top, rgba(227,236,254,1) 0%,rgba(174,198,240,1) 49%,rgba(174,198,240,1) 49%,rgba(152,186,236,1) 50%,rgba(174,203,254,1) 100%);
    background: linear-gradient(to bottom, rgba(227,236,254,1) 0%,rgba(174,198,240,1) 49%,rgba(174,198,240,1) 49%,rgba(152,186,236,1) 50%,rgba(174,203,254,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e3ecfe', endColorstr='#aecbfe',GradientType=0 );
    -webkit-box-shadow: 0px 0px 2px 1px rgba(90,127,181,0.5);
    -moz-box-shadow: 0px 0px 2px 1px rgba(90,127,181,0.5);
    box-shadow: inset 0px 0px 2px 1px rgb(90 127 181 / 50%);
}

.TCheckEdit > .TCheckEdit-Root:active > .TCheckEditCheckbox {
    transform: scale(90%,90%);
}

.TCheckEdit.IsReadOnly > .TCheckEdit-Root {
    pointer-events: none;
}
/*#endregion*/

/*#region Desktop */
.DesktopPageSelector {
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    height: 20px;
    margin: 0 auto;
    width: 150px;
    border: 1px solid rgba(149, 150, 151, 0.6);
    background-color: rgba(131, 131, 131, 0.66);
    box-shadow: inset 0px 0px 1px 1px #c2bebe;
}

.TDesktopPageItem {
    position: absolute;
    width: 74px;
    min-height: 70px;
    max-height: 70px;
    background-color: transparent;
    border-color: transparent;
    border-radius: 4px;
    border-width: 1px;
    border-style: solid;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    flex-direction: column;
    outline: none;
    transition-duration: 200ms;
    z-index: 10;
}

    .TDesktopPageItem.Active {
        max-height: none;
        padding-bottom: 4px;
        z-index: 5554 !important;
    }

    .TDesktopPageItem:hover {
        max-height: none;
        padding-bottom: 4px;
        z-index: 5555 !important;
    }

    .TDesktopPageItem .Title {
        overflow: hidden;
        word-wrap: break-word;
        white-space: nowrap;
        text-overflow: ellipsis;
        text-align: center;
        word-wrap: break-word;
        text-align: center;
        display: block;
        margin: 0px;
        max-width: 74px;
    }

    .TDesktopPageItem.Active .Title,
    .TDesktopPageItem:hover .Title {
        text-overflow: ellipsis;
        white-space: normal;
        word-wrap: break-word;
        text-align: center;
    }

    .TDesktopPageItem .Icon {
        align-self: center;
        margin: 0px;
        object-fit: scale-down;
        max-width: 48px;
        max-height: 48px;
    }

.TDesktopPageItem-Content {
    pointer-events: none;
}

.TDesktopPageItem-Icon-Container {
    align-self: center;
    height: 50px;
    display: flex;
    flex-direction: row;
    justify-content: center
}

.DesktopBackground {
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
    height: 100%;
    background-size: 100% 100%;
}

.DesktopBackgroundImage {
    width: 100%;
    height: 100%;
}


.TDesktopSelectionBox {
    border: 1px solid #d9a72463;
    position: absolute;
    pointer-events: none;
    right: unset;
    left: unset;
    top: unset;
    width: unset;
    height: unset;
    display: none;
    background-color: #ff960059;
    border-color: #d9a72463;
}

.DesktopRoot {
    height: 100%;
    width: 100%;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-align-content: stretch;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    transition-duration: 3s;
}

.DesktopPage {
    opacity: 0;
    pointer-events: none;
    transition: 200ms cubic-bezier(0.4, 0, 1, 1);
    position: absolute;
}

    .DesktopPage.IsVisible {
        pointer-events: all;
        opacity: 1;
    }

.TMainStatusBar {
    display: flex;
    align-items: stretch;
    box-sizing: border-box;
}


.TSearchMenu-Content {
    overflow: auto;
    border: 1px solid rgba(90,127,181,1);
    border-radius: 4px 4px 0px 0px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    flex-basis: 0%;
    width: 100%;
    padding: 2px;
    box-sizing: border-box;
    background-color: white;
}


/*#endregion */

/*#region Data Grid*/
.TGridProgressBoxContainer {
    height: 100%;
    width: 100%;
    position: relative;
    background-color: rgba(221, 167, 198, 0);
    border: 0px solid #cccccc;
}

.TGridProgressBox {
    background-color: rgb(221,167,198);
    height: 100%;
    border-radius: 2px;
    border: 1px solid gray;
    box-sizing: border-box;
}

.TGridProgressBoxLabel {
    position: absolute;
    left: 50%;
    top: 50%;
    border-radius: 3px;
    user-select: none;
    background-color: rgba(218, 218, 218, 0.7);
    color: black;
    transform: translate(-50%,-50%);
    padding: 0px 5px;
    border: 1px solid #b2b2b2;
}

.TDataGridBorder {
    padding: 3px;
    border: 1px solid #021743;
    border-radius: 5px;
    user-select: none;
    background-clip: border-box;
    box-sizing: border-box;
    height: 100%;
    overflow: hidden;
    position: relative;
    width: 100%;
}

    .TDataGridBorder > .dx-widget {
        max-width: none !important;
        position: relative;
    }

.dx-datagrid .dx-context-menu {
    border: unset;
    width: auto;
    z-index: 170000 !important;
}
/*#endregion*/

/*#region TFlow Direction */
.TFlowDirection-LeftToRight {
    direction: ltr;
    text-align: left;
}

.TFlowDirection-RightToLeft {
    direction: rtl;
    text-align: right;
}

.TFlowDirection-Inherited {
    direction: inherit;
    text-align: inherit;
}
/*#endregion */

/*#region File Uploader*/
.TControl.FileUploader {
    border-width: 1px;
    border-style: solid;
    min-height: 20px;
    display: flex;
    flex-direction: row;
    box-sizing: border-box;
    padding: 1px 1px 1px 1px;
    border-radius: 3px;
}

    .TControl.FileUploader .File {
        display: flex;
        flex-direction: row;
    }

        .TControl.FileUploader .File > a {
            text-decoration: none;
        }
/*#endregion*/

/*#region TImageBox*/
.TImageBox {
    height: unset;
    align-items: center;
    overflow: hidden;
    box-sizing: border-box;
}

    .TImageBox.WithBorder {
        padding: 4px;
        border-width: 1px;
        border-style: solid;
        border-color: #284172;
        background-color: white;
        background: rgb(208,216,231);
        background: -moz-linear-gradient(top, rgba(208,216,231,1) 0%, rgba(230,234,242,1) 22%, rgba(255,255,255,1) 100%);
        background: -webkit-linear-gradient(top, rgba(208,216,231,1) 0%,rgba(230,234,242,1) 22%,rgba(255,255,255,1) 100%);
        background: linear-gradient(to bottom, rgba(208,216,231,1) 0%,rgba(230,234,242,1) 22%,rgba(255,255,255,1) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d0d8e7', endColorstr='#ffffff',GradientType=0 );
        border-radius: 3px;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
    }

    .TImageBox.NoBorder {
        padding: unset;
        background: unset;
        background-color: unset;
        border: unset;
    }

    .TImageBox .ImageContainer {
        transition: background 500ms ease 0s;
        width: auto;
        height: auto;
        outline: none;
        border: none;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        background-origin: content-box;
        max-width: 100%;
        max-height: 100%;
        box-sizing: border-box;
        display: flex;
    }

.TImage-FitContent {
    width: fit-content;
    height: fit-content;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
    margin-left: auto;
    margin-right: auto;
}
/*#endregion*/

/*#region TImageEdit*/
.TImageEdit {
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    box-sizing: border-box;
    height: unset;
    padding: 4px;
    border-width: 1px;
    border-style: solid;
    border-color: #284172;
    background-color: white;
    background: rgb(208,216,231);
    background: -moz-linear-gradient(top, rgba(208,216,231,1) 0%, rgba(230,234,242,1) 22%, rgba(255,255,255,1) 100%);
    background: -webkit-linear-gradient(top, rgba(208,216,231,1) 0%,rgba(230,234,242,1) 22%,rgba(255,255,255,1) 100%);
    background: linear-gradient(to bottom, rgba(208,216,231,1) 0%,rgba(230,234,242,1) 22%,rgba(255,255,255,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d0d8e7', endColorstr='#ffffff',GradientType=0 );
}

    .TImageEdit .ImageContainer {
        transition: background 500ms ease 0s;
        width: auto;
        height: auto;
        outline: none;
        border: none;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        max-width: 100%;
        max-height: 100%;
        box-sizing: border-box;
        display: flex;
        position: absolute;
    }

    .TImageEdit .TLine > div:first-child {
        background-color: rgba(6, 43, 99, 0.33);
    }

    .TImageEdit .TLine > div:last-child {
        background-color: #ffffff;
    }
/*#endregion*/

/*#region TIcon List Container */
.TIconListContainer {
    display: flex;
    flex-wrap: wrap;
    align-self: stretch;
    flex-direction: row;
    flex: 1 1 auto;
    justify-content: flex-start;
    align-items: center;
    align-content: flex-start;
    overflow-x: hidden;
    overflow-y: auto;
    background-color: white;
    border: 1px solid black;
    padding: 10px;
}

    .TIconListContainer .TIconItem {
        flex: 0 1 auto;
        align-self: stretch;
        display: flex;
        align-content: center;
        justify-content: center;
        align-items: center;
        width: 56px;
        height: 42px;
        overflow: hidden;
        margin: 1px;
        border: 1px solid transparent;
        border-radius: 6px;
    }


/*#endregion */

/*#region Image Gallery */
.ImageGallery img.dx-icon {
    width: 32px !important;
    height: 32px !important;
}

.ImageGallery .dx-button-text {
    position: relative;
    top: 7px;
}

/*#endregion */

/*#region Loading */
@-webkit-keyframes load5 {
    0%, 100% {
        box-shadow: 0em -2.6em 0em 0em #ffffff, 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.5), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7);
    }

    12.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.7), 1.8em -1.8em 0 0em #ffffff, 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5);
    }

    25% {
        box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.5), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7), 2.5em 0em 0 0em #ffffff, 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
    }

    37.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5), 2.5em 0em 0 0em rgba(255, 255, 255, 0.7), 1.75em 1.75em 0 0em #ffffff, 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
    }

    50% {
        box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.5), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.7), 0em 2.5em 0 0em #ffffff, -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
    }

    62.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.5), 0em 2.5em 0 0em rgba(255, 255, 255, 0.7), -1.8em 1.8em 0 0em #ffffff, -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
    }

    75% {
        box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.5), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.7), -2.6em 0em 0 0em #ffffff, -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
    }

    87.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.5), -2.6em 0em 0 0em rgba(255, 255, 255, 0.7), -1.8em -1.8em 0 0em #ffffff;
    }
}

@keyframes load5 {
    0%, 100% {
        box-shadow: 0em -2.6em 0em 0em #ffffff, 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.5), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7);
    }

    12.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.7), 1.8em -1.8em 0 0em #ffffff, 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5);
    }

    25% {
        box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.5), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7), 2.5em 0em 0 0em #ffffff, 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
    }

    37.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5), 2.5em 0em 0 0em rgba(255, 255, 255, 0.7), 1.75em 1.75em 0 0em #ffffff, 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
    }

    50% {
        box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.5), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.7), 0em 2.5em 0 0em #ffffff, -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
    }

    62.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.5), 0em 2.5em 0 0em rgba(255, 255, 255, 0.7), -1.8em 1.8em 0 0em #ffffff, -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
    }

    75% {
        box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.5), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.7), -2.6em 0em 0 0em #ffffff, -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
    }

    87.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.5), -2.6em 0em 0 0em rgba(255, 255, 255, 0.7), -1.8em -1.8em 0 0em #ffffff;
    }
}

.loader {
    -ms-transform: translateZ(0);
    -webkit-animation: load5 1.1s infinite ease;
    -webkit-transform: translateZ(0);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateZ(0);
    animation: load5 1.1s infinite ease;
    margin: 0px;
    border-radius: 50%;
    width: 1em;
    height: 1em;
    color: rgba(255,255,255,0);
    font-size: 8px;
    text-indent: -9999em;
}

/*#endregion */

/*#region TLine */

.TLine {
    display: flex;
    flex-direction: column;
    align-self: stretch;
    height: 2px;
    /* transform: translate(0%, 0%); */
}

    .TLine :first-child {
        height: 1px;
        background-color: #8aacdc;
        /* transform: translate(0%, 0%); */
    }

    .TLine :last-child {
        height: 1px;
        background-color: #bad2f1;
        /* transform: translate(0%, 0%); */
    }

.TLayoutGroup > .TLine :first-child {
    background-color: #8aacdc;
}

.TLayoutGroup > .TLine :last-child {
    background-color: rgb(230 234 242);
}
/*#endregion */

/*#region TLayoutGroup*/

.TLayoutGroup {
    box-sizing: border-box;
    position: relative; /*Mehdi: this line needed for resizer*/
    overflow: visible;
    top: unset !important;
    bottom: unset !important;
    left: unset !important;
    right: unset !important;
    transition-duration: 200ms;
    display: flex;
}

    .TLayoutGroup.AllowVerticalScroll {
        overflow-y: auto;
    }

    .TLayoutGroup.TOrientation-Horizontal.THorizontalAlignment-Center {
        justify-content: center;
    }

    .TLayoutGroup.ViewType-Group.DesignMode {
        /* min-height: 20px; */
    }

.TOrientation-Vertical > .NeedItemSpace:not([style*="display: none"]) + .NeedItemSpace:not([style*="display: none"]) {
    margin-top: 4px;
}


.TOrientation-Horizontal > .NeedItemSpace:not([style*="display: none"]):not(.IsNotVisible) + .NeedItemSpace:not([style*="display: none"]) {
    margin-left: 4px;
}

.TOrientation-Horizontal > .TInlineItem:not([style*="display: none"]):not(.IsNotVisible) + .TInlineItem:not([style*="display: none"]) {
    margin-left: 1px;
}


.dx-rtl .TOrientation-Horizontal > .NeedItemSpace:not([style*="display: none"]):not(.IsNotVisible) + .NeedItemSpace:not([style*="display: none"]) {
    margin-right: 4px;
    margin-left: unset;
}

.dx-rtl .TOrientation-Horizontal > .TInlineItem:not([style*="display: none"]):not(.IsNotVisible) + .TInlineItem:not([style*="display: none"]) {
    margin-right: 1px;
    margin-left: unset;
}

.TOrientation-Vertical > .NeedItemSpace:not([style*="display: none"]) + .NeedItemSpace:not([style*="display: none"]) {
    margin-top: 4px;
}


.TLayoutGroupContent {
    align-content: stretch;
    align-items: stretch;
    align-self: stretch;
    display: flex;
    flex: 1 1 auto;
    overflow: hidden;
    position: relative;
    /*do not remove this resizer need this*/
}

.TLayoutGroupContentBack {
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
    width: 100%;
    flex: 0 1 100%;
    display: flex;
    flex-direction: column;
}

.TLayoutGroup.AutoScroll {
    overflow: auto;
}

.TLayoutGroup.ViewType-GroupBox {
    overflow: visible;
}

.TLayoutGroup.ViewType-GroupBox {
    padding-left: unset !important;
    padding-top: unset !important;
    padding-right: unset !important;
    padding-bottom: unset !important;
}

.TLayoutGroup.IsCollapsible.IsCollapsed {
    height: unset !important;
}

.TLayoutGroupBoxContent {
    -moz-border-radius: 0px 0px 3px 3px;
    -webkit-border-radius: 0px 0px 3px 3px;
    background-color: #b1cef3;
    border-color: #7897d0;
    border-radius: 0px 0px 3px 3px;
    border-style: solid;
    border-width: 0px 1px 1px 1px;
    box-sizing: border-box;
    height: 100%;
    margin-top: 0px !important;
    overflow: auto;
    padding: 10px;
    transform-origin: center top 0px;
    transition-duration: 200ms;
}

.IsCollapsible > .TLayoutGroupContentBack > .TLayoutGroupBoxContent {
    max-height: 2000px;
}

.IsCollapsible.IsCollapsed > .TLayoutGroupContentBack > .TLayoutGroupBoxContent {
    transform: scaleY(0);
    max-height: 0px;
    display: none;
    visibility: collapse;
}

.TLayoutGroupBoxContent > .TDashboardControlContainer {
    width: calc(100% - 20px) !important;
    height: calc(100% - 20px) !important;
}

.LayoutGroupExpandCollapseButton:before {
    font-weight: normal;
    color: rgb(77, 108, 152);
    content: url("data:image/svg+xml;charset=utf8,%3C?xml version='1.0' encoding='UTF-8' standalone='no'?%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' preserveAspectRatio='xMidYMid meet' viewBox='348.61538461538464 49 154.38461538461536 154.38461538461533' width='15' height='15'%3E%3Cdefs%3E%3Cpath d='M500 125.19C500 166.69 466.31 200.38 424.81 200.38C383.31 200.38 349.62 166.69 349.62 125.19C349.62 83.69 383.31 50 424.81 50C466.31 50 500 83.69 500 125.19Z' id='cBUOvf218'%3E%3C/path%3E%3Cpath d='M430 142.5L400 160L400 125L400 90L430 107.5L460 125L430 142.5Z' id='a1UqHuOsaY'%3E%3C/path%3E%3C/defs%3E%3Cg%3E%3Cg%3E%3Cuse xlink:href='%23cBUOvf218' opacity='1' fill='%237897d0' fill-opacity='1'%3E%3C/use%3E%3C/g%3E%3Cg%3E%3Cuse xlink:href='%23a1UqHuOsaY' opacity='1' fill='%23a3c3ec' fill-opacity='1'%3E%3C/use%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    border-radius: 360px;
    flex: 0;
    align-self: center;
    margin: 0px;
    width: 15px;
    height: 15px;
    display: block;
    transform: rotate(90deg);
    transition-duration: 300ms;
    border-style: solid;
    border-width: 1px;
}

.TLayoutGroupHeader {
    flex-shrink: 0 !important;
    width: 100%;
    user-select: none;
    cursor: default;
    border-width: 1px;
    -webkit-border-radius: 3px 3px 0px 0px;
    -moz-border-radius: 3px 3px 0px 0px;
    border-radius: 3px 3px 0px 0px;
    border-style: solid;
    border-color: #7897d0;
    padding: 2px 10px 2px 10px;
    background: rgb(185,212,246);
    background: -moz-linear-gradient(top, rgba(185,212,246,1) 0%, rgba(170,202,248,1) 49%, rgba(158,192,237,1) 51%, rgba(178,205,248,1) 100%);
    background: -webkit-linear-gradient(top, rgba(185,212,246,1) 0%,rgba(170,202,248,1) 49%,rgba(158,192,237,1) 51%,rgba(178,205,248,1) 100%);
    background: linear-gradient(to bottom, rgba(185,212,246,1) 0%,rgba(170,202,248,1) 49%,rgba(158,192,237,1) 51%,rgba(178,205,248,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b9d4f6', endColorstr='#b2cdf8',GradientType=0 );
    box-sizing: border-box;
    display: flex;
    width: 100%;
}

.IsCollapsible.IsCollapsed > .TLayoutGroupContentBack > .TLayoutGroupHeader {
    border-radius: 3px;
}

.IsCollapsible > .TLayoutGroupContentBack > .TLayoutGroupHeader {
    cursor: pointer;
}

.IsCollapsible.IsCollapsed .LayoutGroupExpandCollapseButton:before {
    transform: rotate(180deg);
}

.DesignMode > .TControl-Adorner > .Overlay {
    border: 2px solid #8080802e;
    position: absolute;
    z-index: 1;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    border-radius: 3px;
    pointer-events: auto;
}

.DesignMode .DragHandler {
    position: absolute;
    z-index: auto;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    /* background:#00800042; */
    min-width: 10px;
    cursor: grab;
    pointer-events: auto;
    display: block;
}

.DesignMode > .TControl-Adorner > .DragHandler.SuperTop {
    z-index: 2;
}


.TLayoutGroup.DesignMode > .TControl-Adorner > .Overlay,
.TTabControl.DesignMode > .TControl-Adorner > .Overlay,
.TTabPage.DesignMode > .TControl-Adorner > .Overlay {
    pointer-events: none;
}

.DesignMode.IsSelectedAtDesign > .TControl-Adorner > .Overlay {
    background: #ff00002e;
    border-color: #ff0000a6;
}

.TLayoutGroup > .TLayoutGroup-Resizer {
    position: absolute !important;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
}

/*#endregion*/

/*#region TLayoutItem */
.TLayoutItem {
    box-sizing: border-box;
    position: relative; /*Mehdi: is Important for Resizer*/
    top: unset !important;
    left: unset !important;
    right: unset !important;
    bottom: unset !important;
}

.TLayoutItemRoot {
    flex-grow: 1;
    width: 100%;
    overflow: hidden;
}

.TLayoutItem-Label {
    display: flex;
    flex: 0 1 auto;
    flex-direction: row;
}

.TLabelPosition-Top > .TLayoutItemRoot {
    display: flex;
    flex-direction: column;
}

    .TLabelPosition-Top > .TLayoutItemRoot > .TLayoutItem-Label {
        margin-bottom: 4px;
    }

.TLabelPosition-Left > .TLayoutItemRoot {
    display: flex;
    flex-direction: row;
}

    .TLabelPosition-Left > .TLayoutItemRoot > .TLayoutItem-Label {
        /*margin-left: 4px;*/
    }

.TLayoutItemLabelText {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: pre;
    line-height: normal;
}

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

.TLayoutItem-Content {
    display: flex;
    flex: 1 1 auto;
    align-content: stretch;
    align-items: stretch;
    align-self: stretch;
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

    .TLayoutItem-Content > * {
        display: flex;
        flex: 1 1 auto;
        align-content: stretch;
        align-items: stretch;
        align-self: stretch;
    }

.TLabelHorizontalAlignment-Left .TLayoutItem-Label {
    display: flex;
    justify-content: flex-start;
}

.TLabelHorizontalAlignment-Center .TLayoutItem-Label {
    display: flex;
    justify-content: center;
}

.TLabelHorizontalAlignment-Right .TLayoutItem-Label {
    display: flex;
    justify-content: flex-end;
}

.TLabelHorizontalAlignment-Stretch .TLayoutItem-Label {
    display: flex;
    justify-content: stretch;
}

.TLabelVerticalAlignment-Top .TLayoutItem-Label {
    display: flex;
    align-items: flex-start;
}

.TLabelVerticalAlignment-Center .TLayoutItem-Label {
    display: flex;
    align-items: center;
}

.TLabelVerticalAlignment-Bottom .TLayoutItem-Label {
    display: flex;
    align-items: flex-end;
}

.TLabelVerticalAlignment-Stretch .TLayoutItem-Label {
    display: flex;
    align-items: stretch;
}

/*#endregion */
/*#region Resizer*/
.TControl-Adorner {
    position: absolute;
    pointer-events: none;
    box-sizing: content-box;
    display: contents;
}

.TResizer {
    position: absolute;
    display: flex;
    /*Mehdi : this line is too important*/
    flex-grow: 1;
    font-weight: bold;
    align-self: stretch;
    color: black;
    pointer-events: auto;
    transition-duration: 200ms !important;
    minHeight: unset !important;
}

    .TResizer > .TResizer-Line {
        flex: 1 1 auto;
        /* background-color: #ff00006b; */
        height: 20px;
        width: 100%;
        display: block;
        position: absolute;
        transform: translateY(-40%);
        z-index: 10000;
    }

.TOrientation-Horizontal > .TControl > .TControl-Adorner > .TResizer {
    width: 4px !important;
    cursor: e-resize;
    height: 100%;
    right: -4px;
    position: absolute;
    display: flex;
    flex-basis: 100%;
}

    .TOrientation-Horizontal > .TControl > .TControl-Adorner > .TResizer > .TResizer-Line {
        transform: translateX(-27%);
        width: 10px;
        height: 100%;
        /* background-color: #ff000040; */
    }

    .TOrientation-Horizontal > .TControl > .TControl-Adorner > .TResizer > span {
        -webkit-transform: rotate(90deg);
        -moz-transform: rotate(90deg);
        -o-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        transform: rotate(90deg);
        align-self: center;
        flex: 0 0 auto;
        position: absolute;
        left: -2px;
        pointer-events: none;
        line-height: 1px;
    }

.dx-rtl .TOrientation-Horizontal > .TControl > .TControl-Adorner > .TResizer {
    width: 4px;
    cursor: e-resize;
    height: 100%;
    right: unset;
    left: -4px;
}

.TOrientation-Vertical > .TControl > .TControl-Adorner > .TResizer {
    height: 4px;
    cursor: n-resize;
    width: 100% !important;
    bottom: -4px;
}

    .TOrientation-Vertical > .TControl > .TControl-Adorner > .TResizer > span {
        align-self: center;
        line-height: 0px;
        top: -1px;
        position: absolute;
        pointer-events: none;
        display: flex;
        left: 50%;
        transform: translate(-50%, 0);
    }

.TControl:last-child > .TControl-Adorner > .TResizer,
.TControl:only-child > .TControl-Adorner > .TResizer,
.TControl:not(.CanShowResizer) > .TControl-Adorner > .TResizer {
    display: none;
}


/*#endregion*/

/*#region Ribbon */
.TRibbon {
    cursor: default;
    display: flex !important;
    flex-direction: column;
    height: auto;
    overflow: hidden;
    padding-top: 3px;
    transition-duration: 1000ms;
    transition-property: all;
    min-height: 132px;
}

    .TRibbon.backstage {
        bottom: 0;
        height: auto;
    }

    .TRibbon .TRibbon-WindowTitle {
        display: block;
        font-size: 10pt;
        padding: 2px;
        text-align: center;
    }

    .TRibbon .TRibbonTab-Container {
        align-items: stretch;
        display: flex;
        flex: 1 0 23px;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;
        white-space: nowrap;
    }

    .TRibbon .TRibbonTab-Header {
        display: inline;
        font-size: 8pt;
        margin: 0 3px;
        padding: 2px 10px;
        position: relative;
        user-select: none;
        border: 1px solid transparent;
        cursor: pointer;
    }

        .TRibbon .TRibbonTab-Header.IsSelected {
            border-bottom-color: transparent !important;
            border-radius: 2px 2px 0px 0px;
            z-index: 45;
        }

            .TRibbon .TRibbonTab-Header.IsSelected:hover {
                cursor: default;
            }

    .TRibbon .TRibbonTab {
        box-sizing: border-box;
        display: flex;
        display: none;
        min-height: 105px;
        overflow: auto;
        flex-wrap: nowrap;
        flex-direction: row;
        max-width: 100%;
        align-items: stretch;
        width: 100%;
    }

        .TRibbon .TRibbonTab.IsSelected {
            display: flex;
            opacity: 1;
        }



    .TRibbon .TRibbon-backstage {
        display: none;
    }

    .TRibbon .TRibbonSection-TitleContainer {
        display: flex;
        flex: 0 0 18px;
        justify-content: center;
        padding: 0px 0px 2px 0px;
    }

    .TRibbon .TRibbonSection-Title {
        align-self: center;
        display: flex;
        text-align: center;
        margin: 0px 10px;
    }

    .TRibbon .TRibbonSection {
        display: flex;
        flex-direction: column;
        position: relative;
        flex-wrap: nowrap;
        flex: 0 0 auto;
        align-items: stretch;
        width: auto;
        box-sizing: border-box;
    }

        .TRibbon .TRibbonSection:only-child,
        .TRibbon .TRibbonSection:last-child {
            /* width: auto; */
            flex: 1 1 auto;
        }

.TRibbonSection + .TRibbonSection:before {
    content: ' ';
    display: flex;
    position: absolute;
    top: 0px;
    bottom: 20px;
    border-left: 1px solid;
    border-right: 1px solid;
    opacity: 0.6;
}

.TRibbon .TRibbonSection-ButtonContainer {
    display: flex;
    flex: 1 0 auto;
    flex-direction: row;
    padding: 4px;
    justify-content: flex-start;
    overflow: hidden;
    flex-wrap: nowrap;
    width: auto;
    box-sizing: border-box;
    align-items: stretch;
    align-content: center;
}

.TRibbon .TRibbonButton {
    -moz-border-radius: 3px 3px 3px 3px;
    -webkit-border-radius: 3px 3px 3px 3px;
    border: 1px solid transparent;
    border-radius: 3px 3px 3px 3px;
    padding: 4px 6px;
    cursor: pointer;
}

    .TRibbon .TRibbonButton:hover {
        background: red;
    }

    .TRibbon .TRibbonButton .TRibbonButton-IconContainer {
        pointer-events: none;
    }

    .TRibbon .TRibbonButton .TRibbonButton-Text {
        padding-top: 6px;
    }

.TRibbon .TRibbonButton-Large {
    height: 71px;
    max-width: 100px;
    min-width: 44px;
    overflow: hidden;
    text-align: center;
    position: relative;
    flex: 1 0 auto;
    width: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
}

    .TRibbon .TRibbonButton-Large .TRibbonButton-Icon.TRribbonIcon-Normal {
        max-height: 32px;
        max-width: 32px;
    }

.TRibbonButton-Root {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    flex-wrap: nowrap;
    width: inherit;
    height: inherit;
    align-content: stretch;
    margin: 0px 5px;
    flex: 1 1 auto;
    overflow: hidden;
}

.TRibbon .TRibbonButton-small {
    height: 14px;
    padding: 3px 4px;
    text-align: left;
}



.TRibbon .TRibbonButton-Large .TRibbonButton-Text {
    clear: left;
    display: block;
    margin-top: 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    word-wrap: break-word;
    flex: 0 1 auto;
}

.TRibbon .TRibbonButton-Large .TRibbonButton-IconContainer {
    align-items: center;
    display: flex;
    height: 32px;
    justify-content: center;
    width: auto;
}

.TRibbon .TRibbonButton-Large .TRibbonButton-Icon {
    /* height: 32px; */
    box-sizing: border-box;
    margin: auto;
}

.TRibbon .TRibbonButton-small .TRibbonButton-Icon {
    clear: left;
    float: left;
    height: 16px;
    margin: -1px 5px 0px 1px;
    width: 16px;
}

.TRibbon .TRibbonButton .TRibbonButton-Icon.TRribbonIcon-Hot,
.TRibbon .TRibbonButton .TRibbonButton-Icon.TRibbon-Disabled {
    display: none;
}

.TRibbon .TRibbonButton-Large .TRibbonButton-Icon.TRribbonIcon-Normal {
    display: block;
}

.TRibbon .TRibbonButton:hover .TRibbonButton-Icon.TRribbonIcon-Normal {
    /*display: none;*/
}

.TRibbon .TRibbonButton-Large:hover .TRibbonButton-Icon.TRribbonIcon-Hot {
    display: block;
}

.TRibbon .TRibbonButton-small .TRibbonButton-Icon.TRribbonIcon-Normal {
    display: inline;
}

.TRibbon .TRibbonButton-small:hover .TRibbonButton-Icon.TRribbonIcon-Hot {
    display: inline;
}

.TRibbon .TRibbonButton.disabled .TRibbonButton-Icon,
.TRibbon .TRibbonButton.disabled:hover .TRibbonButton-Icon {
    display: none;
}

    .TRibbon .TRibbonButton.disabled .TRibbonButton-Icon.TRibbon-Disabled {
        display: block;
        opacity: 0.8;
    }

    .TRibbon .TRibbonButton.disabled .TRibbonButton-Icon.TRibbon-Implicit-Disabled {
        opacity: 0.4;
    }

.TRibbon .TRibbonTab-Header.IsSelected:after {
    border-style: solid;
    border-width: 2px;
    content: " ";
    display: block;
    left: 0px;
    position: absolute;
    right: 0px;
    top: calc(100%);
    border-color: #9cbae4;
}

.button.big {
    margin-bottom: 5px;
    margin-top: 5px;
    padding: 10px;
    position: relative;
    width: 150px;
}

    .button.big img {
        left: 0px;
        margin-left: 10px;
        position: absolute;
    }

    .button.big .label {
        display: block;
        font-weight: bold;
        margin-left: 42px;
        text-align: left;
    }

    .button.big .desc {
        display: block;
        font-size: 8pt;
        margin-left: 42px;
        margin-top: 5px;
        text-align: left;
    }

.TRibbon .MenuItemCounterCircle {
    position: absolute;
    bottom: 0px;
    transform: translateX(-50%);
}

.TRibbonTab-HeaderText {
    font-size: 12px;
}
/*#endregion */

/*#region TreeNode Container */
.TreeNodeContainer {
    display: flex;
    flex-direction: row;
    position: relative;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    box-sizing: content-box;
}

    .TreeNodeContainer > img {
        width: 16px;
        height: 16px;
    }

    .TreeNodeContainer > .dx-checkbox {
        position: relative !important;
        clear: both;
    }

    .TreeNodeContainer > span {
        width: 100%;
    }

    .TreeNodeContainer > *:not(:first-child) {
        margin: 0px 0px 0px 3px !important;
        position: relative;
        align-self: center;
    }

.dx-rtl .TreeNodeContainer > *:not(:first-child) {
    margin: 0px 3px 0px 0px !important;
}
/*#endregion */

/*#region TTreeView ItemContent */
.TTreeViewItemContent {
}

.TTreeViewItemContent-Root {
    display: flex;
    flex-direction: row;
    position: relative;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center
}

    .TTreeViewItemContent-Root > .dx-checkbox {
        position: relative;
    }

    .TTreeViewItemContent-Root > img {
        width: 16px;
        height: 16px
    }

    .TTreeViewItemContent-Root > span {
        width: 100%;
        text-overflow: ellipsis;
        overflow: hidden;
    }

/*#endregion */

/*#region TreeView*/
.TreeViewItemContainer {
    width: 77px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    background-color: transparent;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    flex: 1 1 auto;
}

    .TreeViewItemContainer img {
        max-width: 16px;
        max-height: 16px;
        pointer-events: none;
    }

    .TreeViewItemContainer span {
        justify-self: stretch;
        overflow: hidden;
        text-overflow: ellipsis;
        pointer-events: none;
        width: 100%;
        flex: 1 1 auto;
    }

    .TreeViewItemContainer img + span {
        margin-left: 4px;
    }

.TTreeView {
    background-color: white;
    border: 1px solid #062b63;
    color: black;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

.TTreeView-Root {
    display: flex;
    flex-direction: column;
    flex: 1 1 100%;
    height: 100%;
    position: relative;
    width: 100%;
}

    .TTreeView-Root > .TTreeView-SearchBox {
        align-self: center;
        flex-basis: 30px;
        position: relative;
        box-sizing: border-box;
        width: 100% !important;
        padding: 5px;
    }

    .TTreeView-Root > .TTreeViewItems-Root-Outer {
        display: flex;
        position: relative;
        box-sizing: border-box;
        flex: 1 1 auto;
    }

.TTreeViewItems-Root {
    width: 100%;
    flex: 1 1 100%;
    position: relative;
    overflow: auto;
    height: 100%;
    position: absolute;
}

.TreeViewItem {
    height: auto;
    display: flex;
    flex-direction: column;
    min-height: 24px;
    align-items: stretch;
    flex: 1 1 100%;
    /* overflow: hidden; */
    box-sizing: border-box;
    position: relative;
}

.TreeViewItem-RowContainer {
    display: flex;
    flex-direction: row;
    box-sizing: border-box;
    flex: 1 1 auto;
    align-self: stretch;
    justify-self: stretch;
}

    .TreeViewItem-RowContainer > .TreeViewExpandToggle {
        width: 14px;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
        flex: 1 0 auto;
        font-family: 'FontAwesome';
        font-size: 12px;
    }

    .TreeViewItem-RowContainer.HasChild > .TreeViewExpandToggle:before {
        content: "\f0da";
    }

.dx-rtl .TreeViewItem-RowContainer.HasChild > .TreeViewExpandToggle:before {
    content: '\f0d9';
}

.TreeViewItem-RowContainer.HasChild.IsExpanded > .TreeViewExpandToggle:before {
    content: "\f0d7";
}

.TreeViewItem-Row {
    display: flex;
    flex-direction: row;
    min-height: 24px;
    justify-content: flex-start;
    align-items: center;
    align-content: flex-start;
    padding: 0px 4px;
    box-sizing: border-box;
    border-radius: 2px;
    flex: 1 1 100%;
}

    .TreeViewItem-Row:hover {
        background-color: #a3c3ec;
        border-color: rgba(90,127,181,1);
        color: #062b63;
    }

    .TreeViewItem-Row.IsSelected {
        background: rgb(123,155,200);
        background: -moz-linear-gradient(top, rgba(123,155,200,1) 0%, rgba(94,128,177,1) 100%);
        background: -webkit-linear-gradient(top, rgba(123,155,200,1) 0%,rgba(94,128,177,1) 100%);
        background: linear-gradient(to bottom, rgba(123,155,200,1) 0%,rgba(94,128,177,1) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7b9bc8', endColorstr='#5e80b1',GradientType=0 );
        color: white;
    }

.TreeViewItem-Childs {
    display: flex;
    flex-direction: column;
    margin-left: 15px;
    transform: scaleY(0);
    transition-duration: 200ms;
    transform-origin: top;
    opacity: 0;
}

    .TreeViewItem-Childs.IsExpanded {
        transform: scaleY(1);
        transition-duration: 200ms;
        opacity: 1;
    }

.dx-rtl .TreeViewItem-Childs {
    margin-left: unset;
    margin-right: 15px;
}

.TreeViewItem-Row-Text {
    text-overflow: ellipsis;
    pointer-events: none;
}

.TreeViewItem-Row-Image {
    max-width: 16px;
    max-height: 16px;
    pointer-events: none;
}
/*#endregion*/


/*#region TabControl and TabPage*/
.TTabControl {
    box-sizing: border-box;
    position: relative;
    width: auto;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-content: stretch;
    align-items: stretch;
}

.TabControl-Root {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    align-self: stretch;
    position: relative;
    width: 100%;
    height: 100%;
}

.TabControl-Tabs {
    display: flex;
    flex: 0 0 auto;
    margin: 0px 0px -1px 4px;
    flex-wrap: wrap;
    z-index: 1;
    overflow: hidden;
}

.TabControl-Contents {
    padding: 10px;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    border: 1px solid #5a80bd;
    border-radius: 3px 3px 3px 3px;
    -webkit-border-radius: 3px 3px 3px 3px;
    -moz-border-radius: 3px 3px 3px 3px;
    background: rgb(198,220,247);
    background: -moz-linear-gradient(top, rgba(198,220,247,1) 0%, rgba(180,207,244,1) 100%);
    background: -webkit-linear-gradient(top, rgba(198,220,247,1) 0%,rgba(180,207,244,1) 100%);
    background: linear-gradient(to bottom, rgba(198,220,247,1) 0%,rgba(180,207,244,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c6dcf7', endColorstr='#b4cff4',GradientType=0 );
    overflow: auto;
    transition: all 0ms ease 0ms;
    transform: translate(0px, 0px);
    margin-top: 0px !important;
    box-sizing: border-box;
    height: auto;
    width: unset;
    position: relative;
}

.TabControl-Contents-Inner {
    position: absolute;
    width: calc(100% - 20px);
    height: calc(100% - 20px);
}


.TTabPage {
    box-sizing: border-box;
    color: black;
    flex: 1 1 auto;
    height: 100%;
    margin-top: 0px !important;
    overflow: hidden;
    width: 100%;
    flex-shrink: 1 !important;
    display: none;
    position: relative;
}

    .TTabPage.IsSelected {
        display: flex;
    }

    .TTabPage.AutoScroll {
        overflow: auto;
    }

.TTabItem-Header {
    padding: 0px 6px;
    display: inline-block;
    min-width: 17px;
    min-height: 22px;
    border-style: solid;
    border-width: 1px 1px 1px 1px;
    border-radius: 3px 3px 0px 0px;
    cursor: pointer;
}

    .TTabItem-Header.IsSelected {
        border-style: solid;
        border-radius: 3px 3px 0px 0px;
        border-width: 1px 1px 0px 1px;
    }


.TTabItem-Header-Content {
    background-image: none;
    overflow: hidden;
    display: flex;
    justify-content: center;
}

    .TTabItem-Header-Content > img {
        vertical-align: middle;
        margin-top: 2px
    }

.TTabItem-Header-Content-Text {
    vertical-align: middle;
    line-height: 21px;
}

.TTabItem-Header + .TTabItem-Header {
    margin-left: 1px;
}

.dx-rtl .TTabItem-Header + .TTabItem-Header {
    margin-left: unset;
    margin-right: 1px;
}
/*#endregion*/

/*#region Task bar*/



.TTaskbarControl {
    background-color: black;
    color: white;
    display: flex;
    flex-direction: row;
    height: 40px;
    text-decoration: none;
    user-select: none;
}

.TTaskbarControl-Root {
    display: flex;
    flex-direction: row;
    width: 100%;
}

.TTaskbarItemContainer {
    align-content: flex-start;
    align-items: center;
    display: flex;
    flex-direction: row;
    flex-grow: 1;
    flex-wrap: nowrap;
    justify-content: flex-start;
    padding: 3px 20px;
}

.TStartMenuButton {
    align-items: center;
    display: flex;
    flex: 0 0 48px;
    justify-content: center;
}

    .TStartMenuButton:hover {
        background-color: #373737;
    }

    .TStartMenuButton:active {
        background-color: black;
    }

    .TStartMenuButton .start_Icon {
        background-color: transparent;
        padding: 12px 12px 12px 12px;
        transform: scaleX(-1);
        width: 16px;
    }


@media only screen and (max-width: 800px) {
    .Startmenu_Popup {
        height: calc(100vh - 40px) !important;
        width: 100vw !important;
    }
}

.Startmenu_Popup {
    animation-delay: 0s;
    animation-name: PlayStartMenu;
    background-color: #062b6373;
    border: 1px solid #00000045;
    border-radius: 0px 5px 0px 0px;
    box-sizing: border-box;
    min-width: 500px;
}

.dx-rtl .Startmenu_Popup {
    border-radius: 5px 0px 0px 0px;
}

.Startmenu-Popup-Root {
    box-sizing: border-box;
    -ms-flex-direction: row;
    -ms-flex-line-pack: stretch;
    -ms-flex-wrap: nowrap;
    -webkit-align-content: stretch;
    -webkit-flex-direction: row;
    -webkit-flex-wrap: nowrap;
    align-content: stretch;
    width: 100%;
    height: 100%;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow: hidden;
    padding: 5px;
}

.Startmenu_Popup .start-expand {
    -ms-flex-align: end;
    -ms-flex-direction: row;
    -ms-flex-line-pack: stretch;
    -ms-flex-pack: end;
    -ms-flex-wrap: nowrap;
    -webkit-align-content: stretch;
    -webkit-align-items: flex-end;
    -webkit-flex-direction: row;
    -webkit-flex-wrap: nowrap;
    -webkit-justify-content: flex-end;
    align-content: stretch;
    align-items: flex-end;
    align-items: stretch;
    animation-delay: 0s;
    animation-name: PlayStartMenu;
    background-color: #000000ed;
    box-sizing: border-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    position: absolute;
    top: 0px;
    transform: scaleX(0);
    transition-duration: 200ms;
    width: 100%;
    left: 0%;
    transform-origin: left;
    padding: 5px;
    height: 100%;
    color: white;
}

.dx-rtl .Startmenu_Popup .start-expand {
    transform-origin: right;
}

.Startmenu_Popup .start-expand.open {
    transform: scaleX(1);
    transition-duration: 200ms;
    visibility: visible;
}

.Startmenu_Popup .Startmenu-Column0 {
    -ms-flex: 0 0 35px;
    -ms-flex-item-align: stretch;
    -ms-flex-order: 0;
    -webkit-align-self: stretch;
    -webkit-flex: 0 0 35px;
    -webkit-order: 0;
    align-self: stretch;
    background-color: #3a5377;
    box-sizing: border-box;
    display: flex;
    flex: 0 0 35px;
    flex-direction: column;
    justify-content: flex-start;
    order: 0;
    min-width: 30px;
    position: relative;
    border-right: 1px solid #00000057;
}

.dx-rtl .Startmenu_Popup .Startmenu-Column0 {
    border-right: unset;
    border-left: 1px solid #00000057;
}

.Startmenu_Popup .Startmenu-Column1 {
    -ms-flex: 0 0 34%;
    -ms-flex-item-align: stretch;
    -ms-flex-order: 0;
    -webkit-align-self: stretch;
    -webkit-flex: 0 0 34%;
    -webkit-order: 0;
    align-self: stretch;
    box-sizing: border-box;
    display: flex;
    flex: 0 1 34%;
    flex-direction: column;
    order: 0;
    position: relative;
    min-width: 170px;
    max-width: 180px;
}

.Startmenu_Popup .Startmenu-Column2 {
    -ms-flex: 0 0 auto;
    -ms-flex-item-align: stretch;
    -ms-flex-order: 0;
    -webkit-align-self: stretch;
    -webkit-flex: 0 0 auto;
    -webkit-order: 0;
    align-self: stretch;
    box-sizing: border-box;
    display: flex;
    flex: 1 1 auto;
    order: 0;
    position: relative;
}

.Startmenu_Popup .LoginUser {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

    .Startmenu_Popup .LoginUser .ImageContainer {
        margin-top: 20px;
        display: flex;
        justify-content: center;
    }

        .Startmenu_Popup .LoginUser .ImageContainer .UserImage {
            min-width: 70px;
            min-height: 70px;
            max-width: 50%;
            height: auto;
            align-self: center;
            border-radius: 34px;
            box-shadow: 0px 0px 11px 2px white;
            border: 1px solid;
            background-color: white;
            background-image: url(User_Unknown.png);
            background-repeat: no-repeat;
            background-size: contain;
            background-position: center;
        }

    .Startmenu_Popup .LoginUser > span {
        margin-top: 10px
    }

.TaskBarButton {
    align-items: center;
    color: #FFFFFF;
    cursor: default;
    display: flex;
    flex-direction: row;
    font-family: Tahoma;
    font-size: 12px;
    height: 34px;
    margin-right: 1px;
    padding: 5px;
    padding: 1px 10px;
    position: relative;
    text-decoration: none;
    text-decoration: none;
    text-decoration: none;
    text-shadow: 1px 1px 20px #000000;
}

    .TaskBarButton .TaskBarButtonUnderline {
        /*background-color: rgb(118, 185, 237);*/
        background-color: rgba(118, 185, 237, 0.6);
        bottom: 0;
        height: 2px;
        left: 50%;
        position: absolute;
        transform: translateX(-50%);
        transition: all 150ms;
        width: 90%;
    }

    .TaskBarButton:hover {
        background: #191c1f;
    }

        .TaskBarButton:hover .TaskBarButtonUnderline {
            width: 100%;
        }

    .TaskBarButton.IsActive, .TaskBarButton:active {
        background: #333539;
    }

        .TaskBarButton.IsActive .TaskBarButtonUnderline, .TaskBarButton:active .TaskBarButtonUnderline {
            width: 100%;
            background-color: rgba(219, 255, 0, 0.56);
        }

        .TaskBarButton.IsActive:hover, .TaskBarButton:active:hover {
            background: #474a4d;
        }



    .TaskBarButton > img {
        width: 32px;
        height: 32px;
        margin-right: 3px;
        pointer-events: none;
    }

    .TaskBarButton > span {
        margin-top: auto;
        margin-bottom: auto;
    }

.dx-rtl .TaskBarButton > img {
    margin-right: unset;
    margin-left: 3px;
}

.TTaskbarStaticButton-Image {
    pointer-events: none;
    vertical-align: middle;
}

.TTaskbarStaticButton {
    align-self: stretch;
    display: flex;
    min-height: 32px;
}

.TTaskbarStaticButton-Root {
    align-items: center;
    border-color: transparent;
    border-style: solid;
    border-width: 1px;
    display: flex;
    flex: 1 0 auto;
    flex-direction: row;
    justify-content: center;
    padding: 0px 5px;
}

.THorizontalContentAlignment-Left > .TTaskbarStaticButton-Root {
    justify-content: flex-start;
}

.TTaskbarControl-FarContainer {
    margin: 0px 6px;
}

.TTaskbarControl-DateTimeOuter {
    width: 95px;
    display: flex;
    justify-content: center;
}


.TTaskbarControl-DateTimeInner {
    display: flex;
    flex-direction: column;
    align-items: center;
    align-content: center;
    align-self: center;
}

.TTaskbarStaticButton > div:hover {
    background-color: rgba(255, 255, 255, 0.25);
    border-color: #797676;
}

.TTaskbarStaticButton > div:active {
    background-color: rgb(198 220 247);
    border-color: rgb(39 77 138);
    color: #062b63;
}


/*#endregion*/



/*#region TPager */
.TPager {
    display: flex;
    flex-direction: row;
    align-items: center;
    overflow: hidden;
    width: 100%;
    min-height: 30px;
    outline: none;
    padding: 0px 1px;
    box-sizing: border-box;
    justify-content: stretch;
}

    .TPager .TPagerButton {
        margin: 0px 1px;
        min-width: 35px;
        flex: 0 0 0%;
        min-height: 24px;
    }

    .TPager .TPagenumberContainer {
        display: flex;
        flex-direction: row;
        justify-items: center;
        border-radius: 4px;
        padding: 0px 3px;
        align-items: flex-start;
        width: auto;
        flex: 0 1 auto;
    }

    .TPager .TPageCountView {
        text-align: center;
        width: auto;
        align-self: center;
        flex: 0 1 auto;
        margin: 0px 5px;
    }


    .TPager .TPagerRowCountContainer {
        background: white;
        min-width: 50px;
        text-align: center;
        border: 1px solid #000000a8;
        height: 100%;
        margin: 0px 5px;
        min-height: 22px;
        justify-content: center;
        align-content: center;
        display: flex;
        align-items: center;
        border-radius: 4px;
        padding: 0px 5px;
        justify-self: flex-end;
    }

    .TPager .TPageSizeCombo {
        width: 54px;
        height: 100%;
        justify-self: flex-end;
        flex: 0 1 70px;
        display: flex;
        margin-left: auto;
    }

.dx-rtl .TPager .TPageSizeCombo {
    margin-left: unset;
    margin-right: auto;
}
/*#endregion */

/*#region Reporting */

.TReporting-BreadCrumbButtonContainer {
    align-items: center;
    align-self: center;
    cursor: pointer;
    margin-bottom: 5px;
    margin-right: 10px;
    display: flex;
}

    .TReporting-BreadCrumbButtonContainer:not(:nth-child(1))::before {
        content: '<';
        margin-left: 5px;
    }

.TReporting-BreadCrumb {
    min-height: 36px;
    display: flex;
    flex: 0 0 auto;
    flex-direction: row;
    align-self: stretch;
    flex-wrap: wrap;
    padding: 0px 10px;
}

.TReporting-BreadCrumbButtonText {
    margin: 5px;
}

.TReporting-BreadCrumbButton {
    padding: 5px;
    align-items: center;
    text-align: left !important;
}

.dx-rtl .TReporting-BreadCrumbButton {
    text-align: right !important;
}

.TRporting-DataGridContainer {
    /* flex: 1 1 auto; */
    /* align-self: stretch; */
    /* box-sizing: border-box; */
    /* display: flex; */
    /* flex-direction: column; */
    /* justify-content: stretch; */
    /* position: relative; */
    /* width: 100%; */
    /* height: 100%; */
    /* padding: 0px 5px 5px 5px; */
}

/*#endregion */



/*#region Dashboard */

.TDashboardControlContainer {
    background-color: white;
    border: 1px solid;
    border-color: #00000080;
    border-radius: 3px;
    box-sizing: border-box;
    height: 100%;
    overflow: auto;
    padding: 10px;
    position: absolute;
    width: 100%;
}

    .TDashboardControlContainer.TDashboardControlGrid {
        border-width: 0px;
    }

.TDashboardControlChart {
    justify-content: center;
}

.TDashboardControlCard {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 5px;
}

    .TDashboardControlCard .TDashboard-cardItem {
        border-radius: 4px;
        border-style: solid;
        border-width: 1px;
        display: table;
        height: 104px;
        margin: 5px;
        transition: 0.3s;
        width: 200px;
    }

.TDashboardControlSelector {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
}

    .TDashboardControlSelector .TSelectorItem {
        align-items: center;
        border-color: transparent;
        border-radius: 2px;
        border-style: solid;
        border-width: 0px;
        display: flex;
        margin: 0px;
        min-height: 21px;
        padding: 1px 3px;
    }


.TDashboard-Container {
    box-sizing: border-box;
    margin: 10px;
    overflow: hidden;
    width: auto;
}

.TDashboardControlGauge {
    align-items: center;
    background-color: white;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    transition: all ease-in-out 200ms;
}

    .TDashboardControlGauge .TGaugeItem {
        border: 1px solid #00000030;
        border-radius: 4px;
        box-sizing: border-box;
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        height: 200px;
        margin: 2px;
        min-height: 170px;
        overflow: hidden;
        padding: 5px;
        width: 250px;
    }

    .TDashboardControlGauge .TDeltaContainer {
        display: inline;
        flex-direction: row;
        text-align: center;
        width: 100%;
    }

        .TDashboardControlGauge .TDeltaContainer .TDeltaImage {
            display: inline;
        }

        .TDashboardControlGauge .TDeltaContainer .TDeltaText {
            display: inline;
            margin-left: 5px;
        }

.TDashboardControlSelector {
    background-color: white;
    flex-direction: row;
}

    .TDashboardControlSelector .Horizontal {
        flex-direction: column;
    }

.TDashboardControlRangeFilter {
    background-color: white;
    box-sizing: border-box;
    height: 100%;
    width: 100%;
}

.TDashboardControlSelector .TSelectorText {
    margin: 0px;
}

.TDashboard-TextBox {
    background-color: white;
    border: 1px solid rgb(198, 198, 198);
    border-radius: 3px;
    height: 100%;
    overflow: auto;
    padding: 0px 5px;
    width: 100%;
    -moz-box-shadow: inset 0px 0px 9px 14px rgba(186,196,215,0.62);
    box-shadow: 3px 3px 4px 1px rgba(153, 179, 230, 0.62);
}


.TDashboard-Image {
    height: 100%;
    width: 100%;
}

.TDashboard-Map {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    position: inherit;
    width: 100%;
    height: 100%;
}

.TDashboardControlCard .TDashboard-cardItemSparkline {
    height: 33%;
    padding: 5px;
}

.TDashboardControlCard .TDashboard-cardItemSeries {
    float: left;
    text-align: left;
}

.TDashboardControlCard .TDashboard-cardItemImage {
    float: right;
}

.TDashboardControlCard .TDashboard-cardItemSparklineValue {
    float: left;
}

.TDashboardControlCard .TDashboard-cardItemElementSeries {
    float: right;
}

.TDashboardControlCard .TDashboard-cardItemGroupHeader {
    margin: 0px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 180px;
}

.TDashboardControlCard .TDashboard-cardItemTitle {
    text-align: center;
    font-weight: bold;
}
/*#endregion */

/*#region Form */

.TForm-Closing {
    animation: TFormClosing 500ms;
}

@keyframes TFormClosing {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: scale(0.4);
        visibility: collapse;
    }
}

.Jiggling {
    animation: jiggle 170ms;
    animation-iteration-count: 5;
}

.TForm-AlwaysOnTop {
    z-index: 100000 !important;
}

.TForm {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    margin: 0px;
    min-height: 50px;
    min-width: 200px;
    opacity: 1;
    position: fixed;
    transition: all 0.3s;
    transition-timing-function: ease-in-out;
    z-index: 1500;
}

    .TForm.Modal .Modal-Container {
        background: rgba(49, 49, 49, 0.1);
        height: 100vh;
        left: 0;
        position: fixed;
        top: 0;
        width: 100vw;
    }

    .TForm.Maximized {
        height: calc(100vh - 40px) !important;
        left: 0 !important;
        top: 0 !important;
        transition: all 0.2s;
        width: 100vw !important;
    }

    .TForm.Minimized {
        left: -50vw !important;
        opacity: 0 !important;
        top: 100vh !important;
        transform: scale(0) !important;
        transform-origin: center;
        transition: all 0.7s;
        width: 0;
    }

        .TForm.Minimized .Modal-Container {
            display: none;
        }




    .TForm.LeftMaximized {
        height: calc(100vh - 40px) !important;
        left: 0 !important;
        top: 0 !important;
        transition: all 0.2s;
        width: 50vw !important;
    }

    .TForm.RightMaximized {
        height: calc(100vh - 40px) !important;
        left: 50vw !important;
        top: 0 !important;
        transition: all 0.2s;
        width: 50vw !important;
    }



    .TForm .TFormMover {
        flex: 1 1 100%;
        display: flex;
        align-self: stretch;
        box-sizing: border-box;
        width: auto;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .TForm .TFormIcon {
        flex: 0 1 auto;
        align-self: center;
        width: 16px !important;
        height: 16px !important;
        vertical-align: middle;
        pointer-events: none;
        margin-right: 4px;
    }



    .TForm .TForm-Root {
        -moz-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
        -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
        align-content: stretch;
        border-style: solid;
        border-width: 1px;
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        height: 100%;
        width: 100%;
        z-index: 1;
    }

    .TForm .TForm-TitleBack {
        color: rgba(255, 255, 255, 0.80);
        display: flex;
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#797979', endColorstr='#333333',GradientType=0 );
        flex-direction: row;
        min-height: 28px;
        padding-left: 5px;
        padding-right: 5px;
        position: relative;
        box-sizing: border-box;
        overflow: hidden;
        flex: 0 1 auto;
        align-items: center;
    }

    .TForm .TForm-Title-Text {
        align-self: center;
        white-space: nowrap;
        flex: 1 1 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        /*box-sizing: border-box;
        color: white;
        margin-bottom: 3px;*/
        width: 100%;
        line-height: normal;
    }

    .TForm .TForm-Title-ButtonContainer {
        align-self: center;
    }

    .TForm .TForm-ContentBack-Outer {
        box-sizing: border-box;
        display: flex;
        padding: 4px;
        padding-top: 0px;
        position: relative;
        overflow: hidden;
        flex: 1;
    }

    .TForm .TForm-ContentBack-Inner {
        align-self: stretch;
        background-color: #838383;
        border: 1px solid transparent;
        border-color: #484848;
        box-sizing: border-box;
        display: flex;
        flex: 1 1 auto;
        height: auto;
        overflow: hidden;
        transition-duration: 500ms;
        width: auto;
        position: relative;
        min-height: 100%;
        min-width: 100%;
    }

    .TForm .window-buttons {
        align-self: center;
        font-weight: bold;
        width: 100%;
        height: 100%;
    }

.dx-rtl .TForm.Minimized {
    left: 80vw !important;
}

.dx-rtl .TForm .TFormIcon {
    margin-left: 4px;
    margin-right: 0px;
}

.dx-rtl .TForm .TForm-TitleBack {
    padding-left: 5px;
    padding-right: 5px;
}

.TFormDockPreview {
    border: 6px dotted #ffffff8c;
    width: 100%;
    height: 100%;
    pointer-events: none;
    position: fixed;
    left: 0px;
    top: 0px;
    z-index: 1;
    box-sizing: border-box;
    visibility: collapse;
    border-style: ridge;
    background-color: #00000038;
    backdrop-filter: blur(5px);
}

    .TFormDockPreview.Maximized {
        height: calc(100vh - 40px) !important;
        left: 0 !important;
        top: 0 !important;
        transition: all 0.2s;
        width: 100vw !important;
        visibility: visible;
    }

    .TFormDockPreview.LeftMaximized {
        height: calc(100vh - 40px) !important;
        left: 0 !important;
        top: 0 !important;
        transition: all 0.2s;
        width: 50vw !important;
        visibility: visible;
    }

    .TFormDockPreview.RightMaximized {
        height: calc(100vh - 40px) !important;
        left: 50vw !important;
        top: 0 !important;
        transition: all 0.2s;
        width: 50vw !important;
        visibility: visible;
    }
/*#endregion */


/*#region TLoadingPanel*/
.TFormLockPanel {
    background: transparent;
    position: absolute;
    width: 100%;
    height: 100%;
    /*Mehdi:Top and left is too important, bypass the parent padding*/
    top: 0px;
    left: 0px;
}

.TLoadingPanel {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: auto;
    z-index: 1000;
    box-sizing: border-box;
    /*Mehdi:Top and left is too important, bypass the parent padding*/
    top: 0px;
    left: 0px;
}

    .TLoadingPanel > .TLoadingPanel-Content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: auto;
        background: rgba(198,220,247,1);
        height: 186px;
        border-radius: 10px;
        -moz-box-shadow: 0px 0px 5px 5px rgba(0,0,0,23%);
        -webkit-box-shadow: 0px 0px 5px 5px rgb(0 0 0 / 23%);
        box-shadow: 0px 0px 5px 5px rgb(0 0 0 / 23%);
        border: 1px solid;
        padding: 15px 30px;
        height: auto;
        min-width: 100px;
        min-height: 70px;
    }

        .TLoadingPanel > .TLoadingPanel-Content > .TextContainer {
            flex: 0 0 auto;
            margin-top: 5px;
            color: #333333f0;
            direction: ltr;
            font-family: tahoma;
            font-size: large;
            text-shadow: 3px 2px 6px #b7b5d6;
            max-width: 500px;
            max-height: 300px;
        }
/*#endregion*/

/*#region LoginPage */
.dx-rtl .LoginPage .UserImageContainer {
    margin-right: unset;
    margin-left: 23px;
}

.LoginPage {
    height: 100%;
    background: url('/Content/Images/backgrounds/login.png');
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    width: 100%;
    justify-content: center;
}

    .LoginPage .LanguageSelector {
        position: absolute;
        width: 49px;
        height: 28px;
        display: flex;
        box-shadow: -2px 3px 7px black !important;
        bottom: 17px;
        left: 29px;
        align-self: flex-start;
        background: #faebd787;
    }

    .LoginPage .ProductNameContainer {
        position: relative;
        background-color: #0000001f;
        justify-self: center;
        min-height: 42px;
        display: flex;
        justify-content: center;
        align-items: center;
        align-self: stretch;
        border-radius: 3px 3px 0px 0px;
    }

        .LoginPage .ProductNameContainer .ProductName {
            font-size: 19px;
            font-weight: bold;
            opacity: 1;
            color: black;
            /*text-shadow: 0px 0px 8px black;*/
        }

    .LoginPage .UserImageContainer {
        position: absolute;
        min-width: 110px;
        min-height: 110px;
        margin-top: 65px;
        display: flex;
        align-self: flex-end;
        margin-right: 32px;
        z-index: 100;
    }


        .LoginPage .UserImageContainer .UserImage {
            transition: background 500ms ease 0s;
            background-repeat: no-repeat;
            background-position: center center;
            background-size: contain;
            border: 1px solid rgb(0 0 0 / 70%);
            background-origin: content-box;
            width: 100%;
            height: auto;
            border-radius: 360px;
            background-color: white;
            box-shadow: inset 0 0 13px 0px black;
        }

    .LoginPage .LoginContainer {
        background-repeat: no-repeat;
        align-self: center;
        justify-self: center;
        display: flex;
        border: 1px solid;
        border-radius: 4px;
        background-color: #ffffff55;
        flex-direction: column;
        position: relative;
        box-sizing: border-box;
        box-shadow: 0 0 6px black;
        backdrop-filter: blur(60px);
    }

        .LoginPage .LoginContainer .LoginImage .LoginBox {
            text-align: center;
            display: flex;
            flex-direction: column;
            justify-content: start;
            align-items: center;
            width: 391px;
            justify-self: center;
            height: 100%;
        }

        .LoginPage .LoginContainer .LoginBox {
            align-self: stretch;
            background-color: #00000030;
            width: 430px;
            margin: 8px;
            box-sizing: border-box;
            border-radius: 5px;
            border: 1px solid #0000006e;
            position: relative;
            display: flex;
            flex-direction: column;
            padding: 5px;
            padding-bottom: 10px;
            height: 100%;
            min-height: 100px;
        }

        .LoginPage .LoginContainer .TextBox {
            /* height: 30px; */
            width: 100%;
        }

        .LoginPage .LoginContainer .TextBoxContainer {
            height: 40px;
            /*background-color: #0000006e;*/
            border: 1px solid #00000054;
            border-radius: 4px;
            margin: 0px 10px;
            width: 54%;
            display: flex;
            justify-content: stretch;
            align-items: center;
            padding: 0px 2px;
            box-sizing: border-box;
            position: relative;
            box-shadow: inset 0 0 2px #fafafa;
        }

    .LoginPage.ForgotPassword .LoginContainer .TextBoxContainer {
        width: 100%;
        align-self: center;
    }


    .LoginPage .LoginContainer .TextBoxContainer.UserName {
        margin-top: 17px;
    }

        .LoginPage .LoginContainer .TextBoxContainer.UserName > ttextedit > div.TInputContainer.TNeedMargin > input {
            height: 30px;
        }

    .LoginPage .LoginContainer .TextBoxContainer.Password {
        margin-top: 11px;
    }

        .LoginPage .LoginContainer .TextBoxContainer.Password > ttextedit > div.TInputContainer.TNeedMargin > input {
            height: 30px;
        }

    .LoginPage .LoginContainer .Button {
        min-height: 30px;
        margin: 0px 5px;
    }

        .LoginPage .LoginContainer .Button.EnterToSystem {
            background: #c8c3c3;
        }

        .LoginPage .LoginContainer .Button.ForgotPassword {
            background: #ffffff40;
            border: unset;
            justify-self: flex-end;
        }

    .LoginPage .LoginContainer .RememberMe {
        margin: 10px;
        color: white;
    }

    .LoginPage .LoginContainer .MessageContainer {
        min-width: 265px;
        min-height: 19px;
        background-color: #e3e3e3;
        margin-top: 300px;
        border-radius: 14px;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 1px solid black;
        flex: 1 1 auto;
        box-shadow: 0px 0px 8px 0px #00000080;
        position: absolute;
        text-shadow: 0px 0px 10px #18020e;
        font-size: 14px;
        padding: 15px;
        align-self: center;
    }

    .LoginPage .LoginContainer .ButtonContainer {
        display: flex;
        justify-content: center;
        flex-direction: row-reverse;
        margin-top: 10px;
    }
/*#endregion */

/*#region TSingle File Selector & TMultiple File Selector */
.TFileContainer {
    /* margin: 0px 0px 0px 1px; */
    direction: ltr;
    display: flex;
    flex-grow: 1;
    flex-shrink: 1;
    width: 100%;
    align-self: stretch;
    height: 100%;
    justify-content: flex-start;
    overflow: hidden;
}

.dx-rtl .TFileContainer {
    justify-content: flex-end;
}

.TFileContainer > .TFileItem {
    padding: 0px 3px 0px 3px;
    background: rgb(73,104,160);
    background: -moz-linear-gradient(top, rgba(104,140,191,1) 0%, rgba(82,123,186,1) 45%, rgba(46,82,142,1) 46%, rgba(47,83,143,1) 54%, rgba(47,83,143,1) 54%, rgba(115,152,206,1) 100%);
    background: -webkit-linear-gradient(top,rgba(104,140,191,1) 0%,rgba(82,123,186,1) 45%,rgba(46,82,142,1) 46%,rgba(47,83,143,1) 54%,rgba(47,83,143,1) 54%,rgba(115,152,206,1) 100%);
    background: linear-gradient(to bottom, rgba(104,140,190,1) 0%,rgba(82,123,186,1) 45%,rgba(46,82,142,1) 46%,rgba(47,83,143,1) 54%,rgba(47,83,143,1) 54%,rgba(115,152,206,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4968a0', endColorstr='#7398ce',GradientType=0 );
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    color: white;
    display: flex;
    font-size: xx-small;
    justify-content: center;
    align-items: center;
    line-height: 16px;
    border: 1px solid rgb(39 77 138);
}

    .TFileContainer > .TFileItem + .TFileItem {
        margin-left: 1px;
    }

.TFileItem-Text {
    color: rgb(236, 236, 236);
    text-decoration: none;
    height: 14px;
}

.TFileItem:hover,
.TFileItem:focus {
    box-shadow: inset 0px 0px 1px 1px rgb(174 198 240);
    border-color: #062b63;
}

.TFileItem-Image {
    height: 14px;
}
/*#endregion */


/*#region Report Explorer */
.ReportExplorer {
}


    .ReportExplorer .TListBoxEdit-Item {
        width: 250px;
    }

.ReportExplorerItem {
    padding: 1px;
    display: flex;
    flex-direction: row;
    position: relative;
    justify-content: center;
    align-items: center;
    margin: 5px;
    width: 100%;
}

    .ReportExplorer .TListBoxEdit-Item > span,
    .ReportExplorerItem > span {
        align-self: center;
        width: 100%;
        margin: 0px 4px;
        white-space: break-spaces;
    }

    .ReportExplorer .TListBoxEdit-Item > img,
    .ReportExplorerItem > img {
        width: auto;
        height: auto;
        min-height: 16px;
        max-width: 48px;
        max-height: 48px;
    }
/*#endregion */

/*#region TProgressBar */
.TProgressBar {
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    background: rgb(208,216,231);
    background: -moz-linear-gradient(top, rgba(208,216,231,1) 0%, rgba(230,234,242,1) 22%, rgba(255,255,255,1) 100%);
    background: -webkit-linear-gradient(top, rgba(208,216,231,1) 0%,rgba(230,234,242,1) 22%,rgba(255,255,255,1) 100%);
    background: linear-gradient(to bottom, rgba(208,216,231,1) 0%,rgba(230,234,242,1) 22%,rgba(255,255,255,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d0d8e7', endColorstr='#ffffff',GradientType=0 );
    border-color: #284172;
    border-style: solid;
}

    .TProgressBar .TProgressViewer {
        left: 0px;
        top: 0px;
        background-color: rgb(47 83 143);
        width: 0%;
        height: 100%;
        position: absolute;
        transition-duration: 0.5s;
        transition-timing-function: ease-in-out;
        transition-property: width;
    }

    .TProgressBar .TProgressStatus {
        left: 50%;
        top: 50%;
        position: absolute;
        transform: translate(-50%, -50%);
        color: white;
        mix-blend-mode: difference;
    }

/*#endregion */

/*#region TImageContentControl */
.TImageContentControl {
    display: flex;
    flex-direction: row;
    align-items: center;
    overflow: hidden;
    flex: 0 1 auto;
}

    .TImageContentControl > .TImageContentControl-Image {
        vertical-align: middle;
        display: block;
    }

    .TImageContentControl > .TImageContentControl-Content {
        overflow: hidden;
    }

    .TImageContentControl > .TImageContentControl-Image + .TImageContentControl-Content {
        margin-left: 4px;
    }

.dx-rtl .TImageContentControl > .TImageContentControl-Image + .TImageContentControl-Content {
    margin-left: unset;
    margin-right: 4px;
}
/*#endregion */

/*#region TSlider*/
.TSlider {
    cursor: pointer;
    display: flex;
    position: relative;
    vertical-align: middle;
    width: 100%;
    height: 20px;
}

    .TSlider .TSliderRoot {
        width: 100%;
        display: flex;
        position: relative;
    }

    .TSlider .TSliderLabel {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        border-radius: 2px;
        padding: 1px 2px;
        user-select: none;
        background-color: rgba(255, 255, 255, 0.70);
        pointer-events: none;
    }

    .TSlider .TSliderBar {
        position: relative;
        height: 5px;
        -webkit-border-radius: 2px;
        -moz-border-radius: 2px;
        -ms-border-radius: 2px;
        -o-border-radius: 2px;
        border-radius: 2px;
        background: rgba(115,152,205,1);
        border: 1px solid rgba(39,77,138,1);
        width: 100%;
        align-self: center;
        box-sizing: border-box;
        margin: auto 5px;
    }

    .TSlider .TSliderHandle {
        -moz-user-drag: none;
        -ms-user-drag: none;
        -o-user-drag: none;
        user-drag: none;
        -webkit-user-drag: none;
        pointer-events: auto;
        position: absolute;
        left: 0%;
        top: 50%;
        width: 9px;
        height: 17px;
        border: 1px solid #062b63;
        background-color: #a3c3ec;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        -ms-border-radius: 3px;
        -o-border-radius: 3px;
        border-radius: 3px;
        -webkit-box-sizing: content-box;
        -moz-box-sizing: content-box;
        box-sizing: content-box;
        background: rgb(189,215,255);
        background: -moz-linear-gradient(top, rgba(189,215,255,1) 0%, rgba(170,196,236,1) 50%, rgba(133,175,238,1) 50%, rgba(229,240,250,1) 100%);
        background: -webkit-linear-gradient(top, rgba(189,215,255,1) 0%,rgba(170,196,236,1) 50%,rgba(133,175,238,1) 50%,rgba(229,240,250,1) 100%);
        background: linear-gradient(to bottom, rgba(189,215,255,1) 0%,rgba(170,196,236,1) 50%,rgba(133,175,238,1) 50%,rgba(229,240,250,1) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bdd7ff', endColorstr='#e5f0fa',GradientType=0 );
        transform: translate(-50%,-50%);
        opacity: 0.9;
    }


/*#endregion*/

/*#region TViewPartGrid*/
.TViewPartGrid {
    width: 100%;
    height: 100%;
    max-width: unset !important;
}
/*#endregion*/


/*#region Custom Grid Control*/

.TCustomGrid-OuterPanel {
    display: flex;
    flex-direction: column;
    user-select: none;
    background-clip: border-box;
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
    height: 100%;
    width: 100%;
    color: black;
}

    .TCustomGrid-OuterPanel.ShowBorder {
        padding: 3px;
        border: 1px solid #021743;
        border-radius: 5px;
        border-color: #021743;
        background: rgb(176,211,255);
        background: -moz-linear-gradient(top, rgba(176,211,255,1) 0%, rgba(136,166,204,1) 100%);
        background: -webkit-linear-gradient(top, rgba(176,211,255,1) 0%,rgba(136,166,204,1) 100%);
        background: linear-gradient(to bottom, rgba(176,211,255,1) 0%,rgba(136,166,204,1) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b0d3ff', endColorstr='#88a6cc',GradientType=0 );
    }

.TCustomGrid-MiddlePanel {
    position: relative;
    display: flex;
    height: 100%;
    width: 100%;
}

.TCustomGrid-InnerPanel {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    border: 1px solid #021743;
    border-radius: 5px;
    overflow: hidden;
    box-sizing: border-box;
    position: absolute;
}

.TCustomGrid-HeaderRoot {
    display: flex;
    flex: 0 1 auto;
    width: 100%;
    min-width: 100%;
    position: relative;
    box-sizing: border-box;
    background: rgb(148,184,233);
    background: -moz-linear-gradient(top, rgba(148,184,233,1) 0%, rgba(99,137,192,1) 2%, rgba(39,77,138,1) 50%, rgba(115,152,205,1) 100%);
    background: -webkit-linear-gradient(top, rgba(148,184,233,1) 0%,rgba(99,137,192,1) 2%,rgba(39,77,138,1) 50%,rgba(115,152,205,1) 100%);
    background: linear-gradient(to bottom, rgba(148,184,233,1) 0%,rgba(99,137,192,1) 2%,rgba(39,77,138,1) 50%,rgba(115,152,205,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#94b8e9', endColorstr='#7398cd',GradientType=0 );
    min-height: 25px;
    border: 0px solid #062b63;
    border-bottom-width: 1px;
    border-radius: 4px 4px 0px 0px;
    flex-direction: row;
    color: #D0EBFF;
}

.TCustomGrid-HeaderTopLeft {
    width: 20px;
    height: 100%;
    position: relative;
    box-sizing: border-box;
    flex: 0 0 auto;
    border: 0px solid #062b63;
    border-right-width: 1px;
}

.dx-rtl .TCustomGrid-HeaderTopLeft {
    border-left-width: 1px;
    border-right-width: 0px;
}

.TCustomGrid-HeaderTopRight {
    width: 13px;
    height: 100%;
    position: relative;
    box-sizing: border-box;
    flex: 0 0 auto;
    border: 0px solid #062b63;
    border-left-width: 1px;
}

.dx-rtl .TCustomGrid-HeaderTopRight {
    border-right-width: 1px;
    border-left-width: 0px;
}

.TCustomGrid-HeaderContainer {
    flex: 1 1 auto;
    width: fit-content;
    overflow: hidden;
    display: flex;
}

.TCustomGrid-Header-Row {
    display: flex;
    flex-direction: row;
    box-sizing: border-box;
    flex: 1 0 auto;
    min-width: 100%;
    position: relative;
}

    .TCustomGrid-Header-Row .TCustomGrid-Header-Content {
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
    }

.TCustomGrid-SelectAllCheckBoxContainer {
    justify-content: center;
    align-content: center;
    display: flex;
    width: 26px;
    border: 0px solid transparent;
    border-right-width: 1px;
    border-right-color: #062b63;
}

.TCustomGrid-Row .TCustomGrid-SelectAllCheckBoxContainer {
    border-right-color: #c3cedc;
}

.TCustomGrid-ResizePresenter {
    height: 100%;
    width: 5px;
    background-color: #a3c3ec80;
    top: 0px;
    left: 105.9px;
    position: absolute;
    transform: translateX(-50%);
    cursor: col-resize;
    z-index: 1;
    pointer-events: none;
}

.TCustomGrid-Column-ResizerItem {
    position: absolute;
    right: 0px;
    background: #ce8a8a00;
    width: 12px;
    height: 100%;
    transform: translateX(50%);
    top: 0px;
    cursor: col-resize;
    z-index: 2;
}

.dx-rtl .TCustomGrid-Column-ResizerItem {
    right: unset;
    left: 0px;
    transform: translateX(-50%);
}

.TCustomGrid-Column {
    padding: 3px 5px;
    border-style: solid;
    border-width: 0px;
    border-color: #062b63;
    width: 100%;
    align-items: center;
    display: block;
    box-sizing: border-box;
    text-overflow: ellipsis;
    position: relative;
    min-width: 10px;
    box-shadow: inset -2px 2px 1px -2px rgb(255 255 255);
    display: flex;
    justify-items: stretch;
    flex: 0 0 auto;
}

    .TCustomGrid-Column.DragSource {
        background: rgb(148,184,233);
        background: -moz-linear-gradient(top, rgba(148,184,233,1) 0%, rgba(99,137,192,1) 2%, rgba(39,77,138,1) 50%, rgba(115,152,205,1) 100%);
        background: -webkit-linear-gradient(top, rgba(148,184,233,1) 0%,rgba(99,137,192,1) 2%,rgba(39,77,138,1) 50%,rgba(115,152,205,1) 100%);
        background: linear-gradient(to bottom, rgba(148,184,233,1) 0%,rgba(99,137,192,1) 2%,rgba(39,77,138,1) 50%,rgba(115,152,205,1) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#94b8e9', endColorstr='#7398cd',GradientType=0 );
    }

    .TCustomGrid-Column.DragEnter {
        /*background: green;*/
        /*pointer-events: none;*/
    }

    .TCustomGrid-Column .TCustomGrid-Column-Toolbar {
        display: flex;
        flex-direction: row;
        box-sizing: border-box;
    }

    .TCustomGrid-Column .TCustomGrid-Column-Sort {
        font: 12px/1 DXIcons;
        cursor: pointer;
        position: relative;
        font-weight: 900;
        color: rgb(198 220 247);
        min-width: 14px;
        /* border: 1px solid; */
        height: 14px;
        display: flex;
        justify-content: center;
        align-items: center;
        pointer-events: none;
        visibility: collapse;
    }

        .TCustomGrid-Column .TCustomGrid-Column-Sort.Asc,
        .TCustomGrid-Column .TCustomGrid-Column-Sort.Desc {
            visibility: visible;
        }

            .TCustomGrid-Column .TCustomGrid-Column-Sort.Asc:before {
                position: absolute;
                content: '\f052';
            }

            .TCustomGrid-Column .TCustomGrid-Column-Sort.Desc:before {
                position: absolute;
                content: '\f051';
            }

    .TCustomGrid-Column .TCustomGrid-Column-Filter {
        font: 10px/1 DXIcons;
        cursor: pointer;
        position: relative;
        font-weight: 900;
        color: rgb(99 137 192);
        min-width: 14px;
        /* border: 1px solid; */
        height: 14px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

        .TCustomGrid-Column .TCustomGrid-Column-Filter:hover,
        .TCustomGrid-Column.HasFilter .TCustomGrid-Column-Filter {
            color: rgb(198 220 247);
        }

    .TCustomGrid-Column .TCustomGrid-Column-Content {
        overflow: hidden;
        flex: 1 1 auto;
        box-sizing: border-box;
        text-overflow: ellipsis;
        display: flex;
        align-items: stretch;
        flex-direction: column;
    }

    .TCustomGrid-Column:first-child {
    }

    .TCustomGrid-Column:last-child {
        box-shadow: inset -1px 2px 1px -2px rgb(255 255 255);
        flex: 1 1 auto;
    }

    .TCustomGrid-Column + .TCustomGrid-Column {
        border-left-width: 1px;
    }

.dx-rtl .TCustomGrid-Column + .TCustomGrid-Column {
    border-left-width: 0px;
    border-right-width: 1px;
}

.TCustomGrid-ContentRoot {
    display: flex;
    position: relative;
    flex: 1 1 auto;
    flex-direction: row;
    overflow: hidden;
    height: 100%; /*For Saffari bug fix (not show scroller)*/
    width: 100%; /*For Saffari bug fix (not show scroller)*/
}

.TCustomGrid-Content {
    display: flex;
    overflow-x: auto;
    overflow-y: scroll;
    width: inherit;
    height: inherit;
    background-color: white;
    flex-direction: column;
}

.TCustomGrid-PagerRoot {
    padding: 5px;
    border-top-width: 1px;
    border-top-color: rgb(39 77 138);
    border-top-style: solid;
}

.TCustomGrid-RowSelectorContainer {
    width: 20px;
    border: 0px solid rgb(39 77 138);
    border-right-width: 1px;
    box-sizing: border-box;
    flex: 1 0 auto;
}

.TCustomGrid-RowSelector {
    width: 19px;
    height: 100%;
    background: rgb(123,155,200);
    background: -moz-linear-gradient(top, rgba(123,155,200,1) 0%, rgba(94,128,177,1) 100%);
    background: -webkit-linear-gradient(top, rgba(123,155,200,1) 0%,rgba(94,128,177,1) 100%);
    background: linear-gradient(to bottom, rgb(198 220 247) 0%,rgb(115 152 205) 20%,rgb(198 220 247) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7b9bc8', endColorstr='#5e80b1',GradientType=0 );
    position: absolute;
    transform: translateX(-20px);
}

.TCustomGrid-Row {
    display: flex;
    flex-direction: row;
    border: 0px solid transparent;
    border-bottom-width: 1px;
    width: fit-content;
    min-width: 100%;
    /*min-width: -moz-max-content;*/ /*For Firefox and saffari bug fix (if scroll not go to the end of line)*/
    flex: 1 0 auto;
    min-height: 25px;
}

    .TCustomGrid-Row.HorizontalLines {
        border-bottom-color: #c3cedc;
    }


    .TCustomGrid-Row.TCustomGrid-Row-Alternate {
        background: #eaf1fa;
    }

    .TCustomGrid-Row.TCustomGrid-Row-Selected {
        background: rgb(123,155,200);
        background: -moz-linear-gradient(top, rgba(123,155,200,1) 0%, rgba(94,128,177,1) 100%);
        background: -webkit-linear-gradient(top, rgba(123,155,200,1) 0%,rgba(94,128,177,1) 100%);
        background: linear-gradient(to bottom, rgba(123,155,200,1) 0%,rgba(94,128,177,1) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7b9bc8', endColorstr='#5e80b1',GradientType=0 );
        color: white;
    }

    .TCustomGrid-Row.TCustomGrid-Row-Focused {
        outline-width: 1px;
        outline-style: dotted;
        outline-color: rgb(47 83 143);
    }

    .TCustomGrid-Row.TCustomGrid-Row-Selected .TCustomGrid-Row-Cell {
        background: rgb(123,155,200);
        background: -moz-linear-gradient(top, rgba(123,155,200,1) 0%, rgba(94,128,177,1) 100%);
        background: -webkit-linear-gradient(top, rgba(123,155,200,1) 0%,rgba(94,128,177,1) 100%);
        background: linear-gradient(to bottom, rgba(123,155,200,1) 0%,rgba(94,128,177,1) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7b9bc8', endColorstr='#5e80b1',GradientType=0 );
        color: white;
    }

.TCustomGrid-Row-Cell {
    width: 100%;
    padding: 1px 3px;
    border: 0px solid transparent;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    height: unset; /*Mehdi:For Firefox and saffari Static Width bug fix*/
    flex: 0 0 auto; /*Mehdi:For Firefox and saffari Static Width bug fix*/
    overflow: hidden;
    position: relative;
    justify-content: center;
    align-items: stretch;
}

.CellAlign-Near {
    text-align: left;
    align-items: flex-start;
}

.CellAlign-Far {
    align-items: flex-end;
    text-align: right;
}

.CellAlign-Center {
    text-align: center;
    align-items: center;
}

.CellAlign-Stretch {
}

.TCustomGrid-Row-Cell > span {
    white-space: break-spaces;
    height: auto;
}

.TCustomGrid-Row-Cell + .TCustomGrid-Row-Cell {
    border-left-width: 1px;
}

.dx-rtl .TCustomGrid-Row-Cell + .TCustomGrid-Row-Cell {
    border-left-width: 1px;
    border-right-width: 1px;
}

.VerticalLines.TCustomGrid-Row-Cell + .VerticalLines.TCustomGrid-Row-Cell {
    border-left-color: #c3cedc;
}

.dx-rtl .VerticalLines.TCustomGrid-Row-Cell + .VerticalLines.TCustomGrid-Row-Cell {
    border-left-color: transparent;
    border-right-color: #c3cedc;
}

.TCustomGrid-Row-Cell:last-child {
    /*width: max-content !important;*/
    flex: 1 1 auto;
}

.TCustomGrid-TotalSummaryRoot {
    min-height: 28px;
    min-width: 100%;
    background-color: #a3c3ec;
    border: 0px solid rgb(39 77 138);
    border-top-width: 1px;
    background: linear-gradient(to bottom, rgb(198 220 247) 0%,#a3c3ec 100%);
    position: relative;
    overflow: hidden;
    flex: 1 0 auto;
}

.TCustomGrid-TotalSummary-Row {
    display: flex;
    flex-direction: row;
    box-sizing: border-box;
    flex: 1 0 auto;
    min-width: 100%;
    position: relative;
    height: 100%;
    width: fit-content;
}

.TGridColumn-TotalSummaryColumn-Outer {
    align-items: center;
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    padding: 3px;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
    height: 100%;
}

    .TGridColumn-TotalSummaryColumn-Outer:last-child {
        flex: 1 1 auto;
    }

.TGridColumn-TotalSummaryColumn-Inner {
    border: 1px solid #284172;
    flex: 1 0 auto;
    width: 100%;
    height: auto;
    overflow: hidden;
    padding: 0px 3px;
    box-sizing: border-box;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    background: rgb(208,216,231);
    background: -moz-linear-gradient(top, rgba(208,216,231,1) 0%, rgba(230,234,242,1) 22%, rgba(255,255,255,1) 100%);
    background: -webkit-linear-gradient(top, rgba(208,216,231,1) 0%,rgba(230,234,242,1) 22%,rgba(255,255,255,1) 100%);
    background: linear-gradient(to bottom, rgba(208,216,231,1) 0%,rgba(230,234,242,1) 22%,rgba(255,255,255,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d0d8e7', endColorstr='#ffffff',GradientType=0 );
    justify-content: space-evenly;
}


.TGridColumn-TotalSummary-Text {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 100%;
    display: inline-block;
    text-align: left;
}

.Row-In-Cell {
    padding: 1px 3px;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
    flex: 1 1 auto;
    min-height: 16px;
    /* width: 100%; */
}

    .Row-In-Cell + .Row-In-Cell {
        border-top-style: solid;
        border-top-color: #c3cedc;
        border-top-width: 1px;
        box-sizing: content-box;
    }

.dx-rtl .Row-In-Cell {
    align-items: flex-end;
}

.TCustomGrid-Row .TCustomGrid-Row-Cell.IsCellFocused {
    box-shadow: inset 0px 0px 2px 1px #062b63;
}

.TCustomGrid-Row > .TCustomGrid-Row-Cell.TEntityFieldTypeFile-Cell {
    direction: ltr;
    display: flex;
    align-items: flex-start;
}

    .TCustomGrid-Row > .TCustomGrid-Row-Cell.TEntityFieldTypeFile-Cell span {
        text-overflow: ellipsis;
        width: 100%;
        overflow: hidden;
    }
/*#region FireFox Specific Themes*/
@-moz-document url-prefix() {
    .TCustomGrid-HeaderTopRight {
        width: 18px;
    }
}
/*#endregion*/
/*#endregion*/

/*#region TContextMenu*/
.TContextMenu {
    position: fixed;
    opacity: 0;
    transform: scale(0);
    transition: transform 0.1s;
    transform-origin: top left;
    padding: 0;
    z-index: 9999999;
}

    .TContextMenu.display {
        opacity: 1;
        transform: scale(1);
    }

.dx-rtl .TContextMenu.display {
    transform-origin: right top;
}

.TContextMenu, .TContextMenu * {
    box-sizing: border-box;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

    .TContextMenu * {
        position: relative;
    }

.TCM_LeftRibbon {
    background-color: rgb(0 0 0 / 8%);
    width: 30px;
    border-right: 1px solid rgb(198 220 247);
    top: 1px;
    bottom: 1px;
    left: 1px;
    display: block;
    position: fixed;
}

.dx-rtl .TCM_LeftRibbon {
    left: unset;
    right: 1px;
    border-left: 1px solid rgb(198 220 247);
    border-right: unset;
}

.ContextMenuPanel {
    list-style-type: none;
    padding: 2px;
    margin: 0;
    background-color: rgb(255 255 255);
    box-shadow: 0px 0px 5px 0px rgb(39 77 138 / 59%);
    border: 1px solid #062b63;
    font-size: 12px;
    box-sizing: border-box;
    max-height: 70Vh;
    overflow: auto;
}

.TContextMenuItem {
    padding-right: 24px;
    cursor: pointer;
    white-space: nowrap;
    display: flex;
    flex-direction: row;
    height: 28px;
    align-items: center;
    color: black;
    z-index: 1;
    border-style: solid;
    border-width: 1px;
    border-color: transparent;
}

.dx-rtl .TContextMenu .TContextMenuItem {
    padding-right: unset;
    padding-left: 24px;
}

.TContextMenu .TContextMenuItem:hover,
.TContextMenu .TContextMenuItem:focus,
.TContextMenu .TContextMenuItem.IsSelected {
    background-color: rgb(94 128 177);
    color: white;
    border-color: rgb(39 77 138);
}

.IsChecked > .TCM_Icon_Container {
    background: rgb(198 220 247);
    box-shadow: inset 0px 0px 1px 1px #062b63;
}

.TCM_Icon_Container {
    width: 28px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-self: stretch;
    pointer-events: none;
}

    .TCM_Icon_Container > .TCM_Icon {
        width: 16px;
        height: 16px;
    }

.TCM_Text {
    margin: 0px 0px 0px 5px;
    pointer-events: none;
}

.dx-rtl .TCM_Text {
    margin: 0px 5px 0px 0px;
}

.TCM_Sub_Span {
    width: 1em;
    display: inline-block;
    text-align: center;
    position: absolute;
    top: 50%;
    right: 0.5em;
    transform: translateY(-50%);
    pointer-events: none;
}

.dx-rtl .TContextMenu .TContextMenuItem .TCM_Sub_Span {
    right: unset;
    left: 0.5em;
}

.TContextMenu .TContextMenuItem > .ContextMenuPanel {
    position: absolute;
    top: 0;
    left: 100%;
    transform: scale(0);
    transform-origin: top left;
    transition: transform 0.2s;
    visibility: hidden;
}

.dx-rtl .TContextMenu .TContextMenuItem > .ContextMenuPanel {
    left: unset;
    right: 100%;
    transform-origin: top right;
}

.TContextMenu .TContextMenuItem.IsChildOpen > .ContextMenuPanel {
    transform: scale(1);
    visibility: visible;
}

.TContextMenu .TCM_Separator {
    border-bottom: 1px solid rgb(198 220 247);
    margin: 3px 0px;
    padding: 0;
    cursor: default;
    height: auto;
    left: 28px;
    right: 0;
    width: calc(100% - 29px);
}

    .TContextMenu .TCM_Separator + .TCM_Separator {
        display: none;
    }

.dx-rtl .TContextMenu .TCM_Separator {
    left: unset;
    right: 28px;
}

.TContextMenu.cm_border_right > .ContextMenuPanel .ContextMenuPanel {
    left: unset;
    right: 100%;
}

.TContextMenu.cm_border_bottom > .ContextMenuPanel .ContextMenuPanel {
    top: unset;
    bottom: 0;
}

.TContextMenu .TContextMenuItem[disabled=""] {
    color: #777;
    cursor: default;
}

    .TContextMenu .TContextMenuItem[disabled=""]:hover {
        background-color: inherit;
    }



/*#endregion*/

/*#region Public-Announcement-Box*/
.Public-Announcement-Box {
    display: block;
    border: 1px solid #0000005c;
    border-radius: 3px;
    width: auto;
    height: auto;
    background: rgb(198 220 247 / 95%);
    justify-content: center;
    align-items: center;
    position: absolute;
    right: 18px;
    top: 18px;
    padding: 10px;
    box-shadow: 0 0 5px 4px rgb(230 234 242);
    flex: 1 1 auto;
    overflow-wrap: break-word;
    overflow: auto;
    max-height: 90%;
    max-width: 95%;
    z-index: 0;
}
/*#endregion*/

/*#region TTextEdit*/
.TTextEdit {
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    background: rgb(208,216,231);
    background: -moz-linear-gradient(top, rgba(208,216,231,1) 0%, rgba(230,234,242,1) 22%, rgba(255,255,255,1) 100%);
    background: -webkit-linear-gradient(top, rgba(208,216,231,1) 0%,rgba(230,234,242,1) 22%,rgba(255,255,255,1) 100%);
    background: linear-gradient(to bottom, rgba(208,216,231,1) 0%,rgba(230,234,242,1) 22%,rgba(255,255,255,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d0d8e7', endColorstr='#ffffff',GradientType=0 );
    border: 1px solid #284172;
    box-sizing: border-box;
    padding: 1px 1px;
    display: flex;
    align-content: stretch;
    flex-wrap: nowrap;
    justify-content: stretch;
    overflow: hidden;
    position: relative;
    height: auto;
    min-height: 21px;
    color: black;
}

    .TTextEdit.NoBorder,
    .NoBorder > .TTextEdit {
        background: unset;
        filter: unset;
        border: unset;
        padding: unset;
        min-height: unset;
    }

    .TTextEdit > .TInputContainer {
        width: 100%;
        height: 100%;
        display: flex;
        box-sizing: border-box;
        padding: 0px 2px;
        align-items: center;
        align-content: center;
        flex-wrap: nowrap;
        flex-direction: row;
    }

        .TTextEdit > .TInputContainer > textarea {
            resize: none;
            height: 100%;
        }

    .TTextEdit .TextPart {
        background: unset;
        border: unset;
        width: 100%;
        min-height: 16px;
        outline: 0;
        padding: 0px;
        vertical-align: middle;
        color: black;
        line-height: initial;
        height: auto;
        display: flex;
        /* overflow: hidden; */
        text-overflow: ellipsis;
        cursor: auto;
        align-self: center;
    }

    .TTextEdit .NullTextPart {
        pointer-events: none;
        position: absolute;
        margin: 1px 5px;
        color: gray;
        align-self: center;
    }

    .TTextEdit:not(.NoBorder):hover,
    .TTextEdit:not(.NoBorder):focus-within {
        -webkit-box-shadow: 0px 0px 2px 1px rgb(90 127 181 / 50%);
        -moz-box-shadow: 0px 0px 2px 1px rgba(90,127,181,0.5);
        box-shadow: inset 0px 0px 2px 1px rgb(90 127 181 / 50%);
    }

    .TTextEdit.TVerticalContentAlignment-Top .TextPart {
        /* vertical-align: top; */
        /* vertical-align: bottom; */
        /* line-height: 24px; */
    }

/*#endregion*/

/*#region Rich Text Edit*/
.cke_maximized {
    position: fixed !important;
}

.cke_top {
    background: #a3c3ec;
    background-image: linear-gradient(to bottom,rgb(198 220 247),#a3c3ec);
}
/*#endregion*/

/*#region TListBoxEdit*/
.TListBoxEdit {
    background-color: white;
    border: 1px solid #162c58;
    color: black;
    padding: 1px;
    position: relative;
    overflow: auto;
    justify-content: stretch;
    align-items: stretch;
    justify-items: stretch;
    display: flex;
    align-content: stretch;
    width: 100%;
    height: 100%;
    flex: 0 1 100%;
}

    .TListBoxEdit.NoBorder {
        border: 0px;
    }

.TListBoxEdit-Root {
    width: calc(100% - 2px);
    display: flex;
    position: absolute;
    flex: 1 1 100%;
    align-self: stretch;
    justify-self: stretch;
    height: calc(100% - 2px);
    flex-direction: column;
}

    .TListBoxEdit-Root > .TListBox-SearchBox {
        align-self: center;
        flex-basis: 30px;
        position: relative;
        box-sizing: border-box;
        width: 100% !important;
        padding: 5px;
    }

.TListBoxEdit-ItemsPanel {
    display: flex;
    overflow: auto;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    justify-items: stretch;
    width: 100%;
    height: 100%;
}

    .TListBoxEdit-ItemsPanel.TOrientation-Horizontal {
        align-items: flex-start;
        justify-items: flex-start;
        justify-content: flex-start;
        display: flex;
        align-content: flex-start;
    }

        .TListBoxEdit-ItemsPanel.TOrientation-Horizontal.WrapItems {
            flex-wrap: wrap;
        }

    .TListBoxEdit-ItemsPanel.TOrientation-Vertical.WrapItems {
        flex-wrap: wrap;
    }

        .TListBoxEdit-ItemsPanel.TOrientation-Vertical.WrapItems .TListBoxEdit-Item {
            width: auto;
        }

.TListBoxEdit-Item {
    display: flex;
    flex-direction: row;
    min-height: 24px;
    justify-content: flex-start;
    align-items: center;
    align-content: flex-start;
    padding: 0px 4px;
    box-sizing: border-box;
    border-radius: 0px;
    width: 100%;
    border-style: solid;
    border-width: 1px;
    border-color: transparent;
    border-radius: 1px;
    flex: 0 0 auto;
}

    .TListBoxEdit-Item:focus-within {
        outline: 1px dotted #062b63;
    }

    .TListBoxEdit-Item:hover {
        background-color: #a3c3ec;
        border-color: rgba(90,127,181,1);
        color: #062b63;
    }

    .TListBoxEdit-Item.IsSelected {
        background: rgb(123,155,200);
        background: -moz-linear-gradient(top, rgba(123,155,200,1) 0%, rgba(94,128,177,1) 100%);
        background: -webkit-linear-gradient(top, rgba(123,155,200,1) 0%,rgba(94,128,177,1) 100%);
        background: linear-gradient(to bottom, rgba(123,155,200,1) 0%,rgba(94,128,177,1) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7b9bc8', endColorstr='#5e80b1',GradientType=0 );
        color: white;
    }
/*#endregion*/

/*#region TNavBarControl*/
.TNavBarControl {
    display: flex;
    position: relative;
    background-color: white;
    border: 1px solid #062b63;
    box-sizing: border-box;
    justify-content: stretch;
    align-items: stretch;
    flex-direction: column;
    border-radius: 2px;
    padding: 1px;
    overflow-y: auto;
}

    .TNavBarControl > .TNavBarControl-Root {
        display: flex;
        box-sizing: border-box;
        align-self: stretch;
        width: 100%;
        height: 100%;
        flex: 1 0 auto;
        flex-direction: column;
    }

.TNavBarGroup + .TNavBarGroup {
    margin-top: 1px;
}

.TNavBarGroup {
    width: 100%;
    justify-content: stretch;
}

    .TNavBarGroup > .TNavBarGroup-Root {
        display: flex;
        width: 100%;
        flex-direction: column;
    }

.TNavBarGroup-Header {
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    cursor: pointer;
    font-size: 14px;
    position: relative;
    user-select: none;
    padding: 1px 8px;
    transition-duration: 300ms;
    background: rgb(94,132,186);
    background: -moz-linear-gradient(top, rgb(94,132,186) 0%, rgb(58,95,154) 50%, rgb(71,108,164) 100%);
    background: -webkit-linear-gradient(top, rgb(94,132,186) 0%,rgb(58,95,154) 50%,rgb(71,108,164) 100%);
    background: linear-gradient(to bottom, rgb(94,132,186) 0%,rgb(58,95,154) 50%,rgb(71,108,164) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5e84ba', endColorstr='#476ca4',GradientType=0 );
    color: #d0ebff;
    border-radius: 3px;
    border: 1px solid #062b63;
    display: flex;
    flex-direction: row;
    min-height: 20px;
    align-items: center;
}

    .TNavBarGroup-Header > .LayoutGroupExpandCollapseButton {
        transform: rotate(90deg);
        transition-duration: 300ms;
    }

.IsExpanded > .TNavBarGroup-Header > .LayoutGroupExpandCollapseButton {
    transform: rotate( 0deg);
    transition-duration: 300ms;
}

.IsExpanded > .TNavBarGroup-Header {
    border-radius: 3px 3px 0px 0px;
}

.TNavBarGroup-Content {
    border-width: 0px 1px 1px 1px;
    border-style: solid;
    border-color: transparent;
    border-radius: 0px 0px 3px 3px;
    transform-origin: top;
    flex-direction: column;
    max-height: 0px;
    padding: 0px 5px;
    overflow: hidden;
    transition-duration: 300ms;
    transition-timing-function: cubic-bezier(0.65, 0.05, 0.36, 1);
}

.IsExpanded > .TNavBarGroup-Content {
    transition-duration: 300ms;
    transition-timing-function: cubic-bezier(0.65, 0.05, 0.36, 1);
    max-height: 2000px;
    padding: 5px;
    border-color: #86a9d9;
}

.TNavBarItem {
    width: 100%;
    text-align: right;
    height: 24px;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    border: 1px solid transparent;
    border-radius: 2px;
    color: #000;
    padding: 0px 1px;
    overflow: hidden;
    align-items: center;
}

    .TNavBarItem:hover {
        color: white;
        /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#7499d0+0,6488bc+100 */
        background: rgb(116,153,208); /* Old browsers */
        background: -moz-linear-gradient(top, rgb(116,153,208) 0%, rgb(100,136,188) 100%); /* FF3.6-15 */
        background: -webkit-linear-gradient(top, rgb(116,153,208) 0%,rgb(100,136,188) 100%); /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(to bottom, rgb(116,153,208) 0%,rgb(100,136,188) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7499d0', endColorstr='#6488bc',GradientType=0 ); /* IE6-9 */
    }

        .TNavBarItem:hover:active {
            transform: translate(1px,1px);
            transition-duration: 200ms;
            opacity: 0.9;
        }
/*#endregion*/

/*#region TThicknessEdit*/
.TThicknessEdit {
    border-width: 0px;
    border-style: outset;
}

.TThicknessEdit-Root {
    position: relative;
    display: flex;
    width: 100%;
    min-height: 40px;
}

    .TThicknessEdit-Root > .Part_Left {
        left: 0px;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }

    .TThicknessEdit-Root > .Part_Top {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }

    .TThicknessEdit-Root > .Part_Right {
        right: 0px;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }

    .TThicknessEdit-Root > .Part_Bottom {
        position: absolute;
        left: 50%;
        bottom: 0px;
        transform: translateX(-50%);
    }
/*#endregion*/

/*#region TRadioGroup*/
.TRadioGroup {
    background-color: white;
    border: 1px solid #162c58;
    color: black;
    position: relative;
    overflow: auto;
    min-height: 20px;
    padding: unset;
}

.TRadioGroupRoot {
    position: absolute;
    display: flex;
    flex-wrap: wrap;
    height: 100%;
}

.TRadioButtonRoot {
    cursor: pointer;
    padding: 1px 2px;
    margin: 0px !important;
    display: flex;
    align-content: center;
    align-items: center;
}

.TRadioItemCircle-Outer {
    width: 12px;
    height: 12px;
    border: 1px solid #062b63;
    border-radius: 360px;
    align-self: center;
    display: flex;
    justify-content: center;
    background: rgb(194,204,225);
    background: -moz-linear-gradient(top, rgba(194,204,225,1) 0%, rgba(253,253,254,1) 100%);
    background: -webkit-linear-gradient(top, rgba(194,204,225,1) 0%,rgba(253,253,254,1) 100%);
    background: linear-gradient(to bottom, rgba(194,204,225,1) 0%,rgba(253,253,254,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c2cce1', endColorstr='#fdfdfe',GradientType=0 );
    padding: 1px;
    box-sizing: border-box;
}

.TRadioButtonRoot:focus-within {
    outline: 1px solid #062b63;
    outline-style: dotted;
}

.TRadioButtonRoot:hover .TRadioItemCircle-Outer {
    background: rgb(227,236,254);
    background: -moz-linear-gradient(top, rgba(227,236,254,1) 0%, rgba(174,198,240,1) 49%, rgba(174,198,240,1) 49%, rgba(152,186,236,1) 50%, rgba(174,203,254,1) 100%);
    background: -webkit-linear-gradient(top, rgba(227,236,254,1) 0%,rgba(174,198,240,1) 49%,rgba(174,198,240,1) 49%,rgba(152,186,236,1) 50%,rgba(174,203,254,1) 100%);
    background: linear-gradient(to bottom, rgba(227,236,254,1) 0%,rgba(174,198,240,1) 49%,rgba(174,198,240,1) 49%,rgba(152,186,236,1) 50%,rgba(174,203,254,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e3ecfe', endColorstr='#aecbfe',GradientType=0 );
}

.TRadioItemCircle-Inner {
    width: 90%;
    height: 90%;
    border: 1px solid #2a4276;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius: 11px;
    align-self: center;
    opacity: 0;
    background-color: rgb(39 77 138);
    background: #2a4276;
    background: rgb(174,203,254);
    background: -moz-linear-gradient(top, rgba(174,203,254,1) 0%, rgba(42,66,118,1) 50%, rgba(174,203,254,1) 100%);
    background: -webkit-linear-gradient(top, rgba(174,203,254,1) 0%,rgba(42,66,118,1) 50%,rgba(174,203,254,1) 100%);
    background: linear-gradient(to bottom, rgba(174,203,254,1) 0%,rgba(42,66,118,1) 50%,rgba(174,203,254,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aecbfe', endColorstr='#aecbfe',GradientType=0 );
    box-sizing: border-box;
}

.TRadioButtonRoot.IsSelected .TRadioItemCircle-Inner {
    opacity: 1;
    transition-duration: 0.3s;
}

.TRadioButtonText {
    overflow: hidden;
    flex: 1
}

.TRadioButtonImage {
}
/*#endregion*/
/*#region TResizable-Handle*/
.TResizable-Handle {
    background-color: #02020200;
    position: absolute;
    z-index: 50;
    pointer-events: auto;
    /* background-color: red; */
}

.dx-state-disabled .TResizable-Handle {
    cursor: default;
}

.TResizable-Handle-Left,
.TResizable-Handle-Right {
    height: 100%;
    top: 0px;
    width: 8px;
}

.TResizable-Handle-Left {
    cursor: e-resize;
    left: 0px;
}

.TResizable-Handle-Right {
    cursor: e-resize;
    right: 0px;
}

.TResizable-Handle-Top,
.TResizable-Handle-Bottom {
    height: 8px;
    left: 0px;
    width: 100%;
}

.dx-popup-fullscreen > .TResizable-Handle {
    display: none;
}

.TResizable-Handle-Top {
    cursor: s-resize;
    top: 0px;
}

.TResizable-Handle-Bottom {
    bottom: 0px;
    cursor: s-resize;
}

.TResizable-Handle-Corner-Bottom-Left,
.TResizable-Handle-Corner-Bottom-Right,
.TResizable-Handle-Corner-Top-Left,
.TResizable-Handle-Corner-Top-Right {
    height: 20px;
    width: 20px;
}

.TResizable-Handle-Corner-Top-Left {
    -moz-border-bottom-right-radius: 100%;
    -webkit-border-bottom-right-radius: 100%;
    border-bottom-right-radius: 100%;
    cursor: se-resize;
    left: -4px;
    top: -4px;
}

.TResizable-Handle-Corner-Top-Right {
    -moz-border-bottom-left-radius: 100%;
    -webkit-border-bottom-left-radius: 100%;
    border-bottom-left-radius: 100%;
    cursor: ne-resize;
    right: -4px;
    top: -4px;
}

:not(.dx-rtl) > .TResizable-Handle-Corner-Bottom-Right {
    -moz-border-top-left-radius: 100%;
    -webkit-border-top-left-radius: 100%;
    background-position: 20px 20px;
    border-top-left-radius: 100%;
    bottom: -4px;
    cursor: se-resize;
    height: 20px;
    right: -4px;
    width: 20px;
    x: 10px;
    y: 10px;
}

:not(.dx-rtl) > .TResizable-Handle-Corner-Bottom-Left {
    -moz-border-top-right-radius: 100%;
    -webkit-border-top-right-radius: 100%;
    border-top-right-radius: 100%;
    bottom: -4px;
    cursor: ne-resize;
    left: -4px;
}

.dx-rtl .TResizable-Handle-Corner-Bottom-Left {
    -moz-border-top-left-radius: 100%;
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -webkit-border-top-left-radius: 100%;
    -webkit-transform: rotate(90deg);
    background-position: 20px 20px;
    border-top-left-radius: 100%;
    bottom: -10px;
    cursor: ne-resize;
    height: 20px;
    left: -10px;
    transform: rotate(90deg);
    width: 20px;
}

.dx-rtl .TResizable-Handle-Corner-Bottom-Right {
    -moz-border-top-left-radius: 100%;
    -webkit-border-top-left-radius: 100%;
    border-top-left-radius: 100%;
    bottom: -10px;
    cursor: se-resize;
    height: 20px;
    right: -10px;
    width: 20px;
}
/*#endregion*/

/*#region TLookupSelectedItems*/
.TLookupSelectedItemsRoot {
    width: 100%;
    flex: 1 1 0%;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    position: relative;
}

.TLookupSelectedItemsPresenter {
    display: flex;
    flex-direction: row;
    overflow: hidden;
    position: absolute;
    z-index: 0;
    flex-wrap: nowrap;
    align-items: center;
}

.TLookupButtonsPresenter {
    z-index: 1;
    flex: 0 1 auto !important;
    position: relative;
}

.TLookupSelectedItem {
    display: flex;
    flex-direction: row;
    background: rgb(123,155,200);
    background: -moz-linear-gradient(top, rgba(123,155,200,1) 0%, rgba(94,128,177,1) 100%);
    background: -webkit-linear-gradient(top, rgba(123,155,200,1) 0%,rgba(94,128,177,1) 100%);
    background: linear-gradient(to bottom, rgba(123,155,200,1) 0%,rgba(94,128,177,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7b9bc8', endColorstr='#5e80b1',GradientType=0 );
    color: white;
    box-sizing: border-box;
    padding: 0px 4px;
    border-radius: 3px;
    align-self: center;
    box-shadow: inset 0px 0px 1px 1px #4e6e9e;
    overflow: hidden;
}

    .TLookupSelectedItem:hover {
        background-color: #a3c3ec;
        background: linear-gradient(to bottom, #a3c3ec 0%,rgba(94,128,177,1) 100%);
        /* color: #062b63; */
    }

    .TLookupSelectedItem + .TLookupSelectedItem {
        margin-left: 1px;
    }

    .TLookupSelectedItem > .Part_Image {
    }

    .TLookupSelectedItem > .Part_Text {
    }

    .TLookupSelectedItem > .Part_RemoveButton {
        cursor: pointer;
    }

.dx-rtl .TLookupSelectedItem + .TLookupSelectedItem {
    margin-left: unset;
    margin-right: 1px;
}
/*#endregion*/

/*#region TMainStatusBar*/

.TMainStatusBar-Root {
    flex: 1 1 auto;
    display: flex;
    /* justify-content: stretch; */
    /* align-items: stretch; */
    width: 100%;
    flex-direction: row;
    border-width: 1px 0px 0px 0px;
    border-style: solid;
    border-color: #6489bc;
}

    .TMainStatusBar-Root .TMenu {
        box-shadow: none;
        border-style: none;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
    }

    .TMainStatusBar-Root > .Near {
        float: left;
        /* width: auto; */
        flex: 1 1 0%;
        justify-self: flex-start;
    }

    .TMainStatusBar-Root > .Far {
        width: auto;
        display: flex;
        justify-content: flex-end;
        align-items: flex-end;
        align-content: flex-end;
        flex: 1 1 0%;
    }


.dx-rtl .TMainStatusBar-Root > .Near {
    /* float: right; */
}

.TMainStatusBar-Root > .Far {
    flex-direction: row-reverse;
}
/*#endregion*/

/*#region TMenu && TToolBar Control*/
.TToolBarControl {
    width: 100%;
    height: 41px;
    background-color: #a3c3ec;
}

    .TToolBarControl .TMenuItem:hover,
    .TToolBarControl .TMenuItem:active {
        background: -moz-linear-gradient(top, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.5) 1%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0) 51%, rgba(255,255,255,0) 100%);
        /* background: -webkit-linear-gradient(top, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0.5) 1%,rgba(255,255,255,0.5) 50%,rgba(255,255,255,0) 51%,rgba(255,255,255,0) 100%); */
        background: linear-gradient(to bottom, rgba(255,255,255,0.3) 0%,rgba(255,255,255,0.3) 1%,rgba(255,255,255,0.3) 50%,rgba(255,255,255,0) 51%,rgba(255,255,255,0) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80ffffff', endColorstr='#00ffffff',GradientType=0 );
        /* background-color: #39538a; */
        color: black;
    }


    .TToolBarControl .TMenuItem:focus,
    .TToolBarControl .TMenuItem:focus-within,
    .TToolBarControl .TMenuItem.IsSelected {
        background-color: transparent;
        border-radius: 2px;
        color: black;
    }

    .TToolBarControl .TMenuItem.IsChecked {
        background-color: rgb(115 152 205);
    }

    .TToolBarControl .TMenuItem:active {
        transform: scale(0.95);
    }

.TMenuItem:hover {
    -webkit-box-shadow: -2px 2px 2px 2px #8ba6c9;
    -moz-box-shadow: -2px 2px 2px 2px #8ba6c9;
    box-shadow: -1px 1px 0px 0px #8ba6c9;
    border-radius: 2px;
    /* background-color: #5379ae; */
    /* color: white; */
    border-color: #5379ae;
}


.Separator-Container:first-child,
.Separator-Container:last-child {
    display: none;
}



.TMenu-Root .Separator {
    -moz-border-image: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0) 100%);
    -webkit-border-image: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,0.5) 50%,rgba(255,255,255,0) 100%);
    display: flex;
    vertical-align: middle;
    border-right: 1px solid;
    border-image: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,0.5) 50%,rgba(255,255,255,0) 100%);
    border-image-slice: 1;
    height: 100%;
}

    .TMenu-Root .Separator:after {
        -moz-border-image: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(0,0,0,0.5) 50%, rgba(255,255,255,0) 100%);
        -webkit-border-image: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(0,0,0,0.5) 50%,rgba(255,255,255,0) 100%);
        position: relative;
        left: 2px;
        border-right: 1px solid;
        border-image: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(0,0,0,0.5) 50%,rgba(255,255,255,0) 100%);
        border-image-slice: 1;
        content: '';
    }

.menu-separator-vertical {
    -moz-border-image: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0) 100%);
    -webkit-border-image: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,0.5) 50%,rgba(255,255,255,0) 100%);
    display: flex;
    vertical-align: middle;
    border-right: 1px solid;
    border-image: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,0.5) 50%,rgba(255,255,255,0) 100%);
    border-image-slice: 1;
    height: 33px;
}

    .menu-separator-vertical:after {
        -moz-border-image: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(0,0,0,0.5) 50%, rgba(255,255,255,0) 100%);
        -webkit-border-image: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(0,0,0,0.5) 50%,rgba(255,255,255,0) 100%);
        position: relative;
        left: 2px;
        border-right: 1px solid;
        border-image: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(0,0,0,0.5) 50%,rgba(255,255,255,0) 100%);
        border-image-slice: 1;
        content: '';
    }

.menu-separator-horizontal {
    border-top: 1px solid gray;
    width: 100%;
}

.TOverflow-Root {
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    position: relative;
    width: 30px;
    padding: 0px 5px;
    pointer-events: none;
    opacity: 0;
    height: 100%;
}

    .TOverflow-Root.HasOverflowItem {
        pointer-events: all;
        opacity: 1;
        /* flex: 0 1 auto; */
    }

.TMenuItem > .TMenuImage {
    margin-right: 3px;
}

.dx-rtl .TMenuItem > .TMenuImage {
    margin-right: unset;
    margin-left: 3px;
}

.TMainMenu {
    padding: 2px 2px 2px 2px;
    height: 42px;
    z-index: 1;
    -webkit-box-shadow: 1px 1px 3px 0px #333;
    -moz-box-shadow: 1px 1px 3px 0px #333;
    box-shadow: 1px 1px 3px 0px #333;
    border-width: 1px 0px 0px 0px;
    border-style: solid;
}

.TSearchMenu-Root {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    flex: 1 1 0%;
    position: absolute;
}

.TBarManager {
    /* display: contents !important; */
}

.TToolBarControl {
    display: flex;
    background: unset;
}

.BarButtonItem {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.TMenuItem .GlyphAlignment-Left {
    flex-direction: row;
    flex-wrap: nowrap;
    display: flex;
    align-items: center;
}

    .TMenuItem .GlyphAlignment-Left > img + span {
        margin-left: 4px;
    }

    .TMenuItem .GlyphAlignment-Left > img + span {
        margin-left: 4px;
        margin-right: 4px;
    }

.dx-rtl .TMenuItem .GlyphAlignment-Left > img + span {
    margin-right: 4px;
    margin-left: unset;
}

.TMenuItem .GlyphAlignment-Top {
    flex-direction: column;
}

    .TMenuItem .GlyphAlignment-Top > img + span {
        margin-top: 4px;
    }

.TMenuItem .GlyphAlignment-Right {
    flex-direction: row-reverse;
}

    .TMenuItem .GlyphAlignment-Right > img + span {
        margin-left: 4px;
    }

.TMenuItem .GlyphAlignment-Bottom {
    flex-direction: column-reverse;
}

    .TMenuItem .GlyphAlignment-Bottom > img + span {
        margin-bottom: 4px;
    }

.TMenuItem.Separator-Container {
    min-height: 7px !important;
    pointer-events: none;
}

.Separator {
    border-top: 1px solid gray;
    width: 100%;
    min-height: unset;
}

.TMenu {
    height: 100%;
    flex: 1 1 auto;
    display: flex;
    position: relative;
    width: auto;
    overflow: hidden;
    border-width: 0px 0px 0px 0px;
    border-style: solid;
    padding: 2px 2px 2px 2px;
    border-color: #6489bc;
    /* background: red; */
}

.TMenu-Root {
    display: flex;
    z-index: 1;
    overflow: hidden;
    flex: 1 0 0%;
    /* background: red; */
}

.TMenu.TMenuOrientation-Horizontal > .TMenu-Root {
    flex-direction: row;
    width: 100%;
    overflow: hidden;
    flex: 1 1 0%;
    /* background: red; */
}

    .TMenu.TMenuOrientation-Horizontal > .TMenu-Root > .TMenuItem + .TMenuItem {
        margin-left: 2px;
    }

    .TMenu.TMenuOrientation-Horizontal > .TMenu-Root > .TMenuItem {
        padding: 2px 4px;
    }

.TMenu.TMenuOrientation-Horizontal.Far > .TMenu-Root {
    /* background:red; */
    display: flex;
    justify-content: flex-end;
}

.TMenuItem {
    display: flex;
    justify-content: center;
    align-items: center;
    border-width: medium;
    outline: 0px;
    position: relative;
    transition-duration: 200ms;
    border: 1px solid transparent;
    padding: 0px 3px;
    overflow: hidden;
    flex: 0 0 auto;
}

    .TMenuItem .TMenuItem-Text {
        max-width: 10vw;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .TMenuItem.IsDisabled,
    .TContextMenuItem.IsDisabled {
        opacity: 0.5;
        pointer-events: none;
    }

    .TMenuItem.IsOverflow {
        opacity: 0;
        pointer-events: none;
        /* display: none; */
    }

    .TMenuItem:hover {
        background-color: #6489bc;
        color: white;
        border-radius: 2px;
    }

    .TMenuItem:focus,
    .TMenuItem:focus-within,
    .TMenuItem.IsSelected {
        background-color: #39538a;
        color: white;
        border-radius: 2px;
    }

.TMenu-Oveflow {
    /* background: red; */
    cursor: pointer;
    font-family: 'fontawesome';
    font-size: larger;
    color: #062b63;
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    flex: 1;
    border-radius: 2px;
}

    .TMenu-Oveflow:before {
        content: '\f0c9';
    }

    .TMenu-Oveflow:active {
        color: #6489bc;
        transform: translate(1px, 1px);
    }

    .TMenu-Oveflow:focus {
        box-shadow: 1px 1px 4px 1px #00000096;
    }

.TMenuItemPopoutContainer {
    position: relative;
    width: 9px;
    font-family: 'DXIcons';
    /*background: red;*/
    height: 16px;
    justify-content: center;
    align-items: center;
    display: flex;
    flex: 1 1 auto;
}

    .TMenuItemPopoutContainer:before {
        content: "\f001";
        /* position: absolute; */
        display: flex;
        top: 10%;
    }

.TMenuItemChildContainer {
    position: absolute;
    display: flex;
    flex-direction: column;
    top: 100px;
    left: 200px;
    z-index: 2147483647;
    color: black;
}

.MenuItemCounterCircle {
    border-radius: 360px;
    border: 1px solid rgb(255 255 255);
    box-shadow: 0px 0px 2px 0px red;
    text-align: center;
    width: auto !important;
    padding: 0px 5px;
    background: #ff0700;
    color: #ffffff;
    justify-self: flex-end !important;
    flex: 0 1 auto !important;
    text-overflow: initial !important;
    margin: 0px 3px;
    pointer-events: none;
    font-size: smaller;
}

.DesktopMenuItemCounterCircle {
    position: absolute;
    top: -5px;
    right: -5px;
    border: 1px solid #ffffff;
    border-radius: 360px;
    padding: 2px 6px;
    background-color: rgb(255 0 0);
    box-shadow: 0px 0px 4px rgb(243 0 0);
    color: white;
    pointer-events: none;
}
/*#endregion*/

/*#region TChangeBackground*/
.TChangeBackground-Root {
    overflow-y: auto;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    background: white;
    margin: 10px;
    border: 1px solid;
}

    .TChangeBackground-Root > .Grid-Container {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        padding: 10px;
        align-self: center;
        width: auto;
        justify-content: center;
        align-items: flex-start;
        align-content: flex-start;
    }

        .TChangeBackground-Root > .Grid-Container > .Grid-Item {
            width: 150px;
            height: 100px;
            background-color: rgba(255, 255, 255, 0.8);
            text-align: center;
            padding: 8px;
            margin: 2px;
            box-sizing: content-box;
            border-radius: 4px;
            display: flex;
        }

            .TChangeBackground-Root > .Grid-Container > .Grid-Item:focus {
                background-color: ThreeDHighlight;
            }

            .TChangeBackground-Root > .Grid-Container > .Grid-Item > .ImagePresenter {
                width: auto;
                height: auto;
                align-self: center;
                border-radius: 4px;
            }

                .TChangeBackground-Root > .Grid-Container > .Grid-Item > .ImagePresenter:hover {
                    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 1), 0 6px 20px 0 rgba(0, 0, 0, 0.2);
                }

                .TChangeBackground-Root > .Grid-Container > .Grid-Item > .ImagePresenter.IsSelected {
                    box-shadow: 0px 0px 17px 1px rgba(104,140,192,1);
                }
/*#endregion*/

/*#region TRating*/
.jq-ry-container {
    position: relative;
    padding: 0 5px;
    line-height: 0;
    display: block;
    cursor: pointer;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    direction: ltr;
}

    .jq-ry-container[readonly="readonly"] {
        cursor: default;
    }

    .jq-ry-container > .jq-ry-group-wrapper {
        position: relative;
        width: auto;
    }

        .jq-ry-container > .jq-ry-group-wrapper > .jq-ry-group {
            position: relative;
            line-height: 0;
            z-index: 10;
            white-space: nowrap;
        }

            .jq-ry-container > .jq-ry-group-wrapper > .jq-ry-group > svg {
                display: inline-block;
            }

            .jq-ry-container > .jq-ry-group-wrapper > .jq-ry-group.jq-ry-normal-group {
                width: 100%;
            }

            .jq-ry-container > .jq-ry-group-wrapper > .jq-ry-group.jq-ry-rated-group {
                width: 0;
                z-index: 11;
                position: absolute;
                top: 0;
                left: 0;
                overflow: hidden;
            }
/*#endregion*/

/*#region Theme*/
.ThemeItem-Root {
    align-items: center;
    display: flex;
    flex-direction: column;
    width: 100%;
    flex: 1 0 auto;
}

    .ThemeItem-Root .ThemeItem-Color-Border {
        width: 64px;
        height: 64px;
        border: 1px solid #80808059;
        border-radius: 4px;
        box-shadow: 1px 1px 4px 1px #dddddd29;
        padding: 1px;
        flex: 0 0 auto;
    }

.ThemeItem-Color-Outer {
    background-color: #71a8d5;
    width: 100%;
    height: 100%;
    border-radius: 3px;
}

    .ThemeItem-Color-Outer .ThemeItem-Color-Inner {
        background: radial-gradient(ellipse at center, rgba(242, 246, 248, 0) 0%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.4) 51%,rgb(255, 255, 255) 100%);
        width: 100%;
        height: 100%;
        background-position: -24px -11px;
        background-origin: border-box;
        background-size: 324% 259%;
        background-repeat: no-repeat;
        background-clip: border-box;
    }
/*#endregion*/

/*#region SwitchEdit*/
.TSwitchEdit {
    min-height: 20px;
    padding: 1px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    background: rgb(208,216,231);
    background: -moz-linear-gradient(top, rgba(208,216,231,1) 0%, rgba(230,234,242,1) 22%, rgba(255,255,255,1) 100%);
    background: -webkit-linear-gradient(top, rgba(208,216,231,1) 0%,rgba(230,234,242,1) 22%,rgba(255,255,255,1) 100%);
    background: linear-gradient(to bottom, rgba(208,216,231,1) 0%,rgba(230,234,242,1) 22%,rgba(255,255,255,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d0d8e7', endColorstr='#ffffff',GradientType=0 );
    border: 1px solid #284172;
    color: black;
    overflow: hidden;
}

    .TSwitchEdit.IsNotReadOnly {
        cursor: pointer;
    }

.TSwitchEdit-Root {
    flex: 1;
    box-sizing: border-box;
    display: flex;
    align-items: stretch;
    align-content: stretch;
    flex-wrap: nowrap;
    justify-content: stretch;
    position: relative;
    height: auto;
}

.TSwitchEdit-Slider {
    display: flex;
    height: calc(90% );
    background: white;
    width: 15px;
    border-radius: 2px;
    border: 1px solid #062b63;
    position: absolute;
    transition: all .5s linear;
    transform: translateY(-50%);
    top: 50%;
}


.TSwitchEdit-Label-Container {
    display: flex;
    flex: 1 1 auto;
}

    .TSwitchEdit-Label-Container > .Label {
        opacity: 0;
        position: absolute;
        transition: all 0.1s linear;
        pointer-events: none;
    }

    .TSwitchEdit-Label-Container > .Label-Off {
        left: 21px;
        transform: translateY(-50%);
        top: 50%;
    }

.dx-rtl .TSwitchEdit-Label-Container > .Label-Off {
    left: 0px;
}

.TSwitchEdit.IsTrue {
    background: rgb(94 128 177);
    color: white;
}

    .TSwitchEdit.IsTrue .TSwitchEdit-Slider {
        left: 100%;
        top: 50%;
        transform: translate(-100%, -50%);
    }

.TSwitchEdit.IsNull .TSwitchEdit-Slider {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.TSwitchEdit.IsFalse .TSwitchEdit-Slider {
    left: 1px;
    background: rgb(94 128 177);
}

.TSwitchEdit.IsTrue .Label-On {
    display: flex;
    opacity: 1;
    transition: all 0.5s linear;
    pointer-events: auto;
}

.dx-rtl .TSwitchEdit.IsTrue .Label-On {
    left: -21px;
}


.TSwitchEdit.IsFalse .Label-Off {
    display: flex;
    opacity: 1;
    transition: all .5s linear;
    pointer-events: auto;
}
/*#endregion*/

/*#region TComboBoxEdit*/
.TComboBoxEdit {
    min-height: 20px;
}

.TComboBoxEdit-Content-Text {
    overflow: hidden;
    text-overflow: ellipsis;
}

.TComboBoxEdit-Content-Image {
    max-width: 16px;
    max-height: 16px;
}

.TComboBoxEdit-Popup-SearchContainer {
    flex: 0 0 20px;
    margin: 5px;
}

.TComboBoxEdit-Popup-GridContainer {
    flex: 1 1 150px;
    display: flex;
    margin-top: 2px;
    position: relative;
    overflow: auto;
}

.TPopup-Root .TComboBoxEdit-Popup-ButtonsContainer {
    flex: 0 0 24px !important;
    margin: 5px !important;
    align-self: center !important;
}

.TComboBoxEdit-Popup-Button {
    height: 24px;
    margin: 0px 2px;
    width: 90px !important;
}

/*#endregion*/


.TGridPresenter {
    min-height: 20px;
    min-width: 20px;
}

.TViewPartText {
    background: white;
    border: 1px solid #0000008f;
    color: black;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
}

    .TViewPartText.NoBorder {
        border: unset;
        background: unset;
    }

.TEntityFieldTypeSelector {
    min-height: 20px;
}





.TRichTextGridEditor-Root {
    flex: 1;
    color: black;
    display: flex;
    align-items: center;
}

.TDetailEditor > .TEditorPresenter > TLayoutGroup {
    padding: unset !important;
}

/*#region Bpm*/
.TControl.TBPMDiagram {
    background: white;
    border: 1px solid;
    border-radius: 2px;
    overflow: auto;
    padding: 10px;
    width: 100% !important;
    box-sizing: border-box;
    height: 100% !important;
}

.TBPMDiagram-Root {
    background: transparent;
}

.TModelBasePresenter {
    display: contents;
    width: 100px;
    height: 100px;
}

.Active_Shadow {
    -webkit-filter: drop-shadow( 3px 3px 2px rgba(0, 0, 0, .7));
    filter: drop-shadow( 0px 1px 4px red);
}

.Passed_Shadow {
    -webkit-filter: drop-shadow( 3px 3px 2px rgba(0, 0, 0, .7));
    filter: drop-shadow( 0px 1px 4px gray);
}

.TBPMDebugger-Text {
    /* pointer-events: none; */
    dominant-baseline: central;
    text-anchor: middle
}

.TBPMDebugger-Circle {
    stroke-width: 1px;
    stroke: #6489bc;
    /* cursor: pointer; */
    /* pointer-events: none; */
}


.TModelProcess {
    cursor: pointer;
}

.TModelProcess-Content-Rectangle {
    stroke-width: 1;
    stroke: #0000004f;
    fill: transparent;
    pointer-events: none;
}

.TModelProcess-Rectangle {
    stroke-width: 1;
    stroke: #0000004f;
    fill: transparent;
}

.IsSelected .TModelProcess-Rectangle {
    stroke-width: 2;
    stroke: #ff00007d;
    fill: var(--BPM-SelectedFill);
}

.TModelProcess-Text {
    text-anchor: middle;
    transform: translate(50%, 50%) rotate(270deg);
    dominant-baseline: central;
    text-anchor: middle;
}

.TModelLane {
}

.TModelLane-ResizerLine {
    stroke-width: 15;
    stroke: transparent;
    cursor: s-resize;
}

.TModelLane-Content-Rectangle {
    stroke-width: 1;
    stroke: #0000004f;
    fill: none;
    pointer-events: none;
}

.TModelLane-Rectangle {
    cursor: pointer;
    stroke-width: 1;
    stroke: #0000004f;
    fill: transparent;
}

.IsSelected .TModelLane-Rectangle {
    stroke-width: 2;
    stroke: #ff00007d;
    fill: var(--BPM-SelectedFill);
}

.TModelLane-Text {
    dominant-baseline: central;
    text-anchor: middle;
    transform: translate(50%, 50%) rotate(270deg);
    pointer-events: none;
}

.TModelMilestone-Header {
    cursor: pointer;
}

.TModelMilestone-ResizerLine {
    stroke-width: 15;
    stroke: transparent;
    cursor: w-resize;
}

.TModelMilestone-Rectangle {
    stroke-width: 1;
    stroke: #0000004f;
    fill: transparent;
}

.TModelMilestone-Content-Rectangle {
    stroke-width: 1;
    stroke: #0000004f;
    fill: none;
    pointer-events: none;
}

.IsSelected .TModelMilestone-Rectangle {
    stroke-width: 3;
    stroke: #ff00007d;
    fill: var(--BPM-SelectedFill);
}

.TModelMilestone-Header-Text {
    dominant-baseline: central;
    text-anchor: middle;
}


.TModelStartEvent {
    stroke-width: 2;
    stroke: #70AC2D;
    cursor: pointer;
}

.TModelStartEvent-Text {
    pointer-events: none;
    dominant-baseline: central;
    text-anchor: middle
}

.IsSelected .TModelStartEvent {
    stroke-width: 2;
    stroke: #ff00007d;
    fill: var(--BPM-SelectedFill);
}



.TModelEndEvent {
    stroke-width: 2;
    stroke: #9A0606;
    cursor: pointer;
}

.IsSelected .TModelEndEvent {
    stroke-width: 2;
    stroke: #ff00007d;
    fill: var(--BPM-SelectedFill);
}

.TModelEndEvent-Text {
    pointer-events: none;
    dominant-baseline: central;
    text-anchor: middle
}

.TModelTask {
    stroke-width: 2;
    stroke: #6090AD;
    cursor: pointer;
}

.IsSelected .TModelTask {
    stroke-width: 3;
    stroke: #ff00007d;
    fill: var(--BPM-SelectedFill);
}

.TModelTask-Text-Container {
    text-align: center;
    padding: 5px;
    pointer-events: none;
    display: flex;
    justify-content: center;
    align-items: center; /* background: red; */
    box-sizing: border-box;
    overflow: hidden;
}

.TModelTask-Text {
    white-space: normal;
    word-break: break-word;
    text-overflow: ellipsis;
    align-self: center;
    justify-self: center;
}

.TModelAssociation {
    cursor: pointer;
    vector-effect: non-scaling-stroke;
    stroke-width: 2px;
    stroke: #858585;
    fill: none;
    pointer-events: none;
    stroke-dasharray: 0 1 1 5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.TModelDataObject {
    cursor: pointer;
    fill: transparent;
    pointer-events: auto;
}

.TModelDataObject-Path {
    stroke-width: 1px;
    fill: rgb(39 77 138);
    cursor: pointer;
}

.IsSelected .TModelDataObject-Path {
    stroke-width: 3;
    stroke: #ff00007d;
    fill: var(--BPM-SelectedFill);
}

.TModelGroup {
    stroke-width: 2px;
    stroke: black;
    fill: transparent;
    stroke-dasharray: 1 0 1;
    cursor: pointer;
}

.IsSelected .TModelGroup {
    stroke-width: 3;
    stroke: #ff00007d;
    fill: var(--BPM-SelectedFill);
}

.TModelSubProcess {
    stroke-width: 2;
    stroke: #6090AD;
    cursor: pointer;
    pointer-events: auto;
}

.IsSelected .TModelSubProcess {
    stroke-width: 3;
    stroke: #ff00007d;
    fill: var(--BPM-SelectedFill);
}

.TModelSubProcess-Plus {
    stroke: #062b63;
    fill: rgb(174 198 240);
    stroke-width: 1px;
    pointer-events: none;
}

.TModelGateway {
    stroke-width: 2;
    stroke: #F7B900;
    cursor: pointer;
}

.IsSelected .TModelGateway {
    stroke-width: 3;
    stroke: #ff00007d;
    fill: var(--BPM-SelectedFill);
}



.TModelAnnotation {
    stroke-width: 1;
    stroke: #034900;
    cursor: pointer;
}

.IsSelected .TModelAnnotation {
    stroke-width: 3;
    stroke: #ff00007d;
    fill: var(--BPM-SelectedFill);
}

.TModelAnnotation-Text {
    pointer-events: none;
}

.TLineMarker {
    fill: #858585;
}

.TModelSequenceFlow {
    vector-effect: non-scaling-stroke;
    stroke-width: 2px;
    stroke: #858585;
    fill: none;
    pointer-events: none;
    stroke-linejoin: round;
    stroke-linecap: round;
}

@keyframes dash {
    to {
        stroke-dashoffset: -100;
    }
}

.IsSelected .TModelSequenceFlow {
    /* stroke: #ff0000; */
    /* stroke-width: 2px; */
    animation: dash 10s linear infinite;
    stroke-dasharray: 0 3 0;
    stroke-dashoffset: 0;
}

.LineHitPath {
    pointer-events: auto;
    cursor: pointer;
    stroke-width: 12px;
    cursor: pointer;
    stroke: transparent;
    stroke-opacity: 0.3;
    animation: unset !important;
}

.IsSelected .LineHitPath {
    stroke: red;
    stroke-width: 12px; /* fill: white; */ /* stroke-opacity: 1; */
}

.TBPM-ResizerLine {
    stroke: transparent;
    stroke-width: 7px;
    fill: transparent;
}

    .TBPM-ResizerLine.TResizable-Handle-Corner-Top-Left {
        x: 0;
        y: 0;
        width: 10px;
        height: 10px;
    }

    .TBPM-ResizerLine.TResizable-Handle-Corner-Top-Right {
        x: calc(100% - 10px);
        y: 0;
        width: 10px;
        height: 10px;
    }

    .TBPM-ResizerLine.TResizable-Handle-Corner-Bottom-Right {
        x: calc(100% - 10px);
        y: calc(100% - 10px);
        width: 10px;
        height: 10px;
    }

    .TBPM-ResizerLine.TResizable-Handle-Corner-Bottom-Left {
        x: 0;
        y: calc(100% - 10px);
        width: 10px;
        height: 10px;
    }

.TModelIntermediateEvent {
}

.TModelIntermediateEvent-OuterCircle {
    stroke: #908B3F;
    fill: #FFFCF7;
    stroke-width: 1;
    cursor: pointer;
}

.TModelIntermediateEvent-InnerCircle {
    stroke: #908B3F;
    fill: none;
    stroke-width: 1;
    pointer-events: none;
}

.TModelIntermediateEvent-Text {
    dominant-baseline: central;
    text-anchor: middle;
}

.TBPM-ObjectMover {
    cursor: move;
    stroke: none;
    fill: transparent;
}

.TDynamicToolBox-Rectangle {
    stroke-width: 1;
    stroke: rgb(148 184 233);
    rx: 17;
    ry: auto;
    fill: none;
    x: 10px;
    y: 10px;
    width: calc(100% - 20px);
    height: calc(100% - 20px);
}

.TModelLineTargetTemporary-Circle {
    stroke-width: 2px;
    pointer-events: none;
    stroke: black;
    stroke-dasharray: 0 3 1 0;
    fill: #a3c3ec;
}

.IsSelected .TModelLineTargetTemporary-Circle {
    /* stroke:red; */
    fill: #ff00006e;
}

.TBPMItemSelector {
    fill: rgb(216 255 0 / 43%);
    stroke: #ffa80273;
    stroke-width: 1;
    pointer-events: none;
}

/*#endregion*/

/*#region TReportPresenter*/
.TReportPresenter {
    display: flex;
    overflow: hidden;
    width: auto;
    flex: 1;
}

.TReportPresenter-Content {
    flex: 1 0 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    height: auto;
    overflow: hidden;
    width: auto;
    justify-content: flex-start;
    align-content: stretch;
    position: relative;
}

    .TReportPresenter-Content.DesignMode {
        background: white;
        border: 1px solid black;
    }

        .TReportPresenter-Content.DesignMode:before {
            content: 'Report not render in design mode';
            top: 50%;
            text-align: center;
            display: block;
            position: absolute;
            left: 50%;
            margin: 0 0 -5px -5px;
            transform: translate(-50%, -50%);
        }

.TReportPresenterBindable {
    width: 0px;
}

.TDateBox {
}

    .TDateBox.NoBorder > .TTextEdit {
        border-width: 0px;
        background: unset;
        filter: unset;
        border: unset;
        padding: unset;
    }
/*#endregion*/

/*#region */
.TBreadcrumbBar {
    background: white;
    min-height: 20px;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 3px 5px;
    flex-wrap: wrap;
}

    .TBreadcrumbBar .TBreadcrumbBar-Item {
        cursor: pointer;
    }

        .TBreadcrumbBar .TBreadcrumbBar-Item:hover {
            color: red;
        }

        .TBreadcrumbBar .TBreadcrumbBar-Item:last-child {
            pointer-events: none;
            color: gray;
        }

    .TBreadcrumbBar .TBreadcrumbBar-Separator {
        padding: 0px 7px;
    }

/*#endregion*/

.TControl.TTextBlock {
    overflow: hidden;
}

    .TControl.TTextBlock.TextTrimming-CharacterEllipsis > span {
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }

    .TControl.TTextBlock > span {
        width: 100%;
        display: inline-flex;
        align-items: center;
    }

    .TControl.TTextBlock.IsItalic > span {
        font-style: italic;
    }

    .TControl.TTextBlock.IsBolded > span {
        font-weight: bold;
    }

    .TControl.TTextBlock.TextAlignment-Left > span {
        text-align: left;
    }

.dx-rtl .TControl.TTextBlock.TextAlignment-Left > span {
    text-align: right;
}

.TControl.TTextBlock.TextAlignment-Center > span {
    text-align: center;
}

.TControl.TTextBlock.TextAlignment-Right > span {
    text-align: right;
}

.dx-rtl .TControl.TTextBlock.TextAlignment-Right > span {
    text-align: left;
}

.TControl.SizeToContent {
    flex: 1 1 auto;
    overflow: visible;
    min-width: unset;
}

.dx-rtl .TControl.TNumberEdit {
    display: flex;
    flex-direction: row-reverse;
    flex-wrap: nowrap;
}

.TReportQueryItemsControl {
    display: block !important;
    position: relative;
    border: 1px solid rgb(115 152 205);
    border-radius: 4px;
    overflow: auto;
}

.TReportQueryItemBox {
    border: 1px solid #33333394;
    position: absolute !important;
    left: 0px;
    top: 0px;
    height: 100px;
    border-radius: 5px;
    overflow: visible;
}

    .TReportQueryItemBox:focus,
    .TReportQueryItemBox:focus-within,
    .TReportQueryItemBox.IsSelected {
        /* outline: 1px auto black; */
        box-shadow: 0 0 6px 1px #fffa00bd;
    }

    .TReportQueryItemBox .HeaderRoot {
        flex: 1 0 28px;
        width: 100%;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: flex-start;
        align-items: center;
    }

        .TReportQueryItemBox .HeaderRoot .ObjectMover {
            position: absolute;
            cursor: pointer;
            height: 28px;
        }

        .TReportQueryItemBox .HeaderRoot .Chk_SelectAll {
            margin: 0px 0px 0px 3px;
        }

.TReportQueryItemBox-Root {
    width: 100%;
    background: white;
    border-radius: 4px;
    overflow: hidden;
}


.TReportLevel {
}

    .TReportLevel .HeaderRoot {
        background: linear-gradient(180deg, rgba(239,166,24,1) 0%, rgba(189,97,8,1) 100%);
    }

.TReportTable .HeaderRoot {
    background: linear-gradient(180deg, #9CBAE4 35%, #92B1DD 60%);
}

.TReportQuery .HeaderRoot {
    background: linear-gradient(180deg, #BEE15B 0.04%, #8CBD31 85%);
}

.TReportDirectCommand .HeaderRoot {
    background: linear-gradient(180deg, #F57D7D 0%, #B03838 100%);
}

.TReportStoredProcedure .HeaderRoot {
    background: linear-gradient(180deg, #E8AFEE 0%, #DC80E0 100%);
}

.TReportServiceCall .HeaderRoot {
    background: linear-gradient(180deg, #80D7E0 0%, #5BA4AC 100%);
}

.TReportViewReference .HeaderRoot {
    background: linear-gradient(180deg, #BC5BE1 0.05%, #705983 85%);
}

.TReportQueryColumnListBoxItem {
    display: flex;
    align-items: center;
    flex-direction: row;
    align-content: center;
    justify-content: flex-start;
    align-self: center !important;
}

.TQueryJoinControl {
    position: absolute !important;
}

    .TQueryJoinControl .ConnectorCenter {
        position: absolute !important;
        /* background: #ff000024; */
        display: flex;
        align-items: center;
        pointer-events: none;
        justify-content: center;
    }

        .TQueryJoinControl .ConnectorCenter .InnerPart {
            /* width: 100%; */
            Height: 5px;
            transform: rotate(0deg);
            transform-origin: center !important;
            position: relative;
            display: flex;
            left: 0;
            pointer-events: auto;
            align-self: center;
            flex: 0 0 356px;
        }

    .TQueryJoinControl.IsSelected .JoinConnector .InnerPart {
        box-shadow: 0 0 6px 1px #fffa00bd;
    }

.JoinConnector {
    width: auto;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: center;
    align-content: center;
    position: absolute;
    pointer-events: auto;
}

    .JoinConnector .InnerPart {
        background: rgb(128,128,128);
        background: linear-gradient(180deg, rgba(128,128,128,1) 0%, rgba(128,128,128,1) 10%, rgba(255,255,255,1) 11%, rgba(255,255,255,1) 40%, rgba(240,240,240,1) 41%, rgba(240,240,240,1) 89%, rgba(0,0,0,1) 90%, rgba(0,0,0,1) 100%);
    }

        .JoinConnector .InnerPart.Big {
            width: 15px;
            Height: 5px;
            flex: 0 0 auto;
            align-self: center;
        }

        .JoinConnector .InnerPart.Small {
            width: 2px;
            height: 7px;
            border-radius: 0px 0.5px 0.5px 0;
            flex: 0 0 auto;
            border-collapse: separate;
        }

    .JoinConnector .JoinTypePresenter {
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        width: auto;
        height: auto;
        pointer-events: none;
    }

        .JoinConnector .JoinTypePresenter .JoinTypeBackPanel {
            height: auto;
            position: absolute;
            display: flex;
            align-items: stretch;
            pointer-events: none;
        }

            .JoinConnector .JoinTypePresenter .JoinTypeBackPanel .TJoinHitTest {
                width: 22px;
                height: 20px;
                cursor: pointer;
                pointer-events: auto;
                border-radius: 360px;
                /* background: #ff000029; */
            }

.TReportQueryItemsControl-Root {
    width: 100%;
    height: 100%;
}

.TSyntaxEditor {
    direction: ltr !important;
}

    .TSyntaxEditor .TSyntaxEditor-Root {
        height: 100%;
        width: 100%;
        min-width: 100px;
        min-height: 100px;
        direction: ltr;
        background-color: black;
    }


.TChartLegendEditor {
    background: white;
    justify-content: center;
    display: flex;
    border: 1px solid #284172;
    border-radius: 3px;
    background: rgb(208,216,231);
    background: -moz-linear-gradient(top, rgba(208,216,231,1) 0%, rgba(230,234,242,1) 22%, rgba(255,255,255,1) 100%);
    background: -webkit-linear-gradient(top, rgba(208,216,231,1) 0%,rgba(230,234,242,1) 22%,rgba(255,255,255,1) 100%);
    background: linear-gradient(to bottom, rgba(208,216,231,1) 0%,rgba(230,234,242,1) 22%,rgba(255,255,255,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d0d8e7', endColorstr='#ffffff',GradientType=0 );
}

.TDashboardChartPresenter-Root {
    box-sizing: border-box;
    position: relative;
    display: flex;
    align-items: stretch;
    align-content: stretch;
    flex-direction: row;
    flex-wrap: nowrap;
    width: 100%;
    height: 100%;
}

.TControl.TDashboardChartPresenter {
    width: 100%;
    height: 100%;
    border: 1px solid #062b63;
    overflow: auto;
    border-radius: 3px;
    flex: 1 1 100%;
    align-self: stretch;
    flex-direction: row;
    justify-content: center;
    box-sizing: border-box;
    touch-action: pan-x pan-y pinch-zoom;
    padding: 10px;
    background-color: white;
    position: relative;
}


#ArioRootNode > tlogin > tverificationcode > div > div > div.LoginBox.TOrientation-Vertical.TLayoutGroupContent {
    padding: 15px;
}

    #ArioRootNode > tlogin > tverificationcode > div > div > div.LoginBox.TOrientation-Vertical.TLayoutGroupContent > tlayoutitem > div.TLayoutItemRoot > div.TLayoutItem-Label.noselect > span {
        padding-bottom: 5px;
    }

    #ArioRootNode > tlogin > tverificationcode > div > div > div.LoginBox.TOrientation-Vertical.TLayoutGroupContent > tlayoutitem > div.TLayoutItemRoot > div.TLayoutItem-Content > ttextedit {
        height: 30px;
        margin-bottom: 15px;
    }

        #ArioRootNode > tlogin > tverificationcode > div > div > div.LoginBox.TOrientation-Vertical.TLayoutGroupContent > tlayoutitem > div.TLayoutItemRoot > div.TLayoutItem-Content > ttextedit > div.TInputContainer.TNeedMargin > input {
            font-size: 20px;
        }

#ArioRootNode > tforgetpassword > div > div > div.LoginBox.TOrientation-Vertical.TLayoutGroupContent {
    padding: 15px;
}

    #ArioRootNode > tforgetpassword > div > div > div.LoginBox.TOrientation-Vertical.TLayoutGroupContent > tlayoutitem > div.TLayoutItemRoot > div.TLayoutItem-Label.noselect > span {
        padding-bottom: 5px;
    }

    #ArioRootNode > tforgetpassword > div > div > div.LoginBox.TOrientation-Vertical.TLayoutGroupContent > tlayoutitem > div.TLayoutItemRoot > div.TLayoutItem-Content > ttextedit {
        height: 30px;
        margin-bottom: 15px;
    }

        #ArioRootNode > tforgetpassword > div > div > div.LoginBox.TOrientation-Vertical.TLayoutGroupContent > tlayoutitem > div.TLayoutItemRoot > div.TLayoutItem-Content > ttextedit > div.TInputContainer.TNeedMargin > input {
            font-size: 15px;
        }

/*==========webkit section================= */
::-webkit-scrollbar {
    width: 13px;
    height: 13px;
}

::-webkit-scrollbar-button:vertical {
    width: 0px;
    height: 0px;
}


@-webkit-keyframes autofill {
    to {
        color: black;
        background: #ffffff00;
        border-style: none;
    }
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-animation-name: autofill;
    -webkit-animation-fill-mode: both;
    color: black;
}

input:-webkit-autofill {
    -webkit-box-shadow: -7px 9px 0 50px #ffffff55 inset; /* Change the color to your own background color */
    font-size: 20px;
    backdrop-filter: blur(60px);
    /*-webkit-text-fill-color: #000;*/
}

    input:-webkit-autofill:focus {
        -webkit-box-shadow: 0 0 0 50px #ffffff55 inset; /*your box-shadow*/
        backdrop-filter: blur(60px);
        /*-webkit-text-fill-color: #333;*/
    }

    input:-webkit-autofill:first-line {
        font-size: 20px;
    }


.blink {
    animation: blinker 1.5s linear infinite;
}

@keyframes blinker {
    50% {
        opacity: 0;
    }
}