/*
*   Common.css file of the Wiki Farm
*   For MediaWiki 1.31.x / BS 3.1.x
*/

/* Font Awesome 5 */
@import url("fa.all.min.css");

/* ################ Start Redesign 2020 ################ */


/* ########## General (MW/BS) styling */
@media (max-width: 600px) {
    body.bs-full-screen-mode .wrapper .content-wrapper .bs-content.container {
        max-width: 100% !important;
    }
}


/* ########## Headings and general Designs */
#content #bodyContent h2,
#content #bodyContent h3,
#content #bodyContent h4 {
    font-weight: 600;
}

#contentSub {
    background-color: #f6f6f6;
}


/* ########## Header/Logo */
.bs-logo {
    width: calc(18.78rem - 2em);
}
.mediawiki .bs-logo a {
    height: 3.6rem;
    margin: 0.2rem;
    width: auto;
    background-size: contain;
    background-position: center;
}
@media (max-width: 1000px) {
    .bs-logo {
        width: 100%;
    }
    .bs-logo a {
        height: 2.725rem !important;
        margin: 0.2rem 0 !important;
    }
}

#bs-sitenavtabs:before {
    content:"";
    display: block;

    margin-top: 8px;
    width: 100%;
    height: 30px;

    background-image: url('../branding/copiki_logo_rgb_fullcolor_b300p.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 50% 50%;
}


/* ########## Footer */
.main-footer .footer-icons > li {
	display: flex;
}
.main-footer .footer-icons li a {
	align-self: center;
}
.main-footer .footer-icons .linkcolorlight a:not(:hover) {
	color: #c0c0c0;
}
.main-footer .smw-footer {
	height: 27px;
	width: auto;
}


/* ########## Navigation */
#n-bluespiceabout {
    display: none;
}

@media (max-width: 1000px) and (min-width: 721px) {
    .sitetools-main .panel .list-group a.list-group-item, .sitetools-main .bs-panel .list-group a.list-group-item {
        
    }
    .sitetools-main #bs-toolpanetabs div.tab-content a:focus, .sitetools-main #bs-toolpanetabs div.tab-content a {
        height: 3rem;
        line-height: 3rem;
        padding-top: 0.625rem;
        padding-bottom: 0;
    }
}

@media (min-width: 576px) {
    .bs-page-breadcrumbs .dropdown-menu {
        min-width: 300px
    }
}



/* ########## Navigation / Icons */
.navigation-main #pnl-bs-mediawiki-sidebar {
    padding-bottom: 10px;
}

.navigation-main #n-Aktuelles .bs-icon-linklist-default::before,
.navigation-main #n-Blog .bs-icon-linklist-default::before {
    font-family: 'Font Awesome 5 Free';
    content: '\f1ea';
    font-weight: 900;
}
.navigation-main #n-Seiten-von-A-Z .bs-icon-linklist-default::before,
.navigation-main #n-Alle-Seiten .bs-icon-linklist-default::before {
    font-family: 'Font Awesome 5 Free';
    content: '\f0c5';
    font-weight: 900;
}
.navigation-main #n-recentchanges .bs-icon-linklist-default::before {
    font-family: 'Font Awesome 5 Free';
    content: '\f017';
    font-weight: 900;
}
.navigation-main #n-Datei-hochladen .bs-icon-linklist-default::before {
    font-family: 'Font Awesome 5 Free';
    content: '\f093';
    font-weight: 900;
}
.navigation-main #n-Dateiliste .bs-icon-linklist-default::before {
    font-family: 'Font Awesome 5 Free';
    content: '\f03a';
    font-weight: 900;
}

.navigation-main #n-Spezialseiten .bs-icon-linklist-default::before {
    font-family: 'Font Awesome 5 Free';
    content: '\f085';
    font-weight: 900;
}
.navigation-main #n-Video-Anleitungen .bs-icon-linklist-default::before {
	font-family: 'Font Awesome 5 Free';
    content: '\f03d';
    font-weight: 900;
}
.navigation-main #n-Wiki-Sandkasten .bs-icon-linklist-default::before {
	font-family: 'Font Awesome 5 Free';
    content: '\f5ca';
    font-weight: 900;
}
.navigation-main #n-external-manuals .bs-icon-linklist-default::before,
.navigation-main #n-help .bs-icon-linklist-default::before,
.navigation-main #n-Hilfe .bs-icon-linklist-default::before,
.navigation-main #n-Copiki-Hilfe .bs-icon-linklist-default::before {
	font-family: 'Font Awesome 5 Free';
    content: '\f277';
    font-weight: 900;
}


