:root {
	--black: #000000;
	--blue-light: #ddecff;
	--primary-light: #4ca2ff;
	--primary-dark: #222;
	--secondary-light: #ccc;
	--green-light: #ddffdd;
	--gray-light: #e9ecef;
	--pink-light: #ffdddd;
	--red-dark: #bb2f2f;
	--darkred: #8b0000;
	--tomato: #ff6347;
	--yellow-light: #fff3cc;
	--ratio: 1.5;
}

/* HTML **************************************************************************************** */
html {
	background-color: #000;
	font-size: calc(14px + 0.29vw);
}
article {
	overflow: auto;
	padding-top: 1.5rem;
	padding-bottom: 1.5rem;
	border-bottom: 1px solid #ccc;
}
audio {
	width: 100%;
	background: #e9e9e9;
	height: 2.25rem;
	padding: .25rem;
	-webkit-border-radius: 5px;
	   -moz-border-radius: 5px;
	        border-radius: 5px;
	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.15);
}
audio:focus {
	background: #e0e0e0;
    outline: none;
}
.code {
	color: var(--bs-pink);
}
fieldset {
	width: 90%;
	max-width: 640px;
	padding: 1rem;
	margin: 0 auto;
	border: 1px solid #ccc;
}
legend {
	all: revert; /* reset from bootstrap 5 */
}
figure.boxed {
	display: inline-block;
	box-sizing: border-box;
	border: 1px solid #ddd;
	-webkit-border-radius: 2px;
	   -moz-border-radius: 2px;
	        border-radius: 2px;
	padding: .5rem .25rem;
	margin-bottom: 1.5rem;
	box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.1);
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
	font-family: "Roboto", sans-serif;
}
h1, .h1 { font-size: calc(1.65rem + 1.65vw); }
h2, .h2 { font-size: calc(1.4rem + 1.4vw); }
h3, .h3 { font-size: calc(1.2rem + 1.2vw); }
h4, .h4 { font-size: calc(1rem + 1vw); }
h5, .h5 { font-size: calc(.9rem + .9vw); }
h6, .h6  {
	font-weight: bold;
	line-height: 1.6rem;
	margin-bottom: 0;
}
h1 a, h2 a, h3 a, h1 a:hover, h2 a:hover, h3 a:hover {
	text-decoration: none;
}
header { /* header_background */
	background: rgba(0,0,0,1);
}
header, .search .form-control, .search .btn {
	font-size: 1.1rem;
}
img {
	max-width: 100%;
	height: auto;
}
label {
	margin-bottom: .1rem;
}
ul {
	margin-bottom: 2rem;
}
.content ul {
	padding-left: 1rem;
}
li {
	line-height: 1.3rem;
	margin-bottom: .6rem;
}
main .container {
	padding: 1rem 1rem 1.6rem;
}
main > .container {
	padding: 1rem .8rem 1.6rem;
}
small, .small {
  line-height: 1.5em;
}
textarea {
	width: 100%;
}
th {
	white-space: nowrap;
	vertical-align: middle !important;	
}

td input[type=checkbox], div input[type=checkbox] {
	vertical-align: middle;
}
::-webkit-input-placeholder { opacity: .4 !important; }
::-ms-input-placeholder { opacity: .4 !important; }
::placeholder { opacity: .4 !important; }
a {
  color: #69f;
  text-decoration: none;
  background-color: transparent;
}
a:hover {
  color: #007bff;
  text-decoration: underline;
}

/* Layout ************************************************************************************** */
.top-wrap {
	padding-top: 60px;
	vertical-align: middle;
}
.top-wrap a {
	color: #fff;
	white-space: nowrap;
	margin-right: .25rem;
}
@media screen and (max-width: 576px) {
	.top-wrap {
		padding-top: 11px;
	}
}
footer { /* footer_background, footer_text_color */
	background-color: rgba(34,34,34,1);
	color: rgba(233,236,239,1);
}
footer a { /* footer_text_color */
	color: rgba(233,236,239,1);
}
footer a:hover { /* footer_text_color */
	opacity: .7;
}
.footer_icon img {
	width: 32px;
	margin: 0 .5rem 1.2rem 0;
}
.footer-copyright {  /* subfooter_background */
	background: rgba(0,0,0,1);
	color: #d6d6d6;
}
.footer-copyright span {
	display: inline-block;
	margin: 0 .2em;
}

@media (max-width: 575.99px) {
	.logo, .search {
		display: none;
	}
	footer .container .row .col-sm-4 {
		border-top: 1px solid #999;
	}
	#pages-newpage {
		padding-left: 20px !important;
	}
}

@media (max-width: 767.99px) {
	.login-link {
		display: none;
	}
	footer .container .row .col-sm-4 {
		overflow: hidden;
	}
}

