/*
HTML Code, Javascript, CSS, Images, and Text Copyright (c) 2006-2008 SudokuConquest.com, All Rights Reserved. Copyright infringers will be prosecuted.
*/

body {
	background-color: #f9f9f9;
	text-align: center;
}

a:link,
a:visited,
a:active {
	text-decoration: underline;
	color: #000090;
}

a:hover {
	text-decoration: underline;
	color: #666690;
}

.board {
	border: 0;
	padding: 0px;
	margin: 0px auto;
	text-align: center;
	border-collapse: collapse;
}

.cellNumber,
.cellNumberError,
.cellNumberSelect {
	width: 43px;
	height: 45px;
	vertical-align: middle;
	text-align: center;
	padding: 0px;
	margin: 0px;
	background-color: #fff;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16pt;
	color: #000000;
	border: 1px solid #aaaaaa;
}

.cellTopBlack {
	border-top: 2px solid #000000;
}

.cellBottomBlack {
	border-bottom: 2px solid #000000;
}

.cellLeftBlack {
	border-left: 2px solid #000000;
}

.cellRightBlack {
	border-right: 2px solid #000000;
}

.cellEmpty {
	border: 0;
}

.cellNumberError {
	background-color: #faa;
}

/* New Start */
.cellNumberSelect {
	background-color: #ff4;
}

.rightSideBox {
	background-color: #f0e0d0;
	border-color: #d0a070;
	border-style: solid;
	border-width: 1px;
	float: right;
	padding: .5em;
	margin-top: 0px;
	margin-left: 8px;
	margin-bottom: 8px;
	margin-right: 0px;
	width: 125px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10pt;
	text-align: center;
}

.tutorialMain {
	text-align: left;
	margin: 0px auto;
	width: 600px;
}

.tutorialSecondary {
	text-align: center;
}

/* New End */

.cellNumberInput1,
.cellNumberInput2,
.cellNumberInput3,
.cellNumberInput4,
.cellNumberInput5,
.cellNumberInput6,
.cellNumberInput7 {
	vertical-align: middle;
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;
	border: solid 0 #ffffff;
	margin: 0px;
	width: 43px;
	color: #000090;
	background-color: transparent;
}

.cellReadOnly {
	color: #000;
}

.cellNumberInput1 {
	font-size: 16pt;
}

.cellNumberInput2 {
	font-size: 12pt;
}

.cellNumberInput3 {
	font-size: 10pt;
}

.cellNumberInput4 {
	font-size: 9pt;
}

.cellNumberInput5 {
	font-size: 8pt;
}

.cellNumberInput6 {
	font-size: 7pt;
}

.cellNumberInput7 {
	font-size: 6pt;
}

.title1 {
	font-family: Arial, Helvetica, sans-serif;
	text-align: center;
	font-size: 16pt;
	color: #000090;
}

.text1 {
	font-family: Arial, Helvetica, sans-serif;
	text-align: center;
	font-size: 11pt;
	color: #000090;
}

.text2 {
	font-family: Arial, Helvetica, sans-serif;
	text-align: center;
	font-size: 9pt;
	color: #000090;
}

.leftColumn>h1,
.leftColumn>h2,
.middleBoard h1,
.middleBoard h2 {
	display: inline;
	color: #000090;
}

.leftColumn>h1,
#body>div:nth-child(79)>div.fullWidth>div.middleBoard>div>form>div:nth-child(2)>h1,
.middleBoard h1 {
	font: bold 20px Arial, Helvetica, sans-serif;
}

.leftColumn>h2,
#body>div:nth-child(79)>div.fullWidth>div.middleBoard>div>div:nth-child(2)>h2,
.middleBoard h2 {
	font: normal 10pt Arial, Helvetica, sans-serif;
}

h1 span,
h2 span {
	display: none;
}

.fullWidth {
	width: 1000px;
	margin: 0 auto;
}

.fullWidth.tutorial {
	width: 965px;
}

.leftColumn {
	width: 210px;
	float: left;
	text-align: center;
}

.rightColumn {
	float: right;
	width: 165px;
}

.middleBoard {
	margin-left: 275px;
	margin-right: 255px;
}

.showOnMobile {
	display: none;
}

@media only screen and (max-width: 450px) {
	.showOnMobile {
		display: inline;
	}

	.hideOnMobile {
		display: none;
	}

	.middleBoard {
		margin: 0;
	}

	.fullWidth {
		width: 100%;
	}

	body {
		margin: 0px;
	}
}

