/**
 * Dokuwiki ColorMag template
 * Original Wordpress theme URI: https://themegrill.com/themes/colormag/
 * Dokuwiki Template URI: http://www.dokuwiki.org/template:colormag
 * 
 * @link    https://www.dokuwiki.org/template:colormag
 * @author  Simon DELAGE <sdelage@gmail.com>
 * @license GPL 3 (https://www.gnu.org/licenses/gpl-3.0.html)
 * 
 * Description: ColorMag is a perfect responsive magazine style WordPress theme. Suitable for news, newspaper, magazine, publishing, business and any kind of sites. Get free support at https://themegrill.com/support-forum/ and check the demo at https://demo.themegrill.com/colormag/
 * Tags: one-column, two-columns, right-sidebar, left-sidebar, flexible-header, custom-header, custom-background, custom-menu, custom-colors, sticky-post, threaded-comments, translation-ready, featured-images, theme-options, post-formats, footer-widgets, blog, e-commerce, news, rtl-language-support
 * 
 * Resetting and rebuilding styles have been helped along thanks to the fine work of
 * Eric Meyer http://meyerweb.com/eric/tools/css/reset/index.html
 * along with Nicolas Gallagher and Jonathan Neal http://necolas.github.com/normalize.css/ and Blueprint http://www.blueprintcss.org/
*/


/**
* Pagetools constants
* RESET
* GLOBAL
* Ui colors
* Flexbox
* TEXT ELEMENTS
* Headings
* LISTS
* SUPERCRIPT AND SUBSCRIPT
* Footnotes
* BLOCKQUOTE
* FORMS
* LINKS
* IMAGES
* TABS
* *****************************************************************
* PAGE
* Inner-wraps
* Skip to content
* News bar
* Breaking news
* Move tpl_indexerWebBug() out of the way
* HEADER
* Alerts
* INFO TEXT
* docInfo
* SOCIAL LINKS
* SEARCH WIDGET
* NAVIGATION
* DROP DOWN
* MAIN NAV SEARCH
* RESPONSIVE MENU
* PAGE HEADER TITLE
* CONTENT
* PAGE NAVIGATION
* SECTION HIGHLIGHTING
* WIDGETS
* FOOTER WIDGET AREA
* FOOTER SOCKET AREA
* PRIMARY AND SECONDARY CONTENT AREA
* ToC container
* RIGHT SIDEBAR CONTENT LAYOUT
* LEFT SIDEBAR CONTENT LAYOUT
* NO SIDEBAR CONTENT LAYOUT
* MOBILETOOLS
* PAGETOOLS
* DOKUWIKI MODES
* Admin
* Admin - ACL Manager
* Admin - Config Manager
* Admin - Extensions
* Admin - User Manager
* Edit
* Media Manager
* Media Popup
* Recent
* Sitemap
* DEBUG
* *****************************************************************
* RESPONSIVE STRUCTURE
* *****************************************************************
*/

/* =Pagetools constants
-------------------------------------------------------------- */

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

/* =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;
    font: inherit;
    font-size: 100%;
    font-style: inherit;
    font-weight: inherit;
    margin: 0;
    outline: 0;
    padding: 0;
    vertical-align: baseline;
}

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;
    font: inherit;
    font-size: 100%;
    font-style: inherit;
    font-weight: inherit;
    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 */
}

body {
    font-size: 1.6em;
}

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

article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
nav,
section {
    display: block;
}

ol, ul {
    list-style: none;
}

table {
    /* tables still need 'cellspacing="0"' in the markup */
    border-collapse: collapse;
    border-spacing: 0;
    margin: 0 0 1.5em;
    width: 100%;
}

th {
    font-weight: bold;
}

th, td {
    border: 1px solid @ini_border;
    padding: 6px 10px;
}

caption, th, td {
    text-align: left;
}

a:focus {
    outline: thin dotted;
}

a:hover,
a:active {
    /* Improves readability when focused and also mouse hovered in all browsers people.opera.com/patrickl/experiments/keyboard/test */
    outline: 0;
}

a img {
    border: 0;
}

embed, iframe, object {
    max-width: 100%;
}

/* =GLOBAL
----------------------------------------------- */
body,
button,
input,
select,
textarea {
    color: @ini_text;
    font: 16px 'Open Sans', serif;
    line-height: 1.6;
    word-wrap: break-word;
}

body {
    background-color: @ini_background_site;
}

body.box-layout #colormag__page,
body.box2wide-layout #colormag__page {
    max-width: @ini_site_width;
    margin: 20px auto;
}

body {
    background-size: cover;
}

body.pattern,
body.dbg-pattern {
    background-position: left top;
    background-size: auto;
    background-repeat: repeat;
    background-attachment: scroll;
}

body.dbg-pattern {
    background-image: url(debug/pattern.png);
}

hr {
    border-color: @ini_border;
    border-style: solid none none;
    border-width: 1px 0 0;
    height: 0;
    margin: .8rem 3rem;
}

div.vr {
    border-left: 1px solid @ini_border;
    margin: 3rem 0;
}

/* Ui colors */

body.neu-ui .uicolor,
body.neu-ui #colormag__main.uicolor-toc #dw__toc {
    background-color: @ini_background_neu;
    color: @ini_text_neu;
}
body.neu-ui .uicolor a {
    background-color: transparent;
}

body.alt-ui .uicolor,
body.alt-ui #colormag__main.uicolor-toc #dw__toc {
    background-color: @ini_background_alt;
    color: @ini_text_alt;
}
body.alt-ui .uicolor a {
    background-color: @ini_background_alt;
}

body.dark-ui .uicolor,
body.dark-ui #colormag__main.uicolor-toc #dw__toc {
    background-color: lighten(@ini_color_theme_dark, 5%);
    color: @ini_color_theme_light;
}
body.dark-ui #colormag__main.uicolor-toc #dw__toc a {
    color: #fff;
}

/* Flexbox */

.flex {
    display: flex;
    align-items: center;
}

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

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

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

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

/* =TEXT ELEMENTS
----------------------------------------------- */
p {
    line-height: 1.6;
    margin-bottom: 2rem;
    font-family: 'Open Sans', serif;
    font-size: 15px;
}

strong {
    font-weight: bold;
}

cite, em, i {
    font-style: italic;
}

#colormag__content :not(li) > ul,
#colormag__content :not(li) > ol {
    margin-bottom: 2rem;
}

pre {
    margin-bottom: 20px;
    overflow: auto;
    padding: 20px;
    border: 1px solid @ini_border;
}

pre, code, kbd, var, samp, tt {
    font-family: "Courier 10 Pitch", Courier, monospace;
    font-size: 14px;
    line-height: 1.4;
    white-space: pre-wrap;
}

abbr, acronym, dfn {
    border-bottom: 1px dotted @ini_text_neu;
    cursor: help;
}

address {
    display: block;
    font-style: italic;
    margin: 0 0 15px;
}

del, ins, span.curid {
    padding: .1rem;
}

