.TFlowDirection-LeftToRight {
    direction: ltr;
    text-align: left;
}

body, input, textarea {
    font-weight: normal;
    font-size: 12px;
}

.TFlowDirection-LeftToRight body,
.TFlowDirection-LeftToRight input,
.TFlowDirection-LeftToRight textarea,
.TFlowDirection-LeftToRight {
    font-size: 13px;
}

.IsMobileDevice,
.IsMobileDevice body,
.IsMobileDevice input,
.IsMobileDevice textarea {
    font-size: 14px;
    /* direction: rtl;Mehdi: do not uncoment it,because ctrl+shift in textbox work with dir attribute */
}

.TDesktopRoot {
    overflow: hidden;
}

.TFlowDirection-Inherited {
    direction: inherit;
    text-align: inherit;
}

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

    .TFlowDirection-RightToLeft .TPopup-MovingPanel {
        transform-origin: top left;
    }

        .TFlowDirection-RightToLeft .TPopup-MovingPanel.PopupOpenOnTop {
            transform-origin: bottom left;
        }

    .TFlowDirection-RightToLeft .TRating .StarContainer {
        flex-direction: row-reverse;
    }

    .TFlowDirection-RightToLeft input,
    .TFlowDirection-RightToLeft textarea,
    .TFlowDirection-RightToLeft body {
        /* direction: rtl;Mehdi: do not uncoment it,because ctrl+shift in textbox work with dir attribute */
        line-height: normal;
    }

.IsMobileSize .IsMobileSize-Hide {
    display: none !important;
}

.TFlowDirection-RightToLeft .TOrientation-Horizontal > .THorizontalAlignment-Right + .THorizontalAlignment-Right {
    margin-right: unset !important;
}

.TFlowDirection-RightToLeft .TOrientation-Horizontal > .THorizontalAlignment-Right {
    margin-left: unset !important;
    margin-right: auto !important;
}

.TFlowDirection-RightToLeft .TOrientation-Horizontal > .THorizontalAlignment-Center:has(+ .THorizontalAlignment-Center) {
    margin-left: unset !important;
    margin-right: auto !important;
}


.TFlowDirection-RightToLeft .TOrientation-Horizontal > .THorizontalAlignment-Center + .THorizontalAlignment-Right {
    margin-right: unset !important;
}

.TFlowDirection-RightToLeft .TOrientation-Horizontal > .THorizontalAlignment-Left + .THorizontalAlignment-Right {
    margin-right: auto !important;
}

.TFlowDirection-RightToLeft .TOrientation-Horizontal > .THorizontalAlignment-Center + .THorizontalAlignment-Center {
    margin-right: unset !important;
    margin-left: unset !important;
}

.TFlowDirection-RightToLeft .TOrientation-Horizontal > .THorizontalAlignment-Center:has(+ .THorizontalAlignment-Right) {
    margin-left: auto !important;
}

.TFlowDirection-RightToLeft .TOrientation-Horizontal > .THorizontalAlignment-Center:last-child {
    margin-left: auto !important;
}

.TFlowDirection-RightToLeft .ProposedPositionType-Left {
    border-left-width: 1px;
    border-right-width: 0px;
}

.TFlowDirection-RightToLeft .ProposedPositionType-Right {
    border-right-width: 1px;
    border-left-width: 0px;
}



.LeftToRight-Font,
.LeftToRight-Font textarea,
.LeftToRight-Font input {
    font-family: system-ui;
}

.RightToLeft-Font,
.RightToLeft-Font textarea,
.RightToLeft-Font .cke_reset_all,
.RightToLeft-Font input {
    font-family: IRANSans-FarNum,Tahoma !important;
}




.TCaptchContainer {
    display: flex;
    justify-content: center;
}

.CaptchaImage {
    border: 1px solid;
}
/*#region Change Objects Defaults*/
.TBackgroundPanel {
    background-color: #a3c3ec;
    height: 100%;
    margin: 0px;
    overflow: hidden;
}



* {
    /*For Firefox*/
    scrollbar-color: #466ca5 #a3c3ec;
    scrollbar-width: unset;
}



span {
    white-space: pre-wrap;
}

::-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;
    -webkit-text-fill-color: white !important;
    -webkit-box-shadow: 0 0 0 30px #08070c inset !important;
    border-radius: 0px;
    padding: 0px 4px !important;
    border-style: unset !important;
    border-color: unset !important;
}

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

.TFlowDirection-RightToLeft g > text > tspan {
    font-family: inherit;
}
/*#endregion*/



/*#region Layouting and Orientations */

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

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

.THorizontalAlignment-Left {
    display: flex;
}

.THorizontalAlignment-Center {
    display: flex;
    margin-left: auto;
    margin-right: auto;
}

.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;
    flex-grow: 1;
    flex-shrink: 1;
}


.TVerticalAlignment-Top {
    display: flex;
}

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

.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: 0;
    order: 0;
    flex-basis: auto;
    flex-grow: 0;
}

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

    .TOrientation-Vertical > .TVerticalAlignment-Center + .TVerticalAlignment-Bottom {
        margin-top: unset !important;
    }

    .TOrientation-Vertical > .TVerticalAlignment-Center:has(+.TVerticalAlignment-Center) {
        margin-bottom: unset !important;
    }

    .TOrientation-Vertical > .TVerticalAlignment-Center + .TVerticalAlignment-Center {
        margin-top: unset !important;
    }


.TOrientation-Vertical > .TVerticalAlignment-Bottom {
    display: flex;
    flex-shrink: 0;
    flex-basis: auto;
    order: 100;
    margin-top: auto !important;
    flex-grow: 0;
}

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

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

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

.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;
    width: unset;
}

.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%;
}

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

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

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

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


.TOrientation-Horizontal > .THorizontalAlignment-Center:has(+ .THorizontalAlignment-Center) {
    margin-right: unset !important;
}

.TOrientation-Horizontal > .THorizontalAlignment-Center + .THorizontalAlignment-Center {
    margin-left: unset !important;
}

.TOrientation-Horizontal > .THorizontalAlignment-Right + .THorizontalAlignment-Right,
.TOrientation-Horizontal > .THorizontalAlignment-Center + .THorizontalAlignment-Right {
    margin-left: unset !important;
}

.TOrientation-Horizontal > .THorizontalAlignment-Left + .THorizontalAlignment-Right {
    /* margin-left: auto !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;
    flex-shrink: 0;
}

.TOrientation-Vertical > .TVerticalAlignment-Bottom + .TVerticalAlignment-Bottom {
    margin-top: unset !important;
}


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

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

/*#region Public Settings */
.ConsoleLoadingPanel {
    height: 100%;
    width: 100%;
    background-image: url(/Content/Images/backgrounds/3.jpg);
    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: inherit;
        font-size: large;
        text-shadow: 3px 2px 6px #b7b5d6;
    }

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




.noselect {
    -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;
    white-space: nowrap !important;
    display: block;
}

.TFlowDirection-RightToLeft title {
    font-family: inherit;
}

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: -2px;
    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;
}

    .TWindowControl .Tablet-Root {
        position: relative;
        width: 768px;
        height: 1024px;
        background: #222;
        border-radius: 20px;
        box-shadow: 0 4px 10px rgba(0,0,0,0.3);
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .TWindowControl .Tablet-Header {
        position: absolute;
        top: 12px;
        left: 50%;
        transform: translateX(-50%);
        width: 20px;
        height: 20px;
        background: #555;
        border-radius: 50%;
        z-index: 2;
    }

    .TWindowControl .Tablet-Footer {
        display: flex;
        justify-content: space-around;
        padding: 20px 0;
        background: #222;
        position: absolute;
        bottom: 0;
        width: 100%;
    }

    .TWindowControl .Tablet-Button {
        width: 24px;
        height: 24px;
        background: #555;
        border-radius: 50%;
    }

    .TWindowControl .Tablet-Container {
        flex: 1;
        margin-top: 40px;
        margin-bottom: 65px;
        background: #fff;
        padding: 0px;
        overflow: auto;
    }

    .TWindowControl .Mobile-Root {
        position: relative;
        width: 375px;
        height: 667px;
        background: #222;
        border-radius: 30px;
        box-shadow: 0 4px 10px rgba(0,0,0,0.3);
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .TWindowControl .Mobile-Header {
        position: absolute;
        top: 16px;
        left: 50%;
        transform: translateX(-50%);
        width: 16px;
        height: 16px;
        background: #555;
        border-radius: 50%;
        z-index: 2;
    }

    .TWindowControl .Mobile-Container {
        flex: 1;
        margin-top: 40px;
        margin-bottom: 50px;
        background: #fff;
        overflow: auto;
    }

    .TWindowControl .Mobile-Footer {
        display: flex;
        justify-content: space-around;
        padding: 10px 0;
        background: #222;
        position: absolute;
        bottom: 0;
        width: 100%;
    }

    .TWindowControl .Mobile-Button {
        width: 24px;
        height: 24px;
        background: #555;
        border-radius: 50%;
    }

.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);
    pointer-events: auto;
}

    .TPopupContainer.TComboBox-Popup {
        display: flex;
        flex-direction: column;
        position: relative;
        box-sizing: border-box;
    }

        .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: 0px;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: center;
}

.ProposedPositionType-Top {
    border-bottom-width: 0px;
    border-left-width: 0px;
    border-right-width: 0px;
    border-top-width: 0px;
}

.ProposedPositionType-Bottom {
    border-bottom-width: 0px;
    border-left-width: 0px;
    border-right-width: 0px;
    border-top-width: 1px;
}

.ProposedPositionType-Left {
    border-left-width: 0px;
    border-top-width: 0px;
    border-bottom-width: 0px;
}

.ProposedPositionType-Right {
    border-right-width: 0px;
    border-top-width: 0px;
    border-bottom-width: 0px;
}

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

.TSimpleConditionValuePlaceHolder {
    flex: 1 0 auto;
}

.TCompareOperation_InList {
    display: flex;
    flex-direction: row;
    column-gap: 3px;
}

.TValuePlaceHolderRemoveContainer {
    opacity: 0;
    position: absolute;
    width: 20px;
    height: 20px;
    left: 20px;
    top: calc(10%);
    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;
}

.TSimpleConditionValuePlaceHolder_Container {
    display: flex;
    min-width: 100px;
    min-height: 20px;
    width: auto;
    flex: 1 0 auto;
    flex-direction: row;
    align-content: center;
    align-items: center;
    justify-content: flex-start;
}
/*#endregion */
/*#region TSelector_User*/
.TSelector_User {
    min-height: 24px !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);
    -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: stretch;
        justify-content: center;
        flex: 1 1 100%;
        height: auto;
        gap: 4px;
    }

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

@keyframes IsFlashing {
    50% {
        opacity: 0;
    }
}

.IsFlashing {
    animation: IsFlashing 1s linear infinite;
}

.TButton-PartTextIcon {
    font-family: FontAwesome;
    font-style: normal;
    line-height: 0px;
    align-self: center;
}

.TButton-PartText {
    justify-self: center;
    line-height: 17px;
    vertical-align: middle;
    white-space: nowrap;
}

.TButton-PartImage {
    align-self: center;
}

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

.TButton-Normal-Back {
    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%);
}

.TControl.TButton.ViewType-Inline {
    border: 1px solid #244580;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    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%);
    color: white;
    min-width: 19px;
    min-height: 17px;
    padding: 0px;
    font-size: smaller;
    height: 100%;
    width: auto;
}

.TButton.THorizontalContentAlignment-Left .Content {
    justify-content: center;
    text-align: left;
}
/*#endregion */
.TEntityLookupRadio {
    min-height: 25px;
}
/*#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;
    position: relative;
}
/*#endregion*/

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

.TColorEdit .TColorEdit-ColorSample {
    width: 20px;
    position: relative;
    height: 20px !important;
    display: flex;
    flex: 0 1 auto;
}

.TColorPicker-Root {
    background: rgb(198 220 247);
    border-radius: 5px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    padding: 10px;
    overflow: hidden;
    border-style: solid;
    border-width: 1px;
    border-color: #00000054;
}

.TColorPickerPalette-Root {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 0 1 auto;
    direction: ltr;
    column-gap: 5px;
    row-gap: 2px;
    width: 100%;
    overflow: hidden;
    height: 100%;
    box-sizing: border-box;
}

.TColorPickerPalette-Row {
    display: flex;
    width: 100%;
    height: 12.5%;
    position: relative;
    flex-direction: row;
    gap: 2px;
    flex-wrap: nowrap;
    box-sizing: border-box;
}

.TColorPickerPalette-Item {
    cursor: pointer;
    border: 1px solid;
    border-radius: 1px;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    box-sizing: border-box;
    flex: 1 0 auto;
    background-size: 14px 12px;
}

    .TColorPickerPalette-Item.IsActive {
        background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAIVJREFUeNpiYBhsgJFMffxAXABlN5JruT4Q3wfi/0DsT64h8UD8HmpIPCWG/KemIfOJCUB+Aoacx6EGBZyHBqI+WsDCwuQ9mhxeg2A210Ntfo8klk9sOMijaURm7yc1UP2RNCMbKE9ODK1HM6iegYLkfx8pligC9lCD7KmRof0ZhjQACDAAceovrtpVBRkAAAAASUVORK5CYII=");
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18'%3E%3Cpath d='M9 16.172l10.594-10.594 1.406 1.406-12 12-5.578-5.578 1.406-1.406z' fill='%23000'%3E%3C/path%3E%3C/svg%3E");
        box-shadow: inset 0px 0px 1px 1px #f80606;
    }

.HueEditor {
    padding: 11px 0px;
}

