:root
	{
		--boardsizemaxwidth:480px;
		--backgroundcolor:rgba(21, 32, 43, 1);
		--backgroundovercolor:rgba(30, 39, 50, 1);
		--backgroundmenuopencolor:rgba(0, 0, 0, 0.1);
		--backgroundinputcolor:rgba(39, 51, 64, 1);
		--backgroundbuttoncolor:rgba(54, 98, 231, 1);
		--backgroundoverbuttoncolor:rgba(84, 118, 251, 1);
		--textcolor:rgba(200, 200, 200, 1);
		--textcolorholder:rgba(150, 150, 150, 0.5);
		--gsborder:3px solid rgba(255, 255, 255, 1);
		--currentgsborder:3px solid var(--textcolor);
		--fontfamily:Nunito,sans-serif;
		--fontsize:1em;
		--whofontsize:10pt;
		--guessfontsize:22pt;
		--titlefontsize:24pt;
		--titlemarginhtwo:0pt;
		--titlemargin:1.6em;
		--infoitemfontsize:12pt;
		--green:rgba(0, 186, 124, 1);
		--yellow:rgba(239, 125, 49, 1);
		--red:rgba(249, 24, 128, 1);
		--thinweight:400;
		--normalweight:600;
		--boldweight:800;
		--guessborder:3px solid rgba(0, 0, 0, 1);
		--currentguessborder:3px solid var(--textcolor);
		--moduleborder:1px solid var(--textcolor);
		--shadowcolor:rgba(0, 0, 0, .070);
		--scrollbarcolor:;
	}
body
	{
		background-color:var(--backgroundcolor);
		color:var(--textcolor);
		font-size:var(--fontsize);
		font-family:var(--fontfamily);
		font-size:var(--fontsize);
		font-weight:var(--normalweight);
	}
.explainerClass
{
font-size:var(--fontsize);
}	
	
	
	
	
	


*
	{
		box-sizing:border-box;
		font-family:inherit;
		font-weight:inherit;
		margin:0;
		padding:0;
		scrollbar-color:var(--scrollbarcolor);
		scrollbar-width: thin;
	}
a
	{
		color:var(--textcolor);
		font-weight:var(--boldweight);
		text-decoration:none;
	}
html
	{
		overflow-y:scroll;
	}
b
	{
		font-weight:var(--boldweight);
	}






.root-class
	{
		display:inline-block;
		width:100%;
		max-height:100%;
	}


.game-wrap
	{
		max-width:var(--boardsizemaxwidth);
		padding:15px 15px 100px;
		height:100%;
		margin:auto;
	}
.menu-button
	{
		align-items:center;
		background-color:initial;
		border:0;
		border-radius:12px;
		color:var(--textcolor);
		cursor:pointer;
		display:flex;
		height:30px;
		justify-content:center;
		width:30px;
	}
.menu-button-open,.menu-button:hover
	{
		background-color:var(--backgroundovercolor);
	}
.title-wrapper
	{
		margin:auto;
	}
.title-bar
	{
		align-items:center;
		display:flex;
		justify-content:space-between;
	}
.title
	{
		flex-grow:1;
/*		margin-left:var(--titlemargin);*/
		text-align:center;
	}
.title h1
	{
		font-size:var(--titlefontsize);
		/*font-variant: small-caps;*/
		text-transform:uppercase;
		font-weight:var(--boldweight);
		display:block;
		margin-block-start: 0.67em;
		margin-block-end: 0.67em;
		margin-inline-start:var(--titlemarginhtwo);
		margin-inline-end: 0px;
		font-weight: bold;
		unicode-bidi: isolate;
	}
.title h2
	{
		font-size:var(--titlefontsize);
		text-transform:lowercase;
		font-weight:var(--boldweight);
	}
.gameinfo-top
	{
		padding:10px 10px 0;
		font-weight:var(--boldweight);
	}
.info-item
	{
		font-size:var(----infoitemfontsize);
		font-weight:var(--normalweight);
		text-transform:uppercase;
	}
