:root {
	--custom-font-1: 'Abrushow';
	--custom-font-2: 'KaushanScript';
	--custom-font-3: 'BarlowCondensed';
	--bs-body-font-family: 'Nunito';
	--bs-body-font-size: 1.2rem;
}

/*
 * Override the width of the table set by Bootstrap content styles.
 * See: https://github.com/ckeditor/ckeditor5/issues/3253.
 */
.ck-content .table {
    width: auto;
}

/* CKEDITOR bar fix to display correctly in BS Modal too */
.ck.ck-reset.ck-editor.ck-rounded-corners .ck-editor__main .ck-editor__editable_inline {
	min-height: 100px;
	max-height: 75vh;
}
.ck {z-index: 9998 !important;}
.ck.ck-editor__top {
    z-index: 9999 !important;
    position: relative !important;
}

fill{ flex:1; }

@charset "UTF-8";

/* Fonts need to add in head too */
@font-face {
	font-family: --custom-font-1;
	src: url("/assets/fonts/Abrushow.woff2") format("woff2");
	font-display: swap;
}
@font-face {
	font-family: --custom-font-2;
	src: url("/assets/fonts/KaushanScript-Regular.woff2") format("woff2");
	font-display: swap;
}

/* =================================================================
   Barlow Condensed - Saját tárhelyről betöltött betűtípusok
   ================================================================= */

