@charset "UTF-8";

body {
    margin: auto;
    padding: 0;
    display: flex;
	font-family: 'DM Sans', sans-serif; 
}


h1 {
    color: #000;
    font-family: 'DM Sans', sans-serif;
    font-size: 5.6vw; /*22px*/
    font-weight: 600;
}

h2 {
	color: #205D70;
	font-size: 4.58vw;/*18px*/
	font-weight: 600;
}

h3 {
	color: #ADA9AC;
	font-family: DM Sans;
	font-size: 4.07vw; /*16px*/
	font-weight: 600;
}

h4 { 
	color: #0E272D;
	font-family: DM Sans;
	font-size: 3.3vw; /*13px*/
	font-weight: 500;	
}

h5 {
	color: #485356;
	font-family: DM Sans;
	font-size: 3.18vw; /*12.5px*/
	font-weight: 500;
	line-height: normal;
	display: flex;
}

h6 {
	color: #356E7C;
	font-size: 2.8vw; /*11px*/
	font-weight: 500;
	text-decoration-line: underline;	
}

h7 {
	color: rgba(14, 39, 45, 0.71);
	font-family: DM Sans;
	font-size: 2.8vw; /*11px*/
	font-weight: 400;
}

h8 {
	color: #CDCDCD;
	font-family: DM Sans;
	font-size: 3.18vw; /*12.5px*/
	font-weight: 500;
	line-height: normal;
}

h9 {
	color: rgba(34, 57, 63, 0.69);
	font-size: 3.56vw; /*14px*/
	font-style: normal;
	font-weight: 400;	
	letter-spacing: 0.28px;
}

h10 {
	color: #728084;
	text-align: center;
	font-size: 2.54vw; /*11px*/
	font-weight: 500;
	line-height: normal;
}

h11 {
	color: #000;
	font-size: 5.1vw; /*20px*/
	font-weight: 400;
}

hr {
    border-top: 0.1px #F1F0F0; 
	width: 100%;
}

sup {
  font-size: 0.6em; /* Adjust the font size of the superscript */
  position: relative; /* Position the superscript relative to its parent */
  top: 0em; /* Adjust the vertical position as needed */
	margin-right: 0.5em;
	
}

.col {
    padding: 10px;
    border: 1px solid #ccc;
}

.col-1 {
    flex: 1;
}

.col-2 {
    flex: 2;
}

.col-3 {
    flex: 3;
}

.nav {
    position: fixed;
    width: 100%;
    height: 11.26%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
	text-align: center;
    justify-content: space-between;
    padding: 0  20vw;
	border-radius: 30px 30px 0px 0px;
	background: #17434E;
	bottom: 0;
	z-index: 1;
}

.nav_overlay {
    display: flex;
    gap: 80vw;
}

.nav_overlay svg {
    width: 7.63%; 
    height: 7.63%;
}

.nav img.panel {
    position: absolute;
    bottom: 6.45vh; /* Adjust positioning as needed */
    left:39.5vw;
    height: 9.03vh;
    z-index: 2; /* Ensure the panel is above the nav */
}


.nav img.panel1 {
    position: absolute;
    bottom: 6.45vh; /* Adjust positioning as needed */
    left: 14.5vw;
    height: 9.03vh;
    z-index: 2; /* Ensure the panel is above the nav */
}

.nav img.panel2 {
    position: absolute;
    bottom: 6.45vh; /* Adjust positioning as needed */
    right: 15vw;
    height: 9.03vh;
    z-index: 2; /* Ensure the panel is above the nav */
}


.nav h3{
	font-size: 2.29vw;
	font-weight: 600;
	color: #FFF;
	margin: 0;
	line-height: normal;
	
}


.nav2 {
	position: relative;
	z-index: 3;
	bottom: 3vh; 
}

.nav2 h3{
	font-size: 3vw;
}
.nav2 svg{
	margin-bottom: 4vh;
}

.nav3{
	display: none;
}


/*Logo Animation */
.app-container {
    max-width: 393px; /* Set maximum width */
    max-height: 853px; /* Set maximum height */
    width: 100%; /* Ensure content fills the container */
    height: 100%; /* Ensure content fills the container */
    border: 1px solid black; /* Optional: border for visualization */
    box-sizing: border-box; /* Include border in width/height calculations */
    /* Additional styles for your app */
}


/* Add this to your CSS file or within a <style> tag in your HTML file */

.Logo_container {
    display: flex;
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    width: 100vw; /* Example width, adjust as needed */
    height: 100vh; /* Example height, adjust as needed */
    /* Other styles for your .Logo1 class */
	background-color: #000000;
	 
}


.Logo {
    width: 100%; /* Use the width of the container */
    height: 100%; /* Use the height of the container */
    display: flex;
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
	position: relative;
	
}

/* You may need additional styles for the SVG */

.Overlay {
    position: absolute;
    align-content: center;
    left: 49%;
    width: 30%;
    height: 10%;
    background-color: rgba(0, 0, 0, 1); /* Adjust the color and opacity as needed */
    /* Additional styles for the overlay */
}

#icon {
	position: absolute;
    justify-content: center; /* Center horizontally */
    align-items: center;
	width: 54px;
	height: 84px;
	left: 51%;
	bottom: 52.2%;
}

#iconfull {
	position: absolute;
    justify-content: center; /* Center horizontally */
    align-items: center;
	width: 54px;
	height: 60px;
	left: 51%;
	bottom: 52.2%;
}

