#side-menu {
    /* background-color:#712333; */
	background: linear-gradient(#2D3273,#712333);
	font-family:'Roboto',sans-serif!important;
	font-size:1.05em!important;
	width:100%!important;
}


@media (max-width: 1300px)  {
	#side-menu {
		
		width:102%!important;
	}
  }


  @media (max-width: 1024px) and (min-height: 768px){
	#side-menu {
		
		width:85%!important;
		font-size:0.95em!important;
	}
  }

.sous-menu {
    margin-left:7px!important;
	font-size:1em!important;
}

@media (min-width: 768px) {
  .navbar-static-top {
    border-radius: 0;
  }
  
  #wrapper{
	font-size:1em!important;
}
}

body{
	 min-height:100%!important;
}
 #side-menu a {
            color:#fff;
          /* border-bottom: 1px solid #D6A34A !important;*/
           height: 55px;
        }
		
        .selected {
            background-color:#D6A34A;
        }
.bjr-login{
	padding-right:30px;
	color:#E5E7E9!important;
}

#wrapper {
    width: 100%;
    margin-top: 55px!important; 
    background-color:rgb(209, 212, 216)!important; 
}

#page-wrapper {
    padding: 0 15px;
   
    background-color:rgb(209, 212, 216);
	padding-top: 4em!important;
}

#logo{
	margin-top:5px;
	margin-left:15px;
	border:0px solid white;
	border-radius:0%;
	font-family: 'Codystar', sans-serif!important;
font-family: 'Monoton', sans-serif!important;
font-family: 'Tangerine', cursive!important;
}
#img-logo{
	
}
#syst-pointage{
margin-left:-450px;
margin-top:-85px;
}

#container-pointage{
	width:78%;
	margin-top:32px;
	border:1px solid white;
	border-radius:5px;
	background-color:#2D3273;
	height:592px;
}

#mon_form{
	
	margin-left:-480px;
}

#block-gauche{
	float:left;
	margin-top:20px;
	margin-bottom:20px;
	width:230px;
	height:550px;
	border:1px solid #2D3273;
	border-radius:5px;
	background-color:white;
}
#personne-pointe{
	margin-top:10px;
}


#text-inscription{
	text-align:center;
	
}

.obligatoire{
	color:red;
}



.notice{
	margin-top:40px;
	/*border:1px solid white;*/
	/*border-radius:5px;*/
	background-color:#D6A34A;
}
.notice i{
	color:white;
}


#para-scanner{
	margin-top:-110px;
	margin-left:75px;
}


 #demo{
width:500px;
 height:70px;
 margin:138px auto;
 background-color:#D6A34A;
 text-align:center;
 }
#demo em{
	color:white;
 }

#block-droit{
	float: right;
	margin-top:50px;
	/*width:200px;*/
	height:550px;
	border:1px solid white;
	border-radius:15px;
	background-color:white;
}

#aller-retour{
	margin-top:-390px;
	margin-left:781px;
}


#aller{
	
	margin-left:95px;
}


#retour{
	margin-left:-70px;
	margin-top:20px;
}

#menugauche{
		width:16.5em!important;
	}


@media(min-width:768px) 
{
    #page-wrapper {
        position: inherit;
        margin: 0 0 0 229px!important;
        padding: 0 30px;
       
    }
}

@media(max-width:768px) {
#wrapper {
    margin-top:140px!important;  
}
body{
	font-size:1em!important;
}

}




.sidebar-search > div{
	padding-top:8px!important;
}

/* side-menu section */

.nav > li > a:hover{
    background-color:#2D3273!important;

}
.nav > li >a:active {
	color:#2D3273!important;
}
li.active {
	color:#2D3273!important;
}
.nav > li:focus {
	color:#2D3273!important;
}

.list-group{
	height:679px!important;
}

.img-acueil{
	border:1px solid silver;
	border-radius:3px;
}

#img-log{
	text-align:center
}

#img-stat2{
	text-align:center
}


.para-acueil{
	text-align:justify;
	border:1px solid silver;
	background-color:#DBE3E6!important;
	/* background-color:#e0e1e6; */
	color:#003366;
	padding:5px;
	font-family:'Roboto',sans-serif!important;
	font-size:0.97em!important;
}
.panel-heading{
	font-family:'Roboto',sans-serif!important;
	font-size:1.1em!important;
}

