* {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  box-sizing: border-box;    
}
h1, h2,h3, h4 {
  margin: 0;
  padding: 0;
}
p {
margin:0;
}

html {
  height: 100%;
}

body {
  background-repeat: no-repeat;
  background:#d9a47e;
  height: 100%;
}

li {
list-style: none;
}

a {
  text-decoration: none;
  color: black;
}

a:hover {
  color: gray;
}


.header {
  display: flex;
  justify-content: space-around;
  padding: 20px;
}

.navbar ul {
  list-style:none;
}

.navbar ul li {
  display: inline-block;
  margin: 0 20px;
}

.connect ul {
  list-style:none;
}

.connect ul li {
  display: inline-block;
  margin: 0 20px;
}

.nodata{
  text-align: center;
  margin-top: 30%;
  font-size: 4rem;
}
/* ******************** NAV BAR ******************** */
.topnav {
  background-color: #333;
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  font-size: 1rem;
}
.topnav_link {
  color: white;
  padding: 12px;
  text-decoration: none;
  text-transform: uppercase;
}
.topnav_link:hover {
  color: #0078b4;
}

/* hide responsive menu */
#topnav_hamburger_icon,
#topnav_responsive_menu {
  display: none;
}







/* .dropdown {
  display: flex;
  flex-direction: row;
  width: 400px;
} */

#topnav_menu {
  display: flex;
  flex-direction: row;
  width: 40%;
  justify-content: space-around;
}


.dropbtn {
  font-size: 16px;
  border: none;
  outline: none;
  color: white;
  background-color: inherit;
  font-family: inherit;
  margin: 10px;
}

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

.dropdown-content a {
  color: white;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {
  background-color: #ddd;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown:hover .dropbtn {
  background-color: #555;
  color: white;
}














/* ********************* HOME ************************ */
.button {
  font-size: calc(1.5em + 0.5vw);
  width: 23vw;
  text-align: center;
  border-radius: 10px;
  padding: 2%;
  margin-top: 1vh;
}

.button-1 {
  background-color: #7d78b4;
  border-color: #7d78b4;
}

.button-1:hover{
  background-color: #3a2fb6;
}

.button-2 {
  background-color: #fbb358;
  border-color: #fbb358;
}

.button-2:hover{
  background-color: #fe910c;
}

.button-3 {
  background-color: #f9b25a;
  border-color: #f9b25a;
}

.button-3:hover{
  background-color: #fd9413;
}

.button-4 {
  background-color: #87bf47;
  border-color: #87bf47;
}

.button-4:hover{
  background-color: #43700f;
}

.button-5 {
  background-color: #389935;
  border-color: #389935;
}

.button-5:hover{
  background-color: #156812;
}

.button-6 {
  background-color: #e95336;
  border-color: #e95336;
}

.button-6:hover{
  background-color: #b52407;
}

.test_main {
  display: flex;
  flex-direction: row;
  width: 112%;
  height: 85vh;
}

.div_left {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  height: 100%;
  width: 30%;
}

.div_center {
  display: flex;
  align-items: center;
  width: 30%;
}

.div_center img {
  width: 100%;
}

.div_right {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-right: 20px;
  justify-content: space-around;
height: 100%;
width: 30%;
}
/* ***************** registration ******************** */
.form-registration {
display: flex;
justify-content: center;
align-items: center;
height: 80%;
}

.form-login {
width: 30%;
height: 60%;
}

.form-login h1{
padding-bottom: 10%;
}

.form-login input {
padding: 3%;
}

.form-login tr td {
width: 50%;
padding: 3%;
}

btn {
padding: 3%;
border: transparent;
}


section  {
width: 100%;
height: 90%;
}

.contentBox {
width: 60%;
height: 100%;
margin: 3% auto;
background-color: transparent;
display: flex;
justify-content: center;
align-items: center;
}

.formBox {
width: 50%;
}

h2 {
width: 100%;
padding-top: 3%;
}

section .contentBox .formBox h2 {
color: #f8f2dc;
font-weight: 600;
font-size: 1.5em;
text-transform: uppercase;
margin-bottom: 3%;
border-bottom: 4px solid #81adc8;
letter-spacing: 1px;
display: inline-block;
}

.inputBx span {
font-size: 1em;
margin-bottom: 5px;
display: inline-block;
color: #f8f2dc;
font-weight: 300;
letter-spacing: 1px;
}

.inputBx input {
width: 100%;
padding: 0.5vh 3%;
border: 1px solid black;
letter-spacing: 1px;
color: black;
outline: none;
background-color: transparent;
border-radius: 10px;
}

.write input {
background-color: white;
color: black;
}

.inputBx select {
width: 100%;
padding: 0.5vh 3%;
border: 1px solid black;
letter-spacing: 1px;
color: black;
outline: none;
background-color: transparent;
border-radius: 10px;
}

.inputBx textarea {
width: 100%;
padding: 0.5vh 3%;
border: 1px solid black;
letter-spacing: 1px;
color: black;
outline: none;
background-color: transparent;
border-radius: 10px;
}

.inputBx input[type="submit"] {
background-color: #81adc8;
color: white;
outline: 0;
border: 0;
font-size: 1.2em;
cursor: pointer;
margin-top: 3%;
text-align: center;
}

.inputBx input[type="submit"]:hover {
background-color: rgba(255,172,17,0.76);
}

.remember {
margin-bottom: 1.5%;
color: black;
font-size: 0.8em;
}

.inputBx input {
color: black;
text-align: left;
}

.inputBx p a {
color: #81adc8;
}

.chkfrm {
color: red;
font-weight: bold;
}

.inputBx {
margin-bottom: 1%;
width: 100%;
}

.check{
display: flex;
flex-direction: column;
width: 30%;
}

/* ***************** List ******************** */
#nav {
  background: rgb(129, 173, 200);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  font-size: calc(0.5rem + 1.5vw);
  width: 40vh;
}

