button.light{
	background-color: var(--page-color) !important;
}
.blured{
	filter: blur(4px);
   -webkit-filter: blur(4px);
}
.overlay, .transparentOverlay{
	position: fixed;
	left:0;
	top: 0; 
	z-index: 10000;
	width: 100%;
	height: 100%;
	overflow: auto;
	display: grid;
	grid-template-columns: 1fr;
	align-items: flex-start;
	justify-items: center;
	padding-top:10vh;
	background-color: rgba(4, 34, 69, 0.7);
}
.overlay.hidden, .transparentOverlay.hidden{
	display: none;
}
h1, h2{
	text-transform: uppercase;
}
h1{
	font-family: var(--prm-font);
	font-size: var(--h1-size);
	color: var(--menu-text-color);
	font-style: italic;
	font-weight: 900;
	margin:0;
}
h2{
	margin:0;
	font-size: var(--h2-size);
	font-family: var(--prm-font);
}
h3{
	font-family: var(--prm-font);
	margin:0;
	font-size: var(--big-font-size);
	color: var(--body-text-color);
}
h4{
	font-family: var(--prm-font);
	margin:0;
	font-size: var(--h4-size);
	color: var(--second-text-color);
	font-style: italic;
}
.action{
	text-decoration: none;
	text-transform: uppercase;
	font-size: var(--mid-font-size);
	font-family: var(--prm-font);
	font-weight: 900;
	line-height: 48px;
	color: var(--color-active-text);
	background-color: var(--color-active);
	border-radius: 8px;
	width: max-content;
	min-width: 344px;
	padding: 0 50px;
	display: inline-block;
	text-align: center;
}
input[type="checkbox"]{
	display: none;
}
input[type="checkbox"] + label{
	width:100%;
	display: flex;
	justify-content: flex-start;
	gap: 17px;
	align-items: center;
	position: relative;
	left:0;
	top:0;
	float: left;
	span{
		white-space: wrap;
	}
}
input[type="checkbox"] + label::before{
	content: "";
	width:28px;
	height:28px;
	background-image: url(./i/Ui/checkBox.svg);
	background-repeat: no-repeat;
	background-size: contain;
	flex-shrink: 0;
}
input[type="checkbox"]:checked + label::before{
	background-image: url(./i/Ui/checkBoxChecked.svg);
}
input[type="checkbox"].Error:checked + label::before{
	background-image: url(./i/Ui/checkBoxErrorChecked.svg) !important;
}
textarea{
	outline: none;
    border: solid 1px var(--color-input);
	border-radius: 8px;
	background-color: var(--color-light);	
	width: 100%;
	resize: none;
	padding: 18px;
	font-family: var(--prm-font);
	font-size: var(--prm-font-size);
}
input::placeholder {
  font-weight: normal;
  font-family: var(--prm-font);
  font-size: var(--prm-font-size);
  color: var(--color-placeholders);
}
select,
input{
	width:100%;
	height: 48px;
	border: solid 1px var(--color-input);
	background-color: var(--color-light);
	border-radius: 8px;
	padding-left: 18px;
	outline: none;
	font-size: var(--mid-font-size);
}
label[for]{
	position: absolute;
	font-size: var(--prm-font-size);			
	font-weight: normal;			
	color: var(--color-placeholders);
	left: 18px;
	top: 0px;
	z-index:2;
	line-height: 48px;
	white-space: nowrap;
}
textarea::placeholder{
	color: var(--color-light);
}
textarea:not(:placeholder-shown), textarea:focus{
	padding-top: 30px 18px 18px 18px;
}
textarea:not(:placeholder-shown) + label[for],
textarea:focus + label[for]{
	top: 2px;
	padding: 6px 0 0 20px;
	width: calc(100% - 2px);
	left: 1px;
	background-color: transparent;
	border-radius: 8px;
}

input[type=number]{
	width:48px;
	height: 48px;
	line-height: 48px;
	border-radius: 8px;
	border: solid 1px #FFF;
	background-color: var(--color-light);
	padding-left: 10px;
}
input:not(:placeholder-shown):not(.noGaps), input:not(.noGaps):focus, input.hasplaceholder{
	padding-top: 12px;
}
.custom-select + label{
	font-size: 12px;
	line-height: 12px;
	top: 6px;
}
textarea:not(:placeholder-shown) + label, 
textarea:focus + label,
input:not(:placeholder-shown) + label,
input:focus + label,
input.hasplaceholder + .uiCalendar + label,
input.hasplaceholder + label{
	font-size: 12px;
	line-height: 12px;
	top: 6px;
}
button{
	width:100%;
	font-size: var(--prm-font-size);
	color: var(--color-active);
	border: 2px var(--color-active) solid;
	border-radius: 8px;
	height: 38px;
	background-color: var(--color-light);
	cursor: pointer;
	outline: none;
	letter-spacing: 1px;
	font-weight: 900;
}
button:has(.Icon){
	position: relative;
	.Icon{
		position: absolute;
		left: 24px;
		top: 50%;
		transform: translate(0,-50%);
		background-color: var(--style-color);
	}
}
button.Disabled{
	background-color: var(--body-inactive-color);
	border-color: var(--body-inactive-color);
}
button.Inverted{
	background-color: var(--style-color);
	border-color: var(--style-color);
	color: var(--body-color);
}