/* Logo */
.logo, .logo a, div.logo div.h1 a {
	font-weight: 300;
	font-size: 2rem;
	letter-spacing: 2px;
	line-height: 1.5rem;
	color: #fff !important;
	vertical-align: middle;
}
.logo a:hover {
	text-decoration: none;
	color: #ddd !important;
}
.logo a img, .adm_logo a img {
	max-width: 100% !important;
	max-height: 96px;
}

.adm_logo a img {
	border: 1px solid #ddd;
	background-color: #333;
}

/* Menus *************************************************************************************** */
a.navbar-brand {
	width: 70%;
	height: 43px;
	font-weight: 300;
	font-size: 1.8rem;
	padding: 0;
	margin: 0;
}
a.navbar-brand img {
	max-width: 100%;
	max-height: 100%;
}
a.navbar-brand:hover {
	text-decoration: none;
}
@media (min-width: 576px) {
	a.navbar-brand {
		display: none;
	}
}
.navbar-toggler { /* topmenu color from style_colors.conf.php */
	/* margin-right: 1rem; */
}
.navbar { /* menu_background_dt, menu_background_mb, topmenu */
	background: rgba(33,37,41,1);
}

div ul.nav {
	border-radius: 0 0 4px 4px;
}
div ul.topmenu li {
	margin: 0;
	padding: 0;
}
.topmenu {
	font-size: 1.1rem;
}
li.not-publ > a.dropdown-item {
	font-style: italic;
	opacity: .65;
}
.dropdown-item {
	text-transform: uppercase;
	letter-spacing: .04rem;
}
.dropdown-item:hover, .dropdown-item:focus {
	background-color: rgba(127,127,127,.1);
	opacity: 1 !important;
	text-decoration: none;
}
.dropdown-item.active, .dropdown-item:active {
	color: rgba(63,127,255,.75);
	background-color: rgba(127,127,127,.25);
	opacity: .75 !important;
}

@media (max-width: 576px) {
	.navbar {
		height: 58px;
	}
	li.nav-item a {
		padding: .6rem .45rem .45rem .45rem !important;
	}
}
@media (min-width: 576px) and (max-width: 992px) {	
	.navbar {
		height: 60px;
	}
}
@media (max-width: 992px) {	
	div ul.nav {
		background: rgba(255,255,255,1);
	}
	div ul.nav a {
		color: rgba(0,0,0,.8) !important;
	}
	div ul.nav a.active, div ul.nav a:active {
		color: rgba(63,127,255,.75) !important;
	}
	.topmenu {
		margin-top: .5rem;
		box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	}
	li.nav-item a {
		padding: .5rem .45rem .45rem .45rem !important;
	}
	/* Size of dropdown menu items */
	.dropdown-menu li a {
		font-size: 95%;
	}
}
@media (min-width: 992px) {
	.navbar {
		height: 60px;
	}
	.topmenu>li>a.dropdown-item:hover, .topmenu>li>a.dropdown-item:focus {
		background-color: transparent;
	}
	.navbar-nav:not(.sm-collapsible) .dropdown-item {
		padding-right: 1.3em;
		padding-left: .6em;
	}
	
	/* Changes of smartmenus */
	.navbar-nav:not(.sm-collapsible) .dropdown-item.has-submenu {
		padding-right: 1.3em;
		padding-left: .6em;
	}
	.navbar-nav:not(.sm-collapsible) .dropdown-item .sub-arrow,
	.navbar-nav:not(.sm-collapsible):not([data-sm-skip]) .dropdown-menu .dropdown-toggle::after {
		margin-right: .4em;
	}
	/* ***** */
	
	.topmenu>li>a.dropdown-item.active, .topmenu>li>a.dropdown-item:active {
		background-color: rgba(127,127,127,.25);
		border-radius: 3px;	
	}
	/* Horizontal space between top menu items */
	.topmenu>li {
		margin-right: .3em !important;
	}
	/* Size and vertical space of dropdown menu items */
	.dropdown-menu li a {
		font-size: 90%;
		padding-top: .25rem;
		padding-bottom: .25rem;
		padding-left: .9rem !important;
		padding-right: 1.6rem !important;
	}
}

/* Submenu */
.submenu-div {
	max-width: 100%;
	overflow: hidden;
	margin: 0 auto .5rem;
	font-size: 90%;
	text-transform: uppercase;
	letter-spacing: .05rem;
	-webkit-border-radius: 3px;
	   -moz-border-radius: 3px;
	        border-radius: 3px;
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);	
}
div.submenu-div div {
	border-top: 1px solid #999;
}
div.submenu-div > div:first-child {
	border: 0;
}
.submenu-div a { /* submenu_background submenu */
	display: block;
	background: rgba(52,58,64,1);
	padding: .6rem .4rem;
	color: #aaa;
}
.submenu-div a:hover {
	text-decoration: none;
	background-color: #666;
	color: #eee;
}
.submenu-div a:active {
	position: relative;
	top: 1px;
}
.submenu-div a.current {
	color: #eee;
	background-color: #666;
}
.submenu-div div a.not-publ {
	font-style: italic;
}