.form-container
{
/*	position: sticky;
	top: 0;*/
}


.TheListOfpuzzles
	{
		padding-left:15%;
	}

.GameButton
	{
		width:80%;
		background-color:var(--backgroundbuttoncolor);
		font-size:var(--fontsize);
		color:var(--textcolor);
		cursor:pointer;
		border:var(--gsborder);
		border-style:none;
		border-radius:6px;
		margin-top:3pt;
		margin-top:3pt;
		margin-left:10pt;
		margin-right:10pt;
		padding-top:4pt;
		padding-bottom:4pt;
		text-align:center;
	}


.ListButtonClass
	{
		
	}

.GameButton:hover
	{
		background-color:var(--backgroundoverbuttoncolor);
		border-style:none;
	}

.word-input
	{
		background-color:var(--backgroundinputcolor);
		border:1px solid var(--textcolor);
		border-radius:5px;
		color:var(--textcolor);
		font-family:inherit;
		font-size:1.25em;
		margin:10px 0;
		padding:10px 15px;
		width:100%;
	}
.word-input::placeholder
	{
		color:var(--textcolorholder);
	}
.msg
	{
		display:flex;
		flex-direction:column;
		justify-content:center;
		margin-bottom:15px;
		margin-top:5px;
		min-height:50px;
	}
.msg-text
	{
		padding:0 5px;
	}
.msg p
	{
		margin-bottom:10px;
	}
.msg p:last-of-type
	{
		margin-bottom:0;
	}
.hx
	{
		padding-bottom:20px;
	}
.row-wrap
	{
		border:var(--gsborder);
		border-radius:8px;
		margin-top:5pt;
		margin-bottom:5pt;
		overflow:hidden;
		position:relative;
		text-transform:capitalize;
		font-variant: small-caps;
		cursor:pointer;
	}
.current-guess
	{
		border:var(--currentgsborder);
		border-style:groove;
		font-weight:900;
		font-weight:var(--boldweight);
	}
.outer-bar
	{
		background-color:var(--backgroundovercolor);
		height:1000%;
		top:-500%;
		position:absolute;
		width:100%;
		font-size:var(--guessfontsize);
	}
.inner-bar
	{
		background-color:var(--red);
		border-radius:5px;
		height:200%;
		min-width:1%;
		display:inline-block;
		font-size:var(--guessfontsize);
	}
	
	
	
.row
	{
		border-radius:5px;
		font-weight:inherit;
		height:100%;
		justify-content:space-between;
		padding-left:10px;
		padding-right:10px;
		padding-bottom:5px;
		padding-top:5px;
		position:absolute;
		left:0%;
		top:0%;
		width:100%;
		align-items:center;
		display:flex;
		font-size:var(--guessfontsize);
	}
.module-bg
	{
		background-color:var(--backgroundmenuopencolor);
		height:100svh;
		justify-content:center;
		left:0;
		position:fixed;
		top:0;
		width:100vw;
		z-index:2000;
		align-items:center;
		display:flex;
	}
.module-bg-none
	{
		display:none;
	}
.module-wrap
	{
		position:fixed;
		display:flex;
		flex-direction:column;
		max-width:460px;
		max-height:calc(100svh - 140px);
		position:relative;
		width:calc(100vw - 40px);
		z-index:3001;
	}
.module
	{
		scrollbar-gutter:stable both-edges;
		
		background-color:var(--backgroundinputcolor);
		border:var(--moduleborder);
		border-radius:10px;
		box-shadow:0 1px 1px var(--shadowcolor),0 2px 2px var(--shadowcolor),0 4px 4px var(--shadowcolor),0 8px 8px var(--shadowcolor),0 16px 16px var(--shadowcolor);
		height:100%;
		overflow-y:auto;
		padding:20px;
		z-index:2001;
	}
.module p
	{
		font-size:16pt;
		margin:10px 0;
	}