/* --- Regular (Normál) --- */
@font-face {
  font-family: --custom-font-3;
  src: url('/assets/fonts/barlow/BarlowCondensed-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* --- Italic (Dőlt) --- */
@font-face {
  font-family: --custom-font-3;
  src: url('/assets/fonts/barlow/BarlowCondensed-Italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* --- Thin (Vékony) --- */
@font-face {
  font-family: --custom-font-3;
  src: url('/assets/fonts/barlow/BarlowCondensed-Thin.woff2') format('woff2');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: --custom-font-3;
  src: url('/assets/fonts/barlow/BarlowCondensed-ThinItalic.woff2') format('woff2');
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}

/* --- ExtraLight --- */
@font-face {
  font-family: --custom-font-3;
  src: url('/assets/fonts/barlow/BarlowCondensed-ExtraLight.woff2') format('woff2');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: --custom-font-3;
  src: url('/assets/fonts/barlow/BarlowCondensed-ExtraLightItalic.woff2') format('woff2');
  font-weight: 200;
  font-style: italic;
  font-display: swap;
}

/* --- Light --- */
@font-face {
  font-family: --custom-font-3;
  src: url('/assets/fonts/barlow/BarlowCondensed-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: --custom-font-3;
  src: url('/assets/fonts/barlow/BarlowCondensed-LightItalic.woff2') format('woff2');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

/* --- Medium --- */
@font-face {
  font-family: --custom-font-3;
  src: url('/assets/fonts/barlow/BarlowCondensed-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: --custom-font-3;
  src: url('/assets/fonts/barlow/BarlowCondensed-MediumItalic.woff2') format('woff2');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

/* --- SemiBold --- */
@font-face {
  font-family: --custom-font-3;
  src: url('/assets/fonts/barlow/BarlowCondensed-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: --custom-font-3;
  src: url('/assets/fonts/barlow/BarlowCondensed-SemiBoldItalic.woff2') format('woff2');
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

/* --- Bold (Félkövér) --- */
@font-face {
  font-family: --custom-font-3;
  src: url('/assets/fonts/barlow/BarlowCondensed-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: --custom-font-3;
  src: url('/assets/fonts/barlow/BarlowCondensed-BoldItalic.woff2') format('woff2');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* --- ExtraBold --- */
@font-face {
  font-family: --custom-font-3;
  src: url('/assets/fonts/barlow/BarlowCondensed-ExtraBold.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: --custom-font-3;
  src: url('/assets/fonts/barlow/BarlowCondensed-ExtraBoldItalic.woff2') format('woff2');
  font-weight: 800;
  font-style: italic;
  font-display: swap;
}

/* --- Black (Nagyon vastag) --- */
@font-face {
  font-family: --custom-font-3;
  src: url('/assets/fonts/barlow/BarlowCondensed-Black.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: --custom-font-3;
  src: url('/assets/fonts/barlow/BarlowCondensed-BlackItalic.woff2') format('woff2');
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

.abrushow {
	font-family: --custom-font-1;
}

.kaushan-script {
	font-family: --custom-font-2;
}
.nunito {
	font-family: --bs-body-font-family;
}
.barlow {
	font-family: --custom-font-3;
}

img, svg {
    max-width: 100%;
    height: auto;
}


body {
	background-color: var(--bs-light);
	color: var(--bs-light);
	font-family: var(--bs-body-font-family);
	font-size: var(--bs-body-font-size);
	min-height: 100vh;
    display: flex;
    flex-direction: column;
    opacity: 1;
    transition: 1s opacity;
	overflow-x: hidden;
}

#mBox {
	position: fixed;
	z-index: 10;
	left: 0;
	right: 0;
	opacity: 0.90;
	height: 100%;
	max-width: 900px;
	display: flex;
	align-items: center;
}

#mBox .card-body {
    overflow-y: auto;
    /* max-height: 400px; */
    max-height: 60vh;
}

h1,h2,h3,h4,h5,h6,h7 {
    font-weight: normal;
	text-transform: uppercase;
	font-weight: bold;
}

.fs-7 {
	font-size: 0.8rem !important;
}

h1 {
    font-size: 3rem;
}

h2 {
    font-size: 2.5rem;
	
}
.main h2,
.sub-page h2 {
    font-family: --custom-font-2, sans-serif;
    text-transform: none;
}

.blog-page h1 {
    font-family: --custom-font-2, sans-serif;
    text-transform: none;
}

.red-box-shadow {
	box-shadow: 0px 0px 5px 1px #ff0000;
}
.green-box-shadow {
	box-shadow: 0px 0px 5px 1px #4dbe3b;
}

.red-color,
.text-red {
	color: #ff0000;
}
.green-color,
.text-green {
	color: #4dbe3b;
}
.grayscale {
  filter: grayscale(100%);
}

div.anchor,
a.anchor {
    display: block;
    position: relative;
    top: -125px;
    visibility: hidden;
}

.contextual {
    font-size: initial !important;
    color: #000 !important;
    text-shadow: none !important;
	font-weight: initial !important;
}

.contextual a {
    font-size: initial !important;
    color: #000 !important;
    text-shadow: none !important;
	font-weight: initial !important;
}

a:hover {
	text-decoration: underline;
}

.btn,
.btn:hover {
	text-decoration: none;
}

.btn-close-light {
	filter: invert(100%);
}

.btn-close-dark {
	filter: invert(0%);
}

.c-pointer,
input[type="checkbox"],
input[type="checkbox"] + label,
input[type="radio"],
input[type="radio"] + label {
  cursor: pointer;
}

#gdprCheckbox {
    padding: 14px;
    margin: 0 0.5em 1em 0;
	border: 1px solid #767676;
}
#subscriptions-form #gdprCheckbox,
#contact-form #gdprCheckbox {
    margin-left: -1.5em;
}

input[type="checkbox"]#gdprCheckbox + label {
	display: inline;
}

.grecaptcha-badge {
    z-index: 10;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
content,
summary,
div {
	display: block;
	position: relative;
}

.disabled,
[disabled] {
	cursor: not-allowed !important;
	pointer-events: unset !important;
}


.full-form-validation-check {
	display: none;
}
form:invalid .full-form-validation-check {
	display: block;
}

audio,
canvas,
progress,
video {
	display: inline-block;
}

audio:not([controls]) {
	display: none;
	height: 0;
}

progress {
	vertical-align: baseline;
}

template,
[hidden] {
	display: none;
}

.page-link {
    display: initial!important;
}

.link,
a {
	cursor: pointer;
}

.text-yellow {
	color: var(--bs-yellow);
}
.text-yellow:focus,
.text-yellow:hover {
	color: var(--bs-orange);
}

sub,
sup {
	font-size: 0.625rem;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sub {
	bottom: -.25em;
}

sup {
	top: -.5em;
}

.lh-0 {
    line-height: 0!important;
}

.w-max {
	width: max-content;
	max-width: 100%;
}

.letter-spacing-wide {
	letter-spacing: 0.7em;
}
.letter-spacing-initial {
	letter-spacing: initial;
}

/* Lang Selector */

.dropdown-menu-langselector {
    min-width: 6rem;
}

/* Colors */

.bg-block {
    background-color: var(--bs-blue);
}

/* Slideshow */

#frontCarousel {
	max-height: 59vh;
	max-width: 100%;
}

.carousel-control-next,
.carousel-control-prev {
	/* width: 25%; */
}
.carousel-control-next {
	justify-content: flex-end;
	padding-right: 3%;
}
.carousel-control-prev {
	justify-content: flex-start;
	padding-left: 3%;
}

.carousel-fade.instantly .carousel-item {
	transition: 0s;
}


/* Multi Carousel */

/* .multiCarousel .carousel-item { */
    /* background: var(--bs-light); */
/* } */

.multiCarousel .carousel-control-next,
.multiCarousel .carousel-control-prev {
    width: 10%;
	webkit-filter: drop-shadow(0px 0px 5px #000000);
    filter: drop-shadow(0px 0px 5px #000000);
}

@media (max-width: 767px) {
	.multiCarousel .carousel-control-next,
	.multiCarousel .carousel-control-prev {
		width: 50%;
	}
	.multiCarousel .carousel-control-next {
		padding-right: 5%;
	}
	.multiCarousel .carousel-control-prev {
		padding-left: 5%;
	}
	
    .multiCarousel .carousel-inner .carousel-item > div {
        display: none;
    }
    .multiCarousel .carousel-inner .carousel-item > div:first-child {
        display: block;
    }
}

.multiCarousel .carousel-inner .carousel-item.active,
.multiCarousel .carousel-inner .carousel-item-next,
.multiCarousel .carousel-inner .carousel-item-prev {
    display: flex;
}

@media (min-width: 768px) {
    .multiCarousel .carousel-inner .carousel-item-end.active,
    .multiCarousel .carousel-inner .carousel-item-next {
      transform: translateX(25%);
    }
    .multiCarousel .carousel-inner .carousel-item-start.active, 
    .multiCarousel .carousel-inner .carousel-item-prev {
      transform: translateX(-25%);
    } 
}

.multiCarousel .carousel-inner .carousel-item-end,
.multiCarousel .carousel-inner .carousel-item-start { 
  transform: translateX(0);
}

.multiCarousel .carousel-control-next:focus,
.multiCarousel .carousel-control-next:hover,
.multiCarousel .carousel-control-prev:focus,
.multiCarousel .carousel-control-prev:hover {
	webkit-filter: unset;
    filter: unset;
}
.multiCarousel .carousel-control-next:focus,
.multiCarousel .carousel-control-next:hover {
    border-radius: 0 5px 5px 0;
    background: linear-gradient(to left, rgb(0 0 0 / 50%), #00000000);
}

.multiCarousel .carousel-control-prev:focus,
.multiCarousel .carousel-control-prev:hover {
    border-radius: 5px 0 0 5px;
    background: linear-gradient(to right, rgb(0 0 0 / 50%), #00000000);
}

div.modal.lightbox img {
    max-height: 85vh!important;
}

/* Main Navbar */

nav#top-navbar {
	background-color: #d95d54;
	/* background-color: rgb(217 92 84 / 90%); */
	/* background-color: rgb(217 92 84); */
	background-color: rgb(194 76 69);
	box-shadow: 0px 0px 5px #000;
	z-index: 99;
}

ul.dropdown-menu {
    max-height: 85vh;
	min-width: 6rem;
	min-width: min-content;
	overflow-y: auto;
}

ul.navbar-nav > li.nav-item,
ul.dropdown-menu > li {
    white-space: nowrap;
}

.dropdown-item-li {
    display: block;
    width: 100%;
    padding: var(--bs-dropdown-item-padding-y) var(--bs-dropdown-item-padding-x);
    clear: both;
    font-weight: 400;
    color: var(--bs-dropdown-link-color);
    text-align: inherit;
    text-decoration: none;
    white-space: nowrap;
    background-color: transparent;
    border: 0;
}

/* Top bars */

#top-menu {
    background-color: var(--bs-gray-dark);
    font-size: 0.8em;
}

.fb-like > span {
    width: 200px !important;
	height: 19px !important;
}

.fb-like > span > iframe {
    width: 200px !important;
}

/* Top Search */
input.form-control[type=search] {
    /* min-width: 205px; */
}

#workout-search-bar {
	max-width: 110px;
	margin: 1em auto 1em auto;
}

/* Gallery Thumbnails */

.gallery .row>div:hover {
	z-index: 1;
}
.gallery img:hover {
	background-color: rgba(238, 238, 238, 0.3);
	box-shadow: 0 0 20px 5px var(--bs-white);
	transform: scale(1.048);
	-webkit-transition: all 0.2s ease;
	-moz-transition: all 0.2s ease;
	-o-transition: all 0.2s ease;
	-ms-transition: all 0.2s ease;
	transition: all 0.2s ease;
	cursor: pointer;
}

/* Content Lists */

#content-list .card {
	max-width: 529px;
}

.main-pictures.change-thumbnail .picture-1 {
    display: block;
}
.main-pictures.change-thumbnail .picture-2 {
    display: none;
}
.main-pictures.change-thumbnail:hover .picture-1 {
    display: none;
}
.main-pictures.change-thumbnail:hover .picture-2 {
    display: block;
}

/* Content Page */

.container.full-content {
    box-shadow: inset 0px 2px 10px rgb(255 255 255 / 8%);
    background-color: #222;
    padding: 0;
    margin: 40px auto 80px auto;
}

.container-fluid.main-image-container {
    padding: 0;
}

.container-fluid.content-container {
    padding: 50px 6% 80px 6%;
}

/* Content Tags and Sources */

.sources .source,
.tags .tag {
	padding: 4px 12px;
	margin: 6px 12px;
	display: inline-block;
	line-height: 24px;
	position: relative;
	margin-left: 20px;
	text-decoration: none;
	-moz-border-radius-bottomright: 4px;
	-webkit-border-bottom-right-radius: 4px;
	border-bottom-right-radius: 4px;
	-moz-border-radius-topright: 4px;
	-webkit-border-top-right-radius: 4px;
	border-top-right-radius: 4px;
}

.tags .tag {
	padding-left: 24px;
	background: var(--bs-orange);
	color: var(--bs-white);
	-moz-text-shadow: 0px 0px 3px var(--bs-black);
	-webkit-text-shadow: 0px 0px 3px var(--bs-black);
	text-shadow: 0px 0px 3px var(--bs-black);
}
.tags .tag:before{
    content: "";
    float: left;
    position: absolute;
    top: 0;
    left: -16px;
    width: 0;
    height: 0;
    border-color: transparent var(--bs-orange) transparent transparent;
    border-style: solid;
    border-width: 16px 16px 16px 0;
}
.tags .tag:after{
    content: '\f02b';
    font: var(--fa-font-solid);
    position: absolute;
    top: 9px;
	left: 3px;
}

.sources .source {
	padding-left: 30px;
	background: var(--bs-blue);
	color: var(--bs-white);
	-moz-text-shadow: 0px 0px 3px var(--bs-black);
	-webkit-text-shadow: 0px 0px 3px var(--bs-black);
	text-shadow: 0px 0px 3px var(--bs-black);
}
.sources .source:before{
    content: "";
    float: left;
    position: absolute;
    top: 0;
    left: -16px;
    width: 0;
    height: 0;
    border-color: transparent var(--bs-blue) transparent transparent;
    border-style: solid;
    border-width: 16px 16px 16px 0;
}

.sources .source:after{
    content: '\f0c1';
    font: var(--fa-font-solid);
    position: absolute;
    top: 9px;
    left: 3px;
}



/* Console display */

xmp {
	white-space: pre-line;
}

/* Buttons */

.button-text,
.button-small,
.button-mid,
.button-big,
.button-giant,
.button-circle {
	font-weight: 700;
	color: var(--bs-white);
	line-height: 2em;
	vertical-align: middle;
	text-align: center;
	background: linear-gradient(#5ac2ff, #0008ff);
	font-size: 1.5em;
	transition: 0.2s;
	border-radius: 0px;
	border: 1px solid;
	text-decoration: none;
	font-family: --custom-font-1;
	text-transform: uppercase;
	margin: auto;
    width: 96%;
    max-width: 1120px;
    display: block;
	white-space: nowrap;
}

.button-text{
	padding: 10px 20px;
    display: unset;
	background: none;
	border: none;
}

.button-small {
	padding: 10px 20px;
    display: unset;
}

.button-big {
	font-size: 1.8em;
}

.button-giant {
	font-size: 1.8em;
    background: linear-gradient(rgb(255 255 255 / 50%), rgb(255 255 255 / 30%));
	border: none;
	margin: 20px auto;
}

.button-circle {
	font-size: 1.8em;
	background: linear-gradient(rgb(255 255 255 / 50%), rgb(255 255 255 / 30%));
	border: none;
	margin: 0px auto;
	border-radius: 50%;
	width: initial;
	max-width: initial;
	display: inline-block;
	width: 65px;
	height: 65px;
	padding-top: 3px;
}
.circle {
	border-radius: 50%;
}

/* Else */


/* ============ only desktop view ============ */

/* Menu transition */
@media all and (min-width: 992px) {
	.navbar .nav-item .dropdown-menu{  display:block; opacity: 0;  visibility: hidden; transition:.3s; margin-top:20px;  }
	.navbar .nav-item:hover .nav-link{ color: var(--bs-white);  }
	.navbar .dropdown-menu.fade-down{ top:80%; transform: rotateX(-75deg); transform-origin: 0% 0%; }
	.navbar .dropdown-menu.fade-up{ top:180%;  }
	.navbar .nav-item:hover .dropdown-menu{ transition: .3s; margin-top: 0px; opacity:1; visibility:visible; top:100%; transform: rotateX(0deg); }
}		
/* ============ desktop view .end// ============ */

#eucookielaw {
    position: fixed;
    bottom: 0;
    margin: 0;
    background: #252323;
    background: rgba(37, 35, 35, 0.9);
    width: 100%;
    padding: 5px 10px;
    z-index: 10000;
}



#development {
	position: absolute;
	top: 0;
	left: 0;
}

content, header, footer {
	clear: both;
	position: relative;
    display: block;
}

footer {
	background: #252323;
    background: rgba(37, 35, 35, 0.9);
    padding: 1em 0;
}

/*Mobile menu*/

button.navbar-toggler {
    font-size: 2em;
    color: #fff;
	line-height: 0;
}
#mobile-user-menu > #dropdownUserMenu,
#desktop-user-menu > #dropdownUserMenu,
#mobile-user-menu > #loginButtonMenu,
#desktop-user-menu > #loginButtonMenu {
	line-height: 0;
}

#dropdown-urer-menu > li {
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	max-width: 250px;
}

#navbarSupportedContent a#loginButtonMenu {
	min-width: initial;
}

.menu-home > img {
    width: 60px;
}

.mobile-menu {
	display: none;
}
.desktop-menu {
	display: block;
}
#alert-message {
	text-align: center;
	/* background-color: #830000; */
}

#alert-message a {
	color: #fff;
}

footer a {
	color: #ffcf49;
}

#mobile-menu > a {
	cursor: pointer;
	color: #fff;
}

.mobile-social {
	display: none;
}
.mobile-social-banner {
	display: block;
}

.main-menu-button {
	text-align: center;
	margin: 0px 8px 0px 8px;
}

.main-menu-button > a {
    padding: 6px 15px;
    min-width: 70px;
    /* color: var(--bs-light); */
    text-decoration: none;
    border-radius: 5px;
    text-transform: uppercase;
    display: inline-block;
    font-size: 0.9em;
    /* font-weight: 100; */
	text-align: center;
	line-height: 2;
}

.main-menu-button > a.home-button {
    min-width: initial;
}

.main-menu-button > a:hover,
a#dropdownUserMenu:hover,
a#loginButtonMenu:hover
 {
	transition: 0.2s;
    color: var(--bs-dark) !important;
    background: var(--bs-light);
}

.main-menu-button > a.btn:hover {
	transition: 0.2s;
    color: var(--bs-light) !important;
    background: var(--bs-dark);
}

.fb-like {
    margin: 14px;
    position: absolute !important;
    cursor: pointer;
    line-height: 0;
    padding: 0;
    right: 66px;
    top: 0;
}

div#head {
    margin: 20px auto 40px auto;
    text-align: center;
    background-image: linear-gradient(to bottom right, rgb(0 0 0 / 70%), rgb(255 0 0 / 70%));
    /* background-image: url(/images/banner-desktop-bg.webp), linear-gradient(to bottom right, rgb(0 0 0 / 70%), rgb(255 0 0 / 70%)); */
    box-shadow: 4px 4px 15px -5px #000000;
    background-repeat: no-repeat;
    /* background-size: auto auto; */
    /* background-position: bottom; */
    color: var(--bs-light);
	overflow: hidden;
}

div#head-container {
    max-width: 1050px;
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	align-items: flex-end;
}

div#head-container > div {
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
}

div#nav-container {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: space-between;
    align-items: center;
}