/* ########## Navigational Elements */
#content #bodyContent .toc {
    background-color: #f6f6f6;
    margin-top: 1rem;
}
.toc .toctitle {
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
}
.toc .toctoggle {
    display: inline-block;
    vertical-align: top;
    margin-top: 0.2rem;
}
/* Make disable TOC number possible */
.noautonum span.tocnumber { display: none; }


/* ########## Pictures */
img.thumbborder {
    border: solid 1px #eeeeee;
}


/* ########## Tables */
table thead tr, table tr th p {
	font-weight: bold;
}

table.contenttable thead tr, table.contenttable th,
.mw-datatable th {
    background-color: #e2e2e2;
}
table.contenttable td, table.contenttable tr,
.mw-datatable, .mw-datatable td, .mw-datatable th {
    border: 1px #ccc solid;
}

table.wikitable {
    background-color: #f6f6f6;
}
table.wikitable > tr > th, table.wikitable > * > tr > th {
    background-color: #e2e2e2;
}

table.cuscosky {
	border: 1px solid #cccccc;
}
table.cuscosky tbody tr {
	color: #222;
}
table.cuscosky thead tr, table.cuscosky tbody th {
	color: #222;
	background-color: #e2e2e2;
	font-weight: bold;
}
table.cuscosky td, table.cuscosky th {
	border: 1px solid #cccccc;
	padding: 6px;
}
table.cuscosky tbody tr:nth-child(odd){
	background-color: #f6f6f6;
}


/* ########## Lists */
/* Norm list CSS */
.norm-list {
	counter-reset: my-counter;
	list-style-type: none;
	margin: 0 0 0 2em;
	padding: 0;
}
.norm-list li {
	position: relative;
	margin-bottom: 10px;
}
.norm-list li:before {
	content: counter(my-counter, lower-alpha) ")";
	position: absolute;
	left: -20px;
	counter-increment: my-counter;
}
.norm-list li ul {
	counter-reset: nested-counter;
	list-style-type: none;
}
.norm-list li ul li:before {
	content: counter(nested-counter) ")";
	counter-increment: nested-counter;
	position: absolute;
	left: -20px;
}
  

/* ################################################# Styling for Special Pages ################################################# */

/* ########## All Pages */
body.ns-special .mw-allpages-body ul > li {
    padding: 3px 0;
    border-top: 1px solid rgba(0,0,0,0.05);
}

/* ########## Page History */
#pagehistory {
    padding-left: 0;
}
#pagehistory li {
    list-style-type: none;
    border-bottom: 1px solid #e2e2e2;
}
#pagehistory li:hover {
    background-color: #f6f6f6;
}
#pagehistory li .mw-changeslist-date::before {
    font-family: 'Font Awesome 5 Free';
    content: '\f530';
    font-weight: 900;
    padding-right: 0.3rem;
}
#pagehistory li .history-user bdi::before,
.mw-userlink bdi::before {
    font-family: 'Font Awesome 5 Free';
    content: '\f007';
    font-weight: 900;
    padding-right: 0.3rem;
}
#pagehistory li .mw-history-undo a::before {
    font-family: 'Font Awesome 5 Free';
    content: '\f0e2';
    font-weight: 900;
    padding: 0 0.2rem;
}


/* ################################################# MW/BS forms and UI styling ################################################# */


/* General */
fieldset {
    border-color: #9d9d9d;
}


/* Selects / Dropdown */
select {
    border: 1px solid #a2a9b1;
    border-radius: 2px;

    -webkit-transition: color 100ms,border-color 100ms,box-shadow 100ms;
    -moz-transition: color 100ms,border-color 100ms,box-shadow 100ms;
    transition: color 100ms,border-color 100ms,box-shadow 100ms;

    padding: 0.57142857em 0.57142857em 0.5em;
}
.namespaceselector {
    margin: 0.5em 0;
    border: 1px solid #a2a9b1;
    border-radius: 2px;
    padding: 0.57142857em 0.57142857em 0.5em;

    font-family: inherit;
    font-size: inherit;
    line-height: 1.07142857em;
    vertical-align: middle;
}
select:hover,
.namespaceselector:hover {
    border-color: #72777d;
}

/* inputs */
input[type=submit] {
	font-family: inherit;
    font-size: 1em;
    display: inline-block;
    min-width: 4em;
    max-width: 28.75em;
    padding: 0.546875em 1em;
    line-height: 1.286;
    margin: 0;
    border-radius: 2px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-appearance: none;
    *display: inline;
    zoom: 1;
    vertical-align: middle;
    background-color: #f8f9fa;
    color: #222222;
    border: 1px solid #a2a9b1;
    text-align: center;
    font-weight: bold;
    cursor: pointer;
}


label {
    margin-bottom: 0;
}

/* X-Grid */
.x-grid-td {
	vertical-align: middle;
}
.x-grid-cell-inner {
}
.x-grid-td.ns-manager-icon .x-grid-cell-inner {
	text-align: center !important;
	padding: 8px 0;
}

