@media only screen and (min-width: 600px) {
    
    /**************** ESTRUTURA GERAL *****************/    
    body#covid {
    	font-size: 1.4vw;	
        font-family: monospace;
    	font-weight: normal;
    	margin-top: 1vh;
    	color: black !important;
    }
    
    .row_covid {
    	width: 100%;
    	overflow: hidden;
    	margin-top:0vh;	
    	padding-top:0;	
    }
    
    /**************** TEXTOS GERAIS *****************/    
    
    .h1_covid {
    	text-align: center;
    	font-size: 2vh;
    	font-weight: bold;
    	margin-bottom: 1vw;
    	margin-top: 2.5vw;
    	color: #0B164D;
    	font-family: playfair-display;
    }
    
    .h2_covid {
    	text-align: center;
    	font-size: 1.4vw;
    	font-weight: normal;	
    	margin-top: 1vw;
    	margin-bottom: 0vh;
    }
    
    /**************** PREMISSAS *****************/    
    
    .div_premissa {
        display: inline-block;
        width: 100%;
        margin: 0;
    }
    
    .label_premissa {
        width: 25%;
    }
    
    select#contagio {
        height: 2vw;
        font-family: monospace;
        font-size: 1.2vw;
        width: 60%;
    }
    
    select#quarentena {
        height: 2vw;
        font-family: monospace;
        font-size: 1.2vw;
        max-width: 6vw !important;
        text-align-last:center;
        padding: 0;
    }
    
    input#mobilidade[type=number]::-webkit-inner-spin-button {
      top: 0;
      padding: 0vw;
      bottom: 0;  
      margin: 0;
      opacity: 1;  
    }
    
    input#mobilidade[type=number] {	
    	height: 2vw !important;
    	max-height: 2vw !important;
    	min-height: 1vw !important;
    	max-width: 6vw !important;
    	color: black;
    	font-family: monospace;
    	font-size: 1.2vw;
    	text-align: center;
    	padding: 0vw 0vw 0vw 0vw;
    }
    
    input#mobilidade:invalid {
    	border: 2px solid red;
    }

    
    #btn1 {
    	width: 7vw;
    	height: 3vw;
    	font-family: monospace;
    	font-size: 1.3vw;
    	color: white;
    	background-color: green;
    	margin-bottom: 1vh;
    }
    
    #btn2 {
    	width: 3vw;
    	height: 3vw;
    	font-family: monospace;	
    	color: white;
    	background: transparent url('http://codigointeligente.com.br/wp-content/uploads/sites/5/2020/06/icon_off.png') left no-repeat;
    	border: none;
    	hoove-border: none;
    	background-size: 3vw 3vw;	
    	margin-left: 3vw;
    	vertical-align: bottom;
    	outline:none;
    	margin-bottom: 1vh;
    }
    
    .legenda1, .legenda2, .legenda3, .legenda4 {
    	position: absolute;
    	vertical-align: center;
    	margin-left: 60vw;	
    	stroke-width:1;
    	stroke: black;
    	width: 1.5vw;
    	height: 1.5vw;
    }
    
    .legenda1 {
    	background: black;
    	margin-top: -3vw;
    }
    
    .legenda2 {
    	background: yellow;
    	margin-top: -0.5vw;
    }
    
    .legenda3 {
    	background: red;	
    	margin-top: 2vw;
    }
    
    .legenda4 {
    	background: green;
    	margin-top: 4.5vw;
    }
    
    .txt_status {
    	position: absolute;
    	vertical-align: text-bottom;
    	margin-left: 62vw;	
    	stroke-width:1;
    	stroke: black;
    	width: 30vw;
    	height: 1.5vw;
    	text-align:left;
    	font-family: monospace !important;
    	font-weight: normal !important;
    	line-height: 1vw;
    	font-size: 1.2vw;
    }
    
    #leg1{
        margin-top: -2.8vw;
    }
    
    #leg2{
        	margin-top: -0.3vw;
    }
    
    #leg3{
        	margin-top: 2.2vw;
    }
    
    #leg4{
        margin-top: 4.7vw;
    }

    .line_premissa {	
    	stroke-width:5;
    	stroke:#0B164D;	
    }
    
    .svg_linha {
    	width: 100%;
    	height: 1vh;
    	margin: 0;
    }
    
    /**************** GRID DE CONTAMINAÇÃO *****************/
    
    .grid {
    	display: grid;
    	justify-content: center;
    	border: 1px solid;
    	border-color: #051094;
    	grid-template-columns: repeat(100, 0.8fr);
    	grid-auto-rows: 0.5vw;
    	grid-gap: 0vh;
    	z-index: 1;
    }
    
    .item {
    	border: solid;
    	border-width:0.1px;
    	border-color: #EEEEEE;
    	background: white;
    }
    
    #ref {
    	color: blue;
    	font-size:1vw !important;
    }
    
    