.TColorPickerHue-Root {
    width: 18px;
    height: 100%;
    display: flex;
    border-radius: 3px;
    background: -moz-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
    background: -o-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
    background: -webkit-gradient(linear, left top, left bottom, from(#ff0000), color-stop(0.17, #ffff00), color-stop(0.33, #00ff00), color-stop(0.5, #00ffff), color-stop(0.67, #0000ff), color-stop(0.83, #ff00ff), to(#ff0000));
    background: -webkit-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
    background: linear-gradient(to bottom, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
    flex: 1 0 auto;
    box-sizing: border-box;
    position: relative;
    cursor: pointer;
}

.TColorPickerHue-Selector {
    top: 0%;
    width: 20px;
    height: 20px;
    position: absolute;
    transform: translate(-50%,-50%);
    cursor: pointer;
    border-radius: 50%;
    background: #f9f9f9;
    box-shadow: 0 0 2px 0px #3a3a3a;
    left: 50%;
}

.TColorGradiant-Root {
    display: flex;
    height: 100%;
    width: 100%;
    flex: 1 0 100%;
    border-radius: 4px;
    cursor: pointer;
    overflow: hidden;
}

.TColorGradiant-Selector {
    top: 0%;
    width: 16px;
    height: 16px;
    position: absolute;
    transform: translate(-50%,-50%);
    cursor: pointer;
    border-radius: 50%;
    box-shadow: 0 0 2px 0px #3a3a3a;
    left: 0%;
    z-index: 1;
    border: 4px solid #f9f9f9;
    box-sizing: border-box;
    border-style: dashed;
}

.AlphaChannelEditor {
    padding: 0px 12px;
}

.TColorPickerAlpha-Outer {
    height: 12px;
    position: relative;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='%23ccc' fill-opacity='1'%3E%3Crect x='0' y='0' width='6' height='6' /%3E%3Crect x='6' y='6' width='6' height='6' /%3E%3C/svg%3E");
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==");
    border-radius: 2px;
    cursor: pointer;
}

.TColorPickerAlpha-Root {
    background: linear-gradient(to right, rgba(168, 183, 215, 0), rgb(168, 183, 215));
}

.TColorPickerAlpha-Selector {
    position: absolute;
    cursor: pointer;
    height: 20px;
    border-radius: 50%;
    width: 20px;
    background: #f9f9f9;
    box-shadow: 0 0 2px 0px #3a3a3a;
    transform: translate(-50%, -50%);
    margin: unset;
    top: 50%;
    z-index: 1;
}

.TColorGradiant-Saturation {
    background-image: -webkit-gradient(linear, 0 0, 100% 0, from(#FFF), to(rgba(204, 154, 129, 0)));
    background-image: -webkit-linear-gradient(left, #FFF, rgba(204, 154, 129, 0));
    background-image: -moz-linear-gradient(left, #fff, rgba(204, 154, 129, 0));
    background-image: -o-linear-gradient(left, #fff, rgba(204, 154, 129, 0));
    background-image: linear-gradient(to right, #fff, rgba(204, 154, 129, 0));
    background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(204, 154, 129, 0) 100%);
}

.TColorGradiant-Value {
    border-radius: 4px;
    background-image: -webkit-gradient(linear, 0 100%, 0 0, from(#000000), to(rgba(204, 154, 129, 0)));
    background-image: -webkit-linear-gradient(bottom, #000000, rgba(204, 154, 129, 0));
    background-image: -moz-linear-gradient(bottom, #000, rgba(204, 154, 129, 0));
    background-image: -o-linear-gradient(bottom, #000, rgba(204, 154, 129, 0));
    background-image: linear-gradient(to top, #000, rgba(204, 154, 129, 0));
    background: linear-gradient(to bottom, rgba(0, 204, 154, 0) 0%, rgba(0, 0, 0, 1) 100%);
}

.TColorPicker-Root .SelectedColor-Back {
    position: relative;
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==");
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='%23ccc' fill-opacity='1'%3E%3Crect x='0' y='0' width='6' height='6' /%3E%3Crect x='6' y='6' width='6' height='6' /%3E%3C/svg%3E");
    width: 30px;
    display: flex;
    overflow: hidden;
}

.SelectedColor-Front {
    width: 100%;
    border: 2px solid;
    border-style: inset;
    border-radius: 3px;
}

/*#endregion*/

/*#region Calendar*/
.TCalendar {
    border: 1px solid black;
    border-radius: 3px;
    overflow: hidden;
    background-color: white;
}

.TCalendar-Root {
    display: flex;
    align-self: stretch;
    min-width: 250px;
    min-height: 230px;
    width: 100%;
    height: 100%;
    flex-direction: column;
    flex: 1 1 100%;
}

.TCalendar-BodyContainer {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    align-content: stretch;
}

.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";
        }

.TFlowDirection-RightToLeft .TCalendar-Header .MoveButton.Previous:before {
    content: "\f010";
}

.TFlowDirection-RightToLeft .TCalendar-Header .MoveButton.Next:before {
    content: "\f012";
}

.TCalendar-Header-Today {
    display: flex;
    flex: 0 0 auto;
    align-self: center;
    align-items: center;
    justify-content: space-between;
    flex-direction: column
}

.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-Node {
    text-align: center;
    cursor: pointer;
    border-width: 1px;
    border-color: transparent;
    border-style: solid;
}

.TCalendar-Day {
}

.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;
    flex-wrap: nowrap;
    flex-direction: column;
}



.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;
    column-gap: 4px;
}

    .TCheckEdit > .TCheckEdit-Root {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        overflow: hidden;
        column-gap: 4px;
        box-sizing: border-box;
    }

        .TCheckEdit > .TCheckEdit-Root > .TCheckEditCheckbox {
            position: relative;
            height: 15px;
            width: 15px;
            -webkit-border-radius: 2px;
            -moz-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%);
            cursor: pointer;
            display: flex;
            padding: 1px;
            box-sizing: border-box;
            color: rgb(47 83 143);
            box-sizing: border-box;
        }

        .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%);
    -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 */
.TDesktopPageSelector {
    -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;
    pointer-events: auto;
}

    .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;
        white-space: normal;
        text-overflow: ellipsis;
        word-wrap: break-word;
        text-align: center;
        display: block;
        margin: 0px;
        max-width: 74px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        line-height: 17px;
    }

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

    .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
}

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

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


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

    .TDesktopSelectionBox.IsVisible {
        display: block;
    }

.TDesktopRoot {
    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;
}

.TDesktopPage {
    opacity: 0;
    transition: 200ms cubic-bezier(0.4, 0, 1, 1);
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: block;
    transition: visibility 0.2s, opacity 0.2s cubic-bezier(0.4, 0, 1, 1);
    pointer-events: none;
    visibility: collapse;
}

    .TDesktopPage.IsVisible {
        opacity: 1;
        transition-duration: 200ms;
        pointer-events: visible;
        visibility: visible;
    }

.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%;
}


/*#endregion*/



/*#region File Uploader*/
.TControl.TFileUploader {
    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.TFileUploader .File {
        display: flex;
        flex-direction: row;
    }

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

/*#region TImageBox*/
.TImageBox {
    height: unset;
    overflow: hidden;
    box-sizing: border-box;
    position: relative;
}

    .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%);
        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.ShowTileBakground {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='%23ccc' fill-opacity='1'%3E%3Crect x='0' y='0' width='6' height='6' /%3E%3Crect x='6' y='6' width='6' height='6' /%3E%3C/svg%3E");
        background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==");
    }

.TControl.TImage {
    display: flex;
    justify-content: center;
    overflow: hidden;
}

    .TControl.TImage .TImage-Root {
        width: 100%;
        height: 100%;
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        transition: background 500ms ease 0s;
    }

    .TControl.TImage.ImageStretch-Auto .TImage-Root {
        background-size: auto;
    }

    .TControl.TImage.ImageStretch-Contain .TImage-Root {
        background-size: contain;
    }

    .TControl.TImage.ImageStretch-Cover .TImage-Root {
        background-size: cover;
    }

/*#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%);
}

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

.TImageEdit-ButtonContainer {
    gap: 4px;
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
}

    .TImageEdit-ButtonContainer > .TButton {
        min-width: 30px;
        flex: 0;
    }
/*#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 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;
}

    .TLine :first-child {
        height: 1px;
        background-color: #8aacdc;
    }

    .TLine :last-child {
        height: 1px;
        background-color: #bad2f1;
    }

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

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

/*#region TLayoutGroup*/
.TControl.TLayoutGroup {
    padding: unset !important;
}

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

    .TTabPage.AllowVerticalScroll,
    .TLayoutGroup.AllowVerticalScroll > .TLayoutGroupContent,
    .TLayoutGroup.AllowVerticalScroll > .TLayoutGroupContentBack,
    .TLayoutGroup.AllowVerticalScroll > .TLayoutGroupContentBack > .TLayoutGroupContent {
        overflow-y: auto;
    }


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




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


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




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

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

.TLayoutGroup.AutoScroll > .TLayoutGroupContent {
    overflow: auto;
}

.TLayoutGroup.ViewType-GroupBox {
    overflow: visible;
    background: #b1cef3;
}

.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: 1px 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;
    backdrop-filter: inherit;
}

.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%);
    box-sizing: border-box;
    display: flex;
    width: 100%;
}

    .TLayoutGroupHeader + .TLayoutGroupBoxContent {
        border-width: 0px 1px 1px 1px;
    }

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

.IsCollapsible > .TLayoutGroupContentBack > .TLayoutGroupHeader {
    cursor: pointer;
    column-gap: 4px;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: row;
}

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

.DesignMode > .TControl-Adorner {
    overflow: hidden;
}

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

    .DesignMode > .TControl-Adorner > .TObjectResizer {
        bottom: 0px;
        top: 0px;
        right: 0px;
        left: 0px;
    }

.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,
.TWizardPage.DesignMode > .TControl-Adorner > .Overlay,
.TWizard.DesignMode > .TControl-Adorner > .Overlay {
    pointer-events: none;
}

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

.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;
    flex-shrink: 0;
}

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

.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-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 {
    pointer-events: none;
    box-sizing: content-box;
    position: absolute;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
    min-height: 10px;
    min-width: 10px;
}

.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;
    min-Height: 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;
    }

.TFlowDirection-RightToLeft .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;
    flex: 1 0 auto !important;
}

    .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-Contents {
        display: flex;
    }

    .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;
        opacity: 0;
        /* min-height: 105px; */
        overflow: auto;
        /* max-width: 100%; */
        /* width: 100%; */
        pointer-events: none;
        display: none;
        border-top: 1px solid;
        position: relative;
        height: fit-content;
    }

        .TRibbon .TRibbonTab.IsSelected {
            display: flex;
            opacity: 1;
            pointer-events: visible;
            flex-wrap: nowrap;
            flex-direction: row;
            align-items: stretch;
            flex: 1 1 auto;
            overflow: auto;
            /* height: 117px; */
        }



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

    .TRibbon .TRibbonSection-TitleContainer {
        display: flex;
        flex: 0 0 18px;
        justify-content: center;
        padding: 1px 0px 2px 0px;
        align-items: center;
        flex-wrap: nowrap;
    }

    .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: 0px;
    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: center;
    overflow: hidden;
    flex-wrap: nowrap;
    width: auto;
    box-sizing: border-box;
    align-items: stretch;
    gap: 4px;
}

.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 5px;
    cursor: pointer;
}

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

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

    .TRibbon .TRibbonButton .TRibbonButton-Text {
    }

    .TRibbon .TRibbonButton.IsChecked {
        background-color: #ddd;
    }

.TRibbonTab-SectionContainer {
    position: relative;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
    width: 100%;
    overflow-y: hidden;
    overflow-x: auto;
}

.TRibbonTab-BottomBar {
    position: absolute;
    background-color: #89a5ce;
    bottom: 0px;
    flex: 1 1 100%;
    /* margin: 0 0 0 0; */
    pointer-events: none;
    display: block;
    padding: 1px 0px 2px 0px;
    width: 100%;
    /* height: 23px; */
}

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

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

.TRibbonButton-Root {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    flex-wrap: nowrap;
    width: auto;
    flex: 1 1 auto;
    overflow: hidden;
    box-sizing: border-box;
    height: auto;
    gap: 4px;
}

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



.TRibbon .TRibbonButton-Large .TRibbonButton-Text {
    clear: left;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1 1 auto;
    display: -webkit-box;
    height: auto;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
    /* line-height: 14px; */
    height: auto;
}

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

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

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

.TRibbonTab-HeaderText {
    font-size: larger;
}
/*#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 > span {
        width: 100%;
    }

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

.TFlowDirection-RightToLeft .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;
    gap: 4px;
}

    .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;
    padding: 4px;
    border-radius: 3px;
}

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

    .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;
    padding: 0px 4px;
    box-sizing: border-box;
    /* display: flex; */
}

.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;
    gap: 2px;
}

    .TreeViewItem-RowContainer > .TreeViewExpandToggle {
        width: 7px;
        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,
    .TTreeView.TFlowDirection-LeftToRight .TreeViewItem-RowContainer.HasChild > .TreeViewExpandToggle:before {
        content: "\f0da";
    }

.TFlowDirection-RightToLeft .TreeViewItem-RowContainer.HasChild > .TreeViewExpandToggle:before,
.TTreeView.TFlowDirection-RightToLeft .TreeViewItem-RowContainer.HasChild > .TreeViewExpandToggle:before {
    content: '\f0d9';
}

.TreeViewItem-RowContainer.HasChild.IsExpanded > .TreeViewExpandToggle:before,
.TTreeView.TFlowDirection-LeftToRight .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;
    padding: 0px 4px;
    box-sizing: border-box;
    border-radius: 2px;
    flex: 1 1 100%;
    border-style: solid;
    border-width: 1px;
    border-color: transparent;
    gap: 4px;
}

    .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%);
        color: white;
    }

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

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

.TFlowDirection-RightToLeft .TreeViewItem-Childs,
.TTreeView.TFlowDirection-RightToLeft {
    margin-left: unset;
    margin-right: 15px;
}

.TTreeView.TFlowDirection-LeftToRight .TreeViewItem-Childs {
    margin-left: 15px;
    margin-right: unset;
}

.TreeViewItem-Row-Text {
    text-overflow: ellipsis;
    pointer-events: none;
    white-space: nowrap;
    display: inline-block;
}

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


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

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

.TabControl-Tabs {
    display: flex;
    flex: 0 0 auto;
    flex-direction: row;
    margin: 0px 4px -1px 4px;
    flex-wrap: wrap;
    z-index: 1;
    overflow: hidden;
    gap: 1px;
    box-sizing: border-box;
}

.TTabControl.TabPosition-Near > .TabControl-Root {
    flex-direction: row;
}

    .TTabControl.TabPosition-Far > .TabControl-Root > .TabControl-Tabs,
    .TTabControl.TabPosition-Near > .TabControl-Root > .TabControl-Tabs {
        flex-direction: column;
    }

        .TTabControl.TabPosition-Far > .TabControl-Root > .TabControl-Tabs > .TTabItem-Header,
        .TTabControl.TabPosition-Near > .TabControl-Root > .TabControl-Tabs > .TTabItem-Header {
            flex-grow: 0;
        }

.TTabControl.TabPosition-Far > .TabControl-Root {
    flex-direction: row-reverse;
}

.TTabControl.TabPosition-Down > .TabControl-Root {
    flex-direction: column-reverse;
}



.TabControl-Contents {
    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%);
    overflow: auto;
    transition: all 0ms ease 0ms;
    transform: translate(0px, 0px);
    margin-top: 0px !important;
    box-sizing: border-box;
    height: auto;
    width: unset;
}

.TabControl-Contents-Inner {
    position: absolute;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
}


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

    .TTabPage.IsSelected {
        display: flex;
    }

    .TTabPage.IsNotSelected {
        display: none;
    }

    .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-width: 1px 1px 1px 1px;
        border-radius: 3px 3px 3px 3px;
    }

.TTabControl.TabPosition-Down > .TabControl-Root > .TabControl-Tabs {
    margin: -1px 4px 0px 4px;
}

.TTabControl.TabPosition-Up > .TabControl-Root > .TabControl-Tabs > .TTabItem-Header {
    border-radius: 3px 3px 0px 0px;
}

    .TTabControl.TabPosition-Up > .TabControl-Root > .TabControl-Tabs > .TTabItem-Header.IsSelected {
        border-radius: 3px 3px 0px 0px;
        border-bottom-width: 0px;
    }

.TTabControl.TabPosition-Down > .TabControl-Root > .TabControl-Tabs > .TTabItem-Header {
    border-radius: 0px 0px 3px 3px;
}

    .TTabControl.TabPosition-Down > .TabControl-Root > .TabControl-Tabs > .TTabItem-Header.IsSelected {
        border-radius: 0px 0px 3px 3px;
        border-width: 0px 1px 1px 1px;
    }

.TTabControl.TabPosition-Near > .TabControl-Root > .TabControl-Tabs > .TTabItem-Header {
    border-radius: 0px 3px 3px 0px;
}

    .TTabControl.TabPosition-Near > .TabControl-Root > .TabControl-Tabs > .TTabItem-Header.IsSelected {
        border-radius: 0px 3px 3px 0px;
        border-width: 1px 1px 1px 0px;
    }

.TTabControl.TabPosition-Far > .TabControl-Root > .TabControl-Tabs > .TTabItem-Header {
    border-radius: 3px 0px 0px 3px;
}

    .TTabControl.TabPosition-Far > .TabControl-Root > .TabControl-Tabs > .TTabItem-Header.IsSelected {
        border-radius: 3px 0px 0px 3px;
        border-width: 1px 0px 1px 1px;
    }

.IsMobileSize .TTabItem-Header,
.StretchTabs > .TTabItem-Header {
    flex: 1 1 auto;
}

