/* ==========================================================================
   1. CONFIGURATION: Root Variables & Fonts
   ========================================================================== */
:root
{ --content-background-color:245,241,237; --content-font-size:14px; --text-color:132,130,130; --highlight-color:255,165,0;
  --input-text-color:132,130,130; --input-background-color:255,255,255;
  --input-highlight-color:242,182,114; --input-radius:5px; --modal-radius:20px;
  --error-color:255,126,109;
  --warning-color:255,181,71;
  --chart-color-1:#8EC6E7; --chart-color-2:#FFB547; --chart-color-3:#60C6A6; --chart-color-4:#9B79D9; --chart-color-5:#FFB8C6;
  --chart-color-6:#FF6F91; --chart-color-7:#F9C2A1; --chart-color-8:#4DB8FF; --chart-color-9:#E5B0A1; --chart-color-10:#D3D6FF;
  --chart-color-11:#F5C6D8; --chart-color-12:#F2A1C4; --chart-color-13:#6F9C4C; --chart-color-14:#F4B8A2; --chart-color-15:#99E1D9;
  --chart-color-16:#D1A6FF; --chart-color-17:#F3A1D1; --chart-color-18:#FF7E6D; --chart-color-19:#FFD36B; --chart-color-20:#FF9C88;
  --font-file:'Roboto-';
}

/* ==========================================================================
   2. BASE & GLOBAL STYLES
   ========================================================================== */
body,html
 { background-color:rgb(var(--content-background-color)); color:rgb(var(--text-color)); font-family:'espace_font';
   -webkit-font-smoothing:antialiased !important; -moz-osx-font-smoothing:grayscale !important; overflow:hidden; width:100%; height:100%; }
body,html,h1,h2,h3,h4,b,i,label,input,textarea,select,option,button,label,
.e-control, .e-css, .e-error { font-family:'espace_font'; }
pre { font-family:'espace_font_mono'; }
svg text { font-family:'espace_font' !important; font-weight:400; }
table th { text-align:left; font-weight:normal; font-size:auto; }
button { font-size:100%; }

/* --- Forms & Inputs --- */
input, textarea, select
{ background:rgb(var(--input-background-color)); color:rgb(var(--input-text-color));
  border:none; border-radius:var(--input-radius); padding:5px; }
input { height:20px; }
input:focus, textarea:focus, .e-control:focus, .e-control *:focus { outline:2px solid rgb(var(--input-highlight-color)); }
input[type=checkbox]
{ appearance:none; -webkit-appearance:none; -moz-appearance:none; display:inline-block; vertical-align:middle;
  width:24px !important; height:24px !important; border-radius:30px !important; border:2px solid rgb(var(--input-background-color)) !important; cursor:pointer; outline:none !important;
  background-repeat:no-repeat !important; background-position:center !important; background-size:60% !important;
}
input[type=color] { cursor:pointer; padding:0; height:30px; border: none; outline: none; box-shadow: none; }
input:disabled, select:disabled { background:none; padding:0; margin:0; width:auto !important; height:auto !important; appearance:none; }

/* --- Buttons --- */
button, .detail, .btn, .btnDashboard
{ color:rgba(var(--text-color),1); cursor:pointer; border:none; border-radius:5px;
  padding:3px; padding-left:10px; padding-right:10px; outline:none;
  background:rgba(var(--button-color),.5);
}
button, .btn, .btnDashboard { border:1px solid rgb(var(--button-color)); }

button:hover, .detail:hover, .btn:hover, .btnDashboard:hover { background:rgb(var(--text-color)); color:rgb(var(--content-background-color)); }
button:focus, .detail:focus, .btn:focus, .btnDashboard:focus { outline:none !important; }

.je-header button { border:transparent; }

/* --- Scrollbar --- */
::-webkit-scrollbar { width:8px; height:8px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background-color:rgba(var(--text-color),0.2); border-radius:4px; }
::-webkit-scrollbar-thumb:hover { background-color:rgba(var(--text-color),0.4); }

/* ==========================================================================
   3. UTILITY & ANIMATION CLASSES
   ========================================================================== */
