/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 6 déc. 2016, 00:12:04
    Author     : Administrateur
*/
/*
body{width:100%;padding:0;margin:0;background:white;;;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);opacity:0;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
   font-weight: 300;color:#525252;;;background: url('img/f.jpg');background-size:100%;
}

body{width:100%;padding:0;margin:0;background:white;;;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);opacity:0;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
   font-weight: 300;color:#525252;;;background: rgba(247,174,165,1);
background: -moz-linear-gradient(top, rgba(247,174,165,1) 0%, rgba(248,215,174,1) 50%, rgba(218,172,209,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(247,174,165,1)), color-stop(50%, rgba(248,215,174,1)), color-stop(100%, rgba(218,172,209,1)));
background: -webkit-linear-gradient(top, rgba(247,174,165,1) 0%, rgba(248,215,174,1) 50%, rgba(218,172,209,1) 100%);
background: -o-linear-gradient(top, rgba(247,174,165,1) 0%, rgba(248,215,174,1) 50%, rgba(218,172,209,1) 100%);
background: -ms-linear-gradient(top, rgba(247,174,165,1) 0%, rgba(248,215,174,1) 50%, rgba(218,172,209,1) 100%);
background: linear-gradient(to bottom, rgba(247,174,165,1) 0%, rgba(248,215,174,1) 50%, rgba(218,172,209,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7aea5', endColorstr='#daacd1', GradientType=0 );
}*/

@import url('https://fonts.googleapis.com/css?family=Open+Sans');
body{width:100%;padding:0;margin:0;background:white;;;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);opacity:0;
font-family: 'Open Sans', "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
   font-weight: 300;color:#525252;;;
background:url(img/back.jpg); background-size: 100%;
;-ms-overflow-style: none; overflow: auto;background-attachment: fixed;}


@-webkit-keyframes Gradient {
	0% {
		background-position: 0% 50%
	}
	50% {
		background-position: 100% 50%
	}
	100% {
		background-position: 0% 50%
	}
}

@-moz-keyframes Gradient {
	0% {
		background-position: 0% 50%
	}
	50% {
		background-position: 100% 50%
	}
	100% {
		background-position: 0% 50%
	}
}

@keyframes Gradient {
	0% {
		background-position: 0% 50%
	}
	50% {
		background-position: 100% 50%
	}
	100% {
		background-position: 0% 50%
	}
}

#header{background:white;}


