@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap');

:root {
    --font-family: 'Roboto', sans-serif;
    --font-size: 14px;
    --line-height: 1.5;
    --margin: 0 0 20px;
}

.theme-dexio-light {
    --accent-color: 102, 17, 238;
    --link-button-color: 177, 88, 248;
    --font-color: #222;
    --input-background-color: #fff;
    --input-border-color: #ccc;
    --body-background-color: #fff;
    /*Button*/
    --button-background-color: var(--link-button-color);
    --button-boxshadow-color: 0, 0, 0;
    --button-color: #fff;
    /*Date Input*/
    --date-icon-invert: 0;
    /*Table*/
    --table-background-color: 238, 238, 238;
    --table-border-color: #ddd;
    /*Help*/
    --help-background-color: #eee;
    --help-icon-color: var(--accent-color);
    /*Dialog*/
    --dialog-background-color: #fff;
    /*Checkbox*/
    --checkbox-background-color: var(--accent-color);
    /*Radio*/
    --radio-border-color: var(--accent-color);
    /*Search*/
    --search-background-color: #fff;
    --search-search-border: none;
    --search-result-background-color: #fff;
    --search-result-border-color: #ccc;
    --search-result-image-border-color: #ddd;
    --search-result-table-border-color: #ddd;
    --search-auto-suggest-body-background-color: #fff;
    --search-auto-suggest-body-border-color: #ccc;
    --search-filter-toggle-border-color: #ccc;
    --search-filter-group-background-color: #fff;
    --search-filter-group-border-color: #ccc;
    /*Pill*/
    --pill-right-color-default: 0, 0, 0;
    --pill-right-color-primary: 221, 34, 255;
    --pill-right-color-secondary: 34, 221, 255;
    --pill-right-color-red: 255, 179, 179;
    --pill-right-color-green: 179, 255, 179;
    --pill-right-user-color: var(--pill-right-color-default);
}

.theme-dexio-dark {
    --accent-color: 102, 17, 238;
    --link-button-color: 177, 88, 248;
    --font-color: #ccc;
    --input-background-color: #333;
    --input-border-color: #555;
    --body-background-color: #222;
    /*Button*/
    --button-background-color: var(--link-button-color);
    --button-boxshadow-color: 255, 255, 255;
    --button-color: #fff;
    /*Date Input*/
    --date-icon-invert: 1;
    /*Table*/
    --table-background-color: 68, 68, 68;
    --table-border-color: #444;
    /*Help*/
    --help-background-color: #222;
    --help-icon-color: 57, 208, 242;
    /*Dialog*/
    --dialog-background-color: #333;
    /*Checkbox*/
    --checkbox-background-color: var(--accent-color);
    /*Radio*/
    --radio-border-color: var(--accent-color);
    /*Search*/
    --search-background-color: #222;
    --search-search-border: 1px solid #555;
    --search-result-background-color: #222;
    --search-result-border-color: #555;
    --search-result-image-border-color: #444;
    --search-result-table-border-color: #444;
    --search-auto-suggest-body-background-color: #222;
    --search-auto-suggest-body-border-color: #555;
    --search-filter-toggle-border-color: #555;
    --search-filter-group-background-color: #222;
    --search-filter-group-border-color: #555;
    /*Pill*/
    --pill-right-color-default: 229, 229, 229;
    --pill-right-color-primary: 221, 34, 255;
    --pill-right-color-secondary: 34, 221, 255;
    --pill-right-color-red: 255, 179, 179;
    --pill-right-color-green: 179, 255, 179;
    --pill-right-user-color: var(--pill-right-color-default);
}

.theme-dexio-teal {
    --accent-color: 109, 32, 119;
    --link-button-color: 194, 34, 215;
    --font-color: #222;
    --input-background-color: #fff;
    --input-border-color: #ccc;
    --body-background-color: #fff;
    /*Button*/
    --button-background-color: var(--link-button-color);
    --button-boxshadow-color: 0, 0, 0;
    --button-color: #fff;
    /*Date Input*/
    --date-icon-invert: 0;
    /*Table*/
    --table-background-color: 238, 238, 238;
    --table-border-color: #ddd;
    /*Help*/
    --help-background-color: #eee;
    --help-icon-color: var(--accent-color);
    /*Dialog*/
    --dialog-background-color: #fff;
    /*Checkbox*/
    --checkbox-background-color: var(--accent-color);
    /*Radio*/
    --radio-border-color: var(--accent-color);
    /*Search*/
    --search-background-color: #fff;
    --search-search-border: none;
    --search-result-background-color: #fff;
    --search-result-border-color: #ccc;
    --search-result-image-border-color: #ddd;
    --search-result-table-border-color: #ddd;
    --search-auto-suggest-body-background-color: #fff;
    --search-auto-suggest-body-border-color: #ccc;
    --search-filter-toggle-border-color: #ccc;
    --search-filter-group-background-color: #fff;
    --search-filter-group-border-color: #ccc;
    /*Pill*/
    --pill-right-color-default: 0, 0, 0;
    --pill-right-color-primary: 19, 140, 149;
    --pill-right-color-secondary: 255, 199, 44;
    --pill-right-color-red: 255, 179, 179;
    --pill-right-color-green: 179, 255, 179;
    --pill-right-user-color: var(--pill-right-color-default);
}

/*Search*/
body.portfolio-search, html:has(body.portfolio-search) {
    background-color: var(--body-background-color);
}

/*Dialog*/
.ui-dialog .ui-dialog-content:has(.react-component-dialog) {
    background-color: var(--dialog-background-color);
}

/*Table*/
.react-component-table {
    border-collapse: collapse;
    color: var(--font-color);
    font-family: var(--font-family);
    font-size: var(--font-size);
    font-weight: 400;
    line-height: var(--line-height);
    margin: var(--margin);
    width: 100%;
}
.react-component-table thead {
    border-bottom: 2px solid var(--table-border-color);
}
.react-component-table thead tr:hover {
    background-color: transparent;
}
.react-component-table th {
    background: none;
    font-weight: 700;
    padding: 10px;
}
.react-component-table tr {
    background-color: rgba(var(--table-background-color), 0);
    border-bottom: 1px solid var(--table-border-color);
}
.react-component-table tr:nth-child(even) {
    background-color: rgba(var(--table-background-color), 0.2);
}
.react-component-table tr:hover {
    background-color: rgba(var(--table-background-color), 0.4);
}
.react-component-table td {
    padding: 10px;
}
.react-component-table td.no-data {
    text-align: center;
}
dx-pill {
    display: inline-grid;
    margin: 4px 2px;
}
.pill-widget {
    grid-template-rows: repeat(2, 1fr);
    grid-template-columns: repeat(5, min-content);
    justify-items: start;
}
.pill-row {
    display: grid;
    grid-template-rows: auto auto;
    grid-template-columns: repeat(6, min-content);
}