@media screen and (max-width: 1600px) {
	/* --- Side navbar --- */
	#side-navbar{
		height: 200vh;
		width: 80px;
	}
	#side-navbar li{
		/*overflow: hidden;*/
	/*	font-size: 60%;*/
		line-height: inherit;
		text-align: center;
	}
	#side-navbar li.active{
		padding-left: 0px;
	}
	.sidebar-icon{
		/*height: 50px;*/
		background-size: contain;
		display: block;
		/*width: calc(80px - 20px);*/
	}
	.sidebar-menu-text{
		display: none;
	}
	#page-content{
		left: 80px;
		padding: 10px;
		width: calc(100% - 100px);
	}
	html, body{
		/*font-size: 24px;*/
		height: 100%;
		max-height: calc(100% - 20px);
		min-width: 1420px;
	}
}
@media screen and (max-width: 1420px) {
	/* --- Common style --- */
	html, body{
		height: 100%;
		max-height: calc(100% - 20px);
		min-width: auto;
	}
	
	/* --- modal window --- */
	#modal-wrapper {
		height: 100%;
		width: 100%;
	}
	.modal-dialog{
		max-height: calc(100% - 120px);
		max-width: calc(100% - 120px);
		padding: 20px;
		width: calc(100% - 20px);
	}
	.modal-dialog-header{
		border-bottom: 1px solid #e0e0e0;
		margin-bottom: 10px;
		padding-bottom: 15px;
		text-align: center;
	}
	.modal-button, input[type=submit]{
		height: inherit;
	}
	#countdownTimer {
		width: 100px;
	}
	/* --------------- */
	/* --- NAVBARS --- */
	/* --------------- */
	/* --- Top navbar --- */
	#top-logo-title {
		color: #28343f;
		display: block;
		float: left;
		height: 100%;
		line-height: 60px;
	}

	/* --- Messages --- */	
	#message-wrapper {
		bottom: 10px;
	}
	
	/* --- Content --- */
	#course-content {
		padding-top: 20px;
	}
	#manage-left {
		width: 100%;
	}
	#manage-right{
		margin-left: 0px;
		width: 100%;
	}
	
	.list-entity{
		height: auto;
		margin-bottom:10px;
	}
	.withEditBox{
		border-bottom: 1px dashed #808080;
		margin-bottom: 0px;
	}
	.inlineEditBox {
		margin-bottom: 10px;
	}
	.icons{
		height: 24px;
		overflow: hidden;
	}
	.nameField, .descriptionField {
		border-bottom: 1px dotted #808080;
		height: 30px;
		width: 100%;
	}
	.dataField-small, .dataField-middle, .dataField-large{
		border: none;
		border-right: 1px dotted #808080;		
		text-align: left;
		width: calc(50% - 5px);
	}
	/* --- UI Tabs --- */
	#tabs-data{
		display: flex;
		flex-flow: column;
	}
		
	.manage-tab{
		width:45px;
	}
	.manage-tab i{
		line-height: inherit;
	}
	.active-tab{
		width: 160px;
	}
	.manage-tab .tabname{
		display: none;
	}
	.active-tab .tabname{
		display: contents;
	}
	
	/* --- UI Buttons --- */
	.buttons{
		border-top: 1px dotted #808080;
		display: flex;
		justify-content: space-evenly;
		line-height: 30px;
		padding: 5px;
		width: calc(100% - 10px);
	}
	.grade-button {
		font-family: 'Cuprum', sans-serif;
		height: 48px !important;
		line-height: 48px !important;
		width: 80px !important;
	}
	.userlist-button{
		width: inherit;
	}
}