.tiles a figure.not-publ {
	opacity: .35 !important;
	font-style: italic;
}

/* Bootstrap overrides ************************************************************************* */
.btn-primary:focus,   .btn-primary.focus   { box-shadow: none; }
.btn-secondary:focus, .btn-secondary.focus { box-shadow: none; }
.btn-success:focus,   .btn-success.focus   { box-shadow: none; }
.btn-danger:focus,    .btn-danger.focus    { box-shadow: none; }
.btn-warning:focus,   .btn-warning.focus   { box-shadow: none; }
.btn-info:focus,      .btn-info.focus      { box-shadow: none; }
.btn-light:focus,     .btn-light.focus     { box-shadow: none; }
.btn-dark:focus,      .btn-dark.focus      { box-shadow: none; }
.btn-link:focus,      .btn-link.focus      { box-shadow: none; }

.carousel-container {
	margin: 0 auto;
	max-width: 1600px;
}
@media screen and (max-width: 576px) {
	.carousel-container {
		margin-top: 0;
	}
}
.carousel img {
	width: 100%;
}
.carousel-caption {
	background: #000;
	-webkit-border-radius: 2px;
	   -moz-border-radius: 2px;
	        border-radius: 2px;
	opacity: .35;
}
.carousel-caption h1, .carousel-caption h2 {
	font-size: calc(1rem + 2vw);
}
.carousel-caption h1, .carousel-caption h2, .carousel-caption h3, .carousel-caption p {
	margin-bottom: 0;
}
.carousel-caption {
	right: .5rem;
	left: .5rem;
	bottom: .5rem;
	padding: 0 .25rem .125rem .25rem;
	font-size: 80%;
}
.carousel-caption a:hover {
	text-decoration: none;
}
.carousel-indicators {
	margin: 0;
	padding: 0;
}
.clearfix::after {
	display: block;
	clear: both;
	content: "X";
	visibility: hidden;
	height: 0;
}
ul.slide-list {
	list-style-type: none;
}
figure {
	margin: 0;
}
input[type=text].small {
	font-size: 90%;
}
.lead {
font-size: 1.2rem;
font-weight: 400;
}
.rounded {
	border-radius: 0.2rem !important;
}
small, .small {
  font-size: 0.75rem !important;
}
.table .table-dark th a {
	color: #fff;
}

/* Custom ************************************************************************************** */
#adv {
	padding: .5rem 1rem 1rem;
	border: 1px solid #ddd;
	margin-bottom: 1rem;
}
#advanced, #advanced2 {
	color: #007bff;
	cursor: pointer;
	margin: .5rem 0;
	font-size: 1.1rem;
}
#advanced:hover, #advanced2:hover {
	text-decoration: underline;
}

/* Arrows with css */
i.arrow {
    border: solid #ccc;
    border-width: 0 2px 2px 0;
    display: inline-block;
    padding: 2px;
    margin-right: .4rem;
}
.up {
    transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg);
}
.down {
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
}

/* Barker */
.barker {
	border-radius: 4px; /* should be same as barker-image */
	margin: 0 .25rem 1.5rem;
	/* box-shadow: 0 1px 6px -1px rgba(0, 0, 0, 0.4); */
}
.barker-image {
	border-radius: 4px 4px 0 0; /* should be same as barker */
	position: relative;
	width: 100%;
	padding-bottom: 50%; /* default, same as height of the barker image */
}
.barker-image .page-image, .barker-image .image-area, .barker-image .image-area-empty {
	position: absolute;
	width: 100%;
	height: 100%;
	overflow: hidden;
	border-radius: 4px 4px 0 0; /* should be same as barker */
}
.barker-image .page-image img, .barker-image .image-area img {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
@media screen and (min-width: 768px) and (max-width: 992px) {
	.barker h2 { font-size: 1.25rem; }
	.barker h3 { font-size: 1rem; }
	.barker p  { font-size: .8rem; }
}
@media screen and (min-width: 992px) and (max-width: 1200px) {
	.barker h2 { font-size: 1.5rem; }
	.barker h3 { font-size: 1.25rem; }
	.barker p  { font-size: .9rem; }
}
@media screen and (min-width: 1200px) {
	.barker h2 { font-size: 1.75rem; }
	.barker h3 { font-size: 1.5rem; }
	.barker p  { font-size: 1rem; }
}
/*
@media screen and (max-width: 991.99px) and (min-width: 768px) {
	.barker h2 { font-size: 1.5rem; }
	.barker h3 { font-size: 1.25rem; }
}
*/
.barker .content, .barker .content h2, .barker .content h3, .barker .content p {
	padding: 0;
	margin: 0;
}
.barker .content {
	color: #666;
	/* padding: .5rem; */
	padding-top: .5rem;
	padding-bottom: .5rem;
}
.barker a:hover, .barker a:hover .content {
	color: var(--bs-primary);
	text-decoration: none;
}

/* Base */
.base {
	padding: 1rem 0;
	margin: 0 auto;
	text-align: center;
}
.base input, .base button {
	margin: 4px 2px;
}
.base img {
	margin: 0 4px 2px 0;
}

.big {
	font-size: 1.5rem;
}

/* Backgrounds */
.bg-black {
	background-color: #000 !important;
}
.bg-white {
	background-color: #fff !important;
}
.bg-blue-light {
	background-color: var(--blue-light) !important;
}
.bg-gray-dark {
	background-color: var(--bs-gray-dark) !important;
}
.bg-gray-light {
	background-color: var(--gray-light) !important;
}
.bg-gray {
	background-color: var(--bs-gray) !important;
}
.bg-green-light {
	background-color: var(--green-light) !important;
}
.bg-pink-light {
	background-color: var(--pink-light) !important;
}
.bg-secondary-light {
	background-color: var(--secondary-light) !important;
}
.bg-tomato {
	background-color: var(--tomato) !important;
}
.bg-yellow {
	background-color: var(--bs-yellow) !important;
}
.bg-yellow-light {
	background-color: var(--yellow-light) !important;
}

.break-all {
	word-break: break-all;
}
.center {
	display: flex;
	justify-content: center;
	align-items: center;
}
#cookie_prompter {
	position: sticky;
	bottom: 0;
	color: #fff;
	text-align: center;
	background-color: #333333 !important;
	padding: 16px 0 10px 0;
	opacity: .9;
}
.copyright {
	text-align: center;
	padding: .5rem 0;
}
.copyright a {
	position: relative;
	top: .04rem;
}
.copyright a:hover {
	color: #000;
	text-decoration: none;
}
.debug {
	padding: 1rem;
	background-color: var(--bs-yellow) !important;
	overflow: auto;
	border: 5px solid #000;
	clear: both;
}
.dimmed {
	opacity: .5;
}
.light {
	opacity: .65;
}

