/* ++++++++++++++++++++++++++++++++++++++++ FULL SCREEN ORDI ++++++++++++++++++++++++++++++++ */
/* ================================== */
/* ELEMENTS GENERAUX                  */
/* ================================== */
body {
  padding:0;
  margin:0;
}
#Top {
  border-top-style: solid;
  border-top-width:1px;    
  height:50px;
  margin-bottom:6px;
}
#logo {
  float:left;
  margin-left:80px;
}
/* TEXTE TITRE en haut, défini dans le fichier conf (color et size sont dans le CSS du projet)*/
#main_titre {
  position:absolute;
  top:10px;
  margin-left:20px;
  padding-left:25px;
  font-weight:bold;
}

/* ---------------------MARKDOWN -----------------------*/
p.markdown img {
  
  display:block;
  margin:auto;
  
}
h1.markdown {

    font-size: 45px; 
    color:#393C9B; 
    margin-left:10px;
    text-decoration:none;
  margin-left:3px;

}

h2.markdown {

    font-size: 30px;  
    color:#07094e;
  margin-left:3px;

}

h3.markdown {

    font-size: 30px;  
    color:black;
    font-weight:bold;
  margin-left:3px;

}
h4.markdown {

  font-size:25px;
  color:#164194;

}
h5.markdown {

  font-size:20px;
}

p.markdown {

  font-size:20px;
  margin-left:3px;

}

/* ---------------------MENU -----------------------*/
#Menu
{
  border-top-style:solid;
  border-top-width:3px;
  border-right-style:solid;
  border-right-width:3px;
  border-bottom-style:solid;
  border-bottom-width:3px;
  width:14%;
  float:left;
}
#hr_menu
{
  border-style:solid;
  border-width:1px;
}
span.menu_category
{
    font-weight:bold;
    display:block;
    width:100%;
    height:40px;
    text-align:center;
    font-size:20px;
}
a.menu_link
{
    display:block;
    width:100%;
    height:30px;
    text-align:center;
}
a.menu_link:hover
{
  /* */
    background-color:rgb(201, 201, 201);
}
a.menu_link_small
{
    color:rgb(0, 0, 129);
    font-size:12px;
    display:block;
    width:100%;
    height:30px;
    text-align:center;
}
a.menu_link_small:hover
{
    color:purple;
    font-size:12px;
    background-color:rgb(201, 201, 201);
}
/* LIENS EN FORME DE BOUTONS */
a.link_button {  
  display:block;
  width:40%;
  height:60px;
  background-color:rgb(86, 52, 255);
  margin:10px auto 5px auto;
  font-size:25px;
  color:white;
  text-align:center;
}
a.link_button:hover  {  
  display:block;
  width:40%;
  height:60px;
  background-color:rgb(149, 128, 255);
  font-size:25px;
  color:white;
}
/* ---------------------RIGHT PANEL with contain -----------------------*/
#Main
{
    /*border:solid 1px grey;*/
    border-top-style:solid;
    border-top-width:3px;
    border-right-style:solid;
    border-right-width:3px;
    width:84%;
    float:left;
    padding-left:5px;
}

/* ---------------------LIENS SYSTEMS GAPPLI -----------------------*/

/* Lien "Retour" qui s'affiche si erreur de login par ex */
a.GAppli_Back {
    display: block;
    width:10%;
    height:30px;
    margin:20px auto 20px auto;
    padding-top: 10px;
    text-align:center;
    background-color: #007BFF;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    font-family: Arial, sans-serif;
    cursor: pointer;
    border: none;
}
a.GAppli_Back:hover {
    background-color: #007bffa9;
    color: white;
}

