diff --git a/docs/index.html b/docs/index.html
index 29862f0f..209d8712 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -185,6 +185,8 @@ Error message and password prompt
 
 <li>$:/state/image-picker/system--1059320382</li>
 
+<li>$:/state/Link/-741163119/search</li>
+
 <li>$:/state/plugin-info-1867135918-$:/core</li>
 
 <li>$:/state/plugin-info-2003269606-$:/themes/tiddlywiki/readonly</li>
@@ -245,6 +247,8 @@ Error message and password prompt
 
 <li>Create PPPOE Plan</li>
 
+<li>Dashboard Structure</li>
+
 <li>GettingStarted</li>
 
 <li>Hotspot System</li>
@@ -298,6 +302,7 @@ Error message and password prompt
 {"created":"20240712071434480","creator":"ibnux","title":"$:/state/add-plugin-info/$:/temp/ServerConnection/https://tiddlywiki.com/library/v5.3.5/index.html/$:/temp/RemoteAssetInfo/https://tiddlywiki.com/library/v5.3.5/index.html/$:/themes/tiddlywiki/readonly","text":"yes","modified":"20240712071457586","modifier":"ibnux"},
 {"title":"$:/state/http-requests","text":"0"},
 {"created":"20240712084513995","creator":"ibnux","text":"hide","title":"$:/state/image-picker/system--1059320382","modified":"20240712084516212","modifier":"ibnux"},
+{"created":"20250218074756042","creator":"ibnux","title":"$:/state/Link/-741163119/search","text":"","modified":"20250218074758107","modifier":"ibnux"},
 {"created":"20250211062236312","creator":"ibnux","title":"$:/state/plugin-info-1867135918-$:/core","text":"no","modified":"20250211062237011","modifier":"ibnux"},
 {"created":"20240712071523556","creator":"ibnux","title":"$:/state/plugin-info-2003269606-$:/themes/tiddlywiki/readonly","text":"yes","modified":"20240712071523556","modifier":"ibnux"},
 {"created":"20240712072611765","creator":"ibnux","title":"$:/state/showeditpreview","text":"yes","modified":"20240712080733593","modifier":"ibnux"},
@@ -314,8 +319,8 @@ Error message and password prompt
 {"created":"20240712071211426","creator":"ibnux","title":"$:/state/tabs/controlpanel/toolbars-1345989671","text":"$:/core/ui/ControlPanel/Toolbars/ViewToolbar","modified":"20250211062334510","modifier":"ibnux"},
 {"title":"$:/status/RequireReloadDueToPluginChange","text":"no"},
 {"created":"20240712071004482","creator":"i","title":"$:/status/UserName","text":"ibnux","modified":"20240712071005201","modifier":"ibnu"},