table.emails_import th, table.emails_import td {
	padding: 2px;
}

/* Emoji */
.emoji-smiley { font-size: 130%; filter: opacity(.5) !important; }
.emoji        { font-size: 160%; }
@media screen and (max-width: 575.99px) {
	.emoji { font-size: 130%; }
}
.emoji:hover  { font-size: 170%; }
.emoji, .emoji-smiley {
	filter: drop-shadow(0px 2px 3px #bbb);
	line-height: 20px;
}
.emoji:hover, .emoji-smiley:hover {
	opacity: .75;
	cursor: pointer;
	filter: drop-shadow(0px 2px 2px #777);
}

.extra-small {
	font-size: .7rem;
	opacity: .75;
}
.even {
	background-color: #ddd;
}

.hit-display {
	color: #999;
	font-size: small;
	margin-bottom: .3rem;
}

.l-box {
	float: left;
	margin: 0 20px 0 0;
	max-width: 50%;
	overflow: hidden;
}
.r-box {
	float: right;
	margin: 0 0 0 20px;
	max-width: calc(50% - 20px);
	overflow: hidden;
}

.lightbox-image {
	cursor: pointer;
}

/* Lying bar */
.lying_bar {
	font-size: smaller;
	line-height: .9rem;
	margin-bottom: 2px;
}
.lying_bar .graph {
	float: left;
	padding-left: 3px;
	color: #fff;
	cursor: default;
}
.lying_bar .visits {
	background-color: #0066ff;
}
.lying_bar .likes {
	background-color: #0099ff;
}
.lying_bar .num {
	width: 5%;
	float: left;
	padding-left: 3px;
}

p.slalom {
	clear: both;
	margin-bottom: 2rem;
}
p.slalom img {
	max-width: 50%;
	margin: 0 1rem 2rem;
}

/* Table drag and drop */
.myDragClass {
	background-color: var(--yellow-light) !important;
	color: #f00;
}
td.myDragHandle {
	width: 64px;
	padding: 8px 10px 10px;
	text-align: center;
}
.myDragHandle, .dragHandle {
	cursor: pointer;
}
.myDragHandle img, .dragHandle img {
	border: 1px solid #ddd;
	border-radius: 4px;
}

.p-center {
	text-align: center;
}
.p-center p, .p-center div {
	display: inline-block; text-align: left;
}
ul.no_bullets {
	list-style-type: none;
} 
.obl {
	color: #d30;
}
.odd {
	background-color: #eee;
}

/* page image */
.page-image {
	position: relative;
	margin-bottom: 1rem;
}
.page-image img {
	width: 100%;
	height: auto;
}
.page-image-text {
	position: absolute;
	bottom: 4px;
	right: 4px;
	text-align: right;
	font-size: 70%;
	line-height: 95%;
	color: #333;
	opacity: .4;
	border-radius: 2px;
	padding: 0 2px;
	background: #fff;
}

.pagesize-form {
	 width: 5rem;
	 margin: 0 0 .3rem auto;
}
#publ_btn img {
	width: 20px;
	height: auto;
}
p.red_dot::before {
	color: #f00;
	font-size: 1.8rem;
	position: relative;
	top: .2rem;
	left: -2px;
	line-height: .2rem;
	margin-right: 2px;
	content: '\002022'; /* bull */
}
.search .input-group {
	width: 100%;
}
.searchword {
	background-color: #ff3;
	color: #666;
}
.sparse {
	letter-spacing: .25rem;
}
span.spotify {
	background: url('/img/spotify.png') no-repeat 0 50%;
	padding: .1rem 0 .1rem 1.8rem;
}
ul.spotify-list {
	padding: 0;
}
ul.spotify-list li {
	background: url('/img/spotify.png') no-repeat 0 50%;
	list-style: none;
	padding: .2rem 2rem;
}
.text-underline {
	text-decoration: underline;
}
p.text-help::before, div.text-help::before {
	content: url('/img/info.png');
	margin-right: .5rem;
	/* filter: hue-rotate(-30deg); */
	vertical-align: top;
	float: left;
}
p.text-help, div.text-help {
	border: 1px solid var(--bs-primary);
	border-radius: 4px;
	margin: 1rem 0;
	color: var(--bs-primary);
	font-size: 80%;
	padding: 1rem 1rem 1.5rem;
}

/* Tiles */
.tile {
	display: inline-block;
	vertical-align: top;
	text-align: center;
	line-height: 1rem;
	font-size: .85rem;
	margin: 0 1rem;
}
.tile img {
	width: 100%;
	height: auto;
	margin-bottom: .5rem;	
}
div.tiles {
	padding: 0;
	margin: .75rem 0 1rem 0;
}
div.tiles .tile {
	margin-bottom: 1rem;
	border-radius: 4px;
	box-shadow: 0px 3px 8px 0px rgba(128, 128, 128, 0.4);
}
div.tiles .tile img {
	border-radius: 4px 4px 0 0;
	margin: 0;
}
div.tiles figure figcaption {
	padding: .5rem 3px;
	overflow: hidden;
	white-space: nowrap;
}
div.tiles a:hover figure figcaption {
	text-decoration: underline;
}
@media screen and (max-width: 575.99px) {
	.tile-xxl { width: calc((100% - 4rem) / 2); }
	.tile-xl  { width: calc((100% - 4rem) / 2); }
	.tile-lg  { width: calc((100% - 4rem) / 2); }
	.tile-md  { width: calc((100% - 6rem) / 3); }
	.tile-sm  { width: calc((100% - 8rem) / 4); }
}
@media screen and (min-width: 576px) and (max-width: 767.99px) {
	.tile-xxl { width: calc((100% - 4rem)  / 2); }
	.tile-xl  { width: calc((100% - 4rem)  / 2); }
	.tile-lg  { width: calc((100% - 6rem)  / 3); }
	.tile-md  { width: calc((100% - 8rem)  / 4); }
	.tile-sm  { width: calc((100% - 10rem) / 5); }
}
@media screen and (min-width: 768px) and (max-width: 991.99px) {
	.tile-xxl { width: calc((100% - 4rem)  / 2); }
	.tile-xl  { width: calc((100% - 6rem)  / 3); }
	.tile-lg  { width: calc((100% - 8rem)  / 4); }
	.tile-md  { width: calc((100% - 10rem) / 5); }
	.tile-sm  { width: calc((100% - 12rem) / 6); }
	.col-md-8 .tile-xxl { width: calc((100% - 4rem)  / 2); }
	.col-md-8 .tile-xl  { width: calc((100% - 4rem)  / 2); }
	.col-md-8 .tile-lg  { width: calc((100% - 6rem)  / 3); }
	.col-md-8 .tile-md  { width: calc((100% - 8rem)  / 4); } 
	.col-md-8 .tile-sm  { width: calc((100% - 10rem) / 5); }
}
@media screen and (min-width: 992px) and (max-width: 1199.99px) {
	.tile-xxl { width: calc((100% - 6rem)  / 3); }
	.tile-xl  { width: calc((100% - 8rem)  / 4); }
	.tile-lg  { width: calc((100% - 10rem) / 5); }
	.tile-md  { width: calc((100% - 12rem) / 6); }
	.tile-sm  { width: calc((100% - 14rem) / 7); }
	.col-md-8 .tile-xxl { width: calc((100% - 4rem)  / 2); }
	.col-md-8 .tile-xl  { width: calc((100% - 6rem)  / 3); }
	.col-md-8 .tile-lg  { width: calc((100% - 8rem)  / 4); }
	.col-md-8 .tile-md  { width: calc((100% - 10rem) / 5); }
	.col-md-8 .tile-sm  { width: calc((100% - 12rem) / 6); }
}
@media screen and (min-width: 1200px) {
	.tile-xxl { width: calc((100% - 8rem)  / 4); }
	.tile-xl  { width: calc((100% - 10rem) / 5); }
	.tile-lg  { width: calc((100% - 12rem) / 6); }
	.tile-md  { width: calc((100% - 14rem) / 7); }
	.tile-sm  { width: calc((100% - 16rem) / 8); }
	.col-md-8 .tile-xxl { width: calc((100% - 6rem)  / 3); }
	.col-md-8 .tile-xl  { width: calc((100% - 8rem)  / 4); }
	.col-md-8 .tile-lg  { width: calc((100% - 10rem) / 5); }
	.col-md-8 .tile-md  { width: calc((100% - 12rem) / 6); }
	.col-md-8 .tile-sm  { width: calc((100% - 14rem) / 7); }
}

/* Grid-List selector */
.grid-list-selector a img {
	margin: 0 0 .25rem .25rem;
}
.grid-list-selector a:hover {
	opacity: .65;
}
.grid-list-selector .dark {
	filter: invert(100%);
}

.trademark {
	font-size: 180%;
	vertical-align: middle;
	position: relative;
	left: .2rem;
}
.mylink:hover, .mylink.hover {
	display: block;
}

/* Tooltips - help_mode */
.tooltip {
	color: #fff;
	background: #333;
	position: absolute;
	z-index: 100;
	padding: 6px 9px 6px;
	font-size: .8rem;
}
/* triangle decoration */
.tooltip:after {
	width: 0;
	height: 0;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	border-top: 10px solid #333;
	content: '';
	position: absolute;
	left: 50%;
	bottom: -10px;
	margin-left: -10px;
}
.tooltip.top:after {
	border-top-color: transparent;
	border-bottom: 10px solid #333;
	top: -20px;
	bottom: auto;
}
.tooltip.left:after {
	left: 10px;
	margin: 0;
}
.tooltip.right:after {
	right: 10px;
	left: auto;
	margin: 0;
}

/* Width of one icon */
.w1 {
	width: 40px;
	margin: auto 0;
	white-space: nowrap;
	vertical-align: middle;
	padding: 0;
	text-align: center;
}
/* Width of one small icon */
.w1-sm {
	width: 20px;
}
.w1 a, .w1-sm a {
	color: var(--primary-light);
	padding: 0;
}
.w1 a:hover, .w1-sm a:hover {
	color: var(--bs-primary);
}
.w1 a.edit, .w1-sm a.edit {
	color: var(--primary-light);
	padding: 0;
}
.w1 a.delete, figure a.delete, .w1-sm a.delete {
	color: var(--tomato);
}
.w1 a.delete:hover, figure a.delete:hover, .w1-sm a.delete:hover {
	color: var(--bs-danger);
}


/* Responsive ************************************************************************************* */
@media screen and (max-width: 575.9999px) {
	/* xs */
	.min-xxl, .min-xl, .min-lg, .min-md, .min-sm { display: none; }
}
@media screen and (min-width: 576px) and (max-width: 767.9999px) {
	/* sm */
	.min-xxl, .min-xl, .min-lg, .min-md, .max-xs { display: none; }
}
@media screen and (min-width: 768px) and (max-width: 991.9999px) {
	/* md */
	.min-xxl, .min-xl, .min-lg, .max-sm, .max-xs { display: none; }
}
@media screen and (min-width: 992px) and (max-width: 1199.9999px) {
	/* lg */
	.min-xxl, .min-xl, .max-md, .max-sm, .max-xs { display: none; }
}
@media screen and (min-width: 1200px) and (max-width: 1399.9999px) {
	/* xl */
	.min-xxl, .max-lg, .max-md, .max-sm, .max-xs { display: none; }
}
@media screen and (min-width: 1400px) {
	/* xxl */
	.max-xl, .max-lg, .max-md, .max-sm, .max-xs  { display: none; }
	.container {
		width: 100%;
		max-width: 1600px;
	}
}

/* Mobile friendly ***************************************************************************** */

/* Numeric slider */
.num_slider {
	-webkit-appearance: none;
	width: 100%;
	height: 15px;
	border-radius: 5px;  
	background: #d3d3d3;
	outline: none;
	opacity: 0.7;
	-webkit-transition: .2s;
	transition: opacity .2s;
}
.num_slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 25px;
	height: 25px;
	border-radius: 50%; 
	background: #04AA6D;
	cursor: pointer;
}
.num_slider::-moz-range-thumb {
	width: 25px;
	height: 25px;
	border-radius: 50%;
	background: #04AA6D;
	cursor: pointer;
}