#banner-image {
	order: 1;
	max-width: 40%;
	width: 333px;
}

#banner-text {
	order: 2;
}

#banner-description {
    /* text-shadow: 1px 1px 0px #000; */
}

#banner-bg {
    position: absolute;
    max-width: 100%;
	opacity: 0.125;
	margin-top: -15%;
}

#banner-title {
	display: grid;
	justify-items: center;
}

#banner-name {
	font-size: 7em;
	line-height: 1em;
	font-family: --custom-font-1, sans-serif;
	/* text-shadow: 1px 1px 0px #000; */
	max-width: 800px;
    margin: auto;
}

#by-peter-godi {
	font-family: var(--bs-body-font-family);
	font-size: 1.5rem;
	line-height: 1;
	position: absolute;
	right: 8%;
	bottom: -6px;
}

#title-mid {
	font-family: --custom-font-2, sans-serif;
	transition: 0.5s;
	line-height: 1.2;
	height: 70px;
	font-size: 3em;
	/* text-shadow: 1px 1px 0px #000; */
	margin-top: 0.5em;
	opacity: 1; /* Initial opacity */
	transition: opacity 0.5s ease-in-out; /* Transition properties */
}

#title-mid.hide {
  opacity: 0; /* Hidden state opacity */
}

.panels .panel {
	max-width: 280px;
	text-align: center;
    /* margin: 20px 20px; */
}

