@font-face{font-family:sf pro display;font-style:normal;font-weight:400;src:local('SF Pro Display'),url(./fonts/SFPRODISPLAYREGULAR.OTF) format('opentype')}
@font-face{font-family:sf pro display;font-style:italic;font-weight:100;src:local('SF Pro Display'),url(./fonts/SFPRODISPLAYULTRALIGHTITALIC.OTF) format('opentype')}
@font-face{font-family:sf pro display;font-style:italic;font-weight:200;src:local('SF Pro Display'),url(./fonts/SFPRODISPLAYTHINITALIC.OTF) format('opentype')}
@font-face{font-family:sf pro display;font-style:italic;font-weight:300;src:local('SF Pro Display'),url(./fonts/SFPRODISPLAYLIGHTITALIC.OTF) format('opentype')}
@font-face{font-family:sf pro display;font-style:normal;font-weight:500;src:local('SF Pro Display'),url(./fonts/SFPRODISPLAYMEDIUM.OTF) format('opentype')}
@font-face{font-family:sf pro display;font-style:italic;font-weight:600;src:local('SF Pro Display'),url(./fonts/SFPRODISPLAYSEMIBOLDITALIC.OTF) format('opentype')}
@font-face{font-family:sf pro display;font-style:normal;font-weight:700;src:local('SF Pro Display'),url(./fonts/SFPRODISPLAYBOLD.OTF) format('opentype')}
@font-face{font-family:sf pro display;font-style:italic;font-weight:800;src:local('SF Pro Display'),url(./fonts/SFPRODISPLAYHEAVYITALIC.OTF) format('opentype')}
@font-face{font-family:sf pro display;font-style:italic;font-weight:900;src:local('SF Pro Display'),url(./fonts/SFPRODISPLAYBLACKITALIC.OTF) format('opentype')}

html { #overflow:hidden;
background-color:#EEEEEE;
}

* {
	box-sizing: border-box;
}


body { 
        font-family: 'SF Pro Display', sans-serif;
        font-weight: 300;
        font-size: 16px;
	background-color: #EEEEEE;
	margin: 0;
}

#code {font-size:1em;}

.container_console {
	display: flex;
	background-color: #EEEEEE;
	width:100%;
	#width: 80%;
	max-width:1400px;
	#height: 100vh;
	height: calc(100vh - 0px);
}

.menu {
	width:400px;
	background-color: #EEEEEE;
	padding: 0px;
	height: 100vh;
	#font-size:90%;
	overflow-y: auto;
	#transition: transform 0.3s ease;
}

.content {
	flex: 1;
	background-color: #EEEEEE;
	padding: 00px;
	overflow-y: auto;
}

.menu-toggle {
	display: none;
	background-color: #EEEEEE;
	color:white;
	padding: 0px;
	cursor: pointer;
}




h1 {
        font-size: 30px;
        font-weight: 800;
               /** color:#E9A51F; **/
        color:#1B4A77;
}

h2 {
        font-size: 16px;
        font-weight: 800;
        color:#1B4A77;
}

h2 a {
        font-size: 16px;
        font-weight: 800;
        color:#1B4A77;
}

h2 a:hover {
        font-size: 16px;
        font-weight: 800;
        color:#E9A51F;
        text-decoration: underline;
}

h3 {
	font-size: 12px;
        font-weight: 800;
                color:#1B4A77;
}

h3 a {
	font-size: 12px;
	font-weight: 800;
	color:#1B4A77;
}

h3 a:hover {
	color: #E9A51F;
	font-size: 12px;
	font-weight: 800;
	text-decoration: underline;

}





#contenu td{
/* border: 1px dashed #b8b8b8; */
font-size:14px;
font-weight:bold;
/*      border: 1px solid #333333;*/

margin: 5;
padding: 5;
}


.entreemenu:hover {
        background-color: #FBFCFA;
}

#contenu table{
        color:#1B4A77;
/*      background-color:#f9f9f9; */
        margin: 0px;
        padding: 5px;
        border-collapse: collapse;
/*      border-radius:10px;
        border-collapse: collapse;
        box-shadow: 1px 1px 1px #999; */
        }

.advanced {
        /* background-color:#C3D8F0; */
        background-color: white;
       /*  box-shadow: 1px 1px 1px #C3D8F0;
        box-shadow: 1px 1px 1px #999; */
        border-radius:20px 20px 20px 20px;
                 border-spacing: 0;
  border-collapse: separate;
        border:#E9A51F;
        color: #1B4A77;
	width:80%;
}

.advanced:hover{
	 background-color: #FBFCFA; 
	/* background-color: #EFEFEF; */

}

.advancedmenu {     
        /* background-color:#C3D8F0; */
        background-color: white;
       /*  box-shadow: 1px 1px 1px #C3D8F0;
        box-shadow: 1px 1px 1px #999; */
        border-radius:20px 20px 20px 20px;
                 border-spacing: 0;
  border-collapse: separate;
        border:#E9A51F;
        color: #1B4A77;
        width:80%;
}  


.titreadvanced {
 /** background-color: rgba(255, 255, 255, 0.2); **/
  background-color : #1B4A77;
  /** padding: 10px 15px;
  margin: 0 auto 10px auto;
  display: block; */
font-size: 18px;
  text-align: center;
  color: #E9A51F;
  font-weight: 300;
}

advancedyellow {
        background-color:#FFFFE0;
        box-shadow: 0px 0px 0px #f9f9f9;
        box-shadow: 1px 1px 1px #999;
        border-radius:0px 0px 10px 10px;
}

.enteteadvanced {
        color: #FFFFFF;
       /** background: linear-gradient(to bottom right, #50a3a2 0%, #53e3a6 100%);  */
        background : #838a90;

}