del {
    background-color: mix(#fff, @ini_color_red, 30%);
}

ins {
    background-color: mix(#fff, @ini_color_green, 30%);
}

table {
    margin: 0 0 1.5em;
    width: 100%;
}

span.curid {
    font-weight: bold;
    background-color: @ini_highlight;
}

/* Headings */

h1, h2, h3, h4, h5, h6 {
    padding-bottom: 18px;
    color: @ini_color_theme;
    font-weight: bold;
    font-family: 'Open Sans', sans-serif;
    clear: left; /* ideally 'both', but problems with toc */
}

h1 {
    font-size: 42px;
    line-height: 1.2;
    color: @ini_color_h1;
}

h2 {
    font-size: 38px;
    line-height: 1.2;
    color: @ini_color_h2;
}

h3 {
    font-size: 34px;
    line-height: 1.2;
    color: @ini_color_h3;
}

h4 {
    font-size: 30px;
    line-height: 1.2;
    color: @ini_color_h4;
}

h5 {
    font-size: 26px;
    line-height: 1.2;
    color: @ini_color_h5;
}

h6 {
    font-size: 22px;
    line-height: 1.2;
    color: @ini_color_h6;
}

h6.widget-title {
    border-bottom: 2px solid @ini_color_theme;
    font-size: 18px;
    margin-bottom: 15px;
    padding-bottom: 0;
}

h6.widget-title span {
    background-color: @ini_color_theme;
    color: @ini_color_theme_text;
    padding: 6px 12px;
    display: inline-block;
}

h6.aside-title,
#dw__toc h3 {
    font-size: 18px;
    background-color: @ini_color_theme;
    color: @ini_color_theme_text;
    padding: 6px 12px;
    display: inline-block;
    width: 100%;
}

/* Toggles */

.toggle strong span {
    display: none;
}

.toggle strong {
    content: "";
    display: inline-block;
    height:1.8rem;
    width:1.8rem;
    background-size: 1.8rem 1.8rem;
    background-repeat: no-repeat;
    float: right;
    margin-top: 2px;
}

.toggle.closed strong {
    background-image: url(images/expand.svg);
}

.toggle.open strong {
    background-image: url(images/collapse.svg);
}

/* =LISTS
----------------------------------------------- */
ul,
ol {
    list-style: none;
}

ol {
    list-style: decimal;
    padding: 0 0 0 2rem;
}

li > ul,
li > ol {
    margin: 0 0 0 2rem;
}

/* =SUPERCRIPT AND SUBSCRIPT
----------------------------------------------- */
sup, sub {
    font-size: 10px;
    height: 0;
    line-height: 1;
    position: relative;
    vertical-align: baseline;
}

sup {
    bottom: 1ex;
}

sub {
    top: .5ex;
}

dl {
    margin-bottom: 24px;
    font-size: 20px;
}

dt {
    font-weight: bold;
    margin-bottom: 5px;
}

dd {
    margin-bottom: 24px;
}

/* Footnotes */

div.insitu-footnote {
    min-width: 5rem;
    padding: .3rem .5rem;
    background-color: @ini_color_blue;
}

.dokuwiki div.footnotes {
    padding: .6rem 0 0 0;
}

.dokuwiki div.footnotes .fn .content {
    display: unset;
}

/* =BLOCKQUOTE
----------------------------------------------- */

blockquote {
    font-style: italic;
    font-weight: normal;
    border-style: solid;
    border-width: 1px 1px 1px 4px;
    border-color: @ini_border @ini_border @ini_border @ini_color_theme;
    margin: 0 0 1.5rem 0;
    padding: .75rem;
}

blockquote blockquote {
    margin: .4rem;
}

blockquote em, blockquote i {
    font-style: normal;
}

blockquote cite {
    font-style: normal;
    color: #666666;
    font: 12px "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 300;
    letter-spacing: 0.05rem;
    text-transform: uppercase;
}

/* =FORMS
----------------------------------------------- */
input, textarea {
    -webkit-border-radius: 0px;
}

input[type="text"],
input[type="email"],
input[type="search"],
input[type="password"],
input[type="url"],
textarea {
    -moz-appearance: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="url"],
textarea {
    padding: 1%;
    border: 1px solid @ini_border;
    line-height: 20px;
    width: 95%;
    margin: 0 0 1rem;
    background-color: @ini_background_neu;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="search"]:focus,
input[type="password"]:focus,
input[type="url"]:focus,
textarea:focus {
    border: 1px solid @ini_border;
}

input.s {
    width: 85%;
    padding: 4px 54px 4px 10px;
    height: 46px;
    color: @ini_text_neu;
    background-color: @ini_background;
    margin: 0;
    border: 1px solid @ini_border;
}

input.s:focus {
    padding-left: 10px;
    border-color: @ini_border;
    text-indent: 0;
}

#media__manager #media__opts a,
.colormag-button,
input[type="reset"],
input[type="button"],
input[type="submit"],
button {
    margin-bottom: 1rem;
    padding: 1rem 2rem;
    background-color: @ini_color_theme;
    border: 0px;
    transition: background-color 0.3s linear 0s;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    font-size: 18px;
    -moz-appearance: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    cursor: pointer;
    display: inline-block;
    color: @ini_color_theme_text;
}

#search-form input[type="submit"] {
    border-radius: 0;
    margin-left: -8px;
    margin-bottom: 0;
    padding: 6px 10px 5px;
    font-size: 18px;
}

#media__manager #media__opts a:hover,
.colormag-button:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
button:hover {
    background-color: @ini_color_theme_dark;
}

input[type="reset"]:active,
input[type="button"]:active,
input[type="submit"]:active {
    -webkit-box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3);
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3);
}

/* =LINKS
----------------------------------------------- */
a {
    color: @ini_link;
    text-decoration: none;
}

.dokuwiki a.wikilink1 {
    color: @ini_existing;
}

.dokuwiki a.wikilink2 {
    color: @ini_missing;
}

a:hover {
    color: @ini_text_neu;
}

a:focus, a:active, a:hover {
    text-decoration: none;
}

a svg {
    fill: @ini_text_neu;
}

a:hover svg {
    fill: @ini_text_neu;
}

a:hover img {
    opacity: .6;
}

.dokuwiki a.interwiki,
.dokuwiki a.urlextern,
.dokuwiki a.windows,
.dokuwiki a.mail,
.dokuwiki a.mediafile {
    background-repeat: no-repeat;
    background-position: 0 center;
    padding: 0 0 0 1.8rem;
}

/* external link */
.dokuwiki a.urlextern {
    background-image: url(../../images/external-link.png);
}

/* windows share */
.dokuwiki a.windows {
    background-image: url(../../images/unc.png);
}

/* email link */
.dokuwiki a.mail {
    background-image: url(../../images/email.png);
}

/* =IMAGES
----------------------------------------------- */
figure {
    margin: 0;
    text-align: center;
}

img {
    max-width: 100%;
    height: auto;
    vertical-align: top;
    margin-bottom: 18px;
}

img.icon {
    margin-bottom: 0;
    vertical-align: -2px;
}

svg {
    fill: @ini_color_blue;
}

.entry-content img, .comment-content img, .widget img {
    max-width: 100%;
    /* Fluid images for posts, comments, and widgets */
}

#colormag__widebanner-wrap img {
    margin: 0;
}

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

ul.tabs {
    margin: 0 0 .3rem 0 !important;
}

ul.tabs li {
    display: inline-block;
}

ul.tabs li a {
    border-radius: 5px 5px 0 0;
}