#nav ul {
  display: flex;
  flex-direction: column;

}

#icons {
  cursor: pointer;
  display: none;
}


.container_php {
  display: flex;
  flex-direction: row;
  width: 100vw;
  margin-top: 0px;
}

.list_main_content {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  padding: 5%;
  font-size: calc(0.5rem + 1.5vw);
}

h2 {
  text-align: center;
  font-size: calc(2rem + 1.5vw);
  padding-bottom: 4%;
}

.function_table {
width: 100%;
border-collapse: separate;
border-spacing: 0 6vh;
}

.td1 {
min-width: 15%;
}

.td2 {
width: 80%;
}

.exemple_content {
margin-left: 30px;
}

.admin_fonction {
  width: 80%;
  margin: 0 auto;
  text-align: center;
}

.admin_user {
display: flex;
flex-direction: column;
align-content: center;
width: 100%;
height: 80%;
padding: 5% 20%;

}

.table-user {
width: 100%;
vertical-align: middle;
}

footer {
  text-align: center;
}

@media only screen and (max-width: 768px) {
  .flex {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    flex-grow: 1;
  }

  .flex2 {
    height: 70%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .nodata{
    text-align: center;
    margin-top: 30%;
    font-size: 2rem;
  }

  /* hide classic menu */
  #topnav_menu {
    display: none;
  }

  #topnav_menu2 {
    display: none;
  }

/* position home link at left and hamburger at right */
    #home_link {
      flex-grow: 1;
    }
  
    /* disable horizontal scrolling  */
    #root {
      position: relative;
      overflow-x: hidden;
    }
  
    /* show responsive menu and position at the right of the screen */
    #topnav_responsive_menu {
      display: block;
      position: absolute;
      margin: 0;
      right: 0;
      top: 0;
      width: 100vw;
      height: 100vh;
  
      z-index: 99;
  
      transform-origin: 0% 0%;
      transform: translate(200%, 0);
  
      transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
    }
  
    #topnav_responsive_menu ul {
      display: flex;
      flex-direction: column;
  
      position: absolute;
      margin: 0;
      right: 0;
      top: 0;
  
      min-width: 40vw;
      padding: 20px 0 0;
  
      text-align: center;
  
      background: #ededed;
      list-style-type: none;
      -webkit-font-smoothing: antialiased;
    }
  
    #topnav_responsive_menu li {
      padding: 5px 24px;
    }
  
    #topnav_responsive_menu ul li a {
      font-size: 12px;
    }
    
    #topnav_responsive_menu a {
      white-space: nowrap;
      color: #333;
      text-decoration: none;
    }
  
    /* And let's slide it in from the right */
    #topnav_responsive_menu.open {
      transform: none;
      position: fixed;
    }
  
    /* ******************** HAMBURGER ICON ******************** */
    /* define size and position of the hamburger link */
    #topnav_hamburger_icon {
      display: block;
      position: relative;
      margin: 16px;
      width: 33px;
      height: 28px;
  
      z-index: 100;
  
      -webkit-user-select: none;
      user-select: none;
      cursor: pointer;
    }
  
    /* define the style (size, color, position, animation, ...) of the 3 spans */
    #topnav_hamburger_icon span {
      display: block;
      position: absolute;
      height: 4px;
      width: 100%;
      margin-bottom: 5px;
  
      background: #ededed;
      border-radius: 3px;
  
      z-index: 100;
  
      opacity: 1;
      left: 0;
  
      -webkit-transform: rotate(0deg);
      -moz-transform: rotate(0deg);
      -o-transform: rotate(0deg);
      transform: rotate(0deg);
      -webkit-transition: 0.25s ease-in-out;
      -moz-transition: 0.25s ease-in-out;
      -o-transition: 0.25s ease-in-out;
      transition: 0.25s ease-in-out;
    }
  
    /* set the 3 spans position to look like a hamburger */
    #topnav_hamburger_icon span:nth-child(1) {
      top: 0px;
      -webkit-transform-origin: left top;
      -moz-transform-origin: left top;
      -o-transform-origin: left top;
      transform-origin: left top;
    }
    #topnav_hamburger_icon span:nth-child(2) {
      top: 12px;
      -webkit-transform-origin: left center;
      -moz-transform-origin: left center;
      -o-transform-origin: left center;
      transform-origin: left center;
    }
    #topnav_hamburger_icon span:nth-child(3) {
      top: 24px;
      -webkit-transform-origin: left bottom;
      -moz-transform-origin: left bottom;
      -o-transform-origin: left bottom;
      transform-origin: left bottom;
    }
  
    /* change color when opening the menu */
    #topnav_hamburger_icon.open span {
      background: #333;
    }
  
    /* the first span rotates 45° \ */
    #topnav_hamburger_icon.open span:nth-child(1) {
      width: 110%;
      -webkit-transform: rotate(45deg);
      -moz-transform: rotate(45deg);
      -o-transform: rotate(45deg);
      transform: rotate(45deg);
    }
  
    /* the second span disappears */
    #topnav_hamburger_icon.open span:nth-child(2) {
      width: 0%;
      opacity: 0;
    }
  
    /* the last span rotates -45° / */
    #topnav_hamburger_icon.open span:nth-child(3) {
      width: 110%;
      -webkit-transform: rotate(-45deg);
      -moz-transform: rotate(-45deg);
      -o-transform: rotate(-45deg);
      transform: rotate(-45deg);
    }