/* Boolean switch */
.switch {
	position: relative;
	display: inline-block;
	width: 60px;
	height: 34px;
}
.switch input {
	opacity: 0;
	width: 0;
	height: 0;
}
.switch_slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #ccc;
	-webkit-transition: .4s;
	transition: .4s;
}
.switch_slider:before {
	position: absolute;
	content: "";
	height: 26px;
	width: 26px;
	left: 4px;
	bottom: 4px;
	background-color: white;
	-webkit-transition: .4s;
	transition: .4s;
}
input:checked + .switch_slider {
	background-color: #2196F3;
}
input:focus + .switch_slider {
	box-shadow: 0 0 1px #2196F3;
}
input:checked + .switch_slider:before {
	-webkit-transform: translateX(26px);
	-ms-transform: translateX(26px);
	transform: translateX(26px);
}
.switch_slider.round {
	border-radius: 34px;
}
.switch_slider.round:before {
	border-radius: 50%;
}

/* Modules ************************************************************************************* */

/* Audios */
.audio {
	margin-bottom: 2rem;
}
.audio ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}
.audio ul li {
	padding-bottom: 0;
	margin-bottom: 0;
}

/* Colorpicker */
#colorsample {
	display: inline-block;
	width: 3rem;
	line-height: 1.2rem;
	border: 1px solid #999;
	background-color: #ffffff;
}
a.colorpicker img {
	padding: .5rem;
	margin-bottom: .3rem;
}