/* ################################################# Extension corrections / styles ################################################# */

/* ########## MW Popups */
.mwe-popups a.mwe-popups-extract {
    color: #333 !important;
}
.mwe-popups.mwe-popups-is-not-tall footer {
    width: 100%;
}

/* ########## Extension:DrawIO */
.drawio-img-box {
	text-align: center;
}

/* ########## Extension:FlaggedRevs */
div.flaggedrevs_short_details {
	z-index: 9999;
}

/* ########## Extension:BlueSpiceUniversalExport */
.bs-universalexport-exportexclude {
	background-color: initial;
	display: initial;
}

/* ########## Extension:BlueSpiceUserManager */

.bs-crud-panel-toolbar .x-btn.x-btn-default-toolbar,
.bs-crud-panel-toolbar .x-btn.x-btn-default-toolbar-small {
	border-color: initial;
	background-color: initial;
}

/* ########## Extension:BlueSpiceSocialBlog */
/* Hide form to start blog */
.bs-social-entitylist .bs-social-entity-edit-mode form.short {
    display: none;
}

/* ########## BlueSpice UI */

body.mediawiki #content .bs-extjs-actioncolumn-icon.progressive:before, body.mediawiki #content .x-btn-glyph.progressive:before {
	color: #616265;
}
body.mediawiki #content .bs-extjs-actioncolumn-icon.progressive:hover:before, body.mediawiki #content .x-btn-glyph.progressive:hover:before {
	color: #9d9d9d;
}
.x-action-col-glyph {
	padding: 4px;
}
.x-action-col-glyph.bs-icon-info {
	padding: 0;
}

.oo-ui-defaultOverlay {
	z-index: 10001;
}

/* ########## Extension:ApprovedRevs */
#bodyContent span.notLatestMsg {
    display: inline;
    padding-right: 0.3rem;
}
#bodyContent span.notLatestMsg::before {
    font-family: 'Font Awesome 5 Free';
    content: '\f021';
    font-weight: 900;
    padding-right: 0.3rem;
}
#bodyContent span.approvedAndLatestMsg {
    display: inline;
    padding-right: 0.3rem;
}
#bodyContent span.approvedAndLatestMsg::before {
    font-family: 'Font Awesome 5 Free';
    content: '\f00c';
    font-weight: 900;
    padding-right: 0.3rem;
}
#bodyContent span.approvingUser {
    display: inline;
    padding-right: 0.3rem;
}

/** VEForAll Fix **/
#pfForm .oo-ui-tool-link {
	height: 40px;
	width: 39px;
}
#pfForm .oo-ui-toolbar-actions {
	order: 1;
	width: 40px;
}
#pfForm .oo-ui-toolbar-bar {
	display: flex;
	width: 100%;
	justify-content: space-between;
}
#pfForm .oo-ui-toolbar {
	display: flex;
}

/* ################################################# Code for responsive hexagons ################################################# */
#hexGrid,
#content #bodyContent .hexGrid {
    display: flex !important;
    flex-wrap: wrap;
    margin: 0 auto !important;
    overflow: hidden;
    font-family: 'Raleway', sans-serif;
    font-size: 15px;
    list-style-type: none;

    padding-bottom: 6.5% !important;
}
#hexGrid *,
#content #bodyContent .hexGrid * {
    margin: 0;
    padding: 0;
}
#hexGrid .hex,
#content #bodyContent .hexGrid .hex {
    position: relative;
    visibility:hidden;
    outline:1px solid transparent;
}
#hexGrid .hex::after,
#hexGrid .logo::after,
#content #bodyContent .hexGrid .hex::after,
#content #bodyContent .hexGrid .logo::after {
    content:'';
    display:block;
    padding-bottom: 86.602%;
}
#hexGrid .hexIn,
#content #bodyContent .hexGrid .hexIn {
    position: absolute;
    width:96%;
    padding-bottom: 110.851%;
    margin:0 2%;
    overflow: hidden;
    visibility: hidden;
    outline:1px solid transparent;
    -webkit-transform: rotate3d(0,0,1,-60deg) skewY(30deg);
    -ms-transform: rotate3d(0,0,1,-60deg) skewY(30deg);
    transform: rotate3d(0,0,1,-60deg) skewY(30deg);
}
#hexGrid .hexIn *,
#content #bodyContent .hexGrid .hexIn * {
    position: absolute;
    visibility: visible;
    outline:1px solid transparent
}

/* Design for //mib */
#hexGrid .hexIn duv,
#content #bodyContent .hexGrid .hexIn duv{
    position: relative;
}
#hexGrid .hexIn duv img,
#content #bodyContent .hexGrid .hexIn duv img {
    max-height:1em;
    left: auto;
    right: auto;
    position: relative;
}