/* ---------------------AUTRES ELEMENTS SYSTEMS GAPPLI -----------------------*/
/* Div box qui contient image menu categ + nom de la categ */
.box_icon_text_menu {
  display:flex;
  align-items:center;
  width:80%;
  margin:auto;
}
/* Icones dans le menu */
img.icon_menu {

  width:40px;
  margin-right:10px;

}
/* Icone de déconnexion (code SVG dans Application() */
#GAppli_disconnect {

  position:absolute;
  width:40px;
  right:5px;
  top:5px;

}
/* infos de version sous le menu */
#GAppli_versions {

  display:inline-block;
  width:100%;
  font-size:10px;
  text-align:center;
  color: rgb(104, 104, 104);

}
/* ---------------------FORMULAIRES GAPPLI -----------------------*/
#GAppli_login_div {
  border: solid 2px black;
  width:400px;
  padding:2px;
  display:block;
  margin:20px auto 100px auto;
}
.GAppli_login_form {
  width:100%;
}
.GAppli_login_form fieldset {
  font-weight:bold;
}
.GAppli_login_form label {
  font-weight:lighter;
  width:100%;
  display:inline;
}
.GAppli_login_form input {
  width:90%;
  display:block;
  background-color:rgb(239, 239, 239);
}
.GAppli_login_form input[type="submit"]{
  cursor:pointer;
  width:50%;
  margin:10px auto 10px auto;
  background-color:rgb(252, 162, 162);
}
/* ---------------------FORMULAIRES -----------------------*/
/* FORMULAIRE PETIT (ex: login) */
#utils_form
{
    border: solid 2px black;
    width:400px;
    padding:2px;
    display:block;
    margin:20px auto 100px auto;
}
.utils_form{
  width:100%;
}
.utils_form fieldset{
  font-weight:bold;
}
.utils_form label {
  font-weight:lighter;
  width:100%;
  display:inline;
}
.utils_form input {
  width:90%;
  display:block;
  background-color:rgb(239, 239, 239);
}
.utils_form input[type="submit"]{
  cursor:pointer;
  width:50%;
  margin:10px auto 10px auto;
  background-color:rgb(252, 162, 162);
}
.utils_form textarea {
  display:block;
  width:90%;
  margin:10px auto 10px auto;
  border:solid 1px rgb(96, 96, 96);
}
.utils_form select {
  display:block;
  width:90%;
  margin:10px auto 10px auto;
  border:solid 1px rgb(96, 96, 96);
}
.utils_form input[type="checkbox"] {
  display:inline;
  width:20px;
}
.utils_form input[type="radio"] {
  display:inline;
  height:20px;
  width:20px;
}
/* ---------------------FORMULAIRES -----------------------*/
  /* FORMULAIRE GRAND  */
  .grand_form
  {
    width:1000px;
    margin:20px auto 20px auto;
  }
  .grand_form fieldset{
    font-size:40px;
    font-weight:bold;
  }
  .grand_form label{
    font-size:35px;
    font-weight:normal;
  }
  .grand_form input {
    font-size:40px;
    display:block;
    height:80px;
  }
  .grand_form input[type="submit"]{
    font-size:50px;
    height:100px;
    display:block;
    margin:10px auto 10px auto;
    background-color:rgb(176, 218, 167);
  }
  .grand_form select {
    font-size:60px;
  }
  .grand_form input[type="date"] {
    height:40px;
    font-size:20px;
    display:inline;
    margin:20px auto 40px auto;
  }
  .grand_form input[type="checkbox"] {
    display:inline;
    height:20px;
    width:20px;
  }
  .normgrand_formal_form input[type="radio"] {
    display:inline;
    height:20px;
    width:20px;
  }
  .grand_form input[type="textarea"]{
    font-size:40px;
    display:block;
    height:80px;
  }
.infos {
  font-size:40px;
  width:1000px;
  margin:20px auto 20px auto;
}
  /* FORMULAIRE NORMAL  */
  .normal_form
  {
    /*width:20px;*/
    margin:3px auto 3px auto;
  }
  .normal_form fieldset{
    font-size:10px;
    font-weight:bold;
  }
  .normal_form label{
    font-size:13px;
    font-weight:normal;
  }
  .normal_form input {
    font-size:13px;
    display:block;
    height:15px;
  }
  .normal_form input[type="submit"]{
    font-size:12px;
    height:20px;
    display:block;
    margin:10px auto 10px auto;
    background-color:rgb(176, 218, 167);
  }
  .normal_form select {
    font-size:60px;
  }
  .normal_form input[type="date"] {
    height:40px;
    font-size:20px;
    display:inline;
    margin:20px auto 40px auto;
  }
  .normal_form input[type="checkbox"] {
    display:inline;
    height:20px;
    width:20px;
  }
  .normal_form input[type="radio"] {
    display:inline;
    height:20px;
    width:20px;
  }
  .normal_form input[type="textarea"]{
    font-size:40px;
    display:block;
    height:80px;
  }


/* ++++++++++++++++++++++++++++++++++++++++  SCREEN SMARTPHONE  ++++++++++++++++++++++++++++++++ */
@media screen and (max-width:1000px){

  /* ---------------------TOP -----------------------*/
  body{
	  display:block;
	  /*border: solid 4px red;*/
    	width:990;
  }
  #Top
  {
    height:335px;
    border-top:Solid 3px #393C9B;
    border-bottom: solid 3px #393C9B;
    margin-bottom:6px;
  }
  #logo {
    float:left;
    margin-left: 120px;
    width: 712px;
    height: 285px;
  }
  h3.titre
  {
    margin-top:290px;
    color:rgb(0, 0, 129);
    text-align:center;
    font-size:40px;
  }
/* ---------------------POLICE -----------------------*/
h1
{
  font-size: 60px;  
}