/* Comments */
#comments {
	margin: 1.5rem 0 .5rem 0;
}
#comments .article {
	border: 1px solid #ccc;
	padding: 1rem;
	margin-top: 1rem; 
}

/* Content */
.content {
	word-wrap: break-word;
	margin-top: .5rem;
	margin-bottom: 1.5rem;
}
div.content h1 {
	word-wrap: normal;
	overflow: visible;
}
.mb-0 .content {
	margin-bottom: 0;
}
.content img {
	max-width: 100%;
	height: auto;
}

/* Crumbs */
.crumbs {
	font-size: .8rem;
	margin-bottom: .25rem;
	padding: .5rem 0 .5rem .1rem;
}

/* Disclosers */
.disclosers {
	margin-bottom: 1rem;
}
div.discloser_head, .sortable_thing div.discloser_head {
	margin-top: 4px;
}
div.discloser_head {
	background: #ebebeb;
	border-radius: .15rem;
	color: var(--bs-secondary);
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.25);
}
.discloser_head .up-down {
	margin: .1rem 0 0 0;
	line-height: 1.25rem;
}
.discloser_head i {
	margin: 0;
	padding: 0;
	display: inline-block;
}
.discloser_head div {
	overflow: hidden;
	white-space: nowrap;
}
.discloser_head .angle {
	color: var(--secondary-light);
	margin: .5rem 0;
}
.discloser_head:hover {
	cursor: pointer;
}
.discloser_head:active {
	position: relative;
	top: 1px;
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15) inset;
}
.discloser_head h4, .discloser_head .h4 {
	margin: .5rem 0 .4rem 0;
}
.discloser_head h4 img, .discloser_head .h4 img {
	width: 40px;
	margin-right: 10px;
}
.discloser_body {
	margin: 0;
	display: none;
}
.tpl-description.discloser_body img, .tpl-description.discloser_body.tpl_img {
	padding: .25rem;
	margin: 0 0 1.5rem 0;
	border-radius: 5px;
	box-shadow: 0px 3px 5px 0px #999999;
}

