/* for the video end overlay */
.custom-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.2); /* More transparent background */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.custom-overlay.hidden {
    display: none;
}

.custom-overlay-content {
    background-color: rgba(255, 255, 255, 0.8); /* Slightly less transparent */
    padding: 10px; /* Less padding */
    border-radius: 5px; /* Smaller border radius */
    text-align: center;
    max-width: 80%; /* Restrict max width */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Add a subtle shadow for depth */
}

.custom-overlay-btn {
    display: block;
    width: 90%; /* Slightly narrower buttons */
    margin: 5px auto; /* Less margin */
    padding: 5px; /* Less padding */
    background-color: #6c757d; /* Muted button color */
    color: white;
    border: none;
    border-radius: 3px; /* Smaller border radius */
    cursor: pointer;
    font-size: 0.9em; /* Smaller font size */
}

.custom-overlay-btn:hover {
    background-color: #5a6268; /* Slightly darker on hover */
}

.custom-overlay-btn:active {
    background-color: #4e555b; /* Even darker when active */
}

.custom-overlay input[type="checkbox"] {
    margin-right: 5px;
}

.custom-overlay label {
    font-size: 0.8em; /* Smaller label font size */
    color: #333; /* Darker text color for contrast */
}

.custom-overlay p {
    margin: 0;
    font-size: 0.8em; /* Smaller font size for paragraphs */
    color: #333; /* Darker text color for contrast */
}
#swipeLottieContainer{
  display:flex;
  flex-direction: column;
  align-items:center;
}
#click-lottie-container{
  display:flex;
  justify-content: center;

  position:relative;
  z-index:9999;
  top:calc(100vh - 100px);
}
#click-lottie-container.hidden{
  display:none;
}

.masked-overflow-caption {
	/*
	* Prefixed by https://autoprefixer.github.io
	* PostCSS: v8.4.14,
	* Autoprefixer: v10.4.7
	* Browsers: last 4 version
	*/

		pointer-events: none;
		z-index:999;

		width: 92%;
	    bottom: 100px;
	    height: 220px;
	    position: absolute;
			overflow-y: auto;
}
.masked-overflow-caption.nocaptions {
	display:none!important;
}
 .masked-overflow-caption.hicaptions {
	top:90px!important;
	width:80%!important;
}
.masked-overflow-caption.lowcaptions {
 bottom:0px!important;

}


.masked-overflow {
	/*
	* Prefixed by https://autoprefixer.github.io
	* PostCSS: v8.4.14,
	* Autoprefixer: v10.4.7
	* Browsers: last 4 version
	*/
		pointer-events: none;
		z-index:2147483647;
		font-size: 14px;
		font-weight: bolder;
		color:white;
		width: 100%;
	    bottom: 42px;
	    height: 290px;
	    position: absolute;
			overflow-y: auto;
}
#sscaption {
	font-family: 'PT Sans Caption', sans-serif;
  text-align: center;
	font-size: 1.3em;
  display: inline-block;
	font-weight: bold;
  color: #eee;
  text-shadow: -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black, 1px 1px 0 black;
	/* background-color:white;
  opacity: 0; */
	padding: 0 6px;
	margin: 0 3px;
	border-radius:4px;
}
.swiper-slide-container {
  display: none; /* Initially hidden */
  position: absolute; /* Allow wrappers to overlap */
  width: 100%; /* Adjust as necessary */
  height: 100%; /* Adjust as necessary */
  left: 0; /* Align to the parent */
  top: 0; /* Align to the parent */
  transition: transform 0.2s;
  z-index:2;
}

/* Blur effect during transition */
.swiper-slide-container-transitioning {
filter: blur(2px);
}

/* .slide-in-right, .slide-out-left {
  transform: translateX(100%);
}

.slide-in-left, .slide-out-right {
  transform: translateX(-100%);
} */
.slide-in-right {
  transform: translateX(100%);
}
.slide-in-left {
  transform: translateX(-100%);
}
/* .slide-in-right, .slide-in-left {
  transform: translateX(0);
} */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.fade-in {
  animation: fadeIn 0.5s forwards;
}
.slide-out-right {
  transform: translateX(100%);
}

.slide-out-left {
  transform: translateX(-100%);
}

body, html {
  height: 100%;
  margin: 0;
  background-color:#000000;
  font-family: Arial, sans-serif;
  overflow: hidden;  /* Prevent scrolling outside of swiper container */
  background-color: rgba(255,255,255,0.2);
}
.side-navbar {
	font-size:1.1em!important;
  position: fixed;
  top: 64px; /* Adjust this value to position below the top navbar */
  left: 0;
  width: 30px; /* Desired width of the side navbar */
  /* height: calc(100% - 50px); Adjust height based on top navbar height */
  color: #fff; /* Text color */
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 999; /* Ensure it's below the top navbar */
}

.side-navbar a {
  color: #fff; /* Icon color */
  /* padding: 10px; */
  text-decoration: none;
  display: flex;
  justify-content: center;
  align-items: center;
}

