@property --dialogBorderRadius {
    syntax: '<length>';
    inherits: false;
    initial-value: 8px;
}

@property --dialogButtonBorderRadius {
    syntax: '<length>';
    inherits: false;
    initial-value: 4px;
}

/*old variable*/
@property --main-bg-color {
    syntax: '<color>';
    inherits: true;
    initial-value: #F0F2F4;
}
/*old variable*/
@property --note-bg-color {
    syntax: '<color>';
    inherits: true;
    initial-value: #F5F5F5;
}

/* Text */
@property --ts-ms-color-neutral-foreground1 {
    syntax: '<color>';
    inherits: false;
    initial-value: #242424;
}

    @property --ts-ms-color-neutral-foreground1-hover {
        syntax: '<color>';
        inherits: false;
        initial-value: #242424;
    }

    @property --ts-ms-color-neutral-foreground1-pressed {
        syntax: '<color>';
        inherits: false;
        initial-value: #242424;
    }

    @property --ts-ms-color-neutral-foreground1-selected {
        syntax: '<color>';
        inherits: false;
        initial-value: #242424;
    }

@property --ts-ms-color-neutral-foreground3 {
    syntax: '<color>';
    inherits: false;
    initial-value: #616161;
}

    @property --ts-ms-color-neutral-foreground3-hover {
        syntax: '<color>';
        inherits: false;
        initial-value: #424242;
    }

    @property --ts-ms-color-neutral-foreground3-pressed {
        syntax: '<color>';
        inherits: false;
        initial-value: #424242;
    }

    @property --ts-ms-color-neutral-foreground3-selected {
        syntax: '<color>';
        inherits: false;
        initial-value: #424242;
    }

@property --ts-ms-color-brand-background {
    syntax: '<color>';
    inherits: false;
    initial-value: #0f6cbd;
}

    @property --ts-ms-color-brand-background-hover {
        syntax: '<color>';
        inherits: false;
        initial-value: #115ea3;
    }

    @property --ts-ms-color-brand-background-pressed {
        syntax: '<color>';
        inherits: false;
        initial-value: #0c3b5e;
    }

    @property --ts-ms-color-brand-background-selected {
        syntax: '<color>';
        inherits: false;
        initial-value: #0f548c;
    }

@property --ts-ms-color-brand2-background {
    syntax: '<color>';
    inherits: false;
    initial-value: #115ea3;
}

    @property --ts-ms-color-brand2-background-hover {
        syntax: '<color>';
        inherits: false;
        initial-value: #0f6cbd;
    }

    @property --ts-ms-color-brand2-background-pressed {
        syntax: '<color>';
        inherits: false;
        initial-value: #0c3b5e;
    }

    @property --ts-ms-color-brand2-background-selected {
        syntax: '<color>';
        inherits: false;
        initial-value: #0f548c;
    }

@property --ts-ms-color-brand2-foreground {
    syntax: '<color>';
    inherits: false;
    initial-value: #ffffff;
}

    @property --ts-ms-color-brand2-foreground-hover {
        syntax: '<color>';
        inherits: false;
        initial-value: #f5f5f5;
    }

    @property --ts-ms-color-brand2-foreground-pressed {
        syntax: '<color>';
        inherits: false;
        initial-value: #e0e0e0;
    }

    @property --ts-ms-color-brand2-foreground-selected {
        syntax: '<color>';
        inherits: false;
        initial-value: #ebebeb;
    }

@property --ts-ms-color-neutral-background2 {
    syntax: '<color>';
    inherits: false;
    initial-value: #fafafa;
}

/* menu selected background*/
@property --ts-ms-color-neutral-background-pressed {
    syntax: '<color>';
    inherits: false;
    initial-value: #f5f5f5;
}

/*divider*/
@property --ts-ms-color-neutral-stroke2 {
    syntax: '<color>';
    inherits: false;
    initial-value: #e0e0e0;
}

/*tabs background*/
@property --ts-ms-color-neutral-background3 {
    syntax: '<color>';
    inherits: false;
    initial-value: #f5f5f5;
}

    /*tabs background*/
    @property --ts-ms-color-neutral-background3-hover {
        syntax: '<color>';
        inherits: false;
        initial-value: #ebebeb;
    }

    /*tabs background*/
    @property --ts-ms-color-neutral-background3-pressed {
        syntax: '<color>';
        inherits: false;
        initial-value: #d6d6d6;
    }

    /*tabs selected background*/
    @property --ts-ms-color-neutral-background3-selected {
        syntax: '<color>';
        inherits: false;
        initial-value: #e0e0e0;
    }

@property --ts-ms-color-neutral-background1 {
    syntax: '<color>';
    inherits: false;
    initial-value: #ffffff;
}

    @property --ts-ms-color-neutral-background1-hover {
        syntax: '<color>';
        inherits: false;
        initial-value: #f5f5f5;
    }

    @property --ts-ms-color-neutral-background1-pressed {
        syntax: '<color>';
        inherits: false;
        initial-value: #e0e0e0;
    }

    @property --ts-ms-color-neutral-background1-selected {
        syntax: '<color>';
        inherits: false;
        initial-value: #ebebeb;
    }