.jump { animation:jump 0.6s ease-in-out infinite; display:inline-block; }
@keyframes jump { 0%, 100% { transform:translateY(3px); } 50% { transform:translateY(-3px); } }
.swing { animation:swing 0.6s ease-in-out infinite; display:inline-block; }
@keyframes swing { 0%, 100% { transform:rotate(10deg); } 50% { transform:rotate(-10deg); } }
.spin { animation:spin 1s linear infinite; display:inline-block; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

.changes_made { background:rgb(var(--highlight-color)); }
.ai_gradient
{ border:none !important;
  background:linear-gradient(342deg, rgba(131, 58, 180, .5) 0%, rgba(253, 29, 29, .5) 50%, rgba(252, 176, 69, .5) 100%) !important;
}
.btn.ai_gradient:hover { background:linear-gradient(25deg, rgba(131, 58, 180, .75) 0%, rgba(253, 29, 29, .75) 50%, rgba(252, 176, 69, .75) 100%) !important; }

/* ==========================================================================
   4. CORE LAYOUT
   ========================================================================== */
#sideMenu
 { width:200px; position:fixed; top:0; left:0; bottom:0; overflow:auto; padding-top:10px;
   font-size:var(--content-font-size); background:linear-gradient(to right,rgb(var(--content-background-color)) 75%,rgb(var(--menu-background-color)) 100%);
   border-right:1px solid rgb(var(--button-color));
 }
#contentWindow
 { position:fixed; top:0; left:200px; bottom:0; right:0; overflow:auto; font-size:var(--content-font-size);
   background:linear-gradient(to bottom,rgb(var(--content-background-color)),rgba(var(--content-background-color),.7)); padding:15px;
 }

/* ==========================================================================
   5. COMPONENTS
   ========================================================================== */

/* --- Side Menu --- */
#sideMenu { display:flex; flex-direction:column; }
#sideMenu .bottom { margin-top:auto; }
#sideMenu .item
{ padding-top:5px; cursor:pointer; display:inline-block; user-select:none; padding-bottom:5px; border-radius:10px;
  margin:2px; margin-left:5px; margin-right:5px; width:calc(100% - 10px); overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
}
#sideMenu .item:hover { background-color:rgb(var(--text-color)); color:rgb(var(--content-background-color)); }
#sideMenu .ti { font-size:120%; position:relative; top:2px; padding-left:5px; padding-right:5px; }
#sideMenu .item.active { background-color:rgb(var(--text-color)); color:rgb(var(--content-background-color)); cursor:auto; }

#sideMenu .group { vertical-align: middle; display: flex;  }

#sideMenu .group:has(.open) { border-bottom:1px solid rgb(var(--button-color)); box-shadow: 0 5px 5px rgba(var(--button-color),.2); }
#sideMenu .group .detail { position:relative; left:3px; top:5px; vertical-align: middle; padding-right:5px; }
#sideMenu .group .item { margin-left:0; width:calc(100% - 40px); position:relative; left:-5px; }
#sideMenu .item_lvl_0 { margin-left:34px; width:calc(100% - 39px); position:relative; left:-10px; }
#sideMenu .item_lvl_1 { margin-left:38px; width:calc(100% - 43px); position:relative; left:-10px; }

/* --- Dashboard --- */
.dashboard_title { font-size:120%; font-weight:bold; }
.dashboard_title .ti { font-size:200%; line-height:0; position:relative; top:8px; }
.dashboard_content { height:calc(100% - 4px); width:calc(100% - 0px); overflow:none; }
.edit .dashboard_content { border-radius:5px; }
.dashboard_content .btn { height:100%; display:flex; justify-content:center; align-items:center; }
#contentDashboardContainer.edit .dashboard_edit:hover svg path { stroke:rgb(var(--text-color)); }
#contentDashboardContainer.edit .e-panel:hover .dashboard_edit { display:block; }
.dashboard_edit
 { padding:5px; float:right; display:none; position:absolute; top:0; right:12px; cursor:pointer; z-index:1000;
   background:rgb(var(--content-background-color)); border-radius:20px; height:19px; }
.dashboard_edit svg { max-height:20px; max-width:20px; pointer-events:none; }
.dashboard_edit svg path { stroke:rgba(var(--text-color),.5); }
.dashboard_toggle { position:absolute; margin-left:-16px; margin-top:12px; padding:4px; padding-bottom:2px; }
.dashboard_toggle::before { content:'\ea5f'; font-family:'tabler-icons'; font-style:normal; }
.closed .dashboard_toggle::before { content:'\ea61'; opacity:.5; }
.closed .dashboard_content { display:none; }
.dashboard_closed { display:none; padding:7px; padding-top:12px; opacity:.5; font-weight:bold; }
.closed .dashboard_closed { display:block !important; }
.dashboard_content a { text-decoration:none; }
.dashboard_content a i { margin-right:5px; }
.dashboard_content iframe { width:100%; height:100%; border:none; display:block; }
.btnDashboard { background:none; opacity:.5; }
.btnDashboard:hover { opacity:1; }

/* --- Tables --- */
.promptTable { font-family:'espace_font_table'; font-size:85%; overflow-x:auto; overflow-y:hidden; position:relative; display:inline-block; border-radius:10px; margin-bottom:10px; max-height:100%; max-width:100%; border-spacing:0; }
.promptTable table { border-collapse:separate; border-spacing:0; width:auto; }
.promptTable thead .fixed { position:sticky; top:0; background:rgb(var(--content-background-color)); z-index:10; }
.promptTable tr:nth-child(odd) { background:var(--content-background-color); }
.promptTable th, .promptTable td { padding-left:10px; padding-right:10px; padding-top:5px; padding-bottom:5px; text-align:left; border-right:1px solid rgba(var(--text-color),.15); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:200px; line-height:15px !important; }
.promptTable th { background:rgb(var(--content-background-color)) !important; font-weight:bold; border-bottom:1px solid rgba(var(--text-color),.15); }
.promptTable td { border-bottom:1px solid rgba(var(--text-color),.15); }
.promptTable th:last-child, .promptTable td:last-child { border-right:none; }
.promptTable tr:last-child td { border-bottom:none; }
.promptTable .pagination { position:sticky; left:0; height:24px; margin-left:10px; padding-top:6px; }
.promptTable .pagination:empty { display:none; }
.promptTable .pagination .numbers { min-width:130px; text-align:center; display:inline-block; }
.promptTable .pagination button { margin-left:2px; margin-right:2px; cursor:pointer; }
.promptTable .sortable { cursor:pointer; }
.promptTable .sort { cursor:pointer; padding:0; width:20px; margin:0; margin-right:3px; }
.promptTable .filtervalues { opacity:.5; }
.promptTable .title { font-size:100%; font-weight:bold; opacity:.25; padding-bottom:5px; padding-top:5px; }
.promptTable .clickcell { cursor:pointer; }

.promptItem .promptTable { max-height:300px; max-width:none; overflow-y:auto; }

.edit .promptTable tbody { display:none; }
.group-row.hidden { display:none; }
.group-footer.hidden { font-size:0; }
.group-header { cursor:pointer; }
.group-section-toggle { cursor:pointer; }
.group_start_0 td { border-top:2px solid rgba(var(--highlight-color),1); font-weight:bold; }
.group_end_0 td { background:rgba(var(--highlight-color),.15); font-weight:bold; }
.group_end_1 td { border-bottom:2px solid rgba(var(--highlight-color),.5); }
.group_before, .group_after { opacity:.5; }

/* --- Charts & KPIs --- */
.gradient_defs { position:absolute; visibility:hidden; width:0; height:0; }
.chartContainer .chart, .chartContainer .legend { display:inline-block !important; vertical-align:middle; }
.chartContainer .legend { font-size:80%; max-height:200px; overflow:auto; }
.chartContainer .legend td:nth-child(2) { text-align:center; }
.chartContainer .legend .color { background:#444444; width:20px; height:10px; display:inline-block; border-radius:3px; position:relative; top:1px; }
.chartContainer .legend tr:nth-child(1) .color { background:var(--chart-color-1); }
.chartContainer .legend tr:nth-child(2) .color { background:var(--chart-color-2); }
.chartContainer .legend tr:nth-child(3) .color { background:var(--chart-color-3); }
.chartContainer .legend tr:nth-child(4) .color { background:var(--chart-color-4); }
.chartContainer .legend tr:nth-child(5) .color { background:var(--chart-color-5); }
.chartContainer .legend tr:nth-child(6) .color { background:var(--chart-color-6); }
.chartContainer .legend tr:nth-child(7) .color { background:var(--chart-color-7); }
.chartContainer .legend tr:nth-child(8) .color { background:var(--chart-color-8); }
.chartContainer .legend tr:nth-child(9) .color { background:var(--chart-color-9); }
.chartContainer .legend tr:nth-child(10) .color { background:var(--chart-color-10); }
.chartContainer .legend tr:nth-child(11) .color { background:var(--chart-color-11); }
.chartContainer .legend tr:nth-child(12) .color { background:var(--chart-color-12); }
.chartContainer .legend tr:nth-child(13) .color { background:var(--chart-color-13); }
.chartContainer .legend tr:nth-child(14) .color { background:var(--chart-color-14); }
.chartContainer .legend tr:nth-child(15) .color { background:var(--chart-color-15); }
.chartContainer .legend tr:nth-child(16) .color { background:var(--chart-color-16); }
.chartContainer .legend tr:nth-child(17) .color { background:var(--chart-color-17); }
.chartContainer .legend tr:nth-child(18) .color { background:var(--chart-color-18); }
.chartContainer .legend tr:nth-child(19) .color { background:var(--chart-color-19); }
.chartContainer .legend tr:nth-child(20) .color { background:var(--chart-color-20); }
.chartContainer .title { font-size:100%; font-weight:bold; opacity:.25; padding-bottom:5px; padding-top:5px; }
.chartContainer .chartoverlay { position:absolute; z-index:1; pointer-events:none; width:100%; background:rgba(var(--content-background-color),.6); }
.chartContainer .chartoverlay:empty { display:none; }
.kpi_values .kpi { display:inline-block; margin-right:20px; }
.kpi_values .kpi .title { display:block; font-size:100%; }
.kpi_values .kpi .value { font-size:150%; font-weight:bold; }
.kpi_values .kpi small { font-size:50%; }
.kpi_values1 .kpi .value { font-size:250% !important; }
.kpi_values1 .kpi .title { display:none; }
.promptTable .kpi_values td { text-overflow:none; overflow:visible; }
.chartoverlay .kpi_values { text-shadow:0px 0px 2px rgba(var(--content-background-color),1);  }
.chartoverlay .kpi_values .kpi { display:inline-block; text-align:left; }
.chartoverlay .kpi_values .kpi .title { line-height:3px; }
.chartoverlay .kpi_values .kpi .value { font-size:200%; }
.chartDownload { opacity:.5; background:none; } .chartDownload:hover { opacity:1; }

/* --- Filter Component --- */
.filterContent { padding:5px; height:calc(100% - 10px); overflow:auto; } 
.filterContent .title { box-sizing:border-box; margin-bottom:5px; }
.filterContent select { height:30px !important; margin-bottom:3px; }
.filterContent input[type=text] { width:160px; margin-bottom:3px; }
.filterContent .e-multiselect { margin-bottom:3px; }
.filterContent input[type=number] { width:61px; }
.filterContent button { height:30px !important; position:relative; top:-1px; }
.filterContent td:first-child { white-space:nowrap; padding-right:10px; }
.filterContent td:first-child .ti { font-size:140%; position:relative; top:3px; }
.filter_parameter_name { display:inline-block; width:70px; }
.parameter_help { font-size:80%; opacity:.5; margin-left:10px; }

/* --- Data Structure Component --- */
.datastructure_action { border:2px solid rgba(var(--text-color),.1); box-shadow:rgba(var(--text-color),.2) 0px 0px 16px; padding:5px; border-radius:10px; margin-top:20px; }
.datastructure_action_batch { border:2px solid rgba(var(--highlight-color),.2); box-shadow:rgba(var(--highlight-color),.2) 0px 0px 16px; padding:5px; border-radius:10px; margin-top:20px; }
.datastructure_info { border-top:2px solid rgba(var(--highlight-color),.2); padding-top:5px; margin-top:5px; font-family:'espace_font_mono'; font-size:12px; }
.datastructure_info:empty { display:none; }
.datastructure_aiquery { width:calc(50% - 20px); max-width:300px; display:inline-block; margin-right:20px; vertical-align: top; }
.datastructure_aiquery textarea { font-family:'espace_font_mono'; font-size:80%; width:100%; }

/* --- Miscellaneous Components --- */
.detail { margin-bottom:5px; font-size:100%; background:none; }
.detail.closed::before { content:'\ea61'; font-family:'tabler-icons'; font-style:normal; }
.detail.open::before { content:'\ea5f'; font-family:'tabler-icons'; font-style:normal; }
.list_element { max-width:100%; overflow:hidden; border-radius:10px; padding:5px; display:block; cursor:pointer; opacity:.5; }
.list_element:hover { background:rgb(var(--text-color)); color:rgb(var(--content-background-color)); opacity:1; }
.page-textarea { width:100% !important; display:block; border-color:rgba(var(--text-color),0) !important; }
.truncation-icon { cursor:pointer; margin-right:4px; opacity:.2; }
.truncation-icon::before { content:'\ef84'; font-family:'tabler-icons'; }
.truncation-icon:hover { opacity:1; }

/* --- Datasource Pages --- */
#select_datasource .chartContainer .chartoverlay { position:static !important; }
.select_datasource_table { border-collapse:collapse; display:inline-block; margin-left:20px; margin-bottom:20px; }
.select_datasource_table td>div { display:block; height:20px; overflow:hidden; }
.select_datasource_table td { border-radius:10px; padding:5px; }
.select_datasource_table tr { cursor:pointer; padding:10px; }
.select_datasource_table tr:hover { background:rgb(var(--text-color),.2); }
#addsource_sqllog { font-family:monospace; font-size:80%; margin-top:20px; margin-bottom:10px; max-height:200px; overflow:auto; }
#addsource_sqllog .error, #addsource_sqllog_highlight.error { color:rgb(var(--error-color)); }
#addsource_sqllog .warning { color:rgb(var(--warning-color)); }
#addsource_sqllog_highlight.error::before { color:rgb(var(--error-color)); font-family:'tabler-icons'; content:'\f6f0'; }
#addsource_sqllog_highlight { font-size:100%; }
.addsource_detail_item { border:1px solid rgba(var(--input-text-color),.2); margin:10px; padding:10px; border-radius:10px; }
.addsource_detail_item input, .addsource_detail_item select { margin-bottom:3px; }
.addsource_detail_item .addsource_detail_item .addsource_detail_item { border:none; padding:0; margin-right:0; }
.addsource_detail_title { margin:10px; margin-left:0; }
#testQueryOptionsIndicator { display:inline-block; text-align:center; }
#addsource_testai { font-size:120%; }

/* --- AI Prompt Interface --- */
#aiPromptContainer { background:var(--input-background-color); position:fixed; top:0; bottom:0; }
#aiPromptWindow { position:fixed; top:0; width:calc(100% - 240px); min-height:20px; bottom:10px; overflow-y:auto; }
#aiPromptInput { min-height:20px; width:calc(100% - 280px); position:fixed; bottom:10px; right:20px; padding:10px 20px 40px 20px; outline:none;  border-radius:var(--modal-radius) !important; }
#aiPromptInput:empty:before { content:attr(data-placeholder); color:rgba(var(--text-color),.5); font-style:italic; }
#aiPromptMenu { position:fixed; bottom:20px; width:calc(100% - 260px); padding-left:5px; }
#aiPromptMenu .btn, .promptItem .btn { border:1px solid rgba(var(--text-color),.15); color:rgba(var(--text-color),.5); border-radius:20px; padding:2px 8px 4px 8px; margin-left:5px; cursor:pointer; background:none; }
#aiPromptMenu .btn .ti, .promptItem .btn .ti { position:relative; top:1px; padding-right:5px; }
#aiPromptMenu .btn:hover, .promptItem .btn:hover { border-color:rgba(var(--text-color),.5); color:rgba(var(--content-background-color),1); background:rgba(var(--text-color),1); }
#aiPromptI_nput:focus { background:rgba(var(--text-color),.2); }

#aiPromptInput, .aiPromptInput
{ background: rgb(var(--content-background-color)); background-origin: border-box;
  border: 2px solid transparent; background-clip: padding-box, border-box;
  background-image: 
    linear-gradient(rgb(var(--content-background-color)), rgb(var(--content-background-color))),
    linear-gradient(342deg, rgba(131, 58, 180, 0.2) 0%, rgba(253, 29, 29, 0.2) 50%, rgba(252, 176, 69, 0.2) 100%);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 55%, rgba(0, 0, 0, 0) 90%); -webkit-mask-repeat: no-repeat; -webkit-mask-size: 100% 100%;
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 55%, rgba(0, 0, 0, 0) 90%); mask-repeat: no-repeat; mask-size: 100% 100%;
}
.aiPromptInput { border-radius:10px; }
#aiPromptInput:focus, .aiPromptInput:focus
{ background:rgba(var(--button-color), 0.3);
  border: 2px solid rgba(var(--button-color), 0.5);
}
.promptSample
{ max-width:100%; white-space:nowrap; overflow: hidden; text-overflow: ellipsis; }

