@import url('https://fonts.googleapis.com/css2?family=Patua+One&display=swap');






/* *** REGUŁY DLA CAŁEJ SEKCJI 'CYMELIUM' *** */
/***************************************************************************************************/

*::selection { background: var(--main-color-45); color: #fff; }

body { font-size: 1rem; color: #707070; margin: 0; padding: 0; }

a { color: var(--main-color-100); text-decoration: none; transition: 0.33s; }
a:hover, a:focus { color: #000; }

h1, h2, h3, h4, h5, h6 { margin: 0; }

input, button, select { font-family: 'Kalam'; color: #444; }
input:focus-visible { outline: 2px solid var(--main-color-100); }

fieldset { border: 3px solid var(--main-color-70); border-radius: 8px; margin-bottom: 20px; background: #fff; }
fieldset legend { background: var(--main-color-25); border-radius: 5px; padding: 2px 8px; }


/* header */
/***************************/
#header {
	width: calc(100% - 324px);
	position: fixed;
	top: 0;
	left: 0;
	padding: 8px 12px 8px 312px;
	background: rgba(255,255,255,1);
	box-shadow: 0 0 26px rgb(0 0 0 / 33%);
	font-family: Arial;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-left: 1px solid #eaeaea;
	z-index: 100;
}
#header h3 { font-size: 14px; margin-top: 10px; }
#header ul { list-style: none; margin: 0; padding: 0; }
#header ul li { display: inline; margin-right: 12px; }

#header ul.menu-smaller li { font-size: 12px; margin-right: 6px; opacity: 0.5; }

/* hotfix dla stron SP Page Buildera */
body.com_sppagebuilder #header { width: 100%; }


/* layout dla głównego contentu */
/***************************/
#left-panel {
	width: 300px;
	height: 100%;
	position: fixed;
	top: 0; 
	left: 0;
	box-shadow: 0 0 26px rgba(0, 0, 0, 0.33);
	padding: 0;
	/* background-size: 300px auto; */
	/* background-repeat: no-repeat; */
	transition: 0.5s;
	z-index: 150;
}
#main-content {
	width: calc(100% - 350px);
	margin: 110px 0 0 330px;
	min-height: calc(100vh - 150px);
}
/* wszędzie poza stroną główną (z animacją) */
/* body:not(.itemid-103) #main-content { margin-top: 38px; } */

#main-content #component { max-width: 1000px; }


/* logo */
/***************************/
#left-panel a.logo {
	height: 128px;
	display: block;
	background-color: #fff;
	border-bottom: 2px dotted rgba(0, 0, 0, 0.2);
	position: relative;
}
#left-panel a.logo h1 {
	font-size: 32px;
	font-weight: 300;
	color: #ccc;
	position: absolute;
	top: 80px;
	left: 24px;
	text-shadow: 1px 1px 2px #fff, -1px -1px 2px #fff, -1px 1px 2px #fff, 1px -1px 2px #fff;
	transition: 0.45s;
}
#left-panel a.logo:hover h1 {
	color: rgba(0, 0, 0, 0.5);
	text-shadow:
		1px 1px 2px var(--main-color-45),
		-1px -1px 2px var(--main-color-45),
		-1px 1px 2px var(--main-color-45),
		1px -1px 2px var(--main-color-45);
}
#left-panel a.logo h2 {
	font-size: 16px;
	font-weight: 400;
	color: transparent;
	padding: 2px 8px;
	transition: 2.2s linear;
}
#left-panel a.logo:hover h2 { color: var(--main-color-100); transition: 0.38s; }
#left-panel a.logo h2::selection { background: transparent; color: transparent; }


/* menu artykułów (lewa kolumna) */
/***************************/
#left-panel ul.category-module {
	width: calc(90% - 12px - 12px);
	height: 300px;
	max-height: 100%;
	margin: 0 12px;
	padding: 0;
	border: 1px dotted rgba(0, 0, 0, 0.2);
	overflow: auto;
	background:	rgba(255, 255, 255, 0.5);
	list-style: none;
}
#left-panel ul.category-module li { padding: 0; }
#left-panel ul.category-module li a {
	width: calc(100% - 16px);
	display: block;
	font-size: 16px;
	padding: 8px 0 8px 12px;
	line-height: 2ex;
	color: rgba(0, 0, 0, 0.46);
	border: 1px dotted transparent;
	border-left: none;
	border-right: none;
	transition: 0.3s;
}
#left-panel ul.category-module li a:hover {
	background: rgba(255, 255, 255, 0.6);
	border: 1px dotted rgba(0, 0, 0, 0.2);
	border-left: none;
	border-right: none;
}
#left-panel ul.category-module li:first-of-type a { border-top: 0; }
#left-panel ul.category-module li:last-of-type a { border-bottom: 0; }

#left-panel .custom.menu-label { padding: 0 13px; }
#left-panel .custom.menu-label p {
	display: inline-block;
	margin: 12px 0;
	font-weight: 400;
	color: rgba(0,0,0,0.4);
	position: relative;
	font-size: 24px;
}

