html, * { margin:0 auto; padding:0; }

/* style1 */
body { margin:-5px auto; padding:0; font-size:12px; font-family:"Trebuchet MS", Verdana, Arial; height:100vh; }
sup{ font-size:6px; }

/* page elements */
h1 { font-size:34px; }
h1 a { font-family:Georgia, "Times New Roman", Times, serif; text-decoration:none; }
h2 { font-family:Georgia, "Times New Roman", Times, serif; font-size:1.65em; font-weight:normal; padding:0 0 0 10px; }
h3 { padding:20px 10px 0 10px; font-family:Arial, Helvetica, sans-serif; letter-spacing:-1px; font-weight:normal; font-size:1.1em; }
ul, ol { margin:0 0 0 45px; padding:0; }
p { font-family:"Trebuchet MS", Verdana, Arial; padding:5px 10px; line-height:1.6em; }
/* code block (auskommentiert im Original) */
hr { margin:7px 0 12px 0; }
details{ padding: 4px 0 0 29px; text-align: left;}
summary{ cursor: pointer;}
option{ padding:0 5px; }

.icon {
  font-family:
    system-ui,
    "Noto Sans Symbols 2",
    "Noto Sans Symbols",
    "Segoe UI Symbol",
    "DejaVu Sans",
    "Symbola",
    sans-serif;
}
#divNum{ width:14px; font-size:10px; text-align:center; }
#sortVersNr { padding: 6px; }
/* style3 */
fieldset{ padding:5px; margin-bottom:10px; }
legend{ padding:3px; font-size:16px; }

#searchContainer{ display:flex; flex-wrap:nowrap; gap:3px; }
#searchText { padding:1px; flex:1; }
#searchButton { padding:0 3px; cursor:pointer; }
#versAnker{ display:none; }

/* style4 */
#shapes{ display:none; padding:2px 2px 0 2px; font-family:openquran; direction:rtl; }

/* style5 */
#shapesLink{ display:block; width:70px; position:relative; margin-right:0; direction:rtl; padding:0 2px; }

/* common classes */
.clear { clear:both; }
.bold { font-weight:bold; }

/* style6 */
div#page { padding:10px 0 20px 0; }

/* main/content */
#content { padding-right:5px; }
#content a { text-decoration:none; }

/* style7 */
#basmalah{ font-family:samarqand; font-size:26px; text-align:center; }
#kufi{ font-family:samarqand; font-size:21px; }
#randomPage{ margin-top:30px; padding:7px 0; }
#randomPage img{ padding:0 9px }
#randomPage a{ display:block; }

/* style8 */
div.footer { margin:12px 0 38px 0; }
div.footer p { text-align:center; padding:13px 0; }
div.footer p a { padding:4px; font-family:"Trebuchet MS", Verdana, Arial; text-decoration:none; margin:0 10px; }

/* style9 */
#suraSelector { height:114px; width:100%; }
#suraSelector option{ display:block; padding:0 0 0 7px; }
.sidebar_menu_title { padding:3px 7px; font-size:16px; font-weight:bold; cursor:pointer; }
#sidebar { padding:9px; }
#sidebar a { text-decoration:none; margin-top:5px; padding-left:7px; font-weight:bold; }
#translist { margin:5px; padding-right:5px; overflow:auto; height:95px; }
#translist tr td{ }
#translist img { padding-left:5px; }
#translist label{ display:block; }
#searchTool { padding:5px; margin:7px 7px 7px 0; clear:both; }
#multVersesShow{ display:block; width:100%; text-align:center; }

/* style10 */
#searchtable{ padding:0 2px; }

#roots_table { font-size:15px; display:block; margin-bottom:6px; }
#roots_table a{ width:10%; height:17px; font-weight:bold; display:block; float:right; margin:3px 3px 2px 2px; padding:1px 0; }

.singleMenu { margin-bottom:7px; }
#search { padding:0 5px; }
#info{ font-size:16px; text-align:center; padding:5px 12px; margin:0 0 23px 0; }

.singleRoot { display:flex; padding-top:3px; }
#getRootVers { margin:7px 0; }
.rootExpl{ padding:10px 0; flex:1 1 auto; min-width:0; }
.rootname{ font-family:openquran; font-size:110%; padding:0 3px; text-align:center; min-width:38px; max-width:38px; margin:2px 0 6px 6px; }
.rootname a{ display:block; }
#rootNr{ font-size:12px; font-family:"Courier New", Courier, monospace; }
#rootEn{ direction:ltr; font-size:14px; }
#rootDe{ direction:ltr; font-size:14px; }
#rootSame{ text-decoration:none; }
#rootMenu{ font-size:12px; padding:7px 2px 0 7px; margin-left:7px; }