#btnPromptSend { position:fixed; right:30px; bottom:16px; text-align:center; width:80px; line-height:20px; padding-bottom:1px; background:rgba(var(--text-color),.75); color:white !important; }
#btnPromptSend:hover { background:rgba(var(--text-color),1); }
#btnPromptSend i { display:inline-block; position:relative; top:4px !important; font-size:150%; line-height:12px !important; }
#btnPromptSend:hover i { animation:swing 1s ease-in-out infinite; }
.statement { font-size:80%; opacity:.8; }
.promptItem { margin-top:10px; margin-bottom:10px; display:flex; flex-wrap:wrap; }
.promptItem .time { font-size:80%; opacity:.8; flex-basis: 100%; }
.aiContent { padding:5px; width:100%; height:100%; overflow:auto; }
.aiContent .result
{ user-select:text; margin:5px; padding:5px; border-radius:16px; padding:16px; max-width:600px;
  background:rgb(var(--content-background-color)); background-origin:border-box; border:2px solid transparent; background-clip:padding-box, border-box;
  background-image:linear-gradient(rgb(var(--content-background-color)), rgb(var(--content-background-color))), linear-gradient(342deg,rgba(131, 58, 180, 0.5) 0%,rgba(253, 29, 29, 0.5) 50%,rgba(252, 176, 69, 0.5) 100%);
}

