/**
 * Dokuwiki Namespaced template
 *
 * @link    https://www.dokuwiki.org/template:namespaced
 * @author  Simon DELAGE <sdelage@gmail.com>
 * @license GPL 2 (https://www.gnu.org/licenses/gpl-2.0.html)
 *
 * This file provides main style rules
*/

/**
* Pagetools constants
* Move tpl_indexerWebBug() out of the way
* MICRO-RESET
* HTML ITEMS
* -- Headings
* LAYOUT
* FLEXBOX
* SECTION HIGHLIGHTING
* SKIP
* HEADER
* -- Navbar
* MAIN
* -- Page nav
* -- ToC
* -- SubNS index
* -- docInfo
* -- Pagetools & Contools
* -- Screen Mode
* FOOTER
* WIDGETS
* TABS
* GENERIC CLASSES
* DOKUWIKI GLOBAL
* DOKUWIKI MODES
* -- ACL manager
* -- Admin page
* -- Edit
* -- Extensions
* -- Media details
* -- Media manager
* -- Settings
* -- Users
* PLUGINS
* -- Blockquote
* -- Cloud
* -- Sitemapnavi
* -- Tags
* -- Tagalerts
* -- Translation
* -- Userhomepage
* -- Wrap
* RESPONSIVENESS
* MORE ACCESSIBILITY
*/

/* Pagetools constants */

    @ico-width: 30px;
    @ico-margin: 10px;

/* Move tpl_indexerWebBug() out of the way */

#namespaced__housekeeper {
    position: fixed;
    top: 0;
}

/* MICRO-RESET
-------------------------------------------------------------- */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    border: 0;
    margin: 0;
    outline: 0;
    padding: 0;
    vertical-align: baseline;
}

html {
    overflow-y: scroll;
    /* Keeps page centred in all browsers regardless of content height */
    -webkit-text-size-adjust: 100%;
    /* Prevents iOS text size adjust after orientation change, without disabling user zoom */
    -ms-text-size-adjust: 100%;
    /* www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/ */
    font-size: .625em; /* fallback IE8+ */
    font-size: calc(1em * .625); /* IE9-IE11 math fixing. See http://bit.ly/1g4X0bX */
    /* set 1rem (base font-size) to be equivalent to 10p */
    scroll-behavior: smooth;
    /* a11y friendly smooth scrolling, see ACCESSIBILITY */
}

body {
    font-size: 1.6em;
}

* {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

/* HTML ITEMS
-------------------------------------------------------------- */

a {
    text-decoration: none;
    color: @ini_link;
}

a:hover {
    color: @ini_text_neu;
}

a:hover svg {
    fill: @ini_text_neu;
}

a:hover img {
    opacity: .8;
}

hr {
    width: 80%;
}

dl {
    margin-bottom: 1rem;
}

dt {
    font-weight: bold;
}

/*
hr.vertical {
    margin: auto 1.5rem auto 0;
    width: unset;
    height: 95%;
    border-left-style: solid;
}
*/

input:focus {
    background-color: @ini_highlight;
}

.page button {
    border: none;
    font-variant: small-caps;
    padding: 1rem 2rem;
    margin: .5rem;
    font-size: small;
    vertical-align: text-bottom;
}

button:disabled {
    pointer-event: none;
}

button:hover {
    color: @ini_text;
    transition: background 200ms ease-in-out, color 300ms ease-in-out;
}

input[type=text],
button[type=submit] {
  border-radius: 0;
}

button[type=submit],
button[type=reset] {
  appearance: none;
  cursor: pointer;
}

hr {
    border-width: calc(@ini_border_width/2);
}

input[type=text]:focus {
  outline: none;
}

nav {
    z-index: 2
    /* Keeps any <nav> above settings `outkey` spans on configuration page */
}

pre {
    overflow: auto;
    padding: 1rem;
    border: @ini_border_width solid transparent;
}

svg {
    fill: @ini_text;
}

svg:hover,
a:hover svg {
    fill: @ini_text_neu;
}

table {
    border-collapse: collapse;
}

table,
thead,
th,
td {
    border: 1px solid transparent;
}

ul, ol {
    list-style-position: outside;
    margin-left: 1em;
}

ul.nostyle {
    list-style: none;
    margin: 0;
}

ul.inline li {
    display: inline;
    margin: 0 .5rem;
}

ul.inline li:first-child {
    margin: 0 .5rem 0 0;
}

ul.inline li:last-child {
    margin: 0 0 0 .5rem;
}

ul.inline li:first-child:last-child {
    margin: 0;
}

/* -- Headings -- */

h1,
h2,
h3,
h4,
h5,
h6,
#dw__toc h3,
.h6 {
    font-weight: bold;
    margin: 0;
}

#namespaced__aside h1,
#namespaced__aside h2,
#namespaced__aside h3,
#namespaced__aside h4,
#namespaced__aside h5,
h6,
#dw__toc h3,
#qsearch__out strong,
.h6 {
    color: @ini_text_neu;
}

#namespaced__site.mode_admin h1,
#namespaced__site.mode_admin h2,
#namespaced__site.mode_admin h3,
#namespaced__site.mode_admin h4,
#namespaced__site.mode_admin h5 {
    color: @ini_blue_color;
}

h1 {
    font-size: 3rem;
    /*line-height: 36px;*/
    padding: 0 0 1rem 0;
}

h2 {
    font-size: 2.8rem;
    /*line-height: 34px;*/
    padding: 0 0 .8rem 1rem;
}

h3 {
    font-size: 2.6rem;
    /*line-height: 32px;*/
    padding: 0 0 .6rem 2rem;
}

h4 {
    font-size: 2.4rem;
    /*line-height: 30px;*/
    padding: 0 0 .4rem 3rem;
}

h5 {
    font-size: 2.2rem;
    /*line-height: 28px;*/
    padding: 0 0 .2rem 4rem;
}

body.oneborder-toc #dw__toc h3 {
    padding: 0;
}

h6,
#dw__toc h3,
#qsearch__out strong,
.h6 {
    font-size: 1.9rem;
}

h6,
#qsearch__out strong {
    padding: 0 0 1rem 0;
}

#dw__toc h3,
aside.theme h6,
aside.secondary h6,
aside.dark h6 {
    padding: .5rem 1rem;
}

h6 span.label {
    padding: 0 0 3px 0 !important;
}

h6 span.label,
#dw__toc h3 {
    line-height: 1.7;
}

h6 span.label {
    display: unset;
}

#namespaced__site_nav_labels h6 {
    padding: .4rem 1rem;
}

/* LAYOUT
-------------------------------------------------------------- */

#namespaced__site {
    background-color: @ini_background;
}

/* FLEXBOX
-------------------------------------------------------------- */

.flex {
    display: flex !important;
    flex-flow: row wrap;
    justify-content: space-between;
    align-items: center;
    align-content: stretch;
}

