@media screen and (max-width: 1050px){
	.navbar{
		height: 6vh;
		width: 100%;
		left: unset;  	
	}  
	.navbar-right{
		display: unset;
	}
	.menu_btn{
		height: 30px;
		width: 30px;
		background: none;
		border:none;
		position: absolute;
		right: 5%;
		top: 12px;
	}
	.menu_btn img{
		height: 20px;
		width: 20px; 
	}

	#close{
		display: none;
		transition: 0.2s ease-in-out;
	}

	.right{
		width: 100%;
		float: unset;
	}
	.left{
		height: 100%; /* 100% Full-height */
	    width: 0%; /* 0 width - change this with JavaScript */
	    position: fixed; /* Stay in place */
	    z-index: 1000; /* Stay on top */
	    top: 0; /* Stay at the top */
	    left: 0; 
	    overflow-x: hidden; /* Disable horizontal scroll */
	    padding-top: 60px; /* Place content 60px from the top */
	    transition: 0.3s ease-in-out; /* 0.5 second transition effect to slide in the sidenav */ 
	}

	.topic{
		margin-top: 6vh;
	}
	.board img{
		height: 30px;
		width: 30px;
		padding: 2px;
		margin-top: 2vh;
	}
	.board h3{
		font-size: 20px;
		font-weight: bold;
	}


	.gen_set div{  
		width: 98%; 
	} 

	.resp-nav-tab li{
		width:25%;
		margin-top: 2vh;
	}


	.session_options select{
		margin-bottom: 3vh;
		width: 95%;
		border-radius: 5px;
		border: 1px solid lightgrey;
		padding: 6px 10px;
	}

	.collect_div{
		width: 95%;
	}

	.tab-content h3{
		font-size: 20px;
		font-weight: bold;
		margin-bottom: 2vh;
	}

	.class_options{
		display: unset;
	} 
	.class_options li{
		margin-top: 3vh;
	}
	.class_options input{
		margin-right: 10px;
		margin-left: 2px;
	}
	.class_options div{
		width: 100%;
	} 


	.record_sheet{
		width: 94%;
	}
	.record_sheet li{
		margin-bottom: 8px;
	}
	.record_name li{
		margin-right: unset;
		margin-top: 1vh;
	}  

	.role_tool div{
		width: 100%;
	}

	.emolument{
		display: unset;
	}
	.emolument div{
		width: 100%;
	}

	.login-bg{
		height: 100vh;
	}
	.login-details{ 
		width: 100%; 
	}
	.record_textarea{
		width: 100%;
	}
}