#iconshadow {
	position: absolute;
    justify-content: center; /* Center horizontally */
    align-items: center;
	width: 42px;
	height: 17px;
	left: 51%;
	bottom: 45%;
}

/*Home Page*/

.full-screen-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    margin-top: 92px;
}


.home {
	opacity: 0;
	visibility: hidden;
}
.container {
    display: flex;
    justify-content: space-between;
    align-items: center;
	/*border: 1px solid #ccc;*/
	width: 100vw;
	overflow-x: hidden;
}

.text-content {
    flex: 1; 
    margin-right: 0px; 
	padding-left: 35px;
	line-height: 1px;
	padding-right: 35px;
}

.image {
    max-width: 25.4vw; 
	padding-right: 29px;
}

.locationicon {
	padding-right : 1.27vw;
	width: auto;
}


/*Search Bar*/
.searchbar {
    display: flex;
    align-items: center; 
    border-radius: 21.5px;
    background: #FFF;
    box-shadow: 0px 1px 5px 1px rgba(0, 0, 0, 0.15);
    width: calc(100vw - 58px); 
    height: 52px;
    margin: 26px 29px 5px 29px; 
}

.searchbar svg {
	padding-left: 25px;
}

/*Genre Filte Bar*/
.genre {
	margin-top: 10px;
	padding-left: 20px;
	padding-right: 20px;
}


div.scrollmenu {
  overflow: auto; /* Enable horizontal scrolling */
  white-space: nowrap; /* Prevent items from wrapping */
	width: calc(100vw);
}

div.scrollmenu a {
  display: inline-block;
  text-align: center;
  text-decoration: none;
}

div.scrollmenu h5 {
  display: inline-flex; /* Display h5 tags inline */
  margin: 0; 
}

.list-item {
  	margin: 8px; /* Adjust the value to increase/decrease the gap */
	margin-right: 8px !important;
  	border-radius: 21.5px;
  	box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.25);
  height: 32px;
 	padding: 8px 15px 0px 15px;
  	text-align: center; /* Center text horizontally */
  	font-size: 12px;
  	color: #0e272d;
	justify-content: flex-start; 
	overflow: hidden; /* Hides overflowing content */
  text-overflow: ellipsis; /* Displays an ellipsis (...) to indicate text overflow */
  white-space: nowrap; 
	 transition: height 0.3s, border 0.3s, transform 0.3s;
  
  transform: translateX(0);
}


/* carousel */
* {box-sizing:border-box}
.slideshow-container {
  max-width: 100%;
  position: relative;
  margin: auto;
	margin-top: 30px;
	margin-bottom: 0px;
	overflow: hidden;
}

.slideshow-container img {
 width: calc(100vw - 40px);
height: auto;
  flex-shrink: 0; /* Prevent images from shrinking */
	margin-bottom: 0;
}

/* Hide the images by default */
.mySlides {
  display: none;
}


/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 10px;
  width: 10px;
  margin: 0 1px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}

/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

/*Coming Soon + Now Showing*/
.text_container {
    display: flex;
	margin-top: 20px;
    align-items: center; /* Align items vertically */
	width: 100vw;
}

.text_container h2,h6 {
	margin-bottom: 0;
}

.text-text {
	display: flex;
    align-items: center;
    width: 100%; /* Occupy full width */
}

.left{
	 padding-left: 29px; 
}
	
.right {
	padding-right: 29px; 
	color: #356E7C;
}

.pt {
	margin-top: -10px;
}
.movie-container {
	padding-left: 24px;
	width: calc(100vw);
	flex-wrap: nowrap;
	padding-right: 24px;
	padding-top: 1.76vh;
	padding-bottom: 1vh
}

.movie {
	box-sizing: border-box;
	display: inline-block;
	justify-content: space-between;
	position :relative;
	
	
}

.nows {
	cursor: pointer;
}

.movie img {
	height: auto;
	width: 33.33vw;
}

.text {
	margin: 0;
	display: flex;
	padding-left: 5%;
	align-items: center;
	margin-top: -1px;
	
}

.text h4 {
	margin: 0;
	text-align: left;
}

.star img {
	width: 15.95vw;
	margin: 0;
	padding-left: 5%;
}

.star {
	margin-top: -4px; 
}

.text img {
	width: 5.35vw;
	margin-top: 10%;
	justify-content: flex-end;
	position: absolute;
    bottom: 8px; 
    right: 5px;
}

.overlay {
    position: absolute;
    left: 1.82vw;
	top :0.6vh;
}

.ttext {
    color: white;
    font-size: 2.27vw; /* Adjust the text size */
	border-radius: 5.1vw;
	background: rgba(33, 33, 33, 0.70);
	height:5.6vw;
	width:5.6vw;
	justify-content: center;
    align-items: center;
	text-align: center;
	padding-top: 1.27vw;
}

/*Coming Soon*/
.ComingSoon {
	margin-top :40px;
}

.CS_Date {
	padding-left: 5%;
	margin-top: -4px;
}

.cs {
	padding-bottom: 50px;
}

/*Movie Page*/
.pad {
	padding-left: 8.9vw;
	padding-right:8.9vw;
}

.toggle{
	display: flex; 
}

.toggle h2 {
	font-size: 5.1vw !important;
	line-height: 1;
	padding-right: 10px;
	color: #205D70 !important;
}