ul.tabs li:not(.active) a {
    color: @ini_text_neu;
    padding: .5rem 1rem .7rem 1rem;
}

ul.tabs li:not(.active) a:hover {
    background-color: @ini_color_theme;
}

ul.tabs li.active a {
    border-top: 4px solid @ini_color_theme;
    padding: 1rem 1.5rem;
}

/*****************************************************************/
/* =PAGE
----------------------------------------------- */

#colormag__page {
    background-color: @ini_background;
}


/* Inner-wraps */

.inner-wrap {
    margin: 0 (@ico-width + @ico-margin + @ico-margin);
}

.inner-wrap-left {
    margin: 0 0 0 (@ico-width + @ico-margin + @ico-margin);
}

body.pagetools-flip .inner-wrap-left {
    margin: 0 (@ico-width + @ico-margin + @ico-margin) 0 0 !important;
}

body.mix-layout .narrow-mix {
    max-width: (@ini_site_width - (2 * (@ico-width + @ico-margin + @ico-margin)));
}

body.mix-layout .inner-wrap.narrow-mix,
body.mix-layout .inner-wrap-left.narrow-mix {
    margin: 0 auto !important;
}

/* Skip to content */

div.skip {
    margin: 0 auto;
    padding: 0;
    background-color: black;
}

div.skip a {
    display: block;
    width: 100%;
    color: @ini_color_theme_text;
    text-transform: uppercase;
    text-align: center;
    letter-spacing: 2px;
    line-height: 2;
    font-size: 3.9rem;
    font-weight: 600;
}

/* News bar */

.news-bar {
    /*background-color: #ffffff;*/
    /*padding: 8px 0 4px;*/
    padding: 8px 0;
    -webkit-box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.1);
    box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.1);
    font-size: 14px;
    position: relative;
}

.news-bar svg {
    margin: 0 .4rem 0 0;
}

/* Breaking news */

.breaking-news {
    float: left;
}

.breaking-news div {
    display: none;
}

/* The HTML list gets replaced with a single div,
   which contains the active ticker item, so you
   can easily style that as well */
.breaking-news div {
    display: inline-block;
    word-wrap: break-word;
}

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

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

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

#colormag__topbar-wrapper .inner-wrap div.flex > div {
    margin-right: 1rem;
}

/* The HTML list gets replaced with a single div,
   which contains the active ticker item, so you
   can easily style that as well */
.breaking-news div {
    display: inline-block;
    word-wrap: break-word;
}

.js-lastchanges {
    display: inline-block;
    overflow: hidden;
    height: 2.2rem;
    margin-left: .4rem;
}

#colormag__topbar-links > a span:empty {
    margin: 0 .6rem 0 0;
}

#colormag__topbar-links ul li ul {
    display: unset;
    margin: 0;
}

#colormag__topbar-links ul li {
    display: inline-block;
}

#colormag__topbar-links ul li:not(:first-child) {
    margin: 0 0 0 .4rem;
}

#colormag__topbar-links ul li div.li {
    margin: 0;
}

#colormag__topbar-links ul li div.li a {
    display: inline-block;
    height: 100%;
}

#colormag__topbar-links a svg {
    vertical-align: bottom;
}

#colormag__header-text-nav-wrap {
    padding: 20px 0 25px;
}

#colormag__site-logo {
    padding-right: 20px;
}

#colormag__site-logo img {
    margin-bottom: 0;
}

#colormag__site-title {
    padding-right: 20px;
}

#colormag__site-title {
    padding-bottom: 0;
    line-height: 1.2;
}

#colormag__site-title a {
    color: @ini_color_theme;
    font-size: 46px;
}

#colormag__site-description {
    line-height: 24px;
    font-size: 24px;
    color: @ini_text_neu;
    padding-bottom: 0px;
    font-family: 'Open Sans', serif;
}

/*
#colormag__header-right-section .widget {
    text-align: right;
    color: @ini_text;
    font-size: 2rem;
}
*/

#colormag__header-right-section .widget ul li:not(:last-child) {
    margin-right: 1rem;
}

#colormag__header-right-section .widget ul li a {
    display: flex;
    align-items: center;
}

#colormag__header-right-section .widget ul li a span {
    margin-right: .4rem;
}

body.banner-flip #colormag__banner-wrap {
    order: 2;
}

body.banner-flip #colormag__banner-wrap img {
    margin-top: 18px;
}

body.banner-flip #colormag__header-right-sidebar {
    order: 1;
}

/* Alerts */

#colormag__alerts > div:last-child {
    margin-bottom: 1.5rem;
}
#colormag__alerts a {
    color: @ini_color_theme_text;
}
div.info, div.notify, div.success, div.error {
    width: 80%;
    margin: .5rem auto;
    padding: .5rem 1rem .5rem 3rem;
}
div.info {
    background-color: @ini_color_blue;
}
div.notify {
    background-color: @ini_color_yellow;
}
div.success {
    background-color: @ini_color_green;
}
div.error {
    background-color: @ini_color_red;
}

/* =INFO TEXT
----------------------------------------------- */

/*
.small-info-text {
    float: left;
    max-width: 100%;
    padding-right: 15px;
    padding-top: 2px;
}

.small-info-text p {
    font-size: 12px;
    color: @ini_text_neu;
    margin-bottom: 0;
}
*/

/* docInfo */

#colormag__content .docInfo {
    margin-top: 1rem;
    line-height: .7;
}

/* =SOCIAL LINKS
----------------------------------------------- */

#colormag__social {
    width: 100%;
}

#colormag__social ul li {
    margin-left: .8rem;
}

#colormag__social ul li:first-child {
    margin-left: .4rem;
}


#colormag__social ul li a span {
    margin-left: .4rem;
}

