html{
	overflow-x: hidden;
	scroll-behavior: smooth;
}
body {
	font-family: "Inter", sans-serif;
	overflow-x:hidden;
	background-color: #140935;
}

a {
	text-decoration:none;
	-moz-transition: all .3s ease-in-out;
 -webkit-transition: all .3s ease-in-out;
 transition: all .3s ease-in-out;
}
a:hover{text-decoration:none;}

.container{
	max-width: 1230px;
}

.header{
	position: absolute;
	width: 100%;
	top: 0;
	left: 0;
	z-index: 9;
}
.header .container{
	max-width: 1330px;
}
.header-inner{
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	row-gap: 12px;
}
.header .navbar{
	flex: 1;
	padding: 0;
}
.header .navbar-brand{
	padding: 0;
	flex-shrink: 0;
}
.header .navbar-nav{
	gap: 6px;
}
.header .navbar .nav-link{
    background: url(../images/navbg.jpg) repeat-x top #600cf9;
    color: #fff;
    font-size: 16px;
    border-radius: 10px;
    text-shadow: 0px 1px #000;
    font-weight: 600;
    height: 45px;
    display: flex;
    gap: 5px;
    align-items: center;
    padding: 0 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}
.header .navbar .nav-link:hover, .header .navbar .nav-link.active{
	background: url(../images/navbg-hover.jpg) repeat-x top #c31a22;
}
.banner-bg{
	background: url(../images/banner-bg.jpg) no-repeat;
	background-size: cover;
	padding: 250px 0 110px 0;
}

.header-right-btns{
	display: flex;
	gap: 6px;
	margin-left: 6px;
}
.header-right-btns a{
	color: #fff;
    font-size: 16px;
    border-radius: 10px;
    text-shadow: 0px 1px #000;
    font-weight: 600;
    height: 45px;
    display: flex;
    gap: 5px;
    align-items: center;
    padding: 0 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
	position: relative;
	background-image: linear-gradient(to top, rgba(248,87,101,1), rgba(250,207,39,1));
	overflow: hidden;
}
.header-right-btns a::after{
	background: url(../images/loginbg.png) no-repeat;
	width: 94%;
    height: 94%;
    content: "";
    position: absolute;
    left: 3%;
    top: 6%;
    background-size: 100% auto;
}
.lang-option::after {
    content: none;
}
.lang-option:hover {
    background: rgba(255,255,255,0.15) !important;
}

.langdrop{
	background: url(../images/navbg.jpg) repeat-x top #600cf9!important;
	/* Was 140px. .langDropdownToggle sizes to its own content
	   (icon + language name + chevron), so a flat 140px floor left
	   a visible gap of empty purple background to the right of any
	   short language name (e.g. "Avar", "Afar") -- there was
	   nothing filling that reserved space. 100px still gives longer
	   names room without forcing that gap on short ones. */
	min-width: 100px;
}
.langdrop::after{
	display: none;
}

/* Matches the header's own navbg.jpg gradient (same as the toggle
   button and the main nav pills) instead of a flat solid purple. The
   default OS scrollbar sitting right in the top-right corner (see
   the scroll-y on this element) is what actually broke the rounded
   look in the screenshot -- its straight edges visually squared off
   that corner regardless of the border-radius underneath. A thin,
   theme-colored scrollbar (already used elsewhere on the site, e.g.
   .tickets-list) reads as part of the rounded panel instead of
   fighting it. */
#langDropdownMenu {
    background     : url(../images/navbg.jpg) repeat-x top #600cf9;
    border-radius  : 10px;
    scrollbar-width: thin;
    scrollbar-color: #fb9013 #351c7a;
}

/* The dropdown's <a> items live inside .header-right-btns, so they
   also match the shared ".header-right-btns a" button rule (its own
   background image, fixed 45px height, flex layout, etc.). The
   inline styles set when each item is built cover most of that, but
   not everything (e.g. the position:relative/overflow:hidden box
   context, or the ::after image overlay), which is what made the
   opened list look like oversized blank pills instead of a clean
   text list on mobile. Give the list items their own defended rule
   set here so they can never inherit that button look, on any
   screen size. */
#langDropdownMenu .lang-option {
    display         : block !important;
    height          : auto !important;
    background      : none !important;
    background-image: none !important;
    border-radius   : 0 !important;
    box-shadow      : none !important;
    text-shadow     : none !important;
    padding         : 10px 16px !important;
    line-height     : 1.3;
}
#langDropdownMenu .lang-option::after {
    content: none !important;
}
/* So the hover highlight on the very first/last item doesn't square
   off the panel's own rounded corners underneath it. */
#langDropdownMenu .lang-option:first-child {
    border-top-left-radius : 10px !important;
    border-top-right-radius: 10px !important;
}
#langDropdownMenu .lang-option:last-child {
    border-bottom-left-radius : 10px !important;
    border-bottom-right-radius: 10px !important;
}

@media (max-width: 767px) {
    /* Anchoring the list below the toggle (position:absolute,
       right:0) let it run off either edge of a narrow screen
       depending on where the toggle sits in the stacked mobile
       header. Pinning it as a centered, width-capped panel instead
       guarantees it always fits the viewport. */
    #langDropdownMenu {
        position : fixed !important;
        top      : 130px;
        left     : 50% !important;
        right    : auto !important;
        transform: translateX(-50%);
        width    : min(90vw, 320px) !important;
        max-height: 60vh !important;
        margin-top: 0 !important;
    }
}

/*responsiv 3D gallery*/

.banner-bg .container{
	max-width: 1600px;
}
.responsiveGallery-container{
	width: 100%;
	position: relative;
}

.responsiveGallery-btn{
	position:absolute;
	top: 0;
	z-index: 3;
	display: block;
	width: 5%;
	height: 100%;
}
.responsiveGallery-btn_prev{
	background:url(../images/arrow-left.png) center center no-repeat;
	left:1%;
}
.responsiveGallery-btn_next{
	background:url(../images/arrow-right.png) center center no-repeat;
	right:1%;
}

.responsiveGallery-wrapper{
	position: relative;

	width: 100%;
	margin: 0 auto;
	padding: 25% 0 0 0;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-o-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-perspective: 780px;
	-moz-perspective: 780px;
	-o-perspective: 780px;
	-ms-perspective: 780px;
	perspective: 780px;
}
.responsiveGallery-item{
	position: absolute;
	left: 0;
	top: 0;
	z-index: 0;

	display: block;
	width: 20%; /*默认显示5个*/

	opacity: 0;
	visibility: hidden;
}
@media (max-width: 1000px){
	.responsiveGallery-item{
		width: 33.33%; /*此宽度下显示3个*/
	}
	.responsiveGallery-wrapper{
		padding-top: 45%;/*相应调整容器高度*/
	}

}
@media (max-width: 560px){
	.responsiveGallery-wrapper{
		width: 60%;
	}
	.responsiveGallery-item{
		width: 100%; /*最终显示1个，但上条样式决定其宽度为窗口宽度的60%*/
	}
	.responsiveGallery-wrapper{
		padding-top: 80%;/*相应调整容器高度*/
	}
	.responsiveGallery-btn{
		width: 8%;
	}
}
.responsivGallery-link{
	display: block;
	width: 100%;
	box-shadow: 0px 0px 20px rgba(0,0,0,0.3);
}
.responsivGallery-pic{
	width: 100%;
	height: auto;
	border-radius: 40px;
    box-shadow: 0px 0 15px #000;
}
.w-responsivGallery-info{
	width: 80%;
	margin: 0 auto;
	padding-top: 5%;
	text-align: center;
	color: #fff;
}
.responsivGallery-name{
	font-size: 1.25em;
}
.responsivGallery-position{
	padding-top: 4%;
	font-size: 0.875em;
	line-height: 1.3;
}
/*responsiv 3D gallery end*/