/* ---------------------MENU -----------------------*/
  #Menu
  {
      /*border:solid 1px red;*/
      width:100%;
      float:left;
  }
  span.menu_category
  {
    font-size:60px;
    height:90px;
  }
  a.menu_link
  {
    font-size:60px;
    height:90px;
  }
  a.menu_link:hover
  {
    font-size:60px;
  }
  a.menu_link_small
  {
      font-size:50px;
      height:60px;
  }
  a.menu_link_small:hover
  {
      font-size:50px;
  }
  /* ---------------------RIGHT PANEL with contain -----------------------*/
  #Main
  {
      border:solid 1px grey;
      width:100%;
      float:left;
      padding:5px;
  }
  /* ---------------------FORMULAIRES -----------------------*/
  /* FORMULAIRE PETIT (ex: login) */
  #utils_form
  {
    width:800px;
  }
  .utils_form fieldset{
    font-size:65px;
  }
  .utils_form input {
    font-size:50px;
    height:100px;
  }
  .utils_form input[type="submit"]{
    font-size:50px;
    height:100px;
  }
  .utils_form select {
    font-size:60px;
  }
  .utils_form input[type="checkbox"] {
    font-size:60px;
  }


}


































/* ---------------------A traiter et classer smartphone -----------------------*/






p.subtitle
{
  border-left:solid 10px #393C9B;
  border-bottom:solid 1px #393C9B;
  padding-left:5px;
  font-weight:bold;
}



span.message_success
{
  display:block;
  width:100%;
  height:30px;
  color:blue;
  background-color:rgb(167, 167, 255);
}
span.message_normal
{
  display:block;
  width:100%;
  height:30px;
  color:rgb(0, 0, 0);
  background-color:rgb(255, 245, 110);
}
span.message_failed
{
  display:block;
  width:100%;
  height:30px;
  color:red;
  background-color:rgb(252, 162, 162);
}
span.message_void
{
  display:block;
  width:300px;
  height:1px;
  color:white;
}

a.link-small {
  font-size:10px;
}

/* ====== FORM =======================*/



.form_little_intoCellTable input {
  width:90%;
  display:block;
  background-color:rgb(239, 239, 239);
}


  /* == FORM form-compact ===*/


  .form-compact {
    width:400px;
  }

  .form-compact fieldset{
    font-weight:bold;
  }
  
  .form-compact input {
    display:block;
    width:300px;
    background-color: #fff;
    border: 1px solid rgb(94, 85, 85);
  }
  
  .form-compact label {
    font-weight:lighter;
    display:block;
  }


  /* == FORM form-large ===*/


  .form-large {
    width:900px;
  }

  .form-large fieldset{
    font-weight:bold;
  }
  .form-large label {
    font-weight:lighter;
    width:90%;
    display:block;
    
  }



/* == FORM form-inline ===*/

.form-inline {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
}


 /* Add some margins for each label */
 .form-inline label {
  margin: 5px 10px 5px 0;
}
/* Style the input fields */
.form-inline input {
  vertical-align: middle;
  margin: 5px 10px 5px 0;
  padding: 10px;
  background-color: #fff;
  border: 1px solid #ddd;
}

  /* Style the submit button */
  .form-inline button {
    padding: 10px 20px;
    background-color: dodgerblue;
    border: 1px solid #ddd;
    color: white;
  }
  
  .form-inline button:hover {
    background-color: royalblue;
  }
  
  /* Add responsiveness - display the form controls vertically instead of horizontally on screens that are less than 800px wide */
  @media (max-width: 800px) {
    .form-inline input {
      margin: 10px 0;
    }
  
    .form-inline {
      flex-direction: column;
      align-items: stretch;
    }
  }


/* ====== MAIN CONTAIN ELEMENTS =======================*/



.table
{
  margin-bottom:15px;
}
.table td
{
  text-align:center;
}


/* ====== TOOLS CLASS =======================*/
div.List
{
  display:block;
  border:1px solid grey;
  width:300px;
  margin:10px 20px 10px 20px;
  float:left;
}
.List span
{
  display:block;
  width:100%;
  background-color:rgb(209, 207, 207);
  font-weight:bold;
}
.List a
{
  display:block;
  width:100%;
  padding-left:10px;
}
.List a:hover
{
  display:block;
  width:100%;
  background-color:red;
  padding-left:10px;
}

#crypted_text
{
  border:dashed 1px rgba(125, 3, 3, 0.434);
  padding: 5px;
  background-color: rgb(238, 238, 238);
}


/* ===================== */
/* Messages system       */
/* ===================== */
span.sysmesg_success {
  color:blue;
  background-color:rgb(212, 212, 251);
  font-weight:bold;
  font-size:20px;
  display:block;
  width:100%;
  height:30px;
}
span.sysmesg_fail {
  color:red;
  background-color:rgb(251, 212, 213);
  font-weight:bold;
  font-size:20px;
  display:block;
  width:100%;
  height:30px;
}