.suggestionsBox {
  position:absolute; top:118px; right:10%; z-index:10; text-align:center;
  background-repeat:no-repeat; width:115px; height:35px; font-size:14px; padding-top:3px; overflow:hidden;
}
.suggestionsBox a{ cursor:help; }

#warn { font-size:10px; }
#sideDown{ padding:5px; }

/* style11: Context Menu */
.bgselected1{ text-align:center; }
.bgselected2 img{ padding:0 3px; }

/* context box layout */
#contextMenuDiv { padding:5px; display:none; }
#contextMenuDiv a{ padding:0 5px; display:block; }
#contextMenu { padding:1px 1px 1px 2px; text-decoration:none; }
#contextMenuSplit { background-repeat:repeat-x; display:block; height:1px; width:100%; margin:1px 1px 3px 1px; }
#contextMenuDiv td{ vertical-align:top; }

/* search menu layout */
#searchmenu { width:100%; display:none; height:100px; overflow-y:scroll; font-size:11px; }
#chooseTrans a { display:block; float:left; margin:1px 2px; padding:0 4px; width:44%; }
#searchtitle { padding:7px; margin-bottom:3px; display:block; }
#searchtitle a { margin-left:140px; }
#searchmenu a { text-decoration:none; }
#tableClose{ padding:0 3px; }
#multVerses{ width:100%; }

/* tooltip & analyse */
#expression { font-family:"Courier New", Courier, monospace; }
#analyze img{ cursor:pointer; }
#analyseTbl { width:100%; max-width:600px; }
#analyseTbl td{ font-size:14px; }
#anatd2{ word-break:break-all; }

code{ font-family:Courier; }
div.rightmenu { margin:0; text-align:right; position:fixed; top:100px; left:auto; width:36px; right:0; }

a#tableLink { font-weight:normal; }

.tabari{ font-family:openquran; direction:rtl; padding-right:110px; font-size:14px; }
a{ text-decoration:none; }
label{ cursor:pointer; }
ul{ list-style-type:square; }
#howto { padding:7px; font-size:14px; }

.ui-autocomplete { max-height:100px; overflow-y:auto; overflow-x:hidden; }
* html .ui-autocomplete { height:100px; }
.ui-autocomplete { direction:rtl; }
.wrapper { display:flex; flex-flow:row wrap; }
.wrapper > * { padding-left:5px; padding-right:10px; flex:1 100%; }

.main{ width: 100% !important; word-wrap: break-word; }
.main img{max-width: 100%;} 

@media all and (min-width:800px) {
  .main{ flex:6 0px; margin-top:30px; margin-right:300px; order:1; min-width:500px; }
  .aside{ right:0; top:9px; order:2; min-width:280px; max-width:290px; position:fixed; padding: 10px;  margin-right: 5px; } 
  .footer{ order:3; margin:19px 0 38px 0; }
}
@media all and (min-width:600px) {
  .aside { flex:1 0 0; }
}
@media only screen and (max-width:450px) {
  #roots_table td { width:40px; height:19px; }
  div.footer p a{ margin: 0 6px !important;}
}

#page{ margin-top:5px; }

/* side panel layout */
.sidepanel {
  width:0; position:fixed; z-index:1; top:0; left:0; overflow-x:hidden;
  transition:0.5s; padding-top:40px; background-repeat:no-repeat; background-position:14px 10px;
}
.sidepanel a {
  padding:10px 8px 6px 32px; text-decoration:none; font-size:16px;
  display:block; transition:0.3s;
}
.sidepanel img { margin-right:5px; opacity:0.7; }
.sidepanel a:hover { }
.sidepanel .closebtn { position:absolute; top:2px; right:23px; font-size:22px; font-weight:bold; font-style:italic; }
a.closebtn { padding:0 0 0 36px; display:block; }

/* button layout */
.openbtn {
  font-size:20px; cursor:pointer; padding:8px 10px; border:none; top: 5px;
  margin-left:9px; margin-right:25px; text-align:left; position:fixed; font-weight:bold; transform:scaleX(1.2);
}
code{ display:block; width:100%; word-break:break-all; }
div #avatar{ width:30px; height:30px; margin:3px 0; background-position:center; }

#version{ width:192px; height:34px; background-size:192px; background-repeat:no-repeat; line-height:40px; padding-left:126px; font-style:italic; font-size:10px; display:inline-block; }
#cookSet, #cookAcc{ display:inline-block; }
a#cookAcc{ padding:4px 9px; margin-left:6px; }

/* Auto Complete */
.ui-autocomplete { position:fixed !important; }
#socialmedia img{ opacity:0.7; }
#socialmedia img:hover { opacity:1; }