:root {
    color-scheme: light;
    --ts-ms-shadow4-l: 0 0 2px rgba(0,0,0,0.12), 0 2px 4px rgba(0,0,0,0.14);
    --ts-ms-shadow8-l: 0 0 2px rgba(0,0,0,0.12), 0 4px 8px rgba(0,0,0,0.14);
    /*--ts-ms-shadow4-d: 0 0 2px rgba(0,0,0,0.24), 0 2px 4px rgba(0,0,0,0.28);
    --ts-ms-shadow8-d: 0 0 2px rgba(0,0,0,0.24), 0 4px 8px rgba(0,0,0,0.28);*/
    --ts-shadow4: var(--ts-ms-shadow4-l);
    --ts-shadow8: var(--ts-ms-shadow8-l);

    --ts-color-tabs-background: var(--ts-ms-color-neutral-background3);
    --ts-color-divider-background: var(--ts-color-neutral-stroke2);
}

/* bug fix for chrome version 72. Fixes grid expansion issues with overflow*/
.ui-grid .ngViewport {
    height: 0;
}
    /* bug fix for chrome version 76. Fixes grid expansion issues with overflow*/
    .ui-grid .ngViewport .ngCanvas {
        height: 0 !important;
    }
/* bug fix for chrome version 72. Fixes grid expansion issues with overflow*/
.ui-grid .ngHierarchy .ngViewport {
    height: auto;
}
/* bug fix for chrome version 76. Fixes grid expansion issues with overflow*/
.ui-grid .ngHierarchy .ngCanvas {
    height: auto !important;
}
/* bug fix for chrome version 76.0.3809.132. Fixes dialog sizing and layout issues for flex fill containers*/
.ui-flexlayout-horizontal > .ui-flexlayout-content {
    height: inherit !important;
}


body {
    padding: 0 !important;
    margin: 0 !important;
}

html, body, input, textarea, select, button, submit {
    font-family: Segoe UI,Tahoma,Verdana !important;
    font-size: 10pt !important;
}

html, body, form {
    width: 100% !important;
    height: 100% !important;
}

.dialogpage_master {
    overflow: hidden;
    background-color: White;
}

.frontpage_master,
.standardpage_master {
    overflow: hidden;
    background-color: White;
}

    .frontpage_master > form,
    .standardpage_master > form {
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-flex-wrap: nowrap;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
        -webkit-flex-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
        -webkit-flex-align: stretch;
        -ms-flex-align: stretch;
        align-items: stretch;
        -webkit-flex-line-pack: stretch;
        -ms-flex-line-pack: stretch;
        align-content: stretch;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
    }

    .frontpage_master .ts_page_header,
    .standardpage_master .ts_page_header {
        padding: 3px 10px;
        -webkit-flex: none;
        -ms-flex: none;
        flex: none;
    }

    .standardpage_master .ts_page_tab {
        -webkit-flex: none;
        -ms-flex: none;
        flex: none;
    }

    .frontpage_master .ts_page_data,
    .standardpage_master .ts_page_data {
        position: relative;
        -webkit-flex: 1;
        -ms-flex: 1;
        flex: 1;
    }

        .frontpage_master .ts_page_data > :first-child,
        .standardpage_master .ts_page_data > :first-child {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            width: auto;
            height: auto;
        }

    .frontpage_master .ts_page_footer,
    .standardpage_master .ts_page_footer {
        -webkit-flex: none;
        -ms-flex: none;
        flex: none;
    }

        .frontpage_master .ts_page_footer .ts_page_navigation .tl_toolbar_item .rtbText,
        .standardpage_master .ts_page_footer .ts_page_navigation .tl_toolbar_item .rtbText {
            margin-top: 5px;
            display: inline-block;
        }

    .frontpage_master .ts_page_header,
    .standardpage_master .ts_page_header {
        box-sizing: border-box !important;
        background: #fff !important;
        padding: 0;
    }

.external_auth_master .ts_page_data {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    height: 100%;
}

.external_auth_master .ts-external-auth-left-panel {
    flex-basis: 330px;
    background: url("/Images/ExternalAuth/WhiteLogo.png") center center no-repeat #0072c6;
}

.external_auth_master .ts-external-auth-content-panel {
    flex: 1;
    padding: 140px 10px 0;
    margin: 65px 13.5% 0;
    background: url("/Images/ExternalAuth/Logo.png") top left no-repeat transparent;
}

.external_auth_master .ts-external-create-account .ts-external-create-account-header {
    color: #0072c6;
    font-size: 22px;
}

.dialog-header {
    color: lightblue !important;
}

.ts-tooltip-wrapper {
    position: absolute;
    z-index: 2000;
}

.ts-tooltip {
    width: 250px;
    padding: 5px 15px;
    border: 1px solid #91cdf2;
    background-color: #f8fcff;
}

.ctrl_saving {
    background-color: yellow !important;
    transition: background-color 1s ease;
}

.ctrl_saved {
    background-color: greenyellow !important;
    transition: background-color 1s ease;
}

