body {
    display: flex;
    align-items: flex-start;
  }

.container {
    display: flex;
    align-items: flex-start;
    padding-top: 15px;
  }

#search-content{
  display: flex;
  flex-direction: row-reverse;
  width: 100%;
}

#search-content form{
    width: 50%;
    display: flex;
    flex-direction: row-reverse;
}

#fulltext{
  width: 80%;
  padding: 1em;
  border-radius: 1em;
}

#searchbutton{
  width: 20%;
  padding: 1em;
  border-radius: 1em;
}

#search-content form{
    padding-right: 3em;
  }

#ticket-panel{
  padding: 80px 5px 5px 5px;
  font-size: 14px;
  z-index: 999;                  /* pour être au dessus des autres éléments */
  position: fixed;                /* ne suit pas le scroll de la page et sert de réfèrent */
  top: 0;                         /* position en haut */
  right: 0;                        /* à gauche */
  width: 60em;                    /* valeur de largeur pour tout le contenu */
  min-height: 100vh;              /* occupe toute la hauteur du viewport */
  transform: translateX(100%);   /* on déplace à gauche pour ne pas interférer avec le document */
}

#ticket-panel-input {
  position: absolute;           /* pour sortir l'élément du flux */
  right: -999em;                 /* position hors de la fenêtre */
}

#ticket-panel-label {
  z-index: 2;                   /* on le met au dessus */
  position: absolute;           /* pour sortir l'élément du flux, il va bouger */
  top: 92px;                       /* position en haut */
  left: -3em;                   /* alignement sur le bord droit du parent */
  width: 3em;                   /* dimensions respectables */
  height: 3em;
  cursor: pointer;
}

#ticket-panel-bloc {
  padding: 92px 1em 1em 1em;
  z-index: 2;                   /* mise au niveau zéro */
  position: absolute;           /* pour sortir l'élément du flux, il va bouger */
  top: 0;                       /* position en haut */  
  right: 0;                      /* alignement sur bord gauche du parent */
  box-sizing: border-box;       /* modèle de boîte, plus simple à gérer */
  width: 100%;                  /* largeur 100% de son parent */
  height: 100%;                 /* hauteur 100% de son parent */
  overflow: auto;               /* rien ne doit déborder */
}

#ticket-panel-input:checked ~ #ticket-panel-label {
    left: -63em;                     /* décalage vers la droite, passe de 100% à 200% */
  }   

#ticket-panel-input:checked ~ #ticket-panel-bloc {
  transform: translateX(-100%);    /* translation vers la droite de 100% */
}

#ticket-panel-label,
#ticket-panel-bloc {
  font-size: inherit;             /* taille font du référent */
  background: #FFF;               /* il faut un fond opaque */
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
  transition: all .5s;
}

#ticket-panel-label:before {
  position: absolute;
  transition: all .5s;
  transform: translate(-50%, -50%);
}

#ticket-panel-label i{
    position:absolute;
    top:50%;
    left:10%;
}

#ticket-panel-input:checked ~ #ticket-panel-label:before {
  transform: translate(-50%, -50%) rotate(45deg);
}

#lateral-tasks-bloc{
  position: fixed;
  border: 3px solid rgb(0, 97, 200);
  padding: 10px;
  width: 20%;
  max-height: 80%;
  left:0;
  border-radius: 10px;
  overflow-y: scroll;
}

.tasks-result{
  margin-top: 1em;
  width: 100%;
  border-collapse: collapse;
  box-shadow: 0 5px 50px rgba(0, 0, 0, 0.15);
  cursor: pointer;
}

.tasks-result thead tr{
  background-color: rgb(0, 97, 200);
  color: #FFF;
}

.tasks-result tr:hover{
  background-color: rgba(0, 0, 0, 0.3);
}

.tasks-result th, td{
  padding: 3px 5px;
}

.tasks-result tbody tr, td, th{
  border: 1px solid #ddd;
}

.tasks-result tbody tr:nth-child(even){
  background-color: #e1e1e1;
}
.tasks-result tbody tr:nth-child(even):hover{
  background-color: rgba(0, 0, 0, 0.3);
}

.tasks-result tbody tr:last-of-type{
  border-bottom: 2px solid rgb(0, 97, 200);
}

.tasks-result tfoot tr:last-of-type{
  border-bottom: 2px solid rgb(0, 97, 200);
  font-weight: bold;
}

#tickets-inner{
  margin-left: 20%;
  width: 55%;
  border:3px solid rgba(200, 0, 0, 1);
  padding:10px;
  border-radius: 10px;
}

#ticket-detail-inner{
  position: fixed;
  border: 3px solid rgb(200, 0, 0);
  padding: 10px;
  width: 25%;
  max-height: 80%;
  right:0;
  border-radius: 10px;
  overflow-y: scroll;
}

#task_input{
  width: 100%;
  padding: 10px;
  border-radius: 5px;
}

#ticket_input_ticket{
  width: 80%;
  padding: 10px;
  border-radius: 5px;
}

#demandeur_input_ticket{
  width: 19%;
  padding: 10px;
  border-radius: 5px;
}

#histo_input{
  width: 100%;
  padding: 10px;
  border-radius: 5px;
}

.tickets-result{
  width: 100%;
  border-collapse: collapse;
  box-shadow: 0 5px 50px rgba(0, 0, 0, 0.15);
  cursor: pointer;
}

.tickets-result thead tr{
  background-color: rgb(200, 0, 0);
  color: #FFF;
}

.tickets-result tr:hover{
  background-color: rgba(0, 0, 0, 0.3);
}