/**************** GRÁFICO *****************/
    
    /******* TEXTOS *******/
    #h2_curvas{
    	margin-top: 4vh;
    }
    
    #text_90deg {
    	position: absolute;
    	transform: rotate(-90deg);
    	margin-left: -2.5vh;	
    	margin-top: 32vh;	
    	font-size: 1.4vw;
    	font-weight: normal;		
    }
    
    #txt_leg {
    	height: 1.2vw;
    	margin-left: 1vw !important;
    	font-size: 1.1vw;
    	
    }
    
    .span_covid {
    	text-align: center;
    	height: 1vw;
    	line-height: 1vw;
    	position: absolute;
    	z-index: 2;
    	color: white;
    	font-size: 3vw;
    	font-weight: 3vw;
    	width: 8vw;
    }
    
    #contador1 {
    	margin-left: 10vw;
    	margin-top: 12.5vw;
    }
    
    #contador2 {
    	margin-left: 10vw;
    	margin-top: 17.5vw;
    }
     
    #indiv21 {
        vertical-align: top;
    }
    
    /*******************/
    
    /******* CANVAS E GRID *******/
    
    #Canvas {
    	background: white;
    	width:90%;
    	position:relative;
    	margin-left: 7.5%;
    	margin-top: 1%;
    }

    .eixoY {	
    	display: grid;
    	grid-template-rows: repeat(21, 2.3vh);
    	margin-left:4.5%;	
    	position:absolute;
    	text-align: right;
    	font-size: 0.85vw;
    	margin-top: 0vh;
    }
    
    .eixoX {
    	display: grid;
    	width:90%;
    	grid-template-columns:repeat(21, 5%);
    	margin-left:7.5%;
    	margin-top:0.1vh;
    	text-align: left;
    	font-size: 0.85vw;
    }
    
    .svg_legenda {
    	width: 4vw;
    	height: 1vw;
    	vertical-align: middle !important;
    }
    
    #atual_cont, #total_cont {
     display: inline-block;
     width: 40%;
     margin: 0;
        
    }
    
    .div_leg {
        font-size: 0.85vw;
        width: 100%;
        margin-left: 20%;
    }
    
    #total {
        
        stroke: magenta;
        stroke-width: 4;
        vertical-align: middle !important;
    }
    
    #atual {
        stroke-width: 4;
        stroke: blue;
        vertical-align: middle !important;
    }

    .contador1 {
    	position: absolute;
    	width: 10vw;
    	height: 10vw;
    	margin-left: 10vw;
    	margin-top: 11vw;
    	z-index: 1;	
    }
    
    .contador2 {
    	position: absolute;
    	width: 10vw;
    	height: 10vw;
    	margin-left: 10vw;
    	margin-top: 16vw;
    	z-index: 1;	
    }
    
    #contador_total {
    	width: 8vw;
    	height: 4vw;
    	fill: magenta;		
    }
    
    #contador_atual {
    	width: 8vw;
    	height: 4vw;
    	fill: blue;	
    }

}