.aiContent .result:empty { display:none; }
.aiContent h1, .aiContent h2, .aiContent h3, .aiContent h4, .aiContent ul { margin:0; }
.aiContent h1 { font-size: 1.3em; } .aiContent h2 { font-size: 1.2em; } .aiContent h3 { font-size: 1.1em; }
.aiContent h4, .aiContent h5, .aiContent h6 { font-size: 1em; }

#addsource_testai { max-height:400px; overflow:auto; font-size:80%; }
#addsource_testai h1, .aiContent h2, #addsource_testai h3, #addsource_testai h4, #addsource_testai ul { margin:0; }
#addsource_testai h1 { font-size: 1.3em; } #addsource_testai h2 { font-size: 1.2em; } #addsource_testai h3 { font-size: 1.1em; }
#addsource_testai h4, #addsource_testai h5, #addsource_testai h6 { font-size: 1em; }

/* --- Dashboard Editor --- */
#edit_dashboard label { display:inline-block; width:120px; }
#add_panel_holder { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 10px; }
#add_panel_holder .add_panel { padding: 20px; }

/* --- Configuration Pages --- */
.configuration_icon_groups { font-size:0; position:relative; }
.configuration_icon_groups:not(:empty)::before { content:'\fe15'; font-family:'tabler-icons'; font-size:100%; margin-left:5px; }