-{"title":"$:/StoryList","created":"20250211062212363","creator":"ibnux","text":"","list":"GettingStarted","modified":"20250211062246950","modifier":"ibnux"},
-{"created":"20240712071159691","creator":"ibnux","title":"$:/theme","text":"$:/themes/tiddlywiki/readonly","modified":"20250211062723787","modifier":"ibnux"},
+{"title":"$:/StoryList","created":"20250218074403778","creator":"ibnux","text":"","list":"$:/ControlPanel GettingStarted [[Dashboard Structure]]","modified":"20250218074435587","modifier":"ibnux"},
+{"created":"20240712071159691","creator":"ibnux","title":"$:/theme","text":"$:/themes/tiddlywiki/snowwhite","modified":"20250218074405827","modifier":"ibnux"},
 {"title":"$:/themes/tiddlywiki/readonly","name":"ReadOnly","author":"JeremyRuston","core-version":">=5.0.0","plugin-type":"theme","description":"Hides the ability to edit tiddlers","dependents":"$:/themes/tiddlywiki/snowwhite","version":"5.3.5","type":"application/json","text":"{\"tiddlers\":{\"$:/themes/tiddlywiki/readonly/styles.tid\":{\"title\":\"$:/themes/tiddlywiki/readonly/styles.tid\",\"tags\":\"[[$:/tags/Stylesheet]]\",\"text\":\"\\\\define button-selector(title)\\nbutton.$title$, .tc-drop-down button.$title$, div.$title$\\n\\\\end\\n\\n\\\\rules only filteredtranscludeinline transcludeinline macrodef macrocallinline\\n\\n\u003C\u003Cbutton-selector tc-btn-\\\\%24\\\\%3A\\\\%2Fcore\\\\%2Fui\\\\%2FButtons\\\\%2Fclone>>,\\n\u003C\u003Cbutton-selector tc-btn-\\\\%24\\\\%3A\\\\%2Fcore\\\\%2Fui\\\\%2FButtons\\\\%2Fdelete>>,\\n\u003C\u003Cbutton-selector tc-btn-\\\\%24\\\\%3A\\\\%2Fcore\\\\%2Fui\\\\%2FButtons\\\\%2Fedit>>,\\n\u003C\u003Cbutton-selector tc-btn-\\\\%24\\\\%3A\\\\%2Fcore\\\\%2Fui\\\\%2FButtons\\\\%2Fnew-here>>,\\n\u003C\u003Cbutton-selector tc-btn-\\\\%24\\\\%3A\\\\%2Fcore\\\\%2Fui\\\\%2FButtons\\\\%2Fnew-journal-here>>,\\n\u003C\u003Cbutton-selector tc-btn-\\\\%24\\\\%3A\\\\%2Fcore\\\\%2Fui\\\\%2FButtons\\\\%2Fimport>>,\\n\u003C\u003Cbutton-selector tc-btn-\\\\%24\\\\%3A\\\\%2Fcore\\\\%2Fui\\\\%2FButtons\\\\%2Fmanager>>,\\n\u003C\u003Cbutton-selector tc-btn-\\\\%24\\\\%3A\\\\%2Fcore\\\\%2Fui\\\\%2FButtons\\\\%2Fnew-image>>,\\n\u003C\u003Cbutton-selector tc-btn-\\\\%24\\\\%3A\\\\%2Fcore\\\\%2Fui\\\\%2FButtons\\\\%2Fnew-journal>>,\\n\u003C\u003Cbutton-selector tc-btn-\\\\%24\\\\%3A\\\\%2Fcore\\\\%2Fui\\\\%2FButtons\\\\%2Fnew-tiddler>> {\\n\\tdisplay: none;\\n}\"}}}"},
 {"title":"$:/themes/tiddlywiki/snowwhite","name":"Snow White","author":"JeremyRuston","core-version":">=5.0.0","plugin-type":"theme","description":"Emphasises individual tiddlers","dependents":"$:/themes/tiddlywiki/vanilla","plugin-priority":"0","version":"5.3.5","type":"application/json","text":"{\"tiddlers\":{\"$:/themes/tiddlywiki/snowwhite/base\":{\"title\":\"$:/themes/tiddlywiki/snowwhite/base\",\"tags\":\"[[$:/tags/Stylesheet]]\",\"text\":\"\\\\define sidebarbreakpoint-minus-one()\\n\u003C$text text={{{ [{$:/themes/tiddlywiki/vanilla/metrics/sidebarbreakpoint}removesuffix[px]subtract[1]addsuffix[px]] ~[{$:/themes/tiddlywiki/vanilla/metrics/sidebarbreakpoint}] }}}/>\\n\\\\end\\n\\n\\\\rules only filteredtranscludeinline transcludeinline macrodef macrocallinline\\n\\n.tc-sidebar-header {\\n\\ttext-shadow: 0 1px 0 \u003C\u003Ccolour sidebar-foreground-shadow>>;\\n}\\n\\n.tc-tiddler-info {\\n\\t\u003C\u003Cbox-shadow \\\"inset 1px 2px 3px rgba(0,0,0,0.1)\\\">>\\n}\\n\\n@media screen {\\n\\t.tc-tiddler-frame {\\n\\t\\t\u003C\u003Cbox-shadow \\\"1px 1px 5px rgba(0, 0, 0, 0.3)\\\">>\\n\\t}\\n}\\n\\n@media (max-width: \u003C\u003Csidebarbreakpoint-minus-one>>) {\\n\\t.tc-tiddler-frame {\\n\\t\\t\u003C\u003Cbox-shadow none>>\\n\\t}\\n}\\n\\n.tc-page-controls button svg, .tc-tiddler-controls button svg, .tc-topbar button svg {\\n\\t\u003C\u003Ctransition \\\"fill 150ms ease-in-out\\\">>\\n}\\n\\n.tc-tiddler-controls button.tc-selected,\\n.tc-page-controls button.tc-selected {\\n\\t\u003C\u003Cfilter \\\"drop-shadow(0px -1px 2px rgba(0,0,0,0.25))\\\">>\\n}\\n\\n.tc-tiddler-frame input.tc-edit-texteditor,\\n.tc-tiddler-frame select.tc-edit-texteditor {\\n\\t\u003C\u003Cbox-shadow \\\"inset 0 1px 8px rgba(0, 0, 0, 0.15)\\\">>\\n}\\n\\n.tc-edit-tags {\\n\\t\u003C\u003Cbox-shadow \\\"inset 0 1px 8px rgba(0, 0, 0, 0.15)\\\">>\\n}\\n\\n.tc-tiddler-frame .tc-edit-tags input.tc-edit-texteditor {\\n\\t\u003C\u003Cbox-shadow \\\"none\\\">>\\n\\tborder: none;\\n\\toutline: none;\\n}\\n\\ntextarea.tc-edit-texteditor {\\n\\tfont-family: {{$:/themes/tiddlywiki/vanilla/settings/editorfontfamily}};\\n}\\n\\ncanvas.tc-edit-bitmapeditor  {\\n\\t\u003C\u003Cbox-shadow \\\"2px 2px 5px rgba(0, 0, 0, 0.5)\\\">>\\n}\\n\\n.tc-drop-down {\\n\\tborder-radius: 4px;\\n\\t\u003C\u003Cbox-shadow \\\"2px 2px 10px rgba(0, 0, 0, 0.5)\\\">>\\n}\\n\\n.tc-block-dropdown {\\n\\tborder-radius: 4px;\\n\\t\u003C\u003Cbox-shadow \\\"2px 2px 10px rgba(0, 0, 0, 0.5)\\\">>\\n}\\n\\n.tc-modal {\\n\\tborder-radius: 6px;\\n\\t\u003C\u003Cbox-shadow \\\"0 3px 7px rgba(0,0,0,0.3)\\\">>\\n}\\n\\n.tc-modal-footer {\\n\\tborder-radius: 0 0 6px 6px;\\n\\t\u003C\u003Cbox-shadow \\\"inset 0 1px 0 #fff\\\">>;\\n}\\n\\n\\n.tc-alert {\\n\\tborder-radius: 6px;\\n\\t\u003C\u003Cbox-shadow \\\"0 3px 7px rgba(0,0,0,0.6)\\\">>\\n}\\n\\n.tc-notification {\\n\\tborder-radius: 6px;\\n\\t\u003C\u003Cbox-shadow \\\"0 3px 7px rgba(0,0,0,0.3)\\\">>\\n\\ttext-shadow: 0 1px 0 rgba(255,255,255, 0.8);\\n}\\n\\n.tc-sidebar-lists .tc-tab-set .tc-tab-divider {\\n\\tborder-top: none;\\n\\theight: 1px;\\n\\t\u003C\u003Cbackground-linear-gradient \\\"left, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.0) 100%\\\">>\\n}\\n\\n.tc-more-sidebar > .tc-tab-set > .tc-tab-buttons > button {\\n\\t\u003C\u003Cbackground-linear-gradient \\\"left, rgba(0,0,0,0.01) 0%, rgba(0,0,0,0.1) 100%\\\">>\\n}\\n\\n.tc-more-sidebar > .tc-tab-set > .tc-tab-buttons > button.tc-tab-selected {\\n\\t\u003C\u003Cbackground-linear-gradient \\\"left, rgba(0,0,0,0.05) 0%, rgba(255,255,255,0.05) 100%\\\">>\\n}\\n\\n.tc-message-box img {\\n\\t\u003C\u003Cbox-shadow \\\"1px 1px 3px rgba(0,0,0,0.5)\\\">>\\n}\\n\\n.tc-plugin-info {\\n\\t\u003C\u003Cbox-shadow \\\"1px 1px 3px rgba(0,0,0,0.5)\\\">>\\n}\\n\"}}}"},
 {"title":"$:/themes/tiddlywiki/vanilla","name":"Vanilla","author":"JeremyRuston","core-version":">=5.0.0","plugin-type":"theme","description":"Basic theme","plugin-priority":"0","version":"5.3.5","dependents":"","type":"application/json","text":"{\"tiddlers\":{\"$:/themes/tiddlywiki/vanilla/themetweaks\":{\"title\":\"$:/themes/tiddlywiki/vanilla/themetweaks\",\"tags\":\"$:/tags/ControlPanel/Appearance\",\"caption\":\"{{$:/language/ThemeTweaks/ThemeTweaks}}\",\"text\":\"\\\\define lingo-base() $:/language/ThemeTweaks/\\n\\n\\\\define replacement-text()\\n[img[$(imageTitle)$]]\\n\\\\end\\n\\n\\\\define backgroundimage-dropdown()\\n\u003Cdiv class=\\\"tc-drop-down-wrapper\\\">\\n\u003C$set name=\\\"state\\\" value=\u003C\u003Cqualify \\\"$:/state/popup/themetweaks/backgroundimage\\\">>>\\n\u003C$button popup=\u003C\u003Cstate>> class=\\\"tc-btn-invisible tc-btn-dropdown\\\">{{$:/core/images/down-arrow}}\u003C/$button>\\n\u003C$reveal state=\u003C\u003Cstate>> type=\\\"popup\\\" position=\\\"belowleft\\\" text=\\\"\\\" default=\\\"\\\" class=\\\"tc-popup-keep\\\">\\n\u003Cdiv class=\\\"tc-drop-down\\\" style=\\\"text-align:center;\\\">\\n\u003C$macrocall $name=\\\"image-picker\\\" actions=\\\"\\\"\\\"\\n\\n\u003C$action-setfield\\n\\t$tiddler=\\\"$:/themes/tiddlywiki/vanilla/settings/backgroundimage\\\"\\n\\t$value=\u003C\u003CimageTitle>>\\n/>\\n\\n\u003C$action-deletetiddler $tiddler=\u003C\u003Cstate>>/>\\n\\n\\\"\\\"\\\"/>\\n\u003C/div>\\n\u003C/$reveal>\\n\u003C/$set>\\n\u003C/div>\\n\\\\end\\n\\n\\\\define backgroundimageattachment-dropdown()\\n\u003C$select tiddler=\\\"$:/themes/tiddlywiki/vanilla/settings/backgroundimageattachment\\\" default=\\\"scroll\\\">\\n\u003Coption value=\\\"scroll\\\">\u003C\u003Clingo Settings/BackgroundImageAttachment/Scroll>>\u003C/option>\\n\u003Coption value=\\\"fixed\\\">\u003C\u003Clingo Settings/BackgroundImageAttachment/Fixed>>\u003C/option>\\n\u003C/$select>\\n\\\\end\\n\\n\\\\define backgroundimagesize-dropdown()\\n\u003C$select tiddler=\\\"$:/themes/tiddlywiki/vanilla/settings/backgroundimagesize\\\" default=\\\"scroll\\\">\\n\u003Coption value=\\\"auto\\\">\u003C\u003Clingo Settings/BackgroundImageSize/Auto>>\u003C/option>\\n\u003Coption value=\\\"cover\\\">\u003C\u003Clingo Settings/BackgroundImageSize/Cover>>\u003C/option>\\n\u003Coption value=\\\"contain\\\">\u003C\u003Clingo Settings/BackgroundImageSize/Contain>>\u003C/option>\\n\u003C/$select>\\n\\\\end\\n\\n\u003C\u003Clingo ThemeTweaks/Hint>>\\n\\n! \u003C\u003Clingo Options>>\\n\\n|\u003C$link to=\\\"$:/themes/tiddlywiki/vanilla/options/sidebarlayout\\\">\u003C\u003Clingo Options/SidebarLayout>>\u003C/$link> |\u003C$select tiddler=\\\"$:/themes/tiddlywiki/vanilla/options/sidebarlayout\\\">\u003Coption value=\\\"fixed-fluid\\\">\u003C\u003Clingo Options/SidebarLayout/Fixed-Fluid>>\u003C/option>\u003Coption value=\\\"fluid-fixed\\\">\u003C\u003Clingo Options/SidebarLayout/Fluid-Fixed>>\u003C/option>\u003C/$select> |\\n|\u003C$link to=\\\"$:/themes/tiddlywiki/vanilla/options/stickytitles\\\">\u003C\u003Clingo Options/StickyTitles>>\u003C/$link>\u003Cbr>//\u003C\u003Clingo Options/StickyTitles/Hint>>// |\u003C$select tiddler=\\\"$:/themes/tiddlywiki/vanilla/options/stickytitles\\\">\u003Coption value=\\\"no\\\">{{$:/language/No}}\u003C/option>\u003Coption value=\\\"yes\\\">{{$:/language/Yes}}\u003C/option>\u003C/$select> |\\n|\u003C$link to=\\\"$:/themes/tiddlywiki/vanilla/options/codewrapping\\\">\u003C\u003Clingo Options/CodeWrapping>>\u003C/$link> |\u003C$select tiddler=\\\"$:/themes/tiddlywiki/vanilla/options/codewrapping\\\">\u003Coption value=\\\"pre\\\">{{$:/language/No}}\u003C/option>\u003Coption value=\\\"pre-wrap\\\">{{$:/language/Yes}}\u003C/option>\u003C/$select> |\\n\\n! \u003C\u003Clingo Settings>>\\n\\n|\u003C$link to=\\\"$:/themes/tiddlywiki/vanilla/settings/fontfamily\\\">\u003C\u003Clingo Settings/FontFamily>>\u003C/$link> |\u003C$edit-text tiddler=\\\"$:/themes/tiddlywiki/vanilla/settings/fontfamily\\\" default=\\\"\\\" tag=\\\"input\\\"/> | |\\n|\u003C$link to=\\\"$:/themes/tiddlywiki/vanilla/settings/codefontfamily\\\">\u003C\u003Clingo Settings/CodeFontFamily>>\u003C/$link> |\u003C$edit-text tiddler=\\\"$:/themes/tiddlywiki/vanilla/settings/codefontfamily\\\" default=\\\"\\\" tag=\\\"input\\\"/> | |\\n|\u003C$link to=\\\"$:/themes/tiddlywiki/vanilla/settings/editorfontfamily\\\">\u003C\u003Clingo Settings/EditorFontFamily>>\u003C/$link> |\u003C$edit-text tiddler=\\\"$:/themes/tiddlywiki/vanilla/settings/editorfontfamily\\\" default=\\\"\\\" tag=\\\"input\\\"/> | |\\n|\u003C$link to=\\\"$:/themes/tiddlywiki/vanilla/settings/backgroundimage\\\">\u003C\u003Clingo Settings/BackgroundImage>>\u003C/$link> |\u003C$edit-text tiddler=\\\"$:/themes/tiddlywiki/vanilla/settings/backgroundimage\\\" default=\\\"\\\" tag=\\\"input\\\"/> |\u003C\u003Cbackgroundimage-dropdown>> |\\n|\u003C$link to=\\\"$:/themes/tiddlywiki/vanilla/settings/backgroundimageattachment\\\">\u003C\u003Clingo Settings/BackgroundImageAttachment>>\u003C/$link> |\u003C\u003Cbackgroundimageattachment-dropdown>> | |\\n|\u003C$link to=\\\"$:/themes/tiddlywiki/vanilla/settings/backgroundimagesize\\\">\u003C\u003Clingo Settings/BackgroundImageSize>>\u003C/$link> |\u003C\u003Cbackgroundimagesize-dropdown>> | |\\n\\n! \u003C\u003Clingo Metrics>>\\n\\n|\u003C$link to=\\\"$:/themes/tiddlywiki/vanilla/metrics/fontsize\\\">\u003C\u003Clingo Metrics/FontSize>>\u003C/$link> |\u003C$edit-text tiddler=\\\"$:/themes/tiddlywiki/vanilla/metrics/fontsize\\\" default=\\\"\\\" tag=\\\"input\\\"/> |\\n|\u003C$link to=\\\"$:/themes/tiddlywiki/vanilla/metrics/lineheight\\\">\u003C\u003Clingo Metrics/LineHeight>>\u003C/$link> |\u003C$edit-text tiddler=\\\"$:/themes/tiddlywiki/vanilla/metrics/lineheight\\\" default=\\\"\\\" tag=\\\"input\\\"/> |\\n|\u003C$link to=\\\"$:/themes/tiddlywiki/vanilla/metrics/bodyfontsize\\\">\u003C\u003Clingo Metrics/BodyFontSize>>\u003C/$link> |\u003C$edit-text tiddler=\\\"$:/themes/tiddlywiki/vanilla/metrics/bodyfontsize\\\" default=\\\"\\\" tag=\\\"input\\\"/> |\\n|\u003C$link to=\\\"$:/themes/tiddlywiki/vanilla/metrics/bodylineheight\\\">\u003C\u003Clingo Metrics/BodyLineHeight>>\u003C/$link> |\u003C$edit-text tiddler=\\\"$:/themes/tiddlywiki/vanilla/metrics/bodylineheight\\\" default=\\\"\\\" tag=\\\"input\\\"/> |\\n|\u003C$link to=\\\"$:/themes/tiddlywiki/vanilla/metrics/storyleft\\\">\u003C\u003Clingo Metrics/StoryLeft>>\u003C/$link>\u003Cbr>//\u003C\u003Clingo Metrics/StoryLeft/Hint>>// |^\u003C$edit-text tiddler=\\\"$:/themes/tiddlywiki/vanilla/metrics/storyleft\\\" default=\\\"\\\" tag=\\\"input\\\"/> |\\n|\u003C$link to=\\\"$:/themes/tiddlywiki/vanilla/metrics/storytop\\\">\u003C\u003Clingo Metrics/StoryTop>>\u003C/$link>\u003Cbr>//\u003C\u003Clingo Metrics/StoryTop/Hint>>// |^\u003C$edit-text tiddler=\\\"$:/themes/tiddlywiki/vanilla/metrics/storytop\\\" default=\\\"\\\" tag=\\\"input\\\"/> |\\n|\u003C$link to=\\\"$:/themes/tiddlywiki/vanilla/metrics/storyright\\\">\u003C\u003Clingo Metrics/StoryRight>>\u003C/$link>\u003Cbr>//\u003C\u003Clingo Metrics/StoryRight/Hint>>// |^\u003C$edit-text tiddler=\\\"$:/themes/tiddlywiki/vanilla/metrics/storyright\\\" default=\\\"\\\" tag=\\\"input\\\"/> |\\n|\u003C$link to=\\\"$:/themes/tiddlywiki/vanilla/metrics/storywidth\\\">\u003C\u003Clingo Metrics/StoryWidth>>\u003C/$link>\u003Cbr>//\u003C\u003Clingo Metrics/StoryWidth/Hint>>// |^\u003C$edit-text tiddler=\\\"$:/themes/tiddlywiki/vanilla/metrics/storywidth\\\" default=\\\"\\\" tag=\\\"input\\\"/> |\\n|\u003C$link to=\\\"$:/themes/tiddlywiki/vanilla/metrics/tiddlerwidth\\\">\u003C\u003Clingo Metrics/TiddlerWidth>>\u003C/$link>\u003Cbr>//\u003C\u003Clingo Metrics/TiddlerWidth/Hint>>//\u003Cbr> |^\u003C$edit-text tiddler=\\\"$:/themes/tiddlywiki/vanilla/metrics/tiddlerwidth\\\" default=\\\"\\\" tag=\\\"input\\\"/> |\\n|\u003C$link to=\\\"$:/themes/tiddlywiki/vanilla/metrics/sidebarbreakpoint\\\">\u003C\u003Clingo Metrics/SidebarBreakpoint>>\u003C/$link>\u003Cbr>//\u003C\u003Clingo Metrics/SidebarBreakpoint/Hint>>// |^\u003C$edit-text tiddler=\\\"$:/themes/tiddlywiki/vanilla/metrics/sidebarbreakpoint\\\" default=\\\"\\\" tag=\\\"input\\\"/> |\\n|\u003C$link to=\\\"$:/themes/tiddlywiki/vanilla/metrics/sidebarwidth\\\">\u003C\u003Clingo Metrics/SidebarWidth>>\u003C/$link>\u003Cbr>//\u003C\u003Clingo Metrics/SidebarWidth/Hint>>// |^\u003C$edit-text tiddler=\\\"$:/themes/tiddlywiki/vanilla/metrics/sidebarwidth\\\" default=\\\"\\\" tag=\\\"input\\\"/> |\\n\"},\"$:/themes/tiddlywiki/vanilla/base\":{\"title\":\"$:/themes/tiddlywiki/vanilla/base\",\"tags\":\"[[$:/tags/Stylesheet]]\",\"list-before\":\"\",\"code-body\":\"yes\",\"text\":\"\\\\define custom-background-datauri()\\n\u003C$set name=\\\"background\\\" value={{$:/themes/tiddlywiki/vanilla/settings/backgroundimage}}>\\n\u003C$list filter=\\\"[\u003Cbackground>is[image]]\\\">\\n`background: url(`\\n\u003C$list filter=\\\"[\u003Cbackground>!has[_canonical_uri]]\\\">\\n`\\\"`\u003C$macrocall $name=\\\"datauri\\\" title={{$:/themes/tiddlywiki/vanilla/settings/backgroundimage}}/>`\\\"`\\n\u003C/$list>\\n\u003C$list filter=\\\"[\u003Cbackground>has[_canonical_uri]]\\\">\\n`\\\"`\u003C$view tiddler={{$:/themes/tiddlywiki/vanilla/settings/backgroundimage}} field=\\\"_canonical_uri\\\"/>`\\\"`\\n\u003C/$list>\\n`) center center;`\\n`background-attachment: `{{$:/themes/tiddlywiki/vanilla/settings/backgroundimageattachment}}`;\\n-webkit-background-size:` {{$:/themes/tiddlywiki/vanilla/settings/backgroundimagesize}}`;\\n-moz-background-size:` {{$:/themes/tiddlywiki/vanilla/settings/backgroundimagesize}}`;\\n-o-background-size:` {{$:/themes/tiddlywiki/vanilla/settings/backgroundimagesize}}`;\\nbackground-size:` {{$:/themes/tiddlywiki/vanilla/settings/backgroundimagesize}}`;`\\n\u003C/$list>\\n\u003C/$set>\\n\\\\end\\n\\n\\\\define sidebarbreakpoint()\\n\u003C$text text={{$:/themes/tiddlywiki/vanilla/metrics/sidebarbreakpoint}}/>\\n\\\\end\\n\\n\\\\define sidebarbreakpoint-minus-one()\\n\u003C$text text={{{ [{$:/themes/tiddlywiki/vanilla/metrics/sidebarbreakpoint}removesuffix[px]subtract[1]addsuffix[px]] ~[{$:/themes/tiddlywiki/vanilla/metrics/sidebarbreakpoint}] }}}/>\\n\\\\end\\n\\n\\\\define if-fluid-fixed(text,hiddenSidebarText)\\n\u003C$reveal state=\\\"$:/themes/tiddlywiki/vanilla/options/sidebarlayout\\\" type=\\\"match\\\" text=\\\"fluid-fixed\\\">\\n$text$\\n\u003C$reveal state=\\\"$:/state/sidebar\\\" type=\\\"nomatch\\\" text=\\\"yes\\\" default=\\\"yes\\\">\\n$hiddenSidebarText$\\n\u003C/$reveal>\\n\u003C/$reveal>\\n\\\\end\\n\\n\\\\define if-editor-height-fixed(then,else)\\n\u003C$reveal state=\\\"$:/config/TextEditor/EditorHeight/Mode\\\" type=\\\"match\\\" text=\\\"fixed\\\">\\n$then$\\n\u003C/$reveal>\\n\u003C$reveal state=\\\"$:/config/TextEditor/EditorHeight/Mode\\\" type=\\\"match\\\" text=\\\"auto\\\">\\n$else$\\n\u003C/$reveal>\\n\\\\end\\n\\n\\\\define set-type-selector-min-width()\\n\u003C$set name=\\\"typeLength\\\" value={{{ [all[shadows+tiddlers]prefix[$:/language/Docs/Types/]get[name]length[]maxall[]] }}}>\\n\\n\\t.tc-type-selector-dropdown-wrapper {\\n\\t\\tmin-width: calc(\u003C\u003CtypeLength>>ch + 4em);\\n\\t}\\n\\n\\t.tc-type-selector-dropdown-wrapper input.tc-edit-typeeditor {\\n\\t\\tmin-width: \u003C\u003CtypeLength>>ch;\\n\\t}\\n\\n\u003C/$set>\\n\\\\end\\n\\n\\\\rules only filteredtranscludeinline transcludeinline macrodef macrocallinline macrocallblock\\n\\n/*\\n** Start with the normalize CSS reset, and then belay some of its effects\\n*/\\n\\n{{$:/themes/tiddlywiki/vanilla/reset}}\\n\\n*, input[type=\\\"search\\\"] {\\n\\tbox-sizing: border-box;\\n\\t-moz-box-sizing: border-box;\\n\\t-webkit-box-sizing: border-box;\\n}\\n\\n/*\\n** Button default styles. Makes them look consistent for all browsers\\n*/\\nhtml button {\\n\\tline-height: 1.2;\\n\\tcolor: \u003C\u003Ccolour button-foreground>>;\\n\\tfill: \u003C\u003Ccolour button-foreground>>;\\n\\tbackground: \u003C\u003Ccolour button-background>>;\\n\\tborder-color: \u003C\u003Ccolour button-border>>;\\n}\\n\\nbutton:disabled svg {\\n\\tfill: \u003C\u003Ccolour muted-foreground>>;\\n}\\n\\n/*\\n** Basic element styles\\n*/\\n\\nhtml, body {\\n\\tfont-family: {{$:/themes/tiddlywiki/vanilla/settings/fontfamily}};\\n\\ttext-rendering: optimizeLegibility; /* Enables kerning and ligatures etc. */\\n\\t-webkit-font-smoothing: antialiased;\\n\\t-moz-osx-font-smoothing: grayscale;\\n}\\n\\nhtml:-webkit-full-screen {\\n\\tbackground-color: \u003C\u003Ccolour page-background>>;\\n}\\n\\nbody.tc-body {\\n\\tfont-size: {{$:/themes/tiddlywiki/vanilla/metrics/fontsize}};\\n\\tline-height: {{$:/themes/tiddlywiki/vanilla/metrics/lineheight}};\\n\\tword-wrap: break-word;\\n\\t\u003C\u003Ccustom-background-datauri>>\\n\\tcolor: \u003C\u003Ccolour foreground>>;\\n\\tbackground-color: \u003C\u003Ccolour page-background>>;\\n\\tfill: \u003C\u003Ccolour foreground>>;\\n}\\n\\n\u003C\u003Cif-background-attachment \\\"\\\"\\\"\\n\\nbody.tc-body {\\n\\tbackground-color: transparent;\\n}\\n\\n\\\"\\\"\\\">>\\n\\n/**\\n * Correct the font size and margin on `h1` elements within `section` and\\n * `article` contexts in Chrome, Firefox, and Safari.\\n */\\n\\nh1 {\\n\\tfont-size: 2em;\\n}\\n\\nh1, h2, h3, h4, h5, h6 {\\n\\tline-height: 1.2;\\n\\tfont-weight: normal;\\n}\\n\\npre {\\n\\tdisplay: block;\\n\\tmargin-top: 1em;\\n\\tmargin-bottom: 1em;\\n\\tword-break: normal;\\n\\tword-wrap: break-word;\\n\\twhite-space: {{$:/themes/tiddlywiki/vanilla/options/codewrapping}};\\n\\tbackground-color: \u003C\u003Ccolour pre-background>>;\\n\\tborder: 1px solid \u003C\u003Ccolour pre-border>>;\\n\\tpadding: 0 3px 2px;\\n\\tborder-radius: 3px;\\n\\tfont-family: {{$:/themes/tiddlywiki/vanilla/settings/codefontfamily}};\\n}\\n\\ncode {\\n\\tcolor: \u003C\u003Ccolour code-foreground>>;\\n\\tbackground-color: \u003C\u003Ccolour code-background>>;\\n\\tborder: 1px solid \u003C\u003Ccolour code-border>>;\\n\\twhite-space: {{$:/themes/tiddlywiki/vanilla/options/codewrapping}};\\n\\tpadding: 0 3px 2px;\\n\\tborder-radius: 3px;\\n\\tfont-family: {{$:/themes/tiddlywiki/vanilla/settings/codefontfamily}};\\n}\\n\\nblockquote {\\n\\tborder-left: 5px solid \u003C\u003Ccolour blockquote-bar>>;\\n\\tmargin-left: 25px;\\n\\tpadding-left: 10px;\\n\\tquotes: \\\"\\\\201C\\\"\\\"\\\\201D\\\"\\\"\\\\2018\\\"\\\"\\\\2019\\\";\\n}\\n\\nblockquote > div {\\n\\tmargin-top: 1em;\\n\\tmargin-bottom: 1em;\\n}\\n\\nblockquote.tc-big-quote {\\n\\tfont-family: Georgia, serif;\\n\\tposition: relative;\\n\\tbackground: \u003C\u003Ccolour pre-background>>;\\n\\tborder-left: none;\\n\\tmargin-left: 50px;\\n\\tmargin-right: 50px;\\n\\tpadding: 10px;\\n\\tborder-radius: 8px;\\n}\\n\\nblockquote.tc-big-quote cite:before {\\n\\tcontent: \\\"\\\\2014 \\\\2009\\\";\\n}\\n\\nblockquote.tc-big-quote:before {\\n\\tfont-family: Georgia, serif;\\n\\tcolor: \u003C\u003Ccolour blockquote-bar>>;\\n\\tcontent: open-quote;\\n\\tfont-size: 8em;\\n\\tline-height: 0.1em;\\n\\tmargin-right: 0.25em;\\n\\tvertical-align: -0.4em;\\n\\tposition: absolute;\\n\\tleft: -50px;\\n\\ttop: 42px;\\n}\\n\\nblockquote.tc-big-quote:after {\\n\\tfont-family: Georgia, serif;\\n\\tcolor: \u003C\u003Ccolour blockquote-bar>>;\\n\\tcontent: close-quote;\\n\\tfont-size: 8em;\\n\\tline-height: 0.1em;\\n\\tmargin-right: 0.25em;\\n\\tvertical-align: -0.4em;\\n\\tposition: absolute;\\n\\tright: -80px;\\n\\tbottom: -20px;\\n}\\n\\ndl dt {\\n\\tfont-weight: bold;\\n\\tmargin-top: 6px;\\n}\\n\\ntextarea,\\ninput[type=text],\\ninput[type=search],\\ninput[type=\\\"\\\"],\\ninput:not([type]) {\\n\\tcolor: \u003C\u003Ccolour foreground>>;\\n\\tbackground: \u003C\u003Ccolour background>>;\\n}\\n\\ninput[type=\\\"checkbox\\\"] {\\n\\tvertical-align: middle;\\n}\\n\\ninput[type=\\\"search\\\"]::-webkit-search-decoration,\\ninput[type=\\\"search\\\"]::-webkit-search-cancel-button,\\ninput[type=\\\"search\\\"]::-webkit-search-results-button,\\ninput[type=\\\"search\\\"]::-webkit-search-results-decoration {\\n\\t-webkit-appearance:none;\\n}\\n\\n.tc-muted {\\n\\tcolor: \u003C\u003Ccolour muted-foreground>>;\\n}\\n\\nsvg.tc-image-button {\\n\\tpadding: 0px 1px 1px 0px;\\n}\\n\\n.tc-icon-wrapper > svg {\\n\\twidth: 1em;\\n\\theight: 1em;\\n}\\n\\nkbd {\\n\\tdisplay: inline-block;\\n\\tpadding: 3px 5px;\\n\\tfont-size: 0.8em;\\n\\tline-height: 1.2;\\n\\tcolor: \u003C\u003Ccolour foreground>>;\\n\\tvertical-align: middle;\\n\\tbackground-color: \u003C\u003Ccolour background>>;\\n\\tborder: solid 1px \u003C\u003Ccolour muted-foreground>>;\\n\\tborder-bottom-color: \u003C\u003Ccolour muted-foreground>>;\\n\\tborder-radius: 3px;\\n\\tbox-shadow: inset 0 -1px 0 \u003C\u003Ccolour muted-foreground>>;\\n}\\n\\n::selection {\\n\\tbackground-color: Highlight;\\n\\tcolor: HighlightText;\\n\\tbackground-color: \u003C\u003Ccolour selection-background>>;\\n\\tcolor: \u003C\u003Ccolour selection-foreground>>;\\n}\\n\\n.tc-inline-style {\\n\\tbackground: \u003C\u003Ccolour highlight-background>>;\\n\\tcolor: \u003C\u003Ccolour highlight-foreground>>;\\n}\\n\\nform.tc-form-inline {\\n\\tdisplay: inline;\\n}\\n\\n/*\\nMarkdown likes putting code elements inside pre elements\\n*/\\npre > code {\\n\\tpadding: 0;\\n\\tborder: none;\\n\\tbackground-color: inherit;\\n\\tcolor: inherit;\\n}\\n\\n/*\\nTable defaults\\n*/\\n\\ntable {\\n\\tborder: 1px solid \u003C\u003Ccolour table-border>>;\\n\\twidth: auto;\\n\\tmax-width: 100%;\\n\\tcaption-side: bottom;\\n\\tmargin-top: 1em;\\n\\tmargin-bottom: 1em;\\n\\t/* next 2 elements needed, since normalize 8.0.1 */\\n\\tborder-collapse: collapse;\\n\\tborder-spacing: 0;\\n}\\n\\ntable th, table td {\\n\\tpadding: 0 7px 0 7px;\\n\\tborder-top: 1px solid \u003C\u003Ccolour table-border>>;\\n\\tborder-left: 1px solid \u003C\u003Ccolour table-border>>;\\n}\\n\\ntable thead tr td, table th {\\n\\tbackground-color: \u003C\u003Ccolour table-header-background>>;\\n\\tfont-weight: bold;\\n}\\n\\ntable tfoot tr td {\\n\\tbackground-color: \u003C\u003Ccolour table-footer-background>>;\\n}\\n\\n/*\\nTable utility classes\\n*/\\n\\n/* Remove borders from table as used in eg: GettingStarted*/\\n.tc-table-no-border,\\n.tc-table-no-border th,\\n.tc-table-no-border td {\\n\\tborder: initial;\\n}\\n\\n/* First column in table width will fit to text.*/\\n/* This rule makes most sense with tc-first-link-nowrap*/\\n.tc-first-col-min-width td:nth-child(1) {\\n\\twidth: 1%;\\n}\\n\\n/*\\n** Utility classes work well with tables but also for other containers\\n*/\\n\\n/* First link A element will not wrap */\\n.tc-first-link-nowrap:first-of-type a {\\n\\twhite-space: nowrap;\\n}\\n\\n/* Move the table to the center of the container */\\n.tc-center {\\n\\tmargin-left: auto;\\n\\tmargin-right: auto;\\n}\\n\\n.tc-max-width {\\n\\twidth: 100%;\\n}\\n\\n.tc-max-width-80 {\\n\\tmax-width: 80%;\\n}\\n\\n/* Allow input and textarea to look like the ControlPanel inputs */\\n.tc-edit-max-width input,\\n.tc-edit-max-width textarea {\\n\\twidth: 100%;\\n\\tpadding: 3px;\\n}\\n\\n/*\\nCSV parser plugin\\n*/\\n\\n.tc-csv-table {\\n\\twhite-space: nowrap;\\n}\\n\\n.tc-csv-table th,\\n.tc-csv-table td {\\n\\twhite-space: pre-line;\\n}\\n\\n/*\\nTiddler frame in story river\\n*/\\n\\n.tc-tiddler-frame img,\\n.tc-tiddler-frame svg,\\n.tc-tiddler-frame canvas,\\n.tc-tiddler-frame embed,\\n.tc-tiddler-frame iframe {\\n\\tmax-width: 100%;\\n}\\n\\n.tc-tiddler-body > embed,\\n.tc-tiddler-body > iframe {\\n\\twidth: 100%;\\n\\theight: 600px;\\n}\\n\\n:root {\\n\\tcolor-scheme: {{{ [{$:/palette}get[color-scheme]] ~light }}};\\n}\\n\\n/*\\n** Links\\n*/\\n\\nbutton.tc-tiddlylink,\\na.tc-tiddlylink {\\n\\ttext-decoration: none;\\n\\tfont-weight: 500;\\n\\tcolor: \u003C\u003Ccolour tiddler-link-foreground>>;\\n\\t-webkit-user-select: inherit; /* Otherwise the draggable attribute makes links impossible to select */\\n\\t-webkit-touch-callout: none; /* Prevents long presses from bringing up a link preview */\\n}\\n\\n.tc-sidebar-lists a.tc-tiddlylink {\\n\\tcolor: \u003C\u003Ccolour sidebar-tiddler-link-foreground>>;\\n}\\n\\n.tc-sidebar-lists a.tc-tiddlylink:hover {\\n\\tcolor: \u003C\u003Ccolour sidebar-tiddler-link-foreground-hover>>;\\n}\\n\\nbutton.tc-tiddlylink:hover,\\na.tc-tiddlylink:hover {\\n\\ttext-decoration: underline;\\n}\\n\\na.tc-tiddlylink-resolves {\\n}\\n\\na.tc-tiddlylink-shadow {\\n\\tfont-weight: bold;\\n}\\n\\na.tc-tiddlylink-shadow.tc-tiddlylink-resolves {\\n\\tfont-weight: normal;\\n}\\n\\na.tc-tiddlylink-missing {\\n\\tfont-style: italic;\\n}\\n\\na.tc-tiddlylink-external {\\n\\ttext-decoration: underline;\\n\\tcolor: \u003C\u003Ccolour external-link-foreground>>;\\n\\tbackground-color: \u003C\u003Ccolour external-link-background>>;\\n}\\n\\na.tc-tiddlylink-external:visited {\\n\\tcolor: \u003C\u003Ccolour external-link-foreground-visited>>;\\n\\tbackground-color: \u003C\u003Ccolour external-link-background-visited>>;\\n}\\n\\na.tc-tiddlylink-external:hover {\\n\\tcolor: \u003C\u003Ccolour external-link-foreground-hover>>;\\n\\tbackground-color: \u003C\u003Ccolour external-link-background-hover>>;\\n}\\n\\n.tc-drop-down a.tc-tiddlylink:hover {\\n\\tcolor: \u003C\u003Ccolour tiddler-link-background>>;\\n}\\n\\n/*\\n** Drag and drop styles\\n*/\\n\\n.tc-tiddler-dragger {\\n\\tposition: relative;\\n\\tz-index: -10000;\\n}\\n\\n.tc-tiddler-dragger-inner {\\n\\tposition: absolute;\\n\\ttop: -1000px;\\n\\tleft: -1000px;\\n\\tdisplay: inline-block;\\n\\tpadding: 8px 20px;\\n\\tfont-size: 16.9px;\\n\\tfont-weight: bold;\\n\\tline-height: 20px;\\n\\tcolor: \u003C\u003Ccolour dragger-foreground>>;\\n\\ttext-shadow: 0 1px 0 rgba(0, 0, 0, 1);\\n\\twhite-space: nowrap;\\n\\tvertical-align: baseline;\\n\\tbackground-color: \u003C\u003Ccolour dragger-background>>;\\n\\tborder-radius: 20px;\\n}\\n\\n.tc-tiddler-dragger-cover {\\n\\tposition: absolute;\\n\\tbackground-color: \u003C\u003Ccolour page-background>>;\\n}\\n\\n.tc-page-container > .tc-dropzone {\\n\\tmin-height: 100vh;\\n}\\n\\n.tc-dropzone {\\n\\tposition: relative;\\n}\\n\\n.tc-dropzone.tc-dragover:before {\\n\\tz-index: 10000;\\n\\tdisplay: block;\\n\\tposition: fixed;\\n\\ttop: 0;\\n\\tleft: 0;\\n\\tright: 0;\\n\\tbackground: \u003C\u003Ccolour dropzone-background>>;\\n\\ttext-align: center;\\n\\tcontent: \\\"\u003C\u003Clingo DropMessage>>\\\";\\n}\\n\\n.tc-droppable > .tc-droppable-placeholder {\\n\\tdisplay: none;\\n}\\n\\n.tc-droppable.tc-dragover > .tc-droppable-placeholder {\\n\\tdisplay: block;\\n\\tborder: 2px dashed \u003C\u003Ccolour dropzone-background>>;\\n}\\n\\n.tc-draggable {\\n\\tcursor: move;\\n}\\n\\n.tc-sidebar-tab-open .tc-droppable-placeholder, .tc-tagged-draggable-list .tc-droppable-placeholder,\\n.tc-links-draggable-list .tc-droppable-placeholder {\\n\\tline-height: 2em;\\n\\theight: 2em;\\n}\\n\\n.tc-sidebar-tab-open-item {\\n\\tposition: relative;\\n}\\n\\n.tc-sidebar-tab-open .tc-btn-invisible.tc-btn-mini svg {\\n\\tfont-size: 0.7em;\\n\\tfill: \u003C\u003Ccolour muted-foreground>>;\\n}\\n\\n/*\\n** Plugin reload warning\\n*/\\n\\n.tc-plugin-reload-warning {\\n\\tz-index: 1000;\\n\\tdisplay: block;\\n\\tposition: fixed;\\n\\ttop: 0;\\n\\tleft: 0;\\n\\tright: 0;\\n\\tbackground: \u003C\u003Ccolour alert-background>>;\\n\\ttext-align: center;\\n}\\n\\n/*\\n** Buttons\\n*/\\n\\nbutton svg, button img, label svg, label img {\\n\\tvertical-align: middle;\\n}\\n\\n.tc-btn-invisible {\\n\\tpadding: 0;\\n\\tmargin: 0;\\n\\tbackground: none;\\n\\tborder: none;\\n\\tcursor: pointer;\\n\\tcolor: \u003C\u003Ccolour foreground>>;\\n\\tfill: \u003C\u003Ccolour foreground>>;\\n}\\n\\nbutton:disabled.tc-btn-invisible  {\\n\\tcursor: default;\\n\\tcolor: \u003C\u003Ccolour muted-foreground>>;\\n}\\n\\n.tc-btn-boxed {\\n\\tfont-size: 0.6em;\\n\\tpadding: 0.2em;\\n\\tmargin: 1px;\\n\\tbackground: none;\\n\\tborder: 1px solid \u003C\u003Ccolour tiddler-controls-foreground>>;\\n\\tborder-radius: 0.25em;\\n}\\n\\nhtml body.tc-body .tc-btn-boxed svg {\\n\\tfont-size: 1.6666em;\\n}\\n\\n.tc-btn-boxed:hover {\\n\\tbackground: \u003C\u003Ccolour muted-foreground>>;\\n\\tcolor: \u003C\u003Ccolour background>>;\\n}\\n\\nhtml body.tc-body .tc-btn-boxed:hover svg {\\n\\tfill: \u003C\u003Ccolour background>>;\\n}\\n\\n.tc-btn-rounded {\\n\\tfont-size: 0.5em;\\n\\tline-height: 2;\\n\\tpadding: 0em 0.3em 0.2em 0.4em;\\n\\tmargin: 1px;\\n\\tborder: 1px solid \u003C\u003Ccolour muted-foreground>>;\\n\\tbackground: \u003C\u003Ccolour muted-foreground>>;\\n\\tcolor: \u003C\u003Ccolour background>>;\\n\\tborder-radius: 2em;\\n}\\n\\nhtml body.tc-body .tc-btn-rounded svg {\\n\\tfont-size: 1.6666em;\\n\\tfill: \u003C\u003Ccolour background>>;\\n}\\n\\n.tc-btn-rounded:hover {\\n\\tborder: 1px solid \u003C\u003Ccolour muted-foreground>>;\\n\\tbackground: \u003C\u003Ccolour background>>;\\n\\tcolor: \u003C\u003Ccolour muted-foreground>>;\\n}\\n\\nhtml body.tc-body .tc-btn-rounded:hover svg {\\n\\tfill: \u003C\u003Ccolour muted-foreground>>;\\n}\\n\\n.tc-btn-icon svg {\\n\\theight: 1em;\\n\\twidth: 1em;\\n\\tfill: \u003C\u003Ccolour muted-foreground>>;\\n}\\n\\n\\n.tc-btn-text {\\n\\tmargin-left: 7px;\\n}\\n\\n/* used for documentation \\\"fake\\\" buttons */\\n.tc-btn-standard {\\n\\tline-height: 1.8;\\n\\tcolor: #667;\\n\\tbackground-color: #e0e0e0;\\n\\tborder: 1px solid #888;\\n\\tpadding: 2px 1px 2px 1px;\\n\\tmargin: 1px 4px 1px 4px;\\n}\\n\\n.tc-btn-big-green {\\n\\tdisplay: inline-block;\\n\\tpadding: 8px;\\n\\tmargin: 4px 8px 4px 8px;\\n\\tbackground: \u003C\u003Ccolour download-background>>;\\n\\tcolor: \u003C\u003Ccolour download-foreground>>;\\n\\tfill: \u003C\u003Ccolour download-foreground>>;\\n\\tborder: none;\\n\\tborder-radius: 2px;\\n\\tfont-size: 1.2em;\\n\\tline-height: 1.4em;\\n\\ttext-decoration: none;\\n}\\n\\n.tc-btn-big-green svg,\\n.tc-btn-big-green img {\\n\\theight: 2em;\\n\\twidth: 2em;\\n\\tvertical-align: middle;\\n\\tfill: \u003C\u003Ccolour download-foreground>>;\\n}\\n\\n.tc-primary-btn {\\n\\tbackground: \u003C\u003Ccolour primary>>;\\n}\\n\\n.tc-sidebar-lists input {\\n\\tcolor: \u003C\u003Ccolour foreground>>;\\n}\\n\\n.tc-sidebar-lists button {\\n\\tcolor: \u003C\u003Ccolour sidebar-button-foreground>>;\\n\\tfill: \u003C\u003Ccolour sidebar-button-foreground>>;\\n}\\n\\n.tc-sidebar-lists button.tc-btn-mini {\\n\\tcolor: \u003C\u003Ccolour sidebar-muted-foreground>>;\\n}\\n\\n.tc-sidebar-lists button.tc-btn-mini:hover {\\n\\tcolor: \u003C\u003Ccolour sidebar-muted-foreground-hover>>;\\n}\\n\\n.tc-sidebar-lists button small {\\n\\tcolor: \u003C\u003Ccolour foreground>>;\\n}\\n\\nbutton svg.tc-image-button, button .tc-image-button img {\\n\\theight: 1em;\\n\\twidth: 1em;\\n}\\n\\n.tc-unfold-banner {\\n\\tposition: absolute;\\n\\tpadding: 0;\\n\\tmargin: 0;\\n\\tbackground: none;\\n\\tborder: none;\\n\\twidth: 100%;\\n\\twidth: calc(100% + 2px);\\n\\tmargin-left: -43px;\\n\\ttext-align: center;\\n\\tborder-top: 2px solid \u003C\u003Ccolour tiddler-info-background>>;\\n\\tmargin-top: 4px;\\n}\\n\\n.tc-unfold-banner:hover {\\n\\tbackground: \u003C\u003Ccolour tiddler-info-background>>;\\n\\tborder-top: 2px solid \u003C\u003Ccolour tiddler-info-border>>;\\n}\\n\\n.tc-unfold-banner svg, .tc-fold-banner svg {\\n\\theight: 0.75em;\\n\\tfill: \u003C\u003Ccolour tiddler-controls-foreground>>;\\n}\\n\\n.tc-unfold-banner:hover svg, .tc-fold-banner:hover svg {\\n\\tfill: \u003C\u003Ccolour tiddler-controls-foreground-hover>>;\\n}\\n\\n.tc-fold-banner {\\n\\tposition: absolute;\\n\\tpadding: 0;\\n\\tmargin: 0;\\n\\tbackground: none;\\n\\tborder: none;\\n\\twidth: 23px;\\n\\ttext-align: center;\\n\\tmargin-left: -35px;\\n\\ttop: 6px;\\n\\tbottom: 6px;\\n}\\n\\n.tc-fold-banner:hover {\\n\\tbackground: \u003C\u003Ccolour tiddler-info-background>>;\\n}\\n\\n@media (max-width: \u003C\u003Csidebarbreakpoint-minus-one>>) {\\n\\n\\t.tc-unfold-banner {\\n\\t\\tposition: static;\\n\\t\\twidth: calc(100% + 59px);\\n\\t}\\n\\n\\t.tc-fold-banner {\\n\\t\\twidth: 16px;\\n\\t\\tmargin-left: -16px;\\n\\t\\tfont-size: 0.75em;\\n\\t}\\n\\n}\\n\\n/*\\n** Tags and missing tiddlers\\n*/\\n\\n.tc-tag-list-item {\\n\\tposition: relative;\\n\\tdisplay: inline-block;\\n}\\n\\n.tc-tags-wrapper {\\n\\tmargin: 4px 0 14px 0;\\n}\\n\\n.tc-tags-wrapper .tc-tag-list-item {\\n\\tmargin-right: 7px;\\n}\\n\\n.tc-missing-tiddler-label {\\n\\tfont-style: italic;\\n\\tfont-weight: normal;\\n\\tdisplay: inline-block;\\n\\tfont-size: 11.844px;\\n\\tline-height: 14px;\\n\\twhite-space: nowrap;\\n\\tvertical-align: baseline;\\n}\\n\\n.tc-block-tags-dropdown > .tc-btn-invisible:hover {\\n\\tbackground-color: \u003C\u003Ccolour primary>>;\\n}\\n\\nbutton.tc-tag-label, span.tc-tag-label {\\n\\tdisplay: inline-block;\\n\\tpadding: 0.16em 0.7em;\\n\\tfont-size: 0.9em;\\n\\tfont-weight: normal;\\n\\tline-height: 1.2em;\\n\\tcolor: \u003C\u003Ccolour tag-foreground>>;\\n\\twhite-space: break-spaces;\\n\\tvertical-align: baseline;\\n\\tbackground-color: \u003C\u003Ccolour tag-background>>;\\n\\tborder-radius: 1em;\\n}\\n\\n.tc-sidebar-scrollable .tc-tag-label {\\n\\ttext-shadow: none;\\n}\\n\\n.tc-untagged-separator {\\n\\tborder: 0;\\n\\theight: 1px;\\n\\tbackground: \u003C\u003Ccolour tab-divider>>;\\n}\\n\\nbutton.tc-untagged-label {\\n\\tbackground-color: \u003C\u003Ccolour untagged-background>>;\\n}\\n\\n.tc-tag-label svg, .tc-tag-label img {\\n\\theight: 1em;\\n\\twidth: 1em;\\n\\tmargin-right: 3px;\\n\\tmargin-bottom: 1px;\\n\\tvertical-align: bottom;\\n}\\n\\n.tc-edit-tags button.tc-remove-tag-button svg {\\n\\tfont-size: 0.7em;\\n\\tvertical-align: middle;\\n}\\n\\n.tc-tag-manager-table .tc-tag-label {\\n}\\n\\n.tc-tag-manager-tag {\\n\\twidth: 100%;\\n}\\n\\nbutton.tc-btn-invisible.tc-remove-tag-button {\\n\\toutline: none;\\n}\\n\\n.tc-tag-button-selected,\\n.tc-list-item-selected a.tc-tiddlylink, a.tc-list-item-selected {\\n\\tbackground-color: \u003C\u003Ccolour primary>>;\\n\\tcolor: \u003C\u003Ccolour tiddler-background>>;\\n}\\n\\n/*\\n** Page layout\\n*/\\n\\n.tc-topbar {\\n\\tposition: fixed;\\n\\tz-index: 1200;\\n}\\n\\n.tc-topbar-left {\\n\\tleft: 29px;\\n\\ttop: 5px;\\n}\\n\\n.tc-topbar-right {\\n\\ttop: 5px;\\n\\tright: 29px;\\n}\\n\\n@media (max-width: \u003C\u003Csidebarbreakpoint-minus-one>>) {\\n\\n\\t.tc-topbar-right {\\n\\t\\tright: 10px;\\n\\t}\\n\\n}\\n\\n.tc-topbar button {\\n\\tpadding: 8px;\\n}\\n\\n.tc-topbar svg {\\n\\tfill: \u003C\u003Ccolour muted-foreground>>;\\n}\\n\\n.tc-topbar button:hover svg {\\n\\tfill: \u003C\u003Ccolour foreground>>;\\n}\\n\\n@media (max-width: \u003C\u003Csidebarbreakpoint-minus-one>>) {\\n\\n\\t.tc-show-sidebar-btn svg.tc-image-chevron-left, .tc-hide-sidebar-btn svg.tc-image-chevron-right {\\n\\t\\ttransform: rotate(-90deg);\\n\\t}\\n\\n}\\n\\n.tc-sidebar-header {\\n\\tcolor: \u003C\u003Ccolour sidebar-foreground>>;\\n\\tfill: \u003C\u003Ccolour sidebar-foreground>>;\\n}\\n\\n.tc-sidebar-header .tc-title a.tc-tiddlylink-resolves {\\n\\tfont-weight: normal;\\n}\\n\\n.tc-sidebar-header .tc-sidebar-lists p {\\n\\tmargin-top: 3px;\\n\\tmargin-bottom: 3px;\\n}\\n\\n.tc-sidebar-header .tc-missing-tiddler-label {\\n\\tcolor: \u003C\u003Ccolour sidebar-foreground>>;\\n}\\n\\n.tc-advanced-search input {\\n\\twidth: 60%;\\n}\\n\\n.tc-search a svg {\\n\\twidth: 1.2em;\\n\\theight: 1.2em;\\n\\tvertical-align: middle;\\n}\\n\\n.tc-page-controls {\\n\\tmargin-top: 14px;\\n\\tmargin-bottom: 14px;\\n\\tfont-size: 1.5em;\\n}\\n\\n.tc-page-controls .tc-drop-down {\\n\\tfont-size: 1rem;\\n}\\n\\n.tc-page-controls button {\\n\\tmargin-right: 0.5em;\\n}\\n\\n.tc-page-controls a.tc-tiddlylink:hover {\\n\\ttext-decoration: none;\\n}\\n\\n.tc-page-controls img {\\n\\twidth: 1em;\\n}\\n\\n.tc-page-controls svg {\\n\\tfill: \u003C\u003Ccolour sidebar-controls-foreground>>;\\n}\\n\\n.tc-page-controls button:hover svg, .tc-page-controls a:hover svg {\\n\\tfill: \u003C\u003Ccolour sidebar-controls-foreground-hover>>;\\n}\\n\\n.tc-sidebar-lists .tc-menu-list-item {\\n\\twhite-space: nowrap;\\n}\\n\\n.tc-menu-list-count {\\n\\tfont-weight: bold;\\n}\\n\\n.tc-menu-list-subitem {\\n\\tpadding-left: 7px;\\n}\\n\\n.tc-story-river {\\n\\tposition: relative;\\n}\\n\\n@media (max-width: \u003C\u003Csidebarbreakpoint-minus-one>>) {\\n\\n\\t.tc-sidebar-header {\\n\\t\\tpadding: 14px;\\n\\t\\tmin-height: 32px;\\n\\t\\tmargin-top: {{$:/themes/tiddlywiki/vanilla/metrics/storytop}};\\n\\t\\ttransition:  min-height {{$:/config/AnimationDuration}}ms ease-in-out, padding-top {{$:/config/AnimationDuration}}ms ease-in-out, padding-bottom {{$:/config/AnimationDuration}}ms ease-in-out;\\n\\t}\\n\\n\\t\u003C\u003Cif-no-sidebar \\\"\\\"\\\"\\n\\n\\t\\t.tc-sidebar-header {\\n\\t\\t\\tmin-height: 0;\\n\\t\\t\\tpadding-top: 0;\\n\\t\\t\\tpadding-bottom: 0;\\n\\t\\t}\\n\\n\\t\\\"\\\"\\\">>\\n\\n\\t.tc-story-river {\\n\\t\\tposition: relative;\\n\\t\\tpadding: 0;\\n\\t}\\n}\\n\\n@media (min-width: \u003C\u003Csidebarbreakpoint>>) {\\n\\n\\t.tc-message-box {\\n\\t\\tmargin: 21px -21px 21px -21px;\\n\\t}\\n\\n\\t.tc-sidebar-scrollable {\\n\\t\\tposition: fixed;\\n\\t\\ttop: {{$:/themes/tiddlywiki/vanilla/metrics/storytop}};\\n\\t\\tleft: {{$:/themes/tiddlywiki/vanilla/metrics/storyright}};\\n\\t\\tbottom: 0;\\n\\t\\tright: 0;\\n\\t\\toverflow-y: auto;\\n\\t\\toverflow-x: auto;\\n\\t\\t-webkit-overflow-scrolling: touch;\\n\\t\\tmargin: 0 0 0 -42px;\\n\\t\\tpadding: 71px 0 28px 42px;\\n\\t}\\n\\n\\thtml[dir=\\\"rtl\\\"] .tc-sidebar-scrollable {\\n\\t\\tleft: auto;\\n\\t\\tright: {{$:/themes/tiddlywiki/vanilla/metrics/storyright}};\\n\\t}\\n\\n\\t.tc-story-river {\\n\\t\\tposition: relative;\\n\\t\\tleft: {{$:/themes/tiddlywiki/vanilla/metrics/storyleft}};\\n\\t\\ttop: {{$:/themes/tiddlywiki/vanilla/metrics/storytop}};\\n\\t\\twidth: {{$:/themes/tiddlywiki/vanilla/metrics/storywidth}};\\n\\t\\tpadding: 42px 42px 42px 42px;\\n\\t}\\n\\n\u003C\u003Cif-no-sidebar \\\"\\n\\n\\t.tc-story-river {\\n\\t\\twidth: calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/storyleft}});\\n\\t}\\n\\n\\\">>\\n\\n\\t.tc-story-river.tc-static-story-river {\\n\\t\\tmargin-right: 0;\\n\\t\\tpadding-right: 42px;\\n\\t}\\n\\n}\\n\\n@media print {\\n\\n\\tbody.tc-body {\\n\\t\\tbackground-color: transparent;\\n\\t}\\n\\n\\t.tc-sidebar-header, .tc-topbar {\\n\\t\\tdisplay: none;\\n\\t}\\n\\n\\t.tc-story-river {\\n\\t\\tmargin: 0;\\n\\t\\tpadding: 0;\\n\\t}\\n\\n\\t.tc-story-river .tc-tiddler-frame {\\n\\t\\tmargin: 0;\\n\\t\\tborder: none;\\n\\t\\tpadding: 0;\\n\\t}\\n}\\n\\n/*\\n** Tiddler styles\\n*/\\n\\n.tc-tiddler-frame {\\n\\tposition: relative;\\n\\tmargin-bottom: 28px;\\n\\tbackground-color: \u003C\u003Ccolour tiddler-background>>;\\n\\tborder: 1px solid \u003C\u003Ccolour tiddler-border>>;\\n}\\n\\n{{$:/themes/tiddlywiki/vanilla/sticky}}\\n\\n.tc-tiddler-info {\\n\\toverflow: hidden;\\n\\tpadding: 14px 42px 14px 42px;\\n\\tbackground-color: \u003C\u003Ccolour tiddler-info-background>>;\\n\\tborder-top: 1px solid \u003C\u003Ccolour tiddler-info-border>>;\\n\\tborder-bottom: 1px solid \u003C\u003Ccolour tiddler-info-border>>;\\n}\\n\\n.tc-tiddler-info p {\\n\\tmargin-top: 3px;\\n\\tmargin-bottom: 3px;\\n}\\n\\n.tc-tiddler-info .tc-tab-buttons button.tc-tab-selected {\\n\\tbackground-color: \u003C\u003Ccolour tiddler-info-tab-background>>;\\n\\tborder-bottom: 1px solid \u003C\u003Ccolour tiddler-info-tab-background>>;\\n}\\n\\n@media (max-width: \u003C\u003Csidebarbreakpoint-minus-one>>) {\\n\\n\\t.tc-tiddler-info {\\n\\t\\tpadding: 14px 14px 14px 14px;\\n\\t}\\n\\n}\\n\\n.tc-view-field-table {\\n\\twidth: 100%;\\n}\\n\\n.tc-view-field-name {\\n\\twidth: 1%; /* Makes this column be as narrow as possible */\\n\\twhite-space: nowrap;\\n\\tvertical-align: top;\\n\\ttext-align: right;\\n\\tfont-style: italic;\\n\\tfont-weight: normal;\\n}\\n\\n.tc-view-field-value {\\n\\tword-break: break-all;\\n}\\n\\n@media (max-width: \u003C\u003Csidebarbreakpoint-minus-one>>) {\\n\\t.tc-tiddler-frame {\\n\\t\\tpadding: 14px 14px 14px 14px;\\n\\t\\tmargin-bottom: .5em;\\n\\t}\\n\\n\\t.tc-tiddler-info {\\n\\t\\tmargin: 0 -14px 0 -14px;\\n\\t}\\n}\\n\\n@media (min-width: \u003C\u003Csidebarbreakpoint>>) {\\n\\t.tc-tiddler-frame {\\n\\t\\tpadding: 28px 42px 42px 42px;\\n\\t\\twidth: {{$:/themes/tiddlywiki/vanilla/metrics/tiddlerwidth}};\\n\\t\\tborder-radius: 2px;\\n\\t}\\n\\n\u003C\u003Cif-no-sidebar \\\"\\n\\n\\t.tc-tiddler-frame {\\n\\t\\twidth: 100%;\\n\\t}\\n\\n\\\">>\\n\\n\\t.tc-tiddler-info {\\n\\t\\tmargin: 0 -42px 0 -42px;\\n\\t}\\n}\\n\\n.tc-site-title,\\n.tc-titlebar {\\n\\tfont-weight: normal;\\n\\tfont-size: 2.35em;\\n\\tline-height: 1.35em;\\n\\tcolor: \u003C\u003Ccolour tiddler-title-foreground>>;\\n\\tmargin: 0;\\n}\\n\\n.tc-site-title {\\n\\tcolor: \u003C\u003Ccolour site-title-foreground>>;\\n}\\n\\n.tc-tiddler-title-icon {\\n\\tvertical-align: middle;\\n\\tmargin-right: .1em;\\n}\\n\\n.tc-tiddler-title-icon svg {\\n\\twidth: 0.9em;\\n\\theight: 0.9em;\\n}\\n\\n.tc-system-title-prefix {\\n\\tcolor: \u003C\u003Ccolour muted-foreground>>;\\n}\\n\\n.tc-titlebar h2 {\\n\\tfont-size: 1em;\\n\\tdisplay: inline;\\n}\\n\\n.tc-titlebar img {\\n\\theight: 1em;\\n}\\n\\n.tc-subtitle {\\n\\tfont-size: 0.9em;\\n\\tcolor: \u003C\u003Ccolour tiddler-subtitle-foreground>>;\\n\\tfont-weight: normal;\\n}\\n\\n.tc-subtitle .tc-tiddlylink {\\n\\tmargin-right: .3em;\\n}\\n\\n.tc-tiddler-missing .tc-title {\\n\\tfont-style: italic;\\n\\tfont-weight: normal;\\n}\\n\\n.tc-tiddler-frame .tc-tiddler-controls {\\n\\tfloat: right;\\n\\tpadding: 3px; /* make space for outline */\\n}\\n\\n.tc-tiddler-controls .tc-drop-down {\\n\\tfont-size: 0.6em;\\n}\\n\\n.tc-tiddler-controls .tc-drop-down .tc-drop-down {\\n\\tfont-size: 1em;\\n}\\n\\n.tc-tiddler-controls > span > button,\\n.tc-tiddler-controls > span > span > button,\\n.tc-tiddler-controls > span > span > span > button {\\n\\tvertical-align: baseline;\\n\\tmargin-left:5px;\\n}\\n\\n.tc-tiddler-controls button svg, .tc-tiddler-controls button img,\\n.tc-search button svg, .tc-search a svg {\\n\\tfill: \u003C\u003Ccolour tiddler-controls-foreground>>;\\n}\\n\\n.tc-tiddler-controls button svg, .tc-tiddler-controls button img {\\n\\theight: 0.75em;\\n}\\n\\n.tc-search button svg, .tc-search a svg {\\n\\theight: 1.2em;\\n\\twidth: 1.2em;\\n\\tmargin: 0 0.25em;\\n}\\n\\n.tc-tiddler-controls button.tc-selected svg,\\n.tc-page-controls button.tc-selected svg  {\\n\\tfill: \u003C\u003Ccolour tiddler-controls-foreground-selected>>;\\n}\\n\\n.tc-tiddler-controls button.tc-btn-invisible:hover svg,\\n.tc-search button:hover svg, .tc-search a:hover svg {\\n\\tfill: \u003C\u003Ccolour tiddler-controls-foreground-hover>>;\\n}\\n\\n@media print {\\n\\t.tc-tiddler-controls {\\n\\t\\tdisplay: none;\\n\\t}\\n}\\n\\n.tc-tiddler-help { /* Help prompts within tiddler template */\\n\\tcolor: \u003C\u003Ccolour muted-foreground>>;\\n\\tmargin-top: 14px;\\n}\\n\\n.tc-tiddler-help a.tc-tiddlylink {\\n\\tcolor: \u003C\u003Ccolour very-muted-foreground>>;\\n}\\n\\n.tc-tiddler-frame .tc-edit-texteditor {\\n\\twidth: 100%;\\n\\tmargin: 4px 0 4px 0;\\n}\\n\\n.tc-tiddler-frame input.tc-edit-texteditor,\\n.tc-tiddler-frame textarea.tc-edit-texteditor,\\n.tc-tiddler-frame iframe.tc-edit-texteditor,\\n.tc-tiddler-frame select.tc-edit-texteditor {\\n\\tpadding: 3px 3px 3px 3px;\\n\\tborder: 1px solid \u003C\u003Ccolour tiddler-editor-border>>;\\n\\tline-height: 1.3em;\\n\\tfont-family: {{$:/themes/tiddlywiki/vanilla/settings/editorfontfamily}};\\n}\\n\\n.tc-tiddler-frame input.tc-edit-texteditor,\\n.tc-tiddler-frame textarea.tc-edit-texteditor,\\n.tc-tiddler-frame iframe.tc-edit-texteditor {\\n\\t-webkit-appearance: none;\\n}\\n\\n.tc-tiddler-frame input.tc-edit-texteditor,\\n.tc-tiddler-frame select.tc-edit-texteditor,\\n.tc-tiddler-frame textarea.tc-edit-texteditor {\\n\\tbackground-color: \u003C\u003Ccolour tiddler-editor-background>>;\\n}\\n\\n.tc-tiddler-frame iframe.tc-edit-texteditor {\\n\\tbackground-color: \u003C\u003Ccolour tiddler-background>>;\\n}\\n\\n.tc-tiddler-frame .tc-edit-fields input.tc-edit-fieldeditor,\\n.tc-tiddler-frame .tc-edit-fields select.tc-edit-fieldeditor,\\n.tc-tiddler-frame .tc-edit-fields textarea.tc-edit-fieldeditor {\\n\\tmargin: 0;\\n\\tpadding: 2px 3px;\\n}\\n\\n.tc-tiddler-frame .tc-binary-warning {\\n\\twidth: 100%;\\n\\theight: 5em;\\n\\ttext-align: center;\\n\\tpadding: 3em 3em 6em 3em;\\n\\tbackground: \u003C\u003Ccolour alert-background>>;\\n\\tborder: 1px solid \u003C\u003Ccolour alert-border>>;\\n}\\n\\ncanvas.tc-edit-bitmapeditor  {\\n\\tborder: 6px solid \u003C\u003Ccolour tiddler-editor-border-image>>;\\n\\tcursor: crosshair;\\n\\t-moz-user-select: none;\\n\\t-webkit-user-select: none;\\n\\t-ms-user-select: none;\\n\\tmargin-top: 6px;\\n\\tmargin-bottom: 6px;\\n}\\n\\n.tc-edit-bitmapeditor-width {\\n\\tdisplay: block;\\n}\\n\\n.tc-edit-bitmapeditor-height {\\n\\tdisplay: block;\\n}\\n\\n.tc-tiddler-body {\\n\\tclear: both;\\n}\\n\\n.tc-single-tiddler-window .tc-tiddler-body,\\n.tc-tiddler-frame .tc-tiddler-body {\\n\\tfont-size: {{$:/themes/tiddlywiki/vanilla/metrics/bodyfontsize}};\\n\\tline-height: {{$:/themes/tiddlywiki/vanilla/metrics/bodylineheight}};\\n}\\n\\n.tc-titlebar, .tc-tiddler-edit-title {\\n\\toverflow: hidden; /* https://github.com/Jermolene/TiddlyWiki5/issues/282 */\\n}\\n\\n/*\\n* Tiddler in a new window.\\n* Also see: .tc-single-tiddler-window .tc-tiddler-body, above\\n*/\\n\\nhtml body.tc-body.tc-single-tiddler-window {\\n\\tmargin: 1em;\\n\\tbackground: \u003C\u003Ccolour tiddler-background>>;\\n}\\n\\n.tc-single-tiddler-window img,\\n.tc-single-tiddler-window svg,\\n.tc-single-tiddler-window canvas,\\n.tc-single-tiddler-window embed,\\n.tc-single-tiddler-window iframe {\\n\\tmax-width: 100%;\\n}\\n\\n/*\\n** Editor\\n*/\\n\\n.tc-editor-toolbar {\\n\\tmargin-top: 8px;\\n}\\n\\n.tc-tiddler-frame .tc-tiddler-editor.tc-tiddler-preview .tc-editor-toolbar,\\n.tc-tiddler-frame .tc-tiddler-editor.tc-tiddler-preview-hidden .tc-editor-toolbar {\\n\\tgrid-area: toolbar;\\n}\\n\\n.tc-editor-toolbar button {\\n\\tvertical-align: middle;\\n\\tbackground-color: \u003C\u003Ccolour tiddler-controls-foreground>>;\\n\\tcolor: \u003C\u003Ccolour tiddler-controls-foreground-selected>>;\\n\\tfill: \u003C\u003Ccolour tiddler-controls-foreground-selected>>;\\n\\tborder-radius: 4px;\\n\\tpadding: 3px;\\n\\tmargin: 2px 0 2px 4px;\\n}\\n\\n.tc-editor-toolbar button.tc-text-editor-toolbar-item-adjunct {\\n\\tmargin-left: 1px;\\n\\twidth: 1em;\\n\\tborder-radius: 8px;\\n}\\n\\n.tc-editor-toolbar button.tc-text-editor-toolbar-item-start-group {\\n\\tmargin-left: 11px;\\n}\\n\\n.tc-editor-toolbar button.tc-selected {\\n\\tbackground-color: \u003C\u003Ccolour primary>>;\\n}\\n\\n.tc-editor-toolbar button svg {\\n\\twidth: 1.6em;\\n\\theight: 1.2em;\\n}\\n\\n.tc-editor-toolbar .tc-drop-down button.tc-btn-mini {\\n\\tpadding: 2px 4px;\\n}\\n\\n.tc-editor-toolbar button:hover {\\n\\tbackground-color: \u003C\u003Ccolour tiddler-controls-foreground-selected>>;\\n\\tfill: \u003C\u003Ccolour background>>;\\n\\tcolor: \u003C\u003Ccolour background>>;\\n}\\n\\n.tc-editor-toolbar .tc-text-editor-toolbar-more {\\n\\twhite-space: normal;\\n}\\n\\n.tc-editor-toolbar .tc-text-editor-toolbar-more button {\\n\\tdisplay: inline-block;\\n\\tpadding: 3px;\\n\\twidth: auto;\\n}\\n\\n.tc-editor-toolbar .tc-search-results {\\n\\tpadding: 0;\\n}\\n\\n.tc-editor-toolbar button.tc-editortoolbar-stamp-button + .tc-popup .tc-drop-down > p {\\n\\tmargin: 0;\\n\\tpadding: 0;\\n}\\n\\n.tc-editor-toolbar button.tc-editortoolbar-stamp-button + .tc-popup .tc-drop-down a.tc-tiddlylink {\\n\\tfont-weight: normal;\\n}\\n\\n/*\\n** Adjustments for fluid-fixed mode\\n*/\\n\\n@media (min-width: \u003C\u003Csidebarbreakpoint>>) {\\n\\n\u003C\u003Cif-fluid-fixed text:\\\"\\\"\\\"\\n\\n\\t.tc-story-river {\\n\\t\\tpadding-right: 0;\\n\\t\\tposition: relative;\\n\\t\\twidth: auto;\\n\\t\\tleft: 0;\\n\\t\\tmargin-left: {{$:/themes/tiddlywiki/vanilla/metrics/storyleft}};\\n\\t\\tmargin-right: {{$:/themes/tiddlywiki/vanilla/metrics/sidebarwidth}};\\n\\t}\\n\\n\\t.tc-tiddler-frame {\\n\\t\\twidth: 100%;\\n\\t}\\n\\n\\t.tc-sidebar-scrollable {\\n\\t\\tleft: auto;\\n\\t\\tbottom: 0;\\n\\t\\tright: 0;\\n\\t\\twidth: {{$:/themes/tiddlywiki/vanilla/metrics/sidebarwidth}};\\n\\t}\\n\\n\\tbody.tc-body .tc-page-container.tc-page-view-zoomin .tc-tiddler-frame {\\n\\t\\twidth: 100%;\\n\\t\\twidth: calc(100% - 42px);\\n\\t}\\n\\n\\\"\\\"\\\" hiddenSidebarText:\\\"\\\"\\\"\\n\\n\\t.tc-story-river {\\n\\t\\tpadding-right: 3em;\\n\\t\\tmargin-right: 0;\\n\\t}\\n\\n\\tbody.tc-body .tc-page-container.tc-page-view-zoomin .tc-tiddler-frame {\\n\\t\\twidth: 100%;\\n\\t\\twidth: calc(100% - 84px);\\n\\t}\\n\\n\\\"\\\"\\\">>\\n\\n}\\n\\n/*\\n** Toolbar buttons\\n*/\\n\\n.tc-page-controls svg.tc-image-new-button {\\n\\tfill: \u003C\u003Ccolour toolbar-new-button>>;\\n}\\n\\n.tc-page-controls svg.tc-image-options-button {\\n\\tfill: \u003C\u003Ccolour toolbar-options-button>>;\\n}\\n\\n.tc-page-controls svg.tc-image-save-button {\\n\\tfill: \u003C\u003Ccolour toolbar-save-button>>;\\n}\\n\\n.tc-tiddler-controls button svg.tc-image-info-button {\\n\\tfill: \u003C\u003Ccolour toolbar-info-button>>;\\n}\\n\\n.tc-tiddler-controls button svg.tc-image-edit-button {\\n\\tfill: \u003C\u003Ccolour toolbar-edit-button>>;\\n}\\n\\n.tc-tiddler-controls button svg.tc-image-close-button {\\n\\tfill: \u003C\u003Ccolour toolbar-close-button>>;\\n}\\n\\n.tc-tiddler-controls button svg.tc-image-delete-button {\\n\\tfill: \u003C\u003Ccolour toolbar-delete-button>>;\\n}\\n\\n.tc-tiddler-controls button svg.tc-image-cancel-button {\\n\\tfill: \u003C\u003Ccolour toolbar-cancel-button>>;\\n}\\n\\n.tc-tiddler-controls button svg.tc-image-done-button {\\n\\tfill: \u003C\u003Ccolour toolbar-done-button>>;\\n}\\n\\n.tc-page-controls svg.tc-image-layout-button {\\n\\tfill: \u003C\u003Ccolour toolbar-options-button>>;\\n}\\n\\n/*\\n** Tiddler edit mode\\n*/\\n\\n.tc-tiddler-edit-frame em.tc-edit {\\n\\tcolor: \u003C\u003Ccolour muted-foreground>>;\\n\\tfont-style: normal;\\n}\\n\\n.tc-edit-type-dropdown a.tc-tiddlylink-missing {\\n\\tfont-style: normal;\\n}\\n\\n.tc-type-selector .tc-edit-typeeditor {\\n\\twidth: auto;\\n}\\n\\n.tc-type-selector-dropdown-wrapper {\\n\\tdisplay: inline-block;\\n}\\n\\n\u003C\u003Cset-type-selector-min-width>>\\n\\n.tc-edit-tags {\\n\\tborder: 1px solid \u003C\u003Ccolour tiddler-editor-border>>;\\n\\tpadding: 4px 8px 4px 8px;\\n}\\n\\n.tc-edit-add-tag {\\n\\tdisplay: inline-block;\\n}\\n\\n.tc-edit-add-tag .tc-add-tag-name input {\\n\\twidth: 50%;\\n}\\n\\n.tc-edit-add-tag .tc-keyboard {\\n\\tdisplay:inline;\\n}\\n\\n.tc-edit-tags .tc-tag-label {\\n\\tdisplay: inline-block;\\n}\\n\\n.tc-edit-tags-list {\\n\\tmargin: 14px 0 14px 0;\\n}\\n\\n.tc-remove-tag-button {\\n\\tpadding-left: 4px;\\n}\\n\\n.tc-tiddler-editor {\\n\\tdisplay: grid;\\n}\\n\\n.tc-tiddler-frame .tc-tiddler-editor.tc-tiddler-preview {\\n\\tgrid-template-areas:\\n\\t\\t\\\"toolbar toolbar\\\"\\n\\t\\t\\\"editor preview\\\";\\n\\tgrid-template-columns: repeat(2, minmax(0px, 1fr));\\n\\tgrid-template-rows: auto 1fr;\\n}\\n\\n.tc-tiddler-frame .tc-tiddler-editor.tc-tiddler-preview-hidden {\\n\\tgrid-template-areas:\\n\\t\\t\\\"toolbar\\\"\\n\\t\\t\\\"editor\\\";\\n\\tgrid-template-columns: 1fr;\\n\\tgrid-template-rows: auto 1fr;\\n}\\n\\n.tc-tiddler-frame .tc-tiddler-editor.tc-tiddler-preview .tc-tiddler-preview-preview {\\n\\tgrid-area: preview;\\n\\toverflow-wrap: anywhere;\\n\\tword-break: normal;\\n\\tborder: 1px solid \u003C\u003Ccolour tiddler-editor-border>>;\\n\\tmargin: 4px 0 3px 3px;\\n\\tpadding: 3px 3px 3px 3px;\\n}\\n\\n\u003C\u003Cif-editor-height-fixed then:\\\"\\\"\\\"\\n\\n.tc-tiddler-preview-preview {\\n\\toverflow-y: scroll;\\n\\theight: {{$:/config/TextEditor/EditorHeight/Height}};\\n}\\n\\n\\\"\\\"\\\">>\\n\\n.tc-tiddler-frame .tc-tiddler-editor.tc-tiddler-preview .tc-edit-texteditor,\\n.tc-tiddler-frame .tc-tiddler-editor.tc-tiddler-preview-hidden .tc-edit-texteditor {\\n\\tgrid-area: editor;\\n}\\n\\n.tc-tiddler-frame .tc-tiddler-editor.tc-tiddler-preview canvas.tc-edit-bitmapeditor,\\n.tc-tiddler-frame .tc-tiddler-editor.tc-tiddler-preview-hidden canvas.tc-edit-bitmapeditor {\\n\\tgrid-area: editor;\\n\\tmax-width: 100%;\\n}\\n\\n.tc-edit-fields {\\n\\twidth: 100%;\\n}\\n\\n.tc-edit-fields.tc-edit-fields-small {\\n\\tmargin-top: 0;\\n\\tmargin-bottom: 0;\\n}\\n\\n.tc-edit-fields table, .tc-edit-fields tr, .tc-edit-fields td {\\n\\tborder: none;\\n\\tpadding: 4px;\\n}\\n\\n.tc-edit-fields > tbody > .tc-edit-field:nth-child(odd) {\\n\\tbackground-color: \u003C\u003Ccolour tiddler-editor-fields-odd>>;\\n}\\n\\n.tc-edit-fields > tbody > .tc-edit-field:nth-child(even) {\\n\\tbackground-color: \u003C\u003Ccolour tiddler-editor-fields-even>>;\\n}\\n\\n.tc-edit-field-name {\\n\\ttext-align: right;\\n}\\n\\n.tc-edit-field-value input {\\n\\twidth: 100%;\\n}\\n\\n.tc-edit-field-remove {\\n}\\n\\n.tc-edit-field-remove svg {\\n\\theight: 1em;\\n\\twidth: 1em;\\n\\tfill: \u003C\u003Ccolour muted-foreground>>;\\n\\tvertical-align: middle;\\n}\\n\\n.tc-edit-field-add-name-wrapper input.tc-edit-texteditor {\\n\\twidth: auto;\\n}\\n\\n.tc-edit-field-add-name-wrapper {\\n\\tdisplay: inline-block;\\n}\\n\\n.tc-edit-field-add-value {\\n\\tdisplay: inline-block;\\n}\\n\\n@media (min-width: \u003C\u003Csidebarbreakpoint>>) {\\n\\n\\t.tc-edit-field-add-value {\\n\\t\\twidth: 35%;\\n\\t}\\n\\n}\\n\\n.tc-edit-field-add-button {\\n\\tdisplay: inline-block;\\n\\twidth: 10%;\\n}\\n\\n\\n/*\\n** Tiddler editor dropzone\\n*/\\n\\n.tc-dropzone-editor {\\n\\tposition:relative;\\n}\\n\\n.tc-dropzone-editor.tc-dragover .tc-editor-toolbar::after{\\n\\tz-index: 10000;\\n\\ttop:0;\\n\\tleft:0;\\n\\tright:0;\\n\\theight: 100%;\\n\\tbackground: \u003C\u003Ccolour dropzone-background>>;\\n\\tcontent: \\\"\u003C\u003Clingo DropMessage>>\\\";\\n\\tpointer-events: none;\\n\\tposition: absolute;\\n\\tdisplay: flex;\\n\\talign-items: center;\\n\\tjustify-content: center;\\n\\tbackground-color: \u003C\u003Ccolor background>>;\\n\\tborder: 4px dashed \u003C\u003Ccolor modal-border>>;\\n\\tfont-weight: bold;\\n\\tfont-size: 150%;\\n\\topacity: 0.8;\\n\\tcolor: \u003C\u003Ccolor foreground>>;\\n}\\n\\n.tc-editor-importpopup {\\n\\twidth: 100%;\\n\\theight: 100%;\\n}\\n\\n.tc-editor-import {\\n\\tposition: absolute;\\n\\ttop: 50%;\\n\\tleft: 50%;\\n\\ttransform: translate(-50%, -50%);\\n\\tbackground: \u003C\u003Ccolor pre-background>>;\\n\\tbox-shadow: 2px 2px 10px \u003C\u003Ccolour foreground>>;\\n\\tpadding: 10px;\\n\\twidth: 96%;\\n\\tborder: 1px solid \u003C\u003Ccolor tiddler-controls-foreground>>;\\n\\ttext-align:center;\\n}\\n\\n.tc-editor-import img {\\n\\tmax-height: 500px;\\n}\\n\\n/*\\n** Storyview Classes\\n*/\\n\\n.tc-viewswitcher .tc-image-button {\\n\\tmargin-right: .3em;\\n}\\n\\n.tc-page-container.tc-page-view-zoomin .tc-tiddler-frame {\\n\\tposition: absolute;\\n\\tdisplay: block;\\n\\twidth: 100%;\\n}\\n\\n@media (min-width: \u003C\u003Csidebarbreakpoint>>) {\\n\\n\\t.tc-page-container.tc-page-view-zoomin .tc-tiddler-frame {\\n\\t\\twidth: calc(100% - 84px);\\n\\t}\\n\\n}\\n\\n/*\\n** Dropdowns\\n*/\\n\\n.tc-btn-dropdown {\\n\\ttext-align: left;\\n}\\n\\n.tc-btn-dropdown svg, .tc-btn-dropdown img {\\n\\theight: 1em;\\n\\twidth: 1em;\\n\\tfill: \u003C\u003Ccolour muted-foreground>>;\\n}\\n\\n.tc-drop-down-wrapper {\\n\\tposition: relative;\\n}\\n\\n.tc-drop-down {\\n\\tmin-width: 380px;\\n\\tborder: 1px solid \u003C\u003Ccolour dropdown-border>>;\\n\\tbackground-color: \u003C\u003Ccolour dropdown-background>>;\\n\\tpadding: 7px 0 7px 0;\\n\\tmargin: 4px 0 0 0;\\n\\twhite-space: nowrap;\\n\\ttext-shadow: none;\\n\\tline-height: 1.4;\\n}\\n\\n.tc-drop-down .tc-drop-down {\\n\\tmargin-left: 14px;\\n}\\n\\n.tc-drop-down button svg, .tc-drop-down a svg  {\\n\\tfill: \u003C\u003Ccolour foreground>>;\\n}\\n\\n.tc-drop-down button:disabled svg {\\n\\tfill: \u003C\u003Ccolour muted-foreground>>;\\n}\\n\\n.tc-drop-down button.tc-btn-invisible:hover svg {\\n\\tfill: \u003C\u003Ccolour background>>;\\n}\\n\\n.tc-drop-down .tc-drop-down-info {\\n\\tpadding-left: 14px;\\n}\\n\\n.tc-drop-down p {\\n\\tpadding: 0 14px 0 14px;\\n}\\n\\n.tc-drop-down svg {\\n\\twidth: 1em;\\n\\theight: 1em;\\n}\\n\\n.tc-drop-down img {\\n\\twidth: 1em;\\n}\\n\\n.tc-drop-down a, .tc-drop-down button {\\n\\tdisplay: block;\\n\\tpadding: 0 14px 0 14px;\\n\\twidth: 100%;\\n\\ttext-align: left;\\n\\tcolor: \u003C\u003Ccolour foreground>>;\\n\\tline-height: 1.4;\\n}\\n\\n.tc-drop-down .tc-tab-set .tc-tab-buttons button {\\n\\tdisplay: inline-block;\\n\\twidth: auto;\\n\\tmargin-bottom: 0px;\\n\\tborder-bottom-left-radius: 0;\\n\\tborder-bottom-right-radius: 0;\\n}\\n\\n.tc-drop-down .tc-prompt {\\n\\tpadding: 0 14px;\\n}\\n\\n.tc-drop-down .tc-chooser {\\n\\tborder: none;\\n}\\n\\n.tc-drop-down .tc-chooser .tc-swatches-horiz {\\n\\tfont-size: 0.4em;\\n\\tpadding-left: 1.2em;\\n}\\n\\n.tc-drop-down .tc-file-input-wrapper {\\n\\twidth: 100%;\\n}\\n\\n.tc-drop-down .tc-file-input-wrapper button {\\n\\tcolor: \u003C\u003Ccolour foreground>>;\\n}\\n\\n.tc-drop-down a:hover, .tc-drop-down button:hover, .tc-drop-down .tc-file-input-wrapper:hover button {\\n\\tcolor: \u003C\u003Ccolour tiddler-link-background>>;\\n\\tbackground-color: \u003C\u003Ccolour tiddler-link-foreground>>;\\n\\ttext-decoration: none;\\n}\\n\\n.tc-drop-down .tc-tab-buttons button {\\n\\tbackground-color: \u003C\u003Ccolour dropdown-tab-background>>;\\n}\\n\\n.tc-drop-down .tc-tab-buttons button.tc-tab-selected {\\n\\tbackground-color: \u003C\u003Ccolour dropdown-tab-background-selected>>;\\n\\tborder-bottom: 1px solid \u003C\u003Ccolour dropdown-tab-background-selected>>;\\n}\\n\\n.tc-drop-down-bullet {\\n\\tdisplay: inline-block;\\n\\twidth: 0.5em;\\n}\\n\\n.tc-drop-down .tc-tab-contents a {\\n\\tpadding: 0 0.5em 0 0.5em;\\n}\\n\\n.tc-block-dropdown-wrapper {\\n\\tposition: relative;\\n}\\n\\n.tc-block-dropdown {\\n\\tposition: absolute;\\n\\tmin-width: 220px;\\n\\tborder: 1px solid \u003C\u003Ccolour dropdown-border>>;\\n\\tbackground-color: \u003C\u003Ccolour dropdown-background>>;\\n\\tpadding: 7px 0;\\n\\tmargin: 4px 0 0 0;\\n\\twhite-space: nowrap;\\n\\tz-index: 1000;\\n\\ttext-shadow: none;\\n}\\n\\n.tc-block-dropdown.tc-search-drop-down {\\n\\tmargin-left: -12px;\\n}\\n\\n.tc-block-dropdown a {\\n\\tdisplay: block;\\n\\tpadding: 4px 14px 4px 14px;\\n}\\n\\n.tc-block-dropdown.tc-search-drop-down a {\\n\\tdisplay: block;\\n\\tpadding: 0px 10px 0px 10px;\\n}\\n\\n.tc-drop-down .tc-dropdown-item-plain,\\n.tc-block-dropdown .tc-dropdown-item-plain {\\n\\tpadding: 4px 14px 4px 7px;\\n}\\n\\n.tc-drop-down .tc-dropdown-item,\\n.tc-block-dropdown .tc-dropdown-item {\\n\\tpadding: 4px 14px 4px 7px;\\n\\tcolor: \u003C\u003Ccolour muted-foreground>>;\\n}\\n\\n.tc-block-dropdown a.tc-tiddlylink:hover {\\n\\tcolor: \u003C\u003Ccolour tiddler-link-background>>;\\n\\tbackground-color: \u003C\u003Ccolour tiddler-link-foreground>>;\\n\\ttext-decoration: none;\\n}\\n\\n.tc-search-results {\\n\\tpadding: 0 7px 0 7px;\\n}\\n\\n.tc-image-chooser, .tc-colour-chooser {\\n\\twhite-space: normal;\\n}\\n\\n.tc-image-chooser a,\\n.tc-colour-chooser a {\\n\\tdisplay: inline-block;\\n\\tvertical-align: top;\\n\\ttext-align: center;\\n\\tposition: relative;\\n}\\n\\n.tc-image-chooser a {\\n\\tborder: 1px solid \u003C\u003Ccolour muted-foreground>>;\\n\\tpadding: 2px;\\n\\tmargin: 2px;\\n\\twidth: 4em;\\n\\theight: 4em;\\n}\\n\\n.tc-colour-chooser a {\\n\\tpadding: 3px;\\n\\twidth: 2em;\\n\\theight: 2em;\\n\\tvertical-align: middle;\\n}\\n\\n.tc-image-chooser a:hover,\\n.tc-colour-chooser a:hover {\\n\\tbackground: \u003C\u003Ccolour primary>>;\\n\\tpadding: 0px;\\n\\tborder: 3px solid \u003C\u003Ccolour primary>>;\\n}\\n\\n.tc-image-chooser a svg,\\n.tc-image-chooser a img {\\n\\tdisplay: inline-block;\\n\\twidth: auto;\\n\\theight: auto;\\n\\tmax-width: 3.5em;\\n\\tmax-height: 3.5em;\\n\\tposition: absolute;\\n\\ttop: 0;\\n\\tbottom: 0;\\n\\tleft: 0;\\n\\tright: 0;\\n\\tmargin: auto;\\n}\\n\\n/* Make search dropdown visible on small screens. issue #7003 */\\n@media (max-width: \u003C\u003Csidebarbreakpoint>>) {\\n\\n\\t.tc-sidebar-search .tc-block-dropdown-wrapper {\\n\\t\\tposition: initial;\\n\\t}\\n\\n}\\n\\n/*\\n** Modals\\n*/\\n\\n.tc-modal-wrapper {\\n\\tposition: fixed;\\n\\toverflow: auto;\\n\\toverflow-y: scroll;\\n\\ttop: 0;\\n\\tright: 0;\\n\\tbottom: 0;\\n\\tleft: 0;\\n\\tz-index: 900;\\n}\\n\\n.tc-modal-backdrop {\\n\\tposition: fixed;\\n\\ttop: 0;\\n\\tright: 0;\\n\\tbottom: 0;\\n\\tleft: 0;\\n\\tz-index: 1000;\\n\\tbackground-color: \u003C\u003Ccolour modal-backdrop>>;\\n}\\n\\n.tc-modal {\\n\\tz-index: 1100;\\n\\tbackground-color: \u003C\u003Ccolour modal-background>>;\\n\\tborder: 1px solid \u003C\u003Ccolour modal-border>>;\\n}\\n\\n@media (max-width: 55em) {\\n\\t.tc-modal {\\n\\t\\tposition: fixed;\\n\\t\\ttop: 1em;\\n\\t\\tleft: 1em;\\n\\t\\tright: 1em;\\n\\t}\\n\\n\\t.tc-modal-body {\\n\\t\\toverflow-y: auto;\\n\\t\\tmax-height: 400px;\\n\\t\\tmax-height: 60vh;\\n\\t}\\n}\\n\\n@media (min-width: 55em) {\\n\\t.tc-modal {\\n\\t\\tposition: fixed;\\n\\t\\ttop: 2em;\\n\\t\\tleft: 25%;\\n\\t\\twidth: 50%;\\n\\t}\\n\\n\\t.tc-modal-body {\\n\\t\\toverflow-y: auto;\\n\\t\\tmax-height: 400px;\\n\\t\\tmax-height: 60vh;\\n\\t}\\n}\\n\\n.tc-modal-header {\\n\\tpadding: 9px 15px;\\n\\tborder-bottom: 1px solid \u003C\u003Ccolour modal-header-border>>;\\n}\\n\\n.tc-modal-header h3 {\\n\\tmargin: 0;\\n\\tline-height: 30px;\\n}\\n\\n.tc-modal-header img, .tc-modal-header svg {\\n\\twidth: 1em;\\n\\theight: 1em;\\n}\\n\\n.tc-modal-body {\\n\\tpadding: 15px;\\n}\\n\\n.tc-modal-footer {\\n\\tpadding: 14px 15px 15px;\\n\\tmargin-bottom: 0;\\n\\ttext-align: right;\\n\\tbackground-color: \u003C\u003Ccolour modal-footer-background>>;\\n\\tborder-top: 1px solid \u003C\u003Ccolour modal-footer-border>>;\\n}\\n\\n.tc-modal-prevent-scroll {\\n\\toverflow: hidden;\\n}\\n\\n/*\\n** Centered modals\\n*/\\n.tc-modal-centered .tc-modal {\\n\\twidth: auto;\\n\\ttop: 50%;\\n\\tleft: 50%;\\n\\ttransform: translate(-50%, -50%) !important;\\n}\\n\\n/*\\n** Notifications\\n*/\\n\\n.tc-notification {\\n\\tposition: fixed;\\n\\ttop: 14px;\\n\\tright: 42px;\\n\\tz-index: 1300;\\n\\tmax-width: 280px;\\n\\tpadding: 0 14px 0 14px;\\n\\tbackground-color: \u003C\u003Ccolour notification-background>>;\\n\\tborder: 1px solid \u003C\u003Ccolour notification-border>>;\\n}\\n\\n/*\\n** Tabs\\n*/\\n\\n.tc-tab-set.tc-vertical {\\n\\tdisplay: -webkit-flex;\\n\\tdisplay: flex;\\n}\\n\\n.tc-tab-buttons {\\n\\tfont-size: 0.85em;\\n\\tpadding-top: 1em;\\n\\tmargin-bottom: -2px;\\n}\\n\\n.tc-tab-buttons.tc-vertical  {\\n\\tz-index: 100;\\n\\tdisplay: block;\\n\\tpadding-top: 14px;\\n\\tvertical-align: top;\\n\\ttext-align: right;\\n\\tmargin-bottom: inherit;\\n\\tmargin-right: -1px;\\n\\tmax-width: 33%;\\n\\t-webkit-flex: 0 0 auto;\\n\\tflex: 0 0 auto;\\n}\\n\\n.tc-tab-buttons button.tc-tab-selected {\\n\\tcolor: \u003C\u003Ccolour tab-foreground-selected>>;\\n\\tbackground-color: \u003C\u003Ccolour tab-background-selected>>;\\n\\tborder-left: 1px solid \u003C\u003Ccolour tab-border-selected>>;\\n\\tborder-top: 1px solid \u003C\u003Ccolour tab-border-selected>>;\\n\\tborder-right: 1px solid \u003C\u003Ccolour tab-border-selected>>;\\n}\\n\\n.tc-tab-buttons button {\\n\\tcolor: \u003C\u003Ccolour tab-foreground>>;\\n\\tpadding: 3px 5px 3px 5px;\\n\\tmargin-right: 0.3em;\\n\\tfont-weight: normal;\\n\\tborder: none;\\n\\tbackground: inherit;\\n\\tbackground-color: \u003C\u003Ccolour tab-background>>;\\n\\tborder-left: 1px solid \u003C\u003Ccolour tab-border>>;\\n\\tborder-top: 1px solid \u003C\u003Ccolour tab-border>>;\\n\\tborder-right: 1px solid \u003C\u003Ccolour tab-border>>;\\n\\tborder-top-left-radius: 2px;\\n\\tborder-top-right-radius: 2px;\\n\\tborder-bottom-left-radius: 0;\\n\\tborder-bottom-right-radius: 0;\\n}\\n\\n.tc-tab-buttons.tc-vertical button {\\n\\tdisplay: block;\\n\\twidth: 100%;\\n\\tmargin-top: 3px;\\n\\tmargin-right: 0;\\n\\ttext-align: right;\\n\\tbackground-color: \u003C\u003Ccolour tab-background>>;\\n\\tborder-left: 1px solid \u003C\u003Ccolour tab-border>>;\\n\\tborder-bottom: 1px solid \u003C\u003Ccolour tab-border>>;\\n\\tborder-right: none;\\n\\tborder-top-left-radius: 2px;\\n\\tborder-bottom-left-radius: 2px;\\n\\tborder-top-right-radius: 0;\\n\\tborder-bottom-right-radius: 0;\\n}\\n\\n.tc-tab-buttons.tc-vertical button.tc-tab-selected {\\n\\tbackground-color: \u003C\u003Ccolour tab-background-selected>>;\\n\\tborder-right: 1px solid \u003C\u003Ccolour tab-background-selected>>;\\n}\\n\\n.tc-tab-divider {\\n\\tborder-top: 1px solid \u003C\u003Ccolour tab-divider>>;\\n}\\n\\n.tc-tab-divider.tc-vertical  {\\n\\tdisplay: none;\\n}\\n\\n.tc-tab-content {\\n\\tmargin-top: 14px;\\n}\\n\\n.tc-tab-content.tc-vertical  {\\n\\tdisplay: inline-block;\\n\\tvertical-align: top;\\n\\tpadding-top: 0;\\n\\tpadding-left: 14px;\\n\\tborder-left: 1px solid \u003C\u003Ccolour tab-border>>;\\n\\t-webkit-flex: 1 0 70%;\\n\\tflex: 1 0 70%;\\n\\toverflow: auto;\\n}\\n\\n.tc-sidebar-lists .tc-tab-buttons {\\n\\tmargin-bottom: -1px;\\n}\\n\\n.tc-sidebar-lists .tc-tab-buttons button.tc-tab-selected {\\n\\tbackground-color: \u003C\u003Ccolour sidebar-tab-background-selected>>;\\n\\tcolor: \u003C\u003Ccolour sidebar-tab-foreground-selected>>;\\n\\tborder-left: 1px solid \u003C\u003Ccolour sidebar-tab-border-selected>>;\\n\\tborder-top: 1px solid \u003C\u003Ccolour sidebar-tab-border-selected>>;\\n\\tborder-right: 1px solid \u003C\u003Ccolour sidebar-tab-border-selected>>;\\n}\\n\\n.tc-sidebar-lists .tc-tab-buttons button {\\n\\tbackground-color: \u003C\u003Ccolour sidebar-tab-background>>;\\n\\tcolor: \u003C\u003Ccolour sidebar-tab-foreground>>;\\n\\tborder-left: 1px solid \u003C\u003Ccolour sidebar-tab-border>>;\\n\\tborder-top: 1px solid \u003C\u003Ccolour sidebar-tab-border>>;\\n\\tborder-right: 1px solid \u003C\u003Ccolour sidebar-tab-border>>;\\n}\\n\\n.tc-sidebar-lists .tc-tab-divider {\\n\\tborder-top: 1px solid \u003C\u003Ccolour sidebar-tab-divider>>;\\n}\\n\\n.tc-more-sidebar > .tc-tab-set > .tc-tab-buttons > button {\\n\\tdisplay: block;\\n\\twidth: 100%;\\n\\tbackground-color: \u003C\u003Ccolour sidebar-tab-background>>;\\n\\tborder-top: none;\\n\\tborder-left: none;\\n\\tborder-bottom: none;\\n\\tborder-right: 1px solid #ccc;\\n\\tmargin-bottom: inherit;\\n}\\n\\n.tc-more-sidebar > .tc-tab-set > .tc-tab-buttons > button.tc-tab-selected {\\n\\tbackground-color: \u003C\u003Ccolour sidebar-tab-background-selected>>;\\n\\tborder: none;\\n}\\n\\n/*\\n** Manager\\n*/\\n\\n.tc-manager-wrapper {\\n\\n}\\n\\n.tc-manager-controls {\\n\\n}\\n\\n.tc-manager-control {\\n\\tmargin: 0.5em 0;\\n}\\n\\n.tc-manager-control select {\\n\\tmax-width: 100%;\\n}\\n\\n.tc-manager-list {\\n\\twidth: 100%;\\n\\tborder-top: 1px solid \u003C\u003Ccolour muted-foreground>>;\\n\\tborder-left: 1px solid \u003C\u003Ccolour muted-foreground>>;\\n\\tborder-right: 1px solid \u003C\u003Ccolour muted-foreground>>;\\n}\\n\\n.tc-manager-list-item {\\n\\n}\\n\\n.tc-manager-list-item-heading {\\n\\tdisplay: block;\\n\\twidth: 100%;\\n\\ttext-align: left;\\n\\tborder-bottom: 1px solid \u003C\u003Ccolour muted-foreground>>;\\n\\tpadding: 3px;\\n}\\n\\n.tc-manager-list-item-heading-selected {\\n\\tfont-weight: bold;\\n\\tcolor: \u003C\u003Ccolour background>>;\\n\\tfill: \u003C\u003Ccolour background>>;\\n\\tbackground-color: \u003C\u003Ccolour foreground>>;\\n}\\n\\n.tc-manager-list-item-heading:hover {\\n\\tbackground: \u003C\u003Ccolour primary>>;\\n\\tcolor: \u003C\u003Ccolour background>>;\\n}\\n\\n.tc-manager-list-item-content {\\n\\tdisplay: flex;\\n}\\n\\n.tc-manager-list-item-content-sidebar {\\n\\tflex: 1 0;\\n\\tbackground: \u003C\u003Ccolour tiddler-editor-background>>;\\n\\tborder-right: 0.5em solid \u003C\u003Ccolour muted-foreground>>;\\n\\tborder-bottom: 0.5em solid \u003C\u003Ccolour muted-foreground>>;\\n\\twhite-space: nowrap;\\n}\\n\\n.tc-manager-list-item-content-item-heading {\\n\\tdisplay: block;\\n\\twidth: 100%;\\n\\ttext-align: left;\\n\\tbackground: \u003C\u003Ccolour muted-foreground>>;\\n\\ttext-transform: uppercase;\\n\\tfont-size: 0.6em;\\n\\tfont-weight: bold;\\n\\tpadding: 0.5em 0 0.5em 0;\\n}\\n\\n.tc-manager-list-item-content-item-body {\\n\\tpadding: 0 0.5em 0 0.5em;\\n}\\n\\n.tc-manager-list-item-content-item-body > pre {\\n\\tmargin: 0.5em 0 0.5em 0;\\n\\tborder: none;\\n\\tbackground: inherit;\\n}\\n\\n.tc-manager-list-item-content-tiddler {\\n\\tflex: 3 1;\\n\\tborder-left: 0.5em solid \u003C\u003Ccolour muted-foreground>>;\\n\\tborder-right: 0.5em solid \u003C\u003Ccolour muted-foreground>>;\\n\\tborder-bottom: 0.5em solid \u003C\u003Ccolour muted-foreground>>;\\n}\\n\\n.tc-manager-list-item-content-item-body > table {\\n\\tborder: none;\\n\\tpadding: 0;\\n\\tmargin: 0;\\n}\\n\\n.tc-manager-list-item-content-item-body > table td {\\n\\tborder: none;\\n}\\n\\n.tc-manager-icon-editor > button {\\n\\twidth: 100%;\\n}\\n\\n.tc-manager-icon-editor > button > svg,\\n.tc-manager-icon-editor > button > button {\\n\\twidth: 100%;\\n\\theight: auto;\\n}\\n\\n/*\\n** Import table\\n*/\\n\\n.tc-import-table {\\n\\twidth: 100%;\\n}\\n\\n.tc-import-table svg.tc-image-edit-button {\\n\\tmax-width: unset;\\n}\\n\\n.tc-import-table th:first-of-type {\\n\\twidth: 10%;\\n}\\n\\n.tc-import-table th:last-of-type {\\n\\twidth: 30%;\\n}\\n\\n.tc-import-table .tc-row-disabled {\\n\\tbackground: \u003C\u003Ccolour very-muted-foreground>>10;\\n\\topacity: 0.8;\\n}\\n\\n.tc-import-table .tc-row-warning {\\n\\tbackground: \u003C\u003Ccolour diff-delete-background>>50;\\n}\\n\\n/*\\n** Alerts\\n*/\\n\\n.tc-alerts {\\n\\tposition: fixed;\\n\\ttop: 28px;\\n\\tleft: 0;\\n\\tright: 0;\\n\\tmax-width: 50%;\\n\\tz-index: 20000;\\n}\\n\\n.tc-alert {\\n\\tposition: relative;\\n\\tmargin: 14px;\\n\\tpadding: 7px;\\n\\tborder: 1px solid \u003C\u003Ccolour alert-border>>;\\n\\tbackground-color: \u003C\u003Ccolour alert-background>>;\\n}\\n\\n.tc-alert-toolbar {\\n\\tposition: absolute;\\n\\ttop: 7px;\\n\\tright: 7px;\\n\\tline-height: 0;\\n}\\n\\n.tc-alert-toolbar svg {\\n\\tfill: \u003C\u003Ccolour alert-muted-foreground>>;\\n}\\n\\n.tc-alert-subtitle {\\n\\tcolor: \u003C\u003Ccolour alert-muted-foreground>>;\\n\\tfont-weight: bold;\\n\\tfont-size: 0.8em;\\n\\tmargin-bottom: 0.5em;\\n}\\n\\n.tc-alert-body > p {\\n\\tmargin: 0;\\n}\\n\\n.tc-alert-highlight {\\n\\tcolor: \u003C\u003Ccolour alert-highlight>>;\\n}\\n\\n@media (min-width: \u003C\u003Csidebarbreakpoint>>) {\\n\\n\\t.tc-static-alert {\\n\\t\\tposition: relative;\\n\\t}\\n\\n\\t.tc-static-alert-inner {\\n\\t\\tposition: absolute;\\n\\t\\tz-index: 100;\\n\\t}\\n\\n}\\n\\n.tc-static-alert-inner {\\n\\tpadding: 0 2px 2px 42px;\\n\\tcolor: \u003C\u003Ccolour static-alert-foreground>>;\\n}\\n\\n/*\\n** Floating drafts list\\n*/\\n\\n.tc-drafts-list {\\n\\tz-index: 2000;\\n\\tposition: fixed;\\n\\tfont-size: 0.8em;\\n\\tleft: 0;\\n\\tbottom: 0;\\n}\\n\\n.tc-drafts-list a {\\n\\tmargin: 0 0.5em;\\n\\tpadding: 4px 4px;\\n\\tborder-top-left-radius: 4px;\\n\\tborder-top-right-radius: 4px;\\n\\tborder: 1px solid \u003C\u003Ccolour background>>;\\n\\tborder-bottom: none;\\n\\tbackground: \u003C\u003Ccolour dirty-indicator>>;\\n\\tcolor: \u003C\u003Ccolour background>>;\\n\\tfill: \u003C\u003Ccolour background>>;\\n}\\n\\n.tc-drafts-list a:hover {\\n\\ttext-decoration: none;\\n\\tbackground: \u003C\u003Ccolour foreground>>;\\n\\tcolor: \u003C\u003Ccolour background>>;\\n\\tfill: \u003C\u003Ccolour background>>;\\n}\\n\\n.tc-drafts-list a svg {\\n\\twidth: 1em;\\n\\theight: 1em;\\n\\tvertical-align: text-bottom;\\n}\\n\\n/*\\n** Control panel\\n*/\\n\\n.tc-control-panel td {\\n\\tpadding: 4px;\\n}\\n\\n.tc-control-panel table, .tc-control-panel table input, .tc-control-panel table textarea {\\n\\twidth: 100%;\\n}\\n\\n.tc-control-panel-setting {\\n\\tborder-top: 1px solid \u003C\u003Ccolour blockquote-bar>>;\\n}\\n\\n.tc-plugin-info {\\n\\tdisplay: flex;\\n\\ttext-shadow: none;\\n\\tborder: 1px solid \u003C\u003Ccolour muted-foreground>>;\\n\\tfill: \u003C\u003Ccolour muted-foreground>>;\\n\\tbackground-color: \u003C\u003Ccolour background>>;\\n\\tmargin: 0.5em 0 0.5em 0;\\n\\tpadding: 4px;\\n\\talign-items: center;\\n}\\n\\n.tc-sidebar-lists a.tc-tiddlylink.tc-plugin-info {\\n\\tcolor: \u003C\u003Ccolour tiddler-link-foreground>>;\\n}\\n\\n\\n.tc-plugin-info-sub-plugins .tc-plugin-info {\\n\\tmargin: 0.5em;\\n\\tbackground: \u003C\u003Ccolour background>>;\\n}\\n\\n.tc-plugin-info-sub-plugin-indicator {\\n\\tmargin: -16px 1em 0 2em;\\n}\\n\\n.tc-plugin-info-sub-plugin-indicator button {\\n\\tcolor: \u003C\u003Ccolour background>>;\\n\\tbackground: \u003C\u003Ccolour foreground>>;\\n\\tborder-radius: 8px;\\n\\tpadding: 2px 7px;\\n\\tfont-size: 0.75em;\\n}\\n\\n.tc-plugin-info-sub-plugins .tc-plugin-info-dropdown {\\n\\tmargin-left: 1em;\\n\\tmargin-right: 1em;\\n}\\n\\n.tc-plugin-info-disabled {\\n\\tbackground: -webkit-repeating-linear-gradient(45deg, #ff0, #ff0 10px, #eee 10px, #eee 20px);\\n\\tbackground: repeating-linear-gradient(45deg, #ff0, #ff0 10px, #eee 10px, #eee 20px);\\n}\\n\\n.tc-plugin-info-disabled:hover {\\n\\tbackground: -webkit-repeating-linear-gradient(45deg, #aa0, #aa0 10px, #888 10px, #888 20px);\\n\\tbackground: repeating-linear-gradient(45deg, #aa0, #aa0 10px, #888 10px, #888 20px);\\n}\\n\\na.tc-tiddlylink.tc-plugin-info:hover {\\n\\ttext-decoration: none;\\n\\tbackground-color: \u003C\u003Ccolour primary>>;\\n\\tcolor: \u003C\u003Ccolour background>>;\\n\\tfill: \u003C\u003Ccolour foreground>>;\\n}\\n\\na.tc-tiddlylink.tc-plugin-info:hover > .tc-plugin-info-chunk > svg {\\n\\tfill: \u003C\u003Ccolour background>>;\\n}\\n\\n.tc-plugin-info-chunk {\\n\\tmargin: 2px;\\n}\\n\\n.tc-plugin-info-chunk.tc-plugin-info-toggle {\\n\\tflex-grow: 0;\\n\\tflex-shrink: 0;\\n\\tline-height: 1;\\n}\\n\\n.tc-plugin-info-chunk.tc-plugin-info-icon {\\n\\tflex-grow: 0;\\n\\tflex-shrink: 0;\\n\\tline-height: 1;\\n}\\n\\n.tc-plugin-info-chunk.tc-plugin-info-description {\\n\\tflex-grow: 1;\\n}\\n\\n.tc-plugin-info-chunk .tc-plugin-info-stability {\\n\\tmargin-right: 4px;\\n\\tpadding: 1px 3px;\\n\\tfont-size: 0.8em;\\n\\tborder-radius: 4px;\\n\\tfont-weight: bold;\\n}\\n\\n.tc-plugin-info-chunk .tc-plugin-info-stability-stable {\\n\\tborder: 1px solid \u003C\u003Ccolour stability-stable>>;\\n\\tcolor: \u003C\u003Ccolour stability-stable>>;\\n}\\n\\n.tc-plugin-info-chunk .tc-plugin-info-stability-experimental {\\n\\tborder: 1px solid \u003C\u003Ccolour stability-experimental>>;\\n\\tcolor: \u003C\u003Ccolour stability-experimental>>;\\n}\\n\\n.tc-plugin-info-chunk .tc-plugin-info-stability-deprecated {\\n\\tborder: 1px solid \u003C\u003Ccolour stability-deprecated>>;\\n\\tcolor: \u003C\u003Ccolour stability-deprecated>>;\\n}\\n\\n.tc-plugin-info-chunk .tc-plugin-info-stability-legacy {\\n\\tborder: 1px solid \u003C\u003Ccolour stability-legacy>>;\\n\\tcolor: \u003C\u003Ccolour stability-legacy>>;\\n}\\n\\n.tc-plugin-info-chunk.tc-plugin-info-buttons {\\n\\tfont-size: 0.8em;\\n\\tline-height: 1.2;\\n\\tflex-grow: 0;\\n\\tflex-shrink: 0;\\n\\ttext-align: right;\\n}\\n\\n.tc-plugin-info-chunk.tc-plugin-info-description h1 {\\n\\tfont-size: 1em;\\n\\tline-height: 1.2;\\n\\tmargin: 2px 0 2px 0;\\n}\\n\\n.tc-plugin-info-chunk.tc-plugin-info-description h2 {\\n\\tfont-size: 0.8em;\\n\\tline-height: 1.2;\\n\\tmargin: 2px 0 2px 0;\\n}\\n\\n.tc-plugin-info-chunk.tc-plugin-info-description div {\\n\\tfont-size: 0.8em;\\n\\tline-height: 1.2;\\n\\tmargin: 2px 0 2px 0;\\n}\\n\\n.tc-plugin-info-chunk.tc-plugin-info-toggle img, .tc-plugin-info-chunk.tc-plugin-info-toggle svg {\\n\\twidth: 1em;\\n\\theight: 1em;\\n}\\n\\n.tc-plugin-info-chunk.tc-plugin-info-icon img, .tc-plugin-info-chunk.tc-plugin-info-icon svg {\\n\\twidth: 2em;\\n\\theight: 2em;\\n}\\n\\n.tc-plugin-info-dropdown {\\n\\tborder: 1px solid \u003C\u003Ccolour muted-foreground>>;\\n\\tbackground: \u003C\u003Ccolour background>>;\\n\\tmargin-top: -8px;\\n}\\n\\n.tc-plugin-info-dropdown-message {\\n\\tbackground: \u003C\u003Ccolour message-background>>;\\n\\tpadding: 0.5em 1em 0.5em 1em;\\n\\tfont-weight: bold;\\n\\tfont-size: 0.8em;\\n}\\n\\n.tc-plugin-info-dropdown-body {\\n\\tpadding: 1em 1em 0 1em;\\n\\tbackground: \u003C\u003Ccolour background>>;\\n}\\n\\n.tc-plugin-info-sub-plugins {\\n\\tpadding: 0.5em;\\n\\tmargin: 0 1em 1em 1em;\\n\\tbackground: \u003C\u003Ccolour notification-background>>;\\n}\\n\\n.tc-install-plugin {\\n\\tfont-weight: bold;\\n\\tbackground: green;\\n\\tcolor: white;\\n\\tfill: white;\\n\\tborder-radius: 4px;\\n\\tpadding: 3px;\\n}\\n\\n.tc-install-plugin.tc-reinstall-downgrade {\\n\\tbackground: red;\\n}\\n\\n.tc-install-plugin.tc-reinstall {\\n\\tbackground: blue;\\n}\\n\\n.tc-install-plugin.tc-reinstall-upgrade {\\n\\tbackground: orange;\\n}\\n\\n.tc-check-list {\\n\\tline-height: 2em;\\n}\\n\\n.tc-check-list .tc-image-button {\\n\\theight: 1.5em;\\n}\\n\\n/*\\n** Message boxes\\n*/\\n\\n.tc-message-box {\\n\\tborder: 1px solid \u003C\u003Ccolour message-border>>;\\n\\tbackground: \u003C\u003Ccolour message-background>>;\\n\\tpadding: 0px 21px 0px 21px;\\n\\tfont-size: 12px;\\n\\tline-height: 18px;\\n\\tcolor: \u003C\u003Ccolour message-foreground>>;\\n}\\n\\n.tc-message-box svg {\\n\\twidth: 1em;\\n\\theight: 1em;\\n\\tvertical-align: text-bottom;\\n}\\n\\n/*\\n** Pictures\\n*/\\n\\n.tc-bordered-image {\\n\\tborder: 1px solid \u003C\u003Ccolour muted-foreground>>;\\n\\tpadding: 5px;\\n\\tmargin: 5px;\\n}\\n\\n/*\\n** Floats\\n*/\\n\\n.tc-float-right {\\n\\tfloat: right;\\n}\\n\\n/*\\n** Chooser\\n*/\\n\\n.tc-chooser {\\n\\tborder-right: 1px solid \u003C\u003Ccolour table-header-background>>;\\n\\tborder-left: 1px solid \u003C\u003Ccolour table-header-background>>;\\n}\\n\\n\\n.tc-chooser-item {\\n\\tborder-bottom: 1px solid \u003C\u003Ccolour table-header-background>>;\\n\\tborder-top: 1px solid \u003C\u003Ccolour table-header-background>>;\\n\\tpadding: 2px 4px 2px 14px;\\n}\\n\\n.tc-drop-down .tc-chooser-item {\\n\\tpadding: 2px;\\n}\\n\\n.tc-chosen,\\n.tc-chooser-item:hover {\\n\\tbackground-color: \u003C\u003Ccolour table-header-background>>;\\n\\tborder-color: \u003C\u003Ccolour table-footer-background>>;\\n}\\n\\n.tc-chosen .tc-tiddlylink {\\n\\tcursor:default;\\n}\\n\\n.tc-chooser-item .tc-tiddlylink {\\n\\tdisplay: block;\\n\\ttext-decoration: none;\\n\\tbackground-color: transparent;\\n}\\n\\n.tc-chooser-item:hover .tc-tiddlylink:hover {\\n\\ttext-decoration: none;\\n}\\n\\n.tc-drop-down .tc-chosen .tc-tiddlylink,\\n.tc-drop-down .tc-chooser-item .tc-tiddlylink:hover {\\n\\tcolor: \u003C\u003Ccolour foreground>>;\\n}\\n\\n.tc-chosen > .tc-tiddlylink:before {\\n\\tmargin-left: -10px;\\n\\tposition: relative;\\n\\tcontent: \\\"» \\\";\\n}\\n\\n.tc-chooser-item svg,\\n.tc-chooser-item img{\\n\\twidth: 1em;\\n\\theight: 1em;\\n\\tvertical-align: middle;\\n}\\n\\n.tc-language-chooser .tc-image-button img {\\n\\twidth: 2em;\\n\\tvertical-align: -0.15em;\\n}\\n\\n/*\\n** Palette swatches\\n*/\\n\\n.tc-swatches-horiz {\\n}\\n\\n.tc-swatches-horiz .tc-swatch {\\n\\tdisplay: inline-block;\\n}\\n\\n.tc-swatch {\\n\\twidth: 2em;\\n\\theight: 2em;\\n\\tmargin: 0.4em;\\n\\tborder: 1px solid #888;\\n}\\n\\ninput.tc-palette-manager-colour-input {\\n\\twidth: 100%;\\n\\tpadding: 0;\\n}\\n\\n/*\\n** Table of contents\\n*/\\n\\n.tc-sidebar-lists .tc-table-of-contents {\\n\\twhite-space: nowrap;\\n}\\n\\n.tc-table-of-contents button,\\n.tc-table-of-contents .toc-item-muted {\\n\\tcolor: \u003C\u003Ccolour sidebar-foreground>>;\\n}\\n\\n.tc-table-of-contents svg {\\n\\twidth: 0.7em;\\n\\theight: 0.7em;\\n\\tvertical-align: middle;\\n\\tfill: \u003C\u003Ccolour sidebar-foreground>>;\\n}\\n\\n.tc-table-of-contents ol {\\n\\tlist-style-type: none;\\n\\tpadding-left: 0;\\n}\\n\\n.tc-table-of-contents ol ol {\\n\\tpadding-left: 1em;\\n}\\n\\n.tc-table-of-contents li {\\n\\tfont-size: 1.0em;\\n\\tfont-weight: bold;\\n}\\n\\n.tc-table-of-contents li a {\\n\\tfont-weight: bold;\\n}\\n\\n.tc-table-of-contents li li {\\n\\tfont-size: 0.95em;\\n\\tfont-weight: normal;\\n\\tline-height: 1.4;\\n}\\n\\n.tc-table-of-contents li li a {\\n\\tfont-weight: normal;\\n}\\n\\n.tc-table-of-contents li li li {\\n\\tfont-size: 0.95em;\\n\\tfont-weight: normal;\\n\\tline-height: 1.5;\\n}\\n\\n.tc-table-of-contents li li li li {\\n\\tfont-size: 0.95em;\\n\\tfont-weight: normal;\\n}\\n\\n.tc-tabbed-table-of-contents {\\n\\tdisplay: -webkit-flex;\\n\\tdisplay: flex;\\n}\\n\\n.tc-tabbed-table-of-contents .tc-table-of-contents {\\n\\tz-index: 100;\\n\\tdisplay: inline-block;\\n\\tpadding-left: 1em;\\n\\tmax-width: 50%;\\n\\t-webkit-flex: 0 0 auto;\\n\\tflex: 0 0 auto;\\n\\tbackground: \u003C\u003Ccolour tab-background>>;\\n\\tborder-left: 1px solid \u003C\u003Ccolour tab-border>>;\\n\\tborder-top: 1px solid \u003C\u003Ccolour tab-border>>;\\n\\tborder-bottom: 1px solid \u003C\u003Ccolour tab-border>>;\\n}\\n\\n.tc-tabbed-table-of-contents .tc-table-of-contents .toc-item > a,\\n.tc-tabbed-table-of-contents .tc-table-of-contents .toc-item-selected > a {\\n\\tdisplay: block;\\n\\tpadding: 0.12em 1em 0.12em 0.25em;\\n}\\n\\n.tc-tabbed-table-of-contents .tc-table-of-contents .toc-item > a {\\n\\tborder-top: 1px solid \u003C\u003Ccolour tab-background>>;\\n\\tborder-left: 1px solid \u003C\u003Ccolour tab-background>>;\\n\\tborder-bottom: 1px solid \u003C\u003Ccolour tab-background>>;\\n}\\n\\n.tc-tabbed-table-of-contents .tc-table-of-contents .toc-item > a:hover {\\n\\ttext-decoration: none;\\n\\tborder-top: 1px solid \u003C\u003Ccolour tab-border>>;\\n\\tborder-left: 1px solid \u003C\u003Ccolour tab-border>>;\\n\\tborder-bottom: 1px solid \u003C\u003Ccolour tab-border>>;\\n\\tbackground: \u003C\u003Ccolour tab-border>>;\\n}\\n\\n.tc-tabbed-table-of-contents .tc-table-of-contents .toc-item-selected > a {\\n\\tborder-top: 1px solid \u003C\u003Ccolour tab-border>>;\\n\\tborder-left: 1px solid \u003C\u003Ccolour tab-border>>;\\n\\tborder-bottom: 1px solid \u003C\u003Ccolour tab-border>>;\\n\\tbackground: \u003C\u003Ccolour background>>;\\n\\tmargin-right: -1px;\\n}\\n\\n.tc-tabbed-table-of-contents .tc-table-of-contents .toc-item-selected > a:hover {\\n\\ttext-decoration: none;\\n}\\n\\n.tc-tabbed-table-of-contents .tc-tabbed-table-of-contents-content {\\n\\tdisplay: inline-block;\\n\\tvertical-align: top;\\n\\tpadding-left: 1.5em;\\n\\tpadding-right: 1.5em;\\n\\tborder: 1px solid \u003C\u003Ccolour tab-border>>;\\n\\t-webkit-flex: 1 0 50%;\\n\\tflex: 1 0 50%;\\n}\\n\\n/*\\n** Dirty indicator\\n*/\\n\\nhtml body svg.tc-image-save-button-dynamic .tc-image-save-button-dynamic-clean {\\n\\tvisibility: visible;\\n}\\n\\nhtml body svg.tc-image-save-button-dynamic .tc-image-save-button-dynamic-dirty {\\n\\tvisibility: hidden;\\n}\\n\\nhtml body.tc-dirty svg.tc-image-save-button-dynamic .tc-image-save-button-dynamic-clean {\\n\\tvisibility: hidden;\\n}\\n\\nhtml body.tc-dirty svg.tc-image-save-button-dynamic .tc-image-save-button-dynamic-dirty {\\n\\tvisibility: visible;\\n}\\n\\nhtml body.tc-dirty span.tc-dirty-indicator, html body.tc-dirty span.tc-dirty-indicator svg {\\n\\tfill: \u003C\u003Ccolour dirty-indicator>>;\\n\\tcolor: \u003C\u003Ccolour dirty-indicator>>;\\n}\\n\\n/*\\n** File inputs\\n*/\\n\\n.tc-file-input-wrapper {\\n\\tposition: relative;\\n\\toverflow: hidden;\\n\\tdisplay: inline-block;\\n\\tvertical-align: middle;\\n}\\n\\n.tc-file-input-wrapper input[type=file] {\\n\\tposition: absolute;\\n\\ttop: 0;\\n\\tleft: 0;\\n\\tright: 0;\\n\\tbottom: 0;\\n\\tfont-size: 999px;\\n\\tmax-width: 100%;\\n\\tmax-height: 100%;\\n\\tfilter: alpha(opacity=0);\\n\\topacity: 0;\\n\\toutline: none;\\n\\tbackground: white;\\n\\tcursor: pointer;\\n\\tdisplay: inline-block;\\n}\\n\\n::-webkit-file-upload-button {\\n\\tcursor:pointer;\\n}\\n\\n/*\\n** Thumbnail macros\\n*/\\n\\n.tc-thumbnail-wrapper {\\n\\tposition: relative;\\n\\tdisplay: inline-block;\\n\\tmargin: 6px;\\n\\tvertical-align: top;\\n}\\n\\n.tc-thumbnail-right-wrapper {\\n\\tfloat:right;\\n\\tmargin: 0.5em 0 0.5em 0.5em;\\n}\\n\\n.tc-thumbnail-image {\\n\\ttext-align: center;\\n\\toverflow: hidden;\\n\\tborder-radius: 3px;\\n}\\n\\n.tc-thumbnail-image svg,\\n.tc-thumbnail-image img {\\n\\tfilter: alpha(opacity=1);\\n\\topacity: 1;\\n\\tmin-width: 100%;\\n\\tmin-height: 100%;\\n\\tmax-width: 100%;\\n}\\n\\n.tc-thumbnail-wrapper:hover .tc-thumbnail-image svg,\\n.tc-thumbnail-wrapper:hover .tc-thumbnail-image img {\\n\\tfilter: alpha(opacity=0.8);\\n\\topacity: 0.8;\\n}\\n\\n.tc-thumbnail-background {\\n\\tposition: absolute;\\n\\tborder-radius: 3px;\\n}\\n\\n.tc-thumbnail-icon svg,\\n.tc-thumbnail-icon img {\\n\\twidth: 3em;\\n\\theight: 3em;\\n\\t\u003C\u003Cfilter \\\"drop-shadow(2px 2px 4px rgba(0,0,0,0.3))\\\">>\\n}\\n\\n.tc-thumbnail-wrapper:hover .tc-thumbnail-icon svg,\\n.tc-thumbnail-wrapper:hover .tc-thumbnail-icon img {\\n\\tfill: #fff;\\n\\t\u003C\u003Cfilter \\\"drop-shadow(3px 3px 4px rgba(0,0,0,0.6))\\\">>\\n}\\n\\n.tc-thumbnail-icon {\\n\\tposition: absolute;\\n\\ttop: 0;\\n\\tleft: 0;\\n\\tright: 0;\\n\\tbottom: 0;\\n\\tdisplay: -webkit-flex;\\n\\t-webkit-align-items: center;\\n\\t-webkit-justify-content: center;\\n\\tdisplay: flex;\\n\\talign-items: center;\\n\\tjustify-content: center;\\n}\\n\\n.tc-thumbnail-caption {\\n\\tposition: absolute;\\n\\tbackground-color: #777;\\n\\tcolor: #fff;\\n\\ttext-align: center;\\n\\tbottom: 0;\\n\\twidth: 100%;\\n\\tfilter: alpha(opacity=0.9);\\n\\topacity: 0.9;\\n\\tline-height: 1.4;\\n\\tborder-bottom-left-radius: 3px;\\n\\tborder-bottom-right-radius: 3px;\\n}\\n\\n.tc-thumbnail-wrapper:hover .tc-thumbnail-caption {\\n\\tfilter: alpha(opacity=1);\\n\\topacity: 1;\\n}\\n\\n/*\\n** Diffs\\n*/\\n\\n.tc-diff-equal {\\n\\tbackground-color: \u003C\u003Ccolour diff-equal-background>>;\\n\\tcolor: \u003C\u003Ccolour diff-equal-foreground>>;\\n}\\n\\n.tc-diff-insert {\\n\\tbackground-color: \u003C\u003Ccolour diff-insert-background>>;\\n\\tcolor: \u003C\u003Ccolour diff-insert-foreground>>;\\n}\\n\\n.tc-diff-delete {\\n\\tbackground-color: \u003C\u003Ccolour diff-delete-background>>;\\n\\tcolor: \u003C\u003Ccolour diff-delete-foreground>>;\\n}\\n\\n.tc-diff-invisible {\\n\\tbackground-color: \u003C\u003Ccolour diff-invisible-background>>;\\n\\tcolor: \u003C\u003Ccolour diff-invisible-foreground>>;\\n}\\n\\n.tc-diff-tiddlers th {\\n\\ttext-align: right;\\n\\tbackground: \u003C\u003Ccolour background>>;\\n\\tfont-weight: normal;\\n\\tfont-style: italic;\\n}\\n\\n.tc-diff-tiddlers pre {\\n\\tmargin: 0;\\n\\tpadding: 0;\\n\\tborder: none;\\n\\tbackground: none;\\n}\\n\\n/*\\n** Errors\\n*/\\n\\n.tc-error {\\n\\tbackground: #f00;\\n\\tcolor: #fff;\\n}\\n\\n/*\\n** Tree macro\\n*/\\n\\n.tc-tree div {\\n\\tpadding-left: 14px;\\n}\\n\\n.tc-tree ol {\\n\\tlist-style-type: none;\\n\\tpadding-left: 0;\\n\\tmargin-top: 0;\\n}\\n\\n.tc-tree ol ol {\\n\\tpadding-left: 1em;\\n}\\n\\n.tc-tree button {\\n\\tcolor: #acacac;\\n}\\n\\n.tc-tree svg {\\n\\tfill: #acacac;\\n}\\n\\n.tc-tree span svg {\\n\\twidth: 1em;\\n\\theight: 1em;\\n\\tvertical-align: baseline;\\n}\\n\\n.tc-tree li span {\\n\\tcolor: lightgray;\\n}\\n\\nselect {\\n\\tcolor: \u003C\u003Ccolour select-tag-foreground>>;\\n\\tbackground: \u003C\u003Ccolour select-tag-background>>;\\n}\\n\\n/*\\n** Translink macro\\n*/\\n\\n.tc-translink {\\n\\tbackground-color: \u003C\u003Ccolour pre-background>>;\\n\\tborder: 1px solid \u003C\u003Ccolour pre-border>>;\\n\\tpadding: 0 3px;\\n\\tborder-radius: 3px;\\n}\\n\\ndiv.tc-translink > div {\\n\\tmargin: 1em;\\n}\\n\\ndiv.tc-translink > div > a:first-child > h1 {\\n\\tfont-size: 1.2em;\\n\\tfont-weight: bold;\\n}\\n\\nspan.tc-translink > a:first-child {\\n\\tfont-weight: bold;\\n}\\n\\n/*\\n** Classes for displaying globals\\n*/\\n\\n.tc-global-tiddler-body {\\n\\tpadding: 0.25em;\\n\\tborder: 1px solid \u003C\u003Ccolour foreground>>;\\n\\tbackground-color: \u003C\u003Ccolour muted-foreground>>;\\n\\tborder-radius: 3px;\\n}\\n\\n.tc-global-tiddler-body-heading {\\n\\tmargin: 0 0 0.25em 0;\\n\\tfont-weight: normal;\\n}\\n\\n.tc-global-tiddler-body-type {\\n\\tmargin: 0 0 0.25em 0;\\n\\tborder-bottom: 1px solid \u003C\u003Ccolour foreground>>;\\n}\\n\\n.tc-global-tiddler-body-details {\\n\\tbackground-color: \u003C\u003Ccolour background>>;\\n}\\n\\n.tc-global-tiddler-body pre {\\n\\tmargin: 0;\\n\\tborder: 1px solid \u003C\u003Ccolour foreground>>;\\n}\\n\\n/*\\n** Utility classes for SVG icons\\n*/\\n\\n.tc-fill-background {\\n\\tfill: \u003C\u003Ccolour background>>;\\n}\\n\\n.tc-network-activity-background {\\n\\tfill: \u003C\u003Ccolour network-activity-foreground>>;\\n}\\n\\n/*\\n** Test Cases\\n*/\\n\\n.tc-test-case-wrapper {\\n\\tborder: 1px solid \u003C\u003Ccolour foreground>>;\\n\\tbackground-color: \u003C\u003Ccolour muted-foreground>>;\\n\\tborder-radius: 6px;\\n}\\n\\n.tc-test-case-wrapper {\\n\\tbackground-color: \u003C\u003Ccolour testcase-accent-level-1>>;\\n}\\n\\n.tc-test-case-wrapper .tc-test-case-wrapper {\\n\\tbackground-color: \u003C\u003Ccolour testcase-accent-level-2>>;\\n}\\n\\n.tc-test-case-wrapper .tc-test-case-wrapper .tc-test-case-wrapper {\\n\\tbackground-color: \u003C\u003Ccolour testcase-accent-level-3>>;\\n}\\n\\n.tc-test-case-header {\\n\\tfont-weight: normal;\\n\\tmargin: 0.5em 0;\\n\\tpadding: 0 0.5em;\\n}\\n\\n.tc-test-case-divider {\\n\\tx-background-color: \u003C\u003Ccolour muted-foreground>>;\\n}\\n\\n.tc-test-case-result-icon {\\n\\tfill: #fff;\\n\\tpadding: 0.25em;\\n\\tdisplay: inline-block;\\n\\tline-height: 0;\\n\\tborder-radius: 1em;\\n\\tvertical-align: text-bottom;\\n\\tmargin-right: 0.25em;\\n}\\n\\n.tc-test-case-result-icon-pass {\\n\\tbackground-color: green;\\n}\\n\\n.tc-test-case-result-icon-fail {\\n\\tbackground-color: red;\\n}\\n\\n.tc-test-case-result-icon svg {\\n\\twidth: 0.5em;\\n\\theight: 0.5em;\\n}\\n\\n.tc-test-case-header > h2 {\\n\\tbackground: \u003C\u003Ccolour background>>;\\n\\tborder-radius: 4px;\\n\\tpadding: 0.25em;\\n}\\n\\n.tc-test-case-header > h2,\\n.tc-test-case-source > pre {\\n\\tmargin: 0;\\n}\\n\\n.tc-test-case-header > h2 a.tc-tiddlylink-missing {\\n\\tfont-style: normal;\\n}\\n\\n.tc-test-case-toolbar {\\n\\tfloat: right;\\n}\\n\\n.tc-test-case-toolbar svg {\\n\\tfill: \u003C\u003Ccolour tiddler-controls-foreground>>;\\n}\\n\\n.tc-test-case-toolbar .tc-drop-down {\\n\\tfont-size: 0.8em;\\n}\\n\\n.tc-test-case-result-fail {\\n\\tborder: 1px solid \u003C\u003Ccolour foreground>>;\\n\\tbackground-color: \u003C\u003Ccolour background>>;\\n\\tborder-radius: 4px;\\n\\tmargin: 0 0.5em;\\n\\tpadding: 0;\\n}\\n\\n.tc-test-case-result-fail-header {\\n\\tbackground: \u003C\u003Ccolour diff-delete-background>>;\\n\\tcolor: \u003C\u003Ccolour diff-delete-foreground>>;\\n\\tborder-top-left-radius: 4px;\\n\\tborder-top-right-radius: 4px;\\n\\tpadding: 4px;\\n}\\n\\n.tc-test-case-result-fail-body {\\n\\tpadding: 4px;\\n}\\n\\n.tc-test-case-source > pre {\\n\\theight: 100%;\\n}\\n\\n.tc-test-case-narrative {\\n\\tpadding: 0.5em;\\n}\\n\\n.tc-test-case-panes {\\n\\tdisplay: flex;\\n\\talign-items: stretch;\\n\\tflex-wrap: wrap;\\n\\tpadding: 0.5em;\\n\\tborder-bottom-left-radius: 6px;\\n\\tborder-bottom-right-radius: 6px;\\n}\\n\\n.tc-test-case-source {\\n\\tflex: 1 0 49%;\\n\\tmin-width: 250px;\\n}\\n\\n.tc-test-case-source .tc-tab-content {\\n\\tbackground: inherit;\\n\\tmargin: 0;\\n}\\n\\n.tc-test-case-source .tc-tab-content .tc-field-table {\\n\\tbackground: \u003C\u003Ccolour background>>;\\n}\\n\\n.tc-test-case-source .tc-field-table {\\n\\twidth: 100%;\\n}\\n\\n.tc-test-case-source table.tc-field-table {\\n\\tmargin: 0;\\n}\\n\\n.tc-test-case-source .tc-tiddler-frame .tc-edit-texteditor {\\n\\tmargin: 0;\\n}\\n\\n.tc-test-case-divider {\\n\\tflex: 0 0 1.5%;\\n}\\n\\n.tc-test-case-source .tc-tab-buttons {\\n\\tpadding-top: 0;\\n}\\n\\n.tc-test-case-footer-toolbar {\\n\\tdisplay: flex;\\n\\tjustify-content: flex-end;\\n}\\n\\n.tc-test-case-output {\\n\\tbox-shadow: inset 2px 2px 10px 0px \u003C\u003Ccolour muted-foreground>>;\\n\\tbackground: \u003C\u003Ccolour background>>;\\n\\tborder-radius: 4px;\\n\\tborder: 1px solid \u003C\u003Ccolour muted-foreground>>;\\n\\tflex: 1 0 49%;\\n\\tmin-width: 250px;\\n\\tpadding: 0.25em 1em;\\n}\\n\\n/*\\n** Flexbox utility classes\\n*/\\n\\n.tc-flex {\\n\\tdisplay: -webkit-flex;\\n\\tdisplay: flex;\\n}\\n\\n.tc-flex-column {\\n\\tflex-direction: column;\\n}\\n\\n.tc-flex-row {\\n\\tflex-direction: row;\\n}\\n\\n.tc-flex-grow-1 {\\n\\tflex-grow: 1;\\n}\\n\\n.tc-flex-grow-2 {\\n\\tflex-grow: 2;\\n}\\n\\n/*\\n** Other utility classes\\n*/\\n\\n/* Horizontal gaps */\\n\\n.tc-tiny-gap {\\n\\tmargin-left: .25em;\\n\\tmargin-right: .25em;\\n}\\n\\n.tc-tiny-gap-left {\\n\\tmargin-left: .25em;\\n}\\n\\n.tc-tiny-gap-right {\\n\\tmargin-right: .25em;\\n}\\n\\n.tc-small-gap {\\n\\tmargin-left: .5em;\\n\\tmargin-right: .5em;\\n}\\n\\n.tc-small-gap-left {\\n\\tmargin-left: .5em;\\n}\\n\\n.tc-small-gap-right {\\n\\tmargin-right: .5em;\\n}\\n\\n.tc-big-gap {\\n\\tmargin-left: 1em;\\n\\tmargin-right: 1em;\\n}\\n\\n.tc-big-gap-left {\\n\\tmargin-left: 1em;\\n}\\n\\n.tc-big-gap-right {\\n\\tmargin-right: 1em;\\n}\\n\\n.tc-word-break {\\n\\tword-break: break-all;\\n}\\n\\n/* Vertical gaps */\\n\\n.tc-tiny-v-gap-bottom {\\n\\tmargin-bottom: 3px;\\n}\\n\"},\"$:/themes/tiddlywiki/vanilla/metrics/bodyfontsize\":{\"title\":\"$:/themes/tiddlywiki/vanilla/metrics/bodyfontsize\",\"text\":\"15px\"},\"$:/themes/tiddlywiki/vanilla/metrics/bodylineheight\":{\"title\":\"$:/themes/tiddlywiki/vanilla/metrics/bodylineheight\",\"text\":\"22px\"},\"$:/themes/tiddlywiki/vanilla/metrics/fontsize\":{\"title\":\"$:/themes/tiddlywiki/vanilla/metrics/fontsize\",\"text\":\"14px\"},\"$:/themes/tiddlywiki/vanilla/metrics/lineheight\":{\"title\":\"$:/themes/tiddlywiki/vanilla/metrics/lineheight\",\"text\":\"20px\"},\"$:/themes/tiddlywiki/vanilla/metrics/storyleft\":{\"title\":\"$:/themes/tiddlywiki/vanilla/metrics/storyleft\",\"text\":\"0px\"},\"$:/themes/tiddlywiki/vanilla/metrics/storytop\":{\"title\":\"$:/themes/tiddlywiki/vanilla/metrics/storytop\",\"text\":\"0px\"},\"$:/themes/tiddlywiki/vanilla/metrics/storyright\":{\"title\":\"$:/themes/tiddlywiki/vanilla/metrics/storyright\",\"text\":\"770px\"},\"$:/themes/tiddlywiki/vanilla/metrics/storywidth\":{\"title\":\"$:/themes/tiddlywiki/vanilla/metrics/storywidth\",\"text\":\"770px\"},\"$:/themes/tiddlywiki/vanilla/metrics/tiddlerwidth\":{\"title\":\"$:/themes/tiddlywiki/vanilla/metrics/tiddlerwidth\",\"text\":\"686px\"},\"$:/themes/tiddlywiki/vanilla/metrics/sidebarbreakpoint\":{\"title\":\"$:/themes/tiddlywiki/vanilla/metrics/sidebarbreakpoint\",\"text\":\"960px\"},\"$:/themes/tiddlywiki/vanilla/metrics/sidebarwidth\":{\"title\":\"$:/themes/tiddlywiki/vanilla/metrics/sidebarwidth\",\"text\":\"350px\"},\"$:/themes/tiddlywiki/vanilla/options/stickytitles\":{\"title\":\"$:/themes/tiddlywiki/vanilla/options/stickytitles\",\"text\":\"no\"},\"$:/themes/tiddlywiki/vanilla/options/sidebarlayout\":{\"title\":\"$:/themes/tiddlywiki/vanilla/options/sidebarlayout\",\"text\":\"fixed-fluid\"},\"$:/themes/tiddlywiki/vanilla/options/codewrapping\":{\"title\":\"$:/themes/tiddlywiki/vanilla/options/codewrapping\",\"text\":\"pre-wrap\"},\"$:/themes/tiddlywiki/vanilla/reset\":{\"title\":\"$:/themes/tiddlywiki/vanilla/reset\",\"type\":\"text/css\",\"text\":\"/*! modern-normalize v2.0.0 | MIT License | https://github.com/sindresorhus/modern-normalize */\\n\\n/*\\nDocument\\n========\\n*/\\n\\n/**\\nUse a better box model (opinionated).\\n*/\\n\\n*,\\n::before,\\n::after {\\n\\tbox-sizing: border-box;\\n}\\n\\nhtml {\\n\\t/* Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3) */\\n\\tfont-family:\\n\\t\\tsystem-ui,\\n\\t\\t'Segoe UI',\\n\\t\\tRoboto,\\n\\t\\tHelvetica,\\n\\t\\tArial,\\n\\t\\tsans-serif,\\n\\t\\t'Apple Color Emoji',\\n\\t\\t'Segoe UI Emoji';\\n\\tline-height: 1.15; /* 1. Correct the line height in all browsers. */\\n\\t-webkit-text-size-adjust: 100%; /* 2. Prevent adjustments of font size after orientation changes in iOS. */\\n\\t-moz-tab-size: 4; /* 3. Use a more readable tab size (opinionated). */\\n\\ttab-size: 4; /* 3 */\\n}\\n\\n/*\\nSections\\n========\\n*/\\n\\nbody {\\n\\tmargin: 0; /* Remove the margin in all browsers. */\\n}\\n\\n/*\\nGrouping content\\n================\\n*/\\n\\n/**\\n1. Add the correct height in Firefox.\\n2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)\\n*/\\n\\nhr {\\n\\theight: 0; /* 1 */\\n\\tcolor: inherit; /* 2 */\\n}\\n\\n/*\\nText-level semantics\\n====================\\n*/\\n\\n/**\\nAdd the correct text decoration in Chrome, Edge, and Safari.\\n*/\\n\\nabbr[title] {\\n\\ttext-decoration: underline dotted;\\n}\\n\\n/**\\nAdd the correct font weight in Edge and Safari.\\n*/\\n\\nb,\\nstrong {\\n\\tfont-weight: bolder;\\n}\\n\\n/**\\n1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)\\n2. Correct the odd 'em' font sizing in all browsers.\\n*/\\n\\ncode,\\nkbd,\\nsamp,\\npre {\\n\\tfont-family:\\n\\t\\tui-monospace,\\n\\t\\tSFMono-Regular,\\n\\t\\tConsolas,\\n\\t\\t'Liberation Mono',\\n\\t\\tMenlo,\\n\\t\\tmonospace; /* 1 */\\n\\tfont-size: 1em; /* 2 */\\n}\\n\\n/**\\nAdd the correct font size in all browsers.\\n*/\\n\\nsmall {\\n\\tfont-size: 80%;\\n}\\n\\n/**\\nPrevent 'sub' and 'sup' elements from affecting the line height in all browsers.\\n*/\\n\\nsub,\\nsup {\\n\\tfont-size: 75%;\\n\\tline-height: 0;\\n\\tposition: relative;\\n\\tvertical-align: baseline;\\n}\\n\\nsub {\\n\\tbottom: -0.25em;\\n}\\n\\nsup {\\n\\ttop: -0.5em;\\n}\\n\\n/*\\nTabular data\\n============\\n*/\\n\\n/**\\n1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)\\n2. Correct table border color inheritance in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)\\n*/\\n\\ntable {\\n\\ttext-indent: 0; /* 1 */\\n\\tborder-color: inherit; /* 2 */\\n}\\n\\n/*\\nForms\\n=====\\n*/\\n\\n/**\\n1. Change the font styles in all browsers.\\n2. Remove the margin in Firefox and Safari.\\n*/\\n\\nbutton,\\ninput,\\noptgroup,\\nselect,\\ntextarea {\\n\\tfont-family: inherit; /* 1 */\\n\\tfont-size: 100%; /* 1 */\\n\\tline-height: 1.15; /* 1 */\\n\\tmargin: 0; /* 2 */\\n}\\n\\n/**\\nRemove the inheritance of text transform in Edge and Firefox.\\n*/\\n\\nbutton,\\nselect {\\n\\ttext-transform: none;\\n}\\n\\n/**\\nCorrect the inability to style clickable types in iOS and Safari.\\n*/\\n\\nbutton,\\n[type='button'],\\n[type='reset'],\\n[type='submit'] {\\n\\t-webkit-appearance: button;\\n}\\n\\n/**\\nRemove the inner border and padding in Firefox.\\n*/\\n\\n::-moz-focus-inner {\\n\\tborder-style: none;\\n\\tpadding: 0;\\n}\\n\\n/**\\nRestore the focus styles unset by the previous rule.\\n*/\\n\\n:-moz-focusring {\\n\\toutline: 1px dotted ButtonText;\\n}\\n\\n/**\\nRemove the additional ':invalid' styles in Firefox.\\nSee: https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737\\n*/\\n\\n:-moz-ui-invalid {\\n\\tbox-shadow: none;\\n}\\n\\n/**\\nRemove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers.\\n*/\\n\\nlegend {\\n\\tpadding: 0;\\n}\\n\\n/**\\nAdd the correct vertical alignment in Chrome and Firefox.\\n*/\\n\\nprogress {\\n\\tvertical-align: baseline;\\n}\\n\\n/**\\nCorrect the cursor style of increment and decrement buttons in Safari.\\n*/\\n\\n::-webkit-inner-spin-button,\\n::-webkit-outer-spin-button {\\n\\theight: auto;\\n}\\n\\n/**\\n1. Correct the odd appearance in Chrome and Safari.\\n2. Correct the outline style in Safari.\\n*/\\n\\n[type='search'] {\\n\\t-webkit-appearance: textfield; /* 1 */\\n\\toutline-offset: -2px; /* 2 */\\n}\\n\\n/**\\nRemove the inner padding in Chrome and Safari on macOS.\\n*/\\n\\n::-webkit-search-decoration {\\n\\t-webkit-appearance: none;\\n}\\n\\n/**\\n1. Correct the inability to style clickable types in iOS and Safari.\\n2. Change font properties to 'inherit' in Safari.\\n*/\\n\\n::-webkit-file-upload-button {\\n\\t-webkit-appearance: button; /* 1 */\\n\\tfont: inherit; /* 2 */\\n}\\n\\n/*\\nInteractive\\n===========\\n*/\\n\\n/*\\nAdd the correct display in Chrome and Safari.\\n*/\\n\\nsummary {\\n\\tdisplay: list-item;\\n}\\n\"},\"$:/themes/tiddlywiki/vanilla/settings/fontfamily\":{\"title\":\"$:/themes/tiddlywiki/vanilla/settings/fontfamily\",\"text\":\"-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji\"},\"$:/themes/tiddlywiki/vanilla/settings/codefontfamily\":{\"title\":\"$:/themes/tiddlywiki/vanilla/settings/codefontfamily\",\"text\":\"\\\"SFMono-Regular\\\",Consolas,\\\"Liberation Mono\\\",Menlo,Courier,monospace\"},\"$:/themes/tiddlywiki/vanilla/settings/backgroundimageattachment\":{\"title\":\"$:/themes/tiddlywiki/vanilla/settings/backgroundimageattachment\",\"text\":\"fixed\"},\"$:/themes/tiddlywiki/vanilla/settings/backgroundimagesize\":{\"title\":\"$:/themes/tiddlywiki/vanilla/settings/backgroundimagesize\",\"text\":\"auto\"},\"$:/themes/tiddlywiki/vanilla/sticky\":{\"title\":\"$:/themes/tiddlywiki/vanilla/sticky\",\"code-body\":\"yes\",\"text\":\"\u003C$reveal state=\\\"$:/themes/tiddlywiki/vanilla/options/stickytitles\\\" type=\\\"match\\\" text=\\\"yes\\\">\\n``\\n.tc-tiddler-title {\\n\\tposition: -webkit-sticky;\\n\\tposition: -moz-sticky;\\n\\tposition: -o-sticky;\\n\\tposition: -ms-sticky;\\n\\tposition: sticky;\\n\\ttop: 0px;\\n\\tbackground: ``\u003C\u003Ccolour tiddler-background>>``;\\n\\tz-index: 500;\\n}\\n\\n``\\n\u003C$list filter=\\\"[range[100]]\\\">\\n`.tc-story-river .tc-tiddler-frame:nth-child(100n+`\u003C$text text=\u003C\u003CcurrentTiddler>>/>`) {\\nz-index: `\u003C$text text={{{ [[200]subtract\u003CcurrentTiddler>] }}}/>`;\\n}\\n`\\n\u003C/$list>\\n\u003C/$reveal>\\n\"}}}"},
