:root{
    --body:     #2F5686;
    --color:    #666666;
    --mainBg:   #fff;
    --asideBg:  #fff;
    --title:    #fff;
    --titleBg:  linear-gradient(187deg, rgb(249, 249, 186) 0%, rgb(161, 203, 182) 41%, rgb(133, 168, 227) 95%);
    --a:        #0066A4;
    --ah:       #FB8D00;
    --shadow:   #a7aab5;
    --border:   #ccc;
    --warn:     #ff0000;
    --any1:     #E3F2F9;
    --any2:     #fff;
    --any3:     #fd8e00;
}

/* === Tags & einfache Pseudoklassen === */
body { color:var(--color); background: var(--body);}
a { color:var(--a); }
a:hover { color:var(--ah); }
a:active { color:#CC6600; }
h1 a { color: var(--color); }
h1 a:hover { color:#C3A279; border-bottom:1px solid #C3A279; }
h2 { color: var(--titleBg); }
h3 { color:#283E59; }
hr { border:1px solid var(--border); }
fieldset{ border:2px solid var(--border); border-radius:6px; background: var(--mainBg); }
legend{ color: var(--a); }
form[name=qform]{ background:var(--asideBg); }
label{ color:var(--color); }
label:hover{ color:var(--ah); }
label:has(input[type="radio"]:checked){ color: var(--ah); }
option{ color:var(--color); }
option:hover{ color: var(--ah); }
option[selected]{ color: var(--ah);  }
input[type="radio"], input[type="checkbox"] { accent-color:var(--a); }
input[type="submit"] { background: var(--titleBg); color: var(--title); border-radius: 5px; border: 2px solid var(--border);}
input[type="submit"]:hover { box-shadow: 0 0 1px var(--shadow); color: var(--ah); }
input[type="text"], input[type="number"] { border: 1px inset var(--border) !important; color: var(--color) !important; border-radius: 3px; background: var(--mainBg) !important; }
select { background: var(--asideBg); color: var(--color); border-radius: 4px; border: 1px solid var(--border); }
textarea { background: var(--mainBg); color: #ccc !important; border: none; }

mark { background:#d6ecff; }

.aside{background: var(--asideBg); }
#divNum{ border:none; color:var(--color); background: var(--asideBg); }

/* === Formulare / Inputs === */
#searchText { border:2px inset var(--border); border-radius:5px; }
#searchButton { }

/* === Panels / Boxen === */
#shapes{ border-top:1px solid var(--border); border-radius:3px; background:var(--any1); border-right: 1px solid var(--border);border-left: 1px solid var(--border);}
#shapesLink{ border-top:1px solid var(--border); border-radius:3px; background:var(--any1); border-right: 1px solid var(--border);border-left: 1px solid var(--border);}
div#page { background:var(--mainBg); border:5px solid var(--mainBg);  }
#content { border-right:1px solid #dddddd; }
#content a:hover { color:#FF6600; }
#randomPage{ background:aliceblue; }

/* === Footer === */
div.footer { background: var(--titleBg); }
div.footer p a { color:#ffffff; }

/* === Listen / Sidebar === */
#suraSelector { border:1px solid var(--mainBg); }
.sidebar_menu_title { border-top:1px solid var(--border); border-left:1px solid var(--border); border-right:1px solid var(--border); color:var(--title); }
#sidebar td{ border:1px solid var(--border); }
#searchTool { border:1px solid var(--border); }

/* === Tabellen / Suchbereich === */
#searchtable{ border-radius:3px; color:#fff; }
#searchtable:hover { color: var(--ah); box-shadow: var(--shadow);}
#roots_table { border:none; border-bottom:1px solid var(--border); }
#roots_table a{ border:1px solid var(--border); border-radius:3px; box-shadow: -2px 2px var(--any1); }
#roots_table a:hover{ box-shadow:none; }
.singleMenu { border:1px solid var(--border); background: var(--asideBg); }
.op{ background:var(--any1); }
.nop{background:var(--any2); }
#info{ color:#3B5B84; border:1px solid var(--border); border-radius:3px; }
#getRootVers { border-radius:6px; box-shadow:1px 1px 3px #dbdbdb; }
.rootname{ background:#F0F0F0; }
.rootname a{ color:var(--color); }
.rootname a:hover{ box-shadow:0 0 4px #000; }
#rootAr{ color:#4E7241; }
#rootEn{ color:#336699; }
#rootDe{ color:#A8541C; }
#rootSame{ color:#C00; }
#emptyRoot { color:#999999; }
#sortVersNr { border:1px solid var(--border); -moz-border-radius:7px; -webkit-border-radius:7px; }
#sortVersNr a { color:#CCCCCC; }
#sortVersNr a span { color:var(--warn); }
.suggestionsBox { background-image:url(images/ac.png); }
#warn, #divider { color:var(--warn); }

.multiSplitter{ border-top:none; }

/* === Kontextmenü / Highlights === */
.bgselected1, .bgselected2, .sidebar_menu_title, #searchtable{ background: var(--titleBg); }
.bgselected1{ border:1px outset var(--border); }
.bgselected1 a{ color:var(--title); text-shadow: 1px 1px 2px var(--shadow);}
.bgselected1 a:hover{ color:var(--ah); /*! text-shadow: 1px 1px 2px beige; */}
.bgselected2{ border:1px solid var(--border); }
.bgselected2 img{ border-right:1px solid var(--border); }

#contextMenuDiv { border:1px solid var(--border); background:var(--any1); }
#contextMenuDiv a{ background:var(--mainBg); border: 1px solid var(--any1); border-radius:3px; }
#contextMenuDiv a:hover, #contextMenuDiv label:hover{ color: var(--title); background: var(--ah); }
#contextMenuSplit { background-image:url(../images/splitter.gif); }

/* === Suchmenü === */
#searchmenu { background:#f2f2f2; }
#chooseTrans a { border:1px solid #CDCDCD; background:var(--mainBg); border-radius:5px; }
#chooseTrans a:hover { background:#333333; color:#fff; }
#searchtitle { background:#40628D; color:#fff; }
#searchtitle a { color:#fff; }
#tableClose{ border-radius:5px; color:#AEBDBF; background:#333; }
#multVerses{ background:var(--mainBg); border:1px solid var(--border); color:#000; }

/* === Tooltip / Analyse === */
#hint{ color:var(--warn); }
#expression { color:#999999; }
.highlight { color:var(--warn); }
.highlightContent, #note { background:#EF0FFF; color:#fff; }
.green { color:#339900; }
#analyze fieldset{ border:1px solid var(--border); }
#analyseTbl { border:none; }
#analyseTbl td{ border:1px solid var(--border); }
#anatd{ background:#FFFFCC; }
#anatd2{ background:#FFCCFF; }
#init{ }
.icon{ display: inline-grid; border: 1px solid #d5d5d5; width: 16px; text-align: center; border-radius: 3px; background: var(--mainBg);
  box-shadow: 1px 1px 1px #666; line-height: 15px; }
.icon:hover{ box-shadow: none; }
#bigint { background: var(--mainBg); color: var(--color) !important; }

/* === Links / Text === */
a#tableLink { color:#999999; }
a:hover#tableLink  { color:#FF9900; }
#howto { color:var(--color); border:2px solid #EAEAEA; border-radius:15px; }

.asidea{ background:var(--asideBg); }

/* === Sidepanel / Buttons === */
.sidepanel { background:var(--body) no-repeat url(../images/alquran.png) top 10px left 14px; color:var(--title); box-shadow: 1px 1px 14px var(--shadow);}
.sidepanel a { color:#f1f1f1; }
.sidepanel a:hover { color:#818181; }
.openbtn { background:var(--any1); color:var(--titleBg); border: 1px solid var(--border);border-radius: 6px;opacity: 0.5;}
.openbtn:hover { background:var(--titleBg); color:var(--title); box-shadow: 1px 1px 3px var(--border);opacity: 1;}

/* === Sonstiges === */
div #avatar{ border-radius:50px; box-shadow:0px 0px 4px 2px #172433; }
#version{ background-image:url(../images/button.png); color:#d4d4d4; }
a#cookAcc{ background:#9dd12f; color:#fff; border-radius:5px; }
a#cookAcc:hover{ color:blue; background:#690; }
#cookSet{ color:#bdeb8f; }
#cookSet:hover{ color:#fff; }




#regex_hint_popup{ background:#fff; border:1px solid var(--border); border-radius:8px; box-shadow:0 8px 24px rgba(0,0,0,.15); }
#regex_hint_popup .hdr{ border-bottom:1px solid #eee; }
#regex_hint_popup .close{ color:lightgray; border:0; background:transparent; }
#regex_hint_popup .item{ border-radius:6px; }
#regex_hint_popup .item:hover{ background:#f5f5f5; }

#shortCut{ color:#999; }

#notice{ color:#fff; background: var(--titleBg); }

#multiMenu{ border:1px solid var(--border); background:var(--mainBg); box-shadow:4px 4px 4px rgba(68,68,68,0.5); }
#multiMenu a{ border-bottom:1px outset var(--border); border-radius:2px; }
#multiMenu a:hover{ border-left:1px outset var(--border); border-bottom:1px inset #ccc; background:#e6e6fa; }

.multi-banner{ background:var(--mainBg); border-radius:12px; box-shadow:0 12px 30px rgba(0,0,0,.35); }

#SuraMenu{ background:var(--mainBg); border-radius:5px; border:1px solid #dfdfdf; box-shadow:1px 1px 3px var(--shadow); }
#SuraMenu a{ border-bottom:1px inset #d2d2d2; }

#serial_dialog{ border-top:1px solid #d7d7d7; background:var(--mainBg); color:#81ACF9; }

#rightClickMenu{ background:var(--mainBg); border:1px solid var(--border); box-shadow: 1px 1px 6px var(--shadow); border-radius:6px; }
#rightClickMenu a{ color: var(--color); }
#rightClickMenu a:hover{ background: var(--body); color: var(--ah); }
#rightClickMenu img{ border-right:1px solid var(--border); }

#hanifBox{ border-bottom:1px dotted black; }
#hanifBox .tooltiptext{ background:var(--mainBg); color:#4a4a4a; box-shadow:2px 2px 9px #6a6a6a; border:1px solid var(--border); border-radius:5px; }
#tooltipTitle{ color:#6e76f0; }
.tooltiptext img{ border-radius:5px 0 0 5px; }

#notes_container a{ color:var(--a); border:none !important; }
#notes_container a:hover{ color:var(--ah); }
#note_nav{ background: var(--any1) !important; border-top: 1px solid var(--border) !important; }
#note_nav span{ color: var(--a); padding: 0 6px;background: var(--any2);border-radius: 3px;}
#note_nav span:hover{ color: var(--ah); box-shadow: 1px 1px 2px var(--shadow);}

/* jQuery UI Farbschicht */
.ui-dialog-titlebar{ background: var(--titleBg) !important; color: var(--title) !important; }
.ui-widget.ui-widget-content{ background: var(--mainBg); border:1px solid #c5c5c5 !important; box-shadow:0px 0px 14px #6c6c6c; }
.ui-dialog-buttonpane { background: var(--mainBg); }
.ui-dialog .ui-dialog-buttonpane button { background: var(--titleBg); color: var(--title); }

/* esearch */
#eSearch label, #eSearch input{ color:#66F; border:none; }
#eSearch input[type=text]:focus{ border:none; box-shadow: inset 0px 0px 3px 0px #101033; color:#000; }
#eSearch input[type=text]{ border: 1px inset #e1e1e1; border-radius: 4px;}
#eSearch label:hover{ color:#F60; }
#regexColor{ color: var(--any3); }
#eSearch h2{ color: var(--a); }
#eSearch fieldset div{ background: gainsboro; }
#eSearch legend { color: var(--title); background: var(--titleBg); border-radius: 4px; }
#eSearch .linkRes a:hover{ box-shadow: 1px 1px 4px var(--shadow); }
#eSearch .linkRes a{  }
#eSearch .linkRes a:focus{ box-shadow: 1px 1px 4px; }
#eSearch .highLighted{ box-shadow: 0px 0px 8px var(--a); border: 1px solid var(--border); }

#subTit a, #subjects span{ background: var(--ah); }
#contactform{ background: var(--any1); box-shadow: 1px 1px 7px var(--shadow); border-radius: 8px;}
#contact input, #contact textarea{ var(--mainBg); color: var(--a); border: 1px solid var(--border); }
#rootExp {
  background: var(--a);
  color: var(--any1);
  box-shadow: 1px 1px 2px var(--shadow);
}
#rootExp:hover {
  color: var(--ah);
  background: var(--any1);
}