.TTabItem-Header-Content {
    background-image: none;
    overflow: hidden;
    display: flex;
    justify-content: center;
    gap: 4px;
    padding: 1px;
    align-items: center;
    flex-direction: row;
    flex-wrap: nowrap;
    box-sizing: border-box;
    width: auto;
}

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

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

.TButton.TButton.Tab-Close-Button {
    flex: 0 0 13px;
    height: 14px;
}

.IsMobileSize .TRadioGroup {
    min-height: 26px;
}
/*#endregion*/
/*#region Task bar*/
.TTaskbarControl {
    background-color: black;
    color: white;
    display: flex;
    flex-direction: row;
    height: 40px;
    text-decoration: none;
    user-select: none;
    box-sizing: border-box;
}

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



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



.TPopup-Root.Startmenu_Popup {
    background-color: #062b6373;
    border: 1px solid #00000045;
    border-radius: 0px 5px 0px 0px;
    min-width: 500px;
    padding: 5px 5px 5px 0px;
}

.TFlowDirection-RightToLeft .TPopup-Root.Startmenu_Popup {
    border-radius: 5px 0px 0px 0px;
    padding: 5px 0px 5px 5px;
}

.Startmenu-CommandContainer {
    display: flex;
    flex: 1 1 40%;
    flex-direction: row;
    justify-content: flex-start;
    box-sizing: border-box;
}

.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;
    width: 100%;
    height: 100%;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow: hidden;
    gap: 4px;
}

    .Startmenu-Popup-Root .TSearchMenu-SearchText {
        padding: 5px 0px;
    }

    .Startmenu-Popup-Root .TTreeView {
        border: unset;
        padding: 0px;
    }

.TFlowDirection-RightToLeft .Startmenu_Popup .start-expand {
    transform-origin: right;
}

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

.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;
    background-color: #3a5377;
    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;
    border-style: solid;
    border-color: #284172;
    border-width: 1px 0px 1px 1px;
    flex: 1 0 100px;
}

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

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

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

.Startmenu_Popup .LoginUser {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding-top: 10px;
}

    .Startmenu_Popup .LoginUser .ImageContainer {
        display: flex;
        justify-content: center;
        box-sizing: border-box;
    }

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


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

.TTaskBarButton {
    align-items: center;
    color: #FFFFFF;
    cursor: default;
    display: flex;
    flex-direction: row;
    font-family: inherit;
    font-size: inherit;
    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;
    width: auto;
    flex: 0 1 auto;
}

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

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

        .TTaskBarButton:hover .TTaskBarButtonUnderline {
            width: 100%;
        }

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

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

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



.TTaskBarButton-Image {
    width: 32px;
    height: 32px;
    margin-right: 3px;
    pointer-events: none;
}

.TTaskBarButton-Text {
    margin-top: auto;
    margin-bottom: auto;
    max-width: 130px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.TFlowDirection-RightToLeft .TTaskBarButton-Image {
    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;
    flex-wrap: nowrap;
    gap: 4px;
}

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

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

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


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

.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;
    column-gap: 3px;
}

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

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

    .TPager .TPageCountView {
        text-align: center;
        width: auto;
        align-self: center;
        flex: 0 1 auto;
        /*background-color: red;*/
    }

    .TPager .TPageSizeCombo {
        display: flex;
        flex: 0 1 70px;
    }

.TFlowDirection-RightToLeft .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 {
    display: flex;
    flex: 0 0 auto;
    align-self: stretch;
    flex-wrap: wrap;
    padding: 5px;
    gap: 5px;
}

.TReporting-BreadCrumbButtonText {
    margin: 5px;
}

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

.TFlowDirection-RightToLeft .TReporting-BreadCrumbButton {
    text-align: right !important;
}

.TRporting-DataGridContainer {
}

/*#endregion */



/*#region Dashboard */
.TDashboardControlPivot {
    width: 100%;
    overflow: hidden;
    flex: 1 1 0%;
}

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

    .TDashboardControlCard .TDashboard-CardItem {
        border-radius: 4px;
        border-style: solid;
        border-width: 1px;
        display: flex;
        height: 133px;
        margin: 5px 3px;
        transition: 0.3s;
        width: 200px;
        padding: 5px;
        box-sizing: border-box;
        flex-direction: column;
        align-items: stretch;
    }

.TDashboardControlMap {
    display: flex;
    overflow: auto;
}

.TDashboard-Container {
    box-sizing: border-box;
    /* padding: 10px; */
    overflow: hidden;
}

.TDashboardControlGauge-Items {
    position: absolute;
    display: flex;
    /* width: 100%; */
    /* height: 100%; */
    flex-direction: row;
    flex-wrap: wrap;
    /* align-content: center; */
    justify-content: space-evenly;
    align-items: center;
    box-sizing: border-box;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
}

.TDashboardControlGauge {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    transition: all ease-in-out 200ms;
    padding: 2px;
    position: relative;
    overflow: auto;
    flex: 1 1 auto;
}

    .TDashboardControlGauge .TGaugeItem {
        border: 1px solid #00000030;
        border-radius: 4px;
        box-sizing: border-box;
        display: flex;
        flex: 0 1 auto;
        flex-direction: column;
        min-height: 170px;
        padding: 3px;
        width: 250px;
        flex-wrap: nowrap;
        align-items: stretch;
        overflow: hidden;
        /* height: 277px; */
        margin: 5px;
        box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%);
    }

    .TDashboardControlGauge .TDeltaContainer {
        display: flex;
        flex-direction: row;
        text-align: center;
        width: 100%;
        align-items: center;
        flex-wrap: nowrap;
        justify-content: center;
    }

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

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

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

.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);
}


.TDashboardControlCard .TDashboard-CardItemLine {
    height: 33%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    box-sizing: border-box;
}

.TDashboard-CardItemLine.CardLineMiddle {
    display: flex;
    flex-direction: row;
}

.TDashboardControlCard .TDashboard-cardItemSeries {
    float: left;
    text-align: left;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

.TDashboardControlCard .CardItemImage {
    float: right;
}

.CardLineBottom > .CardItemValue {
    /* float: left; */
    flex: 1;
}

.TDashboardControlCard .CardItemSeriesTitle {
    flex: 1 1 auto;
}

.TDashboardControlCard .CardItemHeader {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
}

.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;
    width: 800px;
    height: 600px;
    left: calc(50% - 400px);
    top: 50%;
}

    .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;
        right: 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;
        right: unset !important;
    }

    .TForm.RightMaximized {
        height: calc(100vh - 40px) !important;
        left: 50vw !important;
        top: 0 !important;
        transition: all 0.2s;
        width: 50vw !important;
        right: unset !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;
        gap: 5px;
        align-items: center;
    }

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



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

.IsMobileSize .TForm .TForm-TitleBack {
    min-height: 35px;
}

.TForm .TForm-Title-Text {
    white-space: nowrap;
    flex: 1 1 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    line-height: normal;
    user-select: none;
    text-align: start;
}

.TForm .TForm-Title-ButtonContainer {
    align-self: center;
    column-gap: 2px;
}

.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 .AllowContentScroll {
    overflow: auto;
}

.IsMobileSize .TForm .TForm-TitleBar-Button {
    min-width: 26px;
    min-height: 28px;
}

    .IsMobileSize .TForm .TForm-TitleBar-Button.Minimize {
        display: none;
    }


.TFlowDirection-RightToLeft .TForm.Minimized {
    left: 80vw !important;
}

.TFlowDirection-RightToLeft .TForm .TForm-TitleBack {
    padding-left: 5px;
    padding-right: 5px;
    column-gap: 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: inherit;
            /* font-size: large; */
            text-shadow: 3px 2px 6px #b7b5d6;
            max-width: 500px;
            max-height: 300px;
        }
/*#endregion*/

/*#region LoginPage */
.Login-ApplicationIcon {
    position: absolute;
    width: 48px;
    height: 48px;
    overflow: auto;
    top: -26px;
    left: 14px;
}

.TFlowDirection-RightToLeft .LoginPage .UserImageContainer {
    /* margin-right: unset; */
    /* margin-left: 23px; */
}

.TLogin {
    overflow: auto;
}

.LoginPage {
    height: 100%;
    display: flex;
    width: 100%;
    justify-content: center;
    box-sizing: border-box;
    padding: 10px;
    background: url(/Content/Images/backgrounds/3.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    flex-direction: column;
    gap: 10px;
}


    .LoginPage .LanguageSelector {
        width: 49px;
    }

    .LoginPage .Login-BottonContainer-Down {
        position: absolute;
        display: flex;
        align-self: center;
        bottom: 17px;
        left: auto;
        gap: 4px;
        transform: translateX(0px);
    }

        .LoginPage .Login-BottonContainer-Down .TButton {
            height: 28px;
            box-shadow: -2px 3px 7px black !important;
            background: #faebd787;
            width: auto;
        }

    .LoginPage .ProductNameContainer {
        position: relative;
        justify-self: center;
        min-height: 42px;
        display: flex;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
        align-self: stretch;
        border-radius: 3px 3px 0px 0px;
        overflow: hidden;
        padding: 5px 10px;
    }

        .LoginPage .ProductNameContainer .ProductName {
            font-size: 18px;
            opacity: 0.8;
            /*color: white;*/
            text-shadow: 0px 0px 8px white;
            display: block;
            white-space: nowrap;
            text-overflow: ellipsis;
            width: 100%;
            text-align: center;
            overflow: hidden;
        }

.UserImage-Root {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.LoginPage .UserImageContainer {
    position: relative;
    min-width: 73px;
    min-height: 73px;
    display: flex;
    padding: 4px;
    align-self: center;
    justify-self: center;
}


    .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;
        min-width: 73px;
        min-height: 73px;
    }

.LoginPage .LoginContainer {
    align-self: center;
    justify-self: center;
    display: flex;
    border: 1px solid;
    border-radius: 4px;
    background-color: #00000029;
    flex-direction: column;
    position: relative;
    box-sizing: border-box;
    box-shadow: 0 0 6px black,0 0 5px white;
    backdrop-filter: blur(60px);
    padding: 10px;
    max-width: 420px;
    width: 100%;
    gap: 4px;
}

    .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%;
    }

.LoginBox .Top {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    box-sizing: border-box;
    /* padding: 10px; */
    justify-content: space-evenly;
    width: 100%;
}

.LoginBox .InputsContainer {
    flex: 0 0 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
    color: white;
}

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

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


.LoginPage .LoginContainer .TTextEdit,
.LoginPage .LoginContainer .TextBoxContainer {
    height: 27px;
    background-color: #0000006e;
    border: 1px solid #00000054;
    border-radius: 4px;
    width: 100%;
    display: flex;
    justify-content: stretch;
    align-items: center;
    padding: 0px 5px;
    box-sizing: border-box;
    position: relative;
    box-shadow: inset 0 0 2px #fafafa;
}

.LoginPage .LoginContainer .TCaptchaEditor > .TTextEdit {
    background: #0000006e;
    border: 1px solid #00000054;
    color: white;
    box-shadow: inset 0 0 2px #fafafa;
    padding: 0px 5px;
    height: auto;
}

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

.LoginPage.ForgotPassword .ButtonContainer {
    padding-top: 10px !important;
}


.LoginPage .LoginContainer .TButton {
    height: 30px;
    width: 167px;
    flex: 0 0 auto;
}

.LoginPage .LoginContainer .TButton {
    background: linear-gradient(to bottom, #f3f4f5 0%,#ebedef 50%,#e3e6e8 100%);
    border-color: gray;
    color: black;
}

    .LoginPage .LoginContainer .TButton:hover {
        background: linear-gradient(to bottom, #ffffff 0%, #ffffff 50%, #e3e6e8 100%);
    }

.LoginPage .LoginContainer .RememberMe {
    color: white;
    flex: 0 1 auto;
    width: auto;
}

.LoginPage .MessageContainer {
    background-color: #e3e3e3c7;
    border-radius: 6px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #00000085;
    box-shadow: 0px 0px 8px 0px #00000080;
    position: relative;
    text-shadow: 0px 0px 10px #18020e;
    font-size: 14px;
    padding: 15px;
    align-self: center;
    box-sizing: border-box;
    height: auto;
    width: 100%;
    max-width: 400px;
    flex: 0;
    opacity: 0;
    transition-duration: 500ms;
    box-shadow: 0px 0px 8px 5px #ffffff7a;
}

    .LoginPage .MessageContainer.HasMessage {
        opacity: 1;
    }

    .LoginPage .MessageContainer .Message {
        text-align: center;
    }

.LoginPage .LoginContainer .ButtonContainer {
    display: flex;
    justify-content: center;
    flex-direction: row;
    padding-top: 10px;
    flex-wrap: nowrap;
    gap: 4px;
    align-items: center;
}
/*#endregion */

/*#region TSingle File Selector & TMultiple File Selector */
.TFileContainer {
    display: flex;
    flex-grow: 0;
    flex-shrink: 1;
    width: 100%;
    align-self: stretch;
    height: auto;
    overflow: hidden;
    flex-wrap: wrap;
    gap: 1px;
}

    .TFileContainer > .TFileItem {
        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%);
        -webkit-border-radius: 2px;
        -moz-border-radius: 2px;
        border-radius: 2px;
        color: white;
        display: flex;
        font-size: 12px;
        justify-content: center;
        align-items: center;
        border: 1px solid rgb(39 77 138);
        flex: 0 1 auto;
        font-family: system-ui;
        padding-left: 4px;
        padding-right: 4px;
        direction: ltr;
        min-height: 18px;
        width: auto;
        overflow: hidden;
    }

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

.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 */

.TListBoxEdit.TListBoxEdit-Large .TListBoxEdit-ItemsPanel .TListBoxEdit-Item {
    width: 250px !important;
}

.ListBoxItem-Large {
    display: flex;
    flex-direction: row;
    position: relative;
    justify-content: center;
    align-items: center;
    padding: 5px;
    width: 100%;
    gap: 4px;
    box-sizing: border-box;
}

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

    .TListBoxEdit-Large .TListBoxEdit-Item > img,
    .ListBoxItem-Large > 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%);
    border-color: #284172;
    border-style: solid;
    border-width: 1px;
    overflow: hidden;
    user-select: none;
}

    .TProgressBar.NoBorder {
        border-width: 0px;
        background: unset;
    }

    .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;
        border-radius: 0px;
        background: linear-gradient(to bottom, rgb(99 137 192) 0%,rgb(39 77 138) 50%,#6489bc 100%);
    }

    .TProgressBar .TProgressStatus {
        left: 50%;
        top: 50%;
        position: absolute;
        transform: translate(-50%, -50%);
        color: white;
        mix-blend-mode: difference;
        pointer-events: none;
        user-select: none;
        font-size: 15px;
    }

/*#endregion */

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

    .TImageContentControl > .TImageContentControl-Image {
        vertical-align: middle;
        display: block;
        pointer-events: none;
        flex: 0 1 auto;
    }

    .TImageContentControl > .TImageContentControl-Content {
        overflow: hidden;
        pointer-events: none;
        flex: 0 1 auto;
    }


/*#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;
        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 {
        -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;
        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%);
        transform: translate(-50%,-50%);
        opacity: 0.9;
    }


/*#endregion*/

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


/*#region Custom Grid Control*/
.TGridControl-Ltr {
    font-size: 12px;
}

.TGridControl-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;
}

    .TGridControl-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%);
    }

.TGridControl-MiddlePanel {
    position: relative;
    display: flex;
    height: 100%;
    width: 100%;
    box-sizing: border-box;
}

.TGridControl-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;
}

