@media all {
	:root {
		--bgcolor: #171595;
		--whitecolor: #000;
		--blackcolor: #F3F3F3;
		--barcolor: #2FA883;
		--greycolor: #999999;
		--yellowcolor: #fff601;
		--lightyellowcolor: #f7f14c;
		--redcolor: #F1753A;
		--fontfam: arial, sans-serif, monospace;
	}

	[data-theme="dark"] {
		--bgcolor: #171595;
		--whitecolor: #000;
		--blackcolor: #F3F3F3;
		--barcolor: #2FA883;
		--greycolor: #999999;
		--yellowcolor: #fff601;
		--lightyellowcolor: #f7f14c;
		--redcolor: #F1753A;
		--fontfam: arial, sans-serif, monospace;
	}

	:root {
		color-scheme: only light;
		forced-color-adjust: none;
	}

	body {
		overscroll-behavior:contain;
		overflow: hidden;
		user-drag: none;
		-webkit-user-drag: none;
		-webkit-touch-callout: none;
		-webkit-user-select: none;
		-khtml-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
	}

	img {
		pointer-events: none;
	}

	.container {
		position: absolute;
		top: 0;
		bottom: 0;
		height: 100%;
		left: 0;
		right: 0;
		display: grid;
		grid-template-columns: 26vw 24vw 24vw 26vw;
		grid-template-rows: 26% 24% 24% 26%;
		height: calc(100%);
		background: var(--bgcolor);
		color: var(--blackcolor);
		font-size: 16px;
		font-weight: 700;
		line-height: 20px;
		font-family: var(--fontfam);
		overflow: hidden;
	}

	/*GRID*/
	.grid-item {
		border-bottom: 1px solid var(--blackcolor);
		border-right: 1px solid var(--blackcolor);
		height: calc(100% - 1px);
		text-align: center;
	}

	.vmarkerl,
	.vmarkerr,
	.hmarkert,
	.hmarkerb {
		position: relative;
		top: calc(100% - 10px);
		left: 1vw;
		width: 40px;
		height: 20px;
		text-align: center;
		background: var(--bgcolor);
	}

	.vmarkerr {
		left: calc(25vw - 43px);
	}

	.hmarkert {
		top: 1vh;
		left: -20px;
	}

	.hmarkerb {
		top: calc(100% - 28px);
		left: -20px;
	}

	.thack {
		top: calc(1vh - 20px);
	}

	.hbar,
	.vbar {
		position: relative;
		top: 3vh;
		left: -100px;
		width: 200px;
		height: 40px;
		background: var(--bgcolor);
		color: var(--whitecolor);
	}
	.vbar {
		position: absolute;
		top: 50%;
		transform: translate(0%, -50%);
		left: 12vw;
		width: 40px;
		height: 200px;
		line-height: 200px;
	}

	.bg_hbarl,
	.bg_hbarr,
	.bg_vbart,
	.bg_vbarb {
		position: absolute;
		top: 5px;
		left: 0px;
		width: 100px;
		height: 30px;
		text-align: center;
		line-height: 40px;
		background: var(--blackcolor);
	}
	.bg_hbarl {
		border-radius: 20px 0 0 20px;
	}
	.bg_hbarr {
		left: 100px;
		border-radius: 0 20px 20px 0;
	}
	.bg_vbart,
	.bg_vbarb {
		top: 0px;
		left: 5px;
		width: 30px;
		height: 100px;
	}
	.bg_vbart {
		border-radius: 20px 20px 0 0;
	}
	.bg_vbarb {
		top: 100px;
		border-radius: 0 0 20px 20px;
	}

	.hbarl,
	.hbarr,
	.vbart,
	.vbarb {
		position: absolute;
		top: 5px;
		left: 5px;
		width: 95px;
		height: 20px;
		text-align: center;
		line-height: 40px;
		background: var(--barcolor);
	}
	.hbarl {
		border-radius: 20px 0 0 20px;
	}
	.hbarr {
		left: 0px;
		border-radius: 0 20px 20px 0;
	}

	.vbart,
	.vbarb {
		width: 20px;
		height: 95px;
	}
	.vbart {
		border-radius: 20px 20px 0 0;
	}
	.vbarb {
		top: 0px;
		border-radius: 0 0 20px 20px;
	}

	.hbartxt,
	.vbartxt {
		position: absolute;
		top: 5px;
		left: 85px;
		width: 30px;
		height: 30px;
		text-align: center;
		line-height: 30px;
		font-size: 12px;
	}
	.vbartxt {
		position: absolute;
		top: 85px;
		left: 0px;
		width: 40px;
		height: 30px;
		text-align: center;
		line-height: 30px;
	}

	/*MENU*/
	.menu {
		position: absolute;
		/*top: calc(100% - 347px);
	 * 	left: 50%;
	 * 		transform: translate(-50%, 0%);
	 * 			width: 300px;
	 * 				height: 340px;*/
		top: calc(100% - 102px);
		left: 50%;
		transform: translate(-50%, 0%);
		width: 80px;
		height: 80px;
		background: var(--bgcolor);
		border-radius: 60px;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
		line-height: 24px;
	}

	.burger,
	.calbutt,
	.resbutt,
	.infbutt {
		position: absolute;
		bottom: 32px;
		left: 50%;
		transform: translate(-50%, 0%);
		width: 60px;
		height: 60px;
		background: var(--bgcolor);
		border-radius: 60px;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
		transition: 0.2s;
	}

	.b1,
	.b2,
	.b3 {
		position: absolute;
		top: 28px;
		left: 12px;
		width: 36px;
		height: 4px;
		border-radius: 1px;
		background: var(--blackcolor);
	}

	.b2 {
		top: 18px;
	}
	.b3 {
		top: 38px;
	}

	.calbutt {
		transform: translate(-50%, 0%);
	}

	.resbutt {
		transform: translate(-170%, 0%);
		display: none;
	}

	.infbutt {
		transform: translate(-50%, 0%);
	}

	.cal1 {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 32px;
		height: 32px;
		/*background: green;*/
		border: 4px solid var(--blackcolor);
		border-radius: 32px;
	}

	.cal2,
	.cal3 {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 2px;
		height: 34px;
		background: var(--blackcolor);
	}
	.cal3 {
		transform: translate(-50%, -50%) rotate(90deg);
	}

	.res1 {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 36px;
		height: 36px;
		background: var(--blackcolor);
		border-radius: 32px;
	}
	.res2 {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%) rotate(90deg);
		width: 4px;
		height: 20px;
		background: var(--bgcolor);
		border-radius: 0px;
	}

	.txtBlock {
		position: absolute;
		top: 25px;
		left: 40px;
		width: 100%;
		height: 6px;
		line-height: 20px;
		display: none;
	}

	.tA2 {
		margin-top: 5px;
		line-height: 20px;
	}
	.iicon {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 36px;
		height: 36px;
	}

	.dat {
		position: absolute;
		top: 25px;
		left: 180px;
		line-height: 20px;
		text-align: right;
		display: none;
	}

	.vibSwitchBG,
	.soundSwitchBG {
		position: absolute;
		top: 165px;
		right: 0px;
		width: 40px;
		height: 20px;
		background: var(--blackcolor);
		border-radius: 20px;
		cursor: pointer;
		-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
		-webkit-tap-highlight-color: transparent;
	}
	.soundSwitchBG {
		top: 190px;
	}

	.vibSwitch,
	.soundSwitch {
		position: absolute;
		left: 22px;
		top: 4px;
		width: 12px;
		height: 12px;
		background: var(--barcolor);
		border-radius: 10px;
		animation-duration: 0.3s;
	}

	.soundSwitch {
		left: 5px;
		background: var(--redcolor);
	}

	.inf {
		position: absolute;
		top: 20px;
		left: 20px;
		height: 240px;
		width: 260px;
		line-height: 20px;
		text-align: center;
		background: var(--bgcolor);
		display: none;
	}

	.buttTxt {
		position: absolute;
		top: 60px;
		left: 0px;
		width: 100%;
		font-size: 11px;
		text-align: center;
		background: var(--bgcolor);
		background: none;
		transition: opacity 0.2s;
		opacity: 0;
	}
	a,
	a:link,
	a:visited {
		color: var(--blackcolor);
		text-decoration: none;
	}


	/*Support warning*/
	.supWarn {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 350px;
		height: 140px;
		border-radius: 20px;
		background: var(--blackcolor);
		line-height: 20px;
		font-family: var(--fontfam);
		color: var(--whitecolor);
		display: none;
	}

	.cltxt {
		position: absolute;
		top: 50%;
		left: 50%;
		height: auto;
		width: 80%;
		transform: translate(-50%, -50%);
		text-align: center;
	}

	.clClick {
		cursor: pointer;
		position: absolute;
		top: 15px;
		right: 17px;
		height: 20px;
		width: 20px;
	}

	.cl1,
	.cl2 {
		position: absolute;
		top: 15px;
		right: 25px;
		transform: rotate(45deg);
		width: 2px;
		height: 20px;
		background: var(--whitecolor);
	}

	.cl2 {
		transform: rotate(-45deg);
	}

	/*INDICATOR*/
	.indicator,
	.zero {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 20px;
		height: 20px;
		/*background: green;*/
		border: 2px solid var(--whitecolor);
		border-radius: 20px;
	}

	.zero {
		width: 30px;
		height: 30px;
		border: 1px solid var(--blackcolor);
		border-radius: 20px;
	}

	.ud,
	.lr {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 1px;
		height: 20px;
		background: var(--whitecolor);
	}
	.lr {
		transform: translate(-50%, -50%) rotate(90deg);
	}

	.back {
		position:fixed;
		top:5px;
		left:5px;
		height:50px;
		width:50px;
		-webkit-tap-highlight-color:transparent;
		outline:none;
		cursor:pointer;
		background:url(../imagens/icon-back.svg) 50% 50%/contain no-repeat;
		border:none;
		z-index:999;
	}

	.pulse {
		width: 60px;
		height: 60px;
		border: 5px solid var(--lightyellowcolor);
		-webkit-border-radius: 30px;
		-moz-border-radius: 30px;
		border-radius: 30px;
		z-index: 10;
		position: absolute;
	}

	.dot {
		border: 10px solid var(--yellowcolor);
		background: transparent;
		-webkit-border-radius: 120px;
		-moz-border-radius: 120px;
		border-radius: 120px;
		height: 120px;
		width: 120px;
		-webkit-animation: pulse 2s ease-out;
		-moz-animation: pulse 2s ease-out;
		animation: pulse 2s ease-out;
		-webkit-animation-iteration-count: infinite;
		-moz-animation-iteration-count: infinite;
		animation-iteration-count: infinite;
		position: absolute;
		left: 46.3%;
		z-index: 1;
		opacity: 0;
		bottom: -8px;
		display:none;
	}

	@-moz-keyframes pulse {
		0% {
			-moz-transform: scale(0);
			opacity: 0.0;
		}

		25% {
			-moz-transform: scale(0);
			opacity: 0.1;
		}

		50% {
			-moz-transform: scale(0.1);
			opacity: 0.3;
		}

		75% {
			-moz-transform: scale(0.5);
			opacity: 0.5;
		}

		100% {
			-moz-transform: scale(1);
			opacity: 0.0;
		}
	}

	@-webkit-keyframes "pulse" {
		0% {
			-webkit-transform: scale(0);
			opacity: 0.0;
		}

		25% {
			-webkit-transform: scale(0);
			opacity: 0.1;
		}

		50% {
			-webkit-transform: scale(0.1);
			opacity: 0.3;
		}

		75% {
			-webkit-transform: scale(0.5);
			opacity: 0.5;
		}

		100% {
			-webkit-transform: scale(1);
			opacity: 0.0;
		}
	}
}

