/* 
 Navbar container 
*/.navbar {
  overflow: hidden;
  background-color: #029;
  font-family: Arial;
  height:8%;
  width:100%;
}
.dropdown-btn {
  padding: 8px 8px 8px 32px;
  
  text-decoration: none;
  font-size: 20px;
  font-weight:bold;
  color: #000;
  display: block;
  border-bottom:1px solid black;
  border-top:1px  black;
  background: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  outline: none;
}
/* On mouse-over */
.dropdown-btn:hover {
  background-color: #D3D3D3;
}
/* Dropdown container (hidden by default). Optional: add a lighter background color and some left padding to change the design of the dropdown content */
.dropdown-container {
  display: none;
  padding-left: 15px;
}

.mainslide {
  display: none;
  background-color: lightblue;
  right: 0px;
  /*height: 200px;*/
  /*position: absolute;*/
  left: 0px;
}
.mainslide.active {
  display: block;
}

.dropdown-container a {

  border-bottom:1px solid black;
    text-decoration: none;
    
}

.dropdown-container:hover {
backgroud-color:#000;
}

/* Optional: Style the caret down icon */
.fa-caret-down {
  float: right;
  padding-right: 0px;
}







/* The sidebar menu */
.sidebar {
  height: 100%; /* 100% Full-height */
  width: 0; /* 0 width - change this with JavaScript */
  position: fixed; /* Stay in place */
  z-index: 1; /* Stay on top */
  top: 0;
  left: 0;
  background-color: #F5FFFA; /* Black*/
  overflow-x: hidden; /* Disable horizontal scroll */
  padding-top: 60px; /* Place content 60px from the top */
  transition: 0.5s; /* 0.5 second transition effect to slide in the sidebar */
}

/* The sidebar links */
.sidebar a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 20px;
  font-weight:bold;
  color: #000;
  display: block;
  transition: 0.3s;
  border-bottom:1px solid black;
}



/* When you mouse over the navigation links, change their color */
.sidebar a:hover {
  background-color: #D3D3D3;
}
/* Position and style the close button (top right corner) */
.sidebar .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

/* The button used to open the sidebar */
.openbtn {
  font-size: 20px;
  cursor: pointer;
  background-color: #111;
  color: white;
  padding: 10px 15px;
  border: none;
    position: absolute;
  left: 8%;
}

.openbtn:hover {
  background-color: #444;
}

/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
#main {
  transition: margin-left .5s; /* If you want a transition effect */
  padding: 20px;
}










#main1 {
  float: right;
  width: 400px;
  height: 900px;
}
body {
  margin: 0;
  padding: 0;
}
#login_box {
  left: 100px;
  height: 250px;
  width: 500px;
  font-size: 22px;
  background-color: white;
  -webkit-box-shadow: 0 0 10px rgba(0,0,0, .65);
-moz-box-shadow: 0 0 10px rgba(0,0,0, .65);
box-shadow: 0 0 20px rgba(0,0,0, .65);
  
}
#menu-icon_main{
background:black; height:35px; width:500px; font-size: 28px; color: #eee; align-items: center;
}

#slideout-menu{ 
display: none; position: absolute; height: 250px; background: wheat; width:auto; left:31.5%; right:31.5%; 
}
#slideout-menu_1{ display:block; position: absolute; height: 250px; background: wheat; width:auto; left:31.5%; right:31.5%; 
}


#login_box_1 {
  left: 100px;
  height: 250px;
  width: 500px;
  font-size: 22px;
  background-color: white;
  -webkit-box-shadow: 0 0 10px rgba(0,0,0, .65);
-moz-box-shadow: 0 0 10px rgba(0,0,0, .65);
box-shadow: 0 0 20px rgba(0,0,0, .65);
}

#logintable_1{
	background-color: white;
	width:90%;
	height:95%;
	margin-left:auto;
	margin-right:auto;
/*	margin-left:10%;
	margin-right:15%;*/
	margin-top:0%;	
}


#registration_box {
  left: 100px;
  height: 250px;
  width: 430px;
  font-size: 22px;
  background-color: white;
  -webkit-box-shadow: 0 0 10px rgba(0,0,0, .65);
-moz-box-shadow: 0 0 10px rgba(0,0,0, .65);
box-shadow: 0 0 20px rgba(0,0,0, .65);
}

#tbl{ width:70%;	
}
#logintable{
	background-color: white;
	width:90%;
	height:95%;
	margin-left:auto;
	margin-right:auto;
/*	margin-left:10%;
	margin-right:15%;*/
	margin-top:0%;	
}
/*style="text-align: left; background-color:pink; width: 480px; height: 200px; margin-left: auto; margin-right: auto;"*/
#quizcollecttbl{	text-align: left; width: 500px; margin-left: auto; margin-right: auto;
}
back_main{
	float:left; height:auto; width:auto;
}


/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
  .sidebar {padding-top: 50px;}
  .sidebar a,.dropdown-btn,.dropdown-container a  {font-size: 16px;}
  
#slideout-menu{ height: 89%; width: auto; display: none; position: absolute;  background: wheat; z-index: 1; left:11%;right:11%;
}
#slideout-menu_1{ height: 89%; width: auto; display: block; position: absolute;  background: wheat; z-index: 1; left:11%;right:11%;
}
  
  
}

/* On MOBILE screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-width: 380px) {
  .sidebar {padding-top: 80px;}
  .sidebar a,.dropdown-btn,.dropdown-container a {font-size: 20px;}

#tbl{
	width:100%;
}
#login_box {
  height: 40%;
  width: 100%;
  font-size: 22px;
  background-color: white;
  -webkit-box-shadow: 0 0 10px rgba(0,0,0, .65);
-moz-box-shadow: 0 0 10px rgba(0,0,0, .65);
box-shadow: 0 0 20px rgba(0,0,0, .65);
  
}
#logintable{
	background-color: white;
	width:95%;
	height:100%;
	margin-left:auto;
	margin-right:auto;
	font-size:13.2px;
}

h2{
    font-size:18px;
}
h1{
    font-size:18px;
}
#quizcollecttbl{	text-align: left; width: 100%; margin-left: auto; margin-right: auto; border:1;
}
#login_box_1 {
  height: 20%;
  width: 100%;
  font-size: 22px;
  background-color: white;
  -webkit-box-shadow: 0 0 10px rgba(0,0,0, .65);
-moz-box-shadow: 0 0 10px rgba(0,0,0, .65);
box-shadow: 0 0 20px rgba(0,0,0, .65);  
}

#logintable_1{
	background-color: white;
	width:95%;
	height:100%;
}
#menu-icon_main{
background:black; height:35px; width:100%; font-size: 28px; color: #eee; align-items: center;
}
#slideout-menu{ height: 42.8%; width: auto; display: none; position: absolute;  background: wheat;  left:2%;right:2%;
}
#slideout-menu_1{ height: 42.8%; width: auto; display: block; position: absolute;  background: wheat;  left:2%;right:2%;
}

}



#qnorandom_list
{
	background-color: #008080;
}