﻿@import url(root.css);
@import url(styles.alerts.css);
@import url(styles.buttons.css);
@import url(styles.forms.css);
@import url(styles.inputs.css);
@import url(styles.layout.css);
@import url(styles.notifications.css);
@import url(styles.tables.css);
@import url(styles.tabs.css);

html {
    font-family: var(--ui-font-family);
    font-size: var(--ui-size-font-default);
}

body {
    margin: 0;
    padding: 0;
    background: var(--ui-color-background-default);
    color: var(--ui-color-foreground-default);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100vh;
    justify-content: space-between;
}

section {
    padding: var(--ui-size-section-padding-default);
}

a {
    outline: none;
    text-decoration: underline;
    color: var(--ui-color-foreground-link-default);
}
    a:hover {
        color: var(--ui-color-foreground-link-hover);
    }
    a:active {
        color: var(--ui-color-foreground-link-active);
    }

.flex {
    display: flex;
}

.text-center {
    text-align: center;
}

.cadlink-ui-spinner {
    width: 5rem;
}

.gap {
    gap: 1rem;
}

.gap-05 {
    gap: .5rem;
}

h3.header {
    margin-block: 0;
    padding: var(--ui-size-form-header-padding);
    background: var(--ui-color-info);
    color: var(--ui-color-foreground-inverted);
}

    h3.header.alternative {
        background: var(--ui-color-background-default);
        color: var(--ui-color-info);
        text-decoration: underline;
    }

.space-between {
    justify-content: space-between;
}

.space-around {
    justify-content: space-around;
}

.align-items-center {
    align-items: center;
}

.align-items-end {
    align-items: end;
}

.justify-content-center {
    justify-content: center;
}

.justify-content-right {
    justify-content: right;
}

.justify-content-left {
    justify-content: left;
}

.text-align-center {
    text-align: center;
}

.success {
    background-color: var(--ui-color-success) !important;
    color: var(--ui-color-foreground-inverted);
}

.success-text {
    color: var(--ui-color-success);
}

.error {
    background-color: var(--ui-color-error) !important;
    color: var(--ui-color-foreground-inverted);
}

.height-100 {
    height: 100%;
}

.width-100 {
    width: 100%;
}

.height-100vh {
    height: 100vh;
}

.selectable:hover {
    cursor: pointer;
    background-color: var(--ui-color-background-selectable);
}

.position-relative {
    position: relative;
}

.position-sticky {
    position: sticky;
}

.invisible {
    visibility: hidden;
}

.hidden {
    display: none;
}

.nowrap {
    white-space: nowrap;
}

.overflow-hidden {
    overflow: hidden;
}

.table-container {
    max-width: 100%;
    overflow-x: auto;
}

.dropdown-container {
    position: absolute;
    z-index: 99;
    top: var(--ui-size-dropdown-top);
    left: 0;
    background-color: var(--ui-color-background-default);
    min-width: 100%;
    border-bottom: 1px solid silver;
}

    .dropdown-container .dropdown-table-wrapper {
        overflow-y: auto;
        overflow-x: hidden;
        max-height: var(--ui-size-dropdown-max-height);
        position: relative;
    }

        .dropdown-container .dropdown-table-wrapper table thead {
            position: sticky;
            top: -1px;
            z-index: 1;
        }

    .dropdown-container table {
        width: max-content;
    }

        .dropdown-container table tbody tr:hover {
            cursor: pointer;
        }

    .dropdown-container.left {
        left: auto;
        right: 0;
    }

    .dropdown-container.bottom {
        height: auto;
        top: unset;
        bottom: 1.8rem;
    }

    .dropdown-container .cadlink-ui-dropdown-data-table-search {
        width: calc(100% - 1rem);
    }

.cadlink-ui-dropdown-data-table.width-auto {
    width: fit-content !important;
}

/* Syncfusion Override */
.e-control {
    font-family: var(--ui-font-family) !important;
}

.e-grid .e-content {
    background-color: var(--ui-color-background-default) !important;
}

/*.e-input-group,
.e-input-group.e-control-wrapper {
    width: auto !important;
}*/

