body{
    	background-color: #f1f1f1;
    }

    p{
    	font-size: 1em;  
    }

    .wrapper{
  background-color: #000;
}

.navbar{
  margin-bottom: 0em !important;
}

.userbar{
  margin-bottom: 5px;
}

.topnav {
  /*overflow: hidden;*/
  font-family: Arial;
  margin-bottom: 40px;
} 

.topnav li{
  display: inline;
  text-align: center;
}

/* Links inside the navbar */
.topnav a {
  float: left;
  font-size: 16px;
  color: white !important;
  text-align: center;
  padding: 0px 16px;
  text-decoration: none; 

}

.logout li{
  padding-right: 20px;
  height: 19.1px !important;
} 



.active .dropdown {
  background-color: green !important;
  width: 100%;
}

 .topnav .active a{
  background-color: green !important;
  width: 100%;
}

.logout a{  
  color:red !important;
  margin:0px;
  padding:0px;
}



/* The dropdown container */
.dropdown {
  float: left;  
} 

/* Dropdown button */
.dropdown .dropbtn {
  display: inline !important;
  font-size: 16px; 
  border: none;
  outline: none;
  color: white;
  padding: 14px 0px;
  background-color: inherit;
  font-family: inherit; /* Important for vertical align on mobile phones */
  margin: 0; /* Important for vertical align on mobile phones */
}

/* Dropdown content (hidden by default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #333 !important;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
  float: none;
  color: black;
  background-color: #333 !important;
  padding: 12px 16px; 
  text-decoration: none;
  display: block;
  text-align: left;
  padding-left: 50px;
}

.topnav .icon {
    float: right;
    display: none;
  }

/* Add a grey background color to dropdown links on hover */
.dropdown-content a:hover {
  background-color: red !important;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
  display: block;

} 

.lang{
  padding-top: 15px;
  margin-right: 15px;
}

@media screen and (max-width: 600px) {
  .topnav li:not(.active) {
    display: none;
  }

  .topnav .icon {
    float: right;
    display: block;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive li.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive li {
    float: left;
    display: block;
    text-align: center;
    width: 100%;
    z-index: 200;
  }


  .topnav.responsive .dropdown { float: none;text-align: center;}
  .topnav.responsive .dropdown-content {position: relative;}
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
  }
}

 
    .header{
    	margin-bottom: 1.6em;
    }

    .row.content {height: 93.75em;}

    .col-sm-12{
      margin-top: 10px;
    }
    
    .newsdisplay{
    	border: 0.0625em solid black;
    	background-color: #fff;
    	min-height: 100%;
    }

    .newsdisplay p{
      text-align: justify;
      color: #222;
    }

    .newsTitle >  li {
      background-color: red !important;
    }
    

    .sidenav {
      background-color: #f1f1f1;
    } 

    .sidenav ul{ 
    	overflow: hidden; 
    	overflow-y: scroll;
    }

    .pagination{
      margin:10px;
    }

    .heading{
    	background-color: red !important;
    }
 
    .image img{
    	display: block !important;
    	margin-left: auto !important;
    	margin-right: auto !important;    	
    	margin-bottom: 3.125em;
    	width: 50% !important;
    	max-width: 25em;
    	max-height: 18.75em;
    }

    .text{
    	overflow: hidden;
    	margin: 0.625em;
    }



    #text{
    	overflow: auto;
    }

    #text p{
      margin: 2em 5em;
    }

    #text h2{
      margin: 0em 2.2em;
    }



    .contents{
    	padding-bottom: 3.125em;
    }

.adminPanel{
      padding-bottom: 50px;
    }

    .input{
    	margin-bottom: 1.875em;
    	margin-top: 1.875em;
    }

    .btn{
      width: 31em;
      font-weight: bold;
    }

    #buttonLabel{
    	font: bold 0.6875em Arial;
  text-decoration: none;
  background-color: #EEEEEE;
  color: #333333;
  padding: 0.125em 0.375em 0.125em 0.375em;
  border-top: 0.0625em solid #CCCCCC;
  border-right: 0.0625em solid #333333;
  border-bottom: 0.0625em solid #333333;
  border-left: 0.0625em solid #CCCCCC;
    }

    .clear { clear: both; height: 3.75em; }

footer {
  background-color: #333;
  color: white;
  padding: 1em;
  font-size: 1em;
  text-align: center;
  }

footer a{
  font-size:1.1em;
  color: white;
  display: table;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  text-decoration: none;     
  background-color: none;
  }

  footer h3{
    font-size: 2em;
  }

  .links a{
    display: inline;
  }

    
  @media screen and (max-width: 1400px) {
      .btn{width: 17em;}
  }

    @media screen and (max-width: 47.9375em) {
      .sidenav {
        height: auto;
        padding: 1em;
      }
      
      .row.content {height: auto;} 
      .btn{width: 17em;}
    }

    @media screen and (max-width: 320px) {
      .fa-globe{display:none;}
  }