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

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

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