/* Headline */
.headline {
	padding-top: 0;
	padding-bottom: 1rem;
	margin-bottom: 1rem;
	border-bottom: 1px solid #ccc;
	overflow: auto;
}
.first_headline {
	border-top: 1px solid #ccc;
	padding-top: 1rem;
}
div.headline a {
	color: #000;
}
div.headline a:hover {
	text-decoration: none;
	color: var(--bs-primary);
}
div.headline:hover {
	opacity: .7;
}
.headline img {
	margin: .5rem 0 1rem;
}

/* Lightbox */
@keyframes fadeBg {
	from { background-color: transparent; }
	to   { background-color: rgba(0, 0, 0, 0.8); }
}
@keyframes openImg {
	from { opacity: 0; width: 0; }
	to   { opacity: 1; width: 80vh; }
}
.lightbox-wrapper {
	background-color: rgba(0, 0, 0, 0.8);
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: block;
	z-index: 99999;
	animation-name: fadeBg;
	animation-duration: .5s;
}
.lightbox-wrapper .lightbox-content {
	background-color:rgba(255, 255, 255, 0.9);
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	margin: 0 auto;
	padding: 10px;
	max-width: 100%;
	width: 80vh;
	display: block;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
	-webkit-transform: translateY(-50%);
	    -ms-transform: translateY(-50%);
	        transform: translateY(-50%);
	-webkit-border-radius: 4px;
	   -moz-border-radius: 4px;
	        border-radius: 4px;
	animation-name: openImg;
	animation-duration: .5s;
}
.lightbox-wrapper .lightbox-content .lightbox-close {
	background-image: url('/img/x.png');
	background-size: cover;
	background-repeat: no-repeat;
	position: absolute;
	top: 3px;
	right: 3px;
	height: 32px;
	width: 32px;
	display: block;
	cursor: pointer;
}
.lightbox-wrapper .lightbox-content img {
	height: auto;
	width: 100%;
	display: block;
}