.TGridControl-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%);
    min-height: 25px;
    border: 0px solid #062b63;
    border-bottom-width: 1px;
    border-radius: 4px 4px 0px 0px;
    flex-direction: row;
    color: #D0EBFF;
}

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

.TGridControl-Rtl .TGridControl-HeaderTopLeft {
    border-left-width: 1px;
    border-right-width: 0px;
}

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

.TGridControl-Rtl .TGridControl-HeaderTopRight {
    border-right-width: 1px;
    border-left-width: 0px;
}

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

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

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

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

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

.TGridControl-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;
}

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

.TGridControl-Rtl .TGridControl-Column-ResizerItem {
    right: unset;
    left: 0px;
    transform: translateX(-50%);
}

.TGridControl-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;
    gap: 4px;
}

    .TGridControl-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%);
    }

    .TGridControl-Column.DragEnter {
    }

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

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

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

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

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

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

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

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

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

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

.TGridControl-Rtl .TGridControl-Column + .TGridControl-Column {
    border-left-width: 0px;
    border-right-width: 1px;
}

.TGridControl-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)*/
    box-sizing: border-box;
}

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

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

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

.GridColumnHeaderAlign-Default,
.GridColumnHeaderAlign-Left,
.TGridControl-Rtl .GridColumnHeaderAlign-Right {
    text-align: left;
}

.GridColumnHeaderAlign-Right,
.TGridControl-Rtl .GridColumnHeaderAlign-Default,
.TGridControl-Rtl .GridColumnHeaderAlign-Left {
    text-align: right;
}

.GridColumnHeaderAlign-Center {
    text-align: center;
}

.TGridControl-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%);
    position: absolute;
    transform: translateX(-20px);
}

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

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


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

    .TGridControl-Row.TGridControl-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%);
        color: white;
    }

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

    .TGridControl-Row.TGridControl-Row-Selected .TGridControl-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%);
        color: white;
    }

.TGridControl-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;
}

.ImageAndTextRow {
    display: flex;
    flex-direction: row;
    gap: 2px;
    align-items: center;
}

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

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

    .CellAlign-Far .ImageAndTextRow,
    .CellAlign-Far .TSelector_User {
        text-align: center;
        align-self: flex-end;
    }

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

    .CellAlign-Center .ImageAndTextRow,
    .CellAlign-Center .TSelector_User {
        text-align: center;
        align-self: center;
        flex: 0 1 auto;
        width: auto;
    }

.CellAlign-Stretch > * {
    width: 100%;
}

.TGridControl-Row-Cell > span {
    white-space: nowrap;
    height: auto;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
}

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

.TGridControl-Rtl .TGridControl-Row-Cell + .TGridControl-Row-Cell {
    border-left-width: 1px;
    border-right-width: 1px;
}

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

.TGridControl-Rtl .VerticalLines.TGridControl-Row-Cell + .VerticalLines.TGridControl-Row-Cell {
    border-left-color: transparent;
    border-right-color: #c3cedc;
}



.TGridControl-Row-Cell:last-child {
    flex: 1 1 auto;
}

.TGridControl-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;
}

.TGridControl-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%);
    justify-content: space-evenly;
}


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

.MultipleSelectionItemText {
    width: 100%;
}

.TGridControl-Rtl .MultipleSelectionItemText {
    text-align: right;
}

.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%;
    text-align: center;
}

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

.TGridControl-Rtl .Row-In-Cell {
    /* align-items: flex-end; */
    direction: rtl;
}

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

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

    .TGridControl-Row > .TGridControl-Row-Cell.TEntityFieldTypeFile-Cell span {
        text-overflow: ellipsis;
        width: 100%;
        overflow: hidden;
        text-align: center;
    }

.TGridControl-Row-Cell .TSingleFileSelector,
.TGridControl-Row-Cell .TTextEdit {
    border-width: 0px;
    background: unset;
    background-color: unset;
}

/*#region FireFox Specific Themes*/
@-moz-document url-prefix() {
    .TGridControl-HeaderTopRight {
        width: 18px;
    }
}
/*#endregion*/
/*#endregion*/

/*#region TContextMenu*/
.TContextMenu-Back {
    width: 100%;
    height: 100%;
    background-color: #00000000;
    display: block;
    position: fixed;
    left: 0px;
    top: 0px;
    pointer-events: all;
    z-index: 9999998;
}

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

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

    .TContextMenu.hide {
        opacity: 0;
        transform: scale(0);
    }

.TContextMenu-Rtl.TContextMenu {
    transform-origin: top right;
    direction: rtl;
}

.TContextMenu-Ltr.TContextMenu {
    transform-origin: top left;
    direction: ltr;
}

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

    .TContextMenu * {
        position: relative;
    }

.TContextMenuPanel-Table {
    border-collapse: collapse;
    width: 100%;
}

    .TContextMenuPanel-Table > th,
    .TContextMenuPanel-Table > td {
        padding: 0px;
        margin: 0px;
    }

.TCM_LeftRibbon {
    background-color: rgb(0 0 0 / 8%);
    width: 40px;
    border-right: 1px solid rgb(198 220 247);
    /* background: red; */
    height: 100%;
    padding: 2px;
    box-sizing: content-box;
    border: 0px;
    padding: 0px;
    margin: 0px;
}

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

.IsSeparator .TCM_LeftRibbon {
}

.TCM_Content {
    width: 100%;
    display: flex;
    align-items: center;
    padding: 0px;
    margin: 0px;
    pointer-events: none;
}

.TCM_Childs {
    width: 10px;
    height: 100%;
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    pointer-events: none;
}

.IsSeparator .TCM_Childs {
    visibility: hidden;
}

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

.IsSeparator .TCM_Selector {
    display: none;
}

.TCM_Selector {
    position: absolute;
    height: 26px;
    left: 0px;
    right: 0px;
    border: 1px solid transparent;
    pointer-events: none;
}

.TContextMenuItem.IsSelected .TCM_Selector {
    background-color: #ffcd00;
}

.TContextMenuItem {
    cursor: pointer;
    white-space: nowrap;
    display: flex;
    flex-direction: row-reverse;
    height: 25px;
    align-items: center;
    color: black;
    z-index: 1;
    border-style: solid;
    border-width: 0px;
    border-color: transparent;
    border-spacing: 0;
    position: relative;
}

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


.TContextMenu .TContextMenuItem:hover,
.TContextMenu .TContextMenuItem:focus,
.TContextMenu .TContextMenuItem.IsSelected {
    color: white;
}

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

.TCM_Icon_Container {
    display: flex;
    justify-content: center;
    align-items: center;
    align-self: stretch;
    pointer-events: none;
    height: 100%;
}

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

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

.TCM_Sub_Span {
    width: 1em;
    display: inline-block;
    text-align: center;
    pointer-events: none;
    line-height: 9px;
}

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

.TContextMenu-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;
    }

.TContextMenu-Rtl.TContextMenu .TCM_Separator {
    left: 0px;
    right: 0px;
    margin: 0px;
    width: 100%;
}

.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*/

/*TNumberEdit*/
.TFlowDirection-RightToLeft .TControl.TNumberEdit {
    display: flex;
    flex-direction: row-reverse;
    flex-wrap: nowrap;
}

.TNumberEdit-SpinButtonContainer {
    font-size: 9px;
    height: auto;
    gap: 1px;
}

    .TNumberEdit-SpinButtonContainer > .TButton {
        margin: unset !important;
        padding: unset !important;
        min-height: unset !important;
    }
/*#endregion*/
/*#region TTextEdit*/
.IsMobileDevice .TTextEdit {
    min-height: 30px;
}

.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%);
    border: 1px solid #284172;
    box-sizing: border-box;
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-end;
    overflow: hidden;
    position: relative;
    height: auto;
    min-height: 24px;
    color: inherit;
    column-gap: 1px;
    align-items: stretch;
    color: black;
    padding: 1px;
}

    .TControl.TTextEdit > .TTextEdit-ButtonContainer,
    .TTextEdit > .TTextEdit-ButtonContainer {
        height: unset;
        gap: 1px;
        flex: 0 1 0%;
        width: auto;
        min-width: unset;
        /* margin: 1px !important; */
        box-sizing: border-box;
    }

        .TTextEdit > .TTextEdit-ButtonContainer > .TButton {
            margin: unset !important;
        }


    .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 .TextContainer {
        padding: 0px 3px;
    }

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

        .TTextEdit > .TInputContainer > textarea {
            resize: none;
            height: 100%;
            padding: 5px;
            box-sizing: border-box;
            white-space: break-spaces;
        }

    .TTextEdit .TextPart {
        background: unset;
        border: unset;
        width: 100%;
        min-height: 20px;
        outline: 0;
        vertical-align: middle;
        color: inherit;
        line-height: initial;
        height: auto;
        text-overflow: ellipsis;
        cursor: auto;
        align-self: center;
        font-size: inherit;
        white-space: nowrap;
        display: block;
        text-align: start;
        padding: 0px 2px;
        font-family: inherit;
        box-sizing: border-box;
    }

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

    .TControl.TTextEdit.NoBorder,
    .TControl.TTextEdit.LabelMode,
    .TTextEdit.NoBorder,
    .NoBorder > .TControl.TTextEdit {
        background: unset;
        filter: unset;
        border: unset;
        padding: unset;
        color: unset;
        border-radius: unset;
        box-shadow: unset;
    }

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

.TTextEdit-PartImage {
    pointer-events: none;
    max-width: 16px;
    max-height: 16px;
    align-self: center;
}

.TControl.TTextEdit > .TTextEdit-ButtonContainer > .TButton {
    margin-left: unset !important;
    margin-right: unset !important;
    width: auto;
}

.THorizontalContentAlignment-Center > .TTextEdit > .TextPart {
    text-align: center;
}
/*#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);
}

.cke_chrome {
    /*For Firefox Bug*/
    width: calc(100% - 2px) !important;
    height: 100% !important;
}
/*#endregion*/
/*#region TListBoxEdit*/
.TListBoxEdit {
    background-color: white;
    border: 1px solid #162c58;
    color: black;
    padding: 0px;
    position: relative;
    overflow: hidden;
    justify-content: stretch;
    align-items: stretch;
    justify-items: stretch;
    display: flex;
    width: 100%;
    height: 100%;
    flex: 0 1 100%;
    border-radius: 3px;
    box-sizing: border-box;
}

    .TListBoxEdit.NoBorder {
        border: 0px;
        background: unset;
    }

.TListBoxEdit-Root {
    position: relative;
    align-self: stretch;
    padding: 0px;
    overflow: hidden;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    flex: 1 1 auto;
}

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

.TListBoxEdit-ItemsPanel {
    display: flex;
    overflow: auto;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    justify-items: stretch;
    width: 100%;
    height: 100%;
    padding: 0px 2px;
    box-sizing: border-box;
    position: relative;
}

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

        .TListBoxEdit-ItemsPanel.TOrientation-Horizontal.WrapItems {
            flex-wrap: wrap;
            display: flex;
            gap: 2px;
            z-index: 1;
            /* background: green; */
        }

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

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

    .TListBoxEdit-ItemsPanel.TOrientation-Horizontal > .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;
    gap: 3px;
}

    .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%);
        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;
    }

    .TNavBarControl.NoBorder {
        border-width: 0px;
    }

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

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

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

.TNavBarGroup-Header {
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    cursor: pointer;
    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%);
    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+ */
    }

        .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: 60px;
    padding: 5px;
}

    .TThicknessEdit-Root > .Part_Left {
        left: 2px;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 30%;
        max-width: 60px;
    }

    .TThicknessEdit-Root > .Part_Top {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        width: 30%;
        max-width: 60px;
    }

    .TThicknessEdit-Root > .Part_Right {
        right: 2px;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 30%;
        max-width: 60px;
    }

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

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

.TRadioGroupRoot {
    position: absolute;
    display: flex;
    height: 100%;
    gap: 2px;
    box-sizing: border-box;
    flex-direction: column;
    width: 100%;
}

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

.TRadioGroup-ItemsPanel {
    position: relative;
    display: flex;
    row-gap: 2px;
    column-gap: 10px;
    padding: 2px 4px;
    box-sizing: border-box;
    overflow: auto;
    flex: 0 1 auto;
    align-items: flex-start;
    align-content: flex-start;
    flex-wrap: nowrap;
}

    .TRadioGroup-ItemsPanel.WrapItems {
        flex-wrap: wrap;
    }

.TControl.TRadioButton {
    padding: 1px 2px;
}

.TRadioButtonRoot {
    cursor: pointer;
    margin: 0px !important;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    gap: 4px;
}

.TRadioItemCircle-Outer {
    width: 13px;
    height: 13px;
    border: 1px solid #062b63;
    border-radius: 360px;
    display: flex;
    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%);
    box-sizing: border-box;
    position: relative;
    padding: 1px;
    flex: 0 0 auto;
}

.TRadioButtonRoot:focus-within,
.TRadioButtonRoot:focus {
    outline-style: dashed;
    outline-width: 1px;
    outline-color: #062b63;
    text-shadow: 0px 0px 4px white;
}

.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%);
}

.TRadioItemCircle-Inner {
    border: 1px solid #2a4276;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 11px;
    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%);
    box-sizing: border-box;
    display: inline-block;
    position: absolute;
    transform: translate(-50%, -50%);
    width: 73%;
    height: 70%;
    transform-origin: center center;
    top: 50%;
    left: 50%;
}

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

.TRadioButtonText {
    flex: 1;
    white-space: nowrap;
}

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

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

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

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

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



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

.TResizable-Handle-Bottom {
    bottom: -4px;
    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 {
    -webkit-border-bottom-right-radius: 100%;
    border-bottom-right-radius: 100%;
    cursor: se-resize;
    left: -4px;
    top: -4px;
}

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

:not(.TFlowDirection-RightToLeft) > .TResizable-Handle-Corner-Bottom-Right {
    -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;
}

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

.TFlowDirection-RightToLeft .TResizable-Handle-Corner-Bottom-Left {
    border-top-right-radius: 100%;
    bottom: -4px;
    cursor: ne-resize;
    height: 20px;
    left: -4px;
    width: 20px;
}

.TFlowDirection-RightToLeft .TResizable-Handle-Corner-Bottom-Right {
    -webkit-border-top-left-radius: 100%;
    border-top-left-radius: 100%;
    bottom: -3px;
    cursor: se-resize;
    height: 20px;
    right: -3px;
    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;
    gap: 1px;
}

.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%);
    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;
    gap: 4px;
}

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

    .TLookupSelectedItem > .Part_Image {
        flex: 0 1 auto;
    }

    .TLookupSelectedItem > .Part_Text {
        flex: 1 0 auto;
        max-width: 100px;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
    }

    .TLookupSelectedItem > .Part_RemoveButton {
        cursor: pointer;
    }

/*#endregion*/

/*#region TMainStatusBar*/

.TMainStatusBar-Root {
    flex: 1 1 auto;
    display: flex;
    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%;
    }


.TFlowDirection-RightToLeft .TMainStatusBar-Root > .Near {
    /* float: right; */
}

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

/*#region TMenu && TToolBar Control*/
.TControl.TToolBarControl {
    width: auto;
    background-color: #a3c3ec;
}



    .TControl.TToolBarControl.THorizontalAlignment-Right .TMenu {
        display: flex;
        flex-direction: row-reverse;
    }

    .TControl.TToolBarControl .TMenuItem:hover,
    .TControl.TToolBarControl .TMenuItem:active {
        color: black;
    }


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

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

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

.TMenu.TMenuImageSize-Small .TMenuItem .TMenuItem-Icon {
    max-width: 16px;
    max-height: 16px;
}

.TMenu.TMenuImageSize-Large .TMenuItem .TMenuItem-Icon {
    max-width: 32px;
    max-height: 32px;
}

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