#left-panel .custom.my-hr {
	width: 100%;
	height: 30px;
	margin: 18px 0;
	background-image: url('/images/cymelium/menu-border.png');
	background-size: auto 100%;
	opacity: 0.36;
}


/* artykuły na stronie głównej */
/***************************/

/* główny wygląd */
/* .article { max-width: 1000px; } */
.article .content { background: rgba(0, 0, 0, 0.036); border: 6px dotted rgba(0, 0, 0, 0.12); border-radius: 28px; padding: 20px; text-align: justify; position: relative; margin: 12px 0 40px 0; }
.article .content .article-preview { padding: 14px; background: rgba(0,0,0,0.1); color: #525252; border-radius: 12px; margin-top: 20px; position: relative; }
.article .content .article-preview p { display: inline; }

.article .content .article-preview:before,  .article .content .article-preview:after
	{ display: block; position: absolute; font-size: 70px; color: var(--main-color-100); }
.article .content .article-preview:before { content: '“'; top: -25px; left: 25px; }
.article .content .article-preview:after  { content: '”'; bottom: -84px; right: 25px; }

/* tytuł z paseczkami */
.article .page-header h2 a { position: relative; padding: 0 10px; transition: 1.2s; z-index: 10; }
.article .page-header h2 a:hover,  .article .page-header h2 a:focus { color: #fff;  }
.article .page-header h2 a:before
	{ content: ''; display: block; width: 0; height: 100%; position: absolute; top: 0; left: 0; border-radius: 4px; transition: 1.2s; z-index: -1;
		background: repeating-linear-gradient(120deg, var(--main-color-50) 0 8px, var(--main-color-70) 9px 17px, var(--main-color-50) 18px); }
.article .page-header h2 a:hover:before,  .article .page-header h2 a:focus:before { width: 100%; }

/* gustowne zawijaski */
.article .content:before,
.article .content:after
	{ content: ''; display: block; position: absolute; background-size: 100% auto; background-repeat: no-repeat; }
.article .content:before { width: 260px; height: 72px; top: -16px; left: -18px;
	background-image: url('/images/cymelium/comment-left-top-border.png'); }
.article .content:after { width: 60px; height: 60px; bottom: -14px; right: -14px;
	background-image: url('/images/cymelium/comment-right-bottom-border.png'); }
	
.article .createdby { text-align: right; color: #ddd; position: relative; }
.article .createdby span { position: absolute; right: 120px; }
.article .createdby span:before { content: 'autor: '; }
.article .createdby span::selection { background: transparent; color: inherit; }


/* paginacja */
/***************************/
.tooltip { display: none!important; }

.pagination {}
.pagination ul { list-style: none; margin: 0 0 12px 0; padding: 0; }
.pagination ul li { display: inline-block; margin-bottom: 11px; }
.pagination ul li span,  .pagination ul li a { padding: 2px 8px 0 8px; border-radius: 3px; }
.pagination ul li span { color: #ccc; border: 1px solid #ccc; }
.pagination ul li a { border: 1px solid var(--main-color-100); }
.pagination ul li a:hover { color: var(--main-color-100); background: var(--main-color-25); }


/* filtry */
#adminForm .filters { border: 0; border-bottom: 2px solid var(--main-color-60); }




/* gustowna animacja na górze strony */
/***************************/
.cymelium-landing { height: calc(100vh - 40px); }
.cymelium-landing .flexible-container h2 { font-family: "Patua One"; }

/* wyłączenie animacji (w panelu się nie da) */
.view-article .cymelium-landing { display: none; }



/* podstrona szukajki */
.s-szukajka-wrapper { width: 400px; max-width: 100%; display: flex; margin: 0 0 20px 0; }
.s-szukajka-wrapper #search-searchword {
	border: 1px solid #aaa; border-top-left-radius: 8px; border-bottom-left-radius: 8px;
	padding: 12px 20px; margin: 0;
}
.s-szukajka-wrapper button {
	border: 1px solid #aaa; border-top-right-radius: 8px; border-bottom-right-radius: 8px; border-left: 0;
	background: var(--main-color-25); color: var(--main-color-80); font-size: 1.2rem; font-weight: 500;
	padding: 12px 18px;
	cursor: pointer; transition: 0.4s;
}
.s-szukajka-wrapper button:hover { background: var(--main-color-45); color: var(--main-color-100); }



/* absolutnie niezbędna jednorożcowa funkcjonalność */
img.unicorn { position: fixed; z-index: 12345678; }

@-webkit-keyframes unicorn-running {
  0% { left: -250px; }
  100% { left: calc(100vw + 250px); }
}

@keyframes unicorn-running {
  0% { left: -250px; }
  100% { left: calc(100vw + 250px); }
}




/* *** REGUŁY MOBILNE *** */
/***************************************************************************************************/

/* mobile toggler */
#mobile-menu-toggler { display: none; }
#mobile-menu-toggler { width: 40px; height: 130px; border: 0; background: transparent; padding: 0; position: absolute; top: 0; right: 0; }
#mobile-menu-toggler div { width: 28px; height: 24px; padding: 6px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; cursor: pointer; }
#mobile-menu-toggler div span { width: 100%; height: 3px; display: block; background: rgba(0,0,0,0.33); }
@media (max-width: 767px) {
	#mobile-menu-toggler { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: center; }
	
	#left-panel { left: -260px; background-color: #fff; }
	#left-panel.toggled-out { left: 0; }
	
	#header { width: calc(100% - 64px); padding: 8px 12px 8px 52px; }
  
	#main-content { width: calc(100% - 90px); margin-left: 70px; }
}

/* tabela w liście opowiadań */
/***************************/
@media (max-width: 575px) {
	.itemid-102 #categorylist_header_title, .itemid-102 #categorylist_header_hits { display: none; }
	.itemid-102 table td { width: 100%; display: block; padding: 0 8px; }
	.itemid-102 table tr { display: block; border-radius: 6px; margin-bottom: 6px; }
	.itemid-102 table tr.cat-list-row0 { background: rgba(0,0,0,0.0666); }
	.itemid-102 table tr.cat-list-row1 { background: var(--main-color-25); }
}




/* *** NOCNA SKÓRKA *** */
/***************************************************************************************************/

/* przycisk - efekty wizualne */
#btn-dark-theme:hover { transform: rotate(180deg); }

/* przycisk - ciemna skórka */
body.olo-sss-dark-theme #btn-dark-theme img { filter: invert(1); }


/* * ELEMENTY GŁÓWNE * */
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
body.olo-sss-dark-theme *::selection { background: var(--main-color-45); color: #bbb; }

body.olo-sss-dark-theme { color: #8a8a8a; }

body.olo-sss-dark-theme a:hover,
body.olo-sss-dark-theme a:focus
	{ color: #ccc; }


/* * ELEMENTY SZCZEGÓŁOWE  * */
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
body.olo-sss-dark-theme #header { background: #000; box-shadow: 0 0 3px rgba(255,255,255, 0.5); }

body.olo-sss-dark-theme .cymelium-landing .flexible-container h2 { color: rgba(255,255,255, 0.5); }
body.olo-sss-dark-theme .cymelium-landing .flexible-container h2.from.bottom .cymelium { -webkit-text-stroke: 0; }

body.olo-sss-dark-theme #left-panel { background-color: #000; box-shadow: 0 0 3px rgba(255,255,255, 0.5); }
body.olo-sss-dark-theme #left-panel a.logo { background-color: #000; border-color: #fff; filter: brightness(0.8); }
body.olo-sss-dark-theme #left-panel a.logo h1 { text-shadow: 1px 1px 2px #000, -1px -1px 2px #000, -1px 1px 2px #000, 1px -1px 2px #000; }
body.olo-sss-dark-theme #left-panel a.logo:hover h1
	{ color: rgba(255,255,255, 0.4); text-shadow: 1px 1px 2px var(--main-color-60), -1px -1px 2px var(--main-color-60), -1px 1px 2px var(--main-color-60), 1px -1px 2px var(--main-color-60); }
body.olo-sss-dark-theme #left-panel .custom.menu-label p { color: rgba(255,255,255,0.5); }
body.olo-sss-dark-theme #left-panel .custom.my-hr { filter: invert(1); }

body.olo-sss-dark-theme #mobile-menu-toggler div span { background: rgba(255,255,255,0.82); }

body.olo-sss-dark-theme .article .content { background: rgba(255,255,255, 0.07); border: 6px dotted rgba(255,255,255, 0.18); }
body.olo-sss-dark-theme .article .content .article-preview { background: rgba(255,255,255,0.12); color: #8a8a8a; }
body.olo-sss-dark-theme .article .createdby { color: #484848; }

body.olo-sss-dark-theme input,
body.olo-sss-dark-theme button,
body.olo-sss-dark-theme select
	{ background: #000; color: #eee; }

/* wersja przycisku "szukaj" TYLKO dla nocnej wersji */
body.olo-sss-dark-theme .s-szukajka-wrapper button { position: relative; }
body.olo-sss-dark-theme .s-szukajka-wrapper button:before,
body.olo-sss-dark-theme .s-szukajka-wrapper button:after {
	content: '';
	width: 22px; height: 22px; display: block; position: absolute; top: calc(50% - 11px); right: 30px;
	background: #000; border: 1px solid #aaa; border-radius: 50%;
	transition: 0.4s; z-index: -1;
}
body.olo-sss-dark-theme .s-szukajka-wrapper button:hover { background: #000; color: #fff; }
body.olo-sss-dark-theme .s-szukajka-wrapper button:hover:before { right: -36px; }
body.olo-sss-dark-theme .s-szukajka-wrapper button:hover:after { right: -72px; }

body.olo-sss-dark-theme fieldset { background: transparent; }
body.olo-sss-dark-theme fieldset legend { background: var(--main-color-45); color: #ccc; }

/* mroczne jednorożce */
body.olo-sss-dark-theme img.unicorn { filter: invert(1); }




/* hotfixy */
#categorylist_header_author, .list-author { display: none; }