@media (prefers-color-scheme: dark) {
	:root {
		--bgcolor: #171595;
		--whitecolor: #000;
		--blackcolor: #F3F3F3;
		--barcolor: #2FA883;
		--greycolor: #999999;
		--yellowcolor: #fff601;
		--lightyellowcolor: #f7f14c;
		--redcolor: #F1753A;
		--fontfam: arial, sans-serif, monospace;
	}

	[data-theme="dark"] {
		--bgcolor: #171595;
		--whitecolor: #000;
		--blackcolor: #F3F3F3;
		--barcolor: #2FA883;
		--greycolor: #999999;
		--yellowcolor: #fff601;
		--lightyellowcolor: #f7f14c;
		--redcolor: #F1753A;
		--fontfam: arial, sans-serif, monospace;
	}

	.container {
		background: var(--bgcolor);
		color: var(--blackcolor);
	}

	/*GRID*/
	.grid-item {
		border-bottom: 1px solid var(--blackcolor);
		border-right: 1px solid var(--blackcolor);
	}

	.vmarkerl,
	.vmarkerr,
	.hmarkert,
	.hmarkerb {
		background: var(--bgcolor);
	}

	.hbar,
	.vbar {
		background: var(--bgcolor);
		color: var(--whitecolor);
	}

	.bg_hbarl,
	.bg_hbarr,
	.bg_vbart,
	.bg_vbarb {
		background: var(--blackcolor);
	}

	.hbarl,
	.hbarr,
	.vbart,
	.vbarb {
		background: var(--barcolor);
	}

	/*MENU*/
	.menu {
		background: var(--bgcolor);
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
	}

	.burger,
	.calbutt,
	.resbutt,
	.infbutt {
		background: var(--bgcolor);
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
	}

	.b1,
	.b2,
	.b3 {
		background: var(--blackcolor);
	}

	.cal1 {
		/*background: green;*/
		border: 4px solid var(--blackcolor);
	}

	.cal2,
	.cal3 {
		background: var(--blackcolor);
	}

	.res1 {
		background: var(--blackcolor);
	}
	.res2 {
		background: var(--bgcolor);
	}

	.vibSwitchBG,
	.soundSwitchBG {
		background: var(--blackcolor);
		-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
		-webkit-tap-highlight-color: transparent;
	}

	.vibSwitch,
	.soundSwitch {
		background: var(--barcolor);
	}

	.soundSwitch {
		background: var(--redcolor);
	}

	.inf {
		background: var(--bgcolor);
	}

	.buttTxt {
		background: var(--bgcolor);
		background: none;
	}

	a,
	a:link,
	a:visited {
		color: var(--blackcolor);
	}

	/*Support warning*/
	.supWarn {
		background: var(--blackcolor);
		color: var(--whitecolor);
	}

	.cl1,
	.cl2 {
		background: var(--whitecolor);
	}

	/*INDICATOR*/
	.indicator,
	.zero {
		/*background: green;*/
		border: 2px solid var(--whitecolor);
	}

	.zero {
		border: 1px solid var(--blackcolor);
	}

	.ud,
	.lr {
		background: var(--whitecolor);
	}

	.back {
		-webkit-tap-highlight-color:transparent;
	}

	.pulse {
		width: 60px;
		height: 60px;
		border: 5px solid var(--lightyellowcolor);
		-webkit-border-radius: 30px;
		-moz-border-radius: 30px;
		border-radius: 30px;
		z-index: 10;
		position: absolute;
	}

	.dot {
		border: 10px solid var(--yellowcolor);
		background: transparent;
		-webkit-border-radius: 120px;
		-moz-border-radius: 120px;
		border-radius: 120px;
		height: 120px;
		width: 120px;
		-webkit-animation: pulse 2s ease-out;
		-moz-animation: pulse 2s ease-out;
		animation: pulse 2s ease-out;
		-webkit-animation-iteration-count: infinite;
		-moz-animation-iteration-count: infinite;
		animation-iteration-count: infinite;
		position: absolute;
		left: 46.3%;
		z-index: 1;
		opacity: 0;
		bottom: -8px;
		display:none;
	}

	@-moz-keyframes pulse {
		0% {
			-moz-transform: scale(0);
			opacity: 0.0;
		}

		25% {
			-moz-transform: scale(0);
			opacity: 0.1;
		}

		50% {
			-moz-transform: scale(0.1);
			opacity: 0.3;
		}

		75% {
			-moz-transform: scale(0.5);
			opacity: 0.5;
		}

		100% {
			-moz-transform: scale(1);
			opacity: 0.0;
		}
	}

	@-webkit-keyframes "pulse" {
		0% {
			-webkit-transform: scale(0);
			opacity: 0.0;
		}

		25% {
			-webkit-transform: scale(0);
			opacity: 0.1;
		}

		50% {
			-webkit-transform: scale(0.1);
			opacity: 0.3;
		}

		75% {
			-webkit-transform: scale(0.5);
			opacity: 0.5;
		}

		100% {
			-webkit-transform: scale(1);
			opacity: 0.0;
		}
	}

}