#hexGrid .hexLink,
#content #bodyContent .hexGrid .hexLink {
    display:block;
    width: 100%;
    height: 100%;
    text-align: center;
    color: #fff;
    background-color: #6f7273;
    overflow: hidden;
    -webkit-transform: skewY(-30deg) rotate3d(0,0,1,60deg);
    -ms-transform: skewY(-30deg) rotate3d(0,0,1,60deg);
    transform: skewY(-30deg) rotate3d(0,0,1,60deg);
}

/*** HEX CONTENT ***/
#hexGrid .hex img,
#content #bodyContent .hexGrid .hex img {
    left: -100%;
    right: -100%;
    width: auto;
    height: 100% !important;
    max-width: none !important;
    margin: 0 auto;
    -webkit-transform: rotate3d(0,0,0,0deg);
    -ms-transform: rotate3d(0,0,0,0deg);
    transform: rotate3d(0,0,0,0deg);
}

#hexGrid .hex div.content,
#content #bodyContent .hexGrid .hex div.content {
    color: #fff;
    text-align: center;
    line-height: 1.5em;

    display:flex;
    align-items: center; /* Vertical center alignment */
    justify-content: center; /* Horizontal center alignment */
    flex-wrap: wrap;

    padding: 3%;
    width: 100%;
    height: 100%;
    -webkit-transform: rotate3d(0,0,0,0deg);
    -ms-transform: rotate3d(0,0,0,0deg);
    transform: rotate3d(0,0,0,0deg);
}
#hexGrid .hex div.content div,
#content #bodyContent .hexGrid .hex div.content div {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
}

#hexGrid .hex h1,
#hexGrid .hex p,
#content #bodyContent .hexGrid .hex h1,
#content #bodyContent .hexGrid .hex p {
    color: #fff;
    width: 100%;
    padding: 5%;
    box-sizing: border-box;
    background-color: rgba(0, 128, 128, 0.8);
    background-color: rgba(128, 128, 128, 0.8);
    font-weight: 300;
    -webkit-transition:  -webkit-transform .2s ease-out, opacity .3s ease-out;
    transition:          transform .2s ease-out, opacity .3s ease-out;
}
#hexGrid .hex h1,
#content #bodyContent .hexGrid .hex h1 {
    bottom: 50%;
    margin: 0 !important;
    padding-top:50%;
    font-size: 1.5em;
    z-index: 1;
    -webkit-transform:translate3d(0,-100%,0);
    -ms-transform:translate3d(0,-100%,0);
    transform:translate3d(0,-100%,0);
}
#hexGrid .hex h1::after,
#content #bodyContent .hexGrid .hex h1::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 45%;
    width: 10%;
    text-align: center;
    border-bottom: 1px solid #fff;
}
#hexGrid .hex p,
#content #bodyContent .hexGrid .hex p {
    top: 50%;
    padding-bottom: 50%;
    -webkit-transform:translate3d(0,100%,0);
    -ms-transform:translate3d(0,100%,0);
    transform:translate3d(0,100%,0);
}
#hexGrid .hex .bg-animation-overlay,
#content #bodyContent .hexGrid .hex .bg-animation-overlay {
    color: #fff;
    width: 100%;
    height: 100%;
    padding: 5%;
    box-sizing: border-box;
    background-color: #fff;
    opacity: 0;
    -webkit-transition: opacity .3s ease-out;
    transition: opacity .3s ease-out;
}

/*** HEX LOGO ***/
#hexGrid .logo,
#content #bodyContent .hexGrid .logo {
    display: flex;
    flex-direction: row;

    align-items: center; /* Vertical center alignment */
    justify-content: center; /* Horizontal center alignment */
    margin: 0 auto -65px auto;
    width: 33.333%;
}