@media only screen and (max-width: 599px) {
    
    /**************** ESTRUTURA GERAL *****************/    
    body#covid {
    	font-size: 1.4vh;	
        font-family: monospace;
    	font-weight: normal;
    	margin-top: 1vh;
    	color: black !important;
    }
    
    .row_covid {
    	width: 100%;
    	overflow: hidden;
    	margin-top:0vh;	
    	padding-top:0;	
    }
    
    /**************** TEXTOS GERAIS *****************/    
    
    .h1_covid {
    	text-align: center;
    	font-size: 2vh;
    	font-weight: bold;
    	margin-bottom: 1vw;
    	margin-top: 2.5vw;
    	color: #0B164D;
    	font-family: playfair-display;
    }
    
    .h2_covid {
    	text-align: center;
    	font-size: 1vh;
    	font-weight: normal;	
    	margin-top: 1vh;
    	margin-bottom: 0vh;
    }
    
    /**************** PREMISSAS *****************/    
    
    .div_premissa {
        display: inline-block;
        width: 100%;
        margin: 0;
    }
    
    .label_premissa {
        width: 25%;
    }
    
    select#contagio {
        height: 2vh;
        font-family: monospace;
        font-size: 1.2vh;
        width: 60%;
    }
    
    select#quarentena {
        height: 2vh;
        font-family: monospace;
        font-size: 1.2vh;
        max-width: 12vw !important;
        text-align-last:center;
        padding: 0;
    }
    
    input#mobilidade[type=number]::-webkit-inner-spin-button {
      top: 0;
      padding: 0vw;
      bottom: 0;  
      margin: 0;
      opacity: 1;  
    }
    
    input#mobilidade[type=number] {	
    	height: 2vh !important;
    	max-height: 2vh !important;
    	min-height: 1vh !important;
    	max-width: 12vw !important;
    	color: black;
    	font-family: monospace;
    	font-size: 1.2vh;
    	text-align: center;
    	padding: 0vw 0vw 0vw 0vw;
    }
    
    input#mobilidade:invalid {
    	border: 2px solid red;
    }

    
    #btn1 {
    	width: 7vh;
    	height: 3vh;
    	font-family: monospace;
    	font-size: 1.3vh;
    	color: white;
    	background-color: green;
    	margin-bottom: 1vh;
    	margin-left: 65vw;
		z-index: 2;
    }
    
    #btn2 {
    	width: 3vh;
    	height: 3vh;
    	font-family: monospace;	
    	color: white;
    	background: transparent url('http://codigointeligente.com.br/wp-content/uploads/sites/5/2020/06/icon_off.png') center no-repeat;
    	padding: 0;
		border: none;
    	hoove-border: none;
    	background-size: 3vh 3vh;	
    	margin: 0 0 1vh 2vw;
    	vertical-align: bottom;
    	outline: none;    	
		z-index: 2;
    }
    
    .legenda1, .legenda2, .legenda3, .legenda4 {
    	position: absolute;
    	vertical-align: center;
    	margin-left: 0vw;	
    	stroke-width:1;
    	stroke: black;
    	width: 1.5vw;
    	height: 1.5vw;
    }
    
    .legenda1 {
    	background: black;
    	margin-top: 1.5vh;
    }
    
    .legenda2 {
    	background: yellow;
    	margin-top: 3vh;
    }
    
    .legenda3 {
    	background: red;	
    	margin-top: 4.5vh;
    }
    
    .legenda4 {
    	background: green;
    	margin-top: 6vh;
    }
    
    .txt_status {
    	position: absolute;
    	vertical-align: text-bottom;
    	margin-left: 3vw;	
    	width: 55vw;
    	height: 1.5vh;
    	text-align:left;
    	font-family: monospace !important;
    	font-weight: normal !important;
    	line-height: 1vh;
    	font-size: 1.2vh;
    }
    
    #leg1{
        margin-top: 1.5vh;
    }
    
    #leg2{
        margin-top: 3vh;
    }
    
    #leg3{
        margin-top: 4.5vh;
    }
    
    #leg4{
        margin-top: 6vh;
    }

    .line_premissa {	
    	stroke-width:5;
    	stroke:#0B164D;	
    }
    
    .svg_linha {
    	width: 100%;
    	height: 1vh;
    	margin: 0;
    }
    
    /**************** GRID DE CONTAMINAÇÃO *****************/
    
    .grid {
    	display: grid;
    	justify-content: center;
    	border: 1px solid;
    	border-color: #051094;
    	grid-template-columns: repeat(100, 0.8fr);
    	grid-auto-rows: 0.4vh;
    	grid-gap: 0vh;
    	z-index: 1;
    }
    
    .item {
    	border: solid;
    	border-width:0.1px;
    	border-color: #EEEEEE;
    	background: white;
    }
    
    #ref {
    	color: blue;
    	font-size:1vh !important;
    }
    
    
