.sidenav
{
  	height: 100%;
  	width: 0;
  	position: fixed;
  	z-index: 999;
  	top: 0;
  	left: 0;
  	background-color: #448aff;
  	overflow-x: hidden;
  	transition: 0.5s;
  	padding-top: 60px;
}

.sidenav a {
  	padding: 8px 8px 8px 20px;
  	text-decoration: none;
  	font-size: 16px;
  	color: #fff;
  	display: block;
  	transition: 0.3s;
  	margin:2px 0px;
}

.sidenav a:hover, .active {
  	color: #f1f1f1;
  	background-color: #82b1ff;
}
.sidenav .closebtn:hover, .closebtn:active, .closebtn:focus{
	background-color: #82b1ff;
}
.sidenav .closebtn {
	padding:0px;
  	position: absolute;
  	top: 0;
  	right: 25px;
  	font-size: 36px;
  	margin-left: 50px;
}
body, h1, h2, h3, h4, h5, h6,p, ul,li{margin:0px;font-family: 'Roboto', sans-serif;}
ul{
	padding:0px;
}
.header, .footer{
	background-color: #2962ff;
	padding:10px;
	color:#FFF;
	position: fixed;
	width: 100%;
}
.header{top:0px;left:0px;}
.footer{bottom: 0px;text-align: right;right: 0px;z-index: 9;}
.footer a{color:#fff;text-decoration:none;font-weight:bold;}
.main{margin-top:70px;margin-bottom: 50px;}
.boxes{display: flex;}
.box{width:50%;margin:10px;background-color: #448aff;color:#fff;padding:5px;box-shadow: 5px 5px 5px #aaa;text-align:center;border-radius: 5px;cursor:pointer;}
.box .text, .box .icon{font-size:30px;}
.box:hover{background-color:#82b1ff;}

.box2{margin:10px;background-color: #448aff;color:#fff;padding:10px;box-shadow: 5px 5px 5px #aaa;text-align:left;border-radius: 5px;cursor:pointer;font-size: 20px;}
.box2:hover{background-color:#82b1ff;}

.question .title {
    font-size: 20px;
    margin-bottom: 10px;
}
.question .option {
    margin: 10px;
    padding: 10px;
    background-color: #82b1ff;
    border-radius: 5px;
    font-size: 18px;
}
.question {
    margin: 20px;
}
*:focus{outline:none;}
.question-all .next-btn, .question-all .previous-btn{
    background-color: #448aff;
    color: #fff;
    width: 50%;
    font-size: 16px;
    border: 1px solid #448aff;
    margin: 5px;
    padding: 10px 20px;
    border-radius: 20px;
    
}

.question-all .btn{
    display:flex;
    margin:20px;
}
.text-right{text-align:right;}

.frac {
    display: inline-block;
    position: relative;
    vertical-align: middle;
    letter-spacing: 0.001em;
    text-align: center;
}
.frac > span {
    display: block;
    padding: 0.1em;
}
.frac span.bottom {
    border-top: thin solid black;
}
.frac span.symbol {
    display: none;
} 

.paragraph{
    border-bottom: 1px solid #dcdcdc;
    padding: 10px 0px;
    margin-bottom:10px;
}
/*html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}
.sidenav
{
  	height: 100%;
  	width: 0;
  	position: fixed;
  	z-index: 999;
  	top: 0;
  	left: 0;
  	background-color: #448aff;
  	overflow-x: hidden;
  	transition: 0.5s;
  	padding-top: 60px;
}

.sidenav a {
  	padding: 8px 8px 8px 20px;
  	text-decoration: none;
  	font-size: 16px;
  	color: #fff;
  	display: block;
  	transition: 0.3s;
  	margin:2px 0px;
}

.sidenav a:hover, .active {
  	color: #f1f1f1;
  	background-color: #82b1ff;
}
.sidenav .closebtn:hover, .closebtn:active, .closebtn:focus{
	background-color: #82b1ff;
}
.sidenav .closebtn {
	padding:0px;
  	position: absolute;
  	top: 0;
  	right: 25px;
  	font-size: 36px;
  	margin-left: 50px;
}
body, h1, h2, h3, h4, h5, h6,p, ul,li{margin:0px;font-family: 'Roboto', sans-serif;}
body{
    overflow:hidden;
}
ul{
	padding:0px;
}
.header, .footer{
	background-color: #2962ff;
	padding:10px;
	color:#FFF;
	position: fixed;
	width: 100%;
	z-index:9999;
}
.header{top:0px;left:0px;}
.footer{bottom: 0px;text-align: right;right: 0px;z-index: 9;}
.footer a{color:#fff;text-decoration:none;font-weight:bold;}
.main{margin-top:70px;margin-bottom: 50px;}
.boxes{display: flex;}
.box{width:50%;margin:10px;background-color: #448aff;color:#fff;padding:5px;box-shadow: 5px 5px 5px #aaa;text-align:center;border-radius: 5px;cursor:pointer;}
.box .text, .box .icon{font-size:30px;}
.box:hover{background-color:#82b1ff;}

.box2{margin:10px;background-color: #448aff;color:#fff;padding:10px;box-shadow: 5px 5px 5px #aaa;text-align:left;border-radius: 5px;cursor:pointer;font-size: 20px;}
.box2:hover{background-color:#82b1ff;}

.question .title {
    font-size: 20px;
    margin-bottom: 10px;
}
.question .option {
    margin: 10px;
    padding: 10px;
    background-color: #82b1ff;
    border-radius: 5px;
    font-size: 18px;
}
.question {
    margin: 20px;
}
*:focus{outline:none;}
.question-all .next-btn, .question-all .previous-btn{
    background-color: #448aff;
    color: #fff;
    width: 50%;
    font-size: 16px;
    border: 1px solid #448aff;
    margin: 5px;
    padding: 10px 20px;
    border-radius: 20px;
    
}

.question-all .btn{
    display:flex;
    margin:20px;
}
.text-right{text-align:right;}
.text-left{text-align:left;}
.text-center{text-align:center;}

.mb-5{margin-bottom:5px;}
.mb-10{margin-bottom:10px;}
.mb-15{margin-bottom:15px;}
.mb-20{margin-bottom:20px;}
.mb-50{margin-bottom:50px;}
.mb-100{margin-bottom:100px;}
.mt-100{margin-top:100px;}
.mt-50{margin-top:50px;}
.col{
    padding:0px 15px;
    width:100%;
}
.form-control {
    width: 100%;
    border-radius: 0px;
    font-size: 14px;
    padding: 10px;
    border: 1px solid #ccc;
}
.btn{
background-color: #2962FF;
    color: #fff;
    border: 1px solid #2962FF;
    width: 100%;
    padding: 10px;
    font-size: 16px;
    font-weight: bold;
}*/