@media only screen and (min-width: 1920px) { 
	.dot {
		left: 47.3%;
	}
}

@media only screen and (min-width: 1440px) and (max-width: 1920px) { 
	.dot {
		left: 46.3%;
	}
}

@media only screen and (min-width: 1280px) and (max-width: 1440px) { 
	.dot {
		left: 45.3%;
	}
}

@media only screen and (min-width: 1024px) and (max-width: 1280px) { 
	.dot {
		left: 44.5%;
	}
}

@media only screen and (min-width: 912px) and (max-width: 1024px) { 
	.dot {
		left: 43.3%;
	}
}

@media only screen and (min-width: 820px) and (max-width: 912px) { 
	.dot {
		left: 43.3%;
	}
}

@media only screen and (min-width: 768px) and (max-width: 820px) { 
	.dot {
		left: 41.3%;
	}
}

@media only screen and (min-width: 540px) and (max-width: 768px) { 
	.dot {
		left: 41%;
	}
}

@media only screen and (min-width: 425px) and (max-width: 540px) { 
	.dot {
		left: 37%;
	}
}

@media only screen and (min-width: 390px) and (max-width: 425px) { 
	.dot {
		left: 32.6%;
	}
}

@media only screen and (min-width: 375px) and (max-width: 390px) { 
	.dot {
		left: 31.6%;
	}
}

@media only screen and (min-width: 360px) and (max-width: 375px) { 
	.dot {
		left: 31.5%;
	}
}

@media only screen and (min-width: 350px) and (max-width: 360px) { 
	.dot {
		left: 31.3%;
	}
}

@media only screen and (min-width: 300px) and (max-width: 350px) { 
	.dot {
		left: 28.3%;
	}
}

@media only screen and (min-width: 280px) and (max-width: 300px) { 
	.dot {
		left: 25.3%;