.toggle h2 a {
	color: #205D70;
	text-decoration-line: none;
}

.toggle h3 a {
	color: #ADA9AC;
	text-decoration-line: none;
	line-height: 1;
}

.toggle-line {
	border-radius: 2px;
	background: #205D70;
	width: 15.3vw;
	height: 3px;
	margin-top : -10px;
	margin-left: 7.8vw;
	opacity: 0;
}

.movie_column {
	margin-top: 20px;
}

.column {
	float: left;
  	width: 33.3%;
}

.column_right {
	float: left;
	width: 66.6%;
	padding-left:0;
	box-sizing: border-box;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

.movie_column h2 {
	font-size: 4.83vw;
	color: #0E272D;
	margin :0;
}

.movie_column h4 {
	color: #072329;
	font-size: 3.43vw;
	font-weight: 600;
	margin-top: 3px;
}

.movie_column h5 {
	color: #22393F;
	font-size: 3.18vw;
	font-weight: 400;
}

.star1 img{
	width: 17.48vw;
}

.star1{
	margin-top: -20px;
}

.movie1 img {
	height: auto;
	width: 21.62vw;
}


.movie1 {
	box-sizing: border-box;
	display: inline-block;
	justify-content: space-between;
	position :relative;
	padding-bottom: 20px;
}

.first-line {
	line-height: 1;
	align-content: center;
	
}

.first-line img {
	width : 4.07vw;
	padding-left: 2px;
	margin-top :0px;
	margin-bottom: -1px;;
}

.cs_text h7{
	font-size: 3.05vw;
}

.cs_text h4 {
	margin-top: 5px;
	margin-bottom: 3px;
}

.cs_text img {
	padding-left: 5px;
}

.cs_toggle h2 a {
	color: #ADA9AC;
	text-decoration-line: none;
	font-size: 4.07vw;
}

.cs_toggle h3 a {
	color: #205D70;
	text-decoration-line: none;
	line-height: 1;
	font-size: 4.58vw;
}

.toggle-line {
	border-radius: 2px;
	background: #205D70;
	width: 15.3vw;
	height: 3px;
	margin-top : -10px;
	margin-left: 9vw;
	opacity: 0;
}


.overlay1 {
    position: absolute;
    left: -3px;
	top :-5px;
	border-radius: 11px;
	background: #FFF;
	box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.25);
	height: 20px;
	width: 20px;
	align-items: center;
	text-align: center;
}

.whitestorm_text {
	margin: 0;
	padding-top: 5px;
}

/* Define the height of the viewport container */
.viewport {
    height: 100vh; /* Full height of the viewport */
    width: calc(100vw - 70px);
    overflow: hidden; /* Hides the overflow content */
	visibility: hidden;
	opacity: 0;
}

/* Set the maximum height for the scrollable content */
.scrollable-content {
    max-height: 80vh; /* Maximum height of the scrollable content */
    overflow-y: auto; /* Enables vertical scroll if content exceeds the height */
	margin-top: 20px;
}

.scrollcontent {
    max-height: 100vh; 
	overflow: hidden;
	position: fixed;
}

.pad-btm {
	padding-bottom: 330px;
}

#cspage {
  display: none;
}

#nspage {
	display: block;
}

/*info*/
.fixed img{
	width: 100vw;
	height: 38.85vh;
}

.con {
	height: 100vh;
}

.overlay_back {
    position: absolute;
	align-items: center;
	text-align: center;
	left: 8%;
	top : 8.8%;
}

.overlay_favourite {
	position: absolute;
	align-items: center;
	text-align: center;
	right: 14%;
	top : 8.2%;
}

.overlay_share {
	position: absolute;
	align-items: center;
	text-align: center;
	right: 8%;
	top : 8.8%;
}

.overlay_play {
	position: absolute;
	align-items: center;
	text-align: center;
	right: 45%;
	left: 45%;
	top : 20%;
}

.popup_panel {
  width: 100%;
  max-height: 65vh; /* Adjust the maximum height as needed */
  border-radius: 30px 30px 0px 0px;
  border-top: 1px solid #D1CED1;
  background: #FFF;
  overflow-y: auto; /* Initially hide overflow */
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  transition: max-height 0.5s ease-in-out; /* Transition for smooth animation */
}

.popup_content {
  overflow-y: auto; /* Enable vertical scrolling */
  height: 100%;
	 padding: 20px;
}


.pad-ns {
	padding-bottom: 10px;
}

.panel_line {
    position: absolute;
    border-radius: 5px;
    background: #EDEBEB;
    width: calc(100% - 150px);
    height: 1%;
    top: 2%;
	margin-left: 75px;
	margin-right: 75px;
    align-items: center;
    text-align: center;
    justify-content: center;
    z-index: 2; /* Set a higher z-index for the panel line to make it appear above */
}

.movie_content {
	display: block;
    justify-content: center;
    align-items: center;
    text-align: center; /* Add text-align if you need to align text within the flex container */
    margin-top: 60px;
    box-sizing: border-box;
	
}

.movie_title img{
	height: 6.1vw;
	padding-left: 1.27vw;
	margin-top :0px;
	margin-bottom: -3px;;
}

.movie_title h1 {
	font-size : 6.36vw;
}

.title_content {
	margin-top: -12px;
}

.title_content h9 {
	margin: 0;
	padding-right: 18px;
}