.side-navbar a:hover {
  background-color: rgba(255, 255, 255, 0.1); /* Hover effect */
}
.navbar-top, .navbar-bottom {
  position: absolute;
  width: 100%;  /* Ensure they span the full width */
  z-index: 1000;  /* Keep them above the swiper slides */
  height: 50px;   /* Or whatever height you want */
  color: #fff;   /* Text color */
  background-color: transparent;  /* Transparent background */
  display: flex;
  align-items: center;
  justify-content: center; /* Center content inside the header/footer */
}

.navbar-top {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  border: 1px solid rgba(255, 255, 255, .25);
  display: flex;
  justify-content: flex-start; /* This will spread the icons evenly */
  align-items: center;
  gap:5px;
  font-size:20px;

}
.navbar-bottom a, .navbar-bottom a:hover, .navbar-bottom a:visited{
  color:#fff;
  text-decoration: none;
  display:flex;
  align-items:center;
  gap:10px;
}
.navbar-bottom {
  bottom: 0;  /* Position at the bottom */
  overflow-x: auto;
  justify-content: center;

  width: 100%;
      left: 0;

  border: 1px solid rgba(255, 255, 255, .25);
  /* border-radius: 8px; */
  background-color: rgba(255, 255, 255, 0.45);
  box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.25);

  backdrop-filter: blur(8px);
}

.swiper-container {
  height: 100%;  /* Take up the full viewport height */
}

.swiper-slide {
  width: auto!important; /* Allows the slide to shrink to fit the content */
  display: flex;
  align-items: center;
  justify-content: center; /* Center content inside the slide */
}

/* Optional: Semi-transparent background for header/footer */
.navbar-top, .navbar-bottom {
  background-color: rgba(51, 51, 51, 0.9);  /* Semi-transparent black */
}
.scroll-mask {
  overflow: hidden; /* Hide overflow, including the scrollbar */
  max-height: 50px; /* Adjust based on your design needs */
      width: 100%;
}
.horizontal-scrolling-items {
  display: flex;
  font-size: 40px;

  justify-content: center; /* Center children horizontally */
  align-items: center; /* Center children vertically */
  flex-wrap: nowrap; /* Prevent wrapping */

  overflow-x: auto; /* Allows horizontal scrolling */
  white-space: nowrap; /* Keeps inline elements from wrapping */
  overflow-y: hidden; /* Make sure vertical overflow is hidden */
  margin-bottom: -18px; /* Adjust this value to effectively hide the scrollbar */


}
.footer-link {
  margin: 0 10px; /* Ensure there's space between buttons */
  /* Your existing button styles */
}

.horizontal-scrolling-items__item {
  white-space: nowrap;
  margin-left: 10px
}


.no-select {
  user-select: none; /* Standard syntax */
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
}
.footer-link {
  align-items: center;
  appearance: none;
  border: 0;
  border-radius: 3px;
  background-color: #555;
  box-shadow: rgba(45, 35, 66, .4) 0 2px 4px,rgba(45, 35, 66, .3) 0 7px 13px -3px,rgba(58, 65, 111, .5) 0 -3px 0 inset;
  box-sizing: border-box;
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  font-family: 'Roboto Condensed', sans-serif;
  height: 32px;
  justify-content: center;
  line-height: 1;
  list-style: none;
  overflow: hidden;
  padding-left: 8px;
  padding-right: 8px;
  padding-top: 2px;
  position: relative;
  text-align: left;
  text-decoration: none;
  transition: box-shadow .15s,transform .15s;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  white-space: nowrap;
  will-change: box-shadow,transform;
  font-size: 14px;
  margin-left:8px;
  margin-right:8px;
  margin-bottom:24px;
}

.footer-link:focus {
  box-shadow: #dddddd 0 0 0 1.5px inset, rgba(45, 45, 45, .4) 0 2px 4px, rgba(45, 45, 45, .3) 0 7px 13px -3px, #dddddd 0 -3px 0 inset;
}

.footer-link:hover {
  box-shadow: rgba(45, 45, 45, .4) 0 4px 8px, rgba(45, 45, 45, .3) 0 7px 13px -3px, #dddddd 0 -3px 0 inset;
  transform: translateY(-2px);
}

.footer-link.active {
  box-shadow: #3c4fe0 0 3px 7px inset;
  background-color: #555;

  border:2px solid white;
}
.footer-link {
    display: inline-block;
    /* Button styling */

    flex: 0 0 auto; /* Buttons don't grow or shrink */

}




/*imported from z9 */
.DivPlayerIconContainer {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 3;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
}
.DivPlayerIconL {
    width: 125px;
    height: 125px;
		position: absolute;
		z-index:2147483648;

		display:none;
		-webkit-background-size: contain;
		background-size: contain;
		background-repeat: no-repeat;
		-webkit-background-position: center center;
		background-position: center center;
		background-image: url(../images/playback.png);
		}


.DivMoreIconL {
    width: 85px;
    height: 85px;
		bottom:0px;
		position: absolute;
		z-index:2147483648;
		display:none;
	}