@media screen and (min-width:700px)
{
    
     html{font-size:0.8em}
    
   #tableAfficherTous, #afficherUn,#tableAfficherTousCond,#afficherUnJointure,
#tbInscription, #conteneur, #conteneurIndex{width:70%;margin-bottom:100px}

#tableAfficherTous{margin-bottom: 30px !important}

#tabMenuMobile{display : none;}

#divIframeFichier{margin:auto;width:50%;}


#tabs{width:80%;margin:auto;margin-top:20px;}
/*Partie spécifique au chat -------------------*/

#conteneurFrom{width:25%;-webkit-box-shadow: 2px 2px 15px -4px rgba(0,0,0,0.42);
-moz-box-shadow: 2px 2px 15px -4px rgba(0,0,0,0.42);
box-shadow: 2px 2px 15px -4px rgba(0,0,0,0.42);;border:none !important;  }


 .messages{height:500px;}
                
                #tableChat{;width:80%;margin:auto;}
                
                .composer{height:150px;}
                .messageDesAutres{background:white;border-radius: 10px;width:200px;;
                                 ;display:block;margin:auto;position: relative;left:-150px;margin-bottom: 10px;padding:20px;
                                    box-shadow:2px 2px 2px #cccccc}
                .monmessage{background:#dcf8c6;border-radius: 10px;width:200px;;;
                           display:block;margin:auto;position: relative;left:150px;margin-bottom: 10px;padding:20px;
                box-shadow:2px 2px 2px #cccccc}
                
                .inputComposer{display:block;width:50%;margin:auto;height:50px;border-radius:40px;
                              border:1px solid #cccccc;padding:5px;}
                .auteur{font-style: italic;color:#cccccc;}
                .dateMessage{font-style: italic;color:#cccccc;;font-size:0.9em;}
                
                .btnEnvoyer{display: block;margin:auto;height:50px;margin-top:30px;width:30%;border-radius: 40px;font-size: 1.2em;}
                











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



#menu{z-index:999;background:white;;position:absolute;top:0px;left:0px;;width:30%;left:-30%;box-shadow:2px 2px 2px #cccccc;}



    @-webkit-keyframes slideRight
    {
        from
        {
            opacity : 0;
        }
        to
        {
            opacity : 1;
            -webkit-transform : translateX(100%);
        }
    }
    
    @-webkit-keyframes slideLeft
    {
        
        from
        {
            opacity : 1;
            -webkit-transform : translateX(90%);
        }
        to
        {
            opacity : 0;
        }
        
    }
    
    



}
@media screen and (max-width:700px)
{
   #tableAfficherTous, #afficherUn,#tableAfficherTousCond,#afficherUnJointure,
#tbInscription, #conteneur,#tableAjoutFichier,#conteneurIndex,#conteneurFrom{width:100%;margin-bottom:100px}

#tableAfficherTous{margin-bottom:30px !important}

#tabMenuPC{display : none;}
#divIframeFichier{margin:auto;width:100%;}

body{font-size: 0.7em;}
#tabs{width:100%;margin:auto;margin-top:20px;}


#seConnecter{width:80%;margin-bottom:100px;}



/*Partie spécifique au chat -------------------*/




 .messages{height:500px;}
                
                #tableChat{;width:100%;margin:auto;}
                
                .composer{height:150px;}
                .messageDesAutres{background:white;border-radius: 10px;width:150px;;
                                 ;display:block;margin:auto;position: relative;left:-50px;margin-bottom: 10px;padding:20px;
                                    box-shadow:2px 2px 2px #cccccc}
                .monmessage{background:#dcf8c6;border-radius: 10px;width:150px;;;
                           display:block;margin:auto;position: relative;left:50px;margin-bottom: 10px;padding:20px;
                box-shadow:2px 2px 2px #cccccc}
                
                .inputComposer{display:block;width:100%;margin:auto;height:50px;border-radius:40px;
                              border:1px solid #cccccc;padding:5px;outline: none}
                .auteur{font-style: italic;color:#cccccc;}
                .dateMessage{font-style: italic;color:#cccccc;;font-size:0.9em;}
                
                .btnEnvoyer{display: block;margin:auto;height:50px;margin-top:30px;width:100%;outline: none;border-radius: 40px;font-size: 1.2em;}
                











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



#menu{z-index:999;background:white;;position:absolute;top:0px;;width:300px;left:-300px;box-shadow:2px 2px 2px #cccccc;}



    @-webkit-keyframes slideRight
    {
        from
        {
            opacity : 0;
        }
        to
        {
            opacity : 1;
            -webkit-transform : translateX(295px);
        }
    }
    
    @-webkit-keyframes slideLeft
    {
        
        from
        {
            opacity : 1;
            -webkit-transform : translateX(295px);
        }
        to
        {
            opacity : 0;
        }
        
    }
    
    
    



}

#conteneur{text-align:center;box-shadow: 2px 2px 2px #666666;border-radius: 20px;border:none;border-collapse: none !important;border-bottom: none;}


#conteneurFrom td{padding:10px;}
#conteneurFrom {outline:hidden;border:1px solid #cccccc;box-shadow: 2px 2px 2px #666666;;}
#conteneurFrom input,select,textarea{width:90%;padding-top:10px;padding-bottom:10px;border-radius:5px;border:none;border:2px solid #eeeeee;display:block;margin:auto;}
#conteneurFrom button[type="button"]{background:orange;width:90%;border:none;border-radius:5px;padding-top:10px;padding-bottom:10px;color:white;display:block;margin:auto;}

#tableAjoutFichier td{padding:10px;}
#tableAjoutFichier {outline:hidden;border:1px solid #cccccc}
#tableAjoutFichier input,select{width:90%;padding-top:10px;padding-bottom:10px;border-radius:5px;border:none;border:2px solid #eeeeee;display:block;margin:auto;}
#tableAjoutFichier input[type="submit"]{background:#2dde74;color:white;}

#seConnecter td{padding:10px;}
#seConnecter{margin:auto;;outline:hidden;border:1px solid #cccccc;;margin-top:50px;background:rgba(255,255,255,0.7) !important}
#seConnecter input[type="submit"]{background:#2dde74;width:90%;border:none;border-radius:5px;padding-top:10px;padding-bottom:10px;color:white;display:block;margin:auto;}
#seConnecter input[type="text"],
#seConnecter input[type="date"],
#seConnecter input[type="datetime"],
#seConnecter input[type="email"],
#seConnecter input[type="number"],
#seConnecter input[type="search"],
#seConnecter input[type="time"],
#seConnecter input[type="url"],
#seConnecter input[type="password"],
#seConnecter textarea,
#seConnecter select 
{
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    outline: none;
    display: block;
    width: 100%;
    padding: 7px;
    border: none;
    border-bottom: 1px solid #ddd;
    background: transparent;
    margin-bottom: 10px;
    font: 16px Arial, Helvetica, sans-serif;
    height: 45px;
    
}
#tableAfficherTous input[type="submit"]{background:orange;width:90%;border:none;border-radius:5px;padding-top:10px;padding-bottom:10px;color:white;display:block;margin:auto;
}



#afficherUn,#tableAfficherTousCond,#afficherUnJointure,#conteneurFrom,
#tbInscription, #conteneur,#tableAjoutFichier,#conteneurIndex,#tabMenuPC,#tabMenuMobile,#tableSuivantPrecedent{margin:auto;;;background:white;border-collapse:collapse;}

#afficherUn tr,#tableAfficherTousCond tr,#afficherUnJointure tr,
#tbInscription tr, #conteneur tr,#tableAjoutFichier tr,#conteneurIndex tr,#tableSuivantPrecedent tr{border-bottom:1px solid #eeeeee}

#tableAfficherTous > tbody > tr{-webkit-box-shadow: 2px 3px 3px rgba(0,0,0,0.45);
-moz-box-shadow: 2px 3px 3px rgba(0,0,0,0.45);
box-shadow: 2px 3px 3px rgba(0,0,0,0.15);
background: rgba(255,255,255,1);
}





#tableAfficherTous td {padding-left:10px;}
#afficherUn td{padding-left:10px;height:50px}
#afficherUn{-webkit-box-shadow: 2px 2px 15px -4px rgba(0,0,0,0.42);
-moz-box-shadow: 2px 2px 15px -4px rgba(0,0,0,0.42);
box-shadow: 2px 2px 15px -4px rgba(0,0,0,0.42);;margin-bottom:30px}

#tableSuivantPrecedent{background:white;border-collapse:collapse;margin-top:10px ;display:block;width:100px;;margin:auto;}
#tableSuivantPrecedent td{border : 1px solid #cccccc;background:white; }

#header{height:50px;}
a{color: #2A5DB0;text-decoration:none;}

#tableFichierEcriture{border-collapse:collapse}
#tableFichierEcriture tr{border-bottom:1px solid white;}

#conteneurIndex{margin-top:25px;}

.tbActions,#bienvenue{background:white;-webkit-box-shadow: 0px 6px 10px -8px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 6px 10px -8px rgba(0,0,0,0.75);
box-shadow: 0px 6px 10px -8px rgba(0,0,0,0.75);border:1px solid #eeeeee}

#nouveau,#nouveau3,#nouveau5,#nouvelleVersion{display:inline-block;position:relative;top:10px;;padding-left:30px;padding-right:30px;padding-top:10px;padding-bottom:10px;color:white;background:#4285f4;border-radius:2px;box-shadow:2px 2px 1px #cccccc}
#public{;position:relative;top:10px;;padding-left:30px;padding-right:30px;padding-top:10px;padding-bottom:10px;color:white;background:orangered;border-radius:2px;box-shadow:2px 2px 1px #cccccc}

label{font-weight:bold;padding:10px;}
#bouttonModSupp{float:right;}

#imageIcon{max-width: 100px}
#imageMenu{max-width: 100px;display:block;margin:auto;}


#rechercher{;display:inline-block;vertical-align:top;position:relative;top:10px;;padding-left:30px;padding-right:30px;padding-top:10px;padding-bottom:10px;color:white;background: #ff6600;border-radius:2px;;box-shadow:2px 2px 1px #cccccc}

@-webkit-keyframes fadeIn
    {
        from
        {
            opacity:0;
        }
        to
        {
            opacity:1;
        }
    }
    
    
    @-webkit-keyframes animationHover
    {
        from
        {
            
        }
        to
        {
            background : #f86700;    
            color:white;
     
        }
    }
    
     @-webkit-keyframes disparitionHover
    {
        from
        {
            
        }
        to
        {
            background : rgba(255,255,255,1);
            color:#2A5DB0;
            
        }
    }
    
#tableAfficherTous {;;;text-align:left;
 border-collapse: separate !important; /* allow spacing between cell borders */
    border-spacing: 0 2px;
margin:auto;;;;border-collapse:collapse;
margin-bottom:30px !important

}


    
 
a:focus{                                /*To handle that annoing border(chrome) when item is in focus*/
 outline: none;   
}


#tabs{margin-bottom:150px;height:1200px}

#tableAfficherTous a{display:block;width:100%;height:100%;}



.ui-button {display:inline-block;;padding-left:10px;margin-left:10px;padding-right:30px;padding-top:10px;
          padding-bottom:10px;color:white;background:#4285f4;border-radius:2px;
          box-shadow:2px 2px 1px #cccccc;    text-transform: uppercase;margin-bottom:15px;text-align:center
}

.ui-button:hover{background:#2e5fb0;color:white;text-align:center} 



.circle-container {
    position: relative;
    width: 24em;
    height: 24em;
    padding: 2.8em;
    /*2.8em = 2em*1.4 (2em = half the width of a link with img, 1.4 = sqrt(2))*/
    border: dashed 1px;
    border-radius: 50%;
    margin: 1.75em auto 0;
}
.circle-container a {
    display: block;
    position: absolute;
    top: 50%; left: 50%;
    width: 4em; height: 4em;
    margin: -2em;
}
.circle-container img { display: block; width: 100%; }
.deg0 { transform: translate(12em); } /* 12em = half the width of the wrapper */
.deg45 { transform: rotate(45deg) translate(12em) rotate(-45deg); }
.deg135 { transform: rotate(135deg) translate(12em) rotate(-135deg); }
.deg180 { transform: translate(-12em); }
.deg225 { transform: rotate(225deg) translate(12em) rotate(-225deg); }
.deg315 { transform: rotate(315deg) translate(12em) rotate(-315deg); }


.conteneurPrincipal{width:100%;overflow: auto;}



.divMenu {
  position: relative;
  overflow: hidden;
  width: 200px;
  height: 200px;
  display: inline-block;
  border:1px solid black;
  margin: 25px 0 25px 25px;
  border-radius: 5px;
  color: #fff;
  text-decoration: none;
  text-align: center;
  line-height: 50px;
  font-size: 12px;
  font-family: sans-serif;
}



.divMenu{background:rgba(255,255,255,1)}
  

#header{background: rgba(255,255,255,1)}


::-webkit-scrollbar
{
  width: 12px;  /* for vertical scrollbars */
  height: 12px; /* for horizontal scrollbars */
}

::-webkit-scrollbar-track
{
  background: rgba(255, 255, 255, 0.1);
}

::-webkit-scrollbar-thumb
{
  background: rgba(0,0,0, 0.1);
}


.ui-widget-content #conteneurFrom{box-shadow: none;border:none;border-collapse: initial;width:90%}

#conteneurFrom input[type="submit"] {
  color: #fff;
  background-color: #6496c8;
  border: none;
  border-radius: 15px;
  box-shadow: 0 5px #27496d;
  border:0px solid black;
}

#conteneurFrom input[type="submit"]:hover,
#conteneurFrom input[type="submit"].hover {
  background-color: #417cb8
}

#conteneurFrom input[type="submit"]:active,
#conteneurFrom input[type="submit"].active {
  background-color: #417cb8;
  box-shadow: 0 2px #27496d;
  transform: translateY(5px);
}



#conteneurFrom button{
  color: #fff;
  background-color: #6496c8;
  border: none;
  border-radius: 15px;
  box-shadow: 0 5px #27496d;
  border:0px solid black;
}

#conteneurFrom button:hover,
#conteneurFrom button.hover {
  background-color: #417cb8
}

#conteneurFrom button:active,
#conteneurFrom button.active {
  background-color: #417cb8;
  box-shadow: 0 2px #27496d;
  transform: translateY(5px);
}






#conteneurFrom button[type="button"]{
  color: #fff;
  background-color: #6496c8;
  border: none;
  border-radius: 15px;
  box-shadow: 0 5px #27496d;
  border:0px solid black;
}