.icon {
	padding-right: 6.5px;
}

.icontime {
	padding-right: 6.5px;
	margin-bottom: -1px;
}

.line2 {
	margin-top: 3px;
}

.line3 {
	display: flex;
	justify-content: center; 
}

.info_genre {
	margin: 8px; /* Adjust the value to increase/decrease the gap */
	margin-right: 18px !important;
  	border-radius: 21.5px;
  	box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.25);
  	height: 32px;
 	border: 0px solid;
 	padding: 8px 15px 0px 15px;
  	text-align: center; /* Center text horizontally */
  	font-size: 12px;
  	color: #0e272d;
	
}

.info_container {
	float: left;
	margin-top: 10px;
	width: 100%;
	overflow: hidden;
    text-align:left;
	padding-left: 35px;
	padding-right: 35px;
}

.info_container h2 {
	font-size: 4.83vw;
	margin-bottom: 10px;
}

.info_container h4 {
	color: #22393F;
	margin: 0;
}

.info_content {
    max-height: 50px; /* Adjust the height as needed */
    overflow: hidden;

}

.info_content.expanded {
    max-height: none;
}

.info_text {
    margin: 0;
    padding: 0;
	
}

.read-more {
	margin-top: 10px;
    cursor: pointer;
}

.info_right {
	float: right;
	margin:0;
	line-height: 1;
	margin-bottom: 40px;
}

.info_right img {
	height: 22px;
	margin-bottom: -5px;
	padding-left: 6px;
}

.scrollinfo{
  	overflow: auto; /* Enable horizontal scrolling */
  	white-space: nowrap; /* Prevent items from wrapping */
	width: 100vw;
	padding-left: 35px;
	margin-bottom: 40px;
}

.castcrew {
	display: inline-block;
	margin-top: 8px;
	margin-left: 0;
	padding-right: 15px;
}

.castcrew img {
	width: 20vw;
}

.cast_text {
	margin: 0;
	margin-top: -15px;
	text-align: center;
}

.cast_text h4 {
	font-weight: 600;
	margin-bottom: -3px;
}

.pad-r {
	padding-right: 35px;
}


.scrollbox{
  	overflow: auto; /* Enable horizontal scrolling */
  	white-space: nowrap; /* Prevent items from wrapping */
	width: 100vw;
	padding-left: 35px;
	margin-bottom: 40px;
}

.box{
	border-radius: 21.5px;
	background: #FFF;
	box-shadow: 0px 1px 6px 2px rgba(0, 0, 0, 0.12);
	height: 40%;
	width: 68.7vw;
	margin-bottom: 10px;
	margin-top: 5px;
	margin-right: 20px;
	display: inline-block;
	box-sizing: border-box;
}

.text-box {
    text-align: left;
    padding: 20px;
}

.text-box img {
	width: 16.347px;
	height: 14.668px;
	margin-right: 5px;
}

.text-box h2 {
	color: #0E272D;
	font-size: 17px;
	margin: 0;
}

.text-box h4 {
	font-weight: 600;
	margin: 0;
	margin-top: 2px;
}

.text-box h5 {
	font-size: 11;
	margin: 0;
	margin-top: 4px;
}

/*showtime*/
.effect img {
	display: inline-flex;
	height: 30vh;
padding-bottom: 0.384px;
top: 300px;
justify-content: center;
align-items: center;
flex-shrink: 0;
	z-index: 0;
	position: absolute;
}
.showtime_container {
	background: #17434E;
	width: 100vw;
	height: 100vh;
}

.showtime {
	margin-top: 70px;
}

.showtime h1 {
	color: white;
}

.description {
	align-content: center;
	text-align: center;
	justify-content: center;
	display: flex;
	width: 100vw;
}
.firstline {
	display: flex;
}

.line_item img {
	height: 1.52vh;
}

.ava img {
	width: 3.18vw;
	height: 1.1vh;
}

.seat {
	align-content: center;
	text-align: center;
	justify-content: center;
	display: flex;
	width: 100vw;
	margin-top: 3.63vh;
}

.seat1 {
	align-content: center;
	text-align: center;
	justify-content: center;
	display: flex;
	width: 100vw;
	margin-top: 0.3vh;
}

.seat2 {
	align-content: center;
	text-align: center;
	justify-content: center;
	display: flex;
	width: 100vw;
	margin-top: 1.5vh;
}

.seat3 {
	align-content: center;
	text-align: center;
	justify-content: center;
	display: flex;
	width: 100vw;
	margin-top: 1vh;
}

.seat4 {
	align-content: center;
	text-align: center;
	justify-content: center;
	display: flex;
	width: 100vw;
	margin-top: 3vh;
}

.seat_D, .seat_E, .seat_F {
	opacity: 100% !important;
}


.line_item h10 {
	color: #FFF;
font-family: DM Sans;
font-size: 2.54vw;
font-style: normal;
font-weight: 600;
line-height: normal;
	padding-right: 3vw;
	padding-left: 1vw;
}
.seat_item h10 {
color: #226480;
text-align: center;
font-family: DM Sans;
font-size: 2.8vw;
font-style: normal;
font-weight: 700;
line-height: normal;
}

.seat_item {
	width: 7.12vw;
	height: 3vh;
	border-radius: 1.01vw;
	background: #FFF;
	margin: 3px;
	opacity: 50%;
	
}