.flex.row {
    flex-direction: row;
}
.flex.row-reverse {
    flex-direction: row-reverse;
}
.flex.column {
    flex-direction: column;
}

.flex.nowrap {
    flex-wrap: nowrap;
}

.flex.justify-evenly {
    justify-content: space-evenly;
}
.flex.justify-start {
    justify-content: start;
}
.flex.justify-center {
    justify-content: center;
}
.flex.justify-end {
    justify-content: end;
}
.flex.justify-between {
    justify-content: space-between;
}

.flex.align-stretch {
    align-items: stretch;
}
.flex.align-start {
    align-items: flex-start;
}
.flex.align-center {
    align-items: center;
}
.flex.align-end {
    align-items: flex-end;
}

.flex .grow1 {
    flex-grow: 1;
}
.flex .grow2 {
    flex-grow: 2;
}
.flex .grow4 {
    flex-grow: 4;
}

.flex .gap3 {
    gap: 3px;
}

.flex .gap5 {
    gap: 5px;
}

.flex .gap10 {
    gap: 10px;
}

.flex .gap20 {
    gap: 20px;
}

/* SECTION HIGHLIGHTING
----------------------------------------------- */

div.secedit.editbutton_section {
    display: block;
    margin-top: -1.6rem;
    float: right;
}

div.secedit.editbutton_section button {
    padding: .1rem .9rem;
}

.dokuwiki div.section_highlight {
    margin: 0 -1rem; /* negative side margin = side padding + side border */
    padding: 0 .2rem;
    border-width: 0 .8rem;
    border-style: solid;
    border-color: @ini_highlight;
}

/* SKIP
-------------------------------------------------------------- */

.skip {
    width: 100% !important;
    font-size: 3rem;
    display: block;
    padding: 1rem 0;
    text-transform: uppercase;
    background-color: #000;
    color: #fff;
}

a.skip:focus,
a.skip:active {
   position: initial !important;
   height: initial !important;
   left: 0;
}

/* HEADER
-------------------------------------------------------------- */

#namespaced__site_branding,
#namespaced__secondary_header {
    margin: 1rem 0;
}

#namespaced__site_logo,
#namespaced__site_title span {
    margin-right: 2rem;
}

#namespaced__site_description,
#namespaced__widebanner_wrap img {
    width: 100%;
}

/* A SUPPRIMER PLUS TARD AVEC LA DIV ELLE-MEME */
#namespaced__sitetools .mobiletools {
    display: none;
}

#namespaced__sitetools ul li a span,
#namespaced__sitetools ul li a svg {
    vertical-align: middle;
}

#namespaced__sitetools ul li a span {
    margin-right: .1rem;
}

#namespaced__sitetools ul li.media a span {
    margin-right: .4rem;
}

#namespaced__widebanner_wrap img {
    height: auto;
}

/* -- Navbar -- */

#namespaced__site_nav {
    z-index: 3;
    /* Above tools navs (aka contools and pagetools) */
}

#namespaced__site_nav.navbar {
    font-size: 90%;
}

.navbar > div > ul {
    display: flex;
}

.navbar ul li.focus > ul {
    display: block;
}

.navbar ul li ul,
.navbar ul li:hover ul ul,
.navbar ul ul li:hover ul ul,
.navbar ul ul ul li:hover ul ul,
.navbar ul ul ul ul li:hover ul ul,
.navbar ul li.focus ul ul,
.navbar ul ul li.focus ul ul,
.navbar ul ul ul li.focus ul ul,
.navbar ul ul ul ul li.focus ul ul {
    display: none;
}

.navbar ul li:hover ul,
.navbar ul ul li:hover ul,
.navbar ul ul ul li:hover ul,
.navbar ul ul ul ul li:hover ul,
.navbar ul ul ul ul ul li:hover ul,
.navbar ul li.focus ul,
.navbar ul ul li.focus ul,
.navbar ul ul ul li.focus ul,
.navbar ul ul ul ul li.focus ul,
.navbar ul ul ul ul ul li.focus ul {
    display: block;
}

.navbar ul.dropdown {
    right: 0;
    top: auto;
    width: 400px;
    background-color: @ini_background;
}

.navbar ul li ul li {
    float: none;
}

.navbar ul li ul {
    position: absolute;
    width: 200px;
    top: 44px;
}

/*
.navbar ul.sub-menu {
    width: 400px;
}
*/

.navbar ul li ul li a {
    border-top: none;
}

.navbar ul li ul li a,
.navbar ul li ul li span,
.navbar ul li.current-menu-item ul li a,
.navbar ul li ul li.current-menu-item a,
.navbar ul li.current_page_ancestor ul li a,
.navbar ul li.current-menu-ancestor ul li a,
.navbar ul li.current_page_item ul li a {
    float: none;
    padding: 10px 15px;
    display: block;
    text-align: left;
    text-transform: none;
}

.navbar ul.sub-menu li a {
    color: @ini_link;
}

.navbar ul.sub-menu li a.active {
    color: @ini_text;
}

.navbar ul li ul li ul {
    left: 200px;
    top: 0;
}

.navbar ul li:hover > ul,
.navbar ul li.focus > ul {
    left: auto;
}

.navbar ul ul {
    position: absolute;
    float: left;
    left: -99999px;
}

.navbar ul ul li:hover > ul,
.navbar ul ul li.focus > ul {
    left: 100%;
}

.navbar ul ul ul {
    left: -99999px;
    top: 0;
}

.navbar ul ul ul li:hover > ul,
.navbar ul ul ul li.focus > ul {
    left: 100%;
}

.navbar select {
    display: none;
}

/*
#namespaced__site_nav.navbar ul li,
#namespaced__site_nav.navbar ul li a,
#namespaced__site_nav.navbar ul li span {
    height: 42px;
}
*/
#namespaced__site_nav.navbar ul li.no-pages,
#namespaced__site_nav.navbar ul li a,
#namespaced__site_nav.navbar ul li span {
    display: flex;
    align-items: center;
    padding: .6rem 1rem;
    height: 42px;
}

#namespaced__site_nav.navbar ul li a.interwiki.iw_user {
    background-size: 2em;
    padding-left: 1.5em;
}

/*
#namespaced__site_nav.navbar ul li a svg,
#namespaced__site_nav.navbar ul li span svg,
#namespaced__site_nav.navbar ul li button svg {
    width: 30px;
    height: 30px;
}
*/
#namespaced__site_nav.navbar ul li.menu-item svg {
    width: 3rem;
    height: 3rem;
}

#namespaced__site_nav.navbar ul li a span {
    padding: 6px 0;
    margin-left: .5rem;
}

#namespaced__site_nav.navbar ul li.dropdown-header {
    text-align: center;
}

#namespaced__usertools li.account-edit ul {
}

#namespaced__usertools li.account-edit li {
    pointer-events: none;
}