#colormag__social.glyphcolors a.social.clarity svg { fill: #61bed9; } 
#colormag__social.glyphcolors a.social.codepen svg { fill: #ccc; }
#colormag__social.glyphcolors a.social.deviantart svg { fill: #05cc47; }
#colormag__social.glyphcolors a.social.digg svg { fill: #005BE2; }
#colormag__social.glyphcolors a.social.discord svg { fill: #7289da; }
#colormag__social.glyphcolors a.social.dribbble svg { fill: #ea4c89; }
#colormag__social.glyphcolors a.social.facebook svg { fill: #1877f2; }
#colormag__social.glyphcolors a.social.fivehundredpx svg { fill: #0099e5; }
#colormag__social.glyphcolors a.social.flickr svg { fill: #f40083; }
#colormag__social.glyphcolors a.social.foursquare svg { fill: #073282; }
#colormag__social.glyphcolors a.social.github svg { fill: #24292e; }
#colormag__social.glyphcolors a.social.google-plus svg { fill: #db4437; }
#colormag__social.glyphcolors a.social.instagram svg { fill: #e64853; }
#colormag__social.glyphcolors a.social.linkedin svg { fill: #007bb5; }
#colormag__social.glyphcolors a.social.listly svg { fill: #df6d46; }
#colormag__social.glyphcolors a.social.mastodon svg { fill: #2b90d9; }
#colormag__social.glyphcolors a.social.medium svg { fill: #02b875; }
#colormag__social.glyphcolors a.social.periscope svg { fill: #40a4c4; }
#colormag__social.glyphcolors a.social.pinterest svg { fill: #bd081c; }
#colormag__social.glyphcolors a.social.pocket svg { fill: #ee4056; }
#colormag__social.glyphcolors a.social.quora svg { fill: #aa2200; }
#colormag__social.glyphcolors a.social.reddit svg { fill: #ff5700; }
#colormag__social.glyphcolors a.social.skype svg { fill: #00aff0; }
#colormag__social.glyphcolors a.social.slack svg { fill: #2eb67d; } 
#colormag__social.glyphcolors a.social.slideshare svg { fill: #00a0dc; }
#colormag__social.glyphcolors a.social.snapchat svg { fill: #fffc00; }
#colormag__social.glyphcolors a.social.soundcloud svg { fill: #ff5500; }
#colormag__social.glyphcolors a.social.spotify svg { fill: #1db954; }
#colormag__social.glyphcolors a.social.steam svg { fill: #171a21; }
#colormag__social.glyphcolors a.social.stumbleupon svg { fill: #e94826; }
#colormag__social.glyphcolors a.social.swarm svg { fill: #ffa633; }
#colormag__social.glyphcolors a.social.telegram svg { fill: #0088cc; }
#colormag__social.glyphcolors a.social.tumblr svg { fill: #2c4762; }
#colormag__social.glyphcolors a.social.twitch svg { fill: #9146ff; }
#colormag__social.glyphcolors a.social.twitter svg { fill: #1da1f2; }
#colormag__social.glyphcolors a.social.vimeo svg { fill: #1ab7ea; }
#colormag__social.glyphcolors a.social.vine svg { fill: #00b489; }
#colormag__social.glyphcolors a.social.vk svg { fill: #4a76a8; }
#colormag__social.glyphcolors a.social.whatsapp svg { fill: #25d366; }
#colormag__social.glyphcolors a.social.yelp svg { fill: #d32323; }
#colormag__social.glyphcolors a.social.youtube svg { fill: #ff0000; }

/* =SEARCH WIDGET
----------------------------------------------- */

#colormag__header .search-wrap input.s {
    width: 200px;
}

.search-wrap {
    position: relative;
}

.search-wrap button {
    border-radius: 0;
    color: @ini_color_theme_text;
    line-height: 45px;
    margin-bottom: 0;
    padding: 0 15px;
    margin-left: -5px;
    margin-top: 1px;
}

.search-form-top {
    border: 1px solid @ini_border;
    display: none;
    padding: 10px;
    position: absolute;
    right: 0;
    top: 44px;
    z-index: 9999;
    background-color: @ini_background;
}

.search-form-top.show {
    display: block;
}

/*
.not-found .search-wrap button {
    right: 175px;
}
*/

#colormag__secondary .search-wrap button {
    right: 26px;
}

.search-form-top {
    width: 300px;
}

.search-form-top #qsearch__in,
.search-form-top button[type="submit"] {
    display: inline-block;
}

.search-form-top #qsearch__in {
    width: 200px;
    height: 44px;
    border-radius: 3px 0 0 3px;
    padding: 0 1rem;
}

.search-form-top button[type="submit"] {
    margin: 0;
    border-radius: 0;
    padding: 10px;
    line-height: 0;
    vertical-align: bottom;
    margin-left: -2px;
}

#qsearch__out ul {
    position: initial;
    width: 100%;
}

/* =NAVIGATION
----------------------------------------------- */

#colormag__site-navigation {
    z-index: 999;
}

nav li > ul,
nav li > ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

#colormag__site-navigation {
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.1) inset;
    position: relative;
    background-color: @ini_color_theme_dark;
    border-top: 4px solid @ini_color_theme;
}

#colormag__site-navigation-titles h6.widget-title {
    margin-bottom: 0;
    border-bottom: 0;
}

#colormag__site-navigation .inner-wrap {
    position: relative;
}

#colormag__site-navigation svg {
    fill: @ini_color_theme_text;
    vertical-align: -7px;
    /*max-height: 23px;*/
}

#colormag__site-navigation li.menu-item.nav span,
#colormag__site-navigation li.menu-item.action span {
    margin: 0 0 0 .4rem;
}

#colormag__page.home #colormag__site-navigation li.nav.home svg {
    fill: @ini_color_theme_dark;
}

#colormag__usertools-menu.glyphcolors ul li a {
    text-align: end;
}

#colormag__usertools-menu.glyphcolors ul li a svg {
    margin-left: .4rem;
}

#colormag__usertools-menu.glyphcolors li.action.login svg,
#colormag__usertools-menu.glyphcolors li.action.register svg {
    fill: @ini_color_green;
}

#colormag__usertools-menu.glyphcolors li.action.profile svg {
    fill: @ini_color_blue;
}

#colormag__usertools-menu.glyphcolors li.action.logout svg {
    fill: @ini_color_red;
}

#colormag__usertools-menu.glyphcolors li.action.admin svg {
    fill: @ini_color_yellow;
}

body.navcolors #colormag__site-navigation li span {
    margin: 0 0 0 .4rem;
}

.main-navigation {
    width: 100%;
    text-align: center;
}

.main-navigation li {
    float: left;
    position: relative;
    font-family: 'Open Sans', serif;
    font-weight: 300;
}

.main-navigation li.dropdown-header {
    color: @ini_color_theme_light;
    line-height: 1;
}

.main-navigation li.dropdown-header hr {
    margin-bottom: 0;
}

.main-navigation a,
.main-navigation label {
    color: @ini_color_theme_text;
    display: block;
    float: none;
    font-size: 14px;
    font-weight: 600;
    padding: 10px;
    text-transform: uppercase;
    height: 44px;
    min-height: 44px;
}

/*
.main-navigation li.default-menu,
li.default-menu {
    display: none;
}
*/

.main-navigation li.menu-item-has-children ul:not(.sub-menu) a {
    border-bottom: 1px solid transparent;
}

.main-navigation li.menu-item-has-children a:hover {
    border-color: @ini_color_theme;
}

.main-navigation li.menu-item a span,
.main-navigation li.menu-item-has-children a span {
    vertical-align: 0px;
    vertical-align: middle;
}
.main-navigation li.menu-item.nav.home a span {
    vertical-align: 0px;
}

.main-navigation a:hover,
.main-navigation ul li.current-menu-item a,
.main-navigation ul li.current-menu-item a:after,
.main-navigation ul li.current_page_ancestor a,
.main-navigation ul li.current-menu-ancestor a,
.main-navigation ul li.current_page_item a,
.main-navigation ul li:hover > a,
.main-navigation li.menu-item-has-children:hover > a:after {
    color: @ini_color_theme_text;
}

.main-navigation a:hover,
.main-navigation ul li.current-menu-item > a,
.main-navigation ul li.current_page_ancestor > a,
.main-navigation ul li.current-menu-ancestor > a,
.main-navigation ul li.current_page_item > a,
.main-navigation ul li:hover > a,
.main-navigation ul li:hover > label,
.main-navigation ul li.focus > a,
#colormag__page.home #colormag__site-navigation li.nav.home,
.home-icon.front_page_on {
    background-color: @ini_color_theme;
}