.seat_item1 h10 {
color: #226480;
  font-family: 'DM Sans', sans-serif;
  font-size: 2.7vw;
  font-style: normal;
  font-weight: 700;
  line-height: 1;
  display: inline-block; /* Ensure the text is inline-block */
  width: 100%; /* Fill the width of the container */
  margin: 0; /* Remove any default margin */
  text-align: center;
}

.seat_item2 h10{
color: #226480;
  font-family: 'DM Sans', sans-serif;
  font-size: 2.7vw;
  font-style: normal;
  font-weight: 700;
  line-height: 1;
  display: inline-block; /* Ensure the text is inline-block */
  width: 100%; /* Fill the width of the container */
  margin: 0; /* Remove any default margin */
  text-align: center;
}

.seat_item2 {
	width: 6.8vw;
	height: 2.8vh;
	border-radius: 1.01vw;
	background: #FFF;
	margin-bottom: 2.2px;
	text-align: center;
	justify-content: center;
	opacity: 50%;
}

.seat_item1 {
	width: 5.8vw;
	height: 2.8vh;
	border-radius: 1.01vw;
	background: #FFF;
	margin: 2.2px;
	text-align: center;
	justify-content: center;
	opacity: 50%;
}

.down_border1{
	border-radius: 1.01vw;
	background: #FFF;
	width:13.2vw;
	height: 0.4vh;
	margin-top: 0.8vh;
	margin-left: -6.5vw;
}

.down_border{
	border-radius: 1.01vw;
	background: #FFF;
	width: 5.6vw;
	height: 0.4vh;
	margin-top: 0.8vh;
	
}

.down_borderD{
	border-radius: 1.01vw;
	background: #FFF;
	width: 5.6vw;
	height: 0.4vh;
	margin-top: 0.8vh;
	
}

.p {
	padding-right: 3.5vw;
	display: flex;
}

.showtime_panel {
	border-radius: 30px 30px 0px 0px;
	border-top: 1px solid #D1CED1;
	background: #FFF;
	width: 100vw;
	height: 37.2vh;
	position: fixed;
	bottom: 0;
}

.panel_content {
	margin-left: 10.2vw;
	margin-right: 10.2vw;
	margin-bottom: 10.2vw;
	margin-top: 6vw;
	display: flex;
}

.panel_content h6{
	text-decoration: none;
	font-weight: 400;
	margin: 0;
	margin-left: 1.27vw;
}

.panel_content1 {
	margin-left: 10.2vw;
	margin-top: 3.8vw;
	display: flex;
}

.panel_content2 {
	margin-left: 10.2vw;
	margin-top: 0;
	display: flex;
}


.panel_content3 {
	margin-left: 10.2vw;
	margin-top: 0;
	display: flex;
}

.panel_content1 h1 {
	margin: 0;
	margin-right: 1.27vw;
}


.content_line1 img {
	width: 3.56vw;
	height: 3.56vw;
}

.content_line1 {
	display: flex;
}

.showtime_panel hr {
	margin-top: -3.2vh;
	width: 80vw;
}

.content_line2 {
	display: flex;
}

.content_line2 img {
	width :5.58vw;
	height :5.58vw;
	margin-top: 0.5vw;
}

.content_line3 {
	display: flex;
}

.content_line3 img {
	width:  8.9vw;
	height: 1.64vh;
	margin-left: 1.27vw;
}

.content_line3 h4 {
	margin: 0;
	font-size: 3.56vw;
}

.panel_content2 hr{
	margin-top: -2.2vh;
	width: 80vw;
}

.content_line4 hr {
	margin-top: 1.5vh;
	margin-bottom: 2.5vh;
}

.content_line5 img {
	width: 20.8vw;
	height: 5.16vh;
	
}

.tiket_container {
	width: 20.8vw;
	margin-right: 2.56vw;
}

.content_text {
	position: absolute;
	top: 20.5vh;
	left: 15vw;
}

.content_text1 {
	position: absolute;
	top: 20.5vh;
	left: 38vw;
}

.content_text2 {
	position: absolute;
	top: 20.5vh;
	left: 62vw;
}

.light,
.description,
.seat,
.seat1,
.seat2,
.seat3,
.seat4,
.showtime_panel,
.continue1 {
    opacity: 0;
    visibility: hidden;
}


/*checkout page*/
.full-screen-page1 {
    width: 100vw;
	height: 100vh;
    flex-direction: column;
	justify-content: flex-start;
    margin-top: 70px;
	position: fixed;	
}

.content {
  display: flex;
  flex-direction: row; /* Display as a row to place items side by side */
  align-items: center; /* Vertically center the items */
  justify-content: center; /* Horizontally center the items */
	
}

.content h1 {
	font-size: 20px;
	font-size:500;
}

.content img {
  width: 9.571px;
  height: 16.642px;
  align-self: flex-start; /* Align the image to the start (left) */
}

.back {
	position: absolute;
	margin-right: calc(100% - 80px);
	margin-top: 19px;
}
.content1{
	margin-top: 65px;
	
}

.content1 img {
	width: 5vw;

	
}

.left1{
	float: left;
	width: 80%;
	padding-left: 4%;
	box-sizing: border-box;
	margin-bottom: 20px;
	height: 100%;
	display: flex;
    align-items: center;
	
}
.right1 {
    float: right;
    width: 20%;
    align-items: center;
    justify-content: flex-end;
    display: flex;
    height: 20px; 
}