@media only screen and (min-width: 320px) and (max-width: 349px) {

	.cellNumber,
	.cellNumberError,
	.cellNumberSelect,
	.cellShaded,
	.cellTotal {
		width: 29px;
		height: 31px;
	}

	.topNumber,
	.bottomNumber,
	.topNumberHelp,
	.bottomNumberHelp,
	.topNumberSelectHelp,
	.bottomNumberSelectHelp {
		font-size: 7pt;
	}

	.cellNumberInput1,
	.cellNumberInput2,
	.cellNumberInput3,
	.cellNumberInput4,
	.cellNumberInput5,
	.cellNumberInput6,
	.cellNumberInput7 {
		width: 29px;
	}

	.cellNumberInput1 {
		font-size: 12pt;
	}

	.cellNumberInput2 {
		font-size: 9pt;
	}

	.cellNumberInput3 {
		font-size: 8pt;
	}

	.cellNumberInput4 {
		font-size: 7pt;
	}

	.cellNumberInput5,
	.cellNumberInput6,
	.cellNumberInput7 {
		font-size: 6pt;
	}
}

@media only screen and (min-width: 350px) and (max-width: 450px) {
	.cellNumberInput1 {
		font-size: 14pt;
	}

	.cellNumberInput2 {
		font-size: 10pt;
	}

	.cellNumberInput3 {
		font-size: 8pt;
	}

	.cellNumberInput4 {
		font-size: 7pt;
	}

	.cellNumberInput5,
	.cellNumberInput6,
	.cellNumberInput7 {
		font-size: 6pt;
	}
}

@media only screen and (min-width: 350px) and (max-width: 399px) {

	.cellNumber,
	.cellNumberError,
	.cellNumberSelect,
	.cellShaded,
	.cellTotal {
		width: 33px;
		height: 35px;
	}

	.topNumber,
	.bottomNumber,
	.topNumberHelp,
	.bottomNumberHelp,
	.topNumberSelectHelp,
	.bottomNumberSelectHelp {
		font-size: 8pt;
	}

	.cellNumberInput1,
	.cellNumberInput2,
	.cellNumberInput3,
	.cellNumberInput4,
	.cellNumberInput5,
	.cellNumberInput6,
	.cellNumberInput7 {
		width: 33px;
	}
}

@media only screen and (min-width: 400px) and (max-width: 450px) {

	.cellNumber,
	.cellNumberError,
	.cellNumberSelect,
	.cellShaded,
	.cellTotal {
		width: 38px;
		height: 40px;
	}

	.cellNumberInput1,
	.cellNumberInput2,
	.cellNumberInput3,
	.cellNumberInput4,
	.cellNumberInput5,
	.cellNumberInput6,
	.cellNumberInput7 {
		width: 38px;
	}
}

.middleBoard form {
	margin-block-end: 1em;
}

#lang-dropdown-link {
	text-decoration: none;
}

#lang-dropdown {
	display: none;
	position: absolute;
	top: calc(100% + 0px);
	left: 50%;
	transform: translateX(-50%);
	border-radius: 5px;
	background-color: #fff;
	box-shadow: 0 5px 20px 0 rgb(0 0 0 / 20%);
	z-index: 10;
	width: 200px;
	text-align: left;
	margin-left: 0;
}

#lang-dropdown div {
	margin: 10px;
}

#lang-dropdown p {
	margin-block: 0.5em 0;
}

#instructions-title {
	background-color: #fff;
	font-family: "Nunito Sans";
	font-style: normal;
	line-height: 150%;
	color: #000000;
	display: block;
	font-size: 27px;
	font-weight: bold;
	box-sizing: border-box;
	margin: 22.41px 0;
}

.heygg-body * a {
	text-decoration: underline;
	color: #000;
}

.heygg-body .intructions-copy h2 {
	color: #000;
}

.squeezy-message {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	color: #130C09;
	text-align: center;
	font-family: Arial;
	font-size: 16px;
	font-style: normal;
	font-weight: 700;
	line-height: 175%; /* 28px */
	gap: 8px;
}

.squeezy-message .text1 {
	color: #130C09;
}

.squeezy-message .link {
	display: flex;
	padding: 4px 12px;
	justify-content: center;
	align-items: center;
	gap: 10px;
	border-radius: 100px;
	color: #130C09;
	border: 2px solid #000;
	background: #FFEB70;
	text-decoration: none;
}