.panel > img {
	max-width: 300px;
	width: 100%;
}

.main.block {
	overflow: hidden;
}
.main.block.b0 {
    background-image: linear-gradient(to bottom right, #E57373, #F06292);
}
.main.block.b1 {
    background-image: linear-gradient(to bottom right, #9575CD, #7986CB);
}
.main.block.b2 {
    background-image: linear-gradient(to bottom right, #7986CB, #64B5F6);
}
.main.block.b3 {
    background-image: linear-gradient(to bottom right, #4FC3F7, #4DD0E1);
}
.main.block.b4 {
    background-image: linear-gradient(to bottom right, #4DB6AC, #81C784);
}
.main.block.b5 {
    background-image: linear-gradient(to bottom right, #AED581, #DCE775);
}
.main.block.b6 {
    background-image: linear-gradient(to bottom right, #ffffff, #c7c7c7);
}
.main.block.b7 { 
    background-image: linear-gradient(to bottom right, #4c3535, #ff3535);
}

#sticly-side-navbar{
	padding: 0;
    margin: 0;
	z-index:1;
	position: fixed;
	right: 0;
	top: 15%;
}

div#contact-items {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-evenly;
}

.video-over-container {
	max-width: 900px; /* YT default 560px */
    margin: 0 auto;
    background: rgb(0 0 0 / 0.4);
    overflow: hidden;
    width: 100%;
    aspect-ratio: 16 / 9;
}

.video-over-container > iframe {
    width: 100%;
    height: 100%;
    aspect-ratio: 16 / 9;
}

lite-youtube {
    max-width: 100% !important;
}

.no-steal-yt-video-over-container-open {
	max-width: 900px;
    margin: 0 auto;
    background: rgb(0 0 0 / 0.4);
    overflow: hidden;
    width: 100%;
    aspect-ratio: 16 / 9;
}
	
.loadicon {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.playbtn {
    display: block;
    /* Make the button element cover the whole area for a large hover/click target */
    width: 100%;
    height: 100%;
    /* but visually it's still the same size */
    background: no-repeat center/68px 48px;
    /* YT's actual play button svg */
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 68 48"><path d="M66.52 7.74c-.78-2.93-2.49-5.41-5.42-6.19C55.79.13 34 0 34 0S12.21.13 6.9 1.55c-2.93.78-4.63 3.26-5.42 6.19C.06 13.05 0 24 0 24s.06 10.95 1.48 16.26c.78 2.93 2.49 5.41 5.42 6.19C12.21 47.87 34 48 34 48s21.79-.13 27.1-1.55c2.93-.78 4.64-3.26 5.42-6.19C67.94 34.95 68 24 68 24s-.06-10.95-1.48-16.26z" fill="red"/><path d="M45 24 27 14v20" fill="white"/></svg>');
    position: absolute;
	top: 0;
    left: 0;
    cursor: pointer;
    z-index: 1;
    filter: grayscale(100%);
    transition: filter .1s cubic-bezier(0, 0, 0.2, 1);
    border: 0;
}
.playbtn:hover {
    filter: none;
}

.locked-icon {
    position: absolute;
    z-index: 1;
    font-size: 4rem;
    opacity: 0.6;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.new-icon {
    position: absolute;
    z-index: 1;
    font-size: 1rem;
    opacity: 0.9;
    top: 0;
    right: 0;
}

.video-locks {
    position: absolute;
    z-index: 1;
    font-size: 1rem;
    opacity: 0.9;
    bottom: 8px;
    right: 0px;
}

#ytVideoNoStealPagePlayCards > .card {
    max-width: 360px;
    min-width: 270px;
}

.ytVideoNoStealPagePlayCards-lock-icon {
	position: absolute;
	z-index: 1;
	font-size: 0.8rem;
	top: 4px;
	right: 4px;
	background-color: #f8f9fa;
	display: block;
	margin: 0;
	border-radius: 20px;
	padding: 0px 6px;
	opacity: 0.9;
}

.video-favorite-icon-list {
    position: absolute;
    z-index: 1;
    font-size: 1rem;
    opacity: 0.9;
    bottom: 8px;
    left: 8px;
}

.video-favorite-icon:hover {
	/* color: red; */
	transform: scale(1.1);
	-webkit-transition: all 0.2s ease;
	-moz-transition: all 0.2s ease;
	-o-transition: all 0.2s ease;
	-ms-transition: all 0.2s ease;
	transition: all 0.2s ease;
}

/* custom player */

.online-video-page .modal-header-video {
    border: none;
	max-height: 8vh;
    height: 100%;
}

.custom-player-container {
	position: relative;
	width: 100vw;
	aspect-ratio: 16 / 9;
}

.custom-player-container .custom-player {
	position: relative;
    display: block;
    width: 100%;
}
.pe-none {
	pointer-events: none;
}
.hide-player-top {
    width: 100%;
    height: 20vh;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1;
	cursor: not-allowed;
}
.hide-player-bot {
    width: 121px;
    height: 40px;
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 1;
    cursor: not-allowed;
	/* background-color: black; */
}
@media (max-width: 600px) {
	.hide-player-bot {
		width: 250px;
		height: 45px;
		/* background-color: black; */
	}
}

.custom-player-container,
.custom-player-container .custom-player {
	height: 92vh;
}

/* custom player end */



/* .workout-card:hover { */
    /* transform: scale(1.024); */
    /* -webkit-transition: all 0.4s ease-in-out; */
    /* -moz-transition: all 0.4s ease-in-out; */
    /* -o-transition: all 0.4s ease-in-out; */
    /* -ms-transition: all 0.4s ease-in-out; */
    /* transition: all 0.4s ease-in-out; */
	/* z-index: 1; */
/* } */


/* @keyframes moving { */
    /* from { */
      /* transform: translateX(100%); */
      /* right: 100%; */
      /* } */
    /* to { */
      /* transform: translateX(0%); */
      /* right: 0%; */
      /* } */
/* } */

.follow > a {
	line-height: 3.5em;
}

.clean-pricing-item {
	background-color: #fff;
	box-shadow: 0px 2px 10px rgba(0,0,0,.075);
	padding: 30px 20px 20px 20px;
	overflow: hidden;
	position: relative;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.clean-pricing-item .ribbon {
	width: 160px;
	height: 32px;
	font-size: 14px;
	text-align: center;
	color: #fff;
	font-weight: bold;
	box-shadow: 0px 2px 3px rgba(136,136,136,.25);
	background: #4dbe3b;
	transform: rotate(45deg);
	position: absolute;
	right: -42px;
	top: 20px;
	padding-top: 6px;
}
.clean-pricing-item .features h4, .clean-pricing-item .features .h4 {
  text-align: center;
  font-size: 18px;
  padding: 5px;
}

.clean-pricing-item .heading {
  text-align: center;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(0,0,0,.1);
}

.clean-pricing-item .price .main-price {
  margin: 15px 0;
  font-size: 40px;
  text-align: center;
  color: #2288f9;
}

.clean-pricing-item .features .feature {
  font-weight: 600;
}

.clean-pricing-item p {
  text-align: center;
  margin-top: 20px;
  /* opacity: .7; */
  color: var(--bs-secondary);
}

/* div#calendar { */
    /* overflow-x: auto; */
/* } */

.calendar-boxes {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-content: flex-start;
	justify-content: center;
	max-width: 650px;
	/* max-width: 540px; */
	margin: auto;
}

.calendar-box {
	background: var(--bs-light);
	color: var(--bs-dark);
	margin: 3px;
	width: 150px;
	height: 150px;
	/* width: 124px; */
	/* height: 124px; */
	padding: 4px;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	line-height: 1.2;
	
}

.calendar-box.weekend {
    box-shadow: var(--bs-warning) 0px 0px 0px 2px;
}

.calendar-day {
	/* color: var(--bs-gray); */
	text-transform: lowercase;
}

.calendar-description {
    color: var(--bs-orange);
    font-weight: bold;
}

.calendar-date {
    /* font-size: 0.9em; */
    line-height: 1.2;
}

.calendar-place {
	/* font-size: 0.8em; */
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}

.long-text-dot {
	/* font-size: 0.8em; */
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}
.calendar-place > a {
    text-decoration: none;
}

.calendar-button,
.calendar-button a {
    font-size: 0.8em;
    padding: 2px 0 2px 0;
}

.calendar-small-box {
	background: var(--bs-light);
	color: var(--bs-dark);
	margin: 3px;
}

.calendar-small-box .calendar-day{
	color: var(--bs-dark);
	font-size: 1rem;
	padding: 0 1rem 0 1rem;
}

.about-description {
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: flex-end;
    flex-direction: row-reverse;
    flex-wrap: nowrap;
}
.about-description img {
	max-height: 450px;
	width: auto;
	margin-bottom: -1rem;
}

.email-desctription {
    max-width: 459px;
    margin: auto;
}

/* .hideLeft { */
  /* animation-name: hideLeft; */
  /* animation-duration: 1s; */
  /* visibility: hidden; */
/* } */
/* .appearRight { */
  /* animation-name: appearRight; */
  /* animation-duration: 1s; */
  /* visibility: visible; */
  
/* } */

/* @keyframes hideLeft { */
  /* 0% { */
    /* opacity: 1; */
    /* transform: translateX(0%); */
    /* visibility: visible; */
  /* }  */
  /* 100% { */
    /* opacity: 0; */
    /* transform: translateX(100%); */
	/* visibility: hidden; */
    
  /* } */
/* } */

/* @keyframes appearRight { */
  /* 0% { */
    /* opacity: 0; */
    /* transform: translateX(100%); */
    /* visibility: hidden ; */
  /* }  */
  /* 100% { */
    /* opacity: 1; */
    /* transform: translateX(0%); */
    /* visibility: visible; */
  /* } */
/* } */

.bg-quote {
    font-size: 350px;
    opacity: 0.2;
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#feedbacks {
    padding: 0;
}

#feedbacks .carousel-caption {
    position: relative;
    margin: 0 0 30px 0;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
	font-size: 1.25em;
	text-shadow: 0px 0px 2px black;
}

#feedbacks .carousel-control-next, #feedbacks .carousel-control-prev {
    bottom: 18%;
	/* width: 40%; */
	font-size: 34px;
}

#feedbacks .carousel-control-next {
    padding-right: 0%;
	margin-right: -5px;
}

#feedbacks .carousel-control-prev {
    padding-left: 0%;
    margin-left: -5px;
}

.feedback-profile-picture {
	border-radius: 50%;
	max-width: 80px;
}

.carousel-indicators [data-bs-target] {
    width: 35px;
    height: 5px;
}

/* Feedback Page */

.feedbacks-page .bg-quote {
    font-size: 180px;
	top: 50%;
	opacity: 0.1;
}

.feedbacks-page .feedback-item {
    margin: 2rem 0 2rem 0;
    padding: 3rem 1rem 1rem 1rem;
    background: #ffffff;
    text-align: center;
    border-radius: 1rem;
}

/**
  Component
**/

.custom-radio-group > label {
    position: relative;
}

.custom-radio-group input[type=radio] {
    border: 0px;
    width: 1.2rem;
    height: 1.2rem;
}

.purchase-page .price {
	min-width: 37%;
    text-align: right;
}

.card-input-element {
    /* display: none; */
	position: absolute;
	z-index: 1;
	top: 40%;
	left: 1rem;
}

/* .card-input { */
    /* margin: 10px; */
    /* padding: 0px; */
/* } */
.card-input-label {
	display: block;
	margin: 0 0 1rem 0;
}

.card-input {
	background-color: #eee;
	padding: 1rem 1rem 1rem 1rem;
	display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}
.card-input-label .card-input {
	padding: 1rem 1rem 1rem 3rem;
}

.card-input-title {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	flex-wrap: nowrap;
}

.card-input:hover {
    cursor: pointer;
}

.card-input-element:checked + .card-input {
     box-shadow: 0 0 0px 4px #0d6efd;
}

@media (min-width: 768px) {
	.purchase-page.container {
		width: 768px;
	}
}

@media (min-width: 576px) {
	.login-page.container {
		width: 576px;
	}
}

/* Chrome, Safari, Edge, Opera */
.purchase-page #invoicing-postal-code::-webkit-outer-spin-button,
.purchase-page #invoicing-postal-code::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
.purchase-page #invoicing-postal-code {
  -moz-appearance: textfield;
}

#accordionBenefits .accordion-button::after {
    position: absolute;
	left: 0;
	right: 0;
	margin: 0 auto;
    bottom: 10px;
    width: 2.5em;
    height: 2.5em;
    background-size: 2.5em;
}

div#accordionBenefits {
    box-shadow: #000 0px 13px 0px -10px;
}

.bus,
.troli,
.metro,
.tram,
.new-label,
.mpcode {
	color: rgb(255, 255, 255);
	border-radius: 6px;
	padding: 2px 14px;
	margin: 0;
}

.bus {
	background-color: rgb(0, 158, 227);
}
.troli {
	background-color: rgb(228, 31, 24);
}
.metro.m1 {
	background-color: rgb(242, 205, 0);
}
.metro.m2 {
	background-color: rgb(229, 45, 41);
}
.metro.m3 {
	background-color: rgb(0, 99, 170);
}
.metro.m4 {
	background-color: rgb(79, 163, 55);
}
.tram{
	background-color: rgb(242, 205, 0);
}
.new-label{
	background-color: rgb(228, 31, 24);
	display: block;
}
.white-label{
	color: #212529;
	background-color: #f8f9fa;
	display: block;
	margin: 8px 8px 0px 0px;
	border-radius: 20px;
	padding: 4px 14px;
}
.green-label{
	color: rgb(255, 255, 255);
	background-color: #4dbe3b;
	display: block;
	margin: 8px 8px 0px 0px;
	border-radius: 20px;
	padding: 4px 14px;
}
.blue-label {
	color: rgb(255, 255, 255);
	background-color: #3481db;
	display: block;
	margin: 8px 8px 0px 0px;
	border-radius: 20px;
	padding: 4px 14px;
}
.cyan-label {
	color: rgb(255, 255, 255);
	background-color: var(--bs-cyan);
	display: block;
	margin: 8px 8px 0px 0px;
	border-radius: 20px;
	padding: 4px 14px;
}
.red-label {
    color: rgb(255, 255, 255);
    background-color: #ff3636;
    display: block;
    margin: 8px 8px 0px 0px;
    border-radius: 20px;
    padding: 4px 14px;
} 
.yellow-label {
    color: rgb(255, 255, 255);
    background-color: rgba(var(--bs-warning-rgb));
	color: var(--bs-dark);
    display: block;
    margin: 8px 8px 0px 0px;
    border-radius: 20px;
    padding: 4px 14px;
} 

.orange-circle-label {
    background-color: var(--bs-orange);
    color: var(--bs-light);
    margin: 0;
    border-radius: 20px;
    padding: 0px 6px;
    font-weight: bold;
}

.white-label.play-cards,
.green-label.play-cards,
.blue-label.play-cards,
.cyan-label.play-cards,
.red-label.play-cards,
.yellow-label.play-cards {
    padding: 2px 4px;
}

.mpcode{
	background-color: #006f81;
}

.blog > .card {
	max-width: 400px;
}

.blog > .card > .card-img-top {
	width: 100%;
	object-fit: cover;
}

.ov-stay-ratio {
	/* Reszponzív szélesség, ez általában már létezik */
	  width: 100%; 
	  height: auto;

	/* Ez a varázslat: */
	aspect-ratio: 548 / 308;

	/* Opcionális: háttérszín, amíg a kép töltődik */
	/* background-color: #ff0000;  */
}

.mp-offer-card {
	text-decoration: none;
	cursor: pointer;
}

.mp-offer-card > div{
	background-color: #003942;
    color: #fff;
}

.mp-offer-card .mpLogo{
	color: #fff;
    background-color: #fff;
    padding: 4px 10px 4px 10px;
	max-width: 270px;
}
.mp-offer-card:hover {
	text-decoration: none;
}
.mp-offer-card:hover .mpcode{
	background-color: #003942;
	color: #fff;
}
.mp-offer-card>div:hover {
	background-color: #006f81;
	/* box-shadow: 0 0 20px 5px var(--bs-dark); */
	/* transform: scale(1.048); */
	-webkit-transition: all 0.2s ease;
	-moz-transition: all 0.2s ease;
	-o-transition: all 0.2s ease;
	-ms-transition: all 0.2s ease;
	transition: all 0.2s ease;
}

.revolut-card-icon {
	margin-top: -12px;
}

#userInsideButtons {
	position: absolute;
	top: 0;
	right: 0;
	display: flex;
    justify-content: center;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
}