.add, .minus {
    display: inline-block; 
    width: 100%;
}

.minus{
	margin-right: 10px;
}

.ticket_text {
    margin-left: 30px;
    margin-right: 10px;
    color: #000;
    height: 100%; 
    line-height: 1px; 
}


.child_ticket_text {
    margin-left: 10px;
    margin-right: 10px;
    color: #000;
    height: 100%; 
}

.left2 {
    float: left;
    width: 80%;
    padding-left: 4%;
    box-sizing: border-box;
    margin-bottom: 20px;
    height: 100%;
    display: flex;
    align-items: center;
}

.right2 {
   float: right;
    width: 20%;
    align-items: center;
    justify-content: flex-end;
    display: flex;
    height: 20px; 
}

/* Other styles */

.alert {
    display: flex;
    flex-direction: column;
    justify-content: center; /* Align content vertically */
    align-items: center; /* Align content horizontally */
}

.alert-img {
    margin-bottom: 5px;
}




.content2{
	margin-top: 20px;
    display: flex;
    width: 100%;
}

.left1 h6 {
	text-decoration: none !important;
	justify-content: center;
	margin: 0;
	
}

.left1 img {
	margin-bottom: -5px;
	margin-left: 5px;
}
.alert{
    margin-top: 0px;
    display: flex; /* Use flexbox for positioning */
    flex-direction: column;
    justify-content: center; /* Align content vertically */
    align-items: center; /* Align content horizontally */

}

.continue a{
  position: fixed; /* Set the position to fixed */
  bottom: 35px; /* Position it at the bottom */
  left: 50%; /* Align it to the center horizontally */
  transform: translateX(-50%); /* Center it horizontally */
  border-radius: 21.5px;
  background: #356e7c;
  box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.25);
  display: flex;
  width: 81.94vw;;
  padding: 17px 35px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  color: #fff;
  text-align: center;
  font-family: "DM Sans", sans-serif;
  font-size: 14px;
	font-weight: 500;
	text-decoration: none;
font-style: normal;
line-height: normal;
	letter-spacing: 0.5px;
}

.continue1 a{
  position: fixed; /* Set the position to fixed */
  bottom: 35px; /* Position it at the bottom */
  left: 50%; /* Align it to the center horizontally */
  transform: translateX(-50%); /* Center it horizontally */
  border-radius: 21.5px;
  background: #356e7c;
  box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.25);
  display: flex;
  width: 81.94vw;;
  padding: 17px 35px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  color: #fff;
  text-align: center;
  font-family: "DM Sans", sans-serif;
  font-size: 14px;
	font-weight: 500;
	text-decoration: none;
font-style: normal;
line-height: normal;
	letter-spacing: 0.5px;
}


/*summary*/
.content_summary {
	align-content: center;
	justify-content: center;
	margin-top: 20px;
	width: 90.3vw ;
	height: 22.53vh;
}

.container_summary svg{
	position: absolute;
}

.overlay_text {
	position: absolute;
}

.summary_left{
	float: left;
	width: 93px;
	height: 123px;
	flex-shrink: 0;	
	display: flex;
	margin-top: 34px;
	margin-left: 20px;
}

.summary_right {
    float: left;
	margin-top: 30px;
	margin-left: 18px;
}

.rightflex {
	 display: flex;
}

.summary_right h1 {
	font-size: 20px;
	margin-bottom: -5px;
}

.summary_right img {
	width: 16px;
	margin-left: 5px;
}

.contentright h7 {
	font-size: 10.5px;
}

.contentright h4 {
	margin-top: 5px;
}

.contentright hr {
	margin-top: 35px;
}

.order_summary {
	align-content: flex-start;
	justify-content: flex-start;
	margin-top: 10px;
	margin-left: 10px;
}

.order {
	display: flex;
	margin-bottom: 20px;
}
.order_summary h1 {
	font-size: 12px;
}

.summary_c1{
	border-radius: 9px;
	background: rgba(231, 231, 231, 0.37);
	width: 49px;
	height: 49px;
	justify-content: center;
	text-align: center;
	align-content: center;
	margin-top: 22px;
	font-weight: 600;
}

.summary_c2 {
	margin-left: 16px;
	width: 180px;
}

.summary_c2 h7{
	font-weight: 500;
	color: rgba(58, 79, 84, 0.80);
	font-size: 12px;
	
}

.summary_c2 h6 {
	color: #A9A9A9;
	font-size: 10px;
	margin: 0;
	margin-top: 3px;
}

.summary_c2 h4 {
	font-weight: 600;
	margin-top: 25px;
	margin-bottom: 0;
}

.summary_c3 {
	justify-content: flex-end;
	margin-top: 26px;
}

.summary_c3 h4 {
	font-weight: 600;
}

.order1 {
	display: flex;
	margin-bottom: 20px;
	margin-top: -15px;
}

.fee {
	display: flex;
	padding-top: 10px;
}

.fee h4 {
	margin: 0;
	font-weight: 600;
	margin-top :5px;
}

.fee1 {
	justify-content: flex-start;
	width: 260px;
	padding-bottom: 5px;
}

.fee2 {
	justify-content: flex-end;
	float: right;
	text-align: right;
	padding-bottom: 10px;
	padding-right: 0;
}
.cue {
	margin-bottom: 20px;
	margin-top: -10px;
}
.cue h10{
	color: #356E7C;
	justify-content: center;
	text-align: center;
	align-content: center;
	margin:0;
}