.main-navigation li.menu-item-has-children > a:after,
.main-navigation li.page_item_has_children > a:after {
    content: url(images/menu-down.svg);
}

.main-navigation li li.menu-item-has-children > a:after,
.main-navigation li li.page_item_has_children > a:after {
    content: url(images/menu-right.svg);
}

[dir=rtl] .main-navigation li li.menu-item-has-children > a:after,
[dir=rtl] .main-navigation li li.page_item_has_children > a:after {
    content: url(images/menu-left.svg);
}

.sub-toggle {
    display: none;
}

#colormag__usertools-dropdown > ul {
    width: 70px;
    width: max-content;
}

#colormag__usertools-dropdown > ul li.menu-item-has-children:hover ul {
    left: -300px;
}

#colormag__usertools-dropdown > ul li.menu-item-has-children > a:after {
    content: "";
}

#colormag__usertools-dropdown > ul li.menu-item-has-children > a:before {
    content: url(images/menu-left.svg);
}

[dir=rtl] #colormag__usertools-dropdown > ul li.menu-item-has-children > a:before {
    content: url(images/menu-right.svg);
}

/* =DROP DOWN
----------------------------------------------- */
.main-navigation ul li.focus > ul {
    display: block;
}

.main-navigation .sub-menu,
.main-navigation .children {
    background-color: @ini_color_theme_dark;
}

.main-navigation ul li ul,
.main-navigation ul li:hover ul ul,
.main-navigation ul ul li:hover ul ul,
.main-navigation ul ul ul li:hover ul ul,
.main-navigation ul ul ul ul li:hover ul ul,
.main-navigation ul li.focus ul ul,
.main-navigation ul ul li.focus ul ul,
.main-navigation ul ul ul li.focus ul ul,
.main-navigation ul ul ul ul li.focus ul ul {
    left: -99999px;
    z-index: 100;
}

.main-navigation ul li:hover ul,
.main-navigation ul ul li:hover ul,
.main-navigation ul ul ul li:hover ul,
.main-navigation ul ul ul ul li:hover ul,
.main-navigation ul ul ul ul ul li:hover ul,
.main-navigation ul li.focus ul,
.main-navigation ul ul li.focus ul,
.main-navigation ul ul ul li.focus ul,
.main-navigation ul ul ul ul li.focus ul,
.main-navigation ul ul ul ul ul li.focus ul {
    left: 100%;
}

/* making sure focus isn't lost when passing from main to sub menu */

#colormag__usertools-menu .sub-menu,
#colormag__usertools-dropdown .sub-menu {
    right: 0;
}

.main-navigation ul li ul li {
    float: none;
}

.main-navigation ul li ul {
    position: absolute;
    width: 200px;
    top: 44px;
}

#colormag__usertools-menu ul.sub-menu {
    width: 300px;
}

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

.main-navigation ul li ul li a,
.main-navigation ul li.current-menu-item ul li a,
.main-navigation ul li ul li.current-menu-item a,
.main-navigation ul li.current_page_ancestor ul li a,
.main-navigation ul li.current-menu-ancestor ul li a,
.main-navigation ul li.current_page_item ul li a {
    float: none;
    font-size: 14px;
    height: 100%;
    padding: 10px 15px;
    color: @ini_color_theme_text;
    display: block;
    text-align: left;
    text-transform: none;
}

.main-navigation ul li ul li a:hover,
.main-navigation ul li ul li:hover > a,
.main-navigation ul li.current-menu-item ul li a:hover {
    color: @ini_color_theme_text;
    background-color: @ini_color_theme;
}

.main-navigation ul li ul li ul {
    left: 200px;
    top: 0;
}

.main-navigation ul li:hover > ul,
.main-navigation ul li.focus > ul {
    left: auto;
}

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

.main-navigation ul ul li:hover > ul,
.main-navigation ul ul li.focus > ul {
    left: 100%;
}

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

.main-navigation ul ul ul li:hover > ul,
.main-navigation ul ul ul li.focus > ul {
    left: 100%;
}

.main-navigation select {
    display: none;
}

/* =MAIN NAV SEARCH
----------------------------------------------- */

/*hide the inputs/checkmarks and submenu*/
#colormag__searchcheck01, div.search-form-top {
  display: none;
}

/*position the label*/
label {
  position: relative;
  display: block;
  cursor: pointer;
}

/*show the submenu when input is checked*/
#colormag__searchcheck01:checked~div.search-form-top {
  display: block;
}

/* =RESPONSIVE MENU
----------------------------------------------- */
.menu-toggle, .top-menu-toggle {
    display: none;
    cursor: pointer;
}

.site-header .menu-toggle {
    color: @ini_color_theme_text;
    margin: 0;
    text-align: center;
    font-family: 'Open Sans', serif;
    padding-bottom: 0;
    line-height: 1.2;
}

.site-header .menu-toggle:hover {
    background-color: @ini_link;
}

/*
.main-small-navigation {
    float: none;
}

.main-small-navigation #colormag__site-navigation-primary,
.main-small-navigation .menu {
    padding-top: 43px;
}

.main-small-navigation #colormag__site-navigation-primary > ul,
.main-small-navigation .menu > ul {
    width: 100%;
}

.main-small-navigation ul {
    margin: 0;
    list-style: none;
}

.main-small-navigation a {
    display: block;
    font-size: 14px;
    color: @ini_text;
    padding: 10px 20px;
    text-decoration: none;
    text-transform: uppercase;
}

.main-small-navigation .random-post a {
    padding: 10px 12px;
    border-bottom: none;
}

.main-small-navigation li {
    background-color: @ini_color_theme_text;
}

.main-small-navigation li a:hover {
    background-color: @ini_link;
    color: @ini_color_theme_text;
}

.main-small-navigation ul ul a {
    padding-left: 45px;
    text-transform: none;
}

.main-small-navigation ul ul ul a {
    padding-left: 90px;
}

.main-small-navigation .current_page_item > a,
.main-small-navigation .current-menu-item > a {
    background: @ini_link;
    color: @ini_color_theme_text;
}
*/

/* =PAGE HEADER TITLE
----------------------------------------------- */
.page-header .page-title {
    border-bottom: 1px solid @ini_border;
    margin-bottom: 30px;
}

/* =CONTENT
----------------------------------------------- */

#colormag__main {
    padding-top: 30px;
    padding-bottom: 20px;
}

/* =PAGE NAVIGATION
----------------------------------------------- */

#colormag__breadcrumbs-wrapper {
    text-align: end;
}

#colormag__breadcrumbs-wrapper ul li {
    display: inline list-item;
}

#colormag__breadcrumbs-wrapper.classic-look ul li.label {
    color: @ini_text_neu;
}

#colormag__breadcrumbs-wrapper.pills-look ul li.label {
    display: none;
}

#colormag__breadcrumbs-wrapper.classic-look ul li:after {
    content: "\00a0";
}

#colormag__breadcrumbs-wrapper.classic-look ul.trace > li + li:before {
    content: "/\00a0";
}

#colormag__breadcrumbs-wrapper.classic-look ul.youarehere > li + li:before {
    content: "Â»\00a0";
}


#colormag__breadcrumbs-wrapper.classic-look ul.trace > li:nth-child(2):before,
#colormag__breadcrumbs-wrapper.classic-look ul.youarehere > li:nth-child(2):before {
    content: "";
}