#regex_hint_popup{
    position:absolute; z-index:9999; display:none;
    max-width:90vw; min-width:260px; direction:rtl;
    font-family:inherit; font-size:12px; line-height:1.5;
}
#regex_hint_popup .hdr{
    display:flex; justify-content:space-between; align-items:center;
    gap:8px; padding:4px 6px 6px;
}
#regex_hint_popup .close{ cursor:pointer; font-size:16px; line-height:1; position: absolute; }
#regex_hint_popup .list{ max-height:260px; overflow:auto; padding:4px 0; }
#regex_hint_popup .item{ padding:3px 5px; cursor:pointer; }
#regex_hint_popup .exp{ display:block; font-weight:600; }
#regex_hint_popup .en{ display:block; opacity:.7; font-size:12px; direction:ltr; }

.popupimg{ cursor:pointer; }
#shortCut{ font-size:12px; }
#privecy, #updates{ display:none; }
#lastUp{ display:block; }

#notice{
    position:fixed; bottom:0; left:0; z-index:12; text-align:center;
    font-size:14px; padding:19px 0; width:100%; display:none;
}

#multiMenu{
  width:95px; height:114px; position:absolute;
  display:none; padding:0 8px 0 0; overflow:auto;
}
#multiMenu a{
  display:block; font-size:12px; direction:rtl; padding:1px; margin:0 3px 0 0;
}
#multiMenu a:hover{ }

div.footera{ z-index:-9; position:absolute; width:99%; }

.multi-banner{
  position:fixed; left:50%; top:50%; transform:translate(-50%,-50%);
  max-width:80vw; max-height:60vh; overflow:auto;
  z-index:9999; text-align:center; line-height:1.4; font-size:16px; white-space:pre-wrap;
}

#SuraMenu{
  position:absolute; display:none; padding:2px;
}
#SuraMenu a{ display:grid; padding:3px; }

#serial_dialog{
  display:block; text-align:right; padding:1px 9px; position:sticky; bottom:-7px !important;
}
#serial_copy{ cursor:pointer; padding-left:9px; }

#rightClickMenu{
  position:absolute; display:none; padding:2px;
}
#rightClickMenu a{ display:block; padding:2px 4px 2px 0; text-decoration:none; }
#rightClickMenu a:hover{ }
#rightClickMenu img{ padding:0 2px 0 0; margin:0 7px 0 2px; }

#socialmedia img{ margin:0 3px; }

#hanifBox{
  text-decoration:dotted; cursor:help; position:relative; display:inline-block;
}
#hanifBox .tooltiptext{
  visibility:hidden; padding:0; position:absolute; z-index:1; font-size:11px;
  left:0%; top:100%; opacity:0; transition:opacity 1s; display:flex;
}
#hanifBox:hover .tooltiptext{ visibility:visible; opacity:1; }

#tooltipTitle{ font-size:14px; font-weight:bold; padding:0 7px 2px 0; font-style:normal; display:block; }
.tooltiptext img{ max-width:170px; margin:0 6px 0 0; max-height:100%; }
.tooltiptext q{ font-style:italic; }

#toolText{ display:block; margin:5px 0 0 7px; }
#ttext{ margin:7px; }
#subLink{ margin:0 0 -2px 2px; width:14px; filter:hue-rotate(90deg); }
#subLink:hover{ filter:hue-rotate(0deg); }
#sublinks::before{ content:".."; }
#rootDe, #rootEn{ padding:0 0 0 6px; }
.rootname a{ height:100%; }
#allSerials{ display:none; }
#menuTools, #menuComm{ padding:0 0 4px 30px; }
.sidepanel{ z-index:9; }
.img_opac{ filter:contrast(0); }

#notes_container{ word-wrap:break-word; padding:6px 3px 0 5px; }
.subject{ display:flow-root; margin:7px; }
.subject img{ width:60px; float:left; margin:0 9px; }

/* jQuery UI Titlebar Layout (ohne Farben/Ränder) */
.ui-dialog-titlebar{ padding:3px !important; margin:0 !important; }
.ui-dialog-title{ padding:0 !important; margin:0 !important; }
.ui-dialog-titlebar-close{ top:0 !important; right:0 !important; margin:0 !important; }

/* esearch */
#eSearch label, #eSearch input{ text-align:center; }
#eSearch input[type=text]:focus{ outline:none; }
#linkRes0{ font-weight:bold; }
h2{ padding: 24px 0 12px 6px; margin-top:30px; padding: 9px 0 15px 15px; }
#hint{ font-size:10px; font-style:italic; }
#hint a{ font-size:12px; font-weight:bold; }
fieldset{ padding: 12px; word-wrap: break-word; }
fieldset div{ margin-top: 13px; }
legend{ padding: 1px 6px; font-size: 15px; margin-left: -7px; cursor:help; }
.linkRes a{ display: block; text-align: right; padding: 1px 6px; }
.subject { display: flow-root; margin: 7px; }
.subject img { width: 60px; float: left; margin: 0 9px; }