#namespaced__usertools li span.loggedinas {
    color: @ini_text;
    align-content: center;
}

#namespaced__usertools li span.loggedinas bdi:first-child {
    margin: 0 .5rem;
}

#namespaced__usertools li.account-edit span.loggedinas a {
    pointer-events: auto;
}

#namespaced__site_nav.navbar ul.sub-menu li a {
    justify-content: flex-end;
}

#namespaced__site_nav.navbar ul.sub-menu li a svg {
    margin-left: 5px;
    fill: @ini_text;
}

#namespaced__site_nav.navbar ul.sub-menu li a.active {
    pointer-events : none;
}

nav ul li a:hover,
nav ul li span:hover,
#namespaced__contools ul li button:hover {
    transition: background-color 350ms ease-in-out, color 400ms ease-in-out;
}

#namespaced_ns_menu ul li a svg {
    margin-right: .4rem;
}

/* MAIN
-------------------------------------------------------------- */

#namespaced__content .page {
    margin-top: 1rem;
    padding: 0 @ico-margin;
}

main aside.gutter {
    min-width: @ico-margin + @ico-width;
    max-width: @ico-margin + @ico-width;
}

/* if overflow is set on main_subflex, sidebar can't be sticky
#namespaced__main_subflex,
article {
    width: 100%;
    overflow: auto;
}
*/

article {
    overflow: auto;
}

#namespaced__main_subflex,
article {
    width: 100%;
}

#namespaced__aside {
    min-width: @ini_sidebar_width;
    max-width: @ini_sidebar_width;
    width: @ini_sidebar_width;
    /*margin: .5rem .2rem .5rem 1rem*/
    margin: .5rem .2rem 0 1rem
}

#namespaced__aside aside:last-child {
    margin-bottom: 0;
}

#namespaced__content nav {
    z-index: 1;
    /* Below most important navs (admin dropdown, contools & pagetools) but same as config page `outkey` elements (doesn't matter as this nav will be hidden at config page) */
}

#dw__toc {
    min-width: @ini_toc_width;
    max-width: @ini_toc_width;
    width: @ini_toc_width;
    float: right;
    margin-top: .8rem;
    margin-left: 1.5rem;
}

body.theme-toc #dw__toc > div,
body.secondary-toc #dw__toc > div,
body.dark-toc #dw__toc > div,
body.fourborders-toc #dw__toc > div {
    padding: .5rem;
}

/*
body.fourborders-toc #dw__toc > div,
body.neu-toc.transparent-toc #dw__toc > div {
    padding: 0 .5rem .5rem .5rem;
}
*/
body.fourborders-toc #dw__toc > div {
    padding: 0 .5rem .5rem .5rem;
}

body.fourborders-toc #dw__toc {
    border: @ini_border_width solid transparent;
}

#dw__toc ul {
    margin-bottom: 0 !important;
}

#namespaced__aside aside.oneborder,
#namespaced__aside aside.fourborders,
#namespaced__page_nav,
body.oneborder-toc #dw__toc,
#namespaced__docinfo,
#namespaced__subns_index.oneborder,
#namespaced__subns_index.fourborders,
#namespaced__footer_widgets aside.oneborder,
#namespaced__footer_widgets aside.fourborders {
    border: @ini_border_width solid transparent;
}

#namespaced__aside aside.fourborders.neu,
#namespaced__footer_widgets aside.fourborders.neu,
#namespaced__subns_index.fourborders.neu,
#namespaced__docinfo.fourborders.neu {
    border-color: desaturate(@ini_border, 100%);
}

#namespaced__aside aside.oneborder.neu {
    border-right-color: desaturate(@ini_border, 100%);
}

#namespaced__subns_index.oneborder.neu,
#namespaced__docinfo.oneborder.neu {
    border-top-color: desaturate(@ini_border, 100%);
}

#namespaced__page_nav:not(.neu),
#namespaced__docinfo:not(.neu) {
    background-color: @ini_background;
}

#namespaced__aside aside,
#dw__toc {
    margin-bottom: 1.5rem;
}

#namespaced__aside aside.oneborder {
    padding-right: @ini_border_width;
}

#namespaced__subns_index.oneborder {
    padding-top: 1rem;
}

#namespaced__subns_index.fourborders {
    padding: 1rem;
}

#namespaced__aside aside.fourborders {
    padding: @ini_border_width;
}

body.oneborder-toc #dw__toc {
    padding-left: @ini_border_width;
}

body.no-sidepanel #namespaced__aside {
    display: none;
}

body.sidepanel-flip #namespaced__content {
    order: 1;
}

/*
body.sidepanel-flip #namespaced__main_subflex hr.vertical {
    order: 2;
    margin: auto 0 auto 1.5rem;
}
*/

body.sidepanel-flip #namespaced__aside {
    order: 3;
    margin-left: 1.5rem;
    margin-right: 0;
}

/* -- Page nav -- */

#namespaced__page_nav {
    margin: 1rem calc(@ico-margin + @ico-width + @ico-margin) 0 calc(@ico-margin + @ico-width + @ico-margin);
    padding: 1rem;
}

#namespaced__page_nav.oneborder {
    padding-bottom: calc(1rem+@ini_border_width);
}

#namespaced__page_nav.dark {
    color: @ini_text_neu;
}

#namespaced__page_nav aside {
    width: 100%;
}

/*
div.pageId span:hover {
  color: @ini_text;
}
*/

div.pageId span {
  cursor: default;
}

#namespaced__site.mode_admin #namespaced__subns_index,
#namespaced__site.mode_conflict #namespaced__subns_index,
#namespaced__site.mode_draft #namespaced__subns_index,
#namespaced__site.mode_edit #namespaced__subns_index,
#namespaced__site.mode_index #namespaced__subns_index,
#namespaced__site.mode_media #namespaced__subns_index,
#namespaced__site.mode_preview #namespaced__subns_index,
#namespaced__site.mode_profile #namespaced__subns_index,
#namespaced__site.mode_recent #namespaced__subns_index,
#namespaced__site.mode_recover #namespaced__subns_index,
#namespaced__site.mode_resendpwd #namespaced__subns_index,
#namespaced__site.mode_search #namespaced__subns_index {
    display: none !important;
}

#namespaced__site.mode_admin #namespaced__page_nav,
#namespaced__site.mode_profile #namespaced__page_nav,
#namespaced__site.mode_recent #namespaced__page_nav,
#namespaced__site.mode_resendpwd #namespaced__page_nav,
#namespaced__site.mode_search #namespaced__page_nav {
    display: none !important;
}

#namespaced__site.mode_conflict nav.breadcrumbs,
#namespaced__site.mode_draft nav.breadcrumbs,
#namespaced__site.mode_edit nav.breadcrumbs,
#namespaced__site.mode_preview nav.breadcrumbs,
#namespaced__site.mode_recover nav.breadcrumbs {
    display: none !important;
}