.Separator {
    width: 100%;
    min-height: unset;
}

.TMenuItem.Separator-Container {
    pointer-events: none;
}

.TMenuOrientation-Horizontal .TMenuItem.Separator-Container {
    min-height: 7px !important;
}

.TMenuOrientation-Vertical .TMenuItem.Separator-Container {
    min-height: 7px !important;
    width: 100%;
}

.TMenuOrientation-Horizontal .TMenu-Root .Separator {
    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%;
    width: 100%;
    flex: 1 0 100%;
}

    .TMenuOrientation-Horizontal .TMenu-Root .Separator:after {
        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: '';
    }

.TMenuOrientation-Vertical .TMenu-Root .Separator {
    display: flex;
    vertical-align: middle;
    background-image: radial-gradient(circle, rgb(0 0 0 / 46%) 0%, rgb(0 0 0 / 0%) 100%);
    width: 100%;
    height: 1px;
}


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

.TMenu.TMenuOrientation-Horizontal .TOverflow-Root {
    width: 30px;
    height: 100%;
}

.TMenu.TMenuOrientation-Vertical .TOverflow-Root {
}

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




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

.TFlowDirection-RightToLeft .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;
}

.TSearchMenu-SearchText {
    box-sizing: border-box;
    padding: 6px;
    flex: 0 0 auto;
}

.TToolBarControl {
    display: flex;
    background: unset;
    user-select: none;
}

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

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

.TMenuOrientation-Vertical .TMenuItem .GlyphAlignment-Top {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.TMenuItem .GlyphAlignment-Top {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
}

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

.TMenuOrientation-Vertical .TMenuItem .GlyphAlignment-Right {
    flex-direction: row-reverse;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.TMenuOrientation-Horizontal .TMenuItem .GlyphAlignment-Bottom {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    gap: 1px;
}

.TMenuOrientation-Vertical .TMenuItem .GlyphAlignment-Bottom {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    gap: 1px;
    width: 100%;
}


.TControl.TMenu {
    height: 100%;
    width: 100%;
    flex: 0 1 auto;
    display: flex;
    position: relative;
    overflow: hidden;
    border-width: 0px;
    border-style: solid;
    padding: 2px 2px 2px 2px;
    border-color: #6489bc;
    user-select: none;
}

    .TControl.TMenu.TMenuOrientation-Horizontal.TMenuImageSize-Small {
        min-height: 30px;
    }

    .TControl.TMenu.TMenuOrientation-Horizontal.TMenuImageSize-Large {
        min-height: 41px;
        min-width: 0px;
        width: auto;
        display: flex;
        flex: 1 1 auto;
    }

    .TControl.TMenu.TMenuOrientation-Vertical.TMenuImageSize-Small {
        min-width: 30px;
        min-height: unset;
    }

    .TControl.TMenu.TMenuOrientation-Vertical.TMenuImageSize-Large {
        min-width: auto;
        min-height: unset;
    }

.IsMobileSize .TControl.TMenu.TMenuOrientation-Vertical {
    width: 100%;
}

.TMenu-Root {
    display: flex;
    z-index: 1;
    overflow: hidden;
    flex: 0 1 auto;
    gap: 2px;
}

.TMenu.TMenuOrientation-Vertical {
    display: flex;
    flex-direction: column;
}

    .TMenu.TMenuOrientation-Vertical > .TMenu-Root {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: auto;
        align-items: stretch;
    }

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

    .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 {
    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;
    gap: 4px;
}

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

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

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

    .TMenuItem:hover {
        color: white;
        border-radius: 2px;
    }

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

.TMenuOrientation-Vertical .TMenuItem {
    justify-content: flex-start;
}

.TMenu-Overflow {
    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-Overflow:before {
        content: '\f0c9';
    }

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

    .TMenu-Overflow: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 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%);
    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%;
    }

.TFlowDirection-RightToLeft .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;
}

.TFlowDirection-RightToLeft .TSwitchEdit.IsTrue .Label-On {
    left: -21px;
}


.TSwitchEdit.IsFalse .Label-Off {
    display: flex;
    opacity: 1;
    transition: all .5s linear;
    pointer-events: auto;
}
/*#endregion*/
.TControl.TSelector_Enum {
    /* flex: 1 1 auto; */
    min-width: 20px;
}
/*#region TComboBoxEdit*/
.TComboBoxEdit {
    min-height: 20px;
    flex: 1 1 auto;
}

.TComboBoxEdit-Content-Text {
    overflow: hidden;
    text-overflow: ellipsis;
}

.TPopup-SearchContainer {
    flex: 0 0 20px;
    padding: 5px 5px;
    box-sizing: border-box;
    position: relative;
}

.TPopup-GridContainer {
    flex: 1 1 auto;
    display: flex;
    position: relative;
    box-sizing: border-box;
    padding: 5px 5px 0px 5px;
}

.TPopup-Root .TPopup-ButtonsContainer {
    gap: 4px;
    display: flex;
    width: auto;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    min-height: 37px;
    box-sizing: border-box;
    padding-top: 4px;
    flex: 0 0 auto;
    flex-direction: row;
    position: relative;
}

    .TPopup-Root .TPopup-ButtonsContainer .TButton {
        min-width: 90px;
        width: auto;
        min-height: 24px;
        display: flex;
        flex: 0 1 auto;
        margin: unset !important;
    }
/*#endregion*/


.TGridPresenter {
    min-height: 20px;
    min-width: 20px;
}

.TViewPartHtmlContent {
    background: white;
    border: 1px solid #0000008f;
    color: black;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding: 4px;
}

    .TViewPartHtmlContent > p {
        margin-block-start: 0px;
        margin-block-end: 0px;
    }

    .TViewPartHtmlContent.NoBorder {
        border: unset;
        background: unset;
    }

.TViewPartText {
    background: white;
    border: 1px solid #0000008f;
    color: black;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding: 4px;
}

    .TViewPartText > p {
        margin-block-start: 0px;
        margin-block-end: 0px;
    }

    .TViewPartText.NoBorder {
        border: unset;
        background: unset;
    }

.TEntityFieldTypeSelector {
    min-height: 24px;
}

.HtmlPresenter {
    background: #ffffffeb;
    padding: 2px 5px;
    border-radius: 3px;
    border: 1px solid #00000042;
    overflow: auto;
    height: calc(100% - 10px);
    width: 100%;
}

.TRichTextGridEditor-Root {
    flex: 1;
    color: black;
    display: flex;
    align-items: center;
}

.TDetailEditor > .TEditorPresenter {
    padding: unset !important;
}

    .TDetailEditor > .TEditorPresenter > .TBarManager > .TLayoutGroup > .TLayoutGroupContent {
        padding: unset !important;
    }

/*#region Bpm*/
.TControl.TBPMDiagram {
    background: white;
    border: 1px solid;
    border-radius: 2px;
    width: 100% !important;
    box-sizing: border-box;
    height: 100% !important;
}

.TBPMDiagramZoom {
    width: 100%;
    height: 100%;
    overflow: auto;
    box-sizing: border-box;
    display: block;
    position: relative;
    padding: 10px;
}

.TBPMDiagram-Root {
    background: transparent;
}

.TBPMDiagram-SvgContainer {
    position: absolute;
    pointer-events: none;
}

.TFlowDirection-RightToLeft .TBPMDiagram-SvgContainer {
    transform: rotateY(180deg);
}

.TBPMDiagram-ItemsContainer {
    /* background: transparent; */
    /* width: 10000px; */
    /* height: 10000px; */
    position: absolute;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.TModelBasePresenter {
    display: contents;
    position: absolute;
}

.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);
}