.e-grid.e-default .e-headercell,
.e-grid.e-default .e-detailheadercell {
    background-color: var(--ui-color-background-table-head-default) !important;
}

.e-grid .e-headercelldiv {
    color: var(--ui-color-foreground-default) !important;
}

/* .e-grid.e-left-shadow .e-leftfreeze {
			border-color: transparent !important;
		} */

.e-grid .e-rowcell {
    color: var(--ui-color-foreground-default) !important;
    border-color: var(--ui-color-border-table-default) !important;
    background-color: var(--ui-color-background-default) !important;
}

.e-grid .e-leftfreeze:not(.e-summarycell,.e-indentcell,.e-updatedtd,.e-selectionbackground,.e-columnselection,.e-groupcaption,.e-cellselectionbackground,.e-active) {
    background-color: var(--ui-color-background-default);
}

.e-input-group,
.e-input-group.e-control-wrapper {
    background-color: transparent !important;
    box-shadow: none !important;
    border-radius: var(--ui-size-input-border-radius) !important;
}

    .e-input-group.borderless,
    .e-input-group.e-control-wrapper.borderless {
        border-color: transparent !important;
    }

    .e-input-group:not(.borderless),
    .e-input-group.e-control-wrapper:not(.borderless) {
        border-color: var(--ui-color-border-input-default) !important;
    }

    .e-input-group input.e-input, .e-input-group.e-control-wrapper input.e-input {
        background-color: transparent !important;
        color: var(--ui-color-foreground-default);
    }

        .e-input-group.e-input-focus:not(.e-success):not(.e-warning):not(.e-error),
        .e-input-group.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning):not(.e-error) {
            box-shadow: none !important;
            border-color: var(--ui-color-border-input-focus) !important;
        }

        .e-input-group .e-input-group-icon,
        .e-input-group.e-control-wrapper .e-input-group-icon {
            border-color: transparent !important;
        }

        .e-input-group.e-disabled .e-input-group-icon,
        .e-input-group.e-control-wrapper.e-disabled .e-input-group-icon {
            border-color: transparent !important;
        }

        .e-input-group:not(.e-disabled) .e-input-group-icon:hover,
        .e-input-group.e-control-wrapper:not(.e-disabled) .e-input-group-icon:hover {
            background: inherit !important;
            color: var(--ui-color-foreground-default) !important;
        }

/* .e-rowcell.e-selectionbackground.e-active {
			background: var(--ui-color-info);
			color: var(--ui-color-foreground-inverted);
		} */

.e-popup-content {
    height: auto !important;
}

    .e-popup-content .e-gridheader,
    .e-grid .e-gridheader {
        /* padding-right: 0 !important; */
    }

.e-rowcell.e-templatecell {
    padding: 0 !important;
}

    .e-rowcell.e-templatecell[style*="--indent-level"] {
        padding-left: var(--indent-level) !important;
    }

    .e-rowcell.e-templatecell.with-children[style*="--indent-level"] {
        padding-left: calc(var(--indent-level) + 16px) !important;
    }

.e-grid .e-focused,
.e-grid.e-left-shadow {
    box-shadow: none !important;
}

.e-grid td.e-active {
    /* background: transparent; */
}

.e-treegrid .e-treecolumn-container .e-treecell-child,
.e-treegrid .e-treecolumn-container .e-treecell-icon {
    width: 0 !important;
}

.e-treegrid .e-rowcell:not(.e-gridclip) .e-treecolumn-container {
    display: flex !important;
    align-items: center !important;
}

    .e-treegrid .e-rowcell:not(.e-gridclip) .e-treecolumn-container span.e-treecell {
        display: flex !important;
        width: 100%;
    }

.e-dialog.e-popup {
    width: auto !important;
}

.e-dialog .e-dlg-content {
    padding: 0 !important;
}

.e-contextmenu-wrapper ul, .e-contextmenu-container ul {
    background-color: var(--ui-color-background-default);
    color: var(--ui-color-foreground-default);
}

.e-popup.e-multicolumn-list .e-nodata {
    color: var(--ui-color-foreground-default) !important;
    border: 1px solid var(--ui-color-border-table-default) !important;
    background: var(--ui-color-background-default) !important;
}