/* -- ToC -- */

#dw__toc h3 strong {
    display: none;
}

[dir=ltr] #dw__toc h3 strong {
    padding-right: .5rem;
}

#dw__toc ul {
    list-style: none;
}

#dw__toc ul:first-child {
    margin-left: 0;
}

#dw__toc ul li {
    /*margin: .3rem 0;*/
}

/*
#dw__toc ul li a {
    border: @ini_border_width solid transparent;
}
*/
#dw__toc ul li a {
    padding-left: @ini_border_width;
    border: @ini_border_width solid transparent;
    display: inline-block;
    width: 100%;
}

#dw__toc ul li a:hover {
    border-left-color: @ini_highlight;
}

body.collapsible-toc #dw__toc h3 strong {
    display: initial;
}

body.acordion-toc #dw__toc ul li ul,
body.acordion-toc #dw__toc ul li ul li ul {
    display: none;
}

body.acordion-toc #dw__toc ul li:hover > ul {
    display: block;
}

/* -- SubNS index -- */

#namespaced__subns_index {
    margin: 3.5rem 1rem 0 1rem;
    max-width: 100%;
}

#namespaced__subns_index div a {
    text-align: center;
    max-width: 100%;
}

#namespaced__subns_index div a img {
    display: block;
    margin: 0 auto 0 auto;
}

#namespaced__subns_index div a span {
    display: block;
    padding: .5rem 1rem;
}

#namespaced__subns_index div a.textonly span {
    /*width: @ini_cover_maxwidth;*/
}

#namespaced__subns_index.theme,
#namespaced__subns_index.secondary,
#namespaced__subns_index.dark {
    padding: 1rem;
}

/* -- docInfo -- */

/*
div.docInfo {
    order: 3;
}
*/

div.docInfo {
  font-size: 90%;
}

div.docInfo span {
  cursor: help;
}

div.docInfo span svg {
    fill: @ini_blue_color;
    height: 2em;
}

div.docInfo span a {
    background-size: 2em;
    padding-left: 2em;
    height: 30px;
    display: flex;
    align-items: center
}

div.docInfo span:hover {
    color: @ini_text;
}

div.docInfo span:hover svg {
    fill: @ini_text;
}

#namespaced__docinfo {
    margin: 1rem auto 0 auto;
    width: 70%;
    padding: 1rem 1rem calc(1rem-@ini_border_width) 1rem;
    z-index: 2;
    /* Stay above potential SubNS index */
}

#namespaced__site.mode_denied div.docInfo,
#namespaced__site.mode_admin #namespaced__docinfo,
#namespaced__site.mode_denied #namespaced__docinfo,
#namespaced__site.mode_profile #namespaced__docinfo,
#namespaced__site.mode_recent #namespaced__docinfo,
#namespaced__site.mode_resendpwd #namespaced__docinfo,
#namespaced__site.mode_search #namespaced__docinfo,
#namespaced__site.notFound div.docInfo,
#namespaced__site.notFound #namespaced__docinfo {
    display: none;
}

/* -- Pagetools & Contools -- */

#namespaced__contools .tools,
#namespaced__pagetools .tools {
    position: sticky;
    top: 2rem;
    width: (@ico-width + @ico-margin);
    /* Inner margin is replaced by page left and right padding used for section highlight*/
    height: auto;
}

#namespaced__contools ul,
#namespaced__pagetools ul {
    position: absolute;
    white-space: nowrap;
    margin: 0;
}

#namespaced__contools ul {
    left: 0;
}

#namespaced__pagetools ul {
    right: 0;
}

#namespaced__contools ul li,
#namespaced__pagetools ul li {
    min-width: max-content;
}

#namespaced__contools ul li h6,
#namespaced__pagetools ul li h6 {
    height: 20px;
}

#namespaced__contools ul li a,
#namespaced__pagetools ul li a {
    display: flex;
    flex-direction: row;
    padding: @ico-margin 0;
}

#namespaced__contools ul li a,
#namespaced__contools ul li button {
    justify-content: flex-start;
}

#namespaced__pagetools ul li a {
    justify-content: flex-end;
}

#namespaced__contools ul li a span,
#namespaced__contools ul li button span,
#namespaced__pagetools ul li a span {
    display: none; /* hide label until hover */
}

#namespaced__contools ul li h6,
#namespaced__pagetools ul li h6 {
    visibility: hidden;
    width: 0;
}

#namespaced__contools ul li a span,
#namespaced__contools ul li button span,
#namespaced__pagetools ul li a span {
    margin: 5px @ico-margin 0 @ico-margin;
}

#namespaced__contools ul li button span {
    margin-top: 0;
}

#namespaced__contools ul li h6,
#namespaced__pagetools ul li h6 {
    white-space: normal;
}

#namespaced__contools ul li h6 {
    line-height: .5;
}

#namespaced__contools ul:hover li h6 {
    line-height: 1;
}

#namespaced__pagetools ul li h6 {
    line-height: .5;
}

#namespaced__pagetools ul:hover li h6 {
    line-height: 1.5;
}

#namespaced__contools ul li a svg,
#namespaced__contools ul li button svg,
#namespaced__pagetools ul li a svg {
    width: @ico-width;
    height: @ico-width;
    display: inline-block;
    vertical-align: middle;
}

#namespaced__contools ul li a svg,
#namespaced__contools ul li button svg {
    /*margin: 0 0 0 calc(@ico-margin/2);*/
    margin: 0 0 0 @ico-margin;
}

#namespaced__pagetools ul li a svg {
    /*margin: 0 calc(@ico-margin/2) 0 0;*/
    margin: 0 @ico-margin 0 0;
}

#namespaced__contools ul li button {
    padding: 0;
    background-color: transparent;
    border: none;
}

#namespaced__contools ul li button {
    height: 50px;
    width: 100%;
    color: @ini_link;
}

#namespaced__contools ul li button svg {
    width: 30px;
    height: 30px;
}

#namespaced__contools ul:hover li a span,
#namespaced__contools ul:hover li x-sizing span,
#namespaced__contools ul:hover li p span,
#namespaced__contools ul:hover li button span,
#namespaced__pagetools ul:hover li a span,
#namespaced__pagetools ul:hover li x-sizing span,
#namespaced__pagetools ul:hover li p span {
    display: initial;
}

#namespaced__contools ul:hover li h6,
#namespaced__pagetools ul:hover li h6 {
    visibility: visible;
    width: initial;
}

html.js #namespaced__pagetools ul li.top {
    display: none;
}

body.pagetools-flip #namespaced__main_subflex {
    order: 2;
    margin-left: 0;
    margin-right: @ico-margin + @ico-width + @ico-margin;
}

body.pagetools-flip #namespaced__pagetools {
    order: 1;
}

body.pagetools-flip #namespaced__pagetools ul {
    left: 0;
    right: auto;
}