.navbar-top-links  .open > a, .nav .open > a:hover, .nav .open > a:focus {
    background-color: #75C5B8;
}
.navbar-top-links > li > a {
color: #FFFFFF;
}
.nav > li > a {
padding: 20px 15px;
}

/* back colors */
        .blue {
            background-color:rgb(113, 159, 241);
        }
         .green {
            background-color:rgb(144, 236, 192);
        }
          .red {
            background-color:rgb(255, 102, 133);
        }
        .yellow {
            background-color:rgb(237, 253, 46);
        }

  /* No border */
.no-boder {
    border:0px solid #5bc0de !important;
}


/* Wrappers */

/* ------------------------------- */

 
   

.navbar-static-side ul li {
    border-bottom:1px solid #D6A34A !important;
}


.body-Login-back {
    background-color:#D6A34A;
}



@media(min-width:1280px) 
{
#page-wrapper {
   
	padding-top: 4.5em!important;
}
 }


@media(min-width:1600px) 
{
    #page-wrapper  {
		padding-top: 5.5em!important;
    }
}

@media(min-width:1920px) 
{
    #page-wrapper  {
		padding-top: 6.5em!important;
    }
}

/* tap nvbar Section */

#navbar {
    
	height:10%;
}



@media(min-width:1280px) 
{
    #navbar {
		height:9.7%!important;
    }
}
#btnrecherche {
	padding-top: 1.4em!important;
}

@media(min-width:1280px) 
{
    #btnrecherche {
		padding-top: 1.6em!important;
    }
}


@media (min-width:1280px) and (min-height: 900px)
{
	#btnrecherche {
   
	padding-top: 3.5em!important;
}

#page-wrapper {
   
	padding-top: 5.5em!important;
}
 
 }


@media(min-width:1600px) 
{
    #btnrecherche {
		padding-top: 3.7em!important;
    }
}

@media(min-width:1920px) 
{
    #btnrecherche {
		padding-top: 1.6em!important;
    }
}


@media (min-width:1920px) and (min-height: 1000px)
{
	#btnrecherche {
   
	padding-top: 3.5em!important;
}

 
 }


 
@media (min-width:2560px)
{
	#btnrecherche {
   
	padding-top: 10em!important;
}

#page-wrapper {
   
	padding-top: 11em!important;
}


#navbar {
    
	height:9%;
}


#side-menu {
   
	width:130%!important;
	padding-bottom:25em!important;
}
 
 }


 
#side-menu {
	padding-bottom:25em!important;
}

 
@media(max-width:500px) 
{
    #side-menu {
		padding-bottom:3em!important;
    }
}

@media (max-width: 1024px) and (min-height: 768px){
	#side-menu {
		
		width:85%!important;
		font-size:0.95em!important;
	}
  }

.navbar-brand {
    padding-left:20px;
}
.navbar-brand img {
    height:30px;
}
.top-label {
position: absolute;
top: 50%;
right: 50%;
margin-top: -24px;
margin-right: -24px;
}

/*large font*/
.large-font {
    font-size:18px;
}

.body-Login-back {
    background-color:#D6A34A;
}

.margin-tips {
    margin:5px;
}
.navbar-default {
border-color: #27A6BE;
}






#mon_img{
	 position:absolute;
	 border:2px solid silver;
	 border-radius:5px;
	 margin-left:35px;
	 margin-right:35px;
	 margin-top:15px;
	 z-index:1;
 }
#mon_img2{
	position:absolute;
	margin-left:35px;
	margin-top:25px;
	z-index:0;
 }
 
 #panel-pointage{
	 border:1px solid #336699;
	 border-radius:5px;
	 background-color:white;
	 margin:125px auto;
	 height:300px;
	 width:320px;
 }
 
.titre-pointage{
	color:#003399;
	font-style:bold;
}

#mon-div{
	padding-left:10px;
	padding-top:10px;
	height:255px;
	background-color:white;
	border:1px solid silver;
	border-radius:5px;
	margin:auto;
	width:97%;
}

#photo{
	float:left;
	border:1px solid silver;
	border-radius:5px;
	margin-right:20px;
}
#profil{
	border-left:1px solid silver;
	margin-left:240px;
	padding-left:5px;
	margin-bottom:20px;
	color:#006699;
}
.text-profil{
	color:black;
}

#tab-photo th, td {
    border: 1px solid silver;
    border-collapse: collapse;
	padding-top:10px;
	padding-bottom:10px; 
	text-align:center;
}