.cue img {
	margin-bottom: -4px;
	margin-right: 5px;
}

.payment {
	display: flex;
	margin-top: 15px;
}

.payment h3 {
	color: #0E272D;
	margin: 0;
}

.payment1 {
	justify-content: flex-start;
	width: 230px;
}

.payment2 {
	justify-content: flex-end;
	float: right;
	text-align: right;
	margin:0;
}


.timer {
	border-radius: 44px;
	background: #17434E;
	width: 110px;
	height: 45px;
	display: flex;
	 align-items: flex-end; /* Vertically center the items */
  	justify-content: center; /* Horizontally center the items */
	float: right;
	text-align: center;
}

.timer h3 {
	color: #FFF;
	font-size: 15px;
	line-height: 1;
	display: flex;
	
}

.timer img {
	width: 15px;
	height: 15px;
	margin-left: 7px;
	display: flex;
}

.timer1 {
	border-radius: 44px;
	width: 110px;
	height: 35px;
	display: flex;
	position: absolute;
	right: 0;
	top:10.2vh;
	 align-items: flex-end; /* Vertically center the items */
  	justify-content: center; /* Horizontally center the items */
	float: right;
	text-align: center;
	color: #FFFFFF;
}

.timer h3 {
	color: #FFF !important;
	font-size: 15px;
	line-height: 1;
	display: flex;
	margin-top: 25vh;
	
}

.timer1 img {
	color: #FFF;
	width: 15px;
	height: 15px;
	margin-left: 7px;
	display: flex;
}


.price {
	display: flex;
	margin-top: 110px;
	align-items: center; /* Vertically center the items */
  	justify-content: center; /* Horizontally center the items */
	text-align: center;
	height: 50px;
	box-sizing: border-box;
	
}

.price h2{
	font-size:25px;
	color: #356E7C;
	margin-right: 5px;
}

.price h1 {
	font-size: 50px;
	color: #356E7C;
}

.order_number h5 {
	color: #939495;
	font-size: 11px;
	align-items: center; /* Vertically center the items */
  	justify-content: center; /* Horizontally center the items */
	text-align: center;
	margin-top: 1%;
}

.payment_method {
	 align-items: flex-start; /* Vertically center the items */
  	justify-content: left; /* Horizontally center the items */
	float: left;
	text-align: left;
}

.payment_method h3 {
	color: #0E272D;
	font-size: 14px;
	font-weight: 700;
	line-height: normal;
	margin-top: 53px;
}

.method {
	margin-top: 40px;
}

.method1 {
	display: flex;
	margin-top: 20px;
}

.method1 svg {
	margin-left: 10px;
	margin-right :20px;
	margin-top: 0px;
}

.method h4 {
	font-weight: 600;
	margin: 0;
	margin-top: 10px;
	line-height: 1;
	margin-bottom: 20px;
}

.method2 {
	display: flex;
	margin-top: 20px;
}

.method2 svg {
	margin-left: 10px;
	margin-right :20px;
	margin-top: 7px;
}

.method hr {
	width: calc(100vw - 90px);
}

.message {
    width: 100vw;
    height: 100vh;
	padding: 20.35vw;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
	box-sizing: border-box;
}

.message h5 {
    color: #939495;
    text-align: center;
    font-family: 'DM Sans', sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}



.center-container {
	 width: 100vw;
    height: 100vh;
	padding-right: 10vw;
	padding-bottom: 10vh;
  justify-content: center;
  align-items: center;
	display: none;
	text-align: center
}

.popcorn-container {
  position: relative;
}

.popcorn-img {
  position: absolute;
 
	width: 9,6vw;
	height: 5.98vh;
}

.popcorn-container p {
	justify-content: center;
  align-items: center;
}



/*virtual ticket*/
.sharet {
	position: absolute;
	margin-left: calc(100% - 90px);
	margin-top: -6px;
}

.tiket {
  position: relative; /* Ensure the parent container has a position other than static */
  height: 100vh; /* Height of the viewport or container */
  display: flex;
  justify-content: center; /* Horizontally center the items */
  text-align: center;
  margin-top: 20px;
}

.tiket_border {
  position: absolute; /* Position the ticket border */
}

.tiket_border img {
  height: 600.16px;
  width: 304.321px;
}

.border_content {
	position: absolute;
	justify-content: center; 
	margin-top: 25px;
}

.border_logo h4 {
	font-size: 11px;
	margin: 0;
	
}

.bc {
	display : flex;
	float: left;
	justify-content: flex-start;
	text-align: left;
	margin-top: 30px;
	
}

.bc_left {
	margin-left: -10px;
}

.bc_left img{
	width: 85px;
	height: 122px;	
}

.bc_right {
	margin-left: 15px;
}

.bc_right h1 {
	font-size: 20px;
	margin: 0;
	margin-bottom: -5px;
	
}

.bc_right h4 {
	font-weight: 700;
	margin-top: 5px;
}

.bc_right h7 {
	font-size: 10.5px;
}

.bc_right hr {
	margin-top: 40px;
}

.bc_right img {
	height: 15px;
	margin-left :5px;
}

.ticket_text {
	margin-top: 20px;
	margin-left: -1px;
}
	
.ticket_text1 img {
	width: 19px;
	height: 20.674px;
	float: left;
	margin-top: 22px;
}