body.pagetools-flip #namespaced__pagetools ul li a {
    flex-direction: row-reverse;
}

/* -- Screen Mode -- */

#screen__mode {
    position: absolute;
    /*display: none;*/
    visibility: hidden;
    z-index: 1007;
}

#screen__mode span::after {
    content: 'wide';
}

body.debug #screen__mode,
body.mediaq #screen__mode {
    /*display: unset;*/
    visibility: unset;
}

/* FOOTER
----------------------------------------------- */

#namespaced__footer {
    background-color: @ini_background;
    position: relative;
    z-index: 3;
    /* Above tools navs (aka contools and pagetools) */
    /*margin-top: 1rem;*/
}

#namespaced__footer.neu:not(.transparent) {
    background-color: @ini_background_neu;
}

#namespaced__footer.oneborder:not(.neu) {
    border-top: @ini_border_width solid transparent;
}

#namespaced__footer.oneborder.neu {
    border-top: @ini_border_width solid transparent;
}

#namespaced__footer_sole h6 {
    display: inline-block;
}

#namespaced__footer_sole div.buttons {
    margin-top: 1rem;
}

#namespaced__footer_sole div {
    margin-bottom: 1rem;
}

#namespaced__footer_sole a svg {
    fill: @ini_link;
    vertical-align: bottom;
}

#namespaced__footer_widgets aside.widget {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

#namespaced__footer_widgets aside {
    margin-right: 1rem;
    margin-left: 1rem;
    max-width: 50%;
}

#namespaced__footer_widgets aside.neu,
#namespaced__footer_widgets aside.oneborder,
#namespaced__footer_widgets aside.fourborders {
    padding: .5rem;
}

body.three-footerwidgets #namespaced__footer_widgets aside {
    max-width: 33%;
}

body.more-footerwidgets #namespaced__footer_widgets aside {
    max-width: 25%;
}

#namespaced__footer_widgets aside:first-child {
    margin-right: 1rem;
    margin-left: 0;
}

#namespaced__footer_widgets aside:last-child {
    margin-right: 0;
    margin-left: 1rem;
}

#namespaced__footer_sole h6 {
    font-size: 0;
    padding: 0;
}

/* WIDGETS
----------------------------------------------- */

aside.widget {
    display: block;
    overflow: hidden;
    word-break: break-word;
    hyphens: auto;
}

#namespaced__aside aside.theme > div,
#namespaced__aside aside.secondary > div,
#namespaced__aside aside.dark > div,
#namespaced__footer_widgets aside.theme > div,
#namespaced__footer_widgets aside.secondary > div,
#namespaced__footer_widgets aside.dark > div {
    padding: .5rem 1rem;
}

#namespaced__footer.theme aside.labeled,
#namespaced__footer.secondary aside.labeled,
#namespaced__footer.dark aside.labeled {
    margin-top: 2rem;
}

aside.dark:not(.neu) input {
    background-color: @ini_background_neu;
}

aside.labeled {
    overflow: unset;
    border: @ini_border_width solid desaturate(@ini_border, 100%);
}

aside.labeled {
    padding: 1rem;
}

aside.labeled.hastitle {
    margin-top: 2.6rem;
}

aside.labeled h6 {
    background-color: desaturate(@ini_background, 100%);
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    margin-top: -2.4rem;
    padding: 0;
    width: 80%;
}

aside.labeled h6 span {
    padding: .5rem;
    color: #fff;
    background-color: desaturate(@ini_border, 100%);
}

aside.labeled.hastitle > div {
    margin-top: 1rem;
}

#namespaced__widget_cover img.cover {
    width: 100%;
    height: auto;
}

#namespaced__widget_license img,
#namespaced__widget_license a {
    display: block;
}

#namespaced__widget_license img {
    margin: 0 0 .5rem 0;
}

#namespaced__widget_search form {
    text-align: center;
}

#namespaced__search #dw__search {
    position: relative;
    left: 3.2rem;
}

#dw__search input {
    height: 2.8rem;
}

#namespaced__search #dw__search input {
    padding: 0 3rem 0 .4rem;
}

#dw__search div button {
    display: none;
}

#qsearch__out {
    width: 30rem;
    right: 0;
    background-color: @ini_background_neu;
    color: @ini_text_neu;
}

#qsearch__out strong {
    margin: .6rem .6rem 0 .6rem;
}

#qsearch__out ul {
    margin-bottom: .6rem;
}

#namespaced__search_button {
    display: inline;
    position: relative;
    top: .3rem;
    background-color: transparent;
    border: none;
}

#namespaced__site.mode_profile #namespaced__widget_user {
    display: none;
}

/* TABS
-------------------------------------------------------------- */

ul.tabs {
    list-style: none;
    display: flex;
    gap: 1.5rem;
    margin: 0 0 1rem 0;
    font-size: 2rem;
    font-weight: bold;
}

ul.tabs li {
    border-bottom: @ini_border_width solid transparent;
    transition: border-color 200ms ease-in-out;
}

ul.tabs li:not(.active) a {
    color: @ini_text_neu;
}

ul.tabs li.active {
    border-color: @ini_blue_color;
    pointer-events: none;
}

ul.tabs li.active:hover a {
    color: @ini_blue_color;
}

ul.tabs li:hover:not(.active) {
    border-color: @ini_background_neu;
}

ul.tabs li a {
    border: none;
}

ul.tabs li a,
ul.tabs li strong {
    margin: 1rem 1.5rem;
}

/* GENERIC CLASSES
-------------------------------------------------------------- */

.start {
    text-align: start;
}

.center {
    text-align: center;
}

.end {
    text-align: end;
}

.neu:not(.labeled):not(.transparent):not(.sitebg),
body.neu-toc #dw__toc {
    color: @ini_text_neu;
    background-color: @ini_background_neu;
}

.pad {
    padding: 0 @ico-margin + @ico-width + @ico-margin;
    /* Main uses it's own gutters instead */
}

.toppadding10 {
    padding-top: 1rem;
}

.sub-menu,
nav.tools ul {
    top: auto;
    background-color: @ini_background;
}

.sub-menu {
    right: 0;
}

.is_ns {
    text-transform: uppercase;
}

/*
.is_page {
    text-transform: capitalize;
}
*/
.capitalize {
    text-transform: capitalize;
}

.banner {
    max-width: @ini_banner_maxwidth;
    height: auto;
}

.cover {
    max-width: @ini_cover_maxwidth;
    height: auto;
}

.sticky {
    position: sticky;
}

.head {
    margin-bottom: 1rem;
}

.foot {
    margin-top: 1rem;
}

.grid {
    display: grid;
}

.table {
    display: table;
}

/* these values may need some adjustment */
#namespaced__site_nav.sticky {
    top: -.01rem;
}

#namespaced__page_nav.sticky {
    top: -.01rem;
}