/**************** GRÁFICO *****************/
    
    /******* TEXTOS *******/
    #h2_curvas{
    	margin-top: 4vh;
    }
    
    #text_90deg {
    	position: absolute;
    	transform: rotate(-90deg);
    	margin-left: -3vh;	
    	margin-top: 30vh;	
    	font-size: 1vh;
    	font-weight: normal;		
    }
    
    #txt_leg {
    	height: 1vh;
    	margin-left: 1vw !important;
    	font-size: 1vh;
    	
    }
    
    .span_covid {
    	text-align: center;
    	height: 1vh;
    	line-height: 1vh;
    	position: absolute;
    	z-index: 2;
    	color: white;
    	font-size: 3vw;
    	font-weight: 3vw;
    	width: 8vw;
    }
    
    #contador1 {
    	margin-left: 10vw;
    	margin-top: 10.5vh;
    }
    
    #contador2 {
    	margin-left: 10vw;
    	margin-top: 13.5vh;
    }
     
    #indiv21 {
        vertical-align: top;
    }
    
    /*******************/
    
    /******* CANVAS E GRID *******/
    
    #Canvas {
    	background: white;
    	width:90%;
    	position:relative;
    	margin-left: 7.5%;
    	margin-top: 1%;
    }

    .eixoY {	
    	display: grid;
    	grid-template-rows: repeat(21, 2.3vh);
    	margin-left:2.5%;	
    	position:absolute;
    	text-align: right;
    	font-size: 0.7vh;
    	margin-top: 0vh;
    }
    
    .eixoX {
    	display: grid;
    	width:90%;
    	grid-template-columns:repeat(21, 5%);
    	margin-left:7.5%;
    	margin-top:0.1vh;
    	text-align: left;
    	font-size: 0.7vh;
    }
    
    .svg_legenda {
    	width: 4vw;
    	height: 1vw;
    	vertical-align: middle !important;
    }
    
    #atual_cont, #total_cont {
     display: inline-block;
     width: 40%;
     margin: 0;
        
    }
    
    .div_leg {
        font-size: 0.85vw;
        width: 100%;
        margin-left: 10%;
    }
    
    #atual_cont {
      margin-left:6%;
    }
    
    #total {
        height: 1vh;
        stroke: magenta;
        vertical-align: middle !important;
    }
    
    #atual {
        height: 1vh !important;
        stroke: blue;
        vertical-align: middle !important;
    }

    .contador1 {
    	position: absolute;
    	width: 10vw;
    	height: 10vw;
    	margin-left: 10vw;
    	margin-top: 10vh;
    	z-index: 1;	
    }
    
    .contador2 {
    	position: absolute;
    	width: 10vw;
    	height: 10vw;
    	margin-left: 10vw;
    	margin-top: 13vh;
    	z-index: 1;	
    }
    
    #contador_total {
    	width: 8vw;
    	height: 4vw;
    	fill: magenta;		
    }
    
    #contador_atual {
    	width: 8vw;
    	height: 4vw;
    	fill: blue;	
    }

}