/* #8b5dcb #78c8d2 #f8485e #adcb00 */

body {
	background-color: #000000;
}
* {
	box-sizing: border-box;
}
.main {
       	float: left;
       	padding: 5%;
       	background-color: #f1f1f1;
}
.bg {
       	float: left;
       	padding: 1%;
       	background-color: #FFFFFF;
}
th {
	border:1px solid black;
}
td {
	border:0px solid black;
}



a:link {
  text-decoration: none;
  color: #000000;
  font-weight: bold;
}
a:visited {
  text-decoration: none;
  color: #000000;
  font-weight: bold;
}
a:hover {
  text-decoration: none;
  color: #8b5dcb;
  font-weight: bold;
}
a:active {
  text-decoration: none;
  color: #8b5dcb;
  font-weight: bold;
}

.flink:link {
  color: #FFFFFF;
  text-decoration: none;
}
.flink:visited {
  color: #FAFAFA;
  text-decoration: none;
}
.flink:hover {
  text-decoration: none;
}
.flink:active {
  text-decoration: none;
}

.formarea {
	background-color: #FFFFFF;
	border-radius: 30px;
	padding: 20px;
}
.grid-m {
	display: grid;
        grid-template-columns: 10% 80% 10%;
        justify-content: space-evenly;
}
.grid-c2 {
	display: grid;
	grid-template-columns: 49% 49%;
	justify-content: space-evenly;
}
.grid-c3 {
        display: grid;
        grid-template-columns: 33% 33% 33%;
	justify-content: space-evenly;
}
.grid-c4 {
	display: grid;
        grid-template-columns: 25% 25% 25% 25%;
        justify-content: space-between;
}
.grid-form {
	display: grid;
        grid-template-columns: 80% 20%;
        justify-content: space-between;
}
.grid-range {
	display: grid;
        grid-template-columns: 6% 88% 6%;
        justify-content: space-between;
	vertical-align: center;
	height: 100%;
}

@media only screen and (max-width:768px) {
        [class*="grid-"] {
                display: grid;
                grid-template-columns: 100%;
                justify-content: space-evenly;
        }
	[class="grid-range"] {
		display: grid;
		grid-template-columns: 12% 76% 12%;
		justify-content: space-between;
		height: 100%;
	}
	[class="grid-form"] {
		display: grid;
		grid-template-columns: 80% 20%;
		justify-content: space-between;
        }
}

.wbox {
	border-radius: 30px;
	background-color: #FFFFFF;
        padding: 20px;
	margin: 5px;
}
.wbox4 {
	border-radius: 30px;
	width: 90%;
        border: 8px solid #FFFFFF;
        background-color: #FFFFFF;
        padding: 4px;
	margin: 2px;
	vertical-align: bottom;
}
.box-c {
        border: 0px;
        background-color: #F5FEC4;
        padding: 5px;
	margin-top: 5px;
	margin-bottom: 5px;
}

.box-t {
        border: 0px;
        background-color: #FCDADE;
        padding: 5px;
	margin-top: 5px;
        margin-bottom: 5px;
}
.box-s {
        border: 0px;
        background-color: #E3F4F6;
        padding: 5px;
	margin-top: 5px;
        margin-bottom: 5px;
}
.box-st {
        border: 0px;
        background-color: #E2E6F4;
        padding: 5px;
	margin-top: 5px;
        margin-bottom: 5px;
}
.box-all {
        border: 0px;
        background-color: #F5D6A9;
        padding: 5px;
        margin-top: 5px;
        margin-bottom: 5px;
}

.btnA {
        cursor: pointer;
        background-color: #f5f5fa;
        transition: background-color 0.1s;
        border-radius: 15px;
        border: 0px;
        padding-left: 15px;
        padding-right: 15px;
        margin-top: 5px;
        margin-bottom: 5px;
        color: black;
        text-align: center;
        font-size: 1.25em;
        font-weight: 900;
}


input[type=range] {
	width: 90%;
}

.scale img {
	object-fit: contain;
} 

.qtd {
	 text-align:center;
	 vertical-align: middle;
	 border:0px;
}

.sm {
	vertical-align: super;
}