#hexGrid .logoIn,
#content #bodyContent .hexGrid .logoIn {
	position: absolute;
	visibility: visible;
	width: 100%;

	width: 96%;
	margin: 24% 2%;
    padding-bottom: 62.8%; /* to set height to 100% of hex */
	background-position: center center;
	background-size: contain;
	background-image: url('/images_noauth/companylogo.png');
	background-repeat: no-repeat;
}
/* For individual logos */
#content #bodyContent .hexGrid .logoIn.logoIndividual img {
	position: absolute;
	top: 50%;
	right: auto;
	bottom: auto;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;

	width: auto !important;
    height: auto !important;
    max-height: 100% !important;
    max-width: 100% !important;
}
#content #bodyContent .hexGrid .logoIn.logoIndividual {
	/* height: 63.5%; */
}
/* Logo as last element in small row */
#hexGrid li:nth-of-type(14n+5) .logoIn,
#content #bodyContent .hexGrid li:nth-of-type(14n+5) .logoIn,
#hexGrid.startFour li:nth-of-type(14n+13) .logoIn,
#content #bodyContent .hexGrid.startFour li:nth-of-type(14n+13) .logoIn {
	width: 142%;
    margin: 28% -46% 28% 4%;
    padding-bottom: 54.8%;
}
#hexGrid.startFour li:nth-of-type(14n+5) .logoIn,
#content #bodyContent .hexGrid.startFour li:nth-of-type(14n+5) .logoIn {
	width: 96%;
    margin: 24% 2%;
    padding-bottom: 62.8%;
}
/* Logo as first element in small row */
#hexGrid li:nth-of-type(7n+1) .logoIn,
#content #bodyContent .hexGrid li:nth-of-type(7n+1) .logoIn,
#hexGrid.startFour li:nth-of-type(7n+9) .logoIn,
#content #bodyContent .hexGrid.startFour li:nth-of-type(7n+9) .logoIn {
	width: 142%;
    margin: 28% 4% 28% -46%;
    padding-bottom: 54.8%;
}
#hexGrid.startFour li:nth-of-type(7n+1) .logoIn,
#content #bodyContent .hexGrid.startFour li:nth-of-type(7n+1) .logoIn {
	width: 96%;
    margin: 24% 2%;
    padding-bottom: 62.8%;
}
/* Double size logo */
#hexGrid li .logoIn.doublesize,
#content #bodyContent .hexGrid li .logoIn.doublesize {
	width: 176%;
	margin: 28% 12%;
	padding-bottom: 54.8%;
}

/*** HOVER EFFECT  ***/
#hexGrid .hexLink:hover h1, #hexGrid .hexLink:focus h1,
#hexGrid .hexLink:hover p, #hexGrid .hexLink:focus p,
#content #bodyContent .hexGrid .hexLink:hover h1, #content #bodyContent .hexGrid .hexLink:focus h1,
#content #bodyContent .hexGrid .hexLink:hover p, #content #bodyContent .hexGrid .hexLink:focus p {
    -webkit-transform:translate3d(0,0,0);
    -ms-transform:translate3d(0,0,0);
    transform:translate3d(0,0,0);
}
#hexGrid .hexLink:hover .bg-animation-overlay, #hexGrid .hexLink:focus .bg-animation-overlay,
#content #bodyContent .hexGrid .hexLink:hover .bg-animation-overlay, #content #bodyContent .hexGrid .hexLink:focus .bg-animation-overlay {
    opacity: 0.4;
    -webkit-transition: opacity .3s ease-out;
    transition: opacity .3s ease-out;
}

