html{
	height:100%;
}

body{
	height:inherit;
	margin:0px;
	min-width:600px;
	min-height:400px;
}

table {
	margin-left: auto;
    margin-right: auto;
}

* {
  box-sizing: border-box;
}

input[type='text'],
input[type="password"] {
  font-size:1.5em;
}

/* ------------- Debut Header ------------- */

#Header {
	float:left;
	padding:15px
}

#Header h1{
	font-size:2em;
	margin-top:0px;
}

/* ------------- Fin Header ------------- */

/* ------------- Debut Pas de connection ------------- */

#Default {
	float:left;
	padding:10px;
	width:100%;
	font-size:1.5em;
}

/* ------------- Fin Pas de connection ------------- */

/* ------------- Debut Non Connecté ------------- */

#NonConnecter {
	display:none;
	width:100%;
	height:100%;
}

.NonConnecter {
	width : 90%;
	text-align: center;
	float:left;
	font-size:1.4em;
	margin:3%;
}

#msgConnect, #msgInscription{
	color:red;
	display:none;
}

/* ------------- Fin Non Connecté ------------- */


/* ------------- Debut Connecté 2 ------------- */

#Connecter {
	display:none;
	height: inherit;
}

#ListePseudo {
    width: 200px;
    height: inherit;
    float: left;
    background-color: gray;
	overflow: auto;
	
}
#NomSalle{
	margin-top:10px;
	text-align: center;
	font-size:30px;
	text-decoration:underline;
}

#TypeSalle{
	margin-top:10px;
	text-align: center;
}

#Titrecon{
    margin-left: 15px;
    margin-bottom: 5px;
	font-size: 30px;
	font-weight:bold;
	margin-top:15px;
}

#Connected{
	margin-top:0px;
}

#Bandeau{
  /*height: 100%; */
  width: 92%;
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top:0;
  margin-top:1%;
  margin-left:3%;
  margin-right:3%;
  background-color: rgba(0,0,0, 0.9);
  text-align: center;
  padding:1%;
  font-size: 36px;
  color:#FFF;
  border-radius: 10px;
  display:none;
}

#Chat {
    margin-left: 200px;
    height: inherit;
}
#Contenu {
    height: calc(100% - 100px);
    background-color: silver;
    overflow: auto;
}
#IHM {
	height: 100px;
    background-color: darkgray;
}

/* Chat containers */
.container {
  border: 2px solid #dedede;
  background-color: #f1f1f1;
  border-radius: 5px;
  padding: 10px;
  margin: 10px auto;
  width:90%;
}

/* Darker chat container */
.darker {
  border-color: #ccc;
  background-color: #ddd;
}

/* Debut Style du Chat */

.Green p{
	color: green;
}

.Red p{
	color:red;
}

.Blue p{
	color:blue;
}

.Gray p{
	color:gray;
}

.Yellow p{
	color:#f1c100;
}

/* Fin Style du Chat */

/* Clear floats */
.container::after {
  content: "";
  clear: both;
  display: table;
}

.container p{
	margin:0px;
	font-size:1.2em;
}

/* Style pseudo */
.container .pseudo {
  float: left;
  max-width: 60px;
  width: 100%;
  margin-right: 20px;
  font-weight:bold;
  font-size:1.2em;
}

/* Style the right pseudo */
.container .pseudo.right {
  float: right;
  margin-left: 20px;
  margin-right:0;
  font-size:1.2em;
}

/* Style time text */
.time-right {
  float: right;
  color: #aaa;
}

/* Style time text */
.time-left {
  float: left;
  color: #999;
}

#BtnEnvoyerMessage, #BtnMenu, #BtnGestionSalle, #Timer{
	margin:10px 0.8%;
	float:right;
	font-size:1.2em;
}

#prgbBandeau{
	width: 100%;
	margin-top: 20px;
	display:none;
}

#prgbIHM{
	margin:10px 0.5%;
	margin-top:13px;
 	float:right;
	height:1.3em;
	display:none;
}

#EnvoyerMessage{
	margin:0px 1%;
	width:98%;
}

#BtnGestionSalle{
	display:none;
}

#BtnListeSalles{
    margin-left:auto;
    margin-right:auto;
    margin-top:10px;
    display:block;
    font-size:1.2em;
}

#textBandeau{
	margin:0;
}

/* ------------- Fin Connecté 2 ------------- */

/* ------------- Debut Menu ------------- */

#Menu{
	display:none;
	overflow: auto;
}

#Menu p{
	padding: 8px;
	text-decoration: none;
	font-size: 2em;
	color: #818181;
}

#Menu .menutext{
    padding: 8px;
	text-decoration: none;
	font-size: 2em;
	color: #818181;
}

#TableauSalle td{
    padding: 8px;
	text-decoration: none;
	font-size: 2em;
	color: #818181;
}

#TableauTheme td{
    padding: 8px;
	text-decoration: none;
	font-size: 2em;
	color: #818181;
}

#Menu input{
    font-size:1.6em;
    margin:5px;
}

#Menu select{
    font-size:1.6em;
    margin:5px;
}

.overlay {
  /* Height & width depends on how you want to reveal the overlay (see JS below) */   
  height: 100%;
  width: 100%;
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  background-color: rgba(0,0,0, 0.9); /* Black w/opacity */
}

/* Position the content inside the overlay */
.overlay-content {
  position: relative;
  top: 25%; /* 25% from the top */
  width: 100%; /* 100% width */
  text-align: center; /* Centered text/links */
  margin-top: 30px; /* 30px top margin to avoid conflict with the close button on smaller screens */
}

/* The navigation links inside the overlay */
.overlay a {
  padding: 8px;
  text-decoration: none;
  font-size: 2em;
  color: #818181;
  display: block; /* Display block instead of inline */
  transition: 0.3s; /* Transition effects on hover (color) */
}

/* When you mouse over the navigation links, change their color */
.overlay a:hover, .overlay a:focus {
  color: #f1f1f1;
}

.overlay .closebtn {
  position: absolute;
  top: 20px;
  right: 45px;
  font-size: 60px;
}

#AdminMsg{
	width:50%;
	margin:15px;
}

#LaunchQuizz{
    top:50px;
    overflow:auto;
}

/* ------------- Fin Menu ------------- */


/* -------------------------------------- Debut Ecran Reduit ----------------------------------- */

@media only screen and (max-width:900px) {
	.container {
		width:auto;
	}

}

@media only screen and (max-width:650px) {

/* ------------- Debut Menu ------------- */

.overlay a {
	font-size: 20px
}

#AdminMsg{
	width:99%;
}

#Menu p{
	padding: 5px;
	text-decoration: none;
	font-size: 26px;
	color: #818181;
}

#Menu td{
	padding: 5px;
	text-decoration: none;
	font-size: 20px;
	color: #818181;
}

/* ------------- Fin Menu ------------- */

}

/* -------------------------------------- Fin Ecran Reduit ----------------------------------- */