.marquebg{
	margin: 0;
	background: #3800cd;
	padding: 15px 0;
}
.marquee-content {
	display: flex;
	animation: marquee 20s linear infinite;
}
@keyframes marquee {
	0% {
	  transform: translateX(100%);
	}
 
	100% {
	  transform: translateX(-100%);
	}
}
.marquebg:hover .marquee-content {
	animation-play-state: paused;
}
.marquebg .marquee-item{
	font-size: 17px;
	text-transform: uppercase;
	color: #fff;
	white-space: nowrap;
	font-weight: 700;
}

.ticketsmainbg{
	padding: 70px 0;
}
.ticketsmainbg-inner{
	display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
}
.ticketbox{
	border-radius: 20px;
	position: relative;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	-ms-border-radius: 20px;
	-o-border-radius: 20px;
	overflow: hidden;
	background-image: linear-gradient(to bottom, #1699e3, #85a47e, #d0a736);
}
.ticketbox::after{
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 150px;
	background: url(../images/ticketboxbg.png) no-repeat top center;
}
.ticketbox-content{
	position: relative;
	z-index: 99;
}
.ticketbox-content-top{
	padding: 15px 15px 0 15px;
}
.ticketbox-content-topimg{
	position: relative;
	object-fit: cover;
    border-radius: 0px;
    transform: skewY(-4deg);
    box-shadow: 0 0 10px #000;
    -webkit-transform: skewY(-4deg);
    -moz-transform: skewY(-4deg);
    -ms-transform: skewY(-4deg);
    -o-transform: skewY(-4deg);
	overflow: hidden;
	-moz-transition: all .3s ease-in-out;
 -webkit-transition: all .3s ease-in-out;
 transition: all .3s ease-in-out;
}
.ticketbox-content-top:hover .ticketbox-content-topimg{
	transform: skewY(-0deg);
	-webkit-transform: skewY(-0deg);
	-moz-transform: skewY(-0deg);
	-ms-transform: skewY(-0deg);
	-o-transform: skewY(-0deg);
}
.ticketbox-content-topimg img{
    width: 100%;
	border-radius: 0px;
    height: 235px;
}
.ticketbox-content-topimg .offerlabel{
	font-size: 25px;
    color: #fff;
    font-weight: 700;
    background-color: rgba(0, 0, 0, 0.6);
    display: block;
    position: absolute;
    width: 110%;
    padding: 15px 0;
    text-align: center;
    transform: rotate(-75deg);
    top: 84px;
}
.ticketbox-content-top h3{
	font-size: 27px;
	font-weight: 700;
	text-transform: uppercase;
	color: #fff;
	text-align: center;
	margin: 10px 0;
}

.pricecountdownbox{
	display: flex;
	gap: 1px;
	justify-content: space-between;
}
.pricecountdownbox span{
	color: #fff;
	font-size: 24px;
	font-weight: 700;
	width: auto;
	background-image: linear-gradient(#a594cf, #6e66cb, #6f6cda);
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-ms-border-radius: 5px;
	-o-border-radius: 5px;
	padding: 5px;
	text-align: center;
	position: relative;
	overflow: hidden;
}
.pricecountdownbox span::after{
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 20px;
	background-image: linear-gradient(to top, rgba(248,87,101,0), rgba(255,255,255,0.7));
}
.pricecountdownbox span.smalltxt b{
	font-size: 10px;
}

.ticketbox-count{
	margin: 10px 0;
}
.ticketbox-count div{
	display: flex;
	align-items: center;
	justify-content: space-between;
	text-align: center;
	gap: 7px;
}
.ticketbox-count span{
	font-size: 12px;
	font-weight: 500;
	color: #fff;
	position: relative;
}
.ticketbox-count span label{
	background-image: linear-gradient(#e76fd5, #f6d09e);
	display: flex;
	flex: 1;
	align-items: center;
	justify-content: center;
	height: 55px;
	width: 55px;
	margin-bottom: 5px;
	text-align: center;
	padding: 0;
	border-radius: 15px;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	-ms-border-radius: 15px;
	-o-border-radius: 15px;
	font-size: 24px;
	font-weight: 700;
	position: relative;
	overflow: hidden;
}
.ticketbox-count span label::after{
	background: url(../images/count-shadow.png) no-repeat top center;
	content: "";
	position: absolute;
	left: 0;
	top: -2px;
	width: 100%;
	height: 15px;
}

.ticketbox-content-bottom{
	display: flex;
	gap: 5px;
}
.ticketbox-content-bottom a{
	position: relative;
	flex: 1;
	overflow: hidden;
	color: #fff;
	font-size: 18px;
	font-weight: 700;
	text-align: center;
	text-transform: uppercase;
	padding: 18px 5px;
	background-image: linear-gradient(#279edb, #cba43d);
}
.ticketbox-content-bottom a:hover{
	background-image: linear-gradient(#8f66fc, #200170)!important;
}
.ticketbox-content-bottom a::after{
	background: url(../images/btnshadow.png) no-repeat top center;
	content: "";
	position: absolute;
	left: 0;
	top: -8px;
	width: 100%;
	height: 35px;
	background-size: 100% auto;
}
.infobtn{
	border-radius: 0 15px 0 0;
}
.ticketsbtn{
	border-radius: 15px 0px 0 0;
	-webkit-border-radius: 15px 0px 0 0;
	-moz-border-radius: 15px 0px 0 0;
	-ms-border-radius: 15px 0px 0 0;
	-o-border-radius: 15px 0px 0 0;
}

.ticketbox-pink{
	background-image: linear-gradient(to bottom, #0385e2, #575dba, #9646a4);
}
.ticketbox-pink .pricecountdownbox span{
	background-image: linear-gradient(#3c66f3, #4d3de1, #691dd1)
}
.ticketbox-pink .ticketbox-count span label{
	background-image: linear-gradient(#ef3edb, #8020e2);
}
.ticketbox-pink .ticketbox-content-bottom a{
	background-image: linear-gradient(#265df1, #9344fc);
}

.ticketbox-blue{
	background-image: linear-gradient(to bottom, #11066a, #090353, #0b0462);
}
.ticketbox-blue .pricecountdownbox span{
	background-image: linear-gradient(#63829b, #345070, #1f3357)
}
.ticketbox-blue .ticketbox-count span label{
	background-image: linear-gradient(#426381, #202d56);
}
.ticketbox-blue .ticketbox-content-bottom a{
	background-image: linear-gradient(#102b50, #0c4eb1);
}

.ticketbox-orange{
	background-image: linear-gradient(to bottom, #341d08, #520e06, #940a0a);
}
.ticketbox-orange .pricecountdownbox span{
	background-image: linear-gradient(#84337e, #fe2060, #fb7a51)
}
.ticketbox-orange .ticketbox-count span label{
	background-image: linear-gradient(#f8550b, #f5b62e);
}
.ticketbox-orange .ticketbox-content-bottom a{
	background-image: linear-gradient(#ff4256, #6c126b);
}

.bottomlogosbg .owl-theme .owl-nav.disabled+.owl-dots{
	margin-top: 30px;
}
.footer{
	padding: 240px 0 80px 0;
	text-align: center;
	background: url(../images/footerbg.jpg) no-repeat;
	background-size: cover;
	margin-top: -160px;
}

.footernav{
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 30px;
}
.footernav a{
	color: #fff;
	font-weight: 600;
	font-size: 20px;
}
.footernav a:hover{
	color: #aa92ec;
}
.copyright{
	color: #fff;
	font-weight: 600;
	font-size: 17px;
	padding: 25px 0;
}
.footersocial{
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
}
.footersocial img{
	max-width: 35px;
}

.inner-heading{
	background-color: #36207a;
	padding: 12px 0;
	text-align: center;
	margin-top: 180px;
    position: relative;
}
.inner-heading h1{
	font-size: 35px;
	font-weight: 700;
	margin: 0;
	color: #fff;
}
.innercontent-bg{
	padding: 80px 0;
	background: url(../images/footerbg.jpg) no-repeat top;
	background-size: 100% auto;
}
.infobox-top{
	background-color: #36207a;
	padding: 30px;
	border-radius: 15px;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	-ms-border-radius: 15px;
	-o-border-radius: 15px;
}
.info_img{
	background-color: #5236a8;
	border-radius: 15px;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	-ms-border-radius: 15px;
	-o-border-radius: 15px;
	padding: 20px;
}
.info_img img{
	transform: skewY(-3deg);
	width: 100%;
	border-radius: 15px;
	-webkit-transform: skewY(-3deg);
	-moz-transform: skewY(-3deg);
	-ms-transform: skewY(-3deg);
	-o-transform: skewY(-3deg);
}
.info_content_top{
	display: flex;
	justify-content: space-between;
}
.info_content_top h1{
	font-size: 40px;
	font-weight: 700;
	color: #fff;
	margin: 0;
}
.info_content_top h4{
	font-size: 20px;
	font-weight: 400;
	color: #c3b0ff;
	margin: 10px 0 0 0;
}
.info-ticketbox-count div{
	gap: 10px;
}
.info-ticketbox-count span{
	font-size: 14px;
}
.info-ticketbox-count span label{
	background-image: linear-gradient(#ee41dc, #7c21e3);
}
.info_content_mid{
	margin: 15px 0;
}
.info_content_mid h3{
	color: #fff;
	font-size: 22px;
	font-weight: 400;
	margin: 0;
}
.info_content_mid h1{
	color: #fff;
	font-size: 45px;
	font-weight: 700;
	margin: 10px 0;
}
.info_content_mid_btns{
	display: flex;
	gap: 7px;
}
.info_content_mid_btns a{
	display: inline-block;
	background-color: #5236a8;
	padding: 10px 20px;
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-ms-border-radius: 10px;
	-o-border-radius: 10px;
	font-size: 22px;
	color: #fff;
}
.info_content_mid_btns a:hover{
	background-color: #a830ed;
}
.info_content_midinfo{
	margin: 10px 0;
}
.info_content_midinfo h3{
	color: #fff;
	font-size: 22px;
	font-weight: 400;
	margin: 0;
}
.info_content_midinfo h1{
	color: #fff;
	font-size: 28px;
	font-weight: 700;
	margin: 10px 0 20px 0;
}
.info_content_midinfo-table table{
	width: auto;
}
.info_content_midinfo-table tr td{
	padding: 10px 5px;
	background: none;
	border: none;
	color: #fff;
	font-size: 22px;
	font-weight: 400;
}
.info_content_midinfo-table tr td:first-child{
	padding-left: 0;
}
.info_content_bottom{
	border-top: solid 1px #5236a8;
}
.info_content_bottom label{
	display: block;
	color: #fff;
	font-size: 22px;
	font-weight: 400;
	margin: 10px 0 20px 0;
}
.info_content_bottom_btns{
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 24px;
	row-gap: 16px;
}

.counter {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 8px 10px;
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-ms-border-radius: 10px;
	-o-border-radius: 10px;
	background-color: #5236a8;
}
.counter button {
    background-color: #a830ed;
    color: #fff;
    border: none;
    border-radius: 10px;
    width: 36px;
    height: 36px;
    font-size: 20px;
    cursor: pointer;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	flex-shrink: 0;
}
.counter input[type="number"] {
    width: 48px;
    font-size: 20px;
    font-weight: 600;
    border: none;
	text-align: center;
	color: #fff;
    height: 36px;
	background: rgba(255,255,255,0.08);
	border-radius: 8px;
	outline: none;
	-moz-appearance: textfield;
}
.counter input[type="number"]::-webkit-outer-spin-button,
.counter input[type="number"]::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
.info_content_bottom_btns h3{
	color: #fff;
	font-size: 22px;
	font-weight: 700;
	margin: 0;
	white-space: nowrap;
}
.info_content_bottom_btns a{
    font-size: 17px;
    color: #fff;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    background:linear-gradient(to bottom, #ffb4d5 0%, #ff5ca8 45%, #ff007f 100%    );
    border-radius:10px;
    position:relative;
    transition:.2s;
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    -ms-border-radius:10px;
    -o-border-radius:10px;
	text-shadow: 1px 1px 1px #000;
}
.info_content_bottom_btns a:before{
    content:"";
    position:absolute;
    left:5px;
    right:5px;
    top:4px;
    height:45%;
    border-radius:10px;
    background:linear-gradient(
        to bottom,
        rgba(255,255,255,.8),
        rgba(255,255,255,0)
    );
}
.info_content_bottom_btns a:hover{
    transform:translateY(-2px);
}

.infobox-bottom{
	padding-top: 50px;
}
.infobox-bottom .nav-tabs{
	border: none;
	gap: 7px;
}
.infobox-bottom .nav-tabs .nav-link{
	min-width: 310px;
	color: #49387c;
	font-size: 25px;
	font-weight: 600;
	border-radius: 15px;
	border: none;
	padding: 25px 10px;
	background: linear-gradient(to bottom, #251555 0%, #1b0e43 45%, #140936 100%);
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	-ms-border-radius: 15px;
	-o-border-radius: 15px;
}
.infobox-bottom .nav-tabs .nav-link.active, .infobox-bottom .nav-tabs .nav-link:hover{
	background: linear-gradient(to bottom, #482f95 0%, #311e6b 45%, #140936 100%);
	color: #fff;
}
.infobox-bottom .tab-pane{
	padding-top: 40px;
}
.beschrijvingdiv h3{
	color: #fff;
	font-size: 22px;
	font-weight: 500;
	margin: 0 0 25px 0;
}
.beschrijvingdiv p{
	color: #fff;
	font-size: 16px;
	line-height: 24px;
	font-weight: 400;
	text-align: justify;
	margin: 0 0 25px 0;
}
.myacc-bg{
	display: flex;
	gap: 15px;
	align-items: start;
}
.myacc-left{
	min-width: 265px;
}
.myacc-left ul{
	padding: 0;
	margin: 0;
}
.myacc-left ul li{
	list-style: none;
	padding: 0;
	margin: 0 0 3px 0;
}
.myacc-left ul li a{
	display: block;
	padding: 15px 30px;
	border-radius: 15px;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	-ms-border-radius: 15px;
	-o-border-radius: 15px;
	color: #fff;
	font-size: 17px;
	font-weight: 500;
	background-color: #36207a;
}
.myacc-left ul li a:hover, .myacc-left ul li a.active{
	background-color: #7a2eff;
}
.myacc-right{
	flex: 1;
	background-color: #36207a;
	padding: 20px;
	border-radius: 15px;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	-ms-border-radius: 15px;
	-o-border-radius: 15px;
}
.myacc-right-table tr th{
	color: #fff;
	font-size: 18px;
	font-weight: 700;
	background-color: #7a2eff;
	padding: 15px 10px;
	vertical-align: middle;
	border-bottom: solid 5px #36207a;
}
.myacc-right-table thead th:first-child{
    border-radius:15px 0 0 15px;
}

.myacc-right-table thead th:last-child{
    border-radius:0 15px 15px 0;
}
.myacc-right-table tr td{
	color: #100f16;
	font-size: 16px;
	font-weight: 700;
	background-color: #f2eeff;
	border: none;
	padding: 15px 10px;
	border-bottom: solid 5px #36207a;
}
.myacc-right-table tbody td:first-child{
    border-radius:15px 0 0 15px;
}

.myacc-right-table tbody td:last-child{
    border-radius:0 15px 15px 0;
}
.tableimg{
	margin-bottom: 5px;
}
.tableimg img{
	border-radius: 15px;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	-ms-border-radius: 15px;
	-o-border-radius: 15px;
	max-width: 130px;
}
.myacc-right-bottom{
	display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}
.myacc-right-bottom-product{
	padding: 8px;
	background-color: #f2eeff;
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-ms-border-radius: 10px;
	-o-border-radius: 10px;
}
.myacc-right-bottom-product h4{
	color: #100f16;
	font-size: 16px;
	font-weight: 700;
	text-align: center;
	margin: 0 0 10px 0;
}
.myacc-right-bottom-product img{
	width: 100%;
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-ms-border-radius: 10px;
	-o-border-radius: 10px;
}
.myacc-right-bottom-productprice{
	margin: 10px 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.myacc-right-bottom-productprice h5{
	margin: 0;
	color: #100f16;
	font-size: 16px;
	font-weight: 700;
}
.myacc-right-bottom-productprice a{
	color: #100f16;
	font-size: 20px;
}
.productpricelink a{
	display: block;
	text-align: center;
	background:linear-gradient(to bottom,#6619ce,#2c6bf7);
	font-size: 20px;
	font-weight: 600;
	color: #fff;
	text-shadow: 1px 1px 1px #000;
	padding: 15px 10px;
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-ms-border-radius: 10px;
	-o-border-radius: 10px;
}
.productpricelink a:hover{
	background:linear-gradient(to bottom,#2c6bf7,#6619ce);
}
.myacc-right-table tr td .ticketbox-count span{
	color: #000;
}
.myacc-right-table tr td .ticketbox-count span label{
	color: #fff;
}

.mydetailsbg{
	max-width: 500px;
	margin: 0 auto;
	padding: 35px;
	border-radius: 15px;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	-ms-border-radius: 15px;
	-o-border-radius: 15px;
	background-color: #36207a;
	position: relative;
}

.formdiv .form-input{
	position: relative;
	margin-bottom: 20px;
}
.formdiv .form-input i{
	position: absolute;
	color: #a284ff;
	left: 25px;
    top: 15px;
	font-size: 25px;
}
.formdiv .form-control{
	height: 65px;
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-ms-border-radius: 10px;
	-o-border-radius: 10px;
	border: solid 1px #5334b4;
	background-color: #2e1a6d;
	color: #fff;
	font-size: 16px;
	font-weight: 300;
	padding-left: 70px;
}
.formdiv .form-control::placeholder{
	color: #fff;
}
.formdiv .form-select{
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23a284ff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3E%3C/svg%3E");
}

.btnsubmit{
    font-size: 17px;
    color: #fff;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 30px;
    background:linear-gradient(to bottom, #ffb4d5 0%, #ff5ca8 45%, #ff007f 100%);
    border-radius:10px;
    position:relative;
    transition:.2s;
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    -ms-border-radius:10px;
    -o-border-radius:10px;
	text-shadow: 1px 1px 1px #000;
	font-weight: 600;
}
.btnsubmit:before{
    content:"";
    position:absolute;
    left:5px;
    right:5px;
    top:4px;
    height:45%;
    border-radius:10px;
    background:linear-gradient(
        to bottom,
        rgba(255,255,255,.8),
        rgba(255,255,255,0)
    );
}
.btnsubmit:hover{
    transform:translateY(-2px);
}
.paymentbg h2{
	color: #fff;
	font-size: 30px;
	font-weight: 500;
	margin: 0 0 25px 0;
}
.paymentbg-form{
	max-width: 100%;
}
.uw-bestelling{
	padding: 25px;
	border-radius: 15px;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	-ms-border-radius: 15px;
	-o-border-radius: 15px;
	background-color: #36207a;
}
.uw-bestelling-table tr th{
	color: #fff;
	font-size: 20px;
	font-weight: 700;
}
.uw-bestelling-table tr td{
	color: #fff;
	font-size: 20px;
	font-weight: 400;
	vertical-align: middle;
}
.uw-bestelling-table tr th, .uw-bestelling-table tr td{
	background: none;
	border: none;
}
.uw-bestelling-table .form-select{
	width: 60px;
	height: 50px;
	border-radius: 15px;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	-ms-border-radius: 15px;
	-o-border-radius: 15px;
	background-color: #5236a8;
	border: none;
	color: #fff;
	font-size: 20px;
}
.uw-bestelling-table .bestellingimg{
	width: 115px;
	height: 115px;
	object-fit: cover;
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-ms-border-radius: 10px;
	-o-border-radius: 10px;
}
.uw-bestelling-table .delete{
	display: inline-block;
    padding: 15px;
    background-color: #5236a8;
    color: #fff;
    font-size: 22px;
    border-radius: 10px;
}
.uw-bestelling-table .delete:hover{
	background-color: #d9314b;
}
.overzicht{
	margin: 15px 0;
	padding: 25px;
	background-color: #36207a;
	border-radius: 15px;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	-ms-border-radius: 15px;
	-o-border-radius: 15px;
}
.overzicht p{
	display: flex;
	align-items: center;
	justify-content: space-between;
	color: #fff;
	font-size: 20px;
}
.payment-newsletter{
	margin: 15px 0;
	padding: 25px;
	background-color: #4a2e9e;
	border-radius: 15px;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	-ms-border-radius: 15px;
	-o-border-radius: 15px;
}
.payment-newsletter-inner{
	display: flex;
	gap: 18px;
}
.payment-newsletter-inner .form-control{
	height: 58px;
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-ms-border-radius: 10px;
	-o-border-radius: 10px;
	color: #a48dec;
	font-size: 20px;
	border: solid 1px #6043b8;
	background-color: #2e1a6d;
	flex: 1;
}
.payment-newsletter-inner .form-control::placeholder{
	color: #a48dec;
}
.payment-newsletter-inner button{
    font-size: 17px;
    color: #fff;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 40px;
    background:linear-gradient(to bottom, #fac8a1 0%, #f89b6a 45%, #fb6a49 100%);
    border-radius:10px;
    position:relative;
    transition:.2s;
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    -ms-border-radius:10px;
    -o-border-radius:10px;
	text-shadow: 1px 1px 1px #000;
	font-weight: 600;
}
.payment-newsletter-inner button:before{
    content:"";
    position:absolute;
    left:5px;
    right:5px;
    top:4px;
    height:45%;
    border-radius:10px;
    background:linear-gradient(
        to bottom,
        rgba(255,255,255,.8),
        rgba(255,255,255,0)
    );
}
.checkdiv{
	color: #fff;
	font-size: 20px;
}

.betalbtn{
	margin-top: 70px;
	text-align: center;
}
.betalbtn a{
    font-size: 17px;
    color: #fff;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 40px;
    background:linear-gradient(to bottom, #e4a7d2 0%, #dd5ba4 45%, #e91371 100%);
    border-radius:10px;
    position:relative;
    transition:.2s;
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    -ms-border-radius:10px;
    -o-border-radius:10px;
	text-shadow: 1px 1px 1px #000;
	font-weight: 600;
}
.betalbtn a:before{
    content:"";
    position:absolute;
    left:5px;
    right:5px;
    top:4px;
    height:45%;
    border-radius:10px;
    background:linear-gradient(
        to bottom,
        rgba(255,255,255,.8),
        rgba(255,255,255,0)
    );
}
.signuptext{
	color: #d9cdff;
	font-size: 13px;
	font-weight: 300;
}
.signuptext a{
	color: #fff;
	font-size: 13px;
	font-weight: 500;
}
.signuptext a:hover{
	color: #d9cdff;
}
.walletbg h1{
	color: #fff;
	font-size: 42px;
	font-weight: 700;
	margin: 0px 0 45px 0;
	text-align: center;
}
.walletbg .mydetailsbg{
	max-width: 950px;
}
.walletbg .form-input{
	margin-bottom: 0;
}
.chooseticketbg{
	background-color: #36207a;
	padding: 25px;
	border-radius: 15px;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	-ms-border-radius: 15px;
	-o-border-radius: 15px;
	position: relative;
}

/*** choose ticket start ***/

.coordinates-container {
    /* This used to have a fixed height ( calc(100vh - 180px) ) and
       overflow:hidden, with each column scrolling independently
       inside its own box. That design turned out fragile across
       screen sizes and zoom levels -- it needed .game-image-area to
       stretch to fill that exact height for its own scrollbar to
       even work, and broke in more than one way when it didn't.
       Removing that height/scroll caused a different problem: Grid's
       default is to stretch both columns to match each other's
       height, so selecting many tickets (and growing the ticket
       panel) was stretching the image column to match, leaving a
       large empty gap under the image, and there was no scroll
       *anywhere* to reach the extra tickets that caused it.
       align-items:start turns that stretch off, so each column sizes
       independently: the image column stays its natural size no
       matter how many tickets are selected, and the ticket panel
       gets its own bounded, independently scrollable height below. */
    display              : grid;
    grid-template-columns: 1fr 350px;
    gap                  : 25px;
    padding              : 0;
    align-items          : start;
	color           	 : #fff;
}

/* The nav itself (navbar-expand-lg) only collapses to the mobile
   hamburger below 992px. Stacking this layout at a much higher
   1440px meant a wide dead zone (992px-1440px, which covers most
   ordinary laptop screens) where the nav still looked fully desktop
   but this layout had already switched to single-column "mobile"
   mode underneath it -- that mismatch, not a true mobile-only bug,
   is what showed up in the screenshots even at normal desktop
   window widths / zoom levels. Stacking now happens at the same
   991px point the nav itself uses, so both switch to mobile mode
   together. */
@media (max-width: 1200px) and (min-width: 992px) {
    /* Just above the stacking point, the fixed 350px sidebar leaves
       too little room for the image column -- narrow it instead of
       stacking early. */
    .coordinates-container {
        grid-template-columns: 1fr 300px;
        gap                  : 18px;
    }
}

@media (max-width: 991px) {
    .coordinates-container {
        grid-template-columns: 1fr;
        gap                  : 20px;
    }
    /* Ticket panel first, image second -- on a stacked single-column
       layout the tickets must be the very first thing visible, not
       something reachable only after scrolling past a potentially
       tall image. */
    .selected-tickets-panel {
        order: -1;
    }
}
.game-image-area {
    background: #5c3cbe;
    border-radius: 15px;
    padding: 20px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -ms-border-radius: 15px;
    -o-border-radius: 15px;
}

@media (max-width: 768px) {
    .game-image-area {
        padding: 12px;
    }
}

.image-tools {
    display      : flex;
    gap          : 8px;
    margin-bottom: 15px;
    flex-wrap    : wrap;
    align-items  : center;
}

.precision-badge {
    background: rgba(0, 0, 0, 0.5);
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 10px;
    margin-left: 8px;
    color: #fff;
}

.tool-btn {
    background   : rgba(255, 255, 255, 0.1);
    border       : 1px solid rgba(255, 255, 255, 0.2);
    padding      : 8px;
    border-radius: 10px;
    color        : #fff;
    cursor       : pointer;
    transition   : all 0.2s;
    display      : inline-flex;
    align-items  : center;
    gap          : 6px;
    font-size    : 13px;
    font-weight  : 500;
    min-height   : 44px;
}

.tool-btn:hover {
    background  : rgba(255, 215, 0, 0.2);
    border-color: #ffd700;
}

.tool-btn.active {
    background: #ffd700;
    color     : #0a0a2a;
}

.draw-line-btn.active {
    background: #ffd700;
    color     : #0a0a2a;
}

.spot-ball-btn.active {
    background  : #28a745;
    color       : #fff;
    border-color: #28a745;
}

.magnifier-btn.active {
    background  : #17a2b8;
    color       : #fff;
    border-color: #17a2b8;
}

.remove-line-btn {
    background  : rgba(220, 53, 69, 0.3);
    border-color: #dc3545;
}

.remove-line-btn:hover {
    background  : #dc3545;
    border-color: #dc3545;
}

.color-picker {
    display    : flex;
    gap        : 6px;
    align-items: center;
    flex-wrap  : wrap;
}

.color-picker span {
    font-size: 12px;
	min-width: 70px;
}

.color-option {
    width        : 30px;
    height       : 30px;
    border-radius: 50%;
    cursor       : pointer;
    border       : 2px solid transparent;
    transition   : all 0.2s;
}

.color-option.selected {
    border-color: #fff;
    transform   : scale(1.1);
}

.ball-type-selector {
    display      : flex;
    gap          : 6px;
    align-items  : center;
    flex-wrap    : wrap;
	margin-top: 10px;
}

.ball-option {
    background: rgba(255, 255, 255, 0.1);
    padding: 3px;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 30px;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    -ms-border-radius: 50px;
    -o-border-radius: 50px;
}

.ball-option.selected {
    background: #ffd700;
    color     : #0a0a2a;
}

.zoom-controls {
    display    : flex;
    gap        : 5px;
    margin-left: auto;
}

.image-wrapper {
    position                  : relative;
    overflow                  : auto;
    border-radius             : 12px;
    background                : #0a0a1a;
    /* A flat 450px reserved more height than shorter laptop screens
       actually have room for, forcing avoidable scrolling within
       .game-image-area even after the align-self fix above makes
       that scrolling actually reachable. Scaling with viewport
       height means shorter screens ask for less. */
    min-height                : min(450px, 42vh);
    -webkit-overflow-scrolling: touch;
}

.game-canvas {
    /* Was display:inline-block with no explicit width, which left the
       game image's width:100% with no definite containing-block width
       to resolve against -- browsers fell back to the image's native
       pixel size, so the photo rendered far wider than its wrapper and
       got clipped on the right (the bug from the screenshot). A block
       box with an explicit width gives img's percentage width
       something real to resolve against, at every viewport size. When
       zoomed in (zoomIn()/zoomOut() set img.style.width above 100%),
       the image still overflows this box and .image-wrapper's
       overflow:auto still makes it scrollable, exactly as before. */
    position: relative;
    display : block;
    width   : 100%;
}

.game-image {
    width         : 100%;
    max-width     : 100%;
    height        : auto;
    object-fit    : contain;
    background    : rgba(0,0,0,0.25);
    user-select   : none;
    display       : block;
    pointer-events: auto;
    cursor        : crosshair;
}

.temp-line-canvas {
    position      : absolute;
    top           : 0;
    left          : 0;
    width         : 100%;
    height        : 100%;
    pointer-events: none;
    z-index       : 15;
}

.markers-container {
    position      : absolute;
    top           : 0;
    left          : 0;
    width         : 100%;
    height        : 100%;
    pointer-events: none;
}

.coordinate-marker {
    position      : absolute;
    transform     : translate(-50%, -50%);
    cursor        : pointer;
    transition    : transform 0.2s;
    z-index       : 20;
    pointer-events: auto;
}

.coordinate-marker:hover {
    transform: translate(-50%, -50%) scale(1.2);
}

.coordinate-marker i {
    font-size: 34px;
    filter   : drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}

.coordinate-tooltip {
    position      : absolute;
    background    : rgba(0, 0, 0, 0.9);
    color         : #ffd700;
    padding       : 4px 8px;
    border-radius : 6px;
    font-size     : 10px;
    white-space   : nowrap;
    pointer-events: none;
    bottom        : 100%;
    left          : 50%;
    transform     : translateX(-50%);
    margin-bottom : 5px;
    font-family   : monospace;
}

.coordinate-counter {
    margin-top   : 15px;
    padding      : 12px;
    background   : rgba(0, 0, 0, 0.5);
    border-radius: 10px;
    text-align   : center;
    font-size    : 14px;
}

.coordinate-counter span {
    color      : #ffd700;
    font-size  : 20px;
    font-weight: bold;
}

.selected-tickets-panel {
    background: #5c3cbe;
    border-radius: 15px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    /* Was height:100% -- meaningful now that align-items:start above
       stops this column from being force-stretched to match a tall
       ticket list. Capped so a large ticket count (the docx example
       used 9) can't grow this panel, or the page, taller: the list
       inside scrolls on its own instead. min(...) so it's not
       needlessly tall on short viewports either. */
    height: auto;
    max-height: min(680px, calc(100vh - 260px));
    min-height: 0;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -ms-border-radius: 15px;
    -o-border-radius: 15px;
}

.tickets-list {
    flex                      : 1 1 auto;
    display                   : flex;
    flex-direction            : column;
    align-items               : stretch;
    justify-content           : flex-start;
    /* This is the one intentional scrollbar in this layout: the
       ticket list scrolls on its own, bounded by
       .selected-tickets-panel's max-height above, so selecting many
       tickets grows neither the panel nor the page -- exactly what
       was asked for. The Proceed button below (a sibling, not a
       flex-1 child) stays pinned at the bottom of the panel since
       it's outside this scrolling area. */
    overflow-y                : auto;
    min-height                : 0;
    padding-right             : 5px;
    -webkit-overflow-scrolling: touch;
	margin-top: 15px;
	padding: 5px 0;
	scrollbar-width: thin;
    scrollbar-color: #fb9013 #fff;
}

.ticket-card {
    background   : rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding      : 10px;
    margin-bottom: 10px;
    cursor       : pointer;
    border-left  : 3px solid transparent;
    transition   : all 0.2s;
}

.ticket-card.empty-ticket {
    border-left-color: #ffc107;
}

.ticket-card.filled-ticket {
    border-left-color: #28a745;
}

.ticket-card.active {
    background: rgba(255, 215, 0, 0.2);
    box-shadow: 0 0 0 1px #ffd700;
}

.ticket-header {
    display: flex;
    gap    : 10px;
}

.ticket-thumb {
    width          : 45px;
    height         : 45px;
    border-radius  : 8px;
    background     : rgba(255, 255, 255, 0.1);
    display        : flex;
    align-items    : center;
    justify-content: center;
}

.ticket-info {
    flex: 1;
}

.ticket-name {
    font-weight  : 600;
    font-size    : 17px;
    margin-bottom: 3px;
}

.ticket-number {
    font-size  : 12px;
    color      : rgba(255, 255, 255, 0.6);
    font-family: monospace;
}

.coordinate-status {
    font-size : 12px;
    margin-top: 4px;
}

.coordinate-status.filled {
    color: #28a745;
}

.ticket-actions {
    display   : flex;
    gap       : 6px;
    margin-top: 8px;
    flex-wrap : wrap;
}

.ticket-action-btn {
    background   : rgba(255, 255, 255, 0.1);
    border       : none;
    padding      : 6px 10px;
    border-radius: 6px;
    color        : #fff;
    cursor       : pointer;
    font-size    : 12px;
    min-height   : 34px;
}

.proceed-btn {
    width        : 100%;
    margin-top   : 12px;
    padding      : 12px;
    background: linear-gradient(to bottom, #e4a7d2 0%, #dd5ba4 45%, #e91371 100%);
    border       : none;
    border-radius: 10px;
    font-weight  : 600;
    color        : #fff;
	text-transform: uppercase;
    cursor       : pointer;
    font-size    : 16px;
    min-height   : 48px;
	text-shadow: 1px 1px 1px #000;
	position: relative;
}
.proceed-btn:before {
    content: "";
    position: absolute;
    left: 5px;
    right: 5px;
    top: 4px;
    height: 45%;
    border-radius: 10px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, .8), rgba(255, 255, 255, 0));
}

.proceed-btn:disabled {
    opacity: 0.5;
    cursor : not-allowed;
}

.badge {
    display      : inline-block;
    padding      : 2px 6px;
    border-radius: 20px;
    font-size    : 10px;
    font-weight  : 600;
    margin-left  : 6px;
}

.badge.empty {
    background: #ffc107;
    color     : #0a0a2a;
}

.badge.filled {
    background: #28a745;
    color     : #fff;
}

.mode-indicator {
    position      : fixed;
    bottom        : 15px;
    left          : 15px;
    right         : 15px;
    background    : rgba(0, 0, 0, 0.9);
    padding       : 10px 16px;
    border-radius : 30px;
    font-size     : 12px;
    z-index       : 1000;
    pointer-events: none;
    animation     : pulse 1s infinite;
    text-align    : center;
}

@media (min-width: 768px) {
    .mode-indicator {
        left      : 20px;
        right     : auto;
        min-width : 260px;
        text-align: left;
    }
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.7;
    }
}

@keyframes incompleteTicketPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(248, 113, 113, 0.7); }
    50% { box-shadow: 0 0 0 10px rgba(248, 113, 113, 0); }
}
.ticketpanel-box.needs-attention {
    animation: incompleteTicketPulse 0.8s ease-out 3;
}

@keyframes fadeInOut {
    0% {
        opacity  : 0;
        transform: translateX(100px);
    }

    10% {
        opacity  : 1;
        transform: translateX(0);
    }

    90% {
        opacity  : 1;
        transform: translateX(0);
    }

    100% {
        opacity  : 0;
        transform: translateX(100px);
    }
}

.cursor-coord {
    position      : fixed;
    background    : rgba(0, 0, 0, 0.9);
    color         : #ffd700;
    padding       : 5px 12px;
    border-radius : 25px;
    font-size     : 12px;
    font-family   : 'Courier New', monospace;
    font-weight   : bold;
    pointer-events: none;
    z-index       : 1001;
    white-space   : nowrap;
    border        : 1px solid #ffd700;
}

.magnifier-glass {
    position      : fixed;
    width         : 200px;
    height        : 200px;
    border-radius : 50%;
    border        : 3px solid #ffd700;
    background    : rgba(0, 0, 0, 0.95);
    pointer-events: none;
    z-index       : 2000;
    display       : none;
    overflow      : hidden;
}

@media (max-width: 768px) {
    .magnifier-glass {
        width : 150px;
        height: 150px;
    }
}

.magnifier-glass img {
    position: absolute;
    width   : auto;
    height  : auto;
}

.magnifier-coord {
    position     : absolute;
    top          : 5px;
    left         : 50%;
    transform    : translateX(-50%);
    background   : rgba(0, 0, 0, 0.9);
    color        : #ffd700;
    padding      : 3px 8px;
    border-radius: 20px;
    font-size    : 10px;
    font-family  : monospace;
    font-weight  : bold;
    white-space  : nowrap;
    border       : 1px solid #ffd700;
    z-index      : 2001;
}

.magnifier-crosshair {
    position : absolute;
    top      : 50%;
    left     : 50%;
    transform: translate(-50%, -50%);
    width    : 18px;
    height   : 18px;
    z-index  : 2002;
}

.magnifier-crosshair::before,
.magnifier-crosshair::after {
    content   : '';
    position  : absolute;
    background: rgba(255, 215, 0, 0.9);
}

.magnifier-crosshair::before {
    top      : 50%;
    left     : 0;
    right    : 0;
    height   : 2px;
    transform: translateY(-50%);
}

.magnifier-crosshair::after {
    left     : 50%;
    top      : 0;
    bottom   : 0;
    width    : 2px;
    transform: translateX(-50%);
}
.panel-header h3{
	margin-bottom: 20px;
    font-weight: 600;
}
.panel-header p{
	display: flex;
	align-items: start;
	gap: 10px;
	font-size: 14px;
}
.ball-type-selector span{
    font-size: 13px;
	min-width: 70px;
}
.timer{
    color:#ffc107;
    font-size:40px;
    font-weight:bold;
	display: inline-block;
}

.timerbox{
	text-align: center;
	flex: 1;
}
.timerbox label{
	display: block;
}
.timerbox .bi-stopwatch{
    font-size: 37px;
}
.timerbox-inner{
	display: inline-block;
	text-align: left;
}
.plus_icon{
	font-size: 40px;
}

.tennis-ball img{
	width: 30px;
	height: 30px;
}
.base-ball img{
	width: 25px;
	height: 25px;
}
.tains-ball img{
	width: 20px;
	height: 20px;
}
.cricket-ball img{
	width: 20px;
	height: 20px;
}
.golf-ball img{
	width: 15px;
	height: 15px;
}

.ticketpanel-right-top{
	background: #5c3cbe;
	padding: 20px;
	border-radius: 15px;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	-ms-border-radius: 15px;
	-o-border-radius: 15px;
}
.ticketpanel-bottombtn a {
    font-size: 20px;
    color: #fff;
    text-transform: uppercase;
    display: flex;
	justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    background: linear-gradient(to bottom, #ffb4d5 0%, #ff5ca8 45%, #ff007f 100%);
    border-radius: 10px;
    position: relative;
    transition: .2s;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    text-shadow: 1px 1px 1px #000;
	margin-top: 15px;
}
.ticketpanel-bottombtn a:before {
    content: "";
    position: absolute;
    left: 5px;
    right: 5px;
    top: 4px;
    height: 45%;
    border-radius: 10px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, .8), rgba(255, 255, 255, 0));
}
.ticketpanel-right-top{
	overflow-y: auto;
    max-height: 880px;
    padding-right: 5px;
    -webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
    scrollbar-color: #fb9013 #fff;
}
.ticketpanel-box{
	margin: 10px 0;
	padding: 15px;
	background: rgba(0, 0, 0, 0.3);
	border-radius: 16px;
	text-align: center;
	border: 1px solid rgba(255, 255, 255, 0.1);
	transition: .2s;
}
.ticketpanel-box img{
	width: 60px;
	height: 60px;
	border-radius: 10px;
	object-fit: cover;
	margin-bottom: 8px;
}
.ticketpanel-box h4{
	color: #fff;
	font-size: 14px;
	font-weight: 500;
	text-align: center;
	margin-bottom: 4px;
}
.ticketpanel-box h2{
	color: #ffd700;
	font-size: 18px;
	font-weight: 700;
	text-align: center;
	margin: 0 0 10px 0;
	font-family: monospace;
}
.ticketpanel-box-btns{
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 8px;
}
.ticketpanel-box-btns .btn{
    padding: 5px 14px;
    border-radius: 20px;
    border: none;
    color:#fff;
	text-transform: uppercase;
    font-size:11px;
    font-weight:600;
    cursor:pointer;
    transition:.2s;
}
.ticketpanel-box-btns .btn:hover{
    transform:translateY(-1px);
    filter:brightness(1.08);
}
.ticketpanel-box-btns .btn:active{
    transform:translateY(1px);
}
.ticketpanel-box-btns .replay{
    background:#28a745;
}
.ticketpanel-box-btns .delete{
    background:#dc3545;
}
.ticketpanel-box-btns .add{
    background:#ffc107;
    color:#0a0a2a;
}
.ticketpanel-box-btns .spot{
    background:#28a745;
}

/*** choose ticket end ***/

.headertop{
	margin-top: 25px;
}
.headertop ul{
	display: flex;
	align-items: center;
	padding: 0;
	margin: 0;
	justify-content: center;
}
.headertop li{
	list-style: none;
	margin: 0 8px;
	position: relative;
}
.headertop li ul{
    position: absolute;
    left: 0;
    top: 40px;
    border-radius: 15px;
    display: block;
    width: 170px;
    background: #fff;
	display: none;
	z-index: 99;
	border: solid 2px #0f0232;
}
.headertop li ul li a{
	display: block;
}
.headertop li:hover ul{
	display: block;
}
.headertop li a{
	display: inline-flex;
	gap: 7px;
	padding: 8px 12px;
	background: #fff;
	border-radius: 50px;
	-webkit-border-radius: 50px;
	-moz-border-radius: 50px;
	-ms-border-radius: 50px;
	-o-border-radius: 50px;
	color: #3B5998;
	font-size: 17px;
	text-transform: uppercase;
	font-weight: 600;
}
.giftcardbanner{
	margin-top: 20px;
}
.giftcardbanner img{
	width: 100%;
}
.abouttop{
	text-align: center;
}
.abouttop h1 {
    color: #fff;
    font-size: 22px;
    text-transform: uppercase;
    margin: 0 0 30px 0px;
    font-weight: 800;
}
.abouttop p {
    color: #fff;
    font-size: 15px;
    line-height: 20px;
    margin: 0 0 22px 0px;
    word-break: break-all;
}

.gift-ticket-box img{
	width: 100%;
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-ms-border-radius: 10px;
	-o-border-radius: 10px;
}
.gift-ticket-box-bottom{
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.gift-ticket-box-bottom{
	margin-top: 15px;
}
.gift-ticket-box{
    background-color: #704fd5;
    padding: 20px;
    border-radius: 15px;
}
.gift-ticket-box-bottom a {
    font-size: 17px;
    color: #fff;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    padding: 13px 30px;
    background: linear-gradient(to bottom, #ffb4d5 0%, #ff5ca8 45%, #ff007f 100%);
    border-radius: 10px;
    position: relative;
    transition: .2s;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    text-shadow: 1px 1px 1px #000;
	font-weight: 700;
}
.gift-ticket-box-bottom a:before {
    content: "";
    position: absolute;
    left: 5px;
    right: 5px;
    top: 4px;
    height: 45%;
    border-radius: 10px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, .8), rgba(255, 255, 255, 0));
}

/* This pair of rules used to be unconditional (no @media wrapper at
   all), which pulled the logo out of the header's normal flex flow
   at every screen size via position:absolute -- with the logo no
   longer occupying its flex slot, the nav items shifted left into
   that space while the logo kept rendering on top of them, which is
   exactly the "Home button behind the logo" bug from the
   screenshot. Removed: .header .navbar-brand already has its correct
   normal-flow rule above (padding:0; flex-shrink:0), which is what
   should govern at every width. */
.btncheckout{
    display: flex;
    justify-content: end;
    margin-top: 30px;
}
.btncheckout a{
    font-size: 17px;
    color: #fff;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    padding: 13px 30px;
    background: linear-gradient(to bottom, #ffb4d5 0%, #ff5ca8 45%, #ff007f 100%);
    border-radius: 10px;
    position: relative;
    transition: .2s;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    text-shadow: 1px 1px 1px #000;
	font-weight: 700;
}
.btncheckout a:before {
    content: "";
    position: absolute;
    left: 5px;
    right: 5px;
    top: 4px;
    height: 45%;
    border-radius: 10px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, .8), rgba(255, 255, 255, 0));
}

@media only screen and (min-width: 1141px) and (max-width: 1280px) {
	.header .navbar .nav-link, .header-right-btns a{font-size: 13px;}
	.langdrop{min-width: 90px;}
	.info_content_bottom_btns{gap: 20px;}
}
@media only screen and (min-width: 992px) and (max-width: 1140px) {
	.header .navbar .nav-link, .header-right-btns a{font-size: 12px;}
	.langdrop{min-width: 90px;}
	.header .navbar-brand img{width: 100px;}
	.ticketsmainbg-inner{grid-template-columns: repeat(3, 1fr);}
	.info_content_top{flex-direction: column; gap: 15px;}
	.info-ticketbox-count div{justify-content: start;}
	.info_content_bottom_btns{gap: 10px;}
	.info_content_bottom_btns a{font-size: 13px; padding: 10px;}
	.myacc-right-table{overflow-x: scroll;}
	.myacc-right-bottom{grid-template-columns: repeat(2, 1fr)}
	.myacc-right{width: calc(100% - 280px);}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
	.header .navbar-toggler{background-color: #fff;}
	.header .navbar-collapse{background-color: #fff; padding: 20px; border-radius: 15px; position: absolute; top: 100px; width: 97vw;}
	.ticketsmainbg-inner{grid-template-columns: repeat(2, 1fr);}
	.footernav{gap: 15px;}
	.footernav a{font-size: 17px;}
	.myacc-right-table{overflow-x: scroll;}
	.myacc-right-bottom{grid-template-columns: repeat(2, 1fr)}
	.myacc-right{width: calc(100% - 280px);}
	.uw-bestelling-table{overflow-x: scroll;}
	.overzicht p{font-size: 14px;}
	.uw-bestelling-table tr th, .uw-bestelling-table tr td{font-size: 14px;}
	.color-option{width: 21px; height: 21px;}
	.header .navbar-brand{position: inherit; top: 0;}
}
@media only screen and (max-width: 767px) {
	.header{position: inherit;}
	.header-inner{flex-direction: column; gap: 20px; align-items: start;}
	.header .navbar{width: 100%;}
	.header .navbar-toggler{background-color: #fff;}
	.header .navbar-brand img{width: 150px;}
	.header .navbar-collapse{background-color: #fff; padding: 20px; border-radius: 15px;}
	.langdrop{min-width: 110px;}
	.header-right-btns a{font-size: 14px;}
	.header-right-btns{justify-content: center; width: 100%;}
	.banner-bg{padding: 60px 0;}
	.ticketsmainbg-inner{grid-template-columns: repeat(1, 1fr);}
	.footernav{display: block;}
	.footernav a{display: inline-block; margin: 5px; font-size: 16px;}
	.copyright{font-size: 15px;}
	.inner-heading{margin-top: 20px;}
	.inner-heading h1{font-size: 20px;}
	.info_content_top{flex-direction: column; gap: 15px;}
	.info_content_mid_btns a{font-size: 18px;}
	.info_content_midinfo-table tr td{font-size: 14px;}
	.info_content_bottom_btns{flex-direction: column; gap: 15px; align-items: start;}
	.infobox-bottom .nav-tabs .nav-link{min-width: 140px; font-size: 18px;}
	.myacc-bg{flex-direction: column;}
	.myacc-left{min-width: 100%;}
	.myacc-right{width: 100%;}
	.myacc-right-table{overflow-x: scroll;}
	.myacc-right-bottom{grid-template-columns: repeat(1, 1fr)}
	.mydetailsbg{padding: 15px;}
	.uw-bestelling-table{overflow-x: scroll;}
	.overzicht p{font-size: 14px;}
	.uw-bestelling-table tr th, .uw-bestelling-table tr td{font-size: 14px;}
	.paymentbg h2{font-size: 20px;}
	.payment-newsletter-inner{flex-direction: column;}
	.payment-newsletter-inner button{justify-content: center;}
	.image-wrapper{min-height: fit-content;}
	.color-option{width: 21px; height: 21px;}
	.ball-option{font-size: 10px; padding: 6px;}
	.headertop li a{font-size: 11px;}
	.headertop{margin: 15px 0;}
	.gift-ticket-box-bottom a{padding: 13px 15px;}
	.header .navbar-brand{position: inherit; top: 0;}
}