#namespaced__page_nav.sticky.stickynav {
    top: 4.5rem;
}

#namespaced__contools .tools.stickynav,
#namespaced__pagetools .tools.stickynav {
    top: 5rem;
}

#namespaced__aside .sticky {
    top: 0;
}

#namespaced__aside .sticky.stickynav:not(.stickypagenav) {
    top: 5rem;
}

#namespaced__aside .sticky.stickypagenav:not(.stickynav) {
    top: 7.5rem;
}

#namespaced__aside .sticky.stickynav.stickypagenav {
    top: calc(10.4rem + @ini_border_width + .02rem);
}

#namespaced__docinfo.sticky {
    bottom: -3.8rem;
}

#namespaced__docinfo.sticky:hover {
    bottom: 0;
}

/* -- Debug -- */

.dbg,
.include-hook-sample {
    background-color: gold;
    color: #000;
}

/* DOKUWIKI GLOBAL
----------------------------------------------- */

a.urlextern, a.mail, a.windows, a.iw_wp {
    background-repeat: no-repeat;
    background-size: contain;
}

/*
a.interwiki:not(.iw_wp), a.mediafile {
    padding: 0 0 0 1.8rem;
    background-position: 0 center;
}

a.urlextern, a.windows, a.mail, a.interwiki.iw_wp {
    padding-left: 1.2em;
}
*/
a.interwiki, a.mediafile, a.urlextern, a.windows, a.mail {
    padding: 0 0 0 1.2em;
    background-position: 0 center;
}

a.interwiki.iw_doku {
    background-image: url(images/override/iw_doku.png);
}

a.urlextern {
    background-image: url(images/override/web.svg);
}

a.windows {
    background-image: url(images/override/share.svg);
}

a.mail {
    background-image: url(images/override/email.svg);
}

a.mail {
    background-image: url(images/override/email.svg);
}

a.iw_wp {
    background-image: url(images/override/wikipedia.svg);
}

.wikilink1 {
    color: @ini_existing;
}

.wikilink2 {
    color: @ini_missing;
}

/*
div.error,
div.info,
div.success,
div.notify {
    margin-top: 1rem;
    padding: .3rem .3rem .3rem 3rem;
}
*/
div.alerts div {
    /*margin-top: 1rem;*/
    margin: 1rem auto 0 auto;
    width: 80%;
    padding: .3rem .3rem .3rem 3rem;
}

/*
div.error a,
div.info a,
div.success a,
div.notify a {
    color: #fff;
}
*/
div.alerts div a {
    color: #fff;
}

div.error {
    background-color: @ini_red_color;
}

div.info {
    background-color: @ini_blue_color;
}

div.success {
    background-color: @ini_green_color;
}

div.notify {
    background-color: @ini_yellow_color;
}

.page div.level1 {
    margin-bottom: 1.8rem;
}

.page div.level2 {
    margin-bottom: 1.6rem;
}

.page div.level3 {
    margin-bottom: 1.4rem;
}

.page div.level4 {
    margin-bottom: 1.2rem;
}

.page div.level5 {
    margin-bottom: 1rem;
}

pre {
    /* Required for Dokuwiki to prevent article to overflow horizontally */
    white-space: break-spaces;
}

.page ol,
.page p,
.page pre,
.page table,
.page ul {
    margin-bottom: 1.5rem;
}

.page ul ul,
.page ul ol,
.page ol ol,
.page ol ul {
    margin-bottom: 0;
}

.page hr {
    margin-top: 1rem;
    margin-bottom: 1.5rem;
}

.page img.icon {
    vertical-align: -.2rem;
}

.page sup {
    margin-left: -3px;
    margin-right: 2px;
}

.fn sup,
.fn div.content {
    display: inline;
}

blockquote {
    font-style: italic;
    font-weight: normal;
    margin: 0 0 1rem 0;
    padding: .4rem;
    border: @ini_border_width solid transparent;
}

blockquote blockquote {
    margin-bottom: 0;
}

blockquote:not(.blockquote-plugin) cite {
    display:block;
    text-align: right;
    margin: 0 1rem;
    font-style: normal !important;
}

blockquote:not(.blockquote-plugin) cite:before {
    content: "\2014";
}

pre.code,
pre.file {
    padding-left: 70px;
    background-position: 15px 50%;
    background-size: 4rem 4rem;
    background-repeat: no-repeat;
    min-height: 7rem;
}

pre.code {
    background-image: url(images/code.svg);
}

pre.file {
    background-image: url(images/file.svg);
}

th,
td {
    padding: .3rem;
}

body.dynamic-tables #namespaced__site:not(.mode_admin) table {
    overflow: hidden;
}

body.dynamic-tables #namespaced__site:not(.mode_admin) tr:hover {
    background-color: @ini_highlight;
}

body.dynamic-tables #namespaced__site:not(.mode_admin) table:not(.palette) td,
body.dynamic-tables #namespaced__site:not(.mode_admin) table:not(.palette) th {
    position: relative;
}

body.dynamic-tables #namespaced__site:not(.mode_admin) table:not(.palette) td:hover::after,
body.dynamic-tables #namespaced__site:not(.mode_admin) table:not(.palette) th:hover::after {
    content: "";
    background-color: @ini_highlight;
    position: absolute;
    left: 0;
    top: -5000px;
    height: 10000px;
    width: 100%;
    z-index: -1;
}

label.block {
    display: block;
}

/* DOKUWIKI MODES
----------------------------------------------- */

.dokuwiki.mode_admin form div.no button {
    vertical-align: .1rem;
}

/* -- ACL manager -- */

.dokuwiki #acl_manager .level1 {
    display: flex;
    gap: 1rem;
}

.dokuwiki #acl_manager #acl__detail {
    display: contents;
}

.dokuwiki #acl_manager #acl__user {
    display: flex;
    gap: .5rem;
    align-items: center;
}

.dokuwiki #acl_manager #acl__user button[type="submit"] {
    margin: 0;
}

/* -- Admin page -- */

.dokuwiki div.ui-admin ul li a span.icon svg {
    width: 24px;
    height: 24px;
}

.dokuwiki div.ui-admin ul li a span.icon svg {
    width: 24px;
    height: 24px;
}

/* -- Edit -- */

.dokuwiki #tool__bar button {
    padding: .5rem;
}

.dokuwiki #tool__bar button:first-child {
    margin-left: 0;
}

.dokuwiki #tool__bar button:last-child {
    margin-right: 0;
}

/* -- Extensions manager -- */

.dokuwiki #extension__manager ul.tabs li.active a {
    background-color: transparent;
    border: none;
}

.dokuwiki #extension__manager div.panelHeader {
    background-color: @ini_background_neu;
    color: @ini_text_neu;
}

.dokuwiki #extension__manager form.doku_form {
    margin: 0 auto;
}