#conteneurFrom button[type="button"]:hover,
#conteneurFrom button[type="button"].hover {
  background-color: #417cb8
}

#conteneurFrom button[type="button"]:active,
#conteneurFrom button[type="button"].active {
  background-color: #417cb8;
  box-shadow: 0 2px #27496d;
  transform: translateY(5px);
}


#conteneurFrom button, #conteneurFrom input[type="submit"],.ui-button{outline:none}






.ui-button{
  color: #fff;
  background-color: #6496c8;
  border: none;
  border-radius: 15px;
  box-shadow: 0 5px #27496d;
  border:0px solid black;
}
.ui-button:hover,
.ui-button.hover {
    color:white;
  background-color: #417cb8;border:0px solid black;
}

.ui-button:active,
.ui-button.active {
   
  background-color: #417cb8;
  box-shadow: 0 2px #27496d;
  transform: translateY(5px);border:0px solid black;
}








.ui-widget button
{
    
    color: #fff;
  background-color: #6496c8;
  border: none;
  border-radius: 15px;
  box-shadow: 0 5px #27496d;
  border:0px solid black;
    
}

.ui-widget button:hover,
.ui-widget button.hover {
     color: white;
  background-color: #417cb8;border:0px solid black;
}

.ui-widget button:active,
.ui-widget button.active {
  background-color: #417cb8;
  box-shadow: 0 2px #27496d;
  transform: translateY(5px);border:0px solid black;
}