#appInstallButton,
#sentFeedbacksButton {
	position: absolute;
    top: 0;
    right: auto;
}

span.icon-counter {
	position: absolute;
	top: 0;
	right: -22px;
	font-size: 14px;
	border: 1px solid;
	width: 20px;
	height: 20px;
	line-height: 0;
	padding: 9px 0 0 0;
	margin: 0 0 0 0;
	border-radius: 50%;
}

span.icon-counter.text-warning {
	padding: 8px 0 0 0;
	border: 2px solid;
	font-weight: bold;
}

#calendar input#flexSwitchReqClassNotif {
    box-shadow: #f9c23c 0px 0px 4px 2px;
}

/* Copyright */

#copyright_tooltip,.copyright_tooltip_class {
	display: none;
	position: absolute;
	z-index: 999999999;
	background-color: #f00;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	opacity:1;
	border: 1px solid #000;
	border-radius: 25px;
	box-shadow: rgba(0,0,0,0) 0px 0px 15px  1px;
	color: #ffffff;
	padding: 5px 10px;
	text-transform: none;
	top: 0;
	left: 0;
	
}

#copyright_tooltip > *, .copyright_tooltip_class > * {
	color: #ffffff;
	font-size: 16px;
}

#copyright_tooltip_block {
	font-size: 16px;
	backdrop-filter: blur(0px);
}