/* Mailform */
div.mailform-success {
	display: inline-block;
	border: 2px solid #198754;
	-webkit-border-radius: 6px;
	   -moz-border-radius: 6px;
	        border-radius: 6px;
	padding: 1rem 1rem .8rem 1rem;
	background-color: #ddffdd;
	margin-bottom: 1rem;
}
div.mailform-success p {
	color: #000;
}
div.mailform-failure {
	display: inline-block;
	border: 2px solid #dc3545;
	-webkit-border-radius: 6px;
	   -moz-border-radius: 6px;
	        border-radius: 6px;
	padding: 1rem 1rem .8rem 1rem;
	background-color: #ffdddd;
	margin-bottom: 1rem;
}
div.mailform-failure p {
	color: #000;
}

/* Most liked and visits */
div.most-liked, div.most-visits {
	/*
	-webkit-border-radius: 3px;
	   -moz-border-radius: 3px;
	        border-radius: 3px;
	padding: .75rem;
	box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.5);
	*/
	margin-bottom: 1rem;
}

/* Orderform */
#orderform_text {
	padding: .8rem;
	margin-bottom: 1rem;
}
#orderform_text .content, #orderform_text .content p {
	margin-bottom: 0;
}

/* Paginator */
#swipe_paginator {
	position: relative;
	transition: all .5s;
}
ul.pagination {
	margin-bottom: 0;
}

/* Products */
.cat_img img, .grp_img img {
	max-width: 100%;
}
.product-images figure {
	width: 190px;
	height: calc(222px + 2rem);
	float: left;
	margin: 0 .5rem .5rem 0;
	padding: 0 .5rem 1rem .5rem;
	text-align: center;
	line-height: 1.2rem;
	font-size: .9rem;
}
.product-images figure img {
	margin-bottom: .5rem;
}

/* Sitemap */
.sitemap h2, .sitemap h3 {
	margin: .75rem 0 0;
}
.sitemap div {
	padding: 2px 0;
}
.sitemap a.not-publ {
	font-style: italic;
	opacity: .7;
}

/* Social-icons */
.social-icon {
	display: table;
	width: 55px;
	height: 55px;
	float: left;
	margin: 2px;
}
.social-icon > div {
	display: table-cell;
	vertical-align: middle;
	text-align: center;
	font-size: .7rem;
	line-height: 1rem;
}
.social-icon a {
	color: #999;
}
.social-icon a:hover {
	color: #fff;
	text-decoration: none;
}
.social-icon a.likes {
	color: #fff;
}
.social-icon a.like {
	color: #999;
}

/* Subscribe */
fieldset.subscribe {
	margin: 0;
}
legend.subscription {
	display: inline;
	width: auto;
	max-width: none;
	padding: 0 .3rem;
	margin-bottom: .3rem;
	font-size: 1rem;
	line-height: inherit;
	color: #999;
	white-space: normal;
}

/* Users */
div.user_image {
	padding-bottom: .5rem;
}
div.user_image img {
	border-radius: 6px;
	box-shadow: 0 2px 3px 0px #666666;
}
div.user_image a img:hover {
	opacity: .75;
}
div.user_info {
	padding-bottom: 1.5rem;
	line-height: 1.25rem;
	font-size: .9rem;
}
div.user_name {
	font-size: 1.3rem;
	padding-bottom: .5rem;
}
@media (max-width: 768px) {
	div.user_info {
		padding: .5rem;
		line-height: 1.3rem;
		font-size: 1rem;
	}
}
	

/* Video */
.video-container {
	clear: both;
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
}
.video-container iframe, .video-container object, .video-container embed, .video-container video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}
.video-description {
	padding: .75rem 0;
}

/* Admin *************************************************************************************** */
.ctlpanel .hor_1 .tile {
	height: 6rem;
	padding-top: 1rem;
}
ul.resp-tabs-list, p {
	padding-top: 1px;
}

.edit-area, .edit-area-empty, .image-area, .image-area-empty {
	border: 1px solid transparent;
}
.edit-form {
	text-align: center;
}
.edit-area .btn {
	visibility: hidden;
}
.edit-area:hover .btn {
	visibility: visible;
}
.edit-area:hover, .edit-area-empty:hover {
	border: 1px dashed #007bff;
}
.image-area:hover, .image-area-empty:hover {
	border: 1px dashed #28a745;
}
.page_info {
	max-width: 400px;
	margin: 1rem auto 0;
	padding: 1rem;
	border: 3px solid #000;
	border-radius: 10px;
	opacity: .8;
	background-color: var(--bs-warning);
}
.sortable_thing .row {
	margin-bottom: 4px;
}
.sortable_thing div.col a.not-publ, tr.not-publ td {
	font-style: italic;
	opacity: .7;
}
.sortable_wrapper {
	padding-right: .5rem;
}
.up-down {
	line-height: 1.25rem;
}
.up-down a:hover {
	color: #000;
}