.TCircleText-Circle {
    border-width: 1px;
    border-color: #6185b7;
    min-width: 20px;
    text-align: center;
    border-radius: 50px;
    background: linear-gradient(to bottom, #FAEAEA 0%, #F3CACA 90%);
    border-style: dashed;
    pointer-events: none;
}

.TCircleText-Text {
    text-align: center;
}

.TModelProcess {
    cursor: pointer;
    width: 40px;
    height: 100%;
    position: absolute;
    left: 0px;
    top: 0px;
    display: flex;
    align-items: center;
    border: 1px solid;
    justify-content: center;
    border-color: #0000004f;
    background: transparent;
    pointer-events: auto;
    box-sizing: border-box;
    border-left-width: 0px;
    border-top-width: 0px;
    border-bottom-width: 0px;
}

.TFlowDirection-RightToLeft .TModelProcess {
    left: unset;
    right: 0px;
    border-width: 0px 0px 0px 1px;
}

.TModelProcess-Content-Rectangle {
    pointer-events: none;
    border: 1px solid;
    border-color: #0000004f;
    background-color: transparent;
    right: 0px;
    position: absolute;
    top: 0px;
    box-sizing: border-box;
}



.TModelProcess-Rectangle {
    stroke-width: 1;
    stroke: #0000004f;
    fill: transparent;
}

.IsSelected .TModelProcess-Rectangle,
.IsSelected .TModelProcess {
    border-color: #ff00007d;
    background-color: var(--BPM-SelectedFill);
    border-width: 2px;
}

.TModelProcess-Text {
    text-align: center;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}

.TModelLane {
}

.TModelLane-ResizerLine {
    stroke-width: 15;
    background-color: transparent;
    cursor: s-resize;
    position: absolute;
    left: 0px;
    top: calc(100% - 4px);
    width: 100%;
    height: 6px;
    pointer-events: auto;
    border-color: #0000004f;
}

.TModelLane-Content-Rectangle {
    background-color: unset;
    pointer-events: none;
    position: absolute;
    box-sizing: border-box;
    border: 0px solid #0000004f;
    border-width: 1px 0px 0px 0px;
}

.TModelLane-Rectangle {
    cursor: pointer;
    background: transparent;
    left: 0px;
    position: absolute;
    top: 0px;
    width: 40px;
    height: 100%;
    border: 0 solid;
    pointer-events: auto;
    box-sizing: border-box;
    border-right-width: 1px;
    border-color: #0000004f;
    display: flex;
    justify-content: center;
    align-items: center;
}

.TFlowDirection-RightToLeft .TModelLane-Rectangle {
    left: unset;
    border-width: 0px 0px 0px 1px;
}

.IsSelected .TModelLane-Rectangle {
    border-width: 2px;
    border-color: #ff00007d;
    background-color: var(--BPM-SelectedFill);
}

.TModelLane-Text {
    pointer-events: none;
    text-align: center;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}

.TModelMilestone-Root {
    position: absolute;
    left: 80px;
    top: 0px;
    pointer-events: none;
    border: 0px solid #0000004f;
}

    .TModelMilestone-Root.HasPrevious {
        border-width: 0px 0px 0px 1px;
    }

.TFlowDirection-RightToLeft .TModelMilestone-Root.HasPrevious {
    border-width: 0px 1px 0px 0px;
}

.TModelMilestone-Header {
    cursor: pointer;
    /* position: absolute; */
    width: 100%;
    height: 30px;
    border-width: 1px;
    border-color: #0000004f;
    background: transparent;
    border: 0px solid;
    pointer-events: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    border-bottom-color: #0000004f;
    /* border-left-color: transparent; */
    border-bottom-width: 1px;
}

.TModelMilestone-ResizerLine {
    border-width: 15px;
    background-color: transparent;
    cursor: w-resize;
    pointer-events: auto;
    left: calc(100% - 4px);
    position: absolute;
    top: 0;
    width: 6px;
    height: 100%;
}

.TFlowDirection-RightToLeft .TModelMilestone-ResizerLine {
    left: unset;
    right: calc(100% - 4px);
}

.TModelMilestone-Rectangle {
    stroke-width: 1;
    stroke: #0000004f;
    fill: transparent;
    width: 100%;
    height: 100%;
}

.TModelMilestone-Content-Rectangle {
    border-width: 1px;
    stroke: #0000004f;
    background-color: unset;
    pointer-events: none;
    border-style: solid;
    width: 100%;
    height: calc(100% - 30px);
    top: 30px;
    position: absolute;
    box-sizing: border-box;
    border-left: 0px;
    /* border-bottom-width: 0px; */
    border-top-width: 0px;
    border: 0px solid;
}

.IsSelected .TModelMilestone-Rectangle,
.IsSelected .TModelMilestone-Header {
    border-width: 3px;
    border-color: #ff00007d;
    background-color: var(--BPM-SelectedFill);
}

.TModelMilestone-Header-Text {
    text-anchor: middle;
}


.TModelStartEvent {
    width: 100%;
    height: 100%;
    position: relative;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
}

.TDynamicToolBox-Root {
    position: absolute;
    border-width: 1px;
    border-color: rgb(148 184 233);
    background: unset;
    border-style: solid;
    box-sizing: border-box;
    border-radius: 3px;
    pointer-events: none;
}

.TModelBpm-TextContainer {
    position: absolute;
    left: 50%;
    top: calc(100% + 4px);
    width: 100px;
    height: 100px;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    text-align: center;
    box-sizing: border-box;
    pointer-events: none;
}

.TModelStartEvent-Root {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(to bottom, #EEFFBF 8%, #EEFFBF 90%, #F8FFE5 100%);
    border-width: 2px;
    border-radius: 50px;
    border-style: solid;
    border-color: #70AC2D;
}

.TModelStartEvent-Text {
    display: block;
    white-space: pre-wrap;
}

.IsSelected.TModelStartEvent-Root {
    border-width: 2px;
    border-color: #ff00007d;
    background: var(--BPM-SelectedFill);
}

.TBPM-Connector {
    width: 10px;
    height: 10px;
    position: absolute;
    pointer-events: none;
    border: 1px solid #0000ff9c;
    border-radius: 50px;
    background: #0000ff24;
}

    .TBPM-Connector.Left {
        top: 50%;
        transform: translate(-50%, -50%);
        left: 0px;
    }

    .TBPM-Connector.Top {
        top: 0px;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .TBPM-Connector.Right {
        left: 100%;
        top: 50%;
        transform: translate(-50%, -50%);
    }

    .TBPM-Connector.Bottom {
        left: 50%;
        top: 100%;
        transform: translate(-50%, -50%);
    }

.TBpm-NotationItem {
    position: absolute;
    pointer-events: auto;
    cursor: pointer;
    box-sizing: border-box;
}

.TBpm-DragItem {
    width: 20px !important;
    height: 20px !important;
    pointer-events: auto !important;
    box-sizing: border-box !important;
    position: absolute !important;
    cursor: pointer;
}

.TModelEndEvent.DragItem {
}

.TModelEndEvent {
    border-width: 2px;
    border-color: #9A0606;
    border-style: solid;
    border-radius: 50px;
    width: 32px;
    height: 32px;
    background-image: linear-gradient(to bottom, #FAEAEA 0%, #FAEAEA 90%, #F3CACA 100%);
    display: flex;
    justify-content: center;
    align-items: center;
}

.IsSelected.TModelEndEvent {
    border-width: 2px;
    border-color: #ff00007d;
    background: var(--BPM-SelectedFill);
}

.TModelEndEvent-Terminate {
    border: 1px solid #990000;
    background-color: #DE4747;
    pointer-events: none;
    width: 50%;
    height: 50%;
    border-radius: 50px;
}

.TModelEndEvent-Text {
    pointer-events: none;
    text-anchor: middle
}

.TModelTask {
    border-width: 1px;
    border-color: #6090AD;
    border-style: solid;
    border-radius: 4px;
    background-image: linear-gradient(to bottom, #F6F7FF 0%, #F6F7FF 50%, #F5F6FF 100%);
    width: 18px;
    height: 16px;
    border-radius: 4px;
    overflow: hidden;
}

.IsSelected.TModelTask {
    border-width: 2px;
    border-color: #ff00007d;
    background: var(--BPM-SelectedFill);
}

.TModelTask-Text-Container {
    text-align: center;
    padding: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    overflow: hidden;
    gap: 4px;
    pointer-events: none;
    width: calc(100% - 4px);
    height: calc(100% - 4px);
}

.TModelTask-Text {
    white-space: normal;
    word-break: break-word;
    text-overflow: ellipsis;
    align-self: center;
}

.TModelTask-Image {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
}

.TModelAssociation {
    cursor: pointer;
    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;
}

.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 {
    border: 1px solid black;
    background-color: transparent;
    stroke-dasharray: 1 0 1;
    border-radius: 4px;
}

.IsSelected .TModelGroup {
    stroke-width: 3;
    stroke: #ff00007d;
    fill: var(--BPM-SelectedFill);
}

.TModelSubProcess {
    border-width: 1px;
    border-color: #6090AD;
    cursor: pointer;
    pointer-events: auto;
    position: absolute;
    box-sizing: border-box;
    border-style: solid;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    background-image: linear-gradient(to bottom, #F6F7FF 0%, #F6F7FF 50%, #F5F6FF 100%);
}

.IsSelected.TModelSubProcess {
    border-width: 2px;
    border-color: #ff00007d;
    background: var(--BPM-SelectedFill);
}

.TModelSubProcess-Plus {
    stroke: #062b63;
    fill: rgb(174 198 240);
    stroke-width: 1px;
    pointer-events: none;
}

.TModelGateway-Root {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.IsSelected.TModelGateway {
    border-width: 2px;
    border-color: #ff00007d;
    background: var(--BPM-SelectedFill);
}

.TModelGateway {
    border-width: 2px;
    border-color: #F7B900;
    width: Calc(100% - 10px);
    height: Calc(100% - 10PX);
    border-style: solid;
    transform: rotate(45deg);
    background-image: linear-gradient(to bottom, #FFFFE2 22%, #FFFFE2 93%, #FFFFEF 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
}

.TModelGateway-Parallel {
    width: 60%;
    height: 60%;
    border: unset;
    box-sizing: border-box;
    transform: rotate(45deg);
    display: flex;
    justify-content: center;
    align-items: center;
    background: transparent;
    box-shadow: inset 1px 1px;
    color: black;
}

.TModelGateway-Parallel-HL {
    width: 100%;
    height: 25%;
    box-sizing: border-box;
    background-color: #f7b900;
    border-radius: 2px;
}

.TModelGateway-Parallel-VL {
    box-sizing: border-box;
    width: 25%;
    height: 100%;
    position: absolute;
    background-color: #f7b900;
    border-radius: 2px;
}

.TModelGateway-Inclusive {
    border: 2px solid #F7B900;
    pointer-events: none;
    border-radius: 50px;
    width: 50%;
    height: 50%;
}


.TModelAnnotation {
    border-width: 1px;
    border-color: #034900;
    cursor: pointer;
    position: absolute;
    border-style: solid;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: linear-gradient(to bottom, white 6%, gainsboro 100%, #828080 100%);
    border-radius: 4px;
}

.IsSelected.TModelAnnotation {
    border-width: 2px;
    border-color: #ff00007d;
    background: var(--BPM-SelectedFill);
}

.TModelAnnotation-Text {
    pointer-events: none;
    position: relative;
    width: 100%;
    overflow: hidden;
    white-space: pre-wrap;
    text-overflow: ellipsis;
    word-wrap: break-word;
    text-align: center;
    margin: 0px;
    display: -webkit-box;
    /* -webkit-line-clamp: 2; */
    -webkit-box-orient: vertical;
}

.TLineMarker {
    fill: #858585;
}

.TModelSequenceFlow {
    stroke-width: 2px;
    stroke: #858585;
    fill: none;
    pointer-events: none;
    stroke-linejoin: round;
    stroke-linecap: round;
}

@keyframes dash {
    to {
        stroke-dashoffset: -100;
    }
}

.IsSelected .TModelSequenceFlow {
    animation: dash 10s linear infinite;
    stroke-dasharray: 0 3 0;
    stroke-dashoffset: 0;
}

.LineHitPath {
    pointer-events: auto;
    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-ObjectResizer {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    position: absolute;
    left: 0px;
    top: 0px;
    pointer-events: none;
}

.TBPM-ResizerLine {
    border-color: transparent;
    border-width: 7px;
    background: transparent;
    position: absolute;
    pointer-events: auto;
    width: 10px;
    height: 10px;
}

    .TBPM-ResizerLine.TResizable-Handle-Left {
        height: 100%;
    }

    .TBPM-ResizerLine.TResizable-Handle-Right {
        height: 100%;
    }

    .TBPM-ResizerLine.TResizable-Handle-Top {
        width: 100%;
    }

    .TBPM-ResizerLine.TResizable-Handle-Bottom {
        width: 100%;
    }

    .TBPM-ResizerLine.TResizable-Handle-Corner-Top-Left {
        left: -4px;
        top: -4px;
        width: 15px;
        height: 15px;
    }

    .TBPM-ResizerLine.TResizable-Handle-Corner-Top-Right {
        right: -4px;
        top: -4px;
        width: 15px;
        height: 15px;
    }

    .TBPM-ResizerLine.TResizable-Handle-Corner-Bottom-Right {
        right: -4px;
        bottom: -4px;
        width: 15px;
        height: 15px;
    }

    .TBPM-ResizerLine.TResizable-Handle-Corner-Bottom-Left {
        left: -4px;
        bottom: -4px;
        width: 15px;
        height: 15px;
    }

.TModelIntermediateEvent {
    border-color: #908B3F;
    background-color: #FFFCF7;
    border-width: 1px;
    border-style: solid;
    border-radius: 50px;
    width: 32px;
    height: 32px;
    padding: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.IsSelected.TModelIntermediateEvent {
    border-width: 2px;
    border-color: #7a7a00;
    background: #ffe400;
}

.TModelIntermediateEvent-InnerCircle {
    border-color: #908B3F;
    background: unset;
    border-width: 1px;
    pointer-events: none;
    border-style: solid;
    border-radius: 50px;
    position: relative;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
}

.TModelIntermediateEvent-Text {
}

.TBPM-ObjectMover {
    cursor: move;
    border-style: none;
    background-color: transparent;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0px;
    top: 0px;
    pointer-events: auto;
}

.TDynamicToolBox-Rectangle {
    border-width: 1px;
    border-color: rgb(148 184 233);
    background: unset;
    position: absolute;
    border-style: solid;
    box-sizing: border-box;
    border-radius: 50px;
    width: 100%;
    height: 100%;
}

.TModelLineTargetTemporary-Circle {
    border-width: 2px;
    border-color: black;
    background-color: #a3c3ec;
    border-style: dashed;
    width: 16px;
    height: 16px;
    border-radius: 50px;
}

.IsSelected.TModelLineTargetTemporary-Circle {
    background-color: #ff00006e;
}

.TBPMItemSelector {
    background-color: rgb(216 255 0 / 43%);
    border-color: #ffa80273;
    border-width: 1px;
    border-style: solid;
    pointer-events: none;
    position: absolute;
}

/*#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 { /* min-height: 20px; */
}

    .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;
    justify-content: flex-start;
}

    .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 {
        overflow: hidden;
        flex: 1 1;
        display: grid;
    }

        .TControl.TTextBlock.TextTrimming-CharacterEllipsis > span {
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
            /* flex: 0 1 22%; */
            /* width: unset; */
        }

    .TControl.TTextBlock > span {
        width: 100%;
        display: inline-block;
    }

    .TControl.TTextBlock.IsItalic > span {
        font-style: italic;
    }

    .TControl.TTextBlock.IsBolded > span {
        font-weight: bold;
    }

    .TControl.TTextBlock.TextAlignment-Left > span {
        text-align: left;
    }

.TFlowDirection-RightToLeft .TControl.TTextBlock.TextAlignment-Left > span {
    text-align: right;
}

.TControl.TTextBlock.TFlowDirection-LeftToRight.TextAlignment-Left > span {
    text-align: left;
}

.TControl.TTextBlock.TextAlignment-Center > span {
    text-align: center;
    /* flex: 1; */
}

.TControl.TTextBlock.TextAlignment-Right > span {
    text-align: right;
}

.TFlowDirection-RightToLeft .TControl.TTextBlock.TextAlignment-Right > span {
    text-align: left;
}

.TControl.SizeToContent {
    flex: 1 1 auto;
    overflow: visible;
    min-width: unset !important;
}

    .TControl.SizeToContent > span {
        white-space: nowrap;
    }



.TControl.TReportQueryItemsControl {
    display: block !important;
    position: relative !important;
    border: 1px solid rgb(115 152 205);
    border-radius: 4px;
    overflow: auto;
    box-sizing: border-box;
}

.TReportQueryItemBox {
    border: 1px solid #33333394;
    position: absolute !important;
    left: 0px;
    top: 0px;
    height: 100px;
    border-radius: 5px;
    overflow: visible;
    box-sizing: border-box;
}

    .TReportQueryItemBox:focus,
    .TReportQueryItemBox:focus-within,
    .TReportQueryItemBox.IsSelected {
        /* outline: 1px auto black; */
        box-shadow: 0 0 6px 1px #fffa00bd;
    }

    .TReportQueryItemBox .HeaderRoot {
        flex: 1 0 28px !important;
        width: 100%;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: flex-start;
        align-items: center;
    }

        .TReportQueryItemBox .HeaderRoot .ObjectMover {
            position: absolute;
            cursor: pointer;
            height: 28px;
        }

.TReportQueryItemBox-Root {
    width: 100% !important;
    background: white;
    border-radius: 4px;
    overflow: hidden;
}

.TReportQueryItemBox-Header {
    padding: 0px 3px;
    overflow: hidden;
    gap: 3px;
}

    .TReportQueryItemBox-Header > .HeaderContainer {
        display: flex;
        flex: 1 1 auto;
        overflow: hidden;
    }

    .TReportQueryItemBox-Header > .ButtonContainer {
        display: flex;
        flex-direction: row;
        gap: 3px;
        flex: 0 0 auto;
    }



.TReportLevel .HeaderRoot {
    background: linear-gradient(180deg, rgba(239,166,24,1) 0%, rgba(189,97,8,1) 100%);
}

.TDashboardDataMember .HeaderRoot {
    background: linear-gradient(180deg, #E0E000 0%, #898900 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;
    justify-content: flex-start;
    align-self: center !important;
}

.TReportQueryColumnListBoxItem-Root {
    gap: 4px;
}

.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;
    text-align: left;
}

    .TSyntaxEditor .TSyntaxEditor-Root {
        height: 100%;
        width: 100%;
        min-width: 100px;
        min-height: 100px;
        direction: ltr;
        background-color: black;
        font-size: 16px;
    }

.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%);
}

.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 #062b6352;
    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: 5px;
    background-color: white;
    position: absolute;
}

#TPopupPlaceHolder {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    z-index: 100000;
    pointer-events: none;
}

.TControl.TNotificationPanel {
    position: fixed;
    left: 0;
    z-index: 20000;
}

.TNotificationControl-Back {
    background: #0000007d;
    height: 100%;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    opacity: 0.0;
    transition-duration: 0.2s;
    pointer-events: none;
}

.IsOpen .TNotificationControl-Back {
    opacity: 1;
    pointer-events: visible;
}

.TNotificationControl-Root {
    position: fixed;
    right: 0;
    top: 0;
    width: 303px !important;
    background: #89a5ce;
    bottom: 40px;
    margin: unset !important;
    border: 1px solid;
    border-color: #062b63;
    transition-duration: 0.2s;
    transform: scale(0%,0%);
    transform-origin: right bottom;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: flex-start;
    overflow: auto;
    padding: 6px;
    box-sizing: border-box;
    gap: 7px;
}

.IsOpen .TNotificationControl-Root {
    opacity: 1;
    transform: scaleX(100%);
}

.TFlowDirection-RightToLeft .TNotificationControl-Root {
    right: unset;
    left: 0;
    top: 0;
    transform-origin: left bottom;
}

.TPopup-Back {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    /* background: #00000021; */
    pointer-events: auto;
}

@keyframes ShowPopupAnimation {
    from {
        background-color: red;
    }

    to {
        background-color: yellow;
    }
}

.TPopup-MovingPanel {
    position: fixed;
    width: 30vw;
    height: 44vh;
    z-index: 100;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    top: unset;
    left: unset;
    overflow: visible;
    pointer-events: none;
    opacity: 0;
    transform: scale(0,0);
    transform-origin: top left;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
    transition: visibility 500ms,transform 200ms,opacity 200ms;
    visibility: collapse;
}

    .TPopup-MovingPanel.IsPopupOpen {
        pointer-events: auto;
        opacity: 1;
        transform: scale(1,1);
        visibility: visible;
    }

    .TPopup-MovingPanel.PopupOpenOnTop {
        transform-origin: bottom left;
    }



.TPopup-Root {
    backdrop-filter: blur(10px);
    border: 1px solid transparent;
    box-shadow: 1px 1px 4px 0px #000000a3;
    overflow: hidden;
    box-sizing: border-box;
    border-color: #00000063;
    border-radius: 0px;
    background: white;
}

    .TPopup-Root.TComboBoxEditSimple-Popup {
        padding: unset;
        background: white;
    }


/*#region TRating*/
.TRating.IsNotEnabled > .TRatingRoot,
.TRating.IsReadOnly > .TRatingRoot {
    cursor: default;
    pointer-events: none;
}

.TRatingRoot {
    color: white;
    cursor: pointer;
    margin: auto;
    position: relative;
    text-shadow: 0 0 4px #00000099;
    margin: 0px auto;
    clear: both;
    user-select: none;
}


.TRating-Front {
    top: 0px;
    z-index: 1;
    position: absolute;
    color: yellow;
    height: 100%;
    transition-duration: 0.2s;
    overflow: hidden;
}

.TRating .StarContainer {
    overflow: hidden;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
}



/*#endregion*/

/*#region Gadget*/
.TGadgetInstance {
    position: absolute;
    display: flex;
    width: 50px;
    height: 50px;
    flex-direction: row;
    align-items: stretch;
    align-content: stretch;
    flex-wrap: nowrap;
    pointer-events: auto;
    z-index: 0;
}

.TGadget-Root {
    width: 100%;
    min-height: 20px;
    height: 100%;
    display: flex;
    overflow: visible;
}

.TGadget-Handle {
    width: 21px;
    height: auto;
    background: #00000080;
    position: absolute;
    right: 0px;
    transform: translateX(100%);
    opacity: 0;
    overflow: hidden;
    border-radius: 0px 3px 3px 0px;
    transition-duration: 0.2s;
    backdrop-filter: blur(8px);
    z-index: 1;
}

.TGadget-Btn {
    height: 18px;
    /* background: black; */
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: center;
    flex-direction: row;
}

    .TGadget-Btn .TImage {
        pointer-events: none;
        position: absolute;
        width: 16px !important;
        height: 16px !important;
    }

    .TGadget-Btn:hover {
        background: white;
    }

.TGadget-Btn-Close {
    color: white;
    text-align: center;
    font-weight: 900;
    text-shadow: 0px 0px 3px black;
}

.TGadget-Btn-Settings {
}

.TGadget-Btn-Move {
}

.TGadget-Root:hover > .TGadget-Handle {
    opacity: 1;
}
/*#endregion*/


.TDateGadget {
    background: #89a5ce;
    border-radius: 5px;
    padding: 6px;
    box-shadow: 4px 5px 5px 0px #0000004f;
    border: 1px solid #062b62;
    overflow: hidden;
    flex: 1 1 auto;
}

.TDateGadget-Content {
    width: 160px;
    height: 150px;
}

.TReportGadget {
    background: #93b2de;
    border: 1px solid #617593;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 2px 7px 7px 1px #0000004f;
    padding: 3px;
}

.DesktopItemsContainer {
    position: absolute;
    z-index: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.DesktopGadgetsContainer {
    position: absolute;
    z-index: 2;
    width: 100%;
    height: 100%;
    pointer-events: none;
}


/*#region AnalogClock*/
.TAnalogClockGadget {
    overflow: visible;
    box-shadow: 0 0 7px 6px rgb(0 0 0 / 31%);
    border-radius: 100%;
}

.TAnalogClock .SecondLineContainer {
    width: 100%;
    height: 100%;
    position: absolute;
}

.TAnalogClock {
    background: #ececec;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    border-color: #333;
    position: relative;
    display: flex;
    box-sizing: border-box;
    border-width: 8px;
    border-style: double;
    /* box-shadow: 0 0 7px 6px rgb(0 0 0 / 31%); */
    pointer-events: none;
}

    .TAnalogClock .Handler {
        width: 1%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -100%);
        transform-origin: bottom;
        z-index: 2;
        border-radius: 2em;
    }

    .TAnalogClock .dot {
        background: #ccc;
        box-shadow: 0 2px 4px -1px black;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 6px;
        height: 6px;
        border: 2px solid #ffffff;
        border-radius: 10em;
        margin: auto;
        z-index: 10;
    }

    .TAnalogClock .hour-hand {
        z-index: 5;
        height: 25%;
        background: #6666668f;
        width: 3%;
        border-radius: 50% 50% 0% 0%;
    }

    .TAnalogClock .minute-hand {
        z-index: 6;
        height: 30%;
        background: #ff0000a8;
        border-radius: 50% 50% 0% 0%;
        width: 2%;
    }

    .TAnalogClock .second-hand {
        z-index: 7;
        height: 40%;
        background: #00086e;
        transform-origin: 50% 85%;
        border-radius: 50% 50% 0% 0%;
    }

    .TAnalogClock span {
        display: inline-block;
        position: absolute;
        color: #333;
        font-size: 22px;
        font-weight: 700;
        z-index: 4;
        left: 50%;
        transform: translate(-50%, -50%);
        box-sizing: border-box;
        transform-origin: center center;
        text-align: center;
    }

    .TAnalogClock .h12 {
        top: 14%;
    }

    .TAnalogClock .h3 {
        top: 50%;
        left: 92%;
    }

    .TAnalogClock .h6 {
        top: 90%;
    }

    .TAnalogClock .h9 {
        left: 8%;
        top: 50%;
    }

    .TAnalogClock .diallines {
        position: absolute;
        z-index: 2;
        width: 1px;
        height: 2px;
        background: #666;
        left: 50%;
        transform-origin: 0% 72px;
        /* top: 50%; */
    }

        .TAnalogClock .diallines:nth-of-type(5n) {
            width: 2px;
            height: 5px;
            background: #00000094;
        }

    .TAnalogClock .info {
        font-size: 12px;
    }

    .TAnalogClock .date {
        top: 35%;
        letter-spacing: 2px;
        background: transparent;
        display: block;
    }

    .TAnalogClock .day {
        top: 69%;
    }

    .TAnalogClock .TextContainers {
        display: block;
        width: 100%;
        height: 100%;
        position: relative;
    }
/*#endregion*/

.TBorder {
    border-style: solid;
}

.GridCellTemplateColor {
    border-color: gray;
    border-style: outset;
    border-width: 2px;
}

.Startmenu_MovingPanel {
    height: calc(70vh - 40px) !important;
    width: 27vw !important;
    min-width: unset !important;
    min-height: unset !important;
}

.TFlowDirection-RightToLeft .Startmenu_MovingPanel {
    transform-origin: bottom right !important;
}
/*#region Mobile Device*/
.IsMobileSize .TImageSingleEditorWithPreview {
    min-height: 100px;
}

.IsMobileSize .TForm .TForm-ContentBack-Inner {
    overflow-y: auto;
}

.IsMobileSize .Startmenu_MovingPanel {
    height: calc(100vh - 40px) !important;
    width: 100vw !important;
    min-width: unset !important;
    min-height: unset !important;
}

.IsMobileSize .TPopup-Root.Startmenu_Popup {
    min-height: unset !important;
    min-width: unset;
}

.IsMobileSize .Startmenu-Popup-Root {
    flex-direction: column;
}

.IsMobileSize .TLayoutGroup.IsRoot > .TLayoutGroupContent {
    overflow-y: auto;
}

.IsMobileSize .TLayoutGroup > .TLayoutGroupContent > .TTabControl {
    min-height: 300px;
}

.IsMobileSize .TPager .TPageCountView {
    display: none;
}

.IsMobileSize .TLayoutGroup.AllowWrapInMobile > .TLayoutGroupContentBack > .TLayoutGroupContent,
.IsMobileSize .TLayoutGroup.AllowWrapInMobile > .TLayoutGroupContent {
    flex-direction: column !important;
    box-sizing: border-box;
}

.IsMobileSize .TLayoutGroup.AllowWrapInMobile.TOrientation-Horizontal.THorizontalAlignment-Center {
    width: 100%;
    height: auto;
    flex: 1 0 auto;
}

.IsMobileSize .TLayoutGroup.AllowWrapInMobile > .TLayoutGroupContent {
    flex-direction: column !important;
    box-sizing: border-box;
}

    .IsMobileSize .TLayoutGroup.AllowWrapInMobile > .TLayoutGroupContent > * {
        width: 100% !important;
        height: auto;
    }

.IsMobileSize .TLayoutGroupContent.TOrientation-Horizontal {
    overflow-y: auto;
}


.IsMobileSize .TLayoutGroupContent.TOrientation-Vertical {
    overflow-y: auto;
}

    .IsMobileSize .TLayoutGroupContent.TOrientation-Vertical > .TVerticalAlignment-Stretch {
        flex-basis: content;
    }

    .IsMobileSize .TLayoutGroupContent.TOrientation-Vertical > .TGridControl {
        min-height: 100px;
    }

.IsMobileSize .TDesktopMenuContainer {
    width: 100% !important;
}

.IsMobileSize .TMobileNotSupport {
    display: none !important;
}

.IsMobileSize .TLayoutItemLabelText {
    overflow-wrap: break-word; /* Breaks long words to fit within the container */
    word-wrap: break-word; /* Older property, similarly breaks long words */
    white-space: normal; /* Ensures text wraps */
    text-align: justify;
}

.IsMobileSize .TLayoutItem > .TLayoutItemRoot {
    flex-direction: column;
}
/*#endregion*/
.TFileUpload-ProgressBar {
    top: 0px;
    height: 100%;
    position: absolute;
    left: 0px;
    right: 0px;
    bottom: 0px;
}
/*#region Wizard*/
.TWizard-Root {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    height: 100%;
}

    .TWizard-Root .TWizard-HeaderContainer {
        overflow: hidden;
    }

        .TWizard-Root .TWizard-HeaderContainer > .TWizard-Header {
            min-height: 58px;
            width: 100%;
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            align-items: center;
            padding: 25px 20px 5px 25px;
            box-sizing: border-box;
            position: relative;
            flex: 0 0 auto;
            height: auto;
        }

    .TWizard-Root > .TWizard-Pages-Root {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        padding: 7px;
        box-sizing: border-box;
        overflow: hidden;
        position: relative;
    }

    .TWizard-Root > .TWizard-Footer {
        display: flex;
        flex-direction: row;
        align-items: center;
        min-height: 42px;
        flex-wrap: wrap;
        padding: 0px 10px;
        justify-content: space-between;
        gap: 4px;
        box-sizing: border-box;
    }

.TWizard-Footer > .TButton {
    flex: 0 0 auto;
    width: auto;
    min-width: 100px;
    min-height: 24px;
    display: flex;
    align-self: center;
}

    .TWizard-Footer > .TButton.TWizardButton-Next {
        justify-self: flex-end;
    }

.TWizardPage {
    display: flex;
    pointer-events: none;
    transition: visibility 0.5s, opacity 0.9s, transform 0.3s linear;
    visibility: collapse;
    opacity: 0;
    height: unset;
    width: unset;
    position: absolute;
    left: 10px;
    top: 10px;
    bottom: 10px;
    right: 10px;
    overflow: auto;
    box-sizing: border-box;
}

    .TWizardPage.IsSelected {
        pointer-events: auto;
        visibility: visible;
        opacity: 1 !important;
    }


.TWizard-Header > .WizardPageStep {
    flex: 0 1 auto;
    display: flex;
    position: relative;
}

    .TWizard-Header > .WizardPageStep:focus {
        outline: 1px dotted black;
    }

    .TWizard-Header > .WizardPageStep.IsPassed {
        /* background: green; */
    }

    .TWizard-Header > .WizardPageStep > .TextPart {
        position: absolute;
        transform: translateY(calc(-100% - 6px));
        max-width: 95px;
        text-overflow: ellipsis;
        height: auto;
        overflow: hidden;
        transform-origin: top;
        top: 0;
        left: -38px;
        width: 95px;
        text-align: center;
        /* background: aliceblue; */
    }

.WizardPageStep > .TimeLineItem.Circle {
    width: 20px;
    height: 20px;
    flex: 0 1 auto;
    border-radius: 50px;
    border: 2px solid gray;
    padding: 2px;
    box-sizing: border-box;
    pointer-events: none;
}

.TWizard-Header .TimeLineItem {
    background: unset;
    transition-duration: 1000ms;
}

    .TWizard-Header .TimeLineItem.IsPassed {
        background: rgb(230 234 242);
        border-color: rgb(39 77 138);
        box-shadow: 0px 0px 4px 0px #062b63;
    }

.TWizard-Header > .TimeLineItem.Line {
    height: 2px;
    width: auto;
    flex: 1;
    background: gray;
    min-width: 110px;
}

    .TWizard-Header > .TimeLineItem.Line.IsPassed {
        background: rgb(39 77 138);
        box-shadow: 0px 0px 3px #062b63;
    }

.TimeLineItem.Circle > .Inner {
    width: 100%;
    height: 100%;
    border-radius: 50px;
    border: 1px solid transparent;
    box-sizing: border-box;
    transition-duration: 1000ms;
}

.TimeLineItem.Circle.IsPassed > .Inner {
    background: rgb(39 77 138);
}
/*#endregion*/



.TBackgroundEditor .BrushTypeSelector {
    height: auto;
    display: flex;
    justify-content: space-around;
    background: white;
    gap: 4px;
    box-sizing: border-box;
    flex-direction: row-reverse;
}

.BrushTypeSelector .BrushSelectionItem {
    border: 1px solid;
    width: 100%;
    box-sizing: border-box;
    overflow: auto;
    display: flex;
    height: 18px;
    cursor: pointer;
    padding: 1px;
}

    .BrushTypeSelector .BrushSelectionItem.IsSelected {
        background: #dac9c9;
    }

.TGradientStopsEditor-Root {
    height: 34px;
    gap: 4px;
}

.TGradientStopsEditor-Bar {
    background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(208,207,211,1) 50%, rgba(255,255,255,1) 100%);
    width: 100%;
    height: 7px;
    box-sizing: border-box;
    position: relative;
    cursor: copy;
    border: 1px solid;
    border-radius: 3px;
}

.TGradientButton {
    width: 23px !important;
}

.TGradientStop {
    position: absolute;
    width: 15px;
    height: 15px;
    background: #878787;
    transform: translate(-50%, -50%);
    box-sizing: border-box;
    cursor: pointer;
    top: 50%;
    border: 1px solid black;
    border-radius: 41px;
}

    .TGradientStop.IsSelected {
        box-shadow: 0px 0px 2px 2px #ffda00;
    }

.TGradientPresenter {
    width: 30px;
    height: 20px;
}

.TGradientStops-BarContainer {
    padding: 0px 10px;
    box-sizing: border-box;
    position: relative;
}

.TBackgroundPresenter {
    border: 1px solid;
    border-radius: 2px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='%23ccc' fill-opacity='1'%3E%3Crect x='0' y='0' width='6' height='6' /%3E%3Crect x='6' y='6' width='6' height='6' /%3E%3C/svg%3E");
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==");
    box-sizing: border-box;
    position: relative;
}

.TBackgroundPresenter-Root {
    width: 100%;
    height: 100%;
}

.TViewBox {
    overflow: visible;
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: column;
}

.TViewBox-Root {
}

.IsProcessingLayer {
    position: absolute;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
    pointer-events: none;
    background: #00000033;
    cursor: wait !important;
    display: none;
    z-index: 10000;
}

    .IsProcessingLayer.IsVisible {
        display: block;
        pointer-events: all;
    }

.IsProcessingLayerContent {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 22px;
    display: flex;
    box-shadow: 0px 0px 20px 10px #00000078;
    background: #f8f8f8;
    box-sizing: border-box;
    border-radius: 5px;
    max-width: 170px;
}

    .IsProcessingLayerContent > span {
        color: #000000a6;
        position: relative;
        text-align: center;
    }

.TOpenStreetMap.IsReadOnly .TOpenStreetMap-Container {
    pointer-events: none;
}

.TNotificationMessage-Root {
    padding: 10px;
    display: flex;
    flex-direction: column;
    flex: 0 1 auto;
    background: #ffffff59;
    box-sizing: border-box;
    max-height: 120px;
    overflow: hidden;
    border: 1px solid;
    border-radius: 3px;
    box-shadow: 1px 1px 3px black;
    cursor: pointer;
    transition-duration: 500ms;
    min-height: 60px;
    user-select: none;
}

    .TNotificationMessage-Root:hover {
        box-shadow: 0px 0px 3px 1px #f20101;
    }

    .TNotificationMessage-Root:active {
        box-shadow: 0px 0px 0px 0px black;
    }

.TNotificationMessage-Header {
    display: flex;
    flex-direction: row;
    gap: 4px;
    box-sizing: border-box;
}

.TNotificationMessage-Title {
    flex: 1 1 100%;
    font-weight: 900;
    color: brown;
    user-select: none;
}

    .TNotificationMessage-Title.IsNotReaded {
        font-weight: 900;
        text-shadow: 0 0 3px #e1d70d;
    }

.TNotificationMessage-CloseButton {
    flex: 0 1 18px;
}

.TNotificationMessage-Image {
    flex: 0 1 22px;
}

.TNotificationMessage-Content {
    overflow: auto;
}

.TextWrapping-NoWrap {
    white-space: nowrap;
}

    .TextWrapping-NoWrap.TTextBlock {
        white-space: nowrap;
    }

    span.TextWrapping-NoWrap,
    .TextWrapping-NoWrap > span {
        white-space: nowrap;
    }

.VerticalText {
    text-orientation: mixed;
    writing-mode: vertical-lr;
    transform: rotate(180deg);
}

.TListBoxEdit-Root .TListBox-SearchBox + .TSelectionBox {
    height: calc(100% - 30px);
}

.TSelectionBox {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: stretch;
    flex-wrap: nowrap;
    box-sizing: border-box;
    flex-direction: column;
}

.TSelectionBox-Root {
    position: relative;
    width: 100%;
    height: 100%;
}

.CellAlign-Center .TControl.TReminderEditor .TTextBlock span {
    text-align: center !important;
}

.TScheduler-Root {
    background-color: white;
    border: 1px solid gray;
    border-radius: 3px;
}

.TScheduler-Header {
    align-items: center;
    min-height: 40px;
    border: 0px solid #d0cfcf;
    border-bottom-width: 1px;
    padding: 10px;
}

.TScheduler-DateSelector-Container {
    display: flex;
    flex-direction: row;
    gap: 4px;
    background-color: #f1f1f1;
    padding: 2px 3px;
    border: 1px solid #d8d8d8;
    border-radius: 4px;
}

    .TScheduler-DateSelector-Container .TDatePresenter {
        min-width: 150px;
    }

    .TScheduler-DateSelector-Container .TButton {
        min-width: 25px;
    }

.TScheduler-ViewSelector-Container {
    min-width: 150px;
}

.TScheduler-ViewDay-AllDay {
    min-height: 40px;
    border: 0px solid #d0cfcf;
    border-bottom-width: 1px;
}

.TScheduler-ViewDay-TimePanel {
    width: 65px;
    border: 1px solid #e0e0e0;
    border-top-width: 0px;
    border-collapse: collapse;
    /* border-right-width: 6px; */
}

    .TScheduler-ViewDay-TimePanel tr:not(:first-child) td > TTextBlock {
        margin-top: -10px;
    }

.TScheduler-ViewDay-TimePanelRow {
    flex: 0 0 auto;
    width: 65px;
    border-collapse: collapse;
    border-left: 1px solid #e0e0e0;
    box-sizing: border-box;
}

.TScheduler-ViewDay-TimePanelCell {
    color: rgba(0, 0, 0, .54);
    position: relative;
    width: 100%;
    text-align: right;
    vertical-align: top;
    border-bottom: 1px solid transparent;
    height: 38px;
    padding-right: 8px;
}

.TScheduler-ViewDay-DateTable tr:first-child td {
    border-top: none;
}

.TScheduler-ViewDay-DateTableRow {
}

.TScheduler-ViewDay-DateTableCell {
    height: 38px;
    border-top: 1px solid #e0e0e0;
}

    .TScheduler-ViewDay-DateTableCell:hover {
        background-color: rgba(0,0,0,0.04);
    }

.TScheduler-ViewDay-DateTable {
    width: 100%;
    border-spacing: 0;
    table-layout: fixed;
}

.TScheduler-ViewDay-Houres {
    overflow: auto;
}

.TScheduler-ViewDay-DateTableCell.IsSelected {
    background-color: aliceblue;
}

.TScheduler-ViewDay-AllDay-TimePanel {
    border: 0px solid #e0e0e0;
    border-left-width: 1px;
    width: 64px;
}

.TScheduleItem {
    position: absolute;
    background-color: #c5dcf7ad;
    width: 100%;
    border-radius: 3px;
    box-shadow: inset 0px 0px 3px 0px #567bb4;
    pointer-events: auto;
    cursor: pointer;
    padding: 4px 8px;
    box-sizing: border-box;
    overflow: hidden;
    color: white;
}

    .TScheduleItem .TTextBlock {
        mix-blend-mode: difference;
        pointer-events: none;
    }

.TScheduler-ViewDay-ScheduleItemViewer {
    position: absolute;
    left: 6px;
    top: 0px;
    width: calc(100% - 68px);
    height: auto;
    pointer-events: none;
    background: #ff00002e;
}

.TOrganizationChart-Root {
    box-sizing: border-box;
    overflow: hidden;
    gap: 5px;
    align-items: stretch;
    display: flex;
    flex-direction: column;
    flex: 1 1 100%;
    height: 100%;
    position: relative;
    width: 100%;
}

    .TOrganizationChart-Root .TOrganizationChartItems-Root {
        width: auto;
        height: auto;
        display: flex;
        box-sizing: border-box;
        overflow: hidden;
        position: absolute;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        padding: 10px;
        /* background: red; */
    }

    .TOrganizationChart-Root .TOrganizationChartItems-Root-Outer {
        height: 100%;
        position: relative;
        box-sizing: border-box;
        display: flex;
        width: 100%;
        align-items: center;
        flex-wrap: nowrap;
        flex-direction: column;
        overflow: auto;
    }


    .TOrganizationChart-Root .OrganizationChartItem {
        width: 250px;
        height: 120px;
        position: absolute;
        box-sizing: border-box;
        left: 10px;
        top: 20px;
        display: flex;
        border: 1px solid;
        border-radius: 3px;
        background: white;
        box-shadow: 1px 1px 2px -1px #0000008a;
        overflow: hidden;
    }

    .TOrganizationChart-Root .TOrganizationChartItemTemplate {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        gap: 27px;
        position: relative;
        /* width: 100%; */
    }

.TOrganizationChart-ItemContent {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row-reverse;
    flex-wrap: nowrap;
    padding: 13px 4px;
    box-sizing: border-box;
    align-items: center;
}

.OrganizationChartItem-Row {
    border: 1px solid #bdbdbd;
    border-radius: 5px;
    overflow: hidden;
    box-sizing: border-box;
    padding: 10px;
    z-index: 1;
    background: white;
}

    .OrganizationChartItem-Row.IsSelected {
        box-shadow: 0px 0px 7px 1px #00000094;
    }

.TOrganizationChart-ItemContent > .ImageContainer {
    width: 64px;
    height: 64px;
    box-sizing: border-box;
    border: 1px solid #cfcfcf;
    border-radius: 50px;
}

.TOrganizationChartItem-HeadColor {
    position: absolute;
    top: 0px;
    width: 100%;
    height: 4px;
    background-color: green;
}

.TOrganizationChartItem-RowContainer {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    flex: 1 1 auto;
    align-self: stretch;
    justify-self: stretch;
    gap: 2px;
    position: relative;
    align-items: center;
}

    .TOrganizationChartItem-RowContainer > .TOrganizationChartExpandToggle {
        width: 14px;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
        flex: 1 0 auto;
        font-family: 'FontAwesome';
        font-size: 12px;
        position: absolute;
        bottom: 3px;
        height: 12px;
        content: "\f0da";
        border-radius: 4px;
        border: 1px solid #adadad;
        color: #adadad;
        box-sizing: border-box;
        cursor: pointer;
        visibility: collapse;
        z-index: 2;
    }

    .TOrganizationChartItem-RowContainer.HasChild > .TOrganizationChartExpandToggle {
        visibility: visible;
    }

.TOrganizationChartItem-Childs {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    flex-wrap: nowrap;
    gap: 27px;
}

.TOrganizationChart {
    overflow: hidden;
    padding: 4px;
    background-color: white;
    border: 1px solid #062b63;
    border-radius: 3px;
    box-sizing: border-box;
}

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

    .TOrganizationChart .Connector {
        position: absolute;
        background: #d7d7d7;
        transition-duration: 200ms;
    }

    .TOrganizationChart .VerticalConnector {
        height: 14px;
        width: 2px;
    }

    .TOrganizationChart .TopConnector {
        top: 0px;
        transform: translateY(-100%);
    }

    .TOrganizationChart .BottomConnector {
        bottom: 0px;
        transform: translateY(100%);
    }

    .TOrganizationChart .HorizontalConnector {
        width: calc(100% - 160px);
        height: 13px;
        bottom: -28px;
        border: 2px solid;
        border-color: #d7d7d7;
        border-width: 2px 2px 0px 2px;
        background: unset;
        border-radius: 8px 8px 0px 0px;
        z-index: 0;
    }

.TEntityLookup .CodeSearch-Text {
    border: none;
    border-left: 1px solid #c2c2c2a8;
    text-align: center;
    width: 20%;
}

.TEntityLookup .TEntityLookup-TextContainer {
    gap: 3px;
}

.IsMobileSize .TDetailEditor,
.IsMobileSize .TRelatedEntityPresenter {
    min-height: 250px;
}

.TAdvancedFileEditor {
    -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%);
    border: 1px solid #284172;
    box-sizing: border-box;
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-end;
    overflow: hidden;
    position: relative;
    height: auto;
    min-height: 24px;
    color: inherit;
    column-gap: 1px;
    align-items: stretch;
    color: black;
    padding: 1px;
}

.TModelLineConnection {
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 50px;
    border: 1px solid;
    transform: translate(-50%, -50%);
    cursor: pointer;
    border: 1px solid #0000ff9c;
    border-radius: 50px;
    background: #0000ff24;
    pointer-events: auto;
}

    .TModelLineConnection.IsConnected {
        width: 10px;
        height: 10px;
        border-radius: 2px;
    }

.TFlowDirection-RightToLeft .TModelLineConnection {
    transform: translate(50%, -50%);
}

.TModelLineTitle {
    position: absolute;
    transform: translate(50%, -50%);
    border: 1px solid #00000063;
    padding: 1px 3px;
    background: #ffffff;
    border-radius: 3px;
    box-shadow: inset 0px 0px 3px 0px #ffbe00;
    max-width: 100px;
    overflow: hidden;
    white-space: pre-wrap;
    text-align: center;
    opacity: 1;
    pointer-events: auto;
    transition: ease-in;
    transition-duration: 200ms;
    font-size: smaller;
}

.ViewCommaSeparated {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    align-content: center;
    overflow: hidden;
    flex: 0 1 auto;
    gap: 2px;
    padding: 2px 3px;
}

    .ViewCommaSeparated > span {
        width: auto;
    }

    .ViewCommaSeparated .MultipleSelectionItemText::after {
        content: ' , ';
    }

    .ViewCommaSeparated .MultipleSelectionItemText:last-child::after {
        content: ''; /* Remove the comma after the last item */
    }

.RichTextGridView {
    display: inline-block;
    width: 100%;
    max-height: 22px;
    overflow: hidden;
    box-sizing: border-box;
}


/*#region TRuntimeImageEditor*/

.TRuntimeImageEditor .filter-slider {
    margin-bottom: 20px;
    padding: 10px;
    background-color: #f9f9f9;
    border-radius: 5px;
}

    .TRuntimeImageEditor .filter-slider label {
        display: block;
        margin-bottom: 5px;
        font-weight: bold;
    }

    .TRuntimeImageEditor .filter-slider input {
        width: 100%;
        margin: 8px 0;
    }

/* Zoom controls */

.TRuntimeImageEditor .zoom-controls span {
    flex: 1;
    text-align: center;
    font-weight: bold;
    color: #555;
}

.TRuntimeImageEditor .zoom-tip {
    margin-bottom: 20px;
    text-align: center;
    color: #777;
}

.TRuntimeImageEditor .image-preview {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f5f5f5;
    border-radius: 5px;
    position: relative;
    border: 1px dashed #ccc;
    min-height: 400px;
    overflow: hidden;
}

.TRuntimeImageEditor .imageCanvas {
    max-width: 100%;
    max-height: 400px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    cursor: grab;
}

    .TRuntimeImageEditor .imageCanvas:active {
        cursor: grabbing;
    }

.TRuntimeImageEditor .no-image-message {
    position: absolute;
    color: #888;
    font-size: 16px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: -1;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .TRuntimeImageEditor .container {
        width: 95%;
        padding: 15px;
    }

    .TRuntimeImageEditor .editor {
        flex-direction: column;
    }

    .TRuntimeImageEditor .controls {
        width: 100%;
    }
}

/*#endregion TRuntimeImageEditor*/


/*#region PWA Install Prompt Styles */
.pwa-install-button {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 10px 15px;
    cursor: pointer;
    font-family: inherit;
    z-index: 1000;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    transition: background-color 0.3s;
}

    .pwa-install-button:hover {
        background-color: #0069d9;
    }

.pwa-install-prompt {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: white;
    border-radius: 8px;
    padding: 15px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    max-width: 350px;
    font-family: inherit;
}

.pwa-install-prompt-header {
    font-weight: bold;
    margin-bottom: 10px;
    font-size: 16px;
}

.pwa-install-prompt-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.pwa-install-prompt-button {
    padding: 8px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-family: inherit;
    border: none;
    transition: background-color 0.3s;
}

.pwa-install-prompt-install {
    background-color: #007bff;
    color: white;
}

    .pwa-install-prompt-install:hover {
        background-color: #0069d9;
    }

.pwa-install-prompt-cancel {
    background-color: #f8f9fa;
    color: #212529;
}

    .pwa-install-prompt-cancel:hover {
        background-color: #e2e6ea;
    }

/* RTL Support for PWA Prompt */
.TFlowDirection-RightToLeft .pwa-install-button {
    right: auto;
    left: 20px;
}

.TFlowDirection-RightToLeft .pwa-install-prompt {
    right: auto;
    left: 20px;
}

.TFlowDirection-RightToLeft .pwa-install-prompt-buttons {
    flex-direction: row-reverse;
}

/*#endregion*/
.AI-BackPanel {
    background-image: url(/Content/Images/backgrounds/3.jpg);
    background-size: cover;
    background-repeat: no-repeat;
}

.Ai-ItemsPanel {
    padding: 13px 0px 14px 0px;
    overflow: auto;
    gap: 5px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    align-content: center;
    flex-direction: column;
}



.AI-Message-Thinking {
    margin: 5px;
    padding: 10px;
    border-radius: 10px;
    max-width: 80%;
}

.AI-MessageRow {
    background: white;
    border: 1px solid #00000057;
    box-shadow: -2px 2px 3px -1px #00000052;
    position: relative;
    margin: 0px 14px;
    padding: 10px;
    border-radius: 10px;
    width: 80%;
    box-sizing: border-box;
    pointer-events: all;
    min-width: 200px;
}

    .AI-MessageRow.AI-User {
        /*margin-left: auto !important;*/
    }

    .AI-MessageRow.AI-Assistant {
        /*margin-left: auto !important;*/
        background-color: #1aff001c;
    }

    .AI-MessageRow .Ai-Message-Toolbar {
        position: absolute;
        top: -14px;
        left: 14px;
        display: flex;
        flex-direction: row-reverse;
        gap: 1px;
        opacity: 0;
        transition: all ease-in-out 200ms;
    }

    .AI-MessageRow:has(:hover) .Ai-Message-Toolbar {
        opacity: 1;
    }

.Ai-Message-Text {
    user-select: text;
    cursor: auto;
}



.Ai-Response-Button-Play {
    width: 20px;
    height: 18px;
}


.TControl.TMessageBoxForm .TButton-Main {
    min-width: 90px;
    min-height: 24px;
}

    .TControl.TMessageBoxForm .TButton-Main.CopyButton {
        width: 24px;
        min-width: unset;
        opacity: 0.4;
    }

        .TControl.TMessageBoxForm .TButton-Main.CopyButton:hover {
            opacity: 1;
        }

.TMessageBoxForm .MessageContainer-Out {
    overflow: hidden;
    height: 100%;
    padding: 5px;
    box-sizing: border-box;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.TMessageBoxForm .MessageContainer-In {
    overflow: auto;
    box-sizing: border-box;
    display: flex;
}

.TMessageBoxForm .MessagePresenter {
    align-self: center;
    width: 100%;
    text-align: start;
    white-space: pre-wrap;
    box-sizing: border-box;
}

.TMessageBoxForm .HtmlMessagePresenter {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    text-align: start;
}
/*#region Syntax Editor*/
.sighelp-keyword {
    color: #569CD6;
}

.sighelp-classname {
    color: #4EC9B0;
}

.sighelp-parametername {
    color: #9CDCFE;
}

.sighelp-methodname {
    color: #DCDCAA;
}

.sighelp-punctuation {
    color: #D4D4D4;
}

.debug-breakpoint {
    background-color: #d9534f;
    border: 1px solid #a94442;
    border-radius: 50%;
    margin: 0px 10px;
    transform: scale(0.8);
    box-sizing: border-box;
}

.debug-breakpoint-current {
    background-color: #007acc; /* Keep the same blue color */
    border: 1px solid #005a9e; /* Add a darker border for contrast */
    border-radius: 50%;
    margin: 0px 10px;
    transform: scale(0.8);
    box-sizing: border-box;
}

.monaco-editor .margin-view-overlays .cgmr {
    width: 20px;
    margin-left: 0;
}
/*#endregion*/