@media screen and (max-width: 768px){
	#copyright_tooltip,.copyright_tooltip_class {
		font-size: 16px;
	}
	#copyright_tooltip > *, .copyright_tooltip_class > * {	                            
		font-size: 16px;
	}
}

#snow-container {
    position: absolute;
    top: 0;
    left: 4vw;
    width: 92vw;
    height: 100vh;
    z-index: 999;
    pointer-events: none;
}

@media all and (max-width: 769px) {
	#snow-container {
	left: 3vw;
    width: 86vw;
	}
}

.snowflake {
    position: absolute;
    color: #fff;
    font-size: 1em;
	text-shadow: #000 0 0 1px;
}

.online-category-selector-icons .workout-category-card {
	border: none;
    background: none;
}
.online-category-selector-icons .workout-category-card img.selected {
	box-shadow: 0px 0px 10px 2px #3bff00;
	border-radius: 50%;
}
.online-category-selector-icons .workout-category-card img.not-selected {
	opacity: 0.6;
}

#online-difficulty-indicators {
	max-width: 100%;
	width: 500px;
	margin: auto;
}

@media all and (max-width: 450px) {
	#online-category-selector-icons h5 {
		font-size: 0.95rem;
	}
}
@media all and (max-width: 355px) {
	#online-category-selector-icons h5 {
		font-size: 0.85rem;
	}
}