@@ -328,7 +333,8 @@ Error message and password prompt
 {"created":"20240712104547248","creator":"ibnux","text":"Bandwidth is to limit your customers internet speed. you need to specify Bandwidth limit for every internet plan. 1 Bandwidth Plan can be used for multiple Internet Plan.\n\nNow [ext[Create Bandwidth Plan|../?_route=bandwidth/list]].\n\n''Upload'' and ''Download'' Limit is required.\n\nBurst is Optional, you need to understand how burst works, you can search for Burst Calculator in the Internet, or in the [[Mikrotik Page|https://help.mikrotik.com/docs/display/ROS/Queue+Burst]].\n\nNext\n\n\u003Cbutton>[[Create Hotspot Plan]]\u003C/button>\n\u003Cbutton>[[Create PPPOE Plan]]\u003C/button>\n","title":"Create Bandwidth Plan","modified":"20240713061927065","modifier":"ibnux"},
 {"created":"20240712105508771","creator":"ibnux","text":"Hotspot Plan is the Internet Plan you sell to customer.\n\n* ''Status'' is where you can enable or disable Internet Plan, Admin can activate the Internet Plan, but Customer cannot buy it, it will not show in the order page Customer, Customer can recharge it.\n* ''Type'' is to set is Prepaid Plan or Postpaid Plan. if it PostPaid, it will only have Period Validity and fix expired date.\n* ''Plan Type '' is to set wether Internet Plan for Personal Customer or Business Customer\n* ''Radius'' is this Plan for radius system then check it\n* ''Device'' is the logic how PHPNuxBill Talk to Mikrotik or Radius or other Device. Choose wisely, Hotspot plan choose the Hotspot Device, or Radius if it Radius Plan.\n\n** ''Dummy'' will not do anything, some user just need PHPNuxBill just for tracking sales.\n** ''MikrotikHotspot'' for Hotspot Plan\n** ''MikrotikPppoe'' for PPPOE Plan\n** ''Radius'' for [[Radius System with Mysql]]\n** ''RadiusRest'' for [[Integrated Radius System]]\n\n* ''Plan Type'' you can choose how you limit your customer, is Unlimited, or Data Limited or Time Limited or Data and Time Limited.\n\u003C\u003C\u003C\nFor Time Limited, your Plan Validity need more bigger dan Time Limit\n\nIf Time Limit 6 Hours and Plan Validity 1 Day, in 1 day customer only can use internet for 6 Hours, after 1 day it will expired even if customer only use 1 Hour, but if customer use all 6 hours, Mikrotik will decline login as it has reach limit, but PHPNuxBill will expired it after 1 day.\n\nThis 1 day count after activation, or first login for [[Integrated Radius System]]\n\u003C\u003C\u003C\n\n\u003C\u003C\u003C\nFor Data Limit is quota based Internet\n\u003C\u003C\u003C\n\n* ''Bandwidth Name'' is your Bandwidth Plan for Internet Plan\n* ''Shared Users'' 1 account can be used for how many devices can be online\n* ''Plan Validity'' How long Plan will be expired?\n* ''Router Name'' if it not Radius, you must select which Mikrotik will have this Hotspot Plan\n\nAfter you save it, you can customize another options\n\n* ''Expired Internet Plan'', if customer plan expired, it will move to this plan, you need to create Expired plan first, and the expired plan set expired plan to expired plan too. //''Default''// just remove the customer from Mikrotik.\n* ''on-login / on-up'' is helper to add custome script to Mikrotik\n* ''on-logout / on-down'' is helper to add custome script to Mikrotik\n\n\u003Cbutton>[[Back|Hotspot System]]\u003C/button>","title":"Create Hotspot Plan","modified":"20240715042745349","modifier":"ibnux"},
 {"created":"20240715042750725","creator":"ibnux","text":"Hotspot Plan is the Internet Plan you sell to customer.\n\n* ''Status'' is where you can enable or disable Internet Plan, Admin can activate the Internet Plan, but Customer cannot buy it, it will not show in the order page Customer, Customer can recharge it.\n* ''Type'' is to set is Prepaid Plan or Postpaid Plan. if it PostPaid, it will only have Period Validity and fix expired date.\n* ''Plan Type '' is to set wether Internet Plan for Personal Customer or Business Customer\n* ''Radius'' is this Plan for radius system then check it\n* ''Device'' is the logic how PHPNuxBill Talk to Mikrotik or Radius or other Device. Choose wisely, Hotspot plan choose the Hotspot Device, or Radius if it Radius Plan.\n\n** ''Dummy'' will not do anything, some user just need PHPNuxBill just for tracking sales.\n** ''MikrotikHotspot'' for Hotspot Plan\n** ''MikrotikPppoe'' for PPPOE Plan\n** ''Radius'' for [[Radius System with Mysql]]\n** ''RadiusRest'' for [[Integrated Radius System]]\n* ''Bandwidth Name'' is your Bandwidth Plan for Internet Plan\n* ''Shared Users'' 1 account can be used for how many devices can be online\n* ''Plan Validity'' How long Plan will be expired?\n* ''Router Name'' if it not Radius, you must select which Mikrotik will have this Hotspot Plan\n* ''IP Pool'' is [ext[IP Pool|../?_route=pool/list]] you created before. \n\nAfter you save it, you can customize another options\n\n* ''Expired Internet Plan'', if customer plan expired, it will move to this plan, you need to create Expired plan first, and the expired plan set expired plan to expired plan too. //''Default''// just remove the customer from Mikrotik.\n* ''on-login / on-up'' is helper to add custome script to Mikrotik\n* ''on-logout / on-down'' is helper to add custome script to Mikrotik\n\n\u003Cbutton>[[Back|Hotspot System]]\u003C/button>","title":"Create PPPOE Plan","modified":"20240715043523134","modifier":"ibnux"},