.dokuwiki #extension__list .actions button {
    padding: 1rem;
}

.dokuwiki #extension__list .actions button:first-child {
    margin-left: 0;
}

.dokuwiki #extension__list .actions button:last-child {
    margin-right: 0;
}

/* -- Media details */

div.img_detail {
    margin-top : 1rem;
}

div.img_detail dl dt {
  float: left;
  text-align: right;
  clear: left;
}

div.img_detail dt {
  width: 9em;
  margin-right: .5rem;
}

div.img_detail dd.table div {
    margin-top: -3px;
}

div.img_detail table.palette th {
    width: 2rem;
}

/* -- Media manager */

#mediamanager__page {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px;
    align-items: stretch;
    align-content: flex-start;
}

#mediamanager__page button {
    position: absolute;
}

#mediamanager__page h1 {
    flex-basis: 100%;
}

#mediamanager__page div {
    padding: 1rem;
}

/*#mediamanager__page div h2,
#mediamanager__page div h3,
*/
#mediamanager__page div strong,
#mediamanager__page div a {
    font-size: 1.6rem;
}

#mediamanager__page div.namespaces {
    flex-basis: 29.5%;
    flex-grow: 0;
}

#mediamanager__page div.namespaces ul {
    margin-left: 1rem;
    list-style: none;
}

#mediamanager__page div.namespaces #media__tree > ul {
    margin-left: 0 !important;
}

#mediamanager__page div.namespaces ul li div.li {
    display: inline;
    padding-top: 0;
    padding-bottom: 0;
    position: absolute;
}

#mediamanager__page div.filelist {
    flex-basis: 69.5%;
    flex-grow: 0;
}

#mediamanager__page div.filelist div {
    padding: .5rem 0;
}

#mediamanager__page div.filelist div h3 {
    padding-left: 0;
}

#mediamanager__page div.filelist ul {
    margin-left: 0;
}

#mediamanager__page div.filelist ul.thumbs {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    list-style: none;
    gap: 2rem;
}

#mediamanager__page div.filelist ul.thumbs li {
    padding: .5rem .2rem 0 .2rem;
}

#mediamanager__page div.filelist ul.thumbs li a {
    display: inline-block;
    width: 100%;
}

#mediamanager__page div.filelist ul.thumbs li a img {
    display: block;
    margin: 0 auto;
}

/*
html.js #mediamanager__page div.file {
    display: none;
}
*/

#mediamanager__page div.file {
    flex-basis: 100%;
}

#mediamanager__page div.file h2 {
    content: 'prefix';
}

#mediamanager__page div h3 strong {
    font-size: inherit;
}

/* -- Settings -- */

.dokuwiki #config__manager fieldset {
    background-color: @ini_background;
}

.dokuwiki #config__manager fieldset legend {
    padding: 0 2rem;
}

.dokuwiki #config__manager fieldset table {
    margin: 1.5rem 0 .5rem 0;
}

.dokuwiki #config__manager fieldset td {
    padding: 1.4rem 1.6rem 1rem 1.6rem;
}

.dokuwiki #config__manager fieldset td span.outkey {
    margin-top: -1rem;
    background-color: inherit;
}

.dokuwiki #config__manager fieldset tr td.value div,
.dokuwiki #config__manager fieldset tr td.value input,
.dokuwiki #config__manager fieldset tr td.value select {
    background-color: @ini_highlight;
}

.dokuwiki #config__manager fieldset tr.default td.value div,
.dokuwiki #config__manager fieldset tr.default td.value input,
.dokuwiki #config__manager fieldset tr.default td.value select {
    background-color: @ini_background_neu;
    color: @ini_text_neu;
}

.dokuwiki #config__manager fieldset td.value div.selection {
    width: 49%;
}

.dokuwiki #config__manager fieldset td.value div.selection:nth-child(odd) {
    margin: 0 1% 0 0;
}

.dokuwiki #config__manager fieldset td.value div.selection:nth-child(even) {
    margin: 0 0 0 1%;
}

.dokuwiki #config__manager fieldset tr.default td.value div.other {
    padding: 0;
    background-color: @ini_background;
}

.dokuwiki #config__manager fieldset input.edit,
.dokuwiki #config__manager fieldset select {
    width: 100%;
}

.dokuwiki #config__manager fieldset select {
    max-width: 100%;
}

.dokuwiki #config__manager fieldset input.checkbox {
    margin: .3rem;
}

/* -- User manager -- */

.dokuwiki #user__manager .import_users form input[type=file] {
    margin-left: .5rem;
}

.dokuwiki #user__manager .import_users button[type="submit"] {
    margin: 0;
    position: relative;
    top: .5rem;
}

/* PLUGINS
----------------------------------------------- */

/* -- Blockquote -- */

blockquote.blockquote-plugin {
    margin: 0 auto 1rem auto;
    padding: 1rem 1rem 1rem 70px;
    border-style: solid;
    border-width: @ini_border_width !important;
    background-image: url(images/override/blockquote.svg);
    background-size: 6.4rem 6.4rem;
    background-position: 4px -8px;
}

blockquote.blockquote-plugin p:last-child {
    margin: 0;
}

blockquote.blockquote-plugin cite {
    font-style: normal !important;
}

/* -- Cloud -- */

div.cloud {
    margin: 0;
}

/* -- Sitemapnavi -- */

button.plugin__sitemapnavi__dir {
    cursor: zoom-in;
    font-variant: small-caps;
}

/* -- Tagalerts -- */

.dokuwiki .tags {
    padding-top: .2rem;
}

.dokuwiki .tagstop {
    padding-bottom: .4rem;
}

/* -- Tagalerts -- */

.dokuwiki .tagerror {
    background-color: lighten(@ini_red_color, 20%) !important;
}

.dokuwiki .taginfo {
    background-color: lighten(@ini_blue_color, 20%) !important;
}

.dokuwiki .tagsuccess {
    background-color: lighten(@ini_green_color, 20%) !important;
}

.dokuwiki .tagnotify {
    background-color: lighten(@ini_yellow_color, 20%) !important;
}

/* -- Translation -- */

.plugin_translation {
    display: flex;
    margin: 0 !important;
    align-items: center;
}

.plugin_translation ul li {
    margin: 0 !important;
}

.plugin_translation ul li a.wikilink1 {
    background-color: @ini_existing !important;
}

.plugin_translation ul li a.wikilink2 {
    background-color: @ini_missing !important;
}

.plugin_translation ul li a:hover {
    box-shadow: 0 0 40px 40px @ini_text_neu inset;
    transition: box-shadow 250ms ease-in-out, color 300ms ease-in-out;
}

.plugin_translation form select option.wikilink1 {
    color: @ini_existing !important;
}

.plugin_translation form select option.wikilink2 {
    color: @ini_missing !important;
}

.plugin_translation .cur {
    display: none;
}

#namespaced__translations div.notify {
    display: none;
}