.module-close-button
	{
		--size:30px;
		align-items:center;
		background-color:var(--backgroundinputcolor);
		border:var(--moduleborder);
		border-radius:calc(var(--size)/2);
		cursor:pointer;
		display:flex;
		height:var(--size);
		justify-content:center;
		position:absolute;
		right:calc(var(--size)/3*-1);
		top:calc(var(--size)/3*-1);
		width:var(--size);
		z-index:2002;
	}
.module-close-button:hover
	{
		background-color:var(--backgroundovercolor);
	}
.module-close-button svg
	{
		height:24px;
		width:24px;
	}
.module-title
	{
		align-items:center;
		display:flex;
		padding-bottom:5px;
	}
.module-title h2
	{
		font-size:20pt;
		font-weight:900;
		font-weight:var(--boldweight);
		line-height:100%;
		margin:0;
		padding-left:0px;
	}
.menu-wrap
	{
		display:none;	
	}
.menu-bg
	{
		height:100svh;
		left:0;
		position:fixed;
		top:0;
		width:100vw;
		z-index:1000;
		background-color:var(--backgroundmenuopencolor);
	}
.menu-content
	{
		background-color:var(--backgroundinputcolor);
		border-radius:10px;
		box-shadow:0 1px 1px var(--shadowcolor),0 2px 2px var(--shadowcolor),0 4px 4px var(--shadowcolor),0 8px 8px var(--shadowcolor),0 16px 16px var(--shadowcolor);
		max-width:calc(100vw - 40px);
		padding:10px;
		position:absolute;
		right:0;
		z-index:1001;
	}
.menu-item
	{
		align-items:center;
		background-color:initial;
		border:0;
		border-radius:5px;
		color:var(--textcolor);
		cursor:pointer;
		display:flex;
		font-size:16px;
		padding:10px 15px;
		text-align:left;
		white-space:nowrap;
		width:100%;
		margin-right:10px;
	}
.menu-item:hover
	{
		background-color:var(--backgroundovercolor);
	}
.menu-item:disabled
	{
		opacity:.6;
		pointer-events:none;
	}	
.Calc-text-span
	{
		animation:UpDown 1.5s infinite;
		display:inline-block;
		position:relative;
	}
@keyframes UpDown
	{
		0%,10%,to
		{
			transform:translateY(0);
		}
		19%
		{
			transform:translateY(-.25em);
		}
	}
.MainSettingWrap
	{
		
	}
.IndividualSetting
	{
		display: flex;
		margin: 20px 0px;
	}
.label
	{
		min-width: 30%;
		padding-right: 10px;		
	}
.labelOptions
	{
		width: 70%;
		margin-left:40px;
	}
.SettingInput
	{
		background-color:var(--backgroundinputcolor);
		color:var(--textcolor);
		font-size:inherit;
		width:100%;
	}
.SettingInput option
	{
		background-color:var(--backgroundcolor);
		border:solid 1px var(--backgroundcolor);
	}		
.SettingInput option:hover
	{
		background-color:var(--backgroundovercolor);
		line-height:1;
		border:solid 1px var(--textcolor);
		border-radius:5px;
		-webkit-appearance:none;
		outline: none;
	}
	

.SettingInput option:checked
	{
		background-color:var(--backgroundovercolor);
		color:var(--textcolor);
		line-height:1;
		border:solid 1px var(--textcolor);
		border-radius:5px;
		-webkit-appearance:none;
		outline: none;
	}
.SettingInput::-webkit-scrollbar
	{
		display: none;
	}
.CheckInput
	{
		appearance: none;
        position: relative;
        width: 1rem;
        height: 1rem;
        border: 1px solid;
        line-height: 1;
        background: var(--backgroundovercolor);
		cursor:pointer;
	}
.CheckInput[type="checkbox"]::before
	{
		position: relative;
		display:inline-block;
		width: 100%;
		height: 100%;
		text-align: center;
		white-space: pre;
		content: " ";
		background: var(--backgroundinputcolor);
	}
.CheckInput[type="checkbox"]:checked::before
	{
		content: "X";/*\2713*/
		background: var(--backgroundovercolor);
		color:var(--textcolor);
	}