body.pageheader-flip #colormag__pageheader .pageId {
    order: 2;
}

body.pageheader-flip #colormag__breadcrumbs-wrapper {
    order: 1;
    text-align: start;
}

/* =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 -.8rem; /* negative side margin = side padding + side border */
    padding: 0 .3rem;
    border-width: 0 .5rem;
    border-color: @ini_highlight;
    border-style: solid;
}

/* =WIDGETS
----------------------------------------------- */
#colormag__secondary .widget ul li, #colormag__colophon .widget ul li {
    line-height: 1.5;
    padding: 5px 0;
}

#colormag__colophon .widget ul li {
    border-bottom: 1px solid @ini_text_neu;
}

#colormag__secondary .widget ul li li, #colormag__colophon .widget ul li li {
    border-bottom: none;
}

#colormag__secondary .widget ul ul, #colormag__colophon .widget ul ul {
    padding-left: 10px;
}

.widget select {
    border: 1px solid @ini_border;
    color: @ini_text_neu;
    padding: 2px;
    width: 60%;
}

#colormag__secondary .widget p {
    font-size: 14px;
}

#colormag__secondary a:hover {
    text-decoration: underline;
}

#colormag__secondary .widget-title a.rsswidget {
    color: @ini_color_theme_text;
}

#colormag__pageqrwidget {
    display: none;
}

/* =FOOTER WIDGET AREA
----------------------------------------------- */
.footer-widgets-wrapper {
    border-top: 1px solid @ini_border;
    background-color: @ini_color_theme_dark;
}

.footer-widgets-area {
    padding-top: 45px;
    color: @ini_color_theme_light;
}

.footer-widgets-area p {
    text-align: left;
    color: @ini_text_neu;
}

.footer-widgets-area a {
    color: @ini_color_theme_text;
}

.footer-widgets-area a:hover {
    color: @ini_link;
}

#colormag__colophon .widget {
    margin: 0 .5rem 3rem .5rem;
}

#colormag__colophon .widget:first-child {
    margin: 0 .5rem 3rem 0;
}

#colormag__colophon .widget:last-child {
    margin: 0 0 3rem .5rem;
}

#colormag__colophon, #colormag__colophon p {
    font-size: 14px;
    line-height: 1.4;
}

#colormag__userwidget form fieldset {
    border: 2px solid @ini_border;
    padding: 1rem;
}

#colormag__userwidget form fieldset legend {
    padding: 0 1rem;
}

#colormag__userwidget form fieldset label.block input {
    width: 100%;
}

#colormag__licensewidget {
    max-width: 30%;
}

#colormag__licensewidget .license a {
    display: block;
}

/* =FOOTER SOCKET AREA
----------------------------------------------- */
.footer-socket-wrapper {
    padding: 20px 0px 20px;
    background-color: @ini_color_theme_dark;
}

.footer-socket-area {
    width: 100%;
}

body.socket-flip #colormag__colophon .footer-socket-left-section {
    order: 2;
    text-align: end;
}

body.socket-flip #colormag__colophon .footer-socket-right-section {
    order: 1;
}

.footer-socket-wrapper .copyright {
    color: @ini_text_neu;
    float: left;
    font-size: 14px;
    text-alignt: left;
}

.footer-socket-wrapper .copyright a {
    color: @ini_text_neu;
    border-bottom: 1px solid #5a5d62;
}

.footer-socket-wrapper .copyright a:hover {
    color: @ini_color_theme_text;
}

.footer-socket-wrapper .buttons a {
    margin-bottom: 0;
}

.footer-socket-wrapper .buttons ul li:not(:first-child) a {
    margin: 0 0 0 1rem;
}

.footer-socket-wrapper .buttons ul li img {
    margin: 0;
    vertical-align: sub;
}

/* =PRIMARY AND SECONDARY CONTENT AREA
----------------------------------------------- */

#colormag__secondary {
    min-width: @ini_sidebar_width;
    width: @ini_sidebar_width;
}

#colormag__secondary div.content {
    padding: 1rem .5rem 0;
}

#colormag__main-content,
#colormag__primary {
    width: 100%;
}

#colormag__main-content .vr {
    order: 2;
}

/* ToC container */

#dw__toc {
    float: right;
    margin: 0 0 1.6rem 1.6rem;
    width: @ini_toc_width;
}

#dw__toc ul.toc:first-child {
    padding: 1rem .5rem 0;
}

#dw__toc ul.toc a {
    display: block;
    opacity: 0.5;
    color: @ini_text;
    border-left: 4px transparent solid;
    padding: 0 8px 0 4px;
}

#dw__toc ul.toc a:hover {
    border-color: @ini_highlight;
    opacity: 1;
    font-weight: 550;
}


/* =RIGHT SIDEBAR CONTENT LAYOUT
-------------------------------------------------------------- */

body.right-sidebar #colormag__primary {
    margin: 0 .8rem 0 0;
    order: 1;
}

body.right-sidebar #colormag__secondary {
    margin: 0 0 0 .8rem;
    order: 3;
}

/* =LEFT SIDEBAR CONTENT LAYOUT
-------------------------------------------------------------- */

body.left-sidebar #colormag__primary {
    margin: 0 0 0 .8rem;
    order: 3;
}

body.left-sidebar #colormag__secondary {
    margin: 0 .8rem 0 0;
    order: 1;
}

/* =NO SIDEBAR CONTENT LAYOUT
-------------------------------------------------------------- */
body.no-sidebar #colormag__main-content,
body.no-sidebar #colormag__primary {
    width: 100%;
}

/* =MOBILETOOLS
-------------------------------------------------------------- */

div.mobileTools {
    display:none;
}

/* =PAGETOOLS
-------------------------------------------------------------- */

#colormag__pagetools .tools {
    position: sticky;
    top: 2rem;
    width: (@ico-width + @ico-margin + @ico-margin);
    min-height: (7 * (@ico-width + @ico-margin + @ico-margin)); /* 30 (= height of icons) + 10 (<a> padding) x 7 (= maximum number of possible tools of 6 + a11y title) */
    height: auto;
}

#colormag__pagetools ul {
    position: absolute;
    right: 0;
    border: 1px solid transparent; /* add transparent border to prevent jumping when proper border is added on focus */
    white-space: nowrap;
}

#colormag__pagetools ul li a {
    text-align: end;
}

#colormag__pagetools ul li a {
    display: block;
    padding: @ico-margin 0;
}

#colormag__pagetools ul li a span {
    display: none; /* hide label until hover */
}

#colormag__pagetools ul li h6 {
    visibility: hidden;
}

#colormag__pagetools ul li a span {
    margin: 0 @ico-margin;
}

#colormag__pagetools ul li h6 {
    margin: 0;
}

#colormag__pagetools ul li h6 span {
    width: 100%;
}

#colormag__pagetools ul li a svg {
    width: @ico-width;
    height: @ico-width;
    margin: 0 @ico-margin;
    display: inline-block;
    vertical-align: middle;
}

#colormag__pagetools ul:hover {
    background: @ini_background;
    border: 1px solid @ini_border;
    -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
}