/* -- Userhomepage -- */

#namespaced__site_nav.navbar ul li a.interwiki.iw_user.uhp_private_svg {
    padding-left: 1.8em;
}

#namespaced__site_nav.navbar ul li a.interwiki.iw_user.uhp_public_svg {
    padding-left: 1.6em;
    padding-right: 0;
}


/* -- Wrap -- */

div.plugin_wrap {
    padding: 1rem;
}

div.wrap_info,
div.wrap_important,
div.wrap_alert,
div.wrap_tip,
div.wrap_help,
div.wrap_todo,
div.wrap_download {
    padding-left: 70px;
    min-height: 7rem;
}

div.wrap_download {
    background-image: url(images/override/wrap_download_48.png);
}

div.wrap_box {
    border: @ini_border_width solid transparent;
}

span.wrap_download {
    background-image: url(images/override/wrap_download_16.png);
}

span.wrap_info,
span.wrap_tip,
span.wrap_important,
span.wrap_alert,
span.wrap_help,
span.wrap_download,
span.wrap_todo,
span.wrap_box,
span.wrap_danger,
span.wrap_warning,
span.wrap_caution,
span.wrap_notice,
span.wrap_safety,
span.wrap_hi {
    padding-right: .4rem;
}

span.wrap_info,
span.wrap_tip,
span.wrap_important,
span.wrap_alert,
span.wrap_help,
span.wrap_download,
span.wrap_todo {
    padding-left: 2rem;
}

span.wrap_box,
span.wrap_danger,
span.wrap_warning,
span.wrap_caution,
span.wrap_notice,
span.wrap_safety,
span.wrap_hi {
    padding-left: .4rem;
}

.wrap_danger,
.wrap_notice,
.wrap_safety {
    color: #000 !important;
}

/* RESPONSIVENESS
-------------------------------------------------------------- */

@media screen and (min-width: @ini_site_width + 60px + @ini_sidebar_width) {
    #screen__mode {
        z-index: 2002;
    }
    #screen__mode span::after {
        content: 'extractible sidebar';
    }
}

@media screen and (min-width: @ini_site_width + 60px + @ini_toc_width) {
    #screen__mode {
        z-index: 2001;
    }
    #screen__mode span::after {
        content: 'extractible TOC';
    }
}

@media screen and (min-width: @ini_site_width + 62px) {
    body.box-layout, body.mix-layout {
        background-position: left top;
        background-size: auto;
        background-repeat: repeat;
        background-attachment: scroll;
    }

    body.box-layout #namespaced__site {
        margin: 3rem auto;
        max-width: @ini_site_width;
    }

    body.mix-layout #namespaced__page {
        margin: 0 auto;
        max-width: @ini_site_width;
    }
}

@media screen and (max-width: @ini_site_width + 60px) {
    #screen__mode {
        z-index: 1006;
    }
    body.debug #namespaced__site,
    body.mediaq #namespaced__site {
        background-color: lightyellow;
    }
    #screen__mode span::after {
        content: '< Site + 60px';
    }
}

@media screen and (max-width: @ini_site_width) {
    #screen__mode {
        z-index: 1005;
    }
    body.debug #namespaced__site,
    body.mediaq #namespaced__site {
        background-color: bisque;
    }
    #screen__mode span::after {
        content: '< Site';
    }
    #namespaced__header .pad .flex {
        justify-content: center;
    }
    #namespaced__site_logo {
        max-width: 10rem;
        max-height: 10rem;
    }
}

@media screen and (max-width: @ini_site_width - ((@ini_site_width - @ini_tablet_width) / 2)) {
    #screen__mode {
        z-index: 1004;
    }
    body.debug #namespaced__site,
    body.mediaq #namespaced__site {
        background-color: burlywood;
    }
    #screen__mode span::after {
        content: '> Tablet & < Site';
    }
    #namespaced__site_title span {
        margin-right: unset;
    }
    #namespaced__site_logo {
        max-width: 9rem;
        max-height: 9rem;
    }
}

@media screen and (max-width: @ini_tablet_width) {
    #screen__mode {
        z-index: 1003;
    }
    body.debug #namespaced__site,
    body.mediaq #namespaced__site {
        background-color: darkgoldenrod;
    }
    #screen__mode span::after {
        content: '< Tablet';
    }
    #namespaced__header div.pad {
        padding: 0 calc((@ico-margin + @ico-width + @ico-margin) * .8);
    }
    #namespaced__site_branding {
        justify-content: space-between;
    }
    #namespaced__site_logo {
        max-width: 8rem;
        max-height: 8rem;
    }
    #namespaced__header_tools {
        align-items: center;
    }
    #namespaced__banner_wrap img {
        max-width: 100% !important;
        height: auto;
    }
    body.dynamic-tables #namespaced__site:not(.mode_admin) td:focus::after,
    body.dynamic-tables #namespaced__site:not(.mode_admin) th:focus::after {
        content: "";
        background-color: @ini_highlight;
        position: absolute;
        left: 0;
        top: -5000px;
        height: 10000px;
        width: 100%;
        z-index: -1;
    }
    body.dynamic-tables #namespaced__site:not(.mode_admin) td:focus::before {
        content: "";  
        background-color: @ini_highlight;
        position: absolute;  
        left: -5000px;
        top: 0;
        height: 100%;
        width: 10000px;
        z-index: -1;
    }
}

@media screen and (max-width: @ini_tablet_width - ((@ini_tablet_width - @ini_phone_width) / 2)) {
    #screen__mode {
        z-index: 1002;
    }
    body.debug #namespaced__site,
    body.mediaq #namespaced__site {
        background-color: chocolate;
    }
    #screen__mode span::after {
        content: '> Phone & < Tablet';
    }
    #namespaced__header div.pad {
        padding: 0 calc((@ico-margin + @ico-width + @ico-margin) * .6);
    }
    #namespaced__site_logo {
        max-width: 7rem;
        max-height: 7rem;
    }
    #namespaced__sitetools ul li a span,
    div.docInfo span.content {
        display: none;
    }
    #namespaced__sitetools ul li a:hover span,
    div.docInfo span:hover span.content {
        display: inline !important;
    }
    #namespaced__docinfo {
        width: 90%;
    }
}

@media screen and (max-width: @ini_phone_width) {
    #screen__mode {
        z-index: 1001;
    }
    body.debug #namespaced__site,
    body.mediaq #namespaced__site {
        background-color: brown;
    }
    #screen__mode span::after {
        content: '< Phone';
    }
    #namespaced__header div.pad {
        padding: 0 calc((@ico-margin + @ico-width + @ico-margin) * .4);
    }
    #namespaced__site_logo {
        max-width: 6rem;
        max-height: 6rem;
    }
}

/* MORE ACCESSIBILITY
-------------------------------------------------------------- */

/* Remove smooth scroll if desired by visitor */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}