-{"created":"20240712072200400","creator":"ibnux","text":"! ''Congratulations!!''\n\nNow you already install PHPNuxBill\n\nWhere to go now?\n\nConfigure The PHPNuxBill as you need, go to [ext[Settings|../index.php?_route=settings/app]], after that got to [ext[Localisation|../index.php?_route=settings/localisation]].\n\nAfter that, which one do you want to accomplish?\n\n*\u003Cbutton>[[Hotspot System]]\u003C/button> ^^most user just need this^^\n** Voucher system with or without Registration\u003Cbr>(''Activation at phpnuxbill page'')\n** Payment Gateway only with Registration\n** Prepaid and or Postpaid system\n** ''1 plan for 1 router''\n\n* \u003Cbutton>[[PPPOE System]]\u003C/button>\n** Voucher system and or Payment Gateway\n** ''Only with Registration''\n** Prepaid and or Postpaid system\n**  ''1 plan for 1 router''\n\n* \u003Cbutton>[[Radius System with Mysql]]\u003C/button> ^^Advanced^^\n** Hotspot and or PPPOE\n** Voucher system with or without Registration \u003Cbr>(''Activation at phpnuxbill page'')\n** Payment Gateway only with Registration\n** Prepaid and or Postpaid system\n** PPPOE only with Registration\n** ''1 Plan for Multiple Router''\n\n* \u003Cbutton>[[Integrated Radius System]]\u003C/button> ^^Easy^^\n** Hotspot and or PPPOE\n** Voucher system with or without Registration\u003Cbr>(''Activation or Direct voucher login at Mikrotik Login page'')\n** Payment Gateway only with Registration\n** Prepaid and or Postpaid system\n** PPPOE only with Registration\n** ''1 Plan for Multiple Router''\n\nAlthough all the system can run together, you need to setup one by one\n\nVoucher or Payment Gateway, just follow above tutorial, it will Guide you.\n\n\u003C\u003C\u003C\nIf you like PHPNuxBill, don't forget to [ext[donate|index.php?_route=community]] some of your profits to this project.\n\u003C\u003C\u003C\n\n!! Other Features\n\n* [[Additional Billing]]\n* [[Creating Theme|https://github.com/hotspotbilling/phpnuxbill/wiki/Themes]]\n* [[Reminder with payment link]]\n\n!! Mikrotik Template\n\n* [[Simple Template|https://github.com/hotspotbilling/phpnuxbill-mikrotik-login-template/]]\n* [[Redirect Directly to PHPNuxBill|https://github.com/agstrxyz/phpnuxbill-login-hotspot]]\n","title":"GettingStarted","modified":"20250211062712398","modifier":"ibnux","tags":"","type":"text/vnd.tiddlywiki"},
+{"created":"20250218074447068","creator":"ibnux","text":"Every rows divide by dot (.) and column divide by comma ( , )\n\nBased by \u003Ca href=\"https://getbootstrap.com/docs/3.4/css/#grid\">Bootstrap Theme\u003C/a>, every cols have 12 column.\n\nif value is 12.7,5.12 then it will have 3 rows and second rows have 2 column\n\n# use all 12 columns\n# have 2 columns, divided by 7 columns and 5 columns\n# use all 12 columns\n\n\n!! 12.7,5.12\n```\n┌──────────────────────┐\n│       12 cols        │\n│                      │\n├────────────┬─────────┤\n│   7 cols   │ 5 cols  │\n│            │         │\n├────────────┴─────────┤\n│       12 cols        │\n│                      │\n└──────────────────────┘\n```\n\n!! 12.6,6.12\n\n\n```\n┌──────────────────────┐\n│       12 cols        │\n│                      │\n├──────────┬───────────┤\n│  6 cols  │  6 cols   │\n│          │           │\n├──────────┴───────────┤\n│       12 cols        │\n│                      │\n└──────────────────────┘\n```\n\n!! 12.4,8.12\n\n\n```\n┌──────────────────────┐\n│       12 cols        │\n│                      │\n├──────┬───────────────┤\n│4 cols│    8 cols     │\n│      │               │\n├──────┴───────────────┤\n│       12 cols        │\n│                      │\n└──────────────────────┘\n```\n\n!! 12.7,5.4,8.6,6.12\n\n\n```\n┌──────────────────────┐\n│       12 cols        │\n│                      │\n├────────────┬─────────┤\n│   7 cols   │ 5 cols  │\n│            │         │\n├──────┬─────┴─────────┤\n│4 cols│    8 cols     │\n│      │               │\n├──────┴───┬───────────┤\n│  6 cols  │  6 cols   │\n│          │           │\n├──────────┴───────────┤\n│       12 cols        │\n│                      │\n└──────────────────────┘\n```\n","title":"Dashboard Structure","modified":"20250218080233797","modifier":"ibnux"},
+{"created":"20240712072200400","creator":"ibnux","text":"! ''Congratulations!!''\n\nNow you already install PHPNuxBill\n\nWhere to go now?\n\nConfigure The PHPNuxBill as you need, go to [ext[Settings|../index.php?_route=settings/app]], after that got to [ext[Localisation|../index.php?_route=settings/localisation]].\n\nAfter that, which one do you want to accomplish?\n\n*\u003Cbutton>[[Hotspot System]]\u003C/button> ^^most user just need this^^\n** Voucher system with or without Registration\u003Cbr>(''Activation at phpnuxbill page'')\n** Payment Gateway only with Registration\n** Prepaid and or Postpaid system\n** ''1 plan for 1 router''\n\n* \u003Cbutton>[[PPPOE System]]\u003C/button>\n** Voucher system and or Payment Gateway\n** ''Only with Registration''\n** Prepaid and or Postpaid system\n**  ''1 plan for 1 router''\n\n* \u003Cbutton>[[Radius System with Mysql]]\u003C/button> ^^Advanced^^\n** Hotspot and or PPPOE\n** Voucher system with or without Registration \u003Cbr>(''Activation at phpnuxbill page'')\n** Payment Gateway only with Registration\n** Prepaid and or Postpaid system\n** PPPOE only with Registration\n** ''1 Plan for Multiple Router''\n\n* \u003Cbutton>[[Integrated Radius System]]\u003C/button> ^^Easy^^\n** Hotspot and or PPPOE\n** Voucher system with or without Registration\u003Cbr>(''Activation or Direct voucher login at Mikrotik Login page'')\n** Payment Gateway only with Registration\n** Prepaid and or Postpaid system\n** PPPOE only with Registration\n** ''1 Plan for Multiple Router''\n\nAlthough all the system can run together, you need to setup one by one\n\nVoucher or Payment Gateway, just follow above tutorial, it will Guide you.\n\n\u003C\u003C\u003C\nIf you like PHPNuxBill, don't forget to [ext[donate|index.php?_route=community]] some of your profits to this project.\n\u003C\u003C\u003C\n\n!! Other Features\n\n* [[Dashboard Structure]]\n* [[Additional Billing]]\n* [[Creating Theme|https://github.com/hotspotbilling/phpnuxbill/wiki/Themes]]\n* [[Reminder with payment link]]\n\n!! Mikrotik Template\n\n* [[Simple Template|https://github.com/hotspotbilling/phpnuxbill-mikrotik-login-template/]]\n* [[Redirect Directly to PHPNuxBill|https://github.com/agstrxyz/phpnuxbill-login-hotspot]]\n","title":"GettingStarted","modified":"20250218074432710","modifier":"ibnux","tags":"","type":"text/vnd.tiddlywiki"},
 {"created":"20240712084946106","creator":"ibnux","text":"!Step to create Hotspot Plan\n\nHotspot System based on the Mikrotik Feature inside `IP > Hotspot`, You need to configure it first.\n\n\n!! For [[Radius System with Mysql]]\n \n# [[Add NAS]]\n# [[Create Bandwidth Plan]]\n# [[Create Hotspot Plan]]\n\n!! For [[Integrated Radius System]]\n\n# [[Create Bandwidth Plan]]\n# [[Create Hotspot Plan]]\n\n!! Without Radius\n\n# [[Add Mikrotik]]\n# [[Create Bandwidth Plan]]\n# [[Create Hotspot Plan]]\n\nAfter That, how do you want to sell Internet Plan?\n\n* Customer self services buy internet using Payment Gateway\n* Customer Buy Voucher and activate it at PHPNuxBill\n\nWhich one do you want?\n\n\u003Cbutton>[[Payment Gateway]]\u003C/button> \u003Cbutton>[[Internet Voucher]]\u003C/button>\n","title":"Hotspot System","modified":"20240714053827041","modifier":"ibnux"},
 {"created":"20240712080714532","creator":"ibnux","text":"Radius System is complicated, But with [[REST API|https://www.google.com/search?q=REST+API]] is Easy enough.\n\nFreeradius REST API is configuration to make Freeradius talk to PHPNuxBill via HTTP Connection, configuration is more simple.\n\nWith Freeradius REST, it will use current PHPNuxBill Core, and you don't need IP Public for Mikrotik, but still need static IP, as the IP need to be registered to clients.conf, or [[allow all IP|https://serverfault.com/questions/114780/is-there-a-way-to-allow-all-external-ip-connections-in-freeradius]], but be careful.\n\n\u003C\u003C\u003C\nFor now is only support PAP Authentication, i am still working with CHAP\n\u003C\u003C\u003C\n\n\u003C\u003C\u003C\nPassword can be sniffed when login to Mikrotik if using PAP\n\u003C\u003C\u003C\n\n```\n                     \n     ┌──────────────┐\n     │  PHPNUXBILL  │\n     └──────────────┘\n             ▲       \n             │       \n             ▼       \n     ┌──────────────┐\n     │  Freeradius  │\n     └──────────────┘\n             ▲       \n             │       \n             ▼       \n       ┌──────────┐  \n       │ Mikrotik │  \n       └──────────┘  \n```\n\n!! Installing freeradius\n\nThis Tutorial tested in Ubuntu 20.04 and 22.04\n\n`apt-get -y install freeradius freeradius-rest`\n\nedit clients.conf\n\n`nano /etc/freeradius/3.0/clients.conf`\n\nAdd your Mikrotik IP or your Public IP, this is example\n\n\u003C\u003C\u003C\neverytime you add/edit Client, restart freeradius\n\u003C\u003C\u003C\n\n```\nclient myRouterA {\n\tipaddr\t\t= 10.0.1.0/24\n\tsecret\t\t= verysecret\n}\n\nclient myRouterB {\n\tipaddr\t\t= 10.0.2.0/24\n\tsecret\t\t= secretvery\n}\n```\n\nor allow all IP\n\n```\n# All IPv4\nclient 0.0.0.0/0 {\n  secret = verysecret\n}\n# All IPv6\nclient ::/0 {\n  secret = secretvery\n}\n```\n\nCreate rest Configuration\n\n`nano /etc/freeradius/3.0/mods-enabled/rest`\n\nuse this configuration, change phpnuxbill.domain with your domain, copy all this configuration\n\n```\nrest {\n    tls {\n        # ca_file = ${certdir}/ca.pem\n\t\t# ca_info_file = ${certdir}/cacert_bundle.pem\n\t\t# ca_path = ${certdir}\n        check_cert = no\n        check_cert_cn = no\n    }\n\tconnect_uri = \"https://phpnuxbill.domain/radius.php\"\n\n\tauthenticate {\n\t\turi = \"${..connect_uri}?action=authenticate\"\n        method = 'post'\n        body = 'post'\n        data = \"username=%{urlquote:%{User-Name}}&password=%{urlquote:%{User-Password}}&CHAPchallenge=%{urlquote:%{CHAP-Challenge}}&CHAPassword=%{urlquote:%{CHAP-Password}}&nasid=%{urlquote:%{NAS-Identifier}}&realm=%{urlquote:%{Mikrotik-Realm}}&macAddr=%{urlquote:%{Calling-Station-Id}}&nasip=%{urlquote:%{NAS-IP-Address}}\"\n\t\ttls = ${..tls}\n\t}\n\n    authorize {\n            uri = \"${..connect_uri}?action=authorize\"\n            method = 'post'\n            body = 'post'\n            data = \"username=%{urlquote:%{User-Name}}&password=%{urlquote:%{User-Password}}&CHAPchallenge=%{urlquote:%{CHAP-Challenge}}&CHAPassword=%{urlquote:%{CHAP-Password}}&nasid=%{urlquote:%{NAS-Identifier}}&realm=%{urlquote:%{Mikrotik-Realm}}&macAddr=%{urlquote:%{Calling-Station-Id}}&nasip=%{urlquote:%{NAS-IP-Address}}\"\n\t\ttls = ${..tls}\n    }\n\n\taccounting {\n\t\turi = \"${..connect_uri}?action=accounting\"\n\t\tmethod = 'post'\n\t\tbody = 'post'\n        data = \"username=%{urlquote:%{User-Name}}&nasIpAddress=%{urlquote:%{NAS-IP-Address}}&realm=%{urlquote:%{Mikrotik-Realm}}&nasid=%{urlquote:%{NAS-Identifier}}\\\n&acctSessionId=%{urlquote:%{Acct-Session-Id}}&macAddr=%{urlquote:%{Calling-Station-Id}}&acctSessionTime=%{urlquote:%{Acct-Session-Time}}\\\n&acctInputOctets=%{urlquote:%{Acct-Input-Octets}}&acctOutputOctets=%{urlquote:%{Acct-Output-Octets}}\\\n&acctInputGigawords=%{urlquote:%{Acct-Input-Gigawords}}&acctOutputGigawords=%{urlquote:%{Acct-Output-Gigawords}}\\\n&acctInputPackets=%{urlquote:%{Acct-Input-Packets}}&acctOutputPackets=%{urlquote:%{Acct-Output-Packets}}\\\n&nasPortId=%{urlquote:%{NAS-Port-Id}}&framedIPAddress=%{urlquote:%{Framed-IP-Address}}\\\n&sessionTimeout=%{urlquote:%{Session-Timeout}}&framedIPNetmask=%{urlquote:%{Framed-IP-Netmask}}\\\n&acctStatusType=%{urlquote:%{Acct-Status-Type}}&nasPortType=%{urlquote:%{NAS-Port-Type}}\"\n\t\ttls = ${..tls}\n\t}\n\n    post-auth {\n        uri = \"${..connect_uri}?action=post-auth\"\n        method = 'post'\n        body = 'post'\n        data = \"username=%{urlquote:%{User-Name}}\"\n\t\ttls = ${..tls}\n    }\n\n\tpool {\n\t\tstart = ${thread[pool].start_servers}\n\t\tmin = ${thread[pool].min_spare_servers}\n\t\tmax = ${thread[pool].max_servers}\n\t\tspare = ${thread[pool].max_spare_servers}\n\t\tuses = 0\n\t\tretry_delay = 30\n\t\tlifetime = 0\n\t\tidle_timeout = 60\n\t}\n}\n```\n\nedit sites\n\n`nano /etc/freeradius/3.0/sites-enabled/default `\n\nConfigure just like this, don't delete others, just set what it need\n\n```\nauthorize {\n#   filter_username\n#\tfilter_password\n#\tpreprocess\n#\toperator-name\n#\tcui\n#\tauth_log\n\trest\n    if (ok) {\n        update control {\n            Auth-Type := rest\n        }\n    }\n\n    ....\n}\n\nauthenticate {\n    Auth-Type rest {\n        rest {\n            updated = 1\n        }\n        if (updated) {\n            ok\n        }\n    }\n\tAuth-Type rest {\n\t\trest\n\t}\n\n    ....\n}\n\naccounting {\n\tdetail\n\trest\n\n    ....\n}\n\nsession {\n\tradutmp\n    \n    ....\n}\n\npost-auth {\n\tif (reply:Group-Name) {\n        update control {\n            &Group := \"%{reply:Group-Name}\"\n        }\n    }\n    if (reply:Mikrotik-Rate-Limit) {\n        update reply {\n            Mikrotik-Rate-Limit := \"%{reply:Mikrotik-Rate-Limit}\"\n        }\n    }\n    if (reply:Expiration) {\n        update reply {\n            Expiration := \"%{reply:Expiration}\"\n        }\n    }\n\tupdate {\n\t\t&reply: += &session-state:\n\t}\n}\n```\n\nrestart services\n\n`systemctl restart freeradius.service`\n\n!! DEBUG\n\nTo check if someting wrong, stop freeradius\n\n`systemctl stop freeradius.service`\n\nActivate log in Mikrotik\n\n`/system logging add topics=radius,debug action=memory`\n\nrun radius just like this\n\n`freeradius -X`\n\nthen try to login\n\n!! Next\n\nGo to [ext[Settings|../index.php?_route=settings/app]] and Enable Radius.\n\nYou want to sell Hotspot or PPPOE?\n\n * [[Hotspot System]]\n * [[PPPOE System]]\n","title":"Integrated Radius System","modified":"20241009085747300","modifier":"ibnux","tags":"[[radius rest]]"},
 {"created":"20240714052949493","creator":"ibnux","text":"There's 3 Voucher version\n\n!! With customer registration\n\nPHPNuxBill Voucher is to activate internet plan for an account.\n\nCustomer must register, then buy Voucher from some place you sell, then activate the voucher. \n\n[ext[Create Voucher|../?_route=plan/voucher]] based your already created Plan.\n\n!! Without Registration\n\nIs not actually without registration, it will register only username, and the voucher will be password, From Hotspot Login, customer need to redirect to PHPNuxBill, then activate the voucher, then they can login for Internet.\n\n# Go to [ext[Settings|../?_route=settings/app]]\n# Disable Registration at Voucher Settings\n# [ext[Create Voucher|../?_route=plan/voucher]] based your already created Plan.\n\n\n!! Voucher direct login\n\nFor Voucher directly login from Mikrotik Hotspot Login without activation, you need to use [[Integrated Radius System]], customer no need to activate voucher, as long username same as password it will detected as Voucher, automatically activate the voucher\n\nJust [ext[Create Voucher|../?_route=plan/voucher]] based your already created Plan. This will run together with PHPNuxBill Customer system, you can sell voucher directly, with or without Registration system.\n\nOnly Plan with Radius selected as Router will be activated as Voucher.\n","title":"Internet Voucher","modified":"20240715063639438","modifier":"ibnux"},