#tab-photo{
   
    background-color: #f1f1c1;
	border-top:1px solid silver;
}

#tab-photo tr:nth-child(even) {
    background-color: #eee;
}
#tab-photo tr:nth-child(odd) {
    background-color: #fff;
}
#tab-photo th {
    color: white;
	font-size:1.1em;
    background-color:#339999;
	width:150px;
}

#text-enregistre{
	color:green;
	font-size:large;
}


#authent{
	margin-left:10px!important;
	color:#4682B4!important;
	
}
#authent>span{
	font-size:16px!important;
	font-weight:bold;
}


#formulaire{
	/* background-color:#D6A34A!important; */
	background-color:#2D3273!important;
	padding:40px!important;
	color: #D6A34A; 
}
#formulaire2{
	/* background-color:#D6A34A!important; */
	background-color:#2D3273!important;
	padding:40px!important;
	color: #D6A34A; 
}
#form-notes{
	background-color:#2D3273!important;
	
	color: #D6A34A; 
}
	
#liste-classe{
	padding-bottom: 15px!important;
	color: #D6A34A!important; 
}
.divopac:hover {
  opacity: 0.5;
}
#paraopac:hover {
  opacity: 0.8!important; 
  /* color:red!important; */
}
#paraopac2:hover {
  opacity: 0.8!important;
}
#paraopac3:hover {
  opacity: 0.8!important;
}
#paraopac4:hover {
  opacity: 0.8!important;
}




div#horloge
{
  left:310px;
  margin-top: 0px!important;
  position:absolute;
  overflow:hidden;
  font-weight:bold;
  text-align:center;
  
}

div.horloge_heure
{
  font-size: 12px;
  color:white;
}

div.horloge_date
{
  font-size: 12px;
  color:orange;
  font-weight:bold;
  }

span.horloge_grey
{
  color: white;
  font-size: inherit;
}
   
.panel-heading{
	/*border:0px solid #2D3273;background-color:#D6A34A!important;*/
	border-bottom:0px!important;
}

/*
.panel-body{
	border:1px solid red!important
}*/


body{
	background-color:rgb(209, 212, 216)!important;
	/* background-image:url(../images/about-bg2.png)!important; */
	/* background-repeat:repeat!important; */
}

body, #wrapper {
    
    padding-bottom:0px!important;
    margin-bottom:0px!important
}


body, #wrapper {
    font-size: 100%!important;
    padding-bottom:0px!important;
    margin-bottom:0px!important
}

  

@media screen and (max-width: 165em) {
 body {
      font-size: 100%!important;
   }
}
@media screen and (max-width: 64em) {
 body {
      font-size: 90%!important;
   }
}

@media screen and (max-width: 50em) {
 body {
       font-size: 80%!important;
   }
}

@media screen and (max-width: 30em) {
   body {
        font-size: 100%!important;
  }
  
}

   
   #navbar{
	   opacity: 0.98;
   }
  
  
  @media screen and (max-width: 150em){
	#wrapper {
        font-size: 150%!important;
  }
}
  @media screen and (max-width: 100em) {
 #wrapper {
       font-size: 140%!important;
   }
}
@media screen and (max-width: 83em) {
 #wrapper {
       font-size: 115%!important;
   }
}
@media screen and (max-width: 75em) {
 #wrapper {
       font-size: 140%!important;
   }
}

@media screen and (max-width: 65em) {
 #wrapper {
       font-size: 150%!important;
   }
}
  
@media screen and (max-width: 50em) {
 #wrapper {
       font-size: 150%!important;
   }
}
@media screen and (max-width: 30em) {
   #wrapper{
        font-size: 140%!important;
  }
  
}

#bouton-bultin{
	padding-bottom: 20px!important;
}

.nav-second-level li a {
    padding-left: 22px!important;
}





@media (max-width: 768px) {
	body{
		width: 100%!important;
		overflow-x: scroll;
	}
	#wrapper{
		width: 100%!important;
		overflow-x: scroll;
	}
	#page-wrapper{
		float: right!important;
		/* margin-left: 50px!important; */
		margin-top: 20px!important;
		width: 100%!important;
		position:absolute!important;
		margin-bottom: 20px!important;
	}
	#menugauche{
		width: 100%!important;
	}
	#logo{
		font-size: 16px!important;
	}
  }