/* Variables for sizes */
@media (max-width: 575px) {
	#hexGrid, .hexGrid,
	#content #bodyContent .hexGrid {
        width: 576px;
        max-width: 100%;
		padding-bottom: 8.5% !important;
    }
	#hexGrid .hex div.content,
    #content #bodyContent .hexGrid .hex div.content {
        font-size: 1em;
    }
}
@media (max-width: 767px) and (min-width: 576px) {
    #hexGrid, .hexGrid {
        width: 576px;
        max-width: 100%;
    }
    #hexGrid .hex div.content,
    #content #bodyContent .hexGrid .hex div.content {
        font-size: 1.1em;
    }
}
@media (max-width: 999px) and (min-width: 768px) {
    #hexGrid, .hexGrid {
        width: 768px;
        max-width: 100%;
    }
    #hexGrid .hex div.content,
    #content #bodyContent .hexGrid .hex div.content {
        font-size: 1.3em;
    }
}
@media (min-width: 1000px) {
    #hexGrid, .hexGrid {
        width: 910px;
        max-width: 100%;
    }
    #hexGrid .hex div.content,
    #content #bodyContent .hexGrid .hex div.content {
        font-size: 1.5em;
    }
}
/*** HEXAGON SIZING AND EVEN ROW INDENTATION ***/
/* Sizes for hexs */
@media (max-width: 575px) {
    #hexGrid .hex,
    #content #bodyContent .hexGrid .hex {
        width: 33%;
    }
    #hexGrid .hex:nth-of-type(5n+1),
    #content #bodyContent .hexGrid .hex:nth-of-type(5n+1) {
        margin-left:16.5%;
    }
    #hexGrid.startFour .hex:nth-of-type(5n+1),
    #content #bodyContent .hexGrid.startFour .hex:nth-of-type(5n+1) {
        margin-left:0%;
    }
    #hexGrid.startFour .hex:nth-of-type(5n+7),
    #content #bodyContent .hexGrid.startFour .hex:nth-of-type(5n+7) {
        margin-left:16.5%;
    }
	/* Logo as last element in small row - reset */
	#hexGrid li:nth-of-type(14n+5) .logoIn,
	#content #bodyContent .hexGrid li:nth-of-type(14n+5) .logoIn,
	#hexGrid.startFour li:nth-of-type(14n+13) .logoIn,
	#content #bodyContent .hexGrid.startFour li:nth-of-type(14n+13) .logoIn {
		width: 96%;
		margin: 24% 2%;
		padding-bottom: 62.8%;
	}
	/* Logo as first element in small row - reset */
	#hexGrid li:nth-of-type(7n+1) .logoIn,
	#content #bodyContent .hexGrid li:nth-of-type(7n+1) .logoIn,
	#hexGrid.startFour li:nth-of-type(7n+9) .logoIn,
	#content #bodyContent .hexGrid.startFour li:nth-of-type(7n+9) .logoIn {
		width: 96%;
		margin: 24% 2%;
		padding-bottom: 62.8%;
	}
	#hexGrid li:nth-of-type(14n+3) .logoIn,
	#content #bodyContent .hexGrid li:nth-of-type(14n+3) .logoIn,
	#hexGrid.startFour li:nth-of-type(14n+5) .logoIn,
	#content #bodyContent .hexGrid.startFour li:nth-of-type(14n+5) .logoIn {
		width: 142%;
		margin: 28% -46% 28% 4%;
		padding-bottom: 54.8%;
	}
	#hexGrid li:nth-of-type(5n+1) .logoIn,
	#content #bodyContent .hexGrid li:nth-of-type(5n+1) .logoIn,
	#hexGrid.startFour li:nth-of-type(5n+7) .logoIn,
	#content #bodyContent .hexGrid.startFour li:nth-of-type(5n+7) .logoIn {
		width: 142%;
		margin: 28% 4% 28% -46%;
		padding-bottom: 54.8%;
	}
	#hexGrid.startFour li:nth-of-type(14n+3) .logoIn,
	#content #bodyContent .hexGrid.startFour li:nth-of-type(14n+3) .logoIn,
	#hexGrid.startFour li:nth-of-type(5n+1) .logoIn,
	#content #bodyContent .hexGrid.startFour li:nth-of-type(5n+1) .logoIn {
		width: 96%;
		margin: 24% 2%;
		padding-bottom: 62.8%;
	}
}
@media (min-width: 576px) {
    #hexGrid .hex,
    #content #bodyContent .hexGrid .hex {
        width: 25%;
    }
    #hexGrid .hex:nth-of-type(7n+1),
    #content #bodyContent .hexGrid .hex:nth-of-type(7n+1) {
        margin-left:12.5%;
    }
    #hexGrid.startFour .hex:nth-of-type(7n+1),
    #content #bodyContent .hexGrid.startFour .hex:nth-of-type(7n+1) {
        margin-left:0%;
    }
	#hexGrid.startFour .hex:nth-of-type(7n+9),
    #content #bodyContent .hexGrid.startFour .hex:nth-of-type(7n+9) {
        margin-left:12.5%;
    }
}

/* PDF Export and just show on PDFs */
.bs-page-content .no-pdf {
	display: none !important;
}
.bs-page-content div.only-pdf {
	display:block;
}
.bs-page-content span.only-pdf {
	display:inline;
}
.only-pdf {
	display: none !important;
}


/* ################################################# Custom template styles (Vorlagen) ################################################# */


#Vorlage_Tausendfach_verwendet td {
    padding: 5px;
}

/* Box for attention (template) */
.box {
    display: flex;
    align-items: center;
    flex-direction: row;
    padding: 5px;
    margin-top: 1rem;
    margin-bottom: 1rem;
}
.box .pic {
    margin: 0 20px 0 15px;
}
.box .text {
}

.box.box_general_styling {
}
.box.box_general_styling .heading {
    text-transform: uppercase;
    font-weight: bold;
}
.box.box_general_styling .content {
}
.box.box_general_styling .fa, .box.box_general_styling .far , .box.box_general_styling .fas {
    font-size: 3em;
}



/* ########## Infobox templates */
.infobox {
    width: 100%;
	/* z-index: 999; */
    position: relative;
}
@media (min-width: 601px) {
    .infobox {
        margin-left: 16px;
        width: 22rem;
        float: right;
    }
}
.infobox .infobox-heading {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;

    min-height: 32px;
    /*background-color: rgba(60, 60, 60, 0.15);*/
    /* background-color: rgba(60, 60, 60, 0.5); */
    background-color: #9d9d9d;
    color: #ffffff;
    font-weight: bold;
    padding: 8px;
}
.infobox .infobox-innerheading {
     margin: auto 0;
}
.infobox .infobox-body {
    background-color: #fff;
    padding: 0px;
    border-right: 1px solid rgba(60, 60, 60, 0.5);
    border-left: 1px solid rgba(60, 60, 60, 0.5);
    border-bottom: 1px solid rgba(60, 60, 60, 0.5);
}
.infobox .infobox-image {
    padding: 8px;
}