.ticket_text2 {
	float: left;
	text-align: left;
	margin-top: 10px;
	margin-left: 15px;
}

.ticket_text2 img {
	width: 30px;
	height: 12px;
	margin-left: 5px;
}

.textline1 h3 {
	font-size: 15px;
	color: #356E7C;
	margin-bottom: 8px;
}

.textline2 h10 {
	color: #1E1F20;
	font-weight: 600;
	margin-top: 3px;
}

.textline3 {
	margin-top: 13px;
}
.lineborder {
	border-radius: 21.5px;
	border: 1px solid rgba(53, 110, 124, 0.51);
	padding-left: 15px;
	padding-right: 15px;
	padding-top: 8px;
	padding-bottom: 8px;
	width: 42px;
	height: 29px;
	
}

.lineborder h10{
	color: #356E7C !important;
}

.ticket_text_l2 {
  clear: both;
}

.ticket_text_12 {
	display: flex;
	float: left;
	justify-content: flex-start;
	text-align: left;
}

.text_left img {
	width: 15px;
	height: 20.996px;
	margin-top: 30px;
	
}

.text_left {
	display: flex;
	width: 15px;
}

.text_right{
	float: left;
	text-align: left;
	margin-top: -35px;
	margin-left: 35px;
}


.textright1 h3 {
	font-size: 15px;
	color: #356E7C;
	margin-bottom: -5px;
}

.textright2 h10 {
	color: #1E1F20;
	font-weight: 600;
	margin-top: 3px;
}

.barcode {
	margin-top: 85px;
	align-items: center; /* Vertically center the items */
  	justify-content: center; /* Horizontally center the items */
	text-align: center;
}

.barcode img{
	width: 215px;
	height: 59px;
}

.barcode h5 {
	font-size: 10px;
	color: #575959;;
	text-align: center ;
	align-items: center; /* Vertically center the items */
  	justify-content: center; 
	margin-bottom: 5px;
}

/*profile*/
.cardbase {
  position: absolute; /* Set position to relative */
	margin-top: 25px;
}

.base_left {
  position: absolute;
  text-align: left;
	top: 10vw; /* Adjust top position as needed */
  left: 7.7vw; 
	justify-content: flex-start;
}

.base {
	display: flex;
}

.base_right {
  position: absolute;
  text-align: right;
	align-items: flex-end;/* Vertically center the items */
  	justify-content: flex-end;
	float: right;
	
}

/*profile*/
.cardbase {
	width: calc(100vw - 70px);
	align-content: center;
	justify-content: center;
	
}
.card_img img {
	width: calc(100vw - 70px);
	
}


.base_left h2{
	opacity: 0.8;
	color: #FFF;
	margin:0;
	font-size:4.6vw;
	
}

.base_left h10 {
	color:  rgba(255, 255, 255, 0.67);
	opacity: 0.8;
	margin :0;
	font-size: 2.6vw;
}

.base_left h3 {
	opacity: 0.8;
	font-size: 4vw;
	color: #FFF;
	margin-top: 15%;
	letter-spacing: 1px;
	font-weight: 500;
}

.base_left {
	width: 100%;
	
}

.base_right {
	margin-left: 88%;
	margin-top: -52%;
	align-content: flex-end;
	position: absolute;
	float: right;
}
.base_right img {
	width: 5vw;
	height: 5vw;
	

}

.text_context {
	margin-top: 54px;
}

.text_context h2 {
	font-size: 20px;
	margin-left: 15px;
	margin-bottom: 30px;
}

.list {
	margin-top: 15px;
	display: flex;
	margin-bottom: 0px;
	margin-left: 10px;
}

.list_left {
	display:flex; 
	margin-left: 5px;
	width: 100%;
}

.list_left h9 {
	color: #000;
	font-family: DM Sans;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 1.5;
	margin-left: 16px;
	
}

.list_left h2 {
	font-size: 20px;
	
}


.list_left img {
	width: 25px;
	height: 25px;
	justify-content: center; 
}

.list_right {
	justify-content: flex-end;
	line-height: 2;
}

.list_right img {
	width: 25px;
	height: 25px;
	justify-content: center; 
}

.text_context hr{
	margin: 5px;
}

.text_context h6 {
	margin-top: 40px;
	font-size: 14px;
	color: #838182;
	margin-left: 15px;
}

.pad-btm_profile {
	padding-bottom: 370px;
}


/*membership card*/
.full-screen-page2 {
    width: 100vw;
	height: 100vh;
    flex-direction: column;
	justify-content: flex-start;
    margin-top: 0px;
	position: relative;
	overflow: auto;
}

.mc_container {
	justify-content: center;
	text-align: center;
	align-content: center;
	width: calc(100vw - 70px);
	overflow: hidden;
}

.mc_qr img {
	width: 50%;
	margin-top :120px;
	margin-bottom: 50px;
	
}

.mc_bar img {
	width: 69%;
	margin-top :50px;
}

.mc_text {
	padding-left: 10%;
	padding-right: 10%;
	text-align: center;
}

.mc_text h2 {
	color: #0E272D !important;
text-align: center;
font-size: 18px;
font-weight: 600;
letter-spacing: 1px;
	margin: 0;
	margin-bottom: 6px;
	
}

.mc_text h3 {
	color: #939495;
	text-align: center;
	margin: 0;
	font-weight: 500;
	font-size: 12.5px;
	
}


#QRcode {
  display: none;
}