.CheckSpan
	{
		display:inline-block;
		width:90%;
		cursor:pointer;
		padding-left:10pt;
	}
.CheckSpan:hover
	{
		background-color:var(--backgroundovercolor);
	}
.module-tab-container
	{
		background-color:var(--backgroundovercolor);
	}

.module-tab
	{
		background-color:var(--backgroundovercolor);
		color:var(--textcolor);
		border-color:var(--textcolor);
		border-style:solid solid none solid;
		border-width:5px 1px 0px 1px;	
		border-radius:0px;
		padding-left:5pt;
		padding-right:5pt;
		margin-right:2pt;
		opacity:50%;
		cursor:pointer;
	}
.module-tab:hover
	{
		opacity:80%;
	}
.module-tab-current
	{
		background-color:var(--backgroundinputcolor);
		opacity:100%;
		border-width:8px 1px 0px 1px;	
	}
.module-tab-current:hover
	{
		opacity:100%;
	}
main
	{
		position:relative;
		min-height:calc(100svh);
		width:100%;
		left:0%;
		display:inline-block;
	}	
@media (min-width:480px)
{

}


/*Chrome*/
@media screen and (-webkit-min-device-pixel-ratio:0) {
    input[type='range'] {
      overflow: hidden;
      width: 80px;
      -webkit-appearance: none;
      background-color: var(--textcolorholder);
    }
    
    input[type='range']::-webkit-slider-runnable-track {
      height: 10px;
      -webkit-appearance: none;
      color: #13bba4;
      margin-top: -1px;
    }
    
    input[type='range']::-webkit-slider-thumb {
      width: 10px;
      -webkit-appearance: none;
      height: 10px;
      cursor: ew-resize;
      background: var(--backgroundbuttoncolor);
      box-shadow: -80px 0 0 80px var(--backgroundbuttoncolor);
    }

}
/** FF*/
input[type="range"]::-moz-range-progress {
  background-color: var(--backgroundbuttoncolor); 
}
input[type="range"]::-moz-range-track {  
  background-color: var(--textcolorholder);
}
/* IE*/
input[type="range"]::-ms-fill-lower {
  background-color: var(--backgroundbuttoncolor); 
}
input[type="range"]::-ms-fill-upper {  
  background-color: var(--textcolorholder);
}




.whoclass
{
	font-size:var(--whofontsize);
}



.WinnerOut
{

	display:inline-block;
	width:100%;
	height:30%;
}

.WinnerIn
{
		margin-top:5pt;
		margin-bottom:5pt;
		position:relative;
}

.WinnerCont
{
		border:var(--gsborder);
		border-radius:8px;
		margin-top:5pt;
		margin-bottom:5pt;
		overflow:hidden;
		position:relative;
		display:inline-block;
		width:100%;
		background-color:var(--backgroundinputcolor);
		text-align:center;
		font-size:var(--fontsize);
}

.WinnerCont h2
{
	margin-top:5pt;
}


.gotitspan
{
	font-size:var(--whofontsize);
	margin-left:5pt;
}

.morebutton
{
	margin:5pt;
}

.BoxNumInfo
{
	padding-bottom:5pt;
	padding-left:5pt;
}



.theboxclass
{
	display:inline-block;
	width:var(--fontsize);
	height:var(--fontsize);
	overflow:hidden;
	margin-right:2pt;
}


.titleCloseWordDiv
{
	font-size:var(--guessfontsize);
	position:relative;
	display:inline-block;
	height:10%;
}

.CloseWordDiv
{

	
}

.ConfirmGiveClass
{
text-align:center;
}

.buttonboxgiveclass
{
	padding-top:10pt;
}


.warning
{
	position:fixed;
	top:80%;
	left:0%;
	width:100%;
	height:20%;
	font-size:20pt;
	background-color:rgba(255, 255, 0, 1);
	color:rgba(255, 0, 0, 1);
	z-index:9999;
	text-align:center;
	overflow:hidden;
	cursor:pointer;
	padding-top:15pt;
	word-wrap: break-word;
}