*,:after,:before{box-sizing:border-box}
.clearfix:after,.clearfix:before{content:'';display:table}
.clearfix:after{clear:both;display:block}
a{color:inherit;text-decoration:none}

.category {
    display: inline-flex;
    flex-wrap: wrap;
}

.grade-type-selected {
    background-color: rgba(37, 200, 233, 0.643);
    border-color: white;
}

.grade-type-unselected {
    background-color: rgba(255,255,255,.1);
    border-color: rgba(255,255,255,.1);
}
.grade-type-unselected:hover {
    background-color: rgba(37, 200, 233, 0.643);
    border-color: white;
}

.columns {
    float: left;
    min-width: 10%;
}

.calc-btn {
    background-color: rgba(255,255,255,.1);
    border-color: rgba(255,255,255,.1);
}
.calc-btn:active{
    background-color: rgba(37, 200, 233, 0.643);
    border-color: white;
}
.calc-btn:hover {
    background-color: rgba(37, 200, 233, 0.643);
    border-color: white;
}

.input{
    width:40%;
	color:#fff;

	display:block;
	border:none;
	border-radius:10px;
	background:rgba(255,255,255,.1);
}

.avg{
    min-width:30%;
    max-width:50%;
	color:#fff;

	display:block;
	border:none;
	border-radius:10px;
	background:rgba(255,255,255,.1);
}

.final-grade {
    width:60%;
	color:#fff;

	display:block;
	border:none;
	border-radius:10px;
	background:rgba(255,255,255,.1);
}