diff --git a/init.php b/init.php
index ad9f5958..3b37ee04 100644
--- a/init.php
+++ b/init.php
@@ -112,6 +112,11 @@ $result = ORM::for_table('tbl_appconfig')->find_many();
 foreach ($result as $value) {
     $config[$value['setting']] = $value['value'];
 }
+
+if(empty($config['dashboard_cr'])){
+    $config['dashboard_cr'] = "12.7,5.12";
+}
+
 $_c =  $config;
 if (empty($http_proxy) && !empty($config['http_proxy'])) {
     $http_proxy = $config['http_proxy'];
diff --git a/system/controllers/dashboard.php b/system/controllers/dashboard.php
index c8016e15..e2555f68 100644
--- a/system/controllers/dashboard.php
+++ b/system/controllers/dashboard.php
@@ -1,233 +1,56 @@
-<?php
-
-/**
- *  PHP Mikrotik Billing (https://github.com/hotspotbilling/phpnuxbill/)
- *  by https://t.me/ibnux
- **/
-
-_admin();
-$ui->assign('_title', Lang::T('Dashboard'));
-$ui->assign('_admin', $admin);
-
-if (isset($_GET['refresh'])) {
-    $files = scandir($CACHE_PATH);
-    foreach ($files as $file) {
-        $ext = pathinfo($file, PATHINFO_EXTENSION);
-        if (is_file($CACHE_PATH . DIRECTORY_SEPARATOR . $file) && $ext == 'temp') {
-            unlink($CACHE_PATH . DIRECTORY_SEPARATOR . $file);
-        }
-    }
-    r2(getUrl('dashboard'), 's', 'Data Refreshed');
-}
-
-$reset_day = $config['reset_day'];
-if (empty($reset_day)) {
-    $reset_day = 1;
-}
-//first day of month
-if (date("d") >= $reset_day) {
-    $start_date = date('Y-m-' . $reset_day);
-} else {
-    $start_date = date('Y-m-' . $reset_day, strtotime("-1 MONTH"));
-}
-
-$current_date = date('Y-m-d');
-$month_n = date('n');
-
-$iday = ORM::for_table('tbl_transactions')
-    ->where('recharged_on', $current_date)
-    ->where_not_equal('method', 'Customer - Balance')
-    ->where_not_equal('method', 'Recharge Balance - Administrator')
-    ->sum('price');
-
-if ($iday == '') {
-    $iday = '0.00';
-}
-$ui->assign('iday', $iday);
-
-$imonth = ORM::for_table('tbl_transactions')
-    ->where_not_equal('method', 'Customer - Balance')
-    ->where_not_equal('method', 'Recharge Balance - Administrator')
-    ->where_gte('recharged_on', $start_date)
-    ->where_lte('recharged_on', $current_date)->sum('price');
-if ($imonth == '') {
-    $imonth = '0.00';
-}
-$ui->assign('imonth', $imonth);
-
-if ($config['enable_balance'] == 'yes'){
-    $cb = ORM::for_table('tbl_customers')->whereGte('balance', 0)->sum('balance');
-    $ui->assign('cb', $cb);
-}
-
-$u_act = ORM::for_table('tbl_user_recharges')->where('status', 'on')->count();
-if (empty($u_act)) {
-    $u_act = '0';
-}
-$ui->assign('u_act', $u_act);
-
-$u_all = ORM::for_table('tbl_user_recharges')->count();
-if (empty($u_all)) {
-    $u_all = '0';
-}
-$ui->assign('u_all', $u_all);
-
-
-$c_all = ORM::for_table('tbl_customers')->count();
-if (empty($c_all)) {
-    $c_all = '0';
-}
-$ui->assign('c_all', $c_all);
-
-if ($config['hide_uet'] != 'yes') {
-    //user expire
-    $query = ORM::for_table('tbl_user_recharges')
-        ->where_lte('expiration', $current_date)
-        ->order_by_desc('expiration');
-    $expire = Paginator::findMany($query);
-
-    // Get the total count of expired records for pagination
-    $totalCount = ORM::for_table('tbl_user_recharges')
-        ->where_lte('expiration', $current_date)
-        ->count();
-
-    // Pass the total count and current page to the paginator
-    $paginator['total_count'] = $totalCount;
-
-    // Assign the pagination HTML to the template variable
-    $ui->assign('expire', $expire);
-}
-
-//activity log
-$dlog = ORM::for_table('tbl_logs')->limit(5)->order_by_desc('id')->find_many();
-$ui->assign('dlog', $dlog);
-$log = ORM::for_table('tbl_logs')->count();
-$ui->assign('log', $log);
-
-
-if ($config['hide_vs'] != 'yes') {
-    $cacheStocksfile = $CACHE_PATH . File::pathFixer('/VoucherStocks.temp');
-    $cachePlanfile = $CACHE_PATH . File::pathFixer('/VoucherPlans.temp');
-    //Cache for 5 minutes
-    if (file_exists($cacheStocksfile) && time() - filemtime($cacheStocksfile) < 600) {
-        $stocks = json_decode(file_get_contents($cacheStocksfile), true);
-        $plans = json_decode(file_get_contents($cachePlanfile), true);
-    } else {
-        // Count stock
-        $tmp = $v = ORM::for_table('tbl_plans')->select('id')->select('name_plan')->find_many();
-        $plans = array();
-        $stocks = array("used" => 0, "unused" => 0);
-        $n = 0;
-        foreach ($tmp as $plan) {
-            $unused = ORM::for_table('tbl_voucher')
-                ->where('id_plan', $plan['id'])
-                ->where('status', 0)->count();
-            $used = ORM::for_table('tbl_voucher')
-                ->where('id_plan', $plan['id'])
-                ->where('status', 1)->count();
-            if ($unused > 0 || $used > 0) {
-                $plans[$n]['name_plan'] = $plan['name_plan'];
-                $plans[$n]['unused'] = $unused;
-                $plans[$n]['used'] = $used;
-                $stocks["unused"] += $unused;
-                $stocks["used"] += $used;
-                $n++;
-            }
-        }
-        file_put_contents($cacheStocksfile, json_encode($stocks));
-        file_put_contents($cachePlanfile, json_encode($plans));
-    }
-}
-
-$cacheMRfile = File::pathFixer('/monthlyRegistered.temp');
-//Cache for 1 hour
-if (file_exists($cacheMRfile) && time() - filemtime($cacheMRfile) < 3600) {
-    $monthlyRegistered = json_decode(file_get_contents($cacheMRfile), true);
-} else {
-    //Monthly Registered Customers
-    $result = ORM::for_table('tbl_customers')
-        ->select_expr('MONTH(created_at)', 'month')
-        ->select_expr('COUNT(*)', 'count')
-        ->where_raw('YEAR(created_at) = YEAR(NOW())')
-        ->group_by_expr('MONTH(created_at)')
-        ->find_many();
-
-    $monthlyRegistered = [];
-    foreach ($result as $row) {
-        $monthlyRegistered[] = [
-            'date' => $row->month,
-            'count' => $row->count
-        ];
-    }
-    file_put_contents($cacheMRfile, json_encode($monthlyRegistered));
-}
-
-$cacheMSfile = $CACHE_PATH . File::pathFixer('/monthlySales.temp');
-//Cache for 12 hours
-if (file_exists($cacheMSfile) && time() - filemtime($cacheMSfile) < 43200) {
-    $monthlySales = json_decode(file_get_contents($cacheMSfile), true);
-} else {
-    // Query to retrieve monthly data
-    $results = ORM::for_table('tbl_transactions')
-        ->select_expr('MONTH(recharged_on)', 'month')
-        ->select_expr('SUM(price)', 'total')
-        ->where_raw("YEAR(recharged_on) = YEAR(CURRENT_DATE())") // Filter by the current year
-        ->where_not_equal('method', 'Customer - Balance')
-        ->where_not_equal('method', 'Recharge Balance - Administrator')
-        ->group_by_expr('MONTH(recharged_on)')
-        ->find_many();
-
-    // Create an array to hold the monthly sales data
-    $monthlySales = array();
-
-    // Iterate over the results and populate the array
-    foreach ($results as $result) {
-        $month = $result->month;
-        $totalSales = $result->total;
-
-        $monthlySales[$month] = array(
-            'month' => $month,
-            'totalSales' => $totalSales
-        );
-    }
-
-    // Fill in missing months with zero sales
-    for ($month = 1; $month <= 12; $month++) {
-        if (!isset($monthlySales[$month])) {
-            $monthlySales[$month] = array(
-                'month' => $month,
-                'totalSales' => 0
-            );
-        }
-    }
-
-    // Sort the array by month
-    ksort($monthlySales);
-
-    // Reindex the array
-    $monthlySales = array_values($monthlySales);
-    file_put_contents($cacheMSfile, json_encode($monthlySales));
-}
-
-if ($config['router_check']) {
-    $routeroffs = ORM::for_table('tbl_routers')->selects(['id', 'name', 'last_seen'])->where('status', 'Offline')->where('enabled', '1')->order_by_desc('name')->find_array();
-    $ui->assign('routeroffs', $routeroffs);
-}
-
-$timestampFile = "$UPLOAD_PATH/cron_last_run.txt";
-if (file_exists($timestampFile)) {
-    $lastRunTime = file_get_contents($timestampFile);
-    $ui->assign('run_date', date('Y-m-d h:i:s A', $lastRunTime));
-}
-
-// Assign the monthly sales data to Smarty
-$ui->assign('start_date', $start_date);
-$ui->assign('current_date', $current_date);
-$ui->assign('monthlySales', $monthlySales);
-$ui->assign('xfooter', '');
-$ui->assign('monthlyRegistered', $monthlyRegistered);
-$ui->assign('stocks', $stocks);
-$ui->assign('plans', $plans);
-
-run_hook('view_dashboard'); #HOOK
-$ui->display('admin/dashboard.tpl');
+<?php
+
+/**
+ *  PHP Mikrotik Billing (https://github.com/hotspotbilling/phpnuxbill/)
+ *  by https://t.me/ibnux
+ **/
+
+_admin();
+$ui->assign('_title', Lang::T('Dashboard'));
+$ui->assign('_admin', $admin);
+
+if (isset($_GET['refresh'])) {
+    $files = scandir($CACHE_PATH);
+    foreach ($files as $file) {
+        $ext = pathinfo($file, PATHINFO_EXTENSION);
+        if (is_file($CACHE_PATH . DIRECTORY_SEPARATOR . $file) && $ext == 'temp') {
+            unlink($CACHE_PATH . DIRECTORY_SEPARATOR . $file);
+        }
+    }
+    r2(getUrl('dashboard'), 's', 'Data Refreshed');
+}
+
+
+$reset_day = $config['reset_day'];
+if (empty($reset_day)) {
+    $reset_day = 1;
+}
+//first day of month
+if (date("d") >= $reset_day) {
+    $start_date = date('Y-m-' . $reset_day);
+} else {
+    $start_date = date('Y-m-' . $reset_day, strtotime("-1 MONTH"));
+}
+
+$current_date = date('Y-m-d');
+$ui->assign('start_date', $start_date);
+$ui->assign('current_date', $current_date);
+
+$widgets = ORM::for_table('tbl_widgets')->selects("enabled", 1)->order_by_asc("orders")->findArray();
+$count = count($widgets);
+for ($i = 0; $i < $count; $i++) {
+    try{
+        if(file_exists($WIDGET_PATH . DIRECTORY_SEPARATOR . $widgets[$i]['widget'].".php")){
+            require_once $WIDGET_PATH . DIRECTORY_SEPARATOR . $widgets[$i]['widget'].".php";
+            $widgets[$i]['content'] = (new $widgets[$i]['widget'])->getWidget($widgets[$i]);
+        }else{
+            $widgets[$i]['content'] = "Widget not found";
+        }
+    } catch (Throwable $e) {
+        $widgets[$i]['content'] = $e->getMessage();
+    }
+}
+
+$ui->assign('widgets', $widgets);
+run_hook('view_dashboard'); #HOOK
+$ui->display('admin/dashboard.tpl');
\ No newline at end of file
diff --git a/system/controllers/dashboard_widget.php b/system/controllers/dashboard_widget.php
deleted file mode 100644
index 412b901e..00000000
--- a/system/controllers/dashboard_widget.php
+++ /dev/null
@@ -1,56 +0,0 @@
-<?php
-
-/**
- *  PHP Mikrotik Billing (https://github.com/hotspotbilling/phpnuxbill/)
- *  by https://t.me/ibnux
- **/
-
-_admin();
-$ui->assign('_title', Lang::T('Dashboard'));
-$ui->assign('_admin', $admin);
-
-if (isset($_GET['refresh'])) {
-    $files = scandir($CACHE_PATH);
-    foreach ($files as $file) {
-        $ext = pathinfo($file, PATHINFO_EXTENSION);
-        if (is_file($CACHE_PATH . DIRECTORY_SEPARATOR . $file) && $ext == 'temp') {
-            unlink($CACHE_PATH . DIRECTORY_SEPARATOR . $file);
-        }
-    }
-    r2(getUrl('dashboard'), 's', 'Data Refreshed');
-}
-
-
-$reset_day = $config['reset_day'];
-if (empty($reset_day)) {
-    $reset_day = 1;
-}
-//first day of month
-if (date("d") >= $reset_day) {
-    $start_date = date('Y-m-' . $reset_day);
-} else {
-    $start_date = date('Y-m-' . $reset_day, strtotime("-1 MONTH"));
-}
-
-$current_date = date('Y-m-d');
-$ui->assign('start_date', $start_date);
-$ui->assign('current_date', $current_date);
-
-$widgets = ORM::for_table('tbl_widgets')->selects("enabled", 1)->order_by_asc("orders")->findArray();
-$count = count($widgets);
-for ($i = 0; $i < $count; $i++) {
-    try{
-        if(file_exists($WIDGET_PATH . DIRECTORY_SEPARATOR . $widgets[$i]['widget'].".php")){
-            require_once $WIDGET_PATH . DIRECTORY_SEPARATOR . $widgets[$i]['widget'].".php";
-            $widgets[$i]['content'] = (new $widgets[$i]['widget'])->getWidget($widgets[$i]);
-        }else{
-            $widgets[$i]['content'] = "Widget not found";
-        }
-    } catch (Throwable $e) {
-        $widgets[$i]['content'] = $e->getMessage();
-    }
-}
-
-$ui->assign('widgets', $widgets);
-run_hook('view_dashboard'); #HOOK
-$ui->display('admin/dashboard_widget.tpl');
\ No newline at end of file
diff --git a/system/controllers/widgets.php b/system/controllers/widgets.php
index c55edf15..995758cf 100644
--- a/system/controllers/widgets.php
+++ b/system/controllers/widgets.php
@@ -11,6 +11,13 @@ $ui->assign('_system_menu', 'settings');
 $action = alphanumeric($routes['1']);
 $ui->assign('_admin', $admin);
 
+$max = ORM::for_table('tbl_widgets')->max('position');
+$max2 = substr_count($config['dashboard_cr'], '.')+substr_count($config['dashboard_cr'], ',')+1;
+if($max2>$max){
+    $max = $max2;
+}
+$ui->assign('max', $max);
+
 if ($action == 'add') {
     $pos = alphanumeric($routes['2']);
     if ($_SERVER['REQUEST_METHOD'] == 'POST') {
@@ -104,9 +111,20 @@ if ($action == 'add') {
     }
     r2(getUrl('widgets'), 's', 'Widget order Saved Successfully');
 } else {
+    if(_post("save") == 'struct'){
+        $d = ORM::for_table('tbl_appconfig')->where('setting', 'dashboard_cr')->find_one();
+        if ($d) {
+            $d->value = _post('dashboard_cr');
+            $d->save();
+        } else {
+            $d = ORM::for_table('tbl_appconfig')->create();
+            $d->setting = 'dashboard_cr';
+            $d->value = _post('dashboard_cr');
+            $d->save();
+        }
+        _alert("Dashboard Structure Saved Successfully", "success", getUrl('widgets'));
+    }
     $widgets = ORM::for_table('tbl_widgets')->selects("position", 1)->order_by_asc("orders")->find_many();
-    $max = ORM::for_table('tbl_widgets')->max('position');
     $ui->assign('widgets', $widgets);
-    $ui->assign('max', $max);
     $ui->display('admin/settings/widgets.tpl');
 }
diff --git a/system/lan/english.json b/system/lan/english.json
index ddbe684e..c97c3cf5 100644
--- a/system/lan/english.json
+++ b/system/lan/english.json
@@ -1049,5 +1049,8 @@
     "Sending___": "Sending...",
     "Message_sent_successfully_": "Message sent successfully.",
     "Error_sending_message__": "Error sending message: ",
-    "Failed_to_send_the_message__Please_try_again_": "Failed to send the message. Please try again."
+    "Failed_to_send_the_message__Please_try_again_": "Failed to send the message. Please try again.",
+    "Dashboard_Structure": "Dashboard Structure",
+    "Read_documentation": "Read documentation",
+    "Structure": "Structure"
 }
\ No newline at end of file
diff --git a/ui/ui/admin/dashboard.tpl b/ui/ui/admin/dashboard.tpl
index b4b310d6..f1ec2ef3 100644
--- a/ui/ui/admin/dashboard.tpl
+++ b/ui/ui/admin/dashboard.tpl
@@ -1,420 +1,37 @@
 {include file="sections/header.tpl"}
 
-<div class="row">
-    {if in_array($_admin['user_type'],['SuperAdmin','Admin', 'Report'])}
-        <div class="col-lg-3 col-xs-6">
-            <div class="small-box bg-aqua">
-                <div class="inner">
-                    <h4 class="text-bold" style="font-size: large;"><sup>{$_c['currency_code']}</sup>
-                        {number_format($iday,0,$_c['dec_point'],$_c['thousands_sep'])}</h4>
-                </div>
-                <div class="icon">
-                    <i class="ion ion-clock"></i>
-                </div>
-                <a href="{Text::url('reports/by-date')}" class="small-box-footer">{Lang::T('Income Today')}</a>
+{function showWidget pos=0}
+    {foreach $widgets as $w}
+        {if $w['position'] == $pos}
+            {$w['content']}
+        {/if}
+    {/foreach}
+{/function}
+
+
+{assign rows explode(".", $_c['dashboard_cr'])}
+{assign pos 1}
+{foreach $rows as $cols}
+    {if $cols == 12}
+        <div class="row">
+            <div class="col-md-12">
+                {showWidget widgets=$widgets pos=$pos}
             </div>
         </div>
-        <div class="col-lg-3 col-xs-6">
-            <div class="small-box bg-green">
-                <div class="inner">
-                    <h4 class="text-bold" style="font-size: large;"><sup>{$_c['currency_code']}</sup>
-                        {number_format($imonth,0,$_c['dec_point'],$_c['thousands_sep'])}</h4>
+        {assign pos value=$pos+1}
+    {else}
+        {assign colss explode(",", $cols)}
+        <div class="row">
+            {foreach $colss as $c}
+                <div class="col-md-{$c}">
+                    {showWidget widgets=$widgets pos=$pos}
                 </div>
-                <div class="icon">
-                    <i class="ion ion-android-calendar"></i>
-                </div>
-                <a href="{Text::url('reports/by-period')}" class="small-box-footer">{Lang::T('Income This Month')}</a>
-            </div>
+                {assign pos value=$pos+1}
+            {/foreach}
         </div>
     {/if}
-    <div class="col-lg-3 col-xs-6">
-        <div class="small-box bg-yellow">
-            <div class="inner">
-                <h4 class="text-bold" style="font-size: large;">{$u_act}/{$u_all-$u_act}</h4>
-            </div>
-            <div class="icon">
-                <i class="ion ion-person"></i>
-            </div>
-            <a href="{Text::url('plan/list')}" class="small-box-footer">{Lang::T('Active')}/{Lang::T('Expired')}</a>
-        </div>
-    </div>
-    <div class="col-lg-3 col-xs-6">
-        <div class="small-box bg-red">
-            <div class="inner">
-                <h4 class="text-bold" style="font-size: large;">{$c_all}</h4>
-            </div>
-            <div class="icon">
-                <i class="ion ion-android-people"></i>
-            </div>
-            <a href="{Text::url('customers/list')}" class="small-box-footer">{Lang::T('Customers')}</a>
-        </div>
-    </div>
-</div>
-<ol class="breadcrumb">
-    <li>{Lang::dateFormat($start_date)}</li>
-    <li>{Lang::dateFormat($current_date)}</li>
-    {if $_c['enable_balance'] == 'yes' && in_array($_admin['user_type'],['SuperAdmin','Admin', 'Report'])}
-        <li onclick="window.location.href = '{Text::url('customers&search=&order=balance&filter=Active&orderby=desc')}'" style="cursor: pointer;">
-            {Lang::T('Customer Balance')} <sup>{$_c['currency_code']}</sup>
-            <b>{number_format($cb,0,$_c['dec_point'],$_c['thousands_sep'])}</b>
-        </li>
-    {/if}
-</ol>
-<div class="row">
-    <div class="col-md-7">
+{/foreach}
 
-        <!-- solid sales graph -->
-        {if $_c['hide_mrc'] != 'yes'}
-            <div class="box box-solid ">
-                <div class="box-header">
-                    <i class="fa fa-th"></i>
-
-                    <h3 class="box-title">{Lang::T('Monthly Registered Customers')}</h3>
-
-                    <div class="box-tools pull-right">
-                        <button type="button" class="btn bg-teal btn-sm" data-widget="collapse"><i class="fa fa-minus"></i>
-                        </button>
-                        <a href="{Text::url('dashboard&refresh')}" class="btn bg-teal btn-sm"><i class="fa fa-refresh"></i>
-                        </a>
-                    </div>
-                </div>
-                <div class="box-body border-radius-none">
-                    <canvas class="chart" id="chart" style="height: 250px;"></canvas>
-                </div>
-            </div>
-        {/if}
-
-        <!-- solid sales graph -->
-        {if $_c['hide_tms'] != 'yes'}
-            <div class="box box-solid ">
-                <div class="box-header">
-                    <i class="fa fa-inbox"></i>
-
-                    <h3 class="box-title">{Lang::T('Total Monthly Sales')}</h3>
-
-                    <div class="box-tools pull-right">
-                        <button type="button" class="btn bg-teal btn-sm" data-widget="collapse"><i class="fa fa-minus"></i>
-                        </button>
-                        <a href="{Text::url('dashboard&refresh')}" class="btn bg-teal btn-sm"><i class="fa fa-refresh"></i>
-                        </a>
-                    </div>
-                </div>
-                <div class="box-body border-radius-none">
-                    <canvas class="chart" id="salesChart" style="height: 250px;"></canvas>
-                </div>
-            </div>
-        {/if}
-        {if $_c['disable_voucher'] != 'yes' && $stocks['unused']>0 || $stocks['used']>0}
-            {if $_c['hide_vs'] != 'yes'}
-                <div class="panel panel-primary mb20 panel-hovered project-stats table-responsive">
-                    <div class="panel-heading">Vouchers Stock</div>
-                    <div class="table-responsive">
-                        <table class="table table-condensed">
-                            <thead>
-                                <tr>
-                                    <th>{Lang::T('Package Name')}</th>
-                                    <th>unused</th>
-                                    <th>used</th>
-                                </tr>
-                            </thead>
-                            <tbody>
-                                {foreach $plans as $stok}
-                                    <tr>
-                                        <td>{$stok['name_plan']}</td>
-                                        <td>{$stok['unused']}</td>
-                                        <td>{$stok['used']}</td>
-                                    </tr>
-                                </tbody>
-                            {/foreach}
-                            <tr>
-                                <td>Total</td>
-                                <td>{$stocks['unused']}</td>
-                                <td>{$stocks['used']}</td>
-                            </tr>
-                        </table>
-                    </div>
-                </div>
-            {/if}
-        {/if}
-        {if $_c['hide_uet'] != 'yes'}
-            <div class="panel panel-warning mb20 panel-hovered project-stats table-responsive">
-                <div class="panel-heading">{Lang::T('User Expired, Today')}</div>
-                <div class="table-responsive">
-                    <table class="table table-condensed">
-                        <thead>
-                            <tr>
-                                <th>{Lang::T('Username')}</th>
-                                <th>{Lang::T('Created / Expired')}</th>
-                                <th>{Lang::T('Internet Package')}</th>
-                                <th>{Lang::T('Location')}</th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            {foreach $expire as $expired}
-                                {assign var="rem_exp" value="{$expired['expiration']} {$expired['time']}"}
-                                {assign var="rem_started" value="{$expired['recharged_on']} {$expired['recharged_time']}"}
-                                <tr>
-                                    <td><a href="{Text::url('customers/viewu/',$expired['username'])}">{$expired['username']}</a></td>
-                                    <td><small data-toggle="tooltip" data-placement="top"
-                                            title="{Lang::dateAndTimeFormat($expired['recharged_on'],$expired['recharged_time'])}">{Lang::timeElapsed($rem_started)}</small>
-                                        /
-                                        <span data-toggle="tooltip" data-placement="top"
-                                            title="{Lang::dateAndTimeFormat($expired['expiration'],$expired['time'])}">{Lang::timeElapsed($rem_exp)}</span>
-                                    </td>
-                                    <td>{$expired['namebp']}</td>
-                                    <td>{$expired['routers']}</td>
-                                </tr>
-                            {/foreach}
-                        </tbody>
-                    </table>
-                </div>
-                &nbsp; {include file="pagination.tpl"}
-            </div>
-        {/if}
-    </div>
-
-
-    <div class="col-md-5">
-        {if $_c['router_check'] && count($routeroffs)> 0}
-            <div class="panel panel-danger">
-                <div class="panel-heading text-bold">{Lang::T('Routers Offline')}</div>
-                <div class="table-responsive">
-                    <table class="table table-condensed">
-                        <tbody>
-                            {foreach $routeroffs as $ros}
-                                <tr>
-                                    <td><a href="{Text::url('routers/edit/',$ros['id'])}" class="text-bold text-red">{$ros['name']}</a></td>
-                                    <td data-toggle="tooltip" data-placement="top" class="text-red"
-                                            title="{Lang::dateTimeFormat($ros['last_seen'])}">{Lang::timeElapsed($ros['last_seen'])}
-                                    </td>
-                                </tr>
-                            {/foreach}
-                        </tbody>
-                    </table>
-                </div>
-            </div>
-        {/if}
-        {if $run_date}
-        {assign var="current_time" value=$smarty.now}
-        {assign var="run_time" value=strtotime($run_date)}
-        {if $current_time - $run_time > 3600}
-        <div class="panel panel-cron-warning panel-hovered mb20 activities">
-            <div class="panel-heading"><i class="fa fa-clock-o"></i> &nbsp; {Lang::T('Cron has not run for over 1 hour. Please
-                check your setup.')}</div>
-        </div>
-        {else}
-        <div class="panel panel-cron-success panel-hovered mb20 activities">
-            <div class="panel-heading">{Lang::T('Cron Job last ran on')}: {$run_date}</div>
-        </div>
-        {/if}
-        {else}
-        <div class="panel panel-cron-danger panel-hovered mb20 activities">
-            <div class="panel-heading"><i class="fa fa-warning"></i> &nbsp; {Lang::T('Cron appear not been setup, please check
-                your cron setup.')}</div>
-        </div>
-        {/if}
-        {if $_c['hide_pg'] != 'yes'}
-            <div class="panel panel-success panel-hovered mb20 activities">
-                <div class="panel-heading">{Lang::T('Payment Gateway')}: {str_replace(',',', ',$_c['payment_gateway'])}
-                </div>
-            </div>
-        {/if}
-        {if $_c['hide_aui'] != 'yes'}
-            <div class="panel panel-info panel-hovered mb20 activities">
-                <div class="panel-heading">{Lang::T('All Users Insights')}</div>
-                <div class="panel-body">
-                    <canvas id="userRechargesChart"></canvas>
-                </div>
-            </div>
-        {/if}
-        {if $_c['hide_al'] != 'yes'}
-            <div class="panel panel-info panel-hovered mb20 activities">
-                <div class="panel-heading"><a href="{Text::url('logs')}">{Lang::T('Activity Log')}</a></div>
-                <div class="panel-body">
-                    <ul class="list-unstyled">
-                        {foreach $dlog as $dlogs}
-                            <li class="primary">
-                                <span class="point"></span>
-                                <span class="time small text-muted">{Lang::timeElapsed($dlogs['date'],true)}</span>
-                                <p>{$dlogs['description']}</p>
-                            </li>
-                        {/foreach}
-                    </ul>
-                </div>
-            </div>
-        {/if}
-    </div>
-
-
-</div>
-
-
-<script src="https://cdn.jsdelivr.net/npm/chart.js@3.5.1/dist/chart.min.js"></script>
-
-<script type="text/javascript">
-    {if $_c['hide_mrc'] != 'yes'}
-        {literal}
-            document.addEventListener("DOMContentLoaded", function() {
-                var counts = JSON.parse('{/literal}{$monthlyRegistered|json_encode}{literal}');
-
-                var monthNames = [
-                    'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
-                    'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
-                ];
-
-                var labels = [];
-                var data = [];
-
-                for (var i = 1; i <= 12; i++) {
-                    var month = counts.find(count => count.date === i);
-                    labels.push(month ? monthNames[i - 1] : monthNames[i - 1].substring(0, 3));
-                    data.push(month ? month.count : 0);
-                }
-
-                var ctx = document.getElementById('chart').getContext('2d');
-                var chart = new Chart(ctx, {
-                    type: 'bar',
-                    data: {
-                        labels: labels,
-                        datasets: [{
-                            label: 'Registered Members',
-                            data: data,
-                            backgroundColor: 'rgba(0, 0, 255, 0.5)',
-                            borderColor: 'rgba(0, 0, 255, 0.7)',
-                            borderWidth: 1
-                        }]
-                    },
-                    options: {
-                        responsive: true,
-                        scales: {
-                            x: {
-                                grid: {
-                                    display: false
-                                }
-                            },
-                            y: {
-                                beginAtZero: true,
-                                grid: {
-                                    color: 'rgba(0, 0, 0, 0.1)'
-                                }
-                            }
-                        }
-                    }
-                });
-            });
-        {/literal}
-    {/if}
-    {if $_c['hide_tmc'] != 'yes'}
-        {literal}
-            document.addEventListener("DOMContentLoaded", function() {
-                var monthlySales = JSON.parse('{/literal}{$monthlySales|json_encode}{literal}');
-
-                var monthNames = [
-                    'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
-                    'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
-                ];
-
-                var labels = [];
-                var data = [];
-
-                for (var i = 1; i <= 12; i++) {
-                    var month = findMonthData(monthlySales, i);
-                    labels.push(month ? monthNames[i - 1] : monthNames[i - 1].substring(0, 3));
-                    data.push(month ? month.totalSales : 0);
-                }
-
-                var ctx = document.getElementById('salesChart').getContext('2d');
-                var chart = new Chart(ctx, {
-                    type: 'bar',
-                    data: {
-                        labels: labels,
-                        datasets: [{
-                            label: 'Monthly Sales',
-                            data: data,
-                            backgroundColor: 'rgba(2, 10, 242)', // Customize the background color
-                            borderColor: 'rgba(255, 99, 132, 1)', // Customize the border color
-                            borderWidth: 1
-                        }]
-                    },
-                    options: {
-                        responsive: true,
-                        scales: {
-                            x: {
-                                grid: {
-                                    display: false
-                                }
-                            },
-                            y: {
-                                beginAtZero: true,
-                                grid: {
-                                    color: 'rgba(0, 0, 0, 0.1)'
-                                }
-                            }
-                        }
-                    }
-                });
-            });
-
-            function findMonthData(monthlySales, month) {
-                for (var i = 0; i < monthlySales.length; i++) {
-                    if (monthlySales[i].month === month) {
-                        return monthlySales[i];
-                    }
-                }
-                return null;
-            }
-        {/literal}
-    {/if}
-    {if $_c['hide_aui'] != 'yes'}
-        {literal}
-            document.addEventListener("DOMContentLoaded", function() {
-                // Get the data from PHP and assign it to JavaScript variables
-                var u_act = '{/literal}{$u_act}{literal}';
-                var c_all = '{/literal}{$c_all}{literal}';
-                var u_all = '{/literal}{$u_all}{literal}';
-                //lets calculate the inactive users as reported
-                var expired = u_all - u_act;
-                var inactive = c_all - u_all;
-                if (inactive < 0) {
-                    inactive = 0;
-                }
-                // Create the chart data
-                var data = {
-                    labels: ['Active Users', 'Expired Users', 'Inactive Users'],
-                    datasets: [{
-                        label: 'User Recharges',
-                        data: [parseInt(u_act), parseInt(expired), parseInt(inactive)],
-                        backgroundColor: ['rgba(4, 191, 13)', 'rgba(191, 35, 4)', 'rgba(0, 0, 255, 0.5'],
-                        borderColor: ['rgba(0, 255, 0, 1)', 'rgba(255, 99, 132, 1)', 'rgba(0, 0, 255, 0.7'],
-                        borderWidth: 1
-                    }]
-                };
-
-                // Create chart options
-                var options = {
-                    responsive: true,
-                    aspectRatio: 1,
-                    plugins: {
-                        legend: {
-                            position: 'bottom',
-                            labels: {
-                                boxWidth: 15
-                            }
-                        }
-                    }
-                };
-
-                // Get the canvas element and create the chart
-                var ctx = document.getElementById('userRechargesChart').getContext('2d');
-                var chart = new Chart(ctx, {
-                    type: 'pie',
-                    data: data,
-                    options: options
-                });
-            });
-        {/literal}
-    {/if}
-</script>
 {if $_c['new_version_notify'] != 'disable'}
     <script>
         window.addEventListener('DOMContentLoaded', function() {
@@ -456,4 +73,4 @@
     </script>
 {/if}
 
-{include file="sections/footer.tpl"}
+{include file="sections/footer.tpl"}
\ No newline at end of file
diff --git a/ui/ui/admin/dashboard_widget.tpl b/ui/ui/admin/dashboard_widget.tpl
deleted file mode 100644
index 90281c54..00000000
--- a/ui/ui/admin/dashboard_widget.tpl
+++ /dev/null
@@ -1,94 +0,0 @@
-{include file="sections/header.tpl"}
-
-{function showWidget pos=0}
-    {foreach $widgets as $w}
-        {if $w['position'] == $pos}
-            {$w['content']}
-        {/if}
-    {/foreach}
-{/function}
-
-
-
-{if $_c['dashboard'] == '1.55.1'}
-    {showWidget widgets=$widgets pos=1}
-    <div class="row">
-        <div class="col-md-6">
-            {showWidget widgets=$widgets pos=2}
-        </div>
-        <div class="col-md-6">
-            {showWidget widgets=$widgets pos=3}
-        </div>
-    </div>
-    {showWidget widgets=$widgets pos=4}
-{elseif $_c['dashboard'] == '1.57.1'}
-    {showWidget widgets=$widgets pos=1}
-    <div class="row">
-        <div class="col-md-5">
-            {showWidget widgets=$widgets pos=2}
-        </div>
-        <div class="col-md-7">
-            {showWidget widgets=$widgets pos=3}
-        </div>
-    </div>
-    {showWidget widgets=$widgets pos=4}
-{elseif $_c['dashboard'] == '1.1.1.1'}
-    {showWidget widgets=$widgets pos=1}
-    {showWidget widgets=$widgets pos=2}
-    {showWidget widgets=$widgets pos=3}
-    {showWidget widgets=$widgets pos=4}
-{else}
-    {showWidget widgets=$widgets pos=1}
-    <div class="row">
-        <div class="col-md-7">
-            {showWidget widgets=$widgets pos=2}
-        </div>
-        <div class="col-md-5">
-            {showWidget widgets=$widgets pos=3}
-        </div>
-    </div>
-    {showWidget widgets=$widgets pos=4}
-{/if}
-
-{if $_c['new_version_notify'] != 'disable'}
-    <script>
-        window.addEventListener('DOMContentLoaded', function() {
-            $.getJSON("./version.json?" + Math.random(), function(data) {
-                var localVersion = data.version;
-                $('#version').html('Version: ' + localVersion);
-                $.getJSON(
-                    "https://raw.githubusercontent.com/hotspotbilling/phpnuxbill/master/version.json?" +
-                    Math
-                    .random(),
-                    function(data) {
-                        var latestVersion = data.version;
-                        if (localVersion !== latestVersion) {
-                            $('#version').html('Latest Version: ' + latestVersion);
-                            if (getCookie(latestVersion) != 'done') {
-                                Swal.fire({
-                                    icon: 'info',
-                                    title: "New Version Available\nVersion: " + latestVersion,
-                                    toast: true,
-                                    position: 'bottom-right',
-                                    showConfirmButton: true,
-                                    showCloseButton: true,
-                                    timer: 30000,
-                                    confirmButtonText: '<a href="{Text::url('community')}#latestVersion" style="color: white;">Update Now</a>',
-                                    timerProgressBar: true,
-                                    didOpen: (toast) => {
-                                        toast.addEventListener('mouseenter', Swal.stopTimer)
-                                        toast.addEventListener('mouseleave', Swal
-                                            .resumeTimer)
-                                    }
-                                });
-                                setCookie(latestVersion, 'done', 7);
-                            }
-                        }
-                    });
-            });
-
-        });
-    </script>
-{/if}
-
-{include file="sections/footer.tpl"}
\ No newline at end of file
diff --git a/ui/ui/admin/settings/notifications.tpl b/ui/ui/admin/settings/notifications.tpl
index 74dcbfc2..8fc377ce 100644
--- a/ui/ui/admin/settings/notifications.tpl
+++ b/ui/ui/admin/settings/notifications.tpl
@@ -1,6 +1,6 @@
 {include file="sections/header.tpl"}
 
-<form class="form-horizontal" method="post" role="form" action="{Text::url('')}settings/notifications-post">
+<form class="form-horizontal" method="post" role="form" action="{Text::url('settings/notifications-post')}">
     <input type="hidden" name="csrf_token" value="{$csrf_token}">
     <div class="row">
         <div class="col-sm-12 col-md-12">
@@ -26,7 +26,7 @@
                             <b>[[package]]</b> - {Lang::T('will be replaced with Package name')}.<br>
                             <b>[[price]]</b> - {Lang::T('will be replaced with Package price')}.<br>
                             <b>[[bills]]</b> - {Lang::T('additional bills for customers')}.<br>
-                            <b>[[payment_link]]</b> - <a href="{Text::url('docs')}/docs/#Reminder%20with%20payment%20link"
+                            <b>[[payment_link]]</b> - <a href="{$app_url}/docs/#Reminder%20with%20payment%20link"
                                 target="_blank">read documentation</a>.
                         </p>
                     </div>
@@ -45,7 +45,7 @@
                             <b>[[price]]</b> - {Lang::T('will be replaced with Package price')}.<br>
                             <b>[[expired_date]]</b> - {Lang::T('will be replaced with Expiration date')}.<br>
                             <b>[[bills]]</b> - {Lang::T('additional bills for customers')}.<br>
-                            <b>[[payment_link]]</b> - <a href="{Text::url('docs')}/docs/#Reminder%20with%20payment%20link"
+                            <b>[[payment_link]]</b> - <a href="{$app_url}/docs/#Reminder%20with%20payment%20link"
                                 target="_blank">read documentation</a>.
                         </p>
                     </div>
@@ -64,7 +64,7 @@
                             <b>[[price]]</b> - {Lang::T('will be replaced with Package price')}.<br>
                             <b>[[expired_date]]</b> - {Lang::T('will be replaced with Expiration date')}.<br>
                             <b>[[bills]]</b> - {Lang::T('additional bills for customers')}.<br>
-                            <b>[[payment_link]]</b> - <a href="{Text::url('docs')}/docs/#Reminder%20with%20payment%20link"
+                            <b>[[payment_link]]</b> - <a href="{$app_url}/docs/#Reminder%20with%20payment%20link"
                                 target="_blank">read documentation</a>.
                         </p>
                     </div>
@@ -83,7 +83,7 @@
                             <b>[[price]]</b> - {Lang::T('will be replaced with Package price')}.<br>
                             <b>[[expired_date]]</b> - {Lang::T('will be replaced with Expiration date')}.<br>
                             <b>[[bills]]</b> - {Lang::T('additional bills for customers')}.<br>
-                            <b>[[payment_link]]</b> - <a href="{Text::url('docs')}/docs/#Reminder%20with%20payment%20link"
+                            <b>[[payment_link]]</b> - <a href="{$app_url}/docs/#Reminder%20with%20payment%20link"
                                 target="_blank">read documentation</a>.
                         </p>
                     </div>
diff --git a/ui/ui/admin/settings/widgets.tpl b/ui/ui/admin/settings/widgets.tpl
index 27069371..7664c063 100644
--- a/ui/ui/admin/settings/widgets.tpl
+++ b/ui/ui/admin/settings/widgets.tpl
@@ -1,5 +1,8 @@
 {include file="sections/header.tpl"}
 
+
+<hr>
+
 {function showWidget pos=0}
     <form method="post" action="{Text::url('widgets/pos/')}">
         <div class="panel panel-info">
@@ -49,11 +52,64 @@
 {/function}
 
 <div class="row">
-    {for $pos=1 to $max}
-        <div class="col-md-6 col-lg-4">
-            {showWidget widgets=$widgets pos=$pos}
+    <div class="col-md-3">
+        <div class="panel panel-info">
+            <div class="panel-heading">Dashboard Structure</div>
+            <div class="panel-body">
+                {assign rows explode(".", $_c['dashboard_cr'])}
+                {assign pos 1}
+                {foreach $rows as $cols}
+                    {if $cols == 12}
+                        <div class="row row-no-gutters">
+                            <div class="col-xs-12" style="border: 1px;">
+                                <a href="{Text::url('widgets/add/', $pos)}" class="btn btn-default btn-block">{$pos}</a>
+                            </div>
+                        </div>
+                        {assign pos value=$pos+1}
+                    {else}
+                        {assign colss explode(",", $cols)}
+                        <div class="row row-no-gutters">
+                            {foreach $colss as $c}
+                                <div class="col-xs-{$c}">
+                                    <a href="{Text::url('widgets/add/', $pos)}" class="btn btn-default btn-block">{$pos}</a>
+                                </div>
+                                {assign pos value=$pos+1}
+                            {/foreach}
+                        </div>
+                    {/if}
+                {/foreach}
+            </div>
+            <div class="panel-footer">
+                <form method="post" action="{Text::url('widgets')}">
+                    <div class="input-group">
+                        <span class="input-group-addon"><a href="{$app_url}/docs/#Dashboard%20Structure"
+                        target="_blank">{Lang::T("Structure")}</a></span>
+                        <input type="text" name="dashboard_cr" value="{$_c['dashboard_cr']}" class="form-control"
+                            placeholder="Dashboard">
+                    </div>
+                    <button type="submit" class="btn btn-primary btn-block" name="save" value="struct">{Lang::T("Save")}</button>
+                </form>
+            </div>
         </div>
-    {/for}
+    </div>
+    <div class="col-md-9">
+        <div class="row">
+            <div class="col-md-6">
+                {for $pos=1 to $max}
+                    {if $pos%2 != 0}
+                        {showWidget widgets=$widgets pos=$pos}
+                    {/if}
+                {/for}
+            </div>
+            <div class="col-md-6">
+                {for $pos=1 to $max}
+                    {if $pos%2 == 0}
+                        {showWidget widgets=$widgets pos=$pos}
+                    {/if}
+                {/for}
+            </div>
+        </div>
+    </div>
 </div>
 
 {include file="sections/footer.tpl"}
\ No newline at end of file
diff --git a/ui/ui/admin/settings/widgets_add_edit.tpl b/ui/ui/admin/settings/widgets_add_edit.tpl
index 390329a1..5c7bde8b 100644
--- a/ui/ui/admin/settings/widgets_add_edit.tpl
+++ b/ui/ui/admin/settings/widgets_add_edit.tpl
@@ -40,7 +40,7 @@
                         <label class="col-md-3 control-label">{Lang::T('Position')}</label>
                         <div class="col-md-5">
                             <select name="position" id="position" class="form-control">
-                                {for $pos=1 to 12}
+                                {for $pos=1 to $max}
                                     <option value="{$pos}" {if $widget['position'] eq $pos}selected="selected" {/if}>
                                         Area {$pos}
                                     </option>
diff --git a/version.json b/version.json
index e3b6b28d..327e4627 100644
--- a/version.json
+++ b/version.json
@@ -1,3 +1,3 @@
 {
-    "version": "2025.2.12.1"
+    "version": "2025.2.18"
 }
\ No newline at end of file