/* ************************* HOME ******************* */

.test_main {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 75vh;
}

.div_center {
width: 0;
height: 0;
}

.div_left {
  display: flex;
  flex-direction: column;
  /* justify-content: space-evenly; */
  align-items: center;
width: 100%;
height: 50%;
}


.div_right {
  display: flex;
  flex-direction: column;
  /* justify-content: space-evenly; */
  align-items: center;
  padding-right: 0;
width: 100%;
height: 50%;
}

.button {
  font-size: 1.35em;
  margin-bottom: 1vh;
  width: 65vw;
}

.button-2 {
  padding-top: 0;
}

/* ********************** LIST ********************** */
#icons {
  display: block;
  font-size: 1rem;
}
#icons:before {
  content: "\261B      ";
}
.active #icons:before {
  content: "\261A     ";
}

#nav {
  width: 144px;
  height: 7vh;
  z-index: 10;
}

#nav ul {
  position: fixed;
  left: -100%;
  top: 100px;
  flex-direction: column;
  background: rgb(129, 173, 200);
  width: 9rem;
  height: calc(100% - 30vw);
  text-align: left;
  transition: 0.25s;
  padding-left: 1rem;
  overflow: scroll;
  overflow-x: hidden;
  /* overflow-y: hidden; */

}
#nav li {
  padding: 3px 0;
}
#nav li:hover {
  background: rgb(157, 217, 240);
}
#nav.active ul {
  left: 0;
}

.container_php {
  display: flex;
  flex-direction: column;
  width: 100vw;
  margin-top: 0px;
}

td.td1 {
min-width: 30%;
}

td.td2 {
width: 65%;
}


.admin_user {
display: flex;
flex-direction: column;
align-content: center;
width: 100%;
height: 80%;
padding: 5% 0%;
font-size: 0.65em;
}

section  {
width: 100%;
height: 85%;
}

.contentBox {
width: 100%;
height: 100%;
margin: 2% auto;
background-color: transparent;
display: flex;
justify-content: center;
}

.formBox {
width: 90%;
}

h2 {
width: 100%;
padding-top: 2%;
}

section .contentBox .formBox h2 {
color: black;
font-size: 1.2em;
text-transform: uppercase;
margin-bottom: 1%;
border-bottom: 4px solid #81adc8;
letter-spacing: 1px;
display: inline-block;
}

.inputBx span {
font-size: 0.6em;
margin-bottom: 1%;
display: inline-block;
color: #f8f2dc;
font-weight: 300;
letter-spacing: 1px;
}

.inputBx input {
width: 100%;
font-size: 0.8em;
padding: 0.3vh 2%;
border: 1px solid black;
letter-spacing: 1px;
color: black;
outline: none;
background-color: transparent;
border-radius: 10px;
}

.user input {
width: 100%;
font-size: 1.2em;
padding: 0.7vh 2%;
border: 1px solid black;
letter-spacing: 1px;
color: black;
outline: none;
background-color: transparent;
border-radius: 10px;
}
.inputBx select {
width: 100%;
font-size: 0.8em;
padding: 0.3vh 2%;
border: 1px solid black;
letter-spacing: 1px;
color: black;
outline: none;
background-color: transparent;
border-radius: 10px;
}

.inputBx textarea {
width: 100%;
font-size: 0.8em;
padding: 0.3vh 2%;
border: 1px solid black;
letter-spacing: 1px;
color: black;
outline: none;
background-color: transparent;
border-radius: 10px;
}


.inputBx input[type="submit"] {
background-color: #81adc8;
color: white;
outline: 0;
border: 0;
font-weight: 600;
cursor: pointer;
margin-top: 3%;
}

.inputBx input[type="submit"]:hover {
background-color: rgba(255,172,17,0.76);
}

.remember {
margin-bottom: 1.5%;
color: black;
font-size: 0.8em;
}

.inputBx input {
color: black;
text-align: left;
}

.inputBx p a {
color: #81adc8;
}

.chkfrm {
color: red;
font-weight: bold;
}

.inputBx {
margin-bottom: 1%;
width: 100%;
}

}