.custom-phone{
	display: inline-flex;
	flex-direction: row;
	justify-content: flex-start;
	gap: 12px;
	width: 100%;
	input:nth-child(1), select{
		width: 90px;
	}
	.custom-select{
		width: 140px;
		select{
			padding-top: 0;
		}
	}
	input:nth-child(2){
		flex-grow: 1;
	}	
}
.custom-select {
    position: relative;
    width: 100%;
}
.custom-select select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    display: block;
    width: 100%;
    padding: 12px 0px 0 18px;
    border: solid 1px var(--color-input);
    border-radius: 8px;
    background-color: var(--color-light);
    cursor: pointer;
    height: 48px;
	outline: none;
	font-size: var(--prm-font-size);
}
.custom-select::after {
    content: "";
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    font-size: 12px;
    color: #333;
	mask-repeat: no-repeat;
	-webkit-mask-repeat: no-repeat;	
	mask-position: center;
	-webkit-mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;		
	-webkit-mask-image: url(./i/Icons/ClosedArrow.svg);
	mask-image: url(./i/Icons/ClosedArrow.svg);
	background-color: #000;
	width: 28px;
	height: 28px;	
}
.custom-select select:focus {
    outline: none;
}
.selectLike{
	height: 32px;
	width: 100%;
	max-width: 164px;
	position: relative;
	border: solid 1px var(--color-input);
	background-color: var(--color-light);
	border-radius: 8px;
	font-size: var(--mid-font-size);	
	color: #000;
	padding:0;
	margin:0;
	label{
		display:flex !important;
		margin:0 !important;
		width:100% !important;
		align-items: center;
		height: inherit;
		line-height: 32px;
		padding: 0 5px 0 10px;
		cursor: pointer;
		span{
			flex-grow:1;
			font-size: var(--prm-font-size);	
			color: #212427;
			padding-left: 15px;
			white-space: nowrap;
			display: inline-block;
			text-overflow:ellipsis;
			overflow: hidden;
		}
		.Icon{
			width: 20px;
			height: 20px;
			background-color: #212427;
		}
	}
	label::after{
		content: "";
		font-size: 12px;
		color: #333;
		background-repeat: no-repeat;
		background-position: center;
		background-size: contain;		
		background-image: url(./i/Icons/ClosedArrow.svg);
		width: 28px;
		height: 28px;
		display: block;
	}
	ul{
		display: none;
		position: absolute;
		top: 32px;
		left: 0;
		background-color: var(--color-light);	
		border-radius: 8px;		
		width: 100%;
		margin: 0;
		padding: 0;		
		z-index: 3;
		cursor: pointer;
		padding: 5px 10px;
		li {
			list-style-type: none;
			padding-left: 0;
		}	
	}
}
.selectLike:has(input:checked){
	ul {
		display: block;
	}	
}
.Icon{
	display: inline-block;
	cursor: pointer;
	mask-repeat: no-repeat;
	-webkit-mask-repeat: no-repeat;	
	mask-position: center;
	-webkit-mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;		
	background-color: #000;
	width: 28px;
	height: 28px;
}
.Icon.World{-webkit-mask-image: url(./i/Icons/World.svg); mask-image: url(./i/Icons/World.svg);}
.Icon.Cart{-webkit-mask-image: url(./i/Icons/Cart.svg); mask-image: url(./i/Icons/Cart.svg);}
.Icon.CartPlus{-webkit-mask-image: url(./i/Icons/CartPlus.svg); mask-image: url(./i/Icons/CartPlus.svg);}
.Icon.CartMinus{-webkit-mask-image: url(./i/Icons/CartPlus.svg); mask-image: url(./i/Icons/CartMinus.svg);}
.Icon.Account{-webkit-mask-image: url(./i/Icons/Account.svg); mask-image: url(./i/Icons/Account.svg);}
.Icon.Left{-webkit-mask-image: url(./i/Icons/Left.svg); mask-image: url(./i/Icons/Left.svg);}
.Icon.Right{-webkit-mask-image: url(./i/Icons/Right.svg); mask-image: url(./i/Icons/Right.svg);}
.Icon.Plus{-webkit-mask-image: url(./i/Icons/Plus.svg); mask-image: url(./i/Icons/Plus.svg);}
.Icon.Minus{-webkit-mask-image: url(./i/Icons/Minus.svg); mask-image: url(./i/Icons/Minus.svg);}
.Icon.TargetArt{-webkit-mask-image: url(./i/Icons/TargetArt.svg); mask-image: url(./i/Icons/TargetArt.svg);}
.Icon.Wallet{-webkit-mask-image: url(./i/Icons/Wallet.svg); mask-image: url(./i/Icons/Wallet.svg);}
.Icon.Star{-webkit-mask-image: url(./i/Icons/Star.svg); mask-image: url(./i/Icons/Star.svg);}
.Icon.Instagram{-webkit-mask-image: url(./i/Icons/Instagram.svg); mask-image: url(./i/Icons/Instagram.svg);}
.Icon.Facebook{-webkit-mask-image: url(./i/Icons/Facebook.svg); mask-image: url(./i/Icons/Facebook.svg);}
.Icon.Tiktok{-webkit-mask-image: url(./i/Icons/Tiktok.svg); mask-image: url(./i/Icons/Tiktok.svg);}
.Icon.Menu{-webkit-mask-image: url(./i/Icons/Menu.svg); mask-image: url(./i/Icons/Menu.svg);}
.Icon.MenuOpened{-webkit-mask-image: url(./i/Icons/MenuOpened.svg); mask-image: url(./i/Icons/MenuOpened.svg);}
.Icon.OpenArrow{-webkit-mask-image: url(./i/Icons/OpenedArrow.svg); mask-image: url(./i/Icons/OpenedArrow.svg);}
.Icon.ClosedArrow{-webkit-mask-image: url(./i/Icons/ClosedArrow.svg); mask-image: url(./i/Icons/ClosedArrow.svg);}
.Icon.Mail{-webkit-mask-image: url(./i/Icons/Mail.svg); mask-image: url(./i/Icons/Mail.svg);}
.Icon.Close{-webkit-mask-image: url(./i/Icons/Close.svg); mask-image: url(./i/Icons/Close.svg);}
.Icon.ModalClose{-webkit-mask-image: url(./i/Icons/ModalClose.svg); mask-image: url(./i/Icons/ModalClose.svg);}
.Icon.Dashboard{-webkit-mask-image: url(./i/Icons/Dashboard.svg); mask-image: url(./i/Icons/Dashboard.svg);}
.Icon.Challenge{-webkit-mask-image: url(./i/Icons/Challenge.svg); mask-image: url(./i/Icons/Challenge.svg);}
.Icon.Challenges{-webkit-mask-image: url(./i/Icons/Challenges.svg); mask-image: url(./i/Icons/Challenges.svg);}
.Icon.Tickets{-webkit-mask-image: url(./i/Icons/Tickets.svg); mask-image: url(./i/Icons/Tickets.svg);}
.Icon.Profile{-webkit-mask-image: url(./i/Icons/Profile.svg); mask-image: url(./i/Icons/Profile.svg);}
.Icon.Logout{-webkit-mask-image: url(./i/Icons/Logout.svg); mask-image: url(./i/Icons/Logout.svg);}
.Icon.CartUpdated{-webkit-mask-image: url(./i/Icons/CartUpdated.svg); mask-image: url(./i/Icons/CartUpdated.svg);}
.Icon.Game{-webkit-mask-image: url(./i/Icons/Game.svg); mask-image: url(./i/Icons/Game.svg);}
.Icon.Select{-webkit-mask-image: url(./i/Icons/Select.svg); mask-image: url(./i/Icons/Select.svg);}
.Icon.Trash{-webkit-mask-image: url(./i/Icons/Trash.svg); mask-image: url(./i/Icons/Trash.svg);}
.Icon.Target{-webkit-mask-image: url(./i/Icons/Target.svg); mask-image: url(./i/Icons/Target.svg);}
.Icon.Info{-webkit-mask-image: url(./i/Icons/Info.svg); mask-image: url(./i/Icons/Info.svg);}
.Icon.NoTicket{-webkit-mask-image: url(./i/Icons/NoTicket.svg); mask-image: url(./i/Icons/NoTicket.svg);}
.Icon.Ticket{-webkit-mask-image: url(./i/Icons/Ticket.svg); mask-image: url(./i/Icons/Ticket.svg);}
.Icon.ToCart{-webkit-mask-image: url(./i/Icons/ToCart.svg); mask-image: url(./i/Icons/ToCart.svg);}
.Icon.Reset{-webkit-mask-image: url(./i/Icons/Reset.svg); mask-image: url(./i/Icons/Reset.svg);}
.Icon.Cup{-webkit-mask-image: url(./i/Icons/Cup.svg); mask-image: url(./i/Icons/Cup.svg);}
.Icon.ShowPass{-webkit-mask-image: url(./i/Icons/ShowPass.svg); mask-image: url(./i/Icons/ShowPass.svg);}
.Icon.PassVisible{-webkit-mask-image: url(./i/Icons/PassVisible.svg); mask-image: url(./i/Icons/PassVisible.svg);}
.Icon.RejectedBin{-webkit-mask-image: url(./i/Icons/RejectedBin.svg); mask-image: url(./i/Icons/RejectedBin.svg);}
.Icon.Winner{-webkit-mask-image: url(./i/Icons/Winner.svg); mask-image: url(./i/Icons/Winner.svg);}
.Icon.Pick{-webkit-mask-image: url(./i/Icons/Pick.svg); mask-image: url(./i/Icons/Pick.svg);}
.Icon.Home{-webkit-mask-image: url(./i/Icons/Home.svg); mask-image: url(./i/Icons/Home.svg);}
.TargetIcon{
	display: inline-block;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;		
	width: 24px;
	height: 24px;	
	background-image: url(./i/Icons/Target.svg);
}
.containerWrapper:has(.aboutOurGame){
	background-color: var(--color-active-text);
}
.aboutOurGame{
	display: inline-flex;
	flex-direction: column;
	align-content: center;
	align-items: center;
	gap: 0px;
	width: 100%;
	padding: 45px 0 68px;
	text-align:center;
	color: var(--color-light);
	font-size: var(--prm-font-size);
	gap:15px;
	>img{
		width: 62px;
	}
	h3{
		font-size: var(--h1-size);
		color: var(--menu-text-color);
		text-transform: uppercase;
		letter-spacing: 1px;
		font-style: italic;
		font-weight: 900;
	}
	.text{
		display: inline-block;
		width: 100%;
	}
	.opportunities{
		display: inline-grid;
		grid-template-columns: 1fr 1fr 1fr 1fr;
		gap: 52px;
		width: 100%;
		margin-top: 15px;
		> div{
			display: inline-flex;
			flex-direction: column;
			align-content: flex-start;
			align-items: flex-start;
			gap: 11px;
			text-align: left;
			margin-top: 31px;
			img{
				width: 32px;
				height: 32px;	
				object-fit: contain;
				object-position: top;
			}
			>div{
				font-family: var(--prm-font);
				color: var(--body-text-color);
				font-weight: 500;
				margin-top: 8px;
			}			
		}
	}
}
.gameGuide{
	display: inline-flex;
	flex-direction: column;
	align-content: center;
	align-items: center;
	gap: 20px;
	width: 100%;
	padding: 76px 0 60px;
	background-image: linear-gradient(to bottom, #1d1d1d, #000);
	color: var(--body-text-color);
	font-family: var(--prm-font);
	font-size: var(--prm-font-size);	
	.Icon{
		background-color: var(--color-hightlight);
	}
	h2{
		text-transform: uppercase;
		font-size: var(--h1-size);
		font-style: italic;
		font-weight: 900;
		letter-spacing: 1px;
	}
	.text{
		display: inline-block;
		width: 100%;
	}
	a.action{
		border: 2px var(--color-hightlight) solid;
		background-color: transparent;
		letter-spacing: 0.5px;
		font-weight: 600;
		color: var(--color-hightlight);
	}
	.rules{
		display: grid;
		margin: 43px 0;
		gap: 120px;
		grid-template-columns: repeat(3,1fr);
		max-width: 1215px;
		.Icon{
			background-color: var(--body-text-color);
		}
		>div{
			display: flex;
			flex-direction: column;
			font-size: 50px;
			font-weight: bold;
			width: 100%;
			gap:13px;
			.Icon{
				width: 52px;
				height: 52px;
			}
			h4{
				font-size: var(--mid-font-size);
				font-weight: 600;
				color: var(--color-light);
			}
			>div{
				display:inline-block;
				margin-top: 20px;
				color: var(--body-color);
				font-size: var(--prm-font-size);
				font-weight: 500;
			}
		}
	}
}
footer{
	padding: 69px 160px 22px;
	font-family: var(--prm-font);
	background-color: var(--page-color);
	text-align:center;
	.line1{
		text-align:left;
		display: inline-grid;
		width:100%;
		max-width: 1000px;
		grid-template-columns: repeat(4,1fr);
		gap:0;
		label{
			font-size: var(--semi-font-size);
			color: var(--footer-color);
			margin-bottom: 16px;
			display: inline-block;
			width:100%;
			text-transform: uppercase;
		}
		.Menu{
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			gap:16px;
			padding-right: 20px;
			width:100%;
			a{
				text-decoration: none;
				text-transform: uppercase;
				font-size: var(--prm-font-size);
				color: var(--menu-text-color);	
				letter-spacing: 0.5px;
				font-weight: 500;
			}
		}
		.socials, .language {
			label{
				margin-bottom: 32px;
			}
		}
		.socials{
			width:100%;
			.links{
				display: inline-flex;
				gap:32px;
				a{
					display: inline-flex;
					justify-content: center;
					align-items: center;
					width: 38px;
					height: 38px;
					border-radius: 8px;
					background-color: var(--color-regular);				
					.Icon{
						width:29px;
						height:28px;
						background-color: var(--color-hightlight);
					}
				}
			}
		}
	}
	.line2{
		text-align:center;
		padding: 60px 0 20px 0;
		img{
			width: 199px;
			height: auto;
			display: inline-block;
		}
	}
	.line3{
		text-align:center;
		font-size: var(--prm-font-size);
		color: var(--color-light);
	}
}
.Testimonials{
	display: inline-flex;
	flex-direction: column;
	align-content: center;
	align-items: center;
	gap: 16px;
	width: 100%;
	text-align:center;
	background-color: var(--color-regular);
	padding: 68px 0 48px 0;
	width:100%;
	text-align:center;
	color: var(--color-light);
	font-family: var(--prm-font);
	font-size: var(--prm-font-size);
	font-weight: 500;	
	h2{
		color: var(--menu-text-color);
		text-transform: uppercase;
		font-size: var(--h1-size);
		font-style: italic;
		font-weight: 900;
		letter-spacing: 1px;
	}
	.text{
		display: inline-block;
		width: 100%;
	}
	.Collection{
		width:100%;
		max-width: 800px;
		margin-top:20px;		
		color: var(--second-text-color);
		position: relative;
		>.Icon{
			position: absolute;
			top:50%;
			width:38px;
			height:38px;
			background-color: var(--color-active);
		}
		.Icon.Off{
			background-color: var(--color-soldout);
		}
		.Icon.Left{
			left: 0;
			transform: translate(calc(-100% - 22px),-50%);
		}
		.Icon.Right{
			right: 0;
			transform: translate(calc(100% + 22px),-50%);
		}		
		>div{
			display: flex;
			flex-direction: column;
			width:100%;
			padding: 23px 51px 28px 51px;
			justify-content: center;
			align-items: center;			
			background-color: var(--color-active-text);
			gap: 8px;
			border-radius: 6px;
			.Name{
				font-weight: bold;
				font-size: var(--mid-font-size);
				margin-bottom: 9px;
			}
			img{
				width: 60px;
				height: 60px;
				border-radius: 60px;
				object-fit: cover;
			}			
		}
		>div.hidden{
			display: none;
		}
	}
}
.competitions.linear{
	background-color: var(--color-regular);
}
.competitions.light{
	background-color: var(--color-bg-light);
}
@media screen and (max-width: 900px) {
	.aboutOurGame{
		padding: 40px 24px;
		h3{
			width:100%;
			text-align:center;
			font-size: var(--semi-font-size);
		}
		img {
			width:28px;
		}
		.opportunities{
			grid-template-columns: 1fr 1fr;
			>div{
				font-size: var(--semi-font-size);
				img {
					width:24px;
					height:24px;
				}			
			}
		}			
	}
	.gameGuide{
		h2{
			width:100%;
			text-align:center;
			font-size: var(--semi-font-size);
		}
		>.Icon {
			width:28px;
		}		
		.rules {
			margin: 0;
			gap: 22px;
			> div{
				text-align:center;
				align-items: center;
				padding: 0 32px;
				h4, div{
					font-size: var(--semi-font-size);
				}
				.Icon{
					width: 32px;
					height: 32px;
				}
			}
		}
		.action{
			width: max-content;
			padding: 0 20px;			
		}
	}	
	.Testimonials{
		padding: 70px 24px;
		width: 100%;
		.Collection{
			width: calc(100% - 60px);
			.Icon.Left{
				transform: translate(calc(-100% - 6px),-50%);
			}
			.Icon.Right{
				transform: translate(calc(100% + 6px),-50%);
			}
		}
	}
	footer{
		padding: 60px 24px;
		width: 100%;
		.line1{gap: 30px;}
	}	
}
.containerWrap{
	display: inline-flex;
	background-color: var(--color-regular);
	justify-content: center;
	width:100%;
	a{
		text-decoration: none;
		color: var(--color-light);
	}	
	.textWrap{
		width: 100%;
		max-width: 1272px;
		padding: 61px 0 63px 0;
		font-family: var(--prm-font);
		font-size: var(--big-font-size);
		h1{
			margin: 0 0 40px 0;
		}
		.text{
			height: auto;
			width:100%;
			max-width: 959px;				
			text-align: left;
			color: var(--second-text-color);
			h2, h3{
				color: var(--second-text-color);
				margin:0;
			}
			h2{
				font-size: var(--h4-size);
				line-height: normal;
			}
			ul {			
				list-style-position: outside;v
			}
			li {
				text-indent: 0;
				padding-left: 17px;
			}
		}
		.form{
			height: auto;
			width:100%;
			max-width:700px;
			padding: 0 50px 0 38px;
			font-size: var(--prm-font-size);
			color: var(--body-text-color);
		}
	}
}
.containerWrap.about{
	background-color: var(--color-active-text);
}
.containerWrap.TextPage{
	background-color: var(--body-text-color);
	.textWrap {
		font-size: var(--prm-font-size);		
		line-height: 1.44;
		font-weight: 500;
		h1{
			color: var(--text-simple-color);
		}
    	.text {
      		h2, h3 {
				color: var(--text-simple-color);
			}
    	}
    }	
}
.modalDialog:is(.PassReset, .Login, .Signup, .MailConfirm, .Error){
	background-color: #000000;
	max-width: 800px;
	.body{
		display: grid;
		grid-template-columns: 50% 1fr;
		.Info{
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			padding: 60px 65px 60px 29px;
			gap: 35px;
			border-right: 1px #d3d4df solid;
			height: min-content;
			img{
				width:32px;
			}
			>div{
				display: flex;
				flex-direction: column;
				gap: 9px;
				>div{
					font-family: var(--prm-font);
					font-size: var(--prm-font-size);			
					font-weight: 500;
					color: #ffffff;
				}
			}
		}
		select, input {
			border: solid 1px #bdbdbd;
			background-color: #000000;
			color: #bdbdbd;
		}		
		label[for] {
			color: #bdbdbd;
		}		
		select.Error, input.Error{
			border: solid 1px var(--error-color) !important;
			color: var(--error-color);
		}
		select.Error+label, input.Error+label{
			color: var(--error-color);
		}		
		input:not(:placeholder-shown){
			color: #ffffff;
			border: solid 1px #ffffff;
		}				
	}
	.Icon.Close{
		background-color: var(--color-bg-light);
	}	
}
.modalDialog.PassReset, .modalDialog.MailConfirm{
	width: 100%;
	max-width: 510px;
	text-align: center;
	font-family: var(--prm-font);
	font-size: var(--prm-font-size);
	color: var(--menu-text-color);
	button{
		margin-top: 20px;
		color: var(--color-active-text);
		background-color: var(--color-active);		
		height: 38px;
		line-height: 34px;
		text-transform: uppercase;
		letter-spacing: 1px;
		font-weight: 900;
		font-family: var(--primary-font);
	}	
	.body{
		display: flex;
		flex-direction: column;
		align-items:center;
		gap: 14px;
		padding: 20px 35px;
		.entryForm{
			width: 100%;
			margin: 0 0 12px 0;
			padding: 0;			
		}
		> label{
			font-size: var(--big-font-size);
			font-weight: bold;
			text-transform: uppercase;
			margin: 26px 0 6px 0;
		}
		span{
			width: 100%;
		}
		a{
			font-weight: bold;
			color: inherit;
		}
		.error{
			line-height: 20px;
			height: 20px;			
			color: var(--color-hightlight);
			font-weight: 500;
		}
		.error.Good {
			color: var(--success-color);
		}		
		.codeInput{
			margin: 26px 0 15px 0;
			input{
				height: 48px;
				border-radius: 8px;
				border: solid 1px var(--color-input);				
				text-align: left;
				padding: 0 20px !important;
				letter-spacing: normal;
			}
			input::placeholder{
				color: var(--color-placeholders);
			}
		}
	}
}
.entryForm{
	font-family: var(--prm-font);
	padding: 24px 11px 64px 37px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding-bottom: 0;		
	label:not([for]){
		font-size: var(--big-font-size);			
		font-weight: bold;		
		color: #ffffff;	
	}
	.help{
		text-align:left;
		font-size: var(--prm-font-size);
		font-weight: normal;			
		color: var(--menu-text-color);
		a{
			font-weight: bold;
			color: var(--menu-text-color);
		}
	}
	> span{
		position: relative;
		height: auto;
		display: inline-block;		
		width: 100%;
		a {
			color: var(--color-placeholders);
			font-weight: bold;
		}
	}
	.Error{
		border: solid 1px var(--color-hightlight);
	}
	.Error + label{
		color: var(--color-hightlight);
	}
	input[type="checkbox"].Error + label::before{
		background-image: url(./i/Ui/checkBoxError.svg);
	}				
	textarea.Error + label{
		background: transparent;
	}	
	.error{
		position: absolute;
		top: 0px;
		left: 0px;
		width:100%;
		font-size: var(--prm-font-size);
		color: var(--error-color);
		text-align:center;
	}
	.error.Good {
		color: var(--success-color);
	}
	.DateSelector{
		display: inline-flex;
		gap: 15px;
		width:100%;
		span{
			position: relative;
			min-width: 100px;
		}
		span:nth-child(2){
			flex-grow:1;
		}
	}		
	.passNotice{
		font-weight: 500;
		font-size: var(--semi-font-size);
		color: var(--color-soldout);
	}
	.passNotice.Error{
		border: 0;
		color: var(--color-hightlight);
	}
	.ShowPass, .PassVisible{
		position: absolute;
		top: 50%;
		right: 18px;
		transform: translate(0,-50%);			
	}
	span:has(:is(input[type="password"], input[type="text"], textarea,.custom-select)){
		margin-top: 20px;
	}
	span:has(input[type=checkbox]){
		margin-top: 12px;
	}
	button{
		margin-top: 20px;
		color: var(--color-active-text);
		background-color: var(--color-active);		
		height: 38px;
		line-height: 34px;
		text-transform: uppercase;
		letter-spacing: 1px;
		font-weight: 900;
		font-family: var(--primary-font);
	}
}
@media screen and (max-width: 768px) {
	.containerWrap{
		.textWrap{
			padding: 70px 24px 100px 24px;
			.text{
				text-align: left;
			}
			
		}
	}	
	.aboutOurGame{
		h2{
			font-size: 18px;
		}
		a{
			width:100%;
			padding:0;
			text-align: center;
		}		
	}
	.gameGuide{
		.rules{
			flex-direction: column;
			>div{
				width: 100%;
			}
		}
		a{
			width:100%;
			padding:0;
			text-align: center;
		}				
	}
	.Testimonials{
		.Collection{
			width: calc(100% - 60px);
			>div{
				padding: 24px 33px;
				grid-template-columns: 1fr;
				grid-template-rows: 80px auto;
				gap: 14px;
			}
			.Icon.Left{
				transform: translate(calc(-100% - 6px),-50%);
			}
			.Icon.Right{
				transform: translate(calc(100% + 6px),-50%);
			}
			.Rating{		
				margin-bottom: 11px;
			}
		}
	}
	footer{
		.line1{
			grid-template-columns: 1fr;
			gap: 60px;
			text-align:center;
			label{
				font-weight: normal;
			}
		}
		.line2{
			flex-direction: column-reverse;
			margin-top:20px;
			text-align:center;
			gap:70px;
			line-height: 2.25;
			.paySystems{
				justify-content: center;
				margin-top:20px;
				width:100%;
			}
		}
	}
	.modalDialog.MailConfirm,
	.modalDialog.PassReset,
	.modalDialog.Signup,
	.modalDialog.Login{
		width:100%;
		height:100%;
		border-radius: 0;
		border:0;
		top: 0;
		left: 0;
		transform: none;		
		.body{
			grid-template-columns: 1fr;
			.Info{
				display: none;
			}
			.entryForm{
				padding:0;
			}
		}
	}
}
input.datePicker{
	background-image: url("./i/Ui/calendar.svg");
	background-repeat: no-repeat;
	background-position: calc(100% - 12px) center;
}
.Icon.Close[for=datePicker]{
	position: absolute;
	z-index:2;
	right: 10px;
	top: 50%;
	transform: translate(0,-50%);
}
input.datePicker:placeholder-shown + .Icon.Close[for=datePicker]{
	display: none;
}
.uiCalendar {
	display:block;
	background-color: #FFF;
	position: absolute;
	z-index:5;
	font-family: var(--prm-font);
	box-shadow: 0 2px 4px 2px rgba(0, 0, 0, 0.06);
	border-radius: 6px;	
	padding: 6px 0;
	.header{
		width:100%;
		display: inline-flex;
		flex-direction: row;
		justify-content: space-between;
		padding: 12px;
		font-size: var(--prm-font-size);
		font-weight: 600;
	}	
	table{
		border-spacing: 0px;
		border-collapse: separate;
		thead th{
			background-color: var(--color-input);
			font-size: var(--prm-font-size);
			font-weight: 600;
			color: var(--menu-text-color);
			padding: 12px;
		}	
		thead th:first-child{
			border-top-left-radius: 1vh; 
			border-bottom-left-radius: 1vh; 
		}		
	}	
	thead th:last-child{
		border-top-right-radius: 1vh; 
		border-bottom-right-radius: 1vh; 
	}
	tbody td{
		height: auto;
		padding:0;
		min-width: 4.8vh;
		min-height: 4.8vh;
		a{
			display: block;
			font-size: var(--prm-font-size);
			font-weight: 600;
			width: 4.4vh;
			height: 4.4vh;	
			line-height: calc(4.4vh - 4px);	
			border-radius: 4.4vh;
			border: 2px #FFF solid;
			color: #000;
			margin:0;
			text-align: center;
		}		
		a.today{
			background-color: var(--input-inactive-color);
		}
		a.disabled{
			color: #E3E8F2;
		}		
		a.selected{
			border: 2px #000 solid;
		}
	}
	#prevMonth, #nextMonth{
		display: inline-block;
		background-repeat: no-repeat;
		background-size: contain;
		width: 1.1vh;
		height: 2vh;
	}
	#prevMonth{
		background-image: url("./i/Ui/prev.svg");
	}
	#nextMonth {
		background-image: url("./i/Ui/next.svg");
	}	
	#monthYear{
		width: 150px;
		display: inline-block;
		text-align: center;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;	
		line-height: 2vh;
	}
	#selectYear{
		line-height: 2vh;
		border:0;
		padding: 0;
		margin: 0;
		height: 2.5vh;
		border-radius: 0;		
		font-size: var(--prm-font-size);
		font-weight: 600;
	}
}
.starts{
	display: inline-block;
	font-size: var(--small-font-size);
	font-family: var(--prm-font);
	color: var(--color-light);
	font-weight: 600;
	border-radius: 4px;
	background-image: linear-gradient(to bottom, #e84753, #cc2229);
	line-height: 24px;
	height: 24px;
	white-space: nowrap;
	width: initial;
	padding: 0 15px;
	text-transform: uppercase;
	bdi span{
		width: 21px;
		display: inline-block;
		color: var(--color-light);
	}
	bdi span.small{
		width: 11px;
	}
}
.starts.today, .starts.long, .starts.soon{
	background-image: linear-gradient(to bottom, #454a4f, #212427);	
}
.starts.finished{}
.starts.started{}

.modalDialog{
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	min-width: 60px;
	min-height: 60px;
	border-radius: var(--collection-b-radius);
	background-color: #fff;	
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap:0;
	.modalIcon{
		display: flex;
		flex-direction: row;
		justify-content: center;
		margin: 0 0 12px 0;
		img{
			width: 92px;
		}
	}
	.CloseAct{
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		height: 24px;
		gap: 12px;
		color: #000;
		position: absolute;
		top: 18px;
		right: 18px;
	}
	.ModalClose{
		background-color: #d8d8d8;
		position: absolute;
		top: -12px;
		right:0;
		transform: translate(0, -100%);
	}
	h3:empty{
		display: none;
	}
	h3{
		display: block;
		width: 100%;
		font-family: var(--prm-font);
		font-size: var(--h2-size);
		font-weight: bold;
		text-align: left;
		height: 36px;
		line-height: 36px;
		margin:0;
	}
	.body{
		flex-grow: 1;
		overflow: hidden;
		padding: 20px;
	}
	.actions{
		display: flex;
		height: auto;
		width:100%;
		flex-direction: row;
		justify-content: flex-end;
		gap: 10px;
		button {
			width: initial;
			padding: 0 15px;
		}
	}
	.actions:empty{
		display: none;
	}
}
.modalDialog.Error{
	width: 100%;
	max-width: 408px;
	.body{
		display: flex;
		flex-direction: column;
		font-family: var(--prm-font);	
		color: var(--body-text-color);
		font-size: var(--prm-font-size);
		align-items: center;
		gap: 14px;		
		label{
			font-weight: bold;
			font-size: var(--h3-size);
		}
		i{
			background-color: var(--color-hightlight);
		}
		button{
			margin-top: 36px;
			width: 100%;
			text-transform: uppercase;
			height: 48px;
			line-height: 44px;
			border-radius: 8px;
			background-color: var(--color-active);
			color: var(--color-active-text);
			text-align:center;
			font-family: var(--prm-font);
			font-size: var(--prm-font-size);					
			font-weight: 900;
			position:relative;
			letter-spacing: 1px;
			text-transform: uppercase;					
		}
		a{
			color: inherit;
			font-weight: bold;
		}
	}
}
.modalDialog.Quiz{
	max-width: 480px;
	.body{
		text-align: left;
		padding: 5px 0px 24px 0px;
		a{
			font-weight: bold;
			color: var(--chal-finished);
		}		
	}
}
.codeInput{
	display:flex;
	flex-direction: row;
	justify-content: space-between;
	width: 100%;
	input{
		width:48px;
		padding: 0 !important;
		text-align: center;
		font-family: var(--prm-font);
		font-size: var(--prm-font-size);
		font-weight: 600;
		color: var(--menu-text-color);
		-moz-appearance: textfield;
		appearance: textfield;
	}
	input::-webkit-outer-spin-button,
	input::-webkit-inner-spin-button {
	  -webkit-appearance: none;
	  margin: 0;
	}	
}
.codeInput.singleField input{
	width:100%;
	letter-spacing: 15px;
}
.preloadOverlay{
	position: fixed;
	top: 0;
	left:0;
	width:100%;
	height: 100%;
	background-color: rgba(0,0,0,0.5);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 10000000;
	.preloadWrapper{
		width: 200px;
		height: 200px;
		display: flex;
		flex-direction: column;
		border-radius: 6px;
		background-color: #fff;		
		justify-content: center;
		align-items: center;
		font-family: var(--prm-font);
		font-size: var(--small-font-size);
		color: var(--body-text-color);
		font-weight: normal;
		strong{
			font-weight: bold;
		}
		img{
			width: 64px;
			height: 64px;
		}
	}
}
@media screen and (max-width: 900px){	
	h4{
		font-size: var(--semi-font-size);
	}
	.codeInput{
		input{
			height: 10vw;
			width: 10vw;
			border-radius: 3vw;
		}
	}
	.custom-select::after {
		display: none;
	}
	.modalDialog.Quiz{
		max-width: 95%;
		width: 95%;
		.actions {
			button {
				font-size: var(--semi-font-size);
			}
		}
	}
	.action{
		line-height: 28px;
		font-size: var(--small-font-size);
		border-radius: 4px;
		padding: 0 20px;
		margin-top:8px;
	}	
}