/* Menu réactif horizontal à vertical */
.custom-wrapper {
    background-color: #000000;
    margin-bottom: 1em;
    -webkit-font-smoothing: antialiased;
    height: 2.1em;
    overflow: hidden;
    -webkit-transition: height 0.5s;
    -moz-transition: height 0.5s;
    -ms-transition: height 0.5s;
    transition: height 0.5s;
}


.custom-wrapper.open {
    height: 11em; /* Modifier la hauteur si changement du nombre d'éléments dans le menu */
}

.custom-menu-3 {
    text-align: right;
}

.custom-toggle {
      width: 34px;
      height: 34px;
      position: absolute;
      top: 0;
      right: 0;
      display: none;
}

.custom-toggle .bar {
      background-color: #d9d9d9;
      display: block;
      width: 20px;
      height: 2px;
      border-radius: 100px;
      position: absolute;
      top: 18px;
      right: 7px;
      -webkit-transition: all 0.5s;
      -moz-transition: all 0.5s;
      -ms-transition: all 0.5s;
      transition: all 0.5s;
}

.custom-toggle .bar:first-child {
      -webkit-transform: translateY(-6px);
      -moz-transform: translateY(-6px);
      -ms-transform: translateY(-6px);
      transform: translateY(-6px);
}

.custom-toggle.x .bar {
      -webkit-transform: rotate(45deg);
      -moz-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
      transform: rotate(45deg);
}

.custom-toggle.x .bar:first-child {
      -webkit-transform: rotate(-45deg);
      -moz-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
      transform: rotate(-45deg);
}

@media (max-width: 47.999em) {

    .custom-menu-3 {
        text-align: left;
    }

    .custom-toggle {
        display: block;
    }

}

/* Modification perso du menu */
.pure-menu-heading {
    text-transform: none; /* On annule la mise en majuscule */
}

.pure-menu-link{
    color: #d9d9d9;
}

.pure-menu-heading{
    color: #d9d9d9;
}

/* Contenu principal */
.main {
    text-align: left;
    padding-left: 2em;
    padding-right: 2em;
    color: black;
    max-width: 50em;
    margin:auto;
}

/* Bouton */
.button-delete {
    color: white;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
    background: rgb(202, 60, 60);
}

.button-filter {
    color: white;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
    background: black;
}

.button-logout:hover {
    background: #eee;
}

.button-logout {
    color: #d9d9d9;
    /*text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);*/
    background: none;
    border: none;
    cursor: pointer;
    padding: .5em 1em;
    display: block;
}

/* Menu du bas */
.bottom-menu {
    margin-top: 1em;
    border-top-style: solid;
    border-top-width: 1px;
}

/* Pagination */
.button-xsmall {
    font-size: 70%;
}

.button-small {
    font-size: 85%;
}

.button-large {
    font-size: 110%;
}

.button-xlarge {
    font-size: 125%;
}

/* Responsive textarea dans le formulaire */
textarea {
    width: 100%;
}

/* Filtres (formulaires) */
.filter-form{
    border: solid 1px #e6e6e6;
    margin-top: 5px;
    margin-bottom: 5px;
    background: #f5f5f5;
    padding: 1em;
}


/* Tableau responsive */
.formset-header {
    background: black;
    color: #d9d9d9;
    border-radius: 4px 4px 0px 0px;
}

.formset-header p{
    padding-left: 8px;
}

.formset-row {
    border-bottom: 1px solid;
    border-left: 1px solid;
    border-right: 1px solid;
    border-color: #e3e3e3;
    padding: 3px;
}

.formset-row:last-child {
    border-radius: 0px 0px 4px 4px;
}

.formset-row input[type="number"] { /* Champs quantité */
    max-width: 5em;
}

.formset-row select { /* Champs ingrédients et unités */
    max-width: 12em;
}

.formset-row .formset-cell:last-child { /* Champs supprimer */
    margin-top: 15px;
}

@media (max-width: 47.999em) {
    /* Cacher l'entête */
    .formset-header .formset-cell:not(:first-child) { 
        display: none;
        content: "Ingrédients";
    }
    
    /* Afficher le contenu de l'attribut 'data-column' qui contient l'en tête de la colonne devant le champ*/
    .formset-row .formset-cell:not(:first-child):before { 
        content: attr(data-column);
    }
    
    
    .formset-row .formset-cell:first-child select { 
        background-color: #e6e6e6
    }
}

/* Icons */
.icon-logout{
    background: url(icons/log_out.png) no-repeat;
    margin-left: 8px;
    float: right;
    width: 18px;
    height: 18px;
}