#colormag__pagetools ul:hover li a span,
#colormag__pagetools ul:hover li button span,
#colormag__pagetools ul:hover li p span {
    display: initial;
}

#colormag__pagetools ul:hover li h6 {
    visibility: visible;
}

#colormag__pagetools ul:hover li a svg {
    fill: @ini_text_neu;
}

#colormag__pagetools ul li:hover a {
    background-color: @ini_color_theme;
    color: @ini_color_theme_text;
}

#colormag__pagetools ul li:hover a svg {
    fill: @ini_color_theme_text;
}

body.pagetools-flip #colormag__main-content {
    order: 2;
}

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

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

body.pagetools-flip #colormag__pagetools ul li a {
    text-align: start;
}


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

/* Admin */

.mode_admin .ui-admin ul.admin_tasks {
    float: left;
    margin: 0 4rem 2rem 0;
}

.mode_admin .ui-admin ul.admin_tasks li span.icon,
.mode_admin .ui-admin ul.admin_plugins li span.icon {
    vertical-align: -5px;
    margin: 0 .4rem 0 0;
}

.mode_admin .ui-admin #admin__version {
    clear: left;
    float: right;
}

.mode_admin .ui-admin #additional_plugins {
    clear: left;
}

/* Admin - ACL Manager */

.mode_admin #acl_manager ul.acl,
.mode_admin #acl_manager ul.acl img {
    margin-bottom: 0;
}

.mode_admin #acl_manager ul.acl img {
    vertical-align: baseline;
}

/* Admin - Config Manager */

.mode_admin #config__manager fieldset {
    background-color: @ini_background;
    border: 1px solid @ini_border;
    margin: 2rem auto;
}

.mode_admin #config__manager fieldset legend {
    padding: 0 3rem;
}

.mode_admin #config__manager fieldset table td.value {
    background-color: @ini_background_neu;
}

.mode_admin #config__manager fieldset table td.value input {
    margin: 0;
}

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

#config__manager div.other label[for="config___tpl____colormag____flexflip_other"],
#config___tpl____colormag____flexflip_other,
#config__manager div.other label[for="config___tpl____colormag____uicolorize_other"],
#config___tpl____colormag____uicolorize_other,
#config__manager div.other label[for="config___tpl____colormag____glyphcolors_other"],
#config___tpl____colormag____glyphcolors_other,
#config__manager div.other label[for="config___tpl____colormag____topbar_other"],
#config___tpl____colormag____topbar_other,
#config__manager div.other label[for="config___tpl____colormag____print_other"],
#config___tpl____colormag____print_other {
    display: none;
}

#config__manager #tpl____colormag____tpl_settings_name div.other.selectiondefault {
    padding: 0;
}

#config__manager #dw__configform p button {
    margin: 0 1rem;
}

/* Admin - Extensions */

#extension__manager ul.extensionList li {
    padding: 0;
}

#extension__manager ul.extensionList h2 {
    padding: 0;
}

#extension__manager ul.extensionList h2 img,
#extension__manager ul.extensionList a.info,
#extension__manager ul.extensionList dl dd {
    margin: 0;
}

#extension__manager ul.extensionList button {
    display: block;
    margin: .5rem auto;
    padding: .5rem 1rem;
}

/* Admin - User Manager */

#user__manager #usrmgr__del {
    margin: 0 .5rem 0 0;
}

#user__manager button[name="fn[export]"],
#user__manager button[name="fn[start]"],
#user__manager button[name="fn[prev]"],
#user__manager button[name="fn[next]"],
#user__manager button[name="fn[last]"],
#user__manager button[name="fn[add]"] {
    margin-bottom: 0;
}
#user__manager button[name="fn[add]"] {
    margin-bottom: 0;
}

#user__manager .import_users form {
    border: 1px solid @ini_border;
    width: max-content;
    margin: 0 auto;
    padding: 1rem;
}

#user__manager .import_users form button[name="fn[import]"] {
    margin: 1rem 0 0 0;
}

/* Edit */

.editBox .toolbar #tool__bar {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

.editBox .toolbar button {
    line-height: 0;
    padding: 1rem;
}

.editBox #dw__editform #wiki__text {
    width: 100%;
    resize: none;
}

.editBox #dw__editform #wiki__editbar #size__ctl {
    float: right;
}

.editBox #dw__editform #wiki__editbar .editButtons {
    display: inline;
    float: left;
}

.editBox #dw__editform #wiki__editbar .summary {
    float: left;
}

.editBox #dw__editform #wiki__editbar .summary label {
    display: inline-block;
    margin: 1rem 0 0 .4rem;
}

.editBox #dw__editform #wiki__editbar #edit__summary {
    width: 350px;
}

.editBox #dw__editform .license {
    clear: left;
}


.editBox .toolbar button img {
    margin: 0;
}

/* Media Manager */

#mediamanager__page .panel h2 {
    font-size: 18px;
    background-color: @ini_color_theme;
    color: @ini_color_theme_text;
    padding: 6px 12px;
    margin: 0 10px 0 0;
    border-radius: 0;
}

#mediamanager__page .panel.namespaces ul.idx li img,
#media__manager #media__tree ul.idx li img {
    margin: 0;
    padding: .6em .3em 0 0
}

#mediamanager__page .panel.filelist {
    margin: 1rem 0 0 0;
}

#mediamanager__page .panel ul.tabs li strong {
    border-radius: 5px 5px 0 0;
    border-top: 4px solid @ini_color_theme;
    padding: 1rem 1.5rem;
    background-color: @ini_background_alt;
}

#mediamanager__page .panel.filelist ul.thumbs li dl dd,
#mediamanager__page .panel.file div.panelContent dl dt,
#mediamanager__page .panel.file div.panelContent dl dd {
    font-size: 80%;
}

#mediamanager__page .panel.file div.panelContent dl dt {
    margin: 0;
}

#mediamanager__page .panel.file div.panelContent dl dd {
    margin: 0 0 .5rem 0;
}

/* Media Popup */

#media__manager #mediamgr__aside h1 {
    font-size: 18px;
    background-color: @ini_color_theme;
    color: @ini_color_theme_text;
    padding: 6px 12px;
}

#media__manager #media__opts input,
#media__manager #media__opts label {
    display: inline;
}

/* Recent */

.mode_recent #dw__recent .changeType {
    margin-bottom: 1rem;
}

.mode_recent #dw__recent ul li {
    margin: 0 0 .5rem 0;
}

.mode_recent #dw__recent ul img {
    margin: 0;
}

.mode_recent #dw__recent ul img.icon {
    vertical-align: text-top;
}

.mode_recent #dw__recent ul li a.diff_link img {
    vertical-align: 0px;
}

.mode_recent #dw__recent ul li a.revisions_link img {
    vertical-align: -1px;
}

/* Sitemap */

.mode_index #index__tree li > ul {
    margin: 0 0 0 2rem;
}

/*--------------------------------------------------------------
DEBUG
--------------------------------------------------------------*/

/* Helper */

#colormag__helper {
    position: absolute;
    top: 0;
    z-index: 3001;
    visibility: hidden;
    background-color: black;
    color: gold;
}
#colormag__helper span::before {
    content: "desktop (>@ini_site_width + 60px)";
}
#colormag__helper span::after {
    content: " Z-index: 3001.";
}
body.debug #colormag__helper {
    visibility: visible;
}