#floatingWindow,
#messengerWindow {
	display: none; /* Initially hidden */
	opacity: 0; /* Initially transparent */
	position: fixed;
	z-index: 1000; /* Ensure it's on top */
	background-color: white;
	border: 1px solid #ccc;
	padding: 10px;
	border-radius: 5px;
	box-shadow: 0px 2px 10px rgba(0,0,0,0.1);
}

#floatingWindow {
	bottom: 90px;
	left: 5%;
	right: 5%;
}
#messengerWindow {
	bottom: 20px; /* Vagy más pozíció, pl. bottom: 20px; */
	right: 5%; /* Jobb oldalra pozicionálás */
}

/* A legördülő lista stílusai */
.country-dropdown-menu {
	font-size: 1rem;
	display: none; /* Alapból rejtett */
	position: absolute;
	background-color: #f9f9f9;
	min-width: 100%;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	z-index: 1050; /* Legyen más elemek felett */
	max-height: 300px; /* Maximális magasság, utána görgethető */
	overflow-y: auto;
	border: 1px solid #ddd;
	border-radius: 0.375rem;
}
.country-dropdown-menu a {
	color: black;
	padding: 12px 16px;
	text-decoration: none;
	display: block;
}
.country-dropdown-menu a:hover {
	background-color: #f1f1f1;
}