.ctrl_saved_done {
    background-color: white !important;
    transition: background-color 1s ease;
}

.ctrl_error {
    background-color: red !important;
    transition: background-color 1s ease;
}

/* list-style-types (matches default list-styles in Telerik Editor in Office - for ex. notes)*/

ul {
    list-style-type: disc;
}

    ul ul {
        list-style-type: circle;
    }

        ul ul ul {
            list-style-type: square;
        }

            ul ul ul ul {
                list-style-type: disc;
            }

                ul ul ul ul ul {
                    list-style-type: circle;
                }

                    ul ul ul ul ul ul {
                        list-style-type: square;
                    }

                        ul ul ul ul ul ul ul {
                            list-style-type: disc;
                        }

                            ul ul ul ul ul ul ul ul {
                                list-style-type: circle;
                            }

                                ul ul ul ul ul ul ul ul ul {
                                    list-style-type: square;
                                }

ol {
    list-style-type: decimal;
}

    ol ol {
        list-style-type: lower-latin;
    }

        ol ol ol {
            list-style-type: lower-roman;
        }

            ol ol ol ol {
                list-style-type: decimal;
            }

                ol ol ol ol ol {
                    list-style-type: lower-latin;
                }

                    ol ol ol ol ol ol {
                        list-style-type: lower-roman;
                    }

                        ol ol ol ol ol ol ol {
                            list-style-type: decimal;
                        }

                            ol ol ol ol ol ol ol ol {
                                list-style-type: lower-latin;
                            }

                                ol ol ol ol ol ol ol ol ol {
                                    list-style-type: lower-roman;
                                }

/* Fix a lot of things that caused overflow after gcpdfviewer.js was replaced, see #12108 for more details */
*, *:before, *:after {
    box-sizing: border-box;
}

/* Telerik required-missing icon overrides */
.tl_textbox_TSDefault .RadInput .riTextBox.riError,
.ts-icon-type-colored .tl_textbox_TSDefault .RadInput .riTextBox.riError {
    background: 99.5% 2px url('/Api/Assets/Images/Metadata/RequiredMissing/Colored/RequiredMissing_16x16.png') transparent no-repeat !important;
}

.ts-icon-type-monochrome .tl_textbox_TSDefault .RadInput .riTextBox.riError {
    background: 99.5% 2px url('/Api/Assets/Images/Metadata/RequiredMissing/Monochrome/RequiredMissing_16x16.png') transparent no-repeat !important;
}

.tl_datepicker_TSDefault .RadInput .riTextBox.riError,
.tl_datetimepicker_TSDefault .RadInput .riTextBox.riError,
.ts-icon-type-colored .tl_datepicker_TSDefault .RadInput .riTextBox.riError,
.ts-icon-type-colored .tl_datetimepicker_TSDefault .RadInput .riTextBox.riError {
    background: 97% 50% url('/Api/Assets/Images/Metadata/RequiredMissing/Colored/RequiredMissing_16x16.png') transparent no-repeat !important;
}

.ts-icon-type-monochrome .tl_datepicker_TSDefault .RadInput .riTextBox.riError,
.ts-icon-type-monochrome .tl_datetimepicker_TSDefault .RadInput .riTextBox.riError {
    background: 97% 50% url('/Api/Assets/Images/Metadata/RequiredMissing/Monochrome/RequiredMissing_16x16.png') transparent no-repeat !important;
}

.tl_combobox_TSDefault.error .tl_combobox_wrapper .rcbInputCell input,
.ts-icon-type-colored .tl_combobox_TSDefault.error .tl_combobox_wrapper .rcbInputCell input {
    background: 99% 50% url('/Api/Assets/Images/Metadata/RequiredMissing/Colored/RequiredMissing_16x16.png') transparent no-repeat !important;
}

.ts-icon-type-monochrome .tl_combobox_TSDefault.error .tl_combobox_wrapper .rcbInputCell input {
    background: 99% 50% url('/Api/Assets/Images/Metadata/RequiredMissing/Monochrome/RequiredMissing_16x16.png') transparent no-repeat !important;
}

.tl_datalabel_TSDefault.error,
.ts-icon-type-colored .tl_datalabel_TSDefault.error {
    background: 99.5% 50% url('/Api/Assets/Images/Metadata/RequiredMissing/Colored/RequiredMissing_16x16.png') transparent no-repeat !important;
}

.ts-icon-type-monochrome .tl_datalabel_TSDefault.error {
    background: 99.5% 50% url('/Api/Assets/Images/Metadata/RequiredMissing/Monochrome/RequiredMissing_16x16.png') transparent no-repeat !important;
}

.ui-entitylist.error,
.ts-icon-type-colored .ui-entitylist.error {
    background: 99.5% 2px url('/Api/Assets/Images/Metadata/RequiredMissing/Colored/RequiredMissing_16x16.png') no-repeat !important;
}

.ts-icon-type-monochrome .ui-entitylist.error {
    background: 99.5% 2px url('/Api/Assets/Images/Metadata/RequiredMissing/Monochrome/RequiredMissing_16x16.png') no-repeat !important;
}