@media all{
      :root {
            --bgcolor: #171595;
            --whitecolor: #FFFFFF;
            --blackcolor: #000000;
            --greycolor: #CCCCCC;
		--lightgreycolor: #DDDDDD;
		--fontfam: arial, sans-serif, monospace;
	}

	[data-theme="dark"] {
            --bgcolor: #171595;
            --whitecolor: #FFFFFF;
            --blackcolor: #000000;
            --greycolor: #CCCCCC;
		--lightgreycolor: #DDDDDD;
		--fontfam: arial, sans-serif, monospace;
	}

      :root {
		color-scheme: only light;
		forced-color-adjust: none;
		background:var(--bgcolor);
		color: var(--whitecolor);
		font-family: var(--fontfam);
		font-size:14px;
      }
 
      body {
		overscroll-behavior:contain;
		margin:0;
		position:absolute;
		top:0;
		bottom:0;
		left:0;
		right:0;
		display:grid;
		place-items:center;
		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;
	}

	#outer {
		width: 90%;
		max-width: 600px;
		background: var(--whitecolor);
		text-align: center;
		margin: 0 auto;
		font: 500 18px arial;
		color:var(--blackcolor);
	}
	
	#cover {
		border: 2px solid var(--whitecolor);
		padding: 15px 0;
	}
	
	.main {
		table-layout: fixed;
		width: 96%;
		margin: 5px auto;
		text-align: left;
		border: 0;
	}
	
	.main td {
		padding: 0 8px;
		vertical-align: middle;
		width: 50%;
		border: 0;
	}
	
	ul {
		padding: 0 0 5px 5px;
		list-style: none;
	}
	
	li {
		line-height: 16px;
	}

	.main input {
		width: 98%;
		border: 1px solid var(--greycolor);
		margin: 3px 0;
		padding: 2px;
		text-align: center;
		height: 32px;
	}

	.main select {
		width: 100%;
		border: 1px solid var(--greycolor);
		margin: 3px 0;
		padding: 2px;
		text-align: center;
		height: 32px;
	}

	input.output {
		font-weight: bold;
		font-size: 18px;
		padding: 5px 0;
		border: 0;
		text-align: center;
		margin-top: 25px;
	}
	
	#t1 {
		width: 100%;
	}
	
	#t2 ,#t3, #t4, #t5, #t6 {
		display: none;
		width: 100%;
		height: 100%;
	}

	td.wrapper{

	}

	.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;
	}
}

@media (prefers-color-scheme: dark) {
      :root {
            --bgcolor: #171595;
            --whitecolor: #FFFFFF;
            --blackcolor: #000000;
            --greycolor: #CCCCCC;
		--lightgreycolor: #DDDDDD;
	}

	[data-theme="dark"] {
            --bgcolor: #171595;
            --whitecolor: #FFFFFF;
            --blackcolor: #000000;
            --greycolor: #CCCCCC;
		--lightgreycolor: #DDDDDD;
	}

      :root {
          background:var(--bgcolor);
          color: var(--whitecolor);
      }

	select {
		background-color:var(--lightgreycolor);
	}

	input {
		background-color:var(--whitecolor);
	}

	#outer {
		background: var(--whitecolor);
		color:var(--blackcolor);
	}
	
	#cover {
		border: 2px solid var(--whitecolor);
	}
	
	.main input {
		border: 1px solid var(--greycolor);
	}

	.main select {
		border: 1px solid var(--greycolor);
	}

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