.bouton {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  outline: 0;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background-color: rgba(255, 255, 255, 0.2);
  width: 250px;
  border-radius: 3px;
  padding: 10px 15px;
  margin: 0 auto 10px auto;
  display: block;
  text-align: center;
  font-size: 18px;
  color: white;
  transition-duration: 0.25s;
  font-weight: 300;
}
.bouton:hover {
  background-color: rgba(255, 255, 255, 0.4);
}
.bouton:focus {
  background-color: white;
  width: 300px;
  color: #53e3a6;
}


.tr_titre{
height: 40px;
background-color:#eee;
}

.grostitre{
font-size:18px;
color:#E9A51F;
}

.grostitre2{
font-size:16px;}


table.table-entete {
	width: 80%;
}

table.entete {
    border-collapse:separate;
    border-color: #09B888;
    border:solid #E9ECEC 3px;
    border-radius:20px;
    -moz-border-radius:20px;
}

.inputadvanced {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  /**outline: 0; */
  border: 1px solid rgba(255, 255, 255, 0.4);
 /** background-color: rgba(255, 255, 255, 0.2); **/
  background-color : #EEEEEE; 
/**  background-color : #1B4A77; **/
  border-radius: 3px;
 /** padding: 10px 15px;
  margin: 0 auto 10px auto;
  display: block; */
font-size: 14px;
  text-align: center;
  color: #1B4A77;
/**  color: #C3D8F0; **/
  transition-duration: 0.25s;
  font-weight: 300;
}
.inputadvanced:hover {
  #background-color: #932F1A;
  background-color: #1B4A77;
  color: #FFFFFF;
}
.inputadvanced:focus {
  #background-color: #932F1A;
  background-color: #1B4A77;
  color: #FFFFFF;
}

.labeladvanced {
webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  /**outline: 0; */
  border: 1px solid rgba(255, 255, 255, 0.4);
 /** background-color: rgba(255, 255, 255, 0.2); **/
  background-color : #F1F1F1;
  border-radius: 3px;
 /** padding: 10px 15px;
  margin: 0 auto 10px auto;
  display: block; */
font-size: 14px;
  text-align: right;
  color: black;
  transition-duration: 0.25s;
  font-weight: 300;
}

.buttonadvanced {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  outline: 0;
   background-color: #0090FF;
  #background-color: #E9A51F;
  border: 0;
  padding: 10px 15px;
  color: white;
  border-radius:5px 5px 5px 5px;
  width: 250px;
  cursor: pointer;
  font-size: 16px;
  transition-duration: 0.25s;
}
.buttonadvanced:hover {
  #background-color: #932F1A;
  background-color: #00BF64;
  color : #FFFFFF;
}

.buttonrubrique {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  outline: 0;
  background-color: #1B4A77;
  border: 0;
  padding: 10px 15px;
  color: white;
  border-radius:5px 5px 5px 5px;
  width: 250px;
  cursor: pointer;
  font-size: 16px;
  text-align: left;
  transition-duration: 0.25s;
}
.buttonrubrique:hover {
  #background-color: #932F1A;
  background-color: #1B4A77;
  color : #FFFFFF;
}

.tdtitre {
        width:24%;
        padding:5px;
        color:black;
}

.tdreponse {
        width:24%;
        padding:5px;
        color:black;
        text-align:right;
        background-color:#F1F1F1;
        border-radius:5px 5px 5px 5px;
}

.wrapper {
    position: relative;
    overflow: hidden;
    /* width: 90%; */
/*    height: 100px;*/
  /*  border: 1px solid black; */
}

#slide {
    position: absolute;
    left: 100%;
   right: 0px;
    top:-0px;
    width: 200px;
    height: 100px;
    background: red;
    transition: 1s;
    border-radius:0px 20px 20px 0px;
}

.wrapper:hover #slide {
    transition: 1s;
    left: calc(90% - 200px);;
}

.wrapperlong {
    position: relative;
    overflow: hidden;
    width: 600px;
/*    height: 100px;*/
  /*  border: 1px solid black; */
}

#slidelong {
    position: absolute;
    left: 100%;
   right: 0px;
    top:-0px;
    width: 200px;
    height: 100px;
    background: #EEEEEE;
    transition: 1s;
    border-radius:0px 20px 20px 0px;
}

.wrapperlong:hover #slidelong {
    transition: 1s;
    left: 400px;
}

/* CSS issu des tutoriels http://css.alsacreations.com */
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
 font-family: 'SF Pro Display', sans-serif;
font-size:16px;
font-weight:bold;
color: #E9A51F;
}

a {
         font-family: 'SF Pro Display', sans-serif;
        text-decoration: none;
        color: #1B4A77;
        font-size: 16px;
	font-weight: 500;
}

.titre1 {
        font-size: 20px;
        font-weight: bold;
        color: #FFFFFF;
        float: left;
        #margin-top: 112px;
        margin-right: auto;
        margin-bottom: auto;
        margin-left: 12px;
} 
a:hover {
        color: #E9A51F;
        text-decoration: underline;
} 


@media (max-width: 890px) {
        .container_console {
                flex-direction: column;
                height: calc(100vh - 50px);
        }

        .menu {
                #width: 100px;
                width: calc(100% - 40px);
                margin: 0 auto;
                height: 0;
                overflow-y: auto;
                #overflow: hidden;
                #transform: translateY(-100%);
                #transition: height 0.3s ease;
                padding:0px;
        }

        .menu.active {
                #display: block;
                max-height: 500px;
                height: auto;
                transform: translateY(0);
        }

        .menu-toggle {
                display: block;
        }
        table.advanced {
                width: 100%;
        }

	table.table-entete {
        	width: 100%;
	}

	body {
		font-size:18px;
	}
}