.ui-button-icon-only{background:white !important;box-shadow:none !important;}








.btnEnvoyer{
  color: #fff;
  background-color: #6496c8;
  border: none;
  border-radius: 15px;
  box-shadow: 0 5px #27496d;
  border:0px solid black;
}
.btnEnvoyer:hover,
.btnEnvoyer.hover {
    color:white;
  background-color: #417cb8;border:0px solid black;
}

.btnEnvoyer:active,
.btnEnvoyer.active {
   
  background-color: #417cb8;
  box-shadow: 0 2px #2d660f;
  transform: translateY(5px);border:0px solid black;
}






.btnEnvoyer2{
  color: #fff;
  background-color: #6496c8;
  border: none;
  border-radius: 15px;
  box-shadow: 0 5px #27496d;
  border:0px solid black;
}
.btnEnvoyer2:hover,
.btnEnvoyer2.hover {
    color:white;
  background-color: #417cb8;border:0px solid black;
}

.btnEnvoyer2:active,
.btnEnvoyer2.active {
   
  background-color: #417cb8;
  box-shadow: 0 2px #2d660f;
  transform: translateY(5px);border:0px solid black;
}



.button-stock{
  color: #fff;
  background-color: #efcb15;
  border: none;
  border-radius: 15px;
  box-shadow: 0 5px #ddba06;
  border:0px solid black;
}
.button-stock:hover,
.button-stock.hover {
    color:white;
  background-color: #efcb15;border:0px solid black;
}