.infobox .pic {
    text-align: center;
}
/*
.infobox .logo {
    padding: 0 8px;
}
.infobox .logo img {
    object-fit: contain;
    width: 100%;
}
*/
/*
.infobox .pic img {
    object-fit: contain;
    width: 100%;
}
*/
.infobox .infobox-desc {
    font-size: 0.8em;
    text-align: center;
    padding: 4px 0;
}
.infobox table {
    margin-bottom: 0;
}
.infobox table p {
    margin: 0;
}
.infobox table td.infoboxLabel {
    font-weight: bold;
}
.infobox table td.infoboxHeading {
    font-weight: bold;
    /* background-color: rgba(60, 60, 60, 0.15); */
    background-color: #e2e2e2;
}
.infobox table td.infoboxData {

}


/** CopikiBlog - SMW Semantic Blog **/
#blog-input-box {
	margin: auto;
	margin-bottom: 2rem;
}
#blog-input-box form[name="createbox"] {
	background-color: #e2e2e2;
	box-shadow: 3px 3px 3px rgba(0,0,0,.35);
	border-top: 1px solid rgba(0,0,0,.075);
	border-left: 1px solid rgba(0,0,0,.075);
	border-radius: 5px;
	padding: .25rem 1rem;
	margin: 0 1rem 1rem 1rem;
}
.ns-1580 #blog-input-box form[name="createbox"] {
	margin: 0
}
.ns-1580 #blog-input-box .inputbox-label {
	margin-top: -62px;
	margin-left: 0;
}
#blog-input-box form[name="createbox"] p {
	display: flex;
}
#blog-input-box form[name="createbox"] p .formInput {
	flex-grow: 1;
	margin-left: 50px;
}
#blog-input-box .inputbox-label {
	display: flex;
	align-items: center;
	min-height: 62px;
	width: 68px;
	justify-content: center;
	font-weight: bold;
	margin-top: -78px;
	margin-bottom: 1rem;
	margin-left: 1rem;
	color: #c0143c;
	border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;
	font-size: 1.15rem;
}
#blog-input-box .inputbox-label:hover a {
	text-decoration: none !important;
}
#blog-input-box .inputbox-icon {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	background: #9d9d9d;
}
#blog-input-box .inputbox-icon:hover {
	background: #c0143c;
}
#blog-input-box .inputbox-icon i {
	color: #fff;
}

