.blured{
	filter: blur(4px);
   -webkit-filter: blur(4px);
}
.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;
}
.transparentOverlay.hidden{
	display: none;
}
h2{
	margin:0;
	font-size: var(--h2-font-size);
	font-family: var(--primary-font);
}
h1, h2{
	text-transform: uppercase;
}
h3{
	font-family: var(--primary-font);
	margin:0;
	font-size: var(--h3-font-size);
}
h4{
	font-family: var(--primary-font);
	margin:0;
	font-size: var(--h4-font-size);
	color: var(--style-color);
}
.action{
	text-decoration: none;
	font-size: var(--large-font-size);
	font-weight: bold;				
	line-height: 60px;
	border-radius: 24px;
	background-color: var(--style-color);
	width:initial;
	color: var(--body-color);
	padding: 0 50px;
	display: inline-block;
}
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: 2px var(--light-color) solid;
	border-radius: 8px;
	background-color: var(--light-color);	
	width: 100%;
	resize: none;
	padding: 18px;
	font-family: var(--primary-font);
	font-size: var(--primary-font-size);
}
input::placeholder {
  font-weight: 300;
  font-size: var(--primary-font-size);
}
select,
input{
	width:100%;
	height: 48px;
	border: 2px var(--light-color) solid;
	background-color: var(--light-color);
	border-radius: 8px;
	padding-left: 18px;
	outline: none;
	font-size: var(--big-font-size);
}
label[for]{
	position: absolute;
	font-size: var(--primary-font-size);
	left: 18px;
	top: 0px;
	z-index:2;
	line-height: 48px;
	white-space: nowrap;
}
textarea::placeholder{
	color: var(--light-color);
}
textarea:not(:placeholder-shown), textarea:focus{
	padding-top: 30px 18px 18px 18px;
}
textarea:not(:placeholder-shown) + label[for],
textarea:focus + label[for]{
	top: 0;
	padding: 6px 0 0 20px;
	width: 100%;
	left: 0;
	background-color: var(--light-color);
	border-radius: 8px;
}

