:root {
    --b5-top-safe-area-height: env(safe-area-inset-top);
    --b5-bottom-safe-area-height: env(safe-area-inset-bottom);
    --b5-border-radius: var(--bs-border-radius-xl);
    --b5-zindex-header: 100;
    --b5-zindex-tabbar: 100;
    --b5-zindex-header-image: 101;
    --b5-zindex-b5toast: 1095;
    --b5-card-bg-rgb: var(--bs-bg-rgb);
    --bs-bg-rgb: var(--bs-body-bg-rgb);
}
.top-safe-area { height: var(--b5-top-safe-area-height); }
.bottom-safe-area { height: var(--b5-bottom-safe-area-height); }

/* Nascondi il placeholder del video durante il caricamento x app android */
video::-webkit-media-controls-enclosure {
    display: none !important;
}

.min-svh-100 { min-height: 100svh; }

.cursor-pointer { cursor: pointer; }
.cursor-wait { cursor: wait; }
.cursor-grab { cursor: grab; }

.scrollbar-invisible {
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.scrollbar-invisible::-webkit-scrollbar { display: none; }

.b5-fa-icon {
    font-weight: 400;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: var(--fa-display, inline-block);
    font-style: normal;
    font-variant: normal;
    line-height: 1;
    text-rendering: auto;
    font-family: "Font Awesome 6 Pro";
}
.router-link-active .b5-fa-icon, .router-link-exact-active .b5-fa-icon, .filled-b5-icon .b5-fa-icon { font-weight: 900; }

.text-shadow-dark { text-shadow: 0px 1px 10px rgba(0,0,0,0.3); }
.b5-container {
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
}

.b5-col{flex-shrink:0;margin-top:var(--bs-gutter-y);max-width:100%;padding-left:calc(var(--bs-gutter-x)*.5);padding-right:calc(var(--bs-gutter-x)*.5);width:100%}
.b5-col-2{flex:0 0 auto;width:93%}
.b5-col-3{flex:0 0 auto;width:47%}
.b5-col-4{flex:0 0 auto;width:28%}
.b5-col-4-alt{flex:0 0 auto;width:32%}
.b5-col-5{flex:0 0 auto;width:24%}
.b5-col-6{flex:0 0 auto;width:18%}
@media (min-width:576px){
    .b5-col-sm-2{flex:0 0 auto;width:93%}
    .b5-col-sm-3{flex:0 0 auto;width:47%}
    .b5-col-sm-4{flex:0 0 auto;width:28%}
    .b5-col-sm-4-alt{flex:0 0 auto;width:32%}
    .b5-col-sm-5{flex:0 0 auto;width:24%}
    .b5-col-sm-6{flex:0 0 auto;width:18%}
}
@media (min-width:768px){
    .b5-col-md-2{flex:0 0 auto;width:93%}
    .b5-col-md-3{flex:0 0 auto;width:47%}
    .b5-col-md-4{flex:0 0 auto;width:28%}
    .b5-col-md-4-alt{flex:0 0 auto;width:32%}
    .b5-col-md-5{flex:0 0 auto;width:24%}
    .b5-col-md-6{flex:0 0 auto;width:18%}
}
@media (min-width:992px){
    .b5-col-lg-2{flex:0 0 auto;width:93%}
    .b5-col-lg-3{flex:0 0 auto;width:47%}
    .b5-col-lg-4{flex:0 0 auto;width:28%}
    .b5-col-lg-4-alt{flex:0 0 auto;width:32%}
    .b5-col-lg-5{flex:0 0 auto;width:24%}
    .b5-col-lg-6{flex:0 0 auto;width:18%}
}
@media (min-width:1200px){
    .b5-col-xl-2{flex:0 0 auto;width:93%}
    .b5-col-xl-3{flex:0 0 auto;width:47%}
    .b5-col-xl-4{flex:0 0 auto;width:28%}
    .b5-col-xl-4-alt{flex:0 0 auto;width:32%}
    .b5-col-xl-5{flex:0 0 auto;width:24%}
    .b5-col-xl-6{flex:0 0 auto;width:18%}
}
@media (min-width:1400px){
    .b5-col-xxl-2{flex:0 0 auto;width:93%}
    .b5-col-xxl-3{flex:0 0 auto;width:47%}
    .b5-col-xxl-4{flex:0 0 auto;width:28%}
    .b5-col-xxl-4-alt{flex:0 0 auto;width:32%}
    .b5-col-xxl-5{flex:0 0 auto;width:24%}
    .b5-col-xxl-6{flex:0 0 auto;width:18%}
}
@media (max-width:575.98px){
    .magnetic-scroll-on-mobile{-ms-scroll-snap-type:mandatory;scroll-snap-type:mandatory;-ms-scroll-snap-type:x mandatory;scroll-snap-type:x mandatory}
    .magnetic-scroll-on-mobile .magnetic-column{scroll-snap-align:center}
}

.blur-bg {
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.text-sm { font-size:0.75rem; }
.text-opposite { color: #fff }
[data-bs-theme=dark] .text-opposite { color: #000 }

.weight-scale-main { background-color: #3f3f3f; }
[data-bs-theme=dark] .weight-scale-main { background-color: #fff; }
.weight-scale-secondary { background-color: #a2a2a2; }
[data-bs-theme=dark] .weight-scale-main { background-color:#383838; }

.b5-header {
    position:fixed;
    left: 0;
    top:0;
    width: 100%;
    z-index: var(--b5-zindex-header);
}
.b5-header-default {
    background: rgba(var(--bs-body-bg-rgb),0.9);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);

    .page-title {
        font-weight:bold;
        text-align:center;
    }
}
.b5-header-default.scrolled {
    border-bottom: 1px solid #dedede;
}
.bg-transparent { background-color:rgba(0,0,0,0)!important; }

#header {
    z-index: var(--b5-zindex-header);
}

#tabbar {
    position:fixed;
    left: 0;
    bottom:0;
    width: 100%;
    z-index: var(--b5-zindex-tabbar);

    .tabbar-bg {
        background: rgba(var(--bs-body-bg-rgb),0.9);
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
    }

    .tabbar-navigation {
        display:flex;
        justify-content: space-between;
        list-style:none;
        padding: 0;
        margin: 0;
        flex-direction: row;
        width:100%;

        .nav-item {
            display:list-item;
            padding: 0 0.5rem;

            text-decoration: none;
            color: inherit;
            display: block;
            text-align: center;
            text-decoration: none;
            width: 100%;
            opacity: 0.8
        }
        .nav-item .b5-fa-icon {
            font-size: 1.2rem;
        }
        .nav-item.active {
            opacity: 1;
            color: var(--bs-primary);
        }
        .nav-item.active .b5-fa-icon {
            font-weight:700
        }
    }
}

#tabbar.scrolled { border-top: 1px solid #dedede; }

.bg-cover {
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.btn-white {
    background-color: #fff;
    border: 1px solid #fff;
    color: #000;
}
.btn-white:hover, .btn-white:active, .btn-active:focus {
    background-color: #000;
    color: #fff;
}
.btn-black, .btn-opposite {
    background-color: #000;
    border: 1px solid #000;
    color: #fff;
}
.btn-black:hover, .btn-black:active, .btn-active:focus,
.btn-opposite:hover, .btn-opposite:active, .btn-opposite:focus {
    background-color: #fff;
    border: 1px solid #000;
    color: #000;
}

[data-bs-theme=dark] .btn-opposite {
    background-color: #fff;
    border: 1px solid #fff;
    color: #000;
}
[data-bs-theme=dark] .btn-opposite:hover,
[data-bs-theme=dark] .btn-opposite:active,
[data-bs-theme=dark] .btn-opposite:focus {
    background-color: #000;
    border: 1px solid #fff;
    color: #fff;
}

.btn-themed-secondary {
    background-color: rgb(var(--bs-secondary-bg-rgb));
    color: var(--bs-body-color);
}
.btn-themed-secondary-outline, .btn-themed-secondary-outline:hover {
    border: 1px solid rgb(var(--bs-secondary-bg-rgb));
    color: var(--bs-body-color);
}
.btn-themed-tertiary {
    background-color: rgb(var(--bs-tertiary-bg-rgb));
    color: var(--bs-body-color);
}
.btn-themed-tertiary-outline, .btn-themed-tertiary-outline:hover {
    border: 1px solid rgb(var(--bs-tertiary-bg-rgb));
    color: var(--bs-body-color);
}

.poster-card-hover-scale {
    transition: all linear 0.15s
}
.poster-card-hover-scale:hover {
    transform: scale(0.95, 0.95);
}



.poster-card {
    display: block;
    width: 100%;
    position: relative;
    border-radius: var(--b5-border-radius);
    text-decoration: none;

    .card-image {
        aspect-ratio:4/3;
    }
    .card-trailer {
        aspect-ratio:1/1;
    }

    .card-content {

    }

    .card-title {
        font-weight: bold;
    }
    .card-excerpt {
        font-size: 0.8rem;
        opacity:0.85
    }

    .card-content.at-bottom {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        border-radius: 0 0 var(--b5-border-radius) var(--b5-border-radius)
    }
    
    .card-pills.at-top {
        position: absolute;
        top:0;
        left:0;
        width: 100%;
        display: flex;
    }
    .card-pills .pill {
        background: rgba(0,0,0,0.45);
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
        color: #fff;
        border-radius: 3rem;
        padding: 0.25rem 0.5rem;
        font-size: 0.8rem;
        margin-right: 0.25rem;
    }
}
.poster-card.hide-content .card-content { display:none }
.poster-card.card-marked {
    border:5px solid rgba(var(--bs-primary-rgb), 1);
}
.poster-card.card-scheme-light {
    .card-content {
        color: #fff;
    }
    .card-cta {
        background-color: #fff;
        color: #000;
    }
}
.poster-card.card-scheme-dark {
    .card-content {
        color: #000;
    }
    .card-cta {
        background-color: #000;
        color: #fff;
    }
}
.poster-card.card-overlay-blur .card-overlay,
.poster-card.card-overlay-blur .card-overlay-sm {
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}
.poster-card.card-overlay-light {
    .card-content {
        background-color: rgba(255,255,255,0.3);
    }
}
.poster-card.card-overlay-dark {
    .card-overlay {
        background-color: rgba(0,0,0,0.5);
    }
    .card-overlay-sm {
        background-color: rgba(0,0,0,0.25);
    }
}
.card-custom-label {
    border-top-left-radius: var(--b5-border-radius);
    border-bottom-right-radius: var(--b5-border-radius);
    position: absolute;
    top:0;
    left:0;
    background-color: rgb(var(--bs-primary-rgb));
    color: #fff;
    font-size:0.75rem;
    font-weight: 700;
    padding: 0.25rem 0.75rem;
}


.poster-card-classic {
    background-color: rgb(var(--b5-card-bg-rgb));
    color: rgba(var(--bs-body-color-rgb), 1);
    border: 1px solid var(--bs-border-color);

    .card-image.at-bg,
    .card-trailer.at-bg {
        border-top-left-radius: var(--b5-border-radius);
        border-top-right-radius: var(--b5-border-radius);
    }

    .card-content.at-bottom {
        position: relative;
        width: 100%;
        border-radius: 0 0 var(--b5-border-radius) var(--b5-border-radius)
    }
}


.poster-card-gradient {
    background-color: rgb(var(--b5-card-bg-rgb));
    color: rgba(var(--bs-body-color-rgb), 1);
    border: 1px solid var(--bs-border-color);

    .card-image.at-bg,
    .card-trailer.at-bg {
        border-radius: var(--b5-border-radius);
    }
    .card-content {
        background-color: transparent!important;
    }
}
.poster-card-gradient.card-overlay-dark {
    .card-overlay {
        background-color: rgba(0,0,0,0.5);
    }
    .card-overlay-noaccent {
        background-color: rgba(0,0,0,0.5);
        background: linear-gradient(0deg, rgba(0,0,0,0.65) 45%, rgba(0,0,0, 0) 100%);
        padding-top: 3rem!important;
    }
    .card-overlay-sm {
        background-color: rgba(var(--b5-card-bg-rgb), 1);
        background: linear-gradient(0deg, rgba(var(--b5-card-bg-rgb), 1) 45%, rgba(var(--b5-card-bg-rgb), 0) 100%);
        padding-top: 3rem!important;
    }
}


.poster-card-modern {
    background-color: rgb(var(--b5-card-bg-rgb));
    border: 1px solid var(--bs-border-color);

    .card-image.at-bg,
    .card-trailer.at-bg {
        border-radius: var(--b5-border-radius);
    }
}


.poster-card-list {
    background-color: rgb(var(--b5-card-bg-rgb));
    border: 1px solid var(--bs-border-color);
    color: rgba(var(--bs-body-color-rgb), 1);
    display: flex;
    width: 100%;
    align-items: stretch;

    .card-image, .card-trailer { width: 100%; max-width: 100px }
    .card-image.at-bg,
    .card-trailer.at-bg {
        border-radius: var(--b5-border-radius) 0 0 var(--b5-border-radius);
    }

    .card-content.at-bottom {
        position: relative;
        width: 100%;
        border-radius: 0 var(--b5-border-radius) var(--b5-border-radius) 0
    }
}

.poster-cards-list-group {
    .poster-card {
        border: 0;
        border-radius: 0;
    }
    > div:not(:first-child) {
        border-top: 1px solid #dedede;
    }
    .poster-card-list .card-image,
    .poster-card-list .card-trailer {
        border-radius: 0;
    }
    > div:first-child .poster-card .card-image,
    > div:first-child .poster-card .card-trailer {
        border-top-left-radius: var(--b5-border-radius);
    }
    > div:last-child .poster-card .card-image,
    > div:last-child .poster-card .card-trailer {
        border-bottom-left-radius: var(--b5-border-radius);
    }
    .poster-card-hover-scale:hover {
        transform: none;
    }
}

.poster-card-gridcol {
    .card-image,
    .card-trailer {
        aspect-ratio: 1/1!important
    }
}


.b5-banner {
    background-color: rgb(var(--bs-secondary-bg-rgb));
}

.divider-xxs { height: 0.25rem }
.divider-xs { height: 0.5rem }
.divider-sm { height: 1rem }
.divider-md { height: 2rem }
.divider-lg { height: 3rem }
.divider-xl { height: 4rem }

/* Router Transitions */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

.slide-fade-enter-active {
transition: all 0.3s ease-out;
}

.slide-fade-leave-active {
transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
}

.slide-fade-enter-from,
.slide-fade-leave-to {
transform: translateX(20px);
opacity: 0;
}

.bounce-enter-active {
animation: bounce-in 0.5s;
}
.bounce-leave-active {
animation: bounce-in 0.5s reverse;
}
@keyframes bounce-in {
0% {
    transform: scale(0);
}
50% {
    transform: scale(1.25);
}
100% {
    transform: scale(1);
}
}


.switch {
	position: relative;
	display: inline-block;
	width: 38px;
	height: 22px;

	/* Hide default HTML checkbox */
	input {
		display:none;
    }
	input:focus + .slider {
        box-shadow: 0 0 1px rgb(var(--bs-primary-rgb));
    }

	input:checked + .slider:before {
        -webkit-transform: translateX(16px);
        -ms-transform: translateX(16px);
        transform: translateX(16px);
    }

	/* The slider */
	.slider {
		background-color: rgb(var(--bs-secondary-bg-rgb));
		position: absolute;
		cursor: pointer;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		-webkit-transition: .4s;
		transition: .4s;
		width: 38px;
		height: 22px;
    }
	.slider:before {
        position: absolute;
        content: "";
        height: 14px;
        width: 14px;
        left: 4px;
        bottom: 4px;
        background-color: rgb(var(--bs-body-bg-rgb));
        -webkit-transition: .4s;
        transition: .4s;
    }

    .slider.round {
        border-radius: 34px;
    }
    .slider.round:before {
        border-radius: 50%;
    }
}
.switch-lg {
    width: 60px;
    height: 34px;

    .slider:before {
        width: 26px;
        height: 26px;
        left: 4px;
        bottom: 4px;
    }

    input:checked + .slider:before {
        -webkit-transform: translateX(26px);
        -ms-transform: translateX(26px);
        transform: translateX(26px);
    }
}

.switch, .switch-lg {
    input.default:checked + .slider {
        background-color: #444;
    }
    input.primary:checked + .slider {
        background-color: rgb(var(--bs-primary-rgb));
    }
    input.success:checked + .slider {
        background-color: rgb(var(--bs-success-rgb));
    }
    input.info:checked + .slider {
        background-color: rgb(var(--bs-info-rgb));
    }
    input.warning:checked + .slider {
        background-color: rgb(var(--bs-warning-rgb));
    }
    input.danger:checked + .slider {
        background-color: rgb(var(--bs-danger-rgb));
    }
}


/* B5 Nav ios like */
.b5-nav-ios {
	background-color: var(--bs-secondary-bg);
	padding: 0.25rem;
	border-radius: 8px;
	position: relative
}
.b5-nav-ios.nav-sm {
	font-size: 0.85rem;
}
.b5-nav-ios.nav-sm .nav-link {
	padding: 0.3rem 0.5rem;
}
.b5-nav-ios .nav-link,
.fc .fc-button-group {
	background-color: var(--bs-secondary-bg);
	outline: none;
	box-shadow: none;
	cursor: pointer;
	font: inherit;
	color: var(--bs-body-color);
	border: 0px solid var(--bs-secondary-bg);
	border-radius: 8px;
}
.b5-nav-ios .nav-link.active,
.fc .fc-button-group .fc-button-primary.fc-button-active {
	background-color: var(--bs-body-bg);
	box-shadow: 0px 1px 4px rgba(0,0,0,0.2);
	font-weight: 700;
	position: relative;
	z-index:2;
}

.b5-nav-ios.rounded-pill .nav-link {
	border-radius: 50rem!important;
}

.b5-nav-ios.with-dividers .nav-item:not(:first-child):after {
	height: 60%;
	display: block;
	content: '';
	width: 1px;
	background: #CCCCCF;
	position: absolute;
	top: 20%;
	margin: auto;
	z-index: 1;
}


.gradient-xl-pink-blue-h-animated {
    background-image:linear-gradient(120deg, #ff94f1 7.63%, #978aff 37.94%, #00d2e5 65.23%, #8ffff8 92.12%);
    background-size: 400% 400%;
    animation: bgGradientAnimation 12s ease infinite;
}
@keyframes bgGradientAnimation {
    0% {
        background-position: 0% 50%
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

.b5-anim-infinity-zoom-loop {
    animation: infinityZoomLoop 35s linear infinite;
}
@keyframes infinityZoomLoop {
    0% {
        transform: scale(1,1);
    }
    50% {
        transform: scale(1.15, 1.15);
    }
    100% {
        transform: scale(1,1);
    }
}


.b5-toast {
    z-index: var(--b5-zindex-b5toast);
}
.toast-square-center {
    --bs-bg-opacity: 0.7;
    position:fixed;
    top:50%;
    left:50%;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    text-align: center;
    padding: 2rem;
    background-color: rgba(var(--bs-secondary-bg-rgb), var(--bs-bg-opacity))!important;

    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    user-select: none !important;

    transform: translate(-50%, -50%) !important;
    border-radius: var(--bs-border-radius-xl) !important;

    --bs-text-opacity: 1;
    color: var(--bs-emphasis-color) !important;

    .msg {
        font-size:0.75rem;
    }
}
.toast-top-pill {
    --bs-bg-opacity: 0.8;
    position:fixed;
    top:50px;
    left:50%;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    text-align: center;
    padding: 1rem 2rem;
    background-color: rgba(var(--bs-secondary-bg-rgb), var(--bs-bg-opacity))!important;

    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    user-select: none !important;

    transform: translateX(-50%) !important;
    border-radius: 5rem;

    --bs-text-opacity: 1;
    color: var(--bs-emphasis-color) !important;

    .b5-toast-body {
        display: flex;
        width: 100%;
        align-items: center;
    }
}


.bg-body-app {
    background-color: rgb(var(--bs-secondary-bg-rgb));
    --bs-bg-rgb: var(--bs-secondary-bg-rgb);
}



[data-bs-theme="dark"] { /* tema extra dark */
    --bs-body-color: #dee2e6;
    --bs-body-color-rgb: 222, 226, 230;
    --bs-body-bg: #000;
    --bs-body-bg-rgb: 0, 0, 0;
    --bs-emphasis-color: #fff;
    --bs-emphasis-color-rgb: 255, 255, 255;
    --bs-secondary-color: rgba(222, 226, 230, 0.75);
    --bs-secondary-color-rgb: 222, 226, 230;
    --bs-secondary-bg: #212529;
    --bs-secondary-bg-rgb: 33, 37, 41;
    --bs-tertiary-color: rgba(222, 226, 230, 0.5);
    --bs-tertiary-color-rgb: 222, 226, 230;
    --bs-tertiary-bg: #1a1d20;
    --bs-tertiary-bg-rgb: 26, 29, 32;
    --bs-heading-color: inherit;
    --bs-link-color: #6ea8fe;
    --bs-link-hover-color: #8bb9fe;
    --bs-link-color-rgb: 110, 168, 254;
    --bs-link-hover-color-rgb: 139, 185, 254;
    --bs-code-color: #e685b5;
    --bs-highlight-color: #dee2e6;
    --bs-highlight-bg: #664d03;
    --bs-border-color: #2b2b2b;
    --bs-list-group-border-color: var(--bs-border-color);
    --bs-border-color-translucent: rgba(255, 255, 255, 0.15);
    --bs-form-valid-color: #75b798;
    --bs-form-valid-border-color: #75b798;
    --bs-form-invalid-color: #ea868f;
    --bs-form-invalid-border-color: #ea868f;
}
[data-bs-theme=dark] .bg-body-app {
    /* background-color: var(--bs-dark-bg-subtle);
    --bs-bg-rgb: var(--bs-dark-bg-subtle); */
    --bs-bg: #111315;
    --bs-bg-rgb: 17, 19, 21;
    --bs-bg: #000;
    --bs-bg-rgb: 0,0,0;
    background-color: rgb(var(--bs-bg-rgb));
}
[data-bs-theme=dark] .list-group {
    --bs-list-group-bg: #111315
}


.b5-lazy {
    cursor: wait;
    background-image:linear-gradient(120deg, rgb(var(--bs-tertiary-bg-rgb)) 40%, rgb(var(--bs-secondary-bg-rgb)) 48%, rgb(var(--bs-secondary-bg-rgb)) 52%, rgb(var(--bs-tertiary-bg-rgb)) 60%);
    background-size: 400% 400%;
    animation: b5placeholderanimation 2.5s ease infinite;
}
.b5-lazy-loaded {
    animation-duration: 1s;
    animation-fill-mode: both;
    animation-name: fadeIn;
    object-fit: cover;
}

@keyframes b5placeholderanimation {
    0% {
        background-position: 0% 0%
    }
    100% {
        background-position: 100% 100%;
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
} 


.resize-none { resize:none; }


.nav-blah .fa-stack .fa-square { color:#9ca3af; }
.nav-manage-page .fa-stack .fa-square { color:#f59e0b; }
.nav-manage-event .fa-stack .fa-square { color:#ea580c; }
.nav-manage-post .fa-stack .fa-square { color:#ef4444; }
.nav-manage-short .fa-stack .fa-square { color:#db2777; }
.nav-manage-course .fa-stack .fa-square { color:#c026d3; }
.nav-manage-podcast .fa-stack .fa-square { color:#7c3aed; }
.nav-manage-testimonial .fa-stack .fa-square { color:#4f46e5; }
.nav-manage-navigation .fa-stack .fa-square { color:#3b82f6; }
.nav-manage-fitmarathon .fa-stack .fa-square { color:#0284c7; }
.nav-manage-team-members .fa-stack .fa-square { color:#0891b2; }
.nav-manage-team-settings .fa-stack .fa-square { color:#0d9488; }
.nav-manage-quote .fa-stack .fa-square { color:#bc560a; }
.nav-fitmarathon-info .fa-stack .fa-square { color: red; }
.nav-fitmarathon-rank .fa-stack .fa-square { color: orange; }
.nav-fitmarathon-teams .fa-stack .fa-square { color: purple; }
.nav-fitmarathon-progress .fa-stack .fa-square { color: blue; }
.nav-tool-ytfeed .fa-stack .fa-square { color: #ed1515; }
.nav-tool-recognition-canva .fa-stack .fa-square { color: #299030; }
.nav-tool-bizwork-usertag .fa-stack .fa-square { color: #c4544a; }
.nav-tool-bizwork-recognition .fa-stack .fa-square { color: #438e96; }
.nav-tool-lifetime .fa-stack .fa-square { color: #8b716f; }


@media (max-width: 991.98px) {
    .modal-app {
        --bs-modal-margin: 4rem 0 0;

        .modal-dialog {
            height: calc(100% - 4rem);
        }

        .modal-content {
            margin-top: auto;
            border-radius: var(--b5-border-radius) var(--b5-border-radius) 0 0;
        }
    }
    .modal-app.fade:not(.show) .modal-dialog {
        transform: translate(0, 100px);
    }
}


.timeslot-color.timeslot-always { }
.timeslot-color.timeslot-morning { color: #f97316; }
.timeslot-color.timeslot-lunch { color: #65a30d; }
.timeslot-color.timeslot-afternoon { color: #047857; }
.timeslot-color.timeslot-dinner { color: #0369a1; }
.timeslot-color.timeslot-night { color: #7c3aed; }




/* Relationships tree */
  .tree ul {
    padding-top: 20px;
    position: relative;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
  }
  
  .tree li {
    float: left;
    text-align: center;
    list-style-type: none;
    position: relative;
    padding: 20px 5px 0 5px;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
  }
  
  .tree li::before,
  .tree li::after {
    content: "";
    position: absolute;
    top: 0;
    right: 50%;
    border-top: 1px solid #ccc;
    width: 50%;
    height: 20px;
  }
  
  .tree li::after {
    right: auto;
    left: 50%;
    border-left: 1px solid #ccc;
  }
  
  .tree li:only-child::after,
  .tree li:only-child::before {
    display: none;
  }
  .tree li:only-child {
    padding-top: 0;
  }
  .tree li:first-child::before,
  .tree li:last-child::after {
    border: 0 none;
  }
  .tree li:last-child::before {
    border-right: 1px solid #ccc;
    border-radius: 0 5px 0 0;
    -webkit-border-radius: 0 5px 0 0;
    -moz-border-radius: 0 5px 0 0;
  }
  
  .tree li:first-child::after {
    border-radius: 5px 0 0 0;
    -webkit-border-radius: 5px 0 0 0;
    -moz-border-radius: 5px 0 0 0;
  }
  .tree ul ul::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    border-left: 2px solid #dedede;
    width: 0;
    height: 20px;
  }
  
  .tree li a {
    border: 1px solid #ccc;
    padding: 5px 10px;
    text-decoration: none;
    color: #666;
    font-family: arial, verdana, tahoma;
    font-size: 11px;
    display: inline-block;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
  }
  .tree li a:hover,
  .tree li a:hover+ul li a {
    background: #c8e4f8;
    color: #000;
    border: 1px solid #94a0b4;
  }
  .tree li a:hover+ul li::after,
  .tree li a:hover+ul li::before,
  .tree li a:hover+ul::before,
  .tree li a:hover+ul ul::before {
    border-color: #94a0b4;
  }
  li.levelSide::before {
    height: 0px;
    border: none;
  }
  
  li.levelSide {
    position: absolute;
    left: 100%;
    padding-top: 0;
    top: 0;
    padding-left: 0;
  }
  
  li.levelSide::before {
        height: 0px;
        border: none;
      }
      
      li.levelSide {
        position: absolute;
        left: 100%;
        padding-top: 0;
        top: 0;
        padding-left: 0;
      }


.zoom-overlay {
    z-index:200;
}
.zoom-overlay .zoom-element {
    z-index:202;
}

/* Fix css bootstrap */
.list-group-item-action:focus, .list-group-item-action:hover { z-index: auto; }


#post-trailer,
#post-trailer .trailer-container,
#post-trailer .b5-video-player,
#post-trailer video {
    transition: all linear 0.15s
}
.fullscreen-trailer-actions { display: none }
#post-trailer.trailer-collapsed {
    max-height:55svh;
    overflow: hidden;
}
#post-trailer.trailer-expanded {
    background: #000!important;
    height: 100svh;
    max-height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    z-index: 101;
    display:flex;
    justify-content: center;
}
.trailer-expanded .toggle-trailer-area { display: none }
.trailer-expanded .fullscreen-trailer-actions {
    display: block
}
#post-trailer.trailer-expanded .trailer-container {
    
}
#post-trailer.trailer-expanded .gradient-bottom {
    display: none
}
.trailer-expanded .trailer-container {
    max-width: 100%;
}
#post-trailer.trailer-expanded .b5-video-player {
    width: 100%;
    height: 100vh;
    height: 100svh;
    padding-top:0!important
}
#post-trailer.trailer-expanded video {
    object-fit: contain;
    height: 100vh;
    height: 100svh;
}

.difficulty-indicator {
    display: inline-block;
    width: 0.5rem;
    height: 1rem;
    background: var(--bs-tertiary-color);
    border-radius:1rem;
    margin-left:0.15rem;
    opacity: 0.75;
}
.difficulty-indicator.active {
    background: var(--bs-emphasis-color);
    opacity:1;
}
.text-sm .difficulty-indicator {
    width: 0.3rem;
    height: 0.75rem;
}

.cmp-recipe-ingredients-section + .cmp-recipe-ingredients-section {
    margin-top: 3rem;
}

/* Videojs player */
/* trying to fixing videojs newest css problems... */
.videojs-container > :not(.videojs) { /* serve per mettere i tales video in full height. prende il primo div tra .videojs-container e .videojs in mezzo ai due */
	height: 100%;
}
.video-js {
	
	  &.vjs-seek-chapter {
		/* This class is added to the video.js element by the plugin by default. */
		display: block;
	  }
	
	  &.vjs-seek-chapter .vjs-progress-control .chapter-bar {
		  position: absolute;
		  height: 100%;
		  border-right: 1px solid rgba(0,0,0,0.3);
		  border-left: 1px solid rgba(0,0,0,0.3);
		  background: #e1e1e1;
		}
	
	  &.vjs-seek-chapter .vjs-time-tooltip {
		  white-space: nowrap;
	  }
	}
	
	
	.embed-responsive-1920by480::before {
		padding-top: 38%;
	}
	.embed-board-carousel::before {
		/* ratio: 16x9 */
		padding-top:56.25%
	}
	.embed-board-carousel-large::before {
		/* ratio: 16x9 */
		padding-top:56.25%
	}
	
	@media (min-width: 1200px) {
		.embed-responsive-lg-1920by480::before {
			padding-top: 38%;
		}
		
		.embed-responsive-lg-21by9::before {
			padding-top: 42.857143%!important;
		}
	}
	
	@media (min-width: 768px) { /* tablet */
		
		.embed-board-carousel::before {
			padding-top: 38%;
		}
		
		.embed-board-carousel-large::before {
			padding-top:38%
		}
	}
	
	
	
	
	/* VIDEO.JS PLAYER */
	/* Show the controls (hidden at the start by default) */
	  .video-js .vjs-control-bar { 
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
	  }
		
		.vjs-marker {
		  opacity: 1;
		  height: 12px;
		  background: rgba(255,255,255,0.8);
		  background: orange;
		  display: block;
		  position: absolute;
		  border-radius: 30px;
		  bottom: 0px;
		  width: 16px;
		  z-index:999;
		}
	  
	  .video-js .vjs-control-bar, .video-js .vjs-big-play-button {
		  background-color: rgba(0,0,0,0)!important;
		  background: rgb(0,0,0);
		  background: linear-gradient(0deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.4) 40%, rgba(0,0,0,0) 100%);
		  color: #fff;
		  text-shadow: 0px -2px 5px rgba(0,0,0,0.4)
	  }
	  
	  .video-js .vjs-menu-button .vjs-menu-content {
		  background: rgba(0,0,0,0.8)
	  }
	  
	  .vjs-big-play-button {
		  background: none!important;
		  border: none!important;
		  text-shadow: 0px 0px 10px rgba(0,0,0,0.4)!important
	  }
	  .vjs-big-play-button .vjs-icon-placeholder {
		  font-size:3rem;
	  }
	  
	  .video-js .vjs-progress-control {
		  position: absolute;
		  left: 0px;
		  bottom: 45px;
		  display: block;
		  width: 100%;
		  height: 10px;
	  }
	  .video-js .vjs-load-progress div {
		  background: none!important;
	  }
	  .video-js .vjs-play-progress {
		  background: teal!important
	  }
	  .video-js .vjs-slider {
		  background:none!important
	  }
	  
	  .vjs-remaining-time.vjs-time-control.vjs-control {
		  display:none;
	  }
	  .video-js .vjs-custom-control-spacer {
		  display:block!important;
		  width:100%;
	  }
	  
	  .video-js .vjs-button>.vjs-icon-placeholder,
	  .vjs-button>.vjs-icon-placeholder:before {
		  font-size:1.5rem!important;
		  line-height: 2.9rem!important;
			text-shadow: 0px -2px 5px rgba(0,0,0,0.4);
	  }
	  
	  .vjs-playback-rate .vjs-playback-rate-value {
		  font-size:1rem!important;
			line-height: 2.9rem!important;
	  }
	  
	  /*
		Player Skin Designer for Video.js
		http://videojs.com
	  
		To customize the player skin edit 
		the CSS below. Click "details" 
		below to add comments or questions.
		This file uses some SCSS. Learn more  
		at http://sass-lang.com/guide)
	  
		This designer can be linked to at:
		https://codepen.io/heff/pen/EarCt/left/?editors=010
	  */
	  .video-js {
		/* The base font size controls the size of everything, not just text.
		   All dimensions use em-based sizes so that the scale along with the font size.
		   Try increasing it to 15px and see what happens. */
		font-size: 10px;
		/* The main font color changes the ICON COLORS as well as the text */
		color: #fff;
	  }
	  
	  /*.video-js.vjs-user-active .vjs-big-play-button,*/
	  .video-js.vjs-paused .vjs-big-play-button {
		  display: block;
	  }
	  
	  /* The "Big Play Button" is the play button that shows before the video plays.
		 To center it set the align values to center and middle. The typical location
		 of the button is the center, but there is trend towards moving it to a corner
		 where it gets out of the way of valuable content in the poster image.*/
	  .vjs-default-skin .vjs-big-play-button {
		/* The font size is what makes the big play button...big. 
		   All width/height values use ems, which are a multiple of the font size.
		   If the .video-js font-size is 10px, then 3em equals 30px.*/
		font-size: 3em;
		/* We're using SCSS vars here because the values are used in multiple places.
		   Now that font size is set, the following em values will be a multiple of the
		   new font size. If the font-size is 3em (30px), then setting any of
		   the following values to 3em would equal 30px. 3 * font-size. */
		/* 1.5em = 45px default */
		line-height: 2em;
		height: 2em;
		width: 2.5em;
		/* 0.06666em = 2px default */
		border: 0.06666em solid #fff;
		/* 0.3em = 9px default */
		border-radius: 5.3em;
		/* Align center */
		left: 50%;
		top: 50%;
		margin-left: -1.25em;
		margin-top: -1em;
	  }
	  
	  /* The default color of control backgrounds is mostly black but with a little
		 bit of blue so it can still be seen on all-black video frames, which are common. */
	  .video-js .vjs-control-bar,
	  .video-js .vjs-big-play-button,
	  .video-js .vjs-menu-button .vjs-menu-content {
		/* IE8 - has no alpha support */
		background-color: #3e4554;
		/* Opacity: 1.0 = 100%, 0.0 = 0% */
		background-color: rgba(62, 69, 84, 0.7);
	  }
	  
	  /* Slider - used for Volume bar and Progress bar */
	  .video-js .vjs-slider {
		background-color: #8e98ac;
		background-color: rgba(142, 152, 172, 0.5);
	  }
	  
	  /* The slider bar color is used for the progress bar and the volume bar
		 (the first two can be removed after a fix that's coming) */
	  .video-js .vjs-volume-level,
	  .video-js .vjs-play-progress,
	  .video-js .vjs-slider-bar {
		background: #fff;
	  }
	  
	  /* The main progress bar also has a bar that shows how much has been loaded. */
	  .video-js .vjs-load-progress {
		/* For IE8 we'll lighten the color */
		background: #d8dbe2;
		/* Otherwise we'll rely on stacked opacities */
		background: rgba(142, 152, 172, 0.5);
	  }
	  
	  /* The load progress bar also has internal divs that represent
		 smaller disconnected loaded time ranges */
	  .video-js .vjs-load-progress div {
		/* For IE8 we'll lighten the color */
		background: white;
		/* Otherwise we'll rely on stacked opacities */
		background: rgba(142, 152, 172, 0.75);
	  }
	  
	  
	  
	  
	  
	  .vjs-overlays {
		  display:none;
		  background:red;
	  }
	  .vjs-playing. .vjs-overlay,
	  .vjs-paused .vjs-overlay {
		  display: block
	  }
	  
	  
	  
	  img#vjs-logobrand-image {
		  position: absolute;
		  top: 10px;
		  right: 10px;
		  transition: visibility 0.1s ease 0s, opacity 0.1s ease 0s;
		  visibility: visible;
		  width:30px;
		  height:30px;
		  opacity:0.5
	  }
	  .vjs-user-inactive img#vjs-logobrand-image {
		  visibilitys: hidden;
	  }
	  .vjs-user-inactive.vjs-paused img#vjs-logobrand-image {
		  visibility: visible;
	  }
	  .vjs-ad-playing a#vjs-logobrand-image-destination {
		  displays: none;
	  }
	  
	  
	  .badge-live-streaming {
		  background:rgba(255,0,0,0.8);
		  -webkit-animation: pulseOpacity 3s infinite ease-in-out;
		  -o-animation: pulseOpacity 3s infinite ease-in-out;
		  -ms-animation: pulseOpacity 3s infinite ease-in-out; 
		  -moz-animation: pulseOpacity 3s infinite ease-in-out; 
		  animation: pulseOpacity 3s infinite ease-in-out;
	  }
	  
	  @-webkit-keyframes pulseOpacity {
		  0% { opacity: 0.7; }
		  50% {  opacity: 1; }
		  100% {  opacity: 0.7; }
	  }
	  
	  @keyframes  pulseOpacity {
		0% { opacity: 0.7; }
		  50% {  opacity: 1; }
		  100% {  opacity: 0.7; }
	  }
	  
	  @-webkit-keyframes pulse {
		  0% { -webkit-transform: scale(0.9); opacity: 0.7; }
		  50% { -webkit-transform: scale(1); opacity: 1; }
		  100% { -webkit-transform: scale(0.9); opacity: 0.7; }
	  }
	  
	  @keyframes  pulse {
		  0% { transform: scale(0.9); opacity: 0.7; }
		  50% { transform: scale(1); opacity: 1; }
		  100% { transform: scale(0.9); opacity: 0.7; }
	  }
	  
	  
	
		.hide-on-lightmode {
		display:none
	}
	



/* Ultimate videojs skin */
.video-js .vjs-control-bar {
	height: 3rem;
}
.video-js .vjs-progress-holder {
	height: 0.5rem!important;
}
.video-js .vjs-play-progress {
	background: var(--bs-primary)!important;
}
.video-js .vjs-big-play-button {
	width: 4rem;
	font-size: 3rem;
	top: 50%;
	left: 50%;
	margin-left: -2rem;
	margin-top: -2rem;
	height: 1.6rem;
	
	background: hsla(0,0%,100%,.65)!important;
	-webkit-backdrop-filter: saturate(180%) blur(20px);
	backdrop-filter: saturate(180%) blur(20px);
	height: 4rem;
	border-radius: 2rem;
	color: var(--bs-primary);
	line-height: 4rem;
	padding: 1rem;
	text-align: center;
	text-shadow: none!important;
	box-shadow: 0px 0px 10px rgba(0,0,0,0.3);
}



/* Videojs minimal player */
.b5-vjs-fullscreen .vjs-theme-minimal { /* es: post trailer verticale */
    .vjs-volume-panel {
        top: var(--b5-top-safe-area-height);
    }
    button.vjs-subs-caps-button {
        top: var(--b5-top-safe-area-height);
    }
    .vjs-subs-caps-button .vjs-menu {
        top: var(--b5-top-safe-area-height);
    }
    .vjs-text-track-cue {
        padding-bottom: var(--b5-bottom-safe-area-height);
    }
    .vjs-text-track-cue {
        font-size: 1.25rem!important;
    }
}
.vjs-theme-minimal {
    .vjs-big-play-button,
    .vjs-volume-panel.vjs-hover .vjs-volume-control,
    .vjs-volume-control,

    .vjs-play-control,
    .vjs-play-control .vjs-icon-placeholder::before, /* adesso ho un nuovo pulsante custom */
    /* .vjs-fullscreen-control,
    .vjs-picture-in-picture-control,
    .vjs-playback-rate, */
    .vjs-texttrack-settings
    { display: none!important; }

    .vjs-current-time {
        display: block!important;
        position: absolute;
        bottom:0.5rem;
        left:0.5rem;
        height:auto;
        font-weight:bold;
        font-size:0.75rem;
        text-align: left;
    }
    .vjs-duration {
        display: block!important;
        position: absolute;
        bottom:0.5rem;
        right:0.5rem;
        height:auto;
        font-weight:bold;
        font-size:0.75rem;
        text-align: right;
    }

    /* Pulsante velocità */
    div.vjs-playback-rate {
        position: absolute;
        right: 7rem;
        height: 3rem;
        bottom: 1rem;
    }
    button.vjs-playback-rate {
        position: absolute;
        bottom: 1rem;
        right: 7rem;
        height: 3rem;
        min-height: 3rem;
        text-align: right;
    }
    .vjs-playback-rate .vjs-menu {
        position: absolute;
        top: -130%;
        bottom: auto;
        left: auto;
        right: 0%;
    }
    .vjs-playback-rate .vjs-menu .vjs-menu-content {
        top: 0;
    }

    /* Pulsante pip */
    .vjs-picture-in-picture-control {
        position: absolute;
        bottom: 1rem;
        height: 3rem;
        right: 4rem;
    }

    /* Pulsante fullscreen */
    .vjs-fullscreen-control {
        position: absolute;
        bottom: 1.5rem;
        height: 3rem;
        right: 1rem;
    }

    /* Pulsante volume */
    .vjs-volume-panel {
        position: absolute;
        right: 1rem;
        height: auto;
        min-height: 3rem;
    }
    .vjs-volume-panel.vjs-hover,
    .vjs-volume-panel:hover { width: auto!important }

    /* Pulsante sottotitoli */
    div.vjs-subs-caps-button {
        right:2rem;
        height: auto;
        margin-bottom: auto;
    }
    button.vjs-subs-caps-button {
        position: absolute;
        right: 2rem;
        height: auto;
        min-height: 3rem;
        text-align: right;
    }
    .vjs-subs-caps-button .vjs-menu {
        position: absolute;
        bottom:auto;
        left: auto;
        right: 100%;
        margin-top:2rem!important;
        margin-bottom:0!important;
    }
    .vjs-subs-caps-button .vjs-menu .vjs-menu-content {
        bottom: 0;
    }

    /* Menu dropdown generico */
    .vjs-subs-caps-button .vjs-menu {
        position: absolute;
        min-width: 8rem;
        width: 100%;
        max-width: 10rem;
    }
    .vjs-menu .vjs-menu-content {
        position:relative;
        background:#fff;
        background: rgba(255,255,255,0.75);
        color: #000;
        border-radius:0.35rem;
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
    }
    .vjs-menu-item.vjs-selected {
        font-weight: bold;
    }

    .vjs-control-bar {
        height: 100%!important;
        background: transparent!important;
        background: none!important;
        text-shadow: none;
    }

    .vjs-progress-control {
        position: absolute;
        bottom: 3rem;
        left: 0;
        display: block;
        width: 100%;
        height: 0.3rem;
        padding: 0 1rem;
    }
    :has(.vjs-progress-control ~ .vjs-fullscreen-control:not(.vjs-hidden)) .vjs-progress-control {
        padding-right:4rem;
    }
    :has(.vjs-progress-control ~ .vjs-fullscreen-control:not(.vjs-hidden)) .vjs-duration {
        right: 4rem;
    }
    .vjs-progress-control .vjs-progress-holder {
        margin: 0!important
    }
    .vjs-load-progress {
        background:rgba(255,255,255,0.3)!important;
    }
    .vjs-progress-holder {
        height: 0.3rem!important;
        background: rgba(255,255,255,0.45)!important;
        border-radius:1rem;
    }
    .vjs-play-progress:before {
        font-size: 1rem!important;
        margin-top:0rem
    }
    .vjs-play-progress {
        background: #fff!important;
        border-radius:1rem;
    }

    /* Pulsante play/pausa */
    /* .vjs-play-control {
        position:absolute;
        top:50%;
        left:50%;
        bottom: auto;
        right: auto;
        width: 8rem;
        height: 8rem;
        transform: translate(-50%, -50%);
        background: radial-gradient(circle, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0) 70%);
        border-radius: 4rem;
    }
    .vjs-play-control .vjs-icon-placeholder::before {
        top: 50%;
        left: 50%;
        width: 4rem;
        height: 4rem;
        line-height: 4rem;
        margin: -1.5rem 0 0 -2rem;
        font-size: 4rem!important;
        text-shadow: none;
    } */

    /* Subtitles */
    .vjs-text-track-display,
    .video-js.vjs-controls-disabled .vjs-text-track-display, .video-js.vjs-user-inactive.vjs-playing .vjs-text-track-display {
        bottom: 0!important;
    }
    .vjs-text-track-display > div {
        margin: 0!important;
        bottom:0!important;
        height: 100%!important
    }
    .vjs-text-track-cue {
        width:100%!important;
        position: absolute;
        bottom:0rem!important;
        left:0!important;
        right:0!important;
        font-size: 0.9rem!important;
        inset: 0!important;
        margin-top:auto;
        background: linear-gradient(0deg, rgba(0,0,0,0.75) 50%, rgba(0,0,0, 0) 100%);
        display:inline-table;
        height:auto!important;
        padding-top: 3rem!important;
        padding-bottom: 2rem!important;
        transition: display linear 0.15s, opacity linear 0.15s, padding linear 0.15s
    }
    .vjs-text-track-cue > div {
        background: transparent!important;
        color: #fff;
        font-weight: 550;
    }

}
.vjs-theme-minimal .b5-vjs-btn-big-play-toggle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    display: none;
    font-size: 2rem;
    padding: 1rem;
    text-shadow: none;
    width: auto;
    height: auto;
    background: radial-gradient(circle, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0) 70%);
    border-radius: 2rem;
    z-index: 10;
    min-width:2rem;
    min-height:2rem;
}
.vjs-theme-minimal .b5-vjs-btn-big-play-toggle i::before { content: "\f04c"; }
.vjs-theme-minimal.vjs-paused .b5-vjs-btn-big-play-toggle i::before { content: "\f04b"; }

.vjs-user-active .b5-vjs-btn-big-play-toggle {
    display: inline-table;
}

/* Player hover o in pause */
.vjs-theme-minimal:not(.vjs-playing)
/*,
.vjs-theme-minimal.vjs-user-active*/ {
    .b5-vjs-btn-big-play-toggle {
        display: inline-table;
    }
    .vjs-text-track-display,
    .vjs-text-track-display > div,
    .vjs-text-track-cue {
        display: none;
    }
}

.vjs-user-inactive.vjs-paused .vjs-text-track-cue,
.vjs-user-active .vjs-text-track-cue {
    padding-bottom:6rem!important;
    font-size: 1.15rem!important;
}

@media (min-width: 992px) {
    .vjs-theme-minimal .vjs-text-track-cue {
        font-size: 1.65rem!important;
    }
    .vjs-user-inactive.vjs-paused .vjs-text-track-cue,
    .vjs-user-active .vjs-text-track-cue {
        padding-bottom:6rem!important;
        font-size: 1.35rem!important;
    }

    .vjs-theme-minimal .b5-vjs-btn-big-play-toggle {
        line-height: 3.5rem;
        font-size: 3.5rem;
        width: 7rem;
        height: 7rem;
        border-radius: 3.5rem;
    }
}

.b5-vjs-noui {
    .vjs-control-bar,
    .vjs-button,
    .vjs-text-track-display,
    .vjs-text-track-cue { display: none!important; } 
}

/* VIDEO.JS chapters */
.b5-vjs-has-chapters .vjs-progress-holder,
.b5-vjs-has-chapters .vjs-load-progress { /* Se ci sono i capitoli, la progress diventa trasparente */
    background:rgba(255,255,255,0)!important;
}
.b5-vjs-has-chapters .vjs-play-progress {
    background:rgba(255,255,255,255,0.55)!important;
}


.chapters-container {
    /*
    overflow: hidden;
    */

    width: 100%;
    white-space: nowrap;
    position: absolute;
    top: 0;
    left: 0;
}

.chapter {
    /*
    height: 100%;
    background: #007bff;
    border-radius: 3px;
    text-align: center;
    color: white;
    line-height: 30px;
    font-size: 12px;
    */

    padding: 0px 1px;
    cursor: pointer;
    position: absolute;
}

.chapter-indicator {
    height: 6px;
    background: rgba(255,255,255,0.45);
    transition: background-color 0.3s;
}

.chapter:hover .chapter-indicator {
    background: rgba(255,255,255,0.7);
}

.chapter .chapter-tooltip {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: #fff;
    padding: 5px;
    border-radius: 3px;
    font-size: 12px;
    white-space: nowrap;
}

.chapter:hover .chapter-tooltip {
    display: block;
}



[data-bs-theme="dark"] .b5-modern-image-gradient-to-black {
    background-color: #000;
    background: linear-gradient(180deg, rgba(0,0,0, 0.01), rgba(0,0,0, 1) 85%), 
    radial-gradient(ellipse at top left, rgba(var(--bd-palette-1-rgb), 0.5), transparent 50%), 
    radial-gradient(ellipse at top right, rgba(var(--bd-palette-2-rgb), 0.5), transparent 50%), 
    radial-gradient(ellipse at center right, rgba(var(--bd-palette-3-rgb), 0.5), transparent 50%), 
    radial-gradient(ellipse at center left, rgba(var(--bd-palette-4-rgb), 0.5), transparent 50%);
}
.b5-modern-image-gradient {
    background: linear-gradient(180deg, rgba(var(--bs-body-bg-rgb), 0.01), rgba(var(--bs-body-bg-rgb), 1) 85%), 
    radial-gradient(ellipse at top left, rgba(var(--bd-palette-1-rgb), 0.5), transparent 50%), 
    radial-gradient(ellipse at top right, rgba(var(--bd-palette-2-rgb), 0.5), transparent 50%), 
    radial-gradient(ellipse at center right, rgba(var(--bd-palette-3-rgb), 0.5), transparent 50%), 
    radial-gradient(ellipse at center left, rgba(var(--bd-palette-4-rgb), 0.5), transparent 50%);
}

/* Su dispositivi touch screen */
.modal-drag-to-close {
    display:none;
    padding: 0.75rem 1rem;
}
.modal-drag-to-close::before {
    content: " ";
    display: block;
    background:rgb(var(--bs-secondary-bg-rgb));
    border-radius:1rem;
    height:0.45rem;
    max-width: 50%;
    margin: auto;
}
@media (pointer:coarse) {
    .modal-drag-to-dismiss {
        .modal-close-button { display: none; }
        .modal-drag-to-close { display:block; }
    }
}

/* Holdable */
.list-group-item.b5-holdable:before {
    content: ' ';
    position: absolute;
    top:0;
    left:0;
    height: 100%;
    width:100%;
    z-index:1;
}
.list-group-item.b5-holdable > * {
    position: relative;
    z-index: 1;
}
.list-group-item.b5-holdable.hold-process:before {
    animation: example linear var(--duration);
}
.list-group-item.b5-holdable.hold-done:before {
    background:rgb(var(--bs-success-rgb));
    width:100%;
}

@keyframes example {
    from {
        width: 0;
        background-color: transparent;
    }
    to {
        background-color: rgb(var(--bs-success-rgb));
        width: 100%;
    }
  }