@media all {
	:root {
		--bgcolor: #171595;
		--whitecolor: #FFFFFF;
		--lightbluecolor: #3498DB;
		--lightgreycolor: #DDDDDD;
		--fontfam: arial, sans-serif, monospace;
	}

	[data-theme="dark"] {
		--bgcolor: #171595;
		--whitecolor: #FFFFFF;
		--lightbluecolor: #3498db;
		--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:13px;
	}

	body {
		overscroll-behavior:contain;
		margin:0;
		position:absolute;
		top:0;
		bottom:0;
		left:0;
		right:0;
		display:grid;
		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;
	}

	.title-container {
		padding-top:13%
	}

	.title-container h1 {
		text-align: center;
		font-size:1.6em;
	}

	#meansure-canvas {
		position: absolute;
		z-index:1;
	}

	#meansure-canvas2{
		position: absolute;
		z-index:0;
	}

	div#meansure{
		clear:both;
		border: 0;
		width: 38vw;
		height: auto;
	}

	div#options-panel {
		padding-top: 5%;
		padding-left: 5%;
	}

	div#marker-options {
		display:none;
	}

	div#general-options {
		display:none;
	}

	.screen-rotate-area {
		text-align: center;
	}

	.screen-rotate-area .screen-rotate-unlock {
		position:fixed;
		top:5px;
		right:5px;
		height:50px;
		width:50px;
		-webkit-tap-highlight-color:transparent;
		outline:none;
		cursor:pointer;
		background:var(--bgcolor) url(../imagens/icon-screen-rotate.svg) 50% 50%/contain no-repeat;
		border:none;
		display:none;	
		z-index:999;
	}

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

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

	div#upload-pic {
		padding-bottom:10px;
	}

	div#pic-name {
		padding: 10px;
	}

	input[type='file'] {
		display: none
	}

	label {
		background-color: var(--lightbluecolor);
		border-radius: 5px;
		color: var(--whitecolor);
		cursor: pointer;
		padding: 6px 20px
	}

	input[type='button'] {
		background-color: var(--lightbluecolor);
		border-radius: 5px;
		color: var(--whitecolor);
		cursor: pointer;
		margin: 0px 5px 0px 5px;
		padding: 6px 10px
	}

	input[type='number'] {
		width: 40px;
		height: 23px;
	}

	select {
		width: 128px;
		height: 23px;
	}

	input#btn-upload-back {
		display:none;
	}

	div#pic-zoom {
		display:none;
	}

	input#zoom {
		width:40px;
	}

	.pic-option {
		float:left;
		padding-top:5px;
	}

	div#general-options {
		clear:both;
	}

	div#general-options div {
		padding-top:5px;
		padding-bottom:5px;
	}

	div#meansure-move div {
		float:left;
	}

	div#marker-options {
		clear:both;
	}

	div#pic-download {
		clear:both;
	}
}


@media only screen and (min-width: 1024px) { 
	.title-container {
		padding-top:3%;
	}

	div#meansure{
		padding-left: 12%;
	}
}

@media only screen and (max-width: 299px) {
	:root {
	    font-size:12px;
	}

	input[type='button'] {
		padding: 6px 6px;
		margin: 0px 1px 0px 1px;
	}

	input[type='number'] {
		width: 28px;
		height: 23px;
	}

}


@media (prefers-color-scheme: dark) {
	:root {
		--bgcolor: #171595;
		--whitecolor: #FFFFFF;
		--lightbluecolor: #3498DB;
		--lightgreycolor: #DDDDDD;
		--fontfam: arial, sans-serif, monospace;
	}

	[data-theme="dark"] {
		--bgcolor: #171595;
		--whitecolor: #FFFFFF;
		--lightbluecolor: #3498db;
		--lightgreycolor: #DDDDDD;
		--fontfam: arial, sans-serif, monospace;
	}

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

	.screen-rotate-area .screen-rotate-unlock {
		-webkit-tap-highlight-color:transparent;
		background:var(--bgcolor) url(../imagens/icon-screen-rotate.svg) 50% 50%/contain no-repeat;
	}

	.screen-rotate-area .screen-rotate-lock {
		-webkit-tap-highlight-color:transparent;
		background:var(--bgcolor) url(../imagens/icon-screen-rotate.svg) 50% 50%/contain no-repeat;
	}

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

	label {
		background-color: var(--lightbluecolor);
		color: var(--whitecolor);
	}

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

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

	input[type='button'] {
		background-color: var(--lightbluecolor);
		color: var(--whitecolor);
	}
}