input[type=number]{
	width:48px;
	height: 48px;
	line-height: 48px;
	border-radius: 8px;
	border: solid 1px #FFF;
	background-color: var(--light-color);
	padding-left: 10px;
}
input:not(:placeholder-shown):not(.noGaps), input:not(.noGaps):focus{
	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 {
	font-size: 12px;
	line-height: 12px;
	top: 6px;
}
button{
	width:100%;
	height: 48px;
	line-height: 15px;
	border: 1px var(--body-color) solid;
	background-color: var(--body-color);
	border-radius: var(--collection-b-radius-mid);
	outline: none;
	font-size: var(--large-font-size);	
	font-weight: bold;
	font-family: var(--primary-font);
	color:  var(--style-color);
	cursor: pointer;
}
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: 1px solid var(--light-color);
    border-radius: 8px;
    background-color: var(--light-color);
    cursor: pointer;
    height: 48px;
	outline: none;
	font-size: var(--primary-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;
}
.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.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.Winnerscircle{-webkit-mask-image: url(./i/Icons/Winnerscircle.svg); mask-image: url(./i/Icons/Winnerscircle.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.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);}
.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);
}
.gameYouCountOn{
	display: inline-flex;
	flex-direction: column;
	align-content: center;
	align-items: center;
	gap: 16px;
	width: 100%;
	padding: 80px 0 56px 0;
	background-image: linear-gradient(to bottom, #0e4c0e, #093709);
	text-align:center;
	color: var(--light-color);
	font-size: var(--primary-font-size);
	h2{
		font-size: 38px;
		color: var(--style-color);
	}
	.text{
		display: inline-block;
		width: 100%;
	}
	.opportunities{
		display: inline-flex;
		flex-direction: row;
		margin: 31px 0;
		gap: 60px;
		> div{
			display: inline-flex;
			flex-direction: column;
			align-content: center;
			align-items: center;
			gap: 16px;
			width: 386px;
			.Icon{
				width: 56px;
				height: 56px;	
				background-color: var(--style-color);
			}
		}
	}
	a{
		text-decoration: none;
		font-size: var(--large-font-size);
		line-height: 48px;
		border-radius: 24px;
		background-color: var(--chal-finished);
		width: initial;
		color: var(--style-color);
		padding: 0 50px;	
		margin-top:14px;
	}
}
.howToPlay{
	display: inline-flex;
	flex-direction: column;
	align-content: center;
	align-items: center;
	gap: 20px;
	width: 100%;
	padding: 80px 0 56px 0;
	background-color: var(--style-color);
	text-align:center;
	color: var(--light-color);
	font-size: var(--primary-font-size);	
	.Icon{
		background-color: var(--body-color);
		width: 104px;
		height: 94px;
	}
	h2{
		text-transform: uppercase;
		font-size: 38px;
		color: var(--body-color);		
	}
	.text{
		display: inline-block;
		width: 100%;
		color: var(--body-color);
	}
	a{
		text-decoration: none;
		font-size: var(--large-font-size);
		line-height: 60px;
		border-radius: 24px;
		background-color: var(--body-color);
		width: initial;
		color: var(--style-color);
		padding: 0 50px;	
		margin-top:14px;
	}
	.rules{
		display: inline-flex;
		flex-direction: row;
		margin: 31px 0;
		gap: 60px;		
		>div{
			display: inline-flex;
			flex-direction: row;
			font-size: 50px;
			font-weight: bold;
			color: var(--body-color);
			width:388px;
			>span{
				width: 63px;
				text-align:center;
				flex-shrink:0;
			}
			div{
				text-align: left;
				h4{
					font-size: var(--big-font-size);
					color: var(--body-color);
				}
				div{
					display:inline-block;
					margin-top: 5px;
					color: var(--body-color);
					font-size: var(--primary-font-size);
					font-weight: 500;
					line-height: 1.44;
				}
			}
		}
	}
}
footer{
	padding: 69px 160px 22px;
	font-family: var(--primary-font);
	background-color: var(--body-color);
	.line1{
		display: inline-flex;
		flex-direction: row;
		width:100%;
		gap: 80px;
		.Logo{
			width: initial;
			height: 62px;
		}
		.Menu{
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			gap:16px;
			padding-right: 20px;
			a{
				text-decoration: none;
				color: var(--style-color);
				font-size: var(--primary-font-size);
			}
		}
		.socials{
			color: var(--style-color);
			text-align: left;
			margin-left: auto;
			span{
				display: inline-block;
				margin-bottom: 9px;
			}
			.links{
				display: flex;
				gap:32px;
				a{
					display: inline-flex;
					justify-content: center;
					align-items: center;
					width: 52px;
					height: 52px;
					border-radius: 12px;
					background-color: var(--chal-finished);				
					
					.Icon{
						width:30px;
						height:30px;
						background-color: var(--style-color);
					}
				}
			}
		}
	}
	.line2{
		display: inline-flex;
		flex-direction: row;
		width:100%;
		margin-top:100px;
		>span{
			flex-grow:1;
			display: inline-flex;
			flex-direction: row;	
			align-content: center;			
			align-items: center;
			color: var(--style-color);
		}
		.paySystems{
			display: inline-flex;
			flex-direction: row;
			gap: 69px;
			align-content: center;
			align-items: center;
			img{
				width:60px;
			}
		}
	}
}
.Testimonials{
	display: inline-flex;
	flex-direction: column;
	align-content: center;
	align-items: center;
	gap: 16px;
	width: 100%;
	text-align:center;
	font-size: var(--primary-font-size);
	background-image: linear-gradient(to bottom, #0e4c0e, #093709);
	padding: 74px 0 79px 0;
	width:100%;
	text-align:center;
	color: var(--light-color);
	h2{
		font-size: 38px;
		color: var(--style-color);
	}
	.text{
		display: inline-block;
		width: 100%;
	}
	.Collection{
		width:100%;
		max-width: 888px;
		margin-top:20px;		
		color: var(--block-text-color);
		position: relative;
		>.Icon{
			position: absolute;
			top:50%;
			width:38px;
			height:38px;
			background-color: var(--light-color);
		}
		.Icon.Off{
			background-color: var(--body-inactive-color);
		}
		.Icon.Left{
			left: 0;
			transform: translate(calc(-100% - 22px),-50%);
		}
		.Icon.Right{
			right: 0;
			transform: translate(calc(100% + 22px),-50%);
		}		
		>div{
			display: grid;
			width:100%;
			grid-template-columns: 80px auto;
			padding: 32px  51px;
			background-color: var(--style-color);
			border-radius: var(--collection-b-radius);
			gap:38px;
			img{
				width: 80px;
				height: 80px;
				border-radius: 80px;
			}			
		}
		>div.hidden{
			display: none;
		}
		.Details {
			display: inline-flex;
			flex-direction: column;
			align-content: flex-start;
			align-items: flex-start;
			gap: 6px;
			text-align: left;
			font-size: var(--primary-font-size);
			.Rating{
				display: inline-flex;
				align-content: center;
				align-items: center;
				gap: 11px;
				.Icon{
					background-color: #26a626;
					width: 20px;
					height:20px;
				}
			}
			.Name{
				font-size: var(--big-font-size);
				font-weight: bold;
			}
		}		
	}
}
.challenges.linear{
	background-image: linear-gradient(to bottom, #0e4c0e, #093709);
}
@media screen and (max-width: 900px) {
	.gameYouCountOn{
		padding: 40px 24px;
		h2{
			width:100%;
			text-align:center;
		}
		.opportunities{
			width:100%;
			justify-content: space-around;
			> div{
				width:25%;
			}
		}			
	}
	.howToPlay{
		padding: 60px 24px;
		width: 100%;
		.rules{
			width:100%;
			justify-content: space-around;			
			>div{
				width: 25%;
			}
		}
	}	
	.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(--body-color);
	justify-content: center;
	width:100%;
	a{
		text-decoration: none;
		color: var(--light-color);
	}	
	.textWrap{
		width: 100%;
		max-width: 1272px;
		padding: 103px 0 148px 0;
		font-family: var(--primary-font);
		font-size: var(--big-font-size);
		h1{
			font-size: var(--h1-font-size);
			color: var(--light-color);
			font-weight: bold;
			margin: 0 0 35px 0;
		}
		.text{
			height: auto;
			width:100%;
			max-width:700px;				
			text-align: left;
			color: var(--light-color);
			h2, h3{
				color: var(--style-color);
				margin:0;
			}
			h2{
				font-size: var(--h4-font-size);
				line-height: normal;
			}
			h2{
				font-size: var(--h4-font-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;
			border-radius: var(--collection-b-radius);
			background-color: var(--style-color);
			padding: 40px;
			font-size: var(--primary-font-size);
			color: var(--chal-finished);
			h1{
				font-size: var(--h4-font-size);
				color: var(--body-color);
				font-weight: bold;
				margin:0 0 4px 0;
			}
			.help{
				font-size: 12px;
				line-height: 12px;
			}
			.dataEntry{
				display: inline-flex;
				flex-direction: column;
				justify-content:flex-start;
				width: 100%;
				gap: 24px;
				margin-top: 21px;
				> span{
					position: relative;
				}
				.Error{
					border: solid 2px var(--error-color);
				}
				.Error + label{
					color: var(--error-color);
				}
				input[type="checkbox"].Error + label::before{
					background-image: url(./i/Ui/checkBoxError.svg);
				}				
				textarea.Error + label{
					background: transparent;
				}				
			}
			textarea{
				height: 119px;
			}
			.error{
				position: absolute;
				top: 0px;
				left: 0px;
				width:100%;
				transform: translate(0, calc(-100% - 2px));
				font-size: var(--primary-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;
				}
			}
		}
	}
}
@media screen and (max-width: 768px) {
	.containerWrap{
		.textWrap{
			padding: 70px 24px 100px 24px;
			.text{
				text-align: left;
			}
			
		}
	}	
	.gameYouCountOn{
		h2{
			font-size: 18px;
		}
		.opportunities{
			flex-direction: column;
			gap: 40px;
			width:100%;
			> div{
				width:100%;
			}
		}	
		a{
			width:100%;
			padding:0;
			text-align: center;
		}		
	}
	.howToPlay{
		.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{
			flex-direction: column;
			align-items: center;
			align-content: center;
			gap: 60px;
			.Logo{
				width:128px;
				height:auto;
				align-self: center;
				margin: 0 0 20px 0;				
			}
			.Menu{
				padding-right: 0px;
				font-size: 16px;
				align-items: center;
			}
			.socials{
				width:100%;
				text-align:center;
				>span{
					width: 100%;
					line-height: 2.25;
				}
				a{
					margin:0;
				}
				.links{
					display: inline-flex;
					justify-content: center;
					gap: 69px;
					margin-top: 9px;
				}
			}
		}
		.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%;
			}
		}
	}
}
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(--primary-font-family);
	.header{
		width:100%;
		display: inline-flex;
		flex-direction: row;
		justify-content: space-between;
		padding: 12px;
		font-size: var(--primary-font-size);
		font-weight: 600;
	}	
	table{
		border-spacing: 0px;
		border-collapse: separate;
		thead th{
			background-color: var(--input-label-color);
			font-size: var(--primary-font-size);
			font-weight: 600;
			color: var(--input-inactive-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: aut0;
		padding:0;
		min-width: 4.8vh;
		min-height: 4.8vh;
		a{
			display: block;
			font-size: var(--primary-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: 0.8vh;
		height: 1.3vh;
	}
	#prevMonth{
		background-image: url("./i/Ui/prev.svg");
	}
	#nextMonth {
		background-image: url("./i/Ui/next.svg");
		margin-left: 4vh;
	}	
}
.starts{
	display: inline-block;
	font-size: var(--big-font-size);
	font-family: var(--primary-font);
	color: var(--body-color);
	font-weight: bold;
	border-radius: var(--collection-b-radius-small);
	background-color: var(--chal-long);
	line-height: 32px;
	white-space: nowrap;
	width: 220px;
	text-align: center;
	bdi span{
		width: 21px;
		display: inline-block;
		text-align: left;
	}
	bdi span.small{
		width: 11px;
	}
}
.starts.today{background-color: var(--chal-soon); color: var(--light-color);}
.starts.finished{background-color: var(--chal-finished); color: var(--light-color);}
.starts.started{background-color: var(--chal-started); color: var(--light-color);}

.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(--primary-font-family);
		font-size: var(--h2-size);
		font-weight: bold;
		text-align: left;
		height: 36px;
		line-height: 36px;
		margin:0;
	}
	.help {
		font-family: var(--primary-font-family);
		font-size: var(--primary-font-size);
		color: var(--input-label-color);
		font-weight: bold;
		text-align:center;	
		margin: 4px 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.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(--primary-font);
		font-size: var(--h3-font-size);
		font-weight: 600;
		color: var(--chal-finished);
		-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;
	img{
		width: 60px;
		height: 60px;
	}
}
@media screen and (max-width: 900px){	
	.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);
			}
		}
	}
}