/* More obvious dbg() result */

.dbg {
    background-color: gold;
    color: black;
}

/*--------------------------------------------------------------
RESPONSIVE STRUCTURE
--------------------------------------------------------------*/

@media screen and (max-width: @ini_site_width + 60px) {
    body.debug #colormag__page {
        background-color: lightyellow;
    }
    #colormag__helper span::before {
        content: "desktop (>@ini_site_width)";
    }
    body.box-layout #colormag__page,
    body.box2wide-layout #colormag__page {
        width: 97%;
    }
}

@media screen and (min-width: @ini_site_width + 1px) {
    /* Override newsticker label's a11y class if screen is larger than @ini_site_width */
    #colormag__topbar-newsticker strong {
        display: initial !important;
        position: initial !important;
    }
    .inner-wrap {
        margin: 0 (@ico-width + @ico-margin + @ico-margin) !important;
    }
    .inner-wrap-left {
        margin: 0 0 0 (@ico-width + @ico-margin + @ico-margin) !important;
    }
    body.mix-layout .inner-wrap-left {
        margin: 0 (@ico-width + @ico-margin + @ico-margin) 0 0 !important;
    }
}

@media screen and (max-width: @ini_site_width) {
    body.debug #colormag__page {
        background-color: bisque;
    }
    #colormag__helper span::before {
        content: "desktop (<@ini_site_width)";
    }
    body.box-layout #colormag__page,
    body.box2wide-layout #colormag__page {
        width: 97%;
    }
    body.wide-layout #colormag__page,
    body.mix-layout #colormag__page {
        width: 100%;
    }
    body.mix-layout .narrow-mix {
        max-width: unset;
    }
    body.mix-layout .inner-wrap.narrow-mix {
        margin: 0 (@ico-width + @ico-margin + @ico-margin) !important;
    }
    body.mix-layout .inner-wrap-left.narrow-mix {
        margin: 0 0 0 (@ico-width + @ico-margin + @ico-margin) !important;
    }
    body.mix-layout.pagetools-flip .inner-wrap-left.narrow-mix {
        margin: 0 (@ico-width + @ico-margin + @ico-margin) 0 0 !important;
    }
}

@media screen and (max-width: @ini_site_width - ((@ini_site_width - @ini_tablet_width) / 2)) {
    #colormag__topbar-links ul li a svg {
        margin: 0;
    }
    #colormag__topbar-links ul li.focus > ul {
        display: block;
    }
    #colormag__topbar-links ul li ul {
        left: -99999px;
        z-index: 100;
        background-color: @ini_background;
        -webkit-box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.1);
        -moz-box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.1);
        box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.1);
    }
    #colormag__topbar-links ul li ul li {
        margin: 0 !important;
        padding: 0 0 0 .5rem;
    }
    #colormag__topbar-links ul li ul li a {
        width: 155px;
        padding: .5rem .5rem .5rem 2rem;
    }
    #colormag__topbar-links ul li:hover ul,
    #colormag__topbar-links ul li.focus ul {
        left: auto;
    }
    #colormag__topbar-links ul li ul {
        right: 30px;
    }
    #colormag__topbar-links ul li ul {
        position: absolute;
        width: 160px;
        top: 32px;
    }
    #colormag__topbar-links ul li ul li:hover {
        background-color: @ini_color_theme;
    }
    #colormag__topbar-links ul li ul li:hover a {
        color: #fff;
    }
}

@media screen and (max-width: @ini_tablet_width) {
    body.debug #colormag__page {
        background-color: burlywood;
    }
    #colormag__helper {
        z-index: 2001;
    }
    #colormag__helper span::before {
        content: "tablet (<@ini_tablet_width)";
    }
    #colormag__helper span::after {
        content: " Z-index: 2001.";
    }
    body.box2wide-layout #colormag__page {
        width: 100%;
        margin: 0;
    }
    #colormag__topbar-wrapper strong {
        display: none;
    }
    #colormag__header-text-nav-wrap {
        padding: 10px 0;
    }
    #colormag__header-text-nav-wrap {
        flex-direction: column;
    }
    #colormag__header-left-section,
    #colormag__header-right-section div {
        width: 100%;
    }
    #colormag__header-left-section {
        justify-content: space-between;
    }
    #colormag__header-right-section {
        margin-top: 1rem;
    }
    #colormag__header-left-section,
    #colormag__header-right-section div ul {
        justify-content: space-evenly;
    }
    #colormag__site-title {
        padding-right: 0;
    }
    #colormag__site-title,
    #colormag__site-description {
        text-align: right;
    }
    #colormag__site-description {
        width: 100%;
    }
    #colormag__header-right-section .widget ul li {
        margin: 0 !important;
    }
    .menu-toggle {
        display: block;
        float: left;
    }
    #colormag__main-content {
        flex-direction: column;
    }
    #colormag__primary, #colormag__secondary {
        width: 100%;
    }
    #colormag__primary {
        order: 3;
        margin: 0 !important;
    }
    #colormag__secondary {
        order: 1;
        margin: 0 0 1.5rem !important;
    }
    .sub-toggle {
        display: initial;
    }
}

@media screen and (max-width: @ini_tablet_width - ((@ini_tablet_width - @ini_phone_width) / 2)) {
    body.debug #colormag__page {
        background-color: darkgoldenrod;
    }
    #colormag__helper span::before {
        content: "tablet (< @ini_tablet_width - ((@ini_tablet_width - @ini_phone_width) / 2))";
    }
    .inner-wrap {
        margin: 0 (@ico-width + @ico-margin);
    }
    .inner-wrap-left {
        margin: 0 0 0 (@ico-width + @ico-margin);
    }
    body.pagetools-flip .inner-wrap-left {
        margin: 0 (@ico-width + @ico-margin) 0 0!important;
    }
    .logged-in #colormag__header #colormag__site-navigation {
        top: 0 !important;
    }
    .breaking-news,
    #colormag__header .social-links {
        float: none;
        max-width: 100%;
    }
    .newsticker li {
        text-align: left;
    }
    #dw__toc {
        width: 100%;
    }
    .footer-socket-right-section,
    .footer-socket-left-section {
        float: none;
        text-align: center;
    }
    .footer-socket-wrapper .copyright {
        float: none;
        max-width: 100%;
    }
    .footer-socket-area .social-links,
    .footer-socket-area .buttons {
        float: none;
    }
    .breaking-news {
        height: auto;
    }
}

@media screen and (max-width: @ini_phone_width) {
    body.debug #colormag__page {
        background-color: chocolate;
    }
    #colormag__helper {
        z-index: 1001;
    }
    #colormag__helper span::before {
        content: "phone (<@ini_phone_width)";
    }
    #colormag__helper span::after {
        content: " Z-index: 1001.";
    }
    .inner-wrap {
        margin: 0 (@ico-width + @ico-margin);
    }
    .inner-wrap-left {
        margin: 0 0 0 (@ico-width + @ico-margin);
    }
    body.pagetools-flip .inner-wrap-left {
        margin: 0 (@ico-width + @ico-margin) 0 0!important;
    }
    #colormag__secondary, #dw__toc {
        margin: 0 0 1rem !important;
    }
}