/* Felső menü - Fiókom gomb stílusa */
.top-nav-account-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1;
    font-size: 0.7rem; /* Kisebb betűméret a feliratnak */
}
.top-nav-account-button i {
    font-size: 1.5rem; /* Ikon mérete */
    margin-bottom: 2px;
}
.videotar-app-pill {
	transform: translate(-50%, -50%);
	top: 100%;
	left: 50%;
	font-size: 0.5em;
    opacity: 0.7;
    margin-top: -7px;
}

/* A videó oldal ragadós fejléce - KÜLSŐ, TELJES SZÉLESSÉGŰ KONTÉNER */
.sticky-video-header {
    position: sticky;
    z-index: 1010;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    background-color: transparent;
	backdrop-filter: blur(5px);
    transition: background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

/* BELSŐ KONTÉNER, ami a tartalmat tartja */
.sticky-video-header .container {
    max-width: 1400px;
    padding: 0.5rem 1.5rem; /* Alap padding */
    transition: padding 0.3s ease-in-out;
}

/* Stílus, amit a JS hozzáad, amikor a fejléc "beragad" a tetejére */
.sticky-video-header.is-sticky {
    background-color: rgba(255, 255, 255, 0.95);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}
.sticky-video-header.is-sticky .container {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

/* --- ÚJ STÍLUSOK A GOMBHOZ ÉS A CÍMHEZ --- */

/* Vissza gomb formázása */
.sticky-back-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1;
    font-size: 0.75rem;
    min-width: 50px; /* Hogy a cím ne tolja össze */
}
.sticky-back-button i {
    font-size: 1.5rem;
    margin-bottom: 2px;
}

/* A ragadós fejlécben lévő cím - ALAPBÓL REJTETT */
.sticky-title {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
    text-align: center;
    /* Biztosítja, hogy a hosszú címek ne törjék szét az elrendezést */
    overflow: hidden;
    max-width: calc(100% - 120px); /* Levonjuk a két oldalsó elem helyét */
}
/* Bootstrap text-truncate a túl hosszú címekhez */
.sticky-title .text-truncate {
    display: inline-block;
    max-width: 100%;
}


/* RAGADÓS ÁLLAPOTBAN a cím láthatóvá válik */
.sticky-video-header.is-sticky .sticky-title {
    opacity: 1;
    transform: translateY(0);
}

/* A lakat ikon konténere */
.sticky-lock-icon {
    min-width: 50px; /* Hogy a cím ne tolja össze */
    text-align: right;
}


/* A videólista oldal ragadós szűrősávja - KÜLSŐ, TELJES SZÉLESSÉGŰ KONTÉNER */
.sticky-filter-bar {
    position: sticky;
    z-index: 999;
    
    /* Teljes szélességet biztosító szabályok */
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    
    /* Alapállapotban átlátszó, nincs árnyék */
    background-color: transparent;
    box-shadow: none;
    
    /* Az átmenet a szép "beragadáshoz" */
    transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, padding 0.3s ease-in-out;
}

/* --- Kompakt Szűrősáv Stílusok --- */

#workout-filters .btn,
#workout-filters .form-control {
    padding: 0.25rem 0.5rem; /* Kisebb belső margó */
    font-size: 0.875rem;   /* Kisebb betűméret */
    height: auto;
}

#workout-filters .input-group {
    flex-wrap: nowrap; /* Megakadályozza, hogy a kereső gombja új sorba törjön */
}

/* A gombcsoportok közötti felesleges margó eltávolítása */
#workout-filters .btn-group {
    margin: 0.125rem !important; /* Kisebb margó a gombok között */
}

/* A szűrő címsorának csökkentése */
#workout-filters > p {
    font-size: 0.8rem;
    margin-bottom: 0.25rem !important;
}

/* A ragadós szűrősáv legyen még kompaktabb */
.sticky-filter-bar.is-sticky #workout-filters {
	padding-top: 0.25rem !important;
	padding-bottom: 0.25rem !important;
	border: none !important;
}

/* Opcionális: A címsor elrejtése, ha a sáv "beragad" */
.sticky-filter-bar.is-sticky #workout-filters > p {
    display: none;
}

/* A BELSŐ TARTALOM KONTÉNERE */
.sticky-filter-bar .container-inner-padding {
    /* A Bootstrap .container logikáját utánozzuk, de csak paddinggel */
    width: 100%;
    padding-right: var(--bs-gutter-x, 0.75rem);
    padding-left: var(--bs-gutter-x, 0.75rem);
    margin-right: auto;
    margin-left: auto;
    max-width: 1400px; /* Ezt igazítsd a te `.container` max-width értékedhez! */

    /* Alap belső margók */
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    transition: padding 0.3s ease-in-out;
}

/* Stílus, amit a JS hozzáad, amikor a szűrősáv "beragad" a tetejére */
.sticky-filter-bar.is-sticky {
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(5px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.sticky-filter-bar.is-sticky .container-inner-padding {
    padding-top: 0rem;
    padding-bottom: 0rem;
}