.button-stock:active,
.button-stock.active {
   
  background-color: #efcb15;
  box-shadow: 0 2px #ddba06;
  transform: translateY(5px);border:0px solid black;
}


#imageNouveau {
  
}

@keyframes glowShadow{
  to {
    box-shadow: 0px 0px 35px 15px #535FED;
  }
}

@keyframes glowImage{
  to {
    -webkit-filter: brightness(1.2);
     filter: brightness(1.2);
  }
}


#panelChat{background:white;height:100vh !important;overflow:auto;width:200px !important;padding-left:30px;display:block !important}

.notification{color:#b81e1d;}
.notification img{height:30px !important}


#conteneurFrom{
    width: 500px;
    padding: 30px;
    background: #FFFFFF;
    margin: 50px auto;
    -webkit-box-shadow: 2px 2px 15px -4px rgba(0,0,0,0.42);
-moz-box-shadow: 2px 2px 15px -4px rgba(0,0,0,0.42);
box-shadow: 2px 2px 15px -4px rgba(0,0,0,0.42);

}
#conteneurFrom h2{
    background: #4D4D4D;
    text-transform: uppercase;
    font-family: 'Open Sans Condensed', sans-serif;
    color: #797979;
    font-size: 18px;
    font-weight: 100;
    padding: 20px;
    margin: -30px -30px 30px -30px;
}
#conteneurFrom input[type="text"],
#conteneurFrom input[type="date"],
#conteneurFrom input[type="datetime"],
#conteneurFrom input[type="email"],
#conteneurFrom input[type="number"],
#conteneurFrom input[type="search"],
#conteneurFrom input[type="time"],
#conteneurFrom input[type="url"],
#conteneurFrom input[type="password"],
#conteneurFrom textarea,
#conteneurFrom select 
{
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    outline: none;
    display: block;
    width: 100%;
    padding: 3px;
    border: none;
    border-bottom: 1px solid #ddd;
    background: transparent;
    margin-bottom: 10px;
    font: 12px Arial, Helvetica, sans-serif;
    height: 30px;
}
#conteneurFrom textarea{
    resize:none;
    overflow: hidden;
}


#tableAfficherTous th{height:50px;}




@-webkit-keyframes fadeIn
    {
        from
        {
            opacity:0;
        }
        to
        {
            opacity:1;
        }
    }
    
    @-moz-keyframes fadeIn
    {
        from
        {
            opacity:0;
        }
        to
        {
            opacity:1;
        }
    }
    
    @-ms-keyframes fadeIn
    {
        from
        {
            opacity:0;
        }
        to
        {
            opacity:1;
        }
    }
    
    @-o-keyframes fadeIn
    {
        from
        {
            opacity:0;
        }
        to
        {
            opacity:1;
        }
    }