/* --- Modals & Dialogs --- */
#modalDialogBackground, #modalDialogOverlayBackground { background:black; opacity:.3; position:fixed; top:0; left:0; right:0; bottom:0; display:none; }
#modalDialog, #modalDialogOverlay { background:rgb(var(--content-background-color)); position:fixed; width:calc(100% - 40px); max-width:1800px; top:20px; left:20px; bottom:20px; border-radius:10px; display:none; overflow:hidden; left:50%; transform:translateX(-50%); }
#modalDialog .header { height:30px; padding:5px; padding-left:20px; padding-right:20px; }
#modalDialog .content, #modalDialogOverlay .content { overflow:auto; box-sizing:border-box; height:100%; padding:20px; padding-bottom:40px; }
#modalDialogOverlay .iconList .ti { display:inline-block; font-size:200%; width:30px; height:30px; text-align:center; overflow:hidden; cursor:pointer; margin:5px; }
#modalDialogOverlay { display:none; z-index:3000; }
#modalDialog details { font-family:monospace; font-size:80%; }
.simple-dialog-overlay { position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(var(--text-color),.2); display:flex; align-items:center; justify-content:center; z-index:2000; }
.simple-dialog { background:rgb(var(--content-background-color)); border-radius:8px; box-shadow:0 8px 24px rgba(var(--text-color),0.15); max-width:90vw; max-height:80vh; overflow:hidden; display:flex; flex-direction:column; position:relative; }
.simple-dialog-content { padding:16px; margin-top:36px; overflow:auto; white-space:pre-wrap; word-break:break-word; flex-grow:1; border-radius:8px 8px 0 0; background:rgb(var(--content-background-color)); font-family:'espace_font_mono'; font-size:80%; }
.simple-dialog-close { position:absolute; top:8px; right:8px; }

/* --- Login Page --- */
#client_login_user, #client_login_pass { width:200px; }