.blog-feed-item {
	display: flex;
	gap: 16px;
	padding: 0 1rem 0 26px;
	margin-bottom: 1rem;
}
.blog-feed-item-date {
	background: #c0143c;
	color: #fff;
	display: flex;
	border-radius: 50%;
	width: 50px;
	height: 50px;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	line-height: 1.1rem;
	flex-shrink: 0;
}
.blog-feed-item-date .date-day {
	font-size: 1.1rem;
	font-weight: bold;
}
.blog-feed-item-date .date-month {
	font-size: small;
}
.blog-feed-item-body {
	border-radius: 4px;
	padding: .5rem 2rem;
	box-shadow: 3px 3px 3px rgba(0,0,0,.25);
	border-top: 1px solid rgba(0,0,0,.15);
	border-left: 1px solid rgba(0,0,0,.15);
	width: 100%;
	min-width: 300px;
}
.blog-feed-item-title {
	margin: -20px 0 .5rem 0;
}
.blog-feed-item-published {
	color: #666666;
	margin-bottom: .5rem
}
.blog-feed-item-footer {
	display: flex;
	justify-content: space-between;
}
.blog-feed-item-teaser {
	cursor: pointer;
	font-size: 0.9375rem;
}
.blog-feed-item-expand, .blog-feed-item-collapse {
	color: #c0143c;
	cursor: pointer;
	float: right;
	margin-top: .5rem;
}
.blog-feed-item-expand:before, .blog-feed-item-collapse:before {
	font-family: 'Font Awesome 5 Free';
	font-weight: bold;
	font-size: 1.25rem;
}
.blog-feed-item-expand.icon-down:before {
	/* content: '\f107'; */
	content: '\f424';
}
.blog-feed-item-expand.icon-up:before {
	/* content: '\f106'; */
	content: '\f424';
}
.blog-feed-item-collapse:before {
	content: '\f00d';
}
.blog-feed-item-expand:hover span, .blog-feed-item-collapse:hover span {
	text-decoration: underline;
}
.blog-feed-item-expand i, .blog-feed-item-collapse i {
	font-size: 1.25rem;
	text-decoration: none !important;
}
.blog-feed-item-catlinks {
	list-style: none;
	margin: 0 !important;
	padding: .5rem 0 !important;
	display: flex;
	justify-content: start;
	align-items: center;
}
.blog-feed-item-catlinks:before {
	content: "\e903";
	font-family: "bluespice-logo";
	font-style: normal;
	font-size: 0.63rem;
	margin-right: 0.3125rem;
	display: inline-block;
	vertical-align: middle;
}
.blog-feed-item-catlinks li {
	padding: 0 0.3125rem;
	border: 1px solid #c4c4c4;
	border-radius: 0.19rem;
	background-color: transparent;
	margin-left: 0.3125rem;
	margin-bottom: 0.3125rem;
	line-height: 1.25rem;
	color: #c0143c;
	margin-right: 2px !important;
}
.blog-feed-item-body::before {
	content: '';
	display: inline-block;
	width: 20px;
	height: 20px;
	transform: rotate(45deg);
	background: white;
	margin-left: -43px;
	border-left: 1px solid #ddd;
	border-bottom: 1px solid #ccc;
	top: 7px;
	position: relative;
}
#category-filters {
	margin: 0 1rem 2rem 1rem;
	padding: 0 1rem;
	background: #e2e2e2;
	box-shadow: 3px 3px 3px rgba(0,0,0,.35);
	border-top: 1px solid rgba(0,0,0,.075);
	border-left: 1px solid rgba(0,0,0,.075);
	border-radius: 5px;
	display: flex;
	flex-wrap: wrap;
}
.blog-feed-item-catlinks {
	list-style: none;
	margin: 0 !important;
	padding: .5rem 0 !important;
	display: flex;
	justify-content: start;
	align-items: center;
	margin-right: 1rem !important;
}
.blog-feed-controls {
	float: right;
	margin-top: .5rem;
}
.category-filter {
	cursor: pointer;
}
#category-filters * {
	color: #444;
	padding: 5px 0 !important;
}
#category-filters *.active {
	color: #c0143c;
}
.reset-filters {
	align-self: center;
	margin-left: auto;
	cursor: pointer;
}
.sort-desc, .sort-asc {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: #c0143c;
	cursor: pointer;
}
.sort-desc::before, .sort-asc::before {
	font-family: icomoon !important;
	content: '\ea4c';
	color: #fff;
}
.sort-asc::before {
	transform: rotate3d(1,0,0,180deg);
}
@media ( max-width: 576px ) {
	.blog-feed-item {
		padding-left: 1rem;
	}
	.inputbox-label {
		display: none !important;
	}
	#blog-input-box form[name="createbox"] p {
		flex-direction: column;
	}
	#blog-input-box form[name="createbox"] p .formInput {
		margin-left: 0;
		min-height: 40px;
	}
}
@media ( max-width: 768px ) {
	.blog-feed-item-date {
		order: 1;
		border-radius: 0;
		border-top-right-radius: 4px;
		margin-left: -66px;
	}
}
/* Filtered format */
.filtered-filters,
.filtered-views {
	border: 0 !important;
}
.filtered-views,  .filtered-views-container {
	padding: 1rem 0 !important;
}
/* Misc */
.mr-2 {
	margin-right: .5rem !important;
}
#pfForm label {
	margin-right: 1rem;
}
/* Blog SMW form to create/edit and elements */
.createbox .smwfrom-inputwrapper {
    padding: 7px 10px;
	background: #eee;
    border-radius: 5px;
	margin-bottom: 15px;
}
.createbox .blogfrom-info {
    padding: 0px 10px;
}
.createbox .editOptions {
	padding: 10px;
	border: 1px solid #bbb;
	background: #eee
}
.createbox ul.fancytree-container {
	font-family: inherit;
	font-size: 1em;
	border-radius: 3px;
    border: 1px solid #BBB;
}
.createbox span.fancytree-node {
	min-height: 25px;
}


/* ################################################# Copiki & mib additional designs ################################################# */

/* Cutted mib Logo in background */
.mw-parser-output .bg-mibcutlogo {
	background-image: url(/copikiresources/images/mib_logo_cutted_white.svg) !important;
    background-position: bottom right 10%;
    background-repeat: no-repeat;
    background-size: 50%;
}

/* ################################################# WikiFarm additional styles ################################################# */

/* WikiFarm Wiki Message */
.mtn-wm-alert {
}
.mtn-wm-alert .title {
    font-weight: bold;
    font-size: 1.2em;
    margin-bottom: 4px;
}
.mtn-wm-alert .body {
}

#bs-personal-info .wikifarm-iconwrapper {
    color: #c31539;
}

/* ################################################# Custom additional styles ################################################# */

.flexbreak {
	flex-basis: 100%;
	height: 0;
}