.tickets-result th, td{
  padding: 3px 5px;
}

.tickets-result tbody tr, td, th{
  border: 1px solid #ddd;
}

.tickets-result tbody tr:nth-child(even){
  background-color: #e1e1e1;
}
.tickets-result tbody tr:nth-child(even):hover{
  background-color: rgba(0, 0, 0, 0.3);
}

.tickets-result tbody tr:last-of-type{
  border-bottom: 2px solid rgb(200, 0, 0);
}

.tickets-result tfoot tr:last-of-type{
  border-bottom: 2px solid rgb(200, 0, 0);
  font-weight: bold;
}

.tickets-header{
  background-color: rgb(200, 0, 0);
  color: #FFF;
  border: none;
  width: 100%;
  padding: 5px;
  font-weight: bold;
  font-size: 1.2em;
  text-align: left;
  margin-top: 1em;
}

.statuts-tickets{
  width: 100%;
  margin-right: 1em;
  display: flex;
  justify-content: space-around;
}

.depot{
  height: 100%;
  background-color: rgba(0, 100, 200, 1.0);
  text-align: center;
  border-radius: 1em;
  width:30%;
  font-size: 1em;
  padding: 1em;
  color: #fff;
}

.statut{
  height: 100%;
  border-radius: 1em;
  color: #fff;
  text-align: center;
  width:13.8%;
  font-weight: bold;
  font-size: 1.2em;
  padding: 0.8em;
  cursor: pointer;
}

.count{
  position: relative;
  background-color: rgba(100, 100, 100, 0.8);
  padding: 5px;
  border-radius: 5px;
  font-weight: bold;
}

.urgent{
  background-color: rgba(175, 0, 0, 1.0);
}

.projet{
  background-color: rgba(50, 50, 50, 1.0);
}

.interne{
  background-color: rgba(0, 160, 200, 1.0);
}

.ticket{
  background-color: rgba(245, 195, 0, 1.0);
}

.optionnel{
  background-color: rgba(175, 175, 175, 1.0);
}

.urgent:hover{
  color: red;
  text-decoration: underline;
}

.projet:hover{
  color: red;
  text-decoration: underline;
}

.interne:hover{
  color: red;
  text-decoration: underline;
}

.ticket:hover{
  color: red;
  text-decoration: underline;
}

.optionnel:hover{
  color: red;
  text-decoration: underline;
}

.msg {
    background: #eef8ff;
    min-width: 50px;
    padding: 10px;
    border-radius: 2px;
    word-break: break-all;
    border-top-left-radius: 0px;
    box-shadow: -1px 2px 0px #c1cbcd;
    margin-top: 10px;
}
.msg .user {
    font-size: 14px;
    margin: 0 0 2px 0;
    color: #666;
    font-weight: 700;
    margin-top: -2px;
    margin-bottom: 5px;
    transition: all .2s ease;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}
.msg p {
    font-size: 13px;
    margin: 0 0 2px 0;
    color: #444;
    transition: all .2s ease;
}

.msg time {
    font-size: 0.7rem;
    color: rgba(0,0,0,.35);
    margin-top: -3px;
    float: right;
    cursor: default;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}
.msg time:before{
    content:"\f017";
    color: #ddd;
    font-family: FontAwesome;
    display: inline-block;
    margin-right: 4px;
}

.col-1{
  width:200px;
}

.col-2{
  width:auto;
}

.col-3{
  width:110px;
}

.col-4{
  width:20px;
}

#histo_submit{
  width: 100%;
  padding: 10px;
  border-radius: 5px;
}

/*
urgent : rgba(175, 0, 0, 1.0)
projet : rgba(50, 50, 50, 1.0)
interne : rgba(0, 160, 200, 1.0)
ticket : rgba(245, 195, 0, 1.0)
optionnel : rgba(175, 175, 175, 1.0)
*/

.ticket-categorie{
  border: 2px solid;
  border-radius: 5px;
  float: right;
  font-size: 10px;
  padding: 1px 2px;
}

.PROJET{border-color:rgba(50, 50, 50, 1.0);color:rgba(50, 50, 50, 1.0);}
.INTERNE{border-color:rgba(0, 160, 200, 1.0);color:rgba(0, 160, 200, 1.0);}
.URGENT{border-color:rgba(175, 0, 0, 1.0);color:rgba(175, 0, 0, 1.0);}
.TICKET{border-color:rgba(245, 195, 0, 1.0);color:rgba(245, 195, 0, 1.0);}
.OPTIONNEL{border-color:rgba(175, 175, 175, 1.0);color:rgba(175, 175, 175, 1.0);}

.ticket-demandeur{
  float: right;
  font-size: 10px;
  margin-top: 5px;
}

.ticket-action{
  margin-top: 10px;
}

#demandeur-ticket{
  margin-top: 5px;
  width: 100%;
  padding: 10px;
  border-radius: 5px;
}

#demande-ticket{
  margin-top: 5px;
  width: 100%;
  padding: 10px;
  border-radius: 5px;
  overflow-wrap: break-word;
}

#edit_submit{
  width: 100%;
  padding: 10px;
  border-radius: 5px;
}

#societe-ticket{
  width: 40%;
  float:left;
  padding: 10px;
  border-radius: 5px;
}

#depot-ticket{
  width: 40%;
  float:left;
  padding: 10px;
  border-radius: 5px;
}

.ticket-create select{
  font-size: 16px;
  padding: 10px 5px;
  border-radius: 5px;
  cursor: pointer;
}

#submit-create{
  width: 100%;
  padding: 10px;
  border-radius: 5px;
}