/* @copyright LPJ Sàrl 2020 - ABR */
/* ========================================================================== */
/* IMPORTS                                                                    */
/* ========================================================================== */
@import "fonts/fontawesome.css";
@import "fonts/fonts.css";
@import "jquery.ui.css";
@import "slick.css";
/* @import "slick-theme.css"; */
/* @import "animate.min.css"; */
@import "light-modal.min.css";

/* ========================================================================== */
/* VARIABLES                                                                  */
/* ========================================================================== */
:root {
    /*--main-color: #0093D7;*/
    --main-color: #aed1b6;
    --main-color-actif: #0070A4;
    --main-color-hover: #005881;
    --save-button-color: #1bb565;
    --cancel-button-color: #d70e00;
    --info-block-color: rgba(220, 102, 1, 0.7);
    --valide-color: #1bb565;
    --gold-color: #f5a428;
}

* {
    /*outline: none;*/
    box-sizing: border-box;
    font-family: 'Poppins', Arial, sans-serif;
    font-weight: 200;
    font-style: normal;
}

main {
    background-position: center!important;
    background-size: cover!important;
    background-image: url('../img/fond.png');
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    min-width: 320px;
}

#page-container {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
}

.info-banner-container {
    padding: 30px 50px 0;
    width: calc(100% - 200px);
    margin: 0 auto;
}

.info-banner {
    background: #fafafa;
    padding: 5px 20px;
    border-radius: 12px;
    box-shadow: 2px 3px 4px rgba(0, 0, 0, 0.2);
    border: 1px solid #e0e0e0;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.info-banner p {
    font-family: 'Averta', Arial, sans-serif;
    font-size: 20px;
    line-height: 24px;
    font-weight: bold;
    color: var(--main-color);
    margin: 0;
}

.info-banner .qrcode {
    margin: 0;
    width: auto;
    height: 100%;
    max-height: 100px;
}

@media (max-width: 1025px) {
    .info-banner-container {
        display: none!important;
    }
}


body {
    background: #f9fafb;
    width: 100%;
    min-width: 320px;
    overflow: scroll;
}

body.fixed-hard {
    position: fixed;
    overflow: hidden;
}

body.fixed {
    position: fixed;
}

body.fixe {
    overflow: hidden;
}

body::-webkit-scrollbar {
    display: none;
}

img {
    max-width: 100%;
    height: auto;
}

.hr-1 {
    background: #383838;
    color: #000;
    border: 1px solid #EDEEEF;
    width: 60%;
    margin: 20px auto;
}

.content {
    /*max-width: 980px;*/
    margin: auto;
    /*border: 2px solid black;*/
}

.btn{
    display: block;
    padding: 10px 15px;
    margin: 0;
    font-size: 14px;
    border-radius: 2px;
    border: 0;
    box-sizing: border-box;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 400;
    color: #FFFFFF;
    /*background-color: #943644;*/
    background-color: var(--main-color);
    /*box-shadow: inset 0 -0.6em 0 -0.35em rgba(0,0,0,0.17);*/
    text-align: center;
    position: relative;
    cursor: pointer;
}

.btn:hover {
    opacity: 0.9;
}

.rate-btn {
    border: 2px solid #4a8357;
}
/*.btn:active{
    top:0.1em;
}*/
@media all and (max-width:30em){
    .btn {
        display:block;
        margin:0.4em auto;
    }
}

.btn.loader i {
    transition: .2s ease all;
    margin-right: 6px;
    display: none;
}

.btn.load i {
    transition: .2s ease all;
    display: inline-block;;
}

.simple-keyboard {
    max-width: 900px;
    margin: 20px auto;
}

.hg-theme-default .hg-button span {
    font-weight: 300;
}

.hg-theme-default .hg-button.hg-standardBtn[data-skbtn=".ch"] {
    max-width: 82px;
}

.hg-theme-default .hg-button {
    height: 50px;
}


/* ========================================================================== */
/* NAVABR                                                                     */
/* ========================================================================== */

.brand {
    font-family: inherit;
    font-size: 1.75rem;
    font-weight: 700;
    line-height: inherit;
    color: #9a3343;
    color: var(--main-color);
    text-transform: uppercase;
    text-rendering: optimizeLegibility;
}

.brand img {
    height: 50px;
    position: relative;
    top: 3px;
}

.navbar {
    width: 100%;
    height: auto;
    padding: 0 20px;
    color: #252a32;
    background: #727373;
    z-index: 1;
}

@media only screen and (min-width: 1000px) {
    .navbar {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        margin: 0 auto;
    }
}

.navbar .navbrand {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.navbar .navbrand .burger {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    border: none;
    outline: none;
    background: none;
    transition: all 0.35s ease;
    margin-right: 30px;
    margin-top: -40px;
}

.navbar .navbrand .burger-close {
    display: none;
}

.navbar .navbrand .burger.active .burger-open {
    display: none;
}

.navbar .navbrand .burger.active .burger-close {
    display: flex;
}

@media only screen and (min-width: 1000px) {
    .navbar .navbrand .burger {
        display: none;
    }
}

.navbar .menu {
    height: 0;
    overflow: hidden;
    transition: all 0.5s ease;
    padding: 0;
    list-style: none;
    margin: 0;
}

.navbar .menu-item {
    margin: 0.5rem 0;
}

@media only screen and (min-width: 800px) {
    .navbar .menu-item {
        line-height: 28px;
    }
}

.navbar .menu-link {
    font-family: 'Averta', arial;
    font-size: 1rem;
    letter-spacing: 1px;
    font-weight: bold;
    line-height: inherit;
    color: #ffffff;
    text-transform: uppercase;
    text-rendering: optimizeLegibility;
    transition: all 0.35s ease;
    text-decoration: none;
}

.navbar .menu-link:hover {
    color: #9a3343;
    color: var(--main-color);
}

.navbar .menu.active {
    width: 100%;
    height: 10rem;
    margin: 1rem 0;
}

@media only screen and (min-width: 1000px) {
    .navbar .menu {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        height: auto;
    }
    .navbar .menu-item {
        padding: 0;
        margin: 0;
        line-height: 109px;
    }
}




/* ========================================================================== */
/* FULLWIDTH HEADER                                                           */
/* ========================================================================== */

.parallax-background-container {
    height: 38vh;
    max-height: 360px;
    min-height: 200px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 10px rgba(0,0,0,0.6);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.section-bg {
    position: absolute;
    width: 100%;
    max-width: 1200px;
    height: 105%;
    background-image: url(../img/Image_entete.png);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    z-index: -1;
    margin: 0 auto;
}

.section-logo {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../img/header_logo.png);
    background-position: 50% 30%;
    background-repeat: no-repeat;
    background-size: 70%;
    z-index: -1;
    max-width: 1200px;
}



/* ========================================================================== */
/* LOGIN                                                                      */
/* ========================================================================== */

#login header,
#dashboard header,
#machine-grid header {
    min-width: 320px;
    height: 110px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    box-sizing: border-box;
    border-bottom: 1px solid #D6D6D6;
    background-color: #FFF;
    font-weight: 500;
    font-size: 18px;
}

#dashboard header,
#machine-grid header {
    background: rgba(0, 0, 0, 0.54);
}

#dashboard header h1 a,
#machine-grid header h1 a {
    left: 20px;
}

#machine-grid header h1 a {
    cursor: default;
}

.warning-screen-size {
    display: none;
    margin: 40px;
    font-size: 20px;
    font-weight: 600;
    color: red;
}

#login header img {
    max-height: 56px;
    margin: 25px 0 0 25px;
}

#login section {
    max-width: none;
    min-width: 320px;
    min-height: calc(100vh - 176px);
    box-sizing: border-box;
    padding: 50px 0;
    text-align: center;
}

#login section .nav {
    width: 310px;
    margin: 0 auto 10px;
}

#login section .nav a {
    text-decoration: none;
    font-weight: 400;
    font-size: 14px;
    padding: 12px 18px 12px 14px;
    background: #428bca;
    border-radius: 2px;
    color: #FFF;
}

#login section .nav a {
    text-decoration: none;
    font-weight: 400;
    font-size: 24px;
    padding: 12px 18px 12px 14px;
    background: var(--save-button-color);
    border-radius: 2px;
    color: #FFF;
}

#login section .nav a i {
    margin-right: 4px;
}

#login .contact-area {
    display: none;
}

#login form {
    width: 310px;
    background: #fff;
    display: inline-block;
    padding: 20px 30px 30px;
    box-shadow: 0 2px 3px rgba(0, 0, 0, .1);
}

#login h1 {
    margin: 20px;
    padding: 0;
    font-weight: 300;
}

#login label.info:before {
    content: url(../img/icon-user-black.svg);
    width: 15px;
    border: 1px solid #d6d6d6;
    border-right: none;
    display: inline-block;
    padding: 11px 12.5px 9px;
}

#login div:nth-child(3) label.info:before {
    content: url(../img/icon-key.svg);
    padding: 13px 12.5px 9px;
}

#login form div:nth-child(2) {
    margin-bottom: 10px;
}

#login div.nav,
#login form div {
    display: flex;
}

#login input {
    font-size: 14px;
    font-weight: 300;
    border: 1px solid #d6d6d6;
    box-sizing: border-box;
    box-shadow: none;
    padding: 12px 10px;
    width: 100%;
    color: #050505;
    -webkit-appearance: none;
    -moz-appearance: none;
    -webkit-border-radius: 0;
    margin: 0;
}

#login input[type=text], #login input[type=password], #login input[type=email] {
    padding: 0 10px;
    height: 43px;
    line-height: 43px;
}

#login input[type=submit] {
    height: 45px;
    background: #428bca;
    border-color: #428bca;
    border-radius: 0;
    font-weight: 400;
    margin: 10px 0 0;
    color: #FFF;
    cursor: pointer;
}

#login p.error {
    padding: 10px;
    background: #E27074;
    color: #FFF;
    font-weight: 500;
    font-size: 12px;
}




/* ========================================================================== */
/* CHARTE                                                                     */
/* ========================================================================== */

.charte {
    width: 86%;
    margin: 0 auto;
    padding: 20px 20px 80px;
}

.charte h2 {
    width: 100%;
    text-align: center;
    font-size: 70px;
    letter-spacing: 4px;
    margin: 50px auto 70px;
    font-family: 'Abraham', arial;
    text-transform: uppercase;
}

.charte .sections {
    width: 100%;
    max-width: 1134px;
    margin: 0 auto;
}

.charte .section {
    width: 100%;
    padding: 40px 0 48px;
    border-radius: 40px;
    margin-bottom: 36px;
    display: flex;
    flex-wrap: wrap;
    position: relative;
    background-size: cover;
    background-position: center;
    min-height: 380px;
}

.charte .section.white {
    background: #FAFAFA;
}

.charte .section.smallPadding {
    padding: 20px 0;
}

.charte .section .right {
    margin: 0 0 0 auto;
}

.charte .section .background {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
}

.charte .section .text {
    width: 50%;
    padding: 10px 40px;
}

.charte .section .img {
    width: 50%;
    position: relative;
}

.charte .section .text h3 {
    font-family: 'Abraham', arial;
    font-size: 36px;
    line-height: 34px;
    margin: 0 0 20px;
    text-transform: uppercase;
    letter-spacing: 4px;
    color: var(--main-color);
}

.charte .section .text p {
    font-weight: 600;
    font-size: 14px;
    line-height: 16px;
    font-family: 'Averta', arial;
    color: #727373;
}

.charte .section .text .section_txt_img {
    display: flex;
    flex-wrap: wrap;
    margin-top: 40px;
}

.charte .section .text .section_txt_img img {
    height: 40px;
    margin-right: 20px;
}


/* ========================================================================== */
/* INSTRUCTIONS                                                               */
/* ========================================================================== */

.instructions {
    width: 100%;
    padding: 20px 20px 30px;
    /*box-shadow: 0 0 10px rgba(0,0,0,0.6);*/
}

.instructions .content {
    padding: 0 0 80px;
    max-width: 80%;
}

.instructions .steps {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: baseline;
    margin: 0 0 50px;
}

.instructions h2 {
    width: 100%;
    margin: 30px auto 50px;
    text-align: center;
    font-size: 70px;
    line-height: 70px;
    letter-spacing: 4px;
    font-family: 'Abraham', arial;
    text-transform: uppercase;
}

.instructions h3 {
    width: 100%;
    margin: 20px auto 20px;
    text-align: center;
    font-size: 30px;
    font-family: 'Abraham', arial;
    text-transform: uppercase;
}

.instructions .steps > i {
    margin: 10px;
    width: 30px;
    font-size: 40px;
    color: #9a3343;
    color: var(--main-color);
}

.instructions .steps > .step {
    width: 100%;
    padding: 40px;
    background: #FFF;
    border-radius: 20px;
    margin-bottom: 26px;
    display: flex;
    flex-wrap: wrap;
    position: relative;
    align-items: center;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.4);
}

.instructions .steps > .step > i {
    width: 90px;
    margin: 0 10px;
    text-align: center;
    padding: 0;
    font-size: 90px;
    line-height: normal;
    color: var(--main-color);
}

.instructions .steps > .step > .count {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: var(--main-color);
    text-align: center;
    padding: 0 20px;
    margin: 0 10px;
    font-size: 70px;
    font-family: 'Abraham', arial;
    line-height: 85px;
    color: #ffffff;
}

.instructions .steps > .step > h3 {
    font-size: 18px;
    text-align: center;
    line-height: 20px;
    width: 100%;
    margin: 0 0 16px;
}

.instructions .steps > .step > .explain {
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    width: calc(100% - 160px);
}

.instructions .steps > .step > .guide {
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    width: 100%;
}

.instructions .steps > .step > .explain h4 {
    font-family: 'ABRAHAM', arial;
    color: var(--main-color);
    font-size: 40px;
    line-height: 46px;
    margin: 0 0 0 40px;
    text-transform: uppercase;
}

.instructions .steps > .step > .explain p {
    font-weight: 600;
    font-size: 17px;
    margin: 0 0 0 40px;
    font-family: 'Averta';
    color: #727373;
}

.instructions .steps > .step > .guide p {
    font-weight: 600;
    font-size: 17px;
    margin: 2px 0 0 40px;
    font-family: 'Averta';
    color: #727373;
}

.instructions .steps > .step > .guide p.strong {
    font-family: 'Averta';
    font-size: 18px;
    font-weight: 700;
    font-style: italic;
}

.instructions .steps > .step > .paiement {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    justify-content: space-between;
    margin-bottom: 50px;
}

.instructions .steps > .step > .paiement img {
    height: 50px;
    margin: 6px 0;
}

.step .allergenes {
    padding: 0 40px 12px;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

.step .allergenes .allergene {
    width: 20%;
    display: flex;
    flex-wrap: wrap;
}

.step .allergenes img {
    fill: var(--main-color);
    margin: 0 auto;
}

.step .allergenes p {
    text-align: center;
    font-size: 17px;
    font-weight: 500;
    text-transform: uppercase;
    font-family: 'Abraham', arial;
    letter-spacing: 1.8px;
    color: var(--main-color);
    margin-top: 0;
    width: 100%;
}



/* ========================================================================== */
/* NAV                                                                        */
/* ========================================================================== */

nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

nav ul li {
    float: left;
    position: relative;
}

nav ul li a {
    display: block;
    padding: 0 20px;
    line-height: 109px;
    font-weight: 500;
    color: #ffffff;
    text-decoration: none;
}

nav ul li a:hover {
    color: #943644;
}

nav ul li a:not(:only-child):after {
    padding-left: 4px;
    content: ' ▾';
}
nav ul li ul li {
    width: 100%;
}
nav ul li ul li a {
    padding: 15px;
    line-height: 20px;
    background: rgb(114, 115, 115);
    font-size: 14px;
    color: #FFF;
}

.nav-dropdown {
    position: absolute;
    z-index: 1;
    /* Guarantees that the dropdown will display on top of any content. */
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
    display: none;
    width: 100%;
}

.nav-mobile {
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    background: #fff;
    height: 70px;
    width: 70px;
}

#nav-toggle {
    position: absolute;
    left: 18px;
    top: 22px;
    cursor: pointer;
    padding: 10px 35px 16px 0px;
}

#nav-toggle span,
#nav-toggle span:before,
#nav-toggle span:after {
    cursor: pointer;
    border-radius: 1px;
    height: 5px;
    width: 35px;
    background: #463f3f;
    position: absolute;
    display: block;
    content: '';
    transition: all 300ms ease-in-out;
}

#nav-toggle span:before {
    top: -10px;
}

#nav-toggle span:after {
    bottom: -10px;
}

#nav-toggle.active span {
    background-color: transparent;
}

#nav-toggle.active span:before, #nav-toggle.active span:after {
    top: 0;
}

#nav-toggle.active span:before {
    transform: rotate(45deg);
}

#nav-toggle.active span:after {
    transform: rotate(-45deg);
}

@media screen and (min-width: 1000px) {
    .nav-list {
        display: block !important;
    }
}

.navigation {
    height: 70px;
    background: #ffffff;
}

.nav-container {
    max-width: 1000px;
    margin: 0 auto;
}

.brand {
    position: absolute;
    padding-left: 20px;
    float: left;
    line-height: 10px;
    text-transform: uppercase;
    font-size: 1.4em;
    top: 27px;
}
.brand a,
.brand a:visited {
    color: #463f3f;
    text-decoration: none;
}


/* ========================================================================== */
/* LIST ALLERGENES                                                            */
/* ========================================================================== */

.list-allergene {
    width: 100%;
    background: #f1f1f1;
    padding: 30px;
}

.list-allergene button {
    margin: auto;
}

.list-allergene .allergenes {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    height: 0;
    overflow: hidden;
    transform: scaleY(0);
    transform-origin: top;
    transition: all 0.3s ease;
}

.list-allergene .allergenes.show {
    height: auto;
    margin: 16px 0;
    transform: scaleY(1);
    transition: all 0.3s ease;
}

.list-allergene .allergenes li {
    display: inline-block;
    margin: 0 0 2px 0;
    font-size: 14px;
    width: 25%;
}

.list-allergene .allergenes li img {
    width: 30px;
    margin-right: 5px;
    position: relative;
    top: 9px;
}


/* ========================================================================== */
/* MENUS                                                                      */
/* ========================================================================== */

#menus {
    /*background: #F9FAFB;*/
}

#menus .content {
    padding: 50px 50px 140px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: flex-start;
    /*min-height: calc(100vh - 858px);*/
    /*min-height: calc(100vh - 586px);*/
    min-height: calc(100vh - 841px);
    max-width: 1900px;
}

.slick-list {
    margin: 0 auto;
}

/*.slick-slide>div {padding: 0 10px;}*/

#menus h2 {
    font-size: 20px;
    font-weight: 500;
    margin: 0 0 0 100px;
    position: relative;
    width: 100%;
    text-transform: uppercase;
    font-family: 'Abraham', arial;
    letter-spacing: 2px;
}


#menus #list-menu {
    display: flex;
    flex-wrap: wrap;
    margin: 10px auto 0;
    width: 100%;
    overflow-x: auto;
}

#menus #list-menu .menu {
    /*width: calc(25% - 8px);*/
    width: calc(100% - 8px);
    height: calc(100% - 9px);
    padding: 0;
    margin: 0 4px 9px;
    background: #ffffff;
    border: 0;
    border-radius: 6px 6px 4px 4px;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    box-shadow: 2px 3px 4px rgba(0, 0, 0, 0.2);
}

#menus #list-menu .menu .img {
    width: 100%;
    height: 200px;
    background-size: cover!important;
    background-position: center!important;
    background-repeat: no-repeat!important;
    background-color: #ffffff!important;
    border: 0;
    border-radius: 0;
    position: relative;
}

#menus #list-menu .menu span.menu-type {
    position: absolute;
    bottom: 18px;
    left: 60px;
}

span.menu-type {
    width: 25px;
    height: 25px;
    border-radius: 20px;
    border: 0;
    font-size: 16px;
    text-align: center;
    background: rgba(255, 255, 255, 0.64);
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    z-index: 1;
}

#menus #list-menu .menu div.menu-no-allergenes {
    position: absolute;
    top: -45px;
    right: 6px;
}

div.menu-no-allergenes {
    padding: 3px 4px;
    border-radius: 20px;
    border: 0;
    display: flex;
    font-size: 16px;
    text-align: center;
    background: rgba(0, 0, 0, 0.7);
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    z-index: 1;
}

div.menu-no-allergenes img {
    width: 31px;
    height: 31px;
    margin: 0 1px;
}

.step .allergenes .btn {
    margin: 0 auto 16px!important;
}

.step .regime-text p {
    font-size: 14px!important;
}

.step .regime-text .title {
    font-size: 17px!important;
    font-weight: 500!important;
    text-transform: uppercase;
    font-family: 'Abraham', arial!important;
    letter-spacing: 1.8px;
    color: var(--main-color)!important;
    margin: 0;
    margin-bottom: 10px!important;
}

.step .regime img {
    width: 125px;
    height: 125px;
}

.step .regime-text {
    flex: 1;
}

.menu-min-weight span.menu-weight {
    display: inline-block;
    text-align: left;
    width: auto;
    margin: 0 10px 0 0;
    font-weight: 600;
}

.menu-min-weight span.menu-type {
    display: inline-block;
    text-align: left;
    width: auto;
    margin: 0;
}

.menu-min-weight span.menu-type span {
    margin: 0 0 0 4px;
    font-size: 13px;
    font-weight: 500;
    position: relative;
    top: -1px;
}

span.menu-type i {
    display: none;
    line-height: 26px;
}

span.menu-type.Chaud {
    color: #E84E4F;
}

span.menu-type.Froid {
    color: #2a7bb0;
}

span.menu-type.Froid .fa-snowflake,
span.menu-type.Chaud .fa-fire{
    display: block;
}

span.menu-no-allergene {
    display: inline-block;
    margin-left: 10px;
}

span.menu-no-allergene img {
    width: 40px;
    height: 40px;
    margin: 0 2px;
    position: relative;
    top: 15px;
}

#menus #list-menu .menu .menu-info {
    width: 100%;
    height: calc(100% - 200px);
    position: relative;
    margin-top: 0;
    padding: 12px 10px 58px;
}

#menus #list-menu .menu .menu-info .name {
    margin: 0 0 10px;
    font-weight: 500;
    font-size: 15px;
    line-height: 17px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    height: 36px;
    font-family: 'Abraham', arial;
}

#menus #list-menu .menu .menu-info .allergenes {
    margin-left: -4px;
    display: flex;
    flex-wrap: wrap;
}

#menus #list-menu .menu .menu-info .allergenes img {
    width: 30px;
}

#menus #list-menu .menu .machine-numbers {
    position: absolute;
    right: 10px;
    top: 10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    width: calc(100% - 20px);
}

#menus #list-menu .menu .number {
    margin: 0 0 3px 3px;
    width: 33px;
    height: 33px;
    background: rgba(255, 255, 255, 0.64);
    font-weight: 600;
    font-size: 13px;
    text-align: center;
    color: #943644;
    border-radius: 12%;
    line-height: 34px;
}

/*
#menus #list-menu .menu .number.Chaud {
    background: #d70e00;
}

#menus #list-menu .menu .number.Froid {
    background: #0070a4;
} */

#menus #list-menu .menu .menu-info .btn {
    margin-top: 10px;
    position: absolute;
    bottom: 10px;
}

#menus #list-menu .menu .menu-info .price {
    margin: 0;
    position: absolute;
    right: 10px;
    bottom: 23px;
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--main-color);
}

#menus .no-menus {
    width: 100%;
    text-align: center;
    font-size: 16px;
    font-weight: 500;
    margin: 10px 110px;
    background: #edeeef;
    padding: 40px;
    border-radius: 6px;
    color: #373737;
}

#menus .no-menus img {
    width: 100px;
    display: block;
    margin: 20px auto 0;
    background: #ffffff;
    border-radius: 50%;
    padding: 20px;
}



/* ========================================================================== */
/* MENU                                                                       */
/* ========================================================================== */

.menu-desc {
    padding: 10px 40px 40px;
    position: relative;
}

.nutri-prix {
    display: flex;
    flex-wrap:wrap;
    align-items: center;
}

.menu-img-carousel.no-multiple {
    margin-bottom: 40px;
}

.menu-desc .menu-img {
    width: 100%;
    /*height: 30vh;*/
    height: 25vh;
    background-size: contain!important;
    background-position: center!important;
    background-repeat: no-repeat!important;
}

.menu-desc .menu-designation {
    font-size: 24px;
    color: #000;
    font-weight: 500;
    margin: 0;
    font-family: 'Abraham', arial;
}

.menu-desc .menu-prix {
    font-size: 28px;
    color: var(--main-color);
    font-weight: bold;
    margin: 29px 0 0 auto;
}

.menu-desc .menu-min-weight {
    font-size: 16px;
    color: #b1b1b1;
    font-weight: 600;
    margin: 8px 0 30px;
}

.menu-desc .allergenes {
    flex-wrap: wrap;
    display: flex;
    margin-left: -3px;
    padding-bottom: 2px;
}

.menu-desc .allergenes img {
    width: 30px;
    height: 30px;
}

.menu-desc .allergenes span {
    font-weight: 300;
    font-size: 14px;
    text-transform: uppercase;
    line-height: 31px;
    margin-left: 4px;
    margin-right: 10px;
    color: var(--main-color);
    font-family: 'Abraham', arial;
    letter-spacing: 0.2px;
}

.menu-desc .sub-title {
    font-size: 16px;
    color: #000;
    font-weight: 700;
    margin-top: 40px;
    margin-bottom: 10px;
    text-transform: uppercase;
    font-family: 'Averta', arial;
}

.menu-desc .preparations ul {
    padding: 0;
    margin-bottom: 0;
}

.menu-desc .preparations ul li {
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    padding: 10px 0;
    border-top: 2px dotted #cfcac7;
    border-radius: 0;
    color: #000;
    list-style: none;
    font-family: 'Poppins', Arial, sans-serif;
}

.menu-desc .preparations ul li .title {
    color: #000;
    font-weight: 400;
    font-size: 14px;
}

.menu-desc .preparations ul li .title strong {
    font-weight: 500;
}

.menu-desc .preparations ul li .comp_content {
    float: right;
    color: #000;
    font-weight: 400;
    font-size: 14px;
}

.menu-desc .ingredient {
    color: #000;
    font-weight: 400;
    font-size: 14px;
    line-height: 24px;
}

.menu-desc .nutri-score {
    height: 60px;
    margin-top: 10px;
    margin-left: -7px;
}

.menu-desc .nutri-score img {
    height: 100%;
}

.menu-desc .nutri-score img {
    display: flex;
    flex-wrap: wrap;
}

.menu-desc .machine-numbers {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    right: 46px;
    padding: 10px;
    margin-bottom: 30px;
    background: #f5f5f5;
    border-radius: 3px;
}

.menu-desc .machine-numbers .title {
    margin: 0 auto 0 0;
    font-size: 16px;
    color: #000;
    font-weight: 700;
    text-transform: uppercase;
    font-family: 'Averta', arial;
}

.menu-desc .machine-numbers .number {
    margin: 0 0 3px 3px;
    width: 7%;
    height: 38px;
    line-height: 37px;
    background: #e4e4e4;
    font-weight: 600;
    font-size: 15px;
    text-align: center;
    color: #943644;
    border-radius: 12%;
    z-index: 200;
}


/* ========================================================================== */
/* MACHINE GRID                                                               */
/* ========================================================================== */

#zone-tools-menu {
    width: 100%;
    height: 52px;
    padding: 6px 12px;
    background-color: #F5F5F5;
    border-bottom: 1px solid #e6e6e6;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    z-index: 99999;
}

#zone-tools-menu .nav {
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

#zone-tools-menu .nav > div {
    display: flex;
    flex-wrap: wrap;
}

.tooltip {
    position: relative;
}

.tooltip:hover .info {
    visibility: visible!important;
    opacity: 1!important;
    transform: translate3d(0,0,0);
}

.info.right {
    left: -253px!important;
}

.tooltip .pronounce {
    display: block;
    color: #050505;
    font-weight: 700;
    padding: 10px 10px 4px;
    line-height: 16px;
    font-size: 12px;
}

.tooltip .text {
    display: block;
    font-size: 13px;
    padding: 0px 10px 8px;
    color: #050505;
}

/* Second tooltip style */
[data-title] {
    position: relative;
}

[data-title]:hover::before {
    content: attr(data-title);
    position: absolute;
    bottom: 0;
    display: inline-block;
    padding: 3px 6px;
    border-radius: 2px;
    background: #000;
    color: #fff;
    font-size: 12px;
    font-family: sans-serif;
    white-space: nowrap;
}

#zone-tools-menu .info {
    box-sizing: border-box;
    position: absolute;
    bottom: -74px;
    left: -2px;
    display: block;
    background: #FFF;
    width: 300px;
    font-size: 16px;
    line-height: 24px;
    z-index: 9999;
    cursor: text;
    text-align: left;
    border: 1px solid #cecece;
    padding: 2px;
    visibility: hidden;
    opacity: 0;
    transition: all .2s ease-out;
    -webkit-box-shadow: 0px 6px 29px -15px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 0px 6px 29px -15px rgba(0, 0, 0, 0.75);
    box-shadow: 0px 6px 29px -15px rgba(0, 0, 0, 0.75);
    font-family: Arial, sans-serif;
}

.save-grid:disabled:before {
    display :none;
}

.save-grid:before {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #b5d6bd;
    top: 0;
    left: 0;
    position: absolute;
    content: "";
    z-index: -1;
    display: block;
    transition: all .2s ease;
    animation: dot-ripple 1s linear infinite;
}

@keyframes dot-ripple {
    to {
        opacity:0;
        transform:scale(3);
    }
}

#zone-tools-menu div > button,
#zone-tools-menu div > a.button-like {
    width: 40px;
    height: 40px;
    background-color: #fff;
    border: 2px solid #b9b9b9;
    border-radius: 3px;
    text-align: center;
    line-height: 37px;
    text-decoration: none;
    cursor: pointer;
    margin-right: 5px;
    transition: all 0.3s;
    outline: none;
}

#zone-tools-menu > div > div {
    transition: all 0.3s;
}

#zone-tools-menu div > :disabled {
    opacity: 0.3;
    border-color: #e2e2e2;
    transition: all 0.3s;
}

#zone-tools-menu div > button:not(:disabled):hover {
    border: 2px solid #d4d4d4;
}

#zone-tools-menu div > button.neutral:hover {
    border: 3px solid #050505;
}

#zone-tools-menu div > a.button-like {
    height: 36px;
    width: 36px;
    font-weight: 600;
    text-align: center;
    font-size: 12px;
    font-family: arial;
    color: #000;
}

#zone-tools-menu div > a.button-like.disabled {
    pointer-events: none;
    color: #b71c1c;
    border-color: #b71c1c;
}

#zone-tools-menu div button img {
    height: 16px;
    margin: 9px auto;
}

#zone-tools-menu div > a.button-like img {
    height: 16px;
    margin: 10px auto;
}

#zone-tools-menu > button.selected {
    /*border: 2px solid #428752!important;*/
    border: 2px solid #f30404!important;
    box-sizing: border-box;
}

#machine-grid #content {
    margin: 0 auto;
    padding: 0 360px;
}

.details-info {
    margin-top: 20px;
    background: #FFF;
    border-radius: 4px;
    padding: 12px;
    display: flex;
    flex-wrap: wrap;
}

.details-info-dashboard {
    background: #FFF;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    border-radius: 3px;
    padding: 20px;
    align-items: center;
    justify-content: space-between;
    margin-top: 0;
}

.details-info p,
.details-info-dashboard p {
    font-size: 13px;
    font-weight: 600;
    line-height: 18px;
    width: 100%;
    margin: 0;
}

.details-info p span,
.details-info-dashboard p span {
    float: right;
    font-weight: 600;
    color: #a5a5b5;
}

.presets-grids {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.machine {
    position: relative;
    margin: 20px auto;
    display: flex;
    flex-wrap: wrap;
}

.presets-grids .machine {
    margin: 0;
}

.machine .grid {
    position: relative;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    padding: 2px;
    background: #FFF;
    border-radius: 3px;
    overflow: hidden;
}

.cell {
    border: 2px solid #FFF;
    background-color: #FFF;
    box-sizing: border-box;
}

.cell span {
    font-weight: 500;
    color: #a5a5a5;
    cursor: default;
    background-color: #eeeeee;
    box-sizing: border-box;
    border-radius: 3px;
    width: 100%;
    height: 100%;
    display: block;
    padding: 2px;
    opacity: 0;
}

.cell.selected span {
    background-color: #ef6f6f;
    color: #FFF;
}

.zone {
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    visibility: hidden;
    z-index: 100;
    background-color: #fff;
    border: 2px solid #e2e2e2;
    border-radius: 5px;
    box-sizing: border-box;
    position: absolute;
    transition: all 0.3s;
    transition: all 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.15);
}


.zone.empty {
    background-color: rgb(93, 93, 93)!important;
    border: 2px solid rgb(5, 5, 5)!important;
}

.zone > textarea {
    outline-color: rgba(239,72,72,1)!important;
    display: block;
    width: 100%;
    font-size: 14px;
    border: none;
    border-radius: 0 3px 3px 0;
    resize: none;
    height: 100%;
    line-height: 1.3em;
    padding: 10px 10px 30px;
    box-sizing: border-box;
    background-color: transparent;
    overflow: hidden;
    cursor: pointer;
    color: transparent;
    text-shadow: 0 0 0 grey;
    position: absolute;
    margin: 0;
    z-index: 10;
    top: 0;
}

.monstre-dashboard .zone > textarea {
    pointer-events: none;
}

.zone > textarea[title]:hover::after {
    content: attr(title);
    position: absolute;
    border-radius: 20px;
    top: -50%;
    left: 0;
    border: red;
}

.zone > textarea:focus {
    -webkit-box-shadow: 0px 0px 10px 1px rgb(214, 90, 90,1);
    -moz-box-shadow: 0px 0px 10px 1px rgb(214, 90, 90,1);
    box-shadow: 0px 0px 10px 1px rgb(214, 90, 90,1);
}


/* ========================================================================== */
/* SCREENSAVER                                                                */
/* ========================================================================== */

#screensaver {
    width: 100vw;
    height: 100vh;
    position: absolute;
    left: 0;
    top: 0;
    display: none;
    background: gray;
    /*background-image: url("https://images.unsplash.com/photo-1588675646184-f5b0b0b0b2de?ixlib=rb-1.2.1&auto=format&fit=crop&w=2134&q=80");
    background-size: cover!important;
    background-repeat: no-repeat!important;
    background-position: center!important;*/
    z-index: 9000;
}

#screensaver .screensaver-container {
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.3);
    position: relative;
}

img.slide{
    display: none;
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
}

.centerBox {
    position: absolute;
    top: 50vh;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    animation: fadeIn 1s ease-out;
}

.screensaver-container .logo {
    max-width: 50%;
    margin-bottom: -72px;
}

.screensaver-container .time {
    font-size: 8rem;
    font-weight: 300;
    color: #FFF;
    letter-spacing: 1px;
    margin-bottom: 0;
    height: 147px;
    width: auto;
}

.screensaver-container .date {
    font-size: 2.3rem;
    font-weight: 400;
    margin-top: 10px;
    color: #FFF;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@media only screen and (max-width: 768px) {
    .time {
        font-size: 3.7rem;
    }

    .date {
        font-size: 1.7rem;
    }
}


@media screen and (max-device-width : 500px) {

    #menus #list-menu .menu .menu-info .name {
        font-size: 15px;
    }

    #menus #list-menu .menu .number {
        width: 38px;
        height: 38px;
        font-size: 16px;
        line-height: 39px;
    }

    .light-modal-content {
        top: 0;
        right: 0;
        width: 100%;
        height: 100%;
        max-width: none;
    }

    .light-modal-heading + .light-modal-close-icon {
        font-size: 32px;
    }

    .menu-desc {
        padding: 10px 40px 80px;
    }

    .light-modal-footer {
        display: none;
    }

    .menu-desc .machine-numbers .title {
        font-size: 16px;
    }

    .menu-desc .menu-min-weight {
        font-size: 20px;
    }

    .menu-min-weight span.menu-type span {
        font-size: 15px;
        top: -1px;
    }

    .menu-desc .ingredient {
        font-size: 17px;
        line-height: 28px;
    }

    .menu-desc .preparations ul li {
        font-size: 17px;
        line-height: 28px;
        font-weight: 400;
    }

    .menu-desc .allergenes span {
        font-size: 16px;
        line-height: 31px;
        font-weight: 500;
    }

    .menu-desc .allergenes img {
        width: 32px;
        height: 32px;
    }

    .menu-desc .preparations ul li .title {
        font-size: 16px;
    }
}



/* ========================================================================== */
/* DASHBOARD                                                                  */
/* ========================================================================== */

/* ========================================================================== */
/* SIDEBAR                                                                    */
/* ========================================================================== */

#dashboard main,
#machine-grid main {
    display: flex;
    flex-wrap: wrap;
}

#machine-grid main {
    flex-direction: column;
}

#machine-grid main {
    width: 100%;
    min-height: calc(100vh - 110px);
    background: #EEF3F6;
}

#sidebar {
    width: 200px;
    min-height: calc(100vh - 110px);
    height: auto;
    background-color: #383838;
    color: #FFF;
}

#sidebar ul {
    margin: 0;
    padding: 0;
}

#sidebar ul li .sidebar-item {
    padding: 30px 20px;
    display: flex;
    align-items: center;
    color: #fff;
    font-size: 14px;
    list-style: none;
    text-decoration: none;
    font-weight: 400;
    letter-spacing: .01rem;
}

#sidebar ul li .sidebar-item.active,
#sidebar ul li .sidebar-item:hover {
    background-color: rgba(148, 54, 68, 0.8);
}

#sidebar ul li .sidebar-item i {
    margin-right: 6px;
}

.sidebar-grid {
    display: none;
    width: 340px;
    height: calc(100% - 110px);
    position: absolute;
    background-color: #383838;
    box-sizing: border-box;
    z-index: 999;
    padding-top: 52px;
}

.sidebar-grid > label {
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 20px;
    display: block;
    background-color: rgba(148, 54, 68, 0.8);
    color: #FFF;
    cursor: pointer;
}

.sidebar-grid > label span {
    font-size: 11px;
}

.sidebar-grid > label::after {
    display: inline-block;
    content: url(../img/icons/times_white.png);
    width: 20px;
    height: 18px;
    float: right;
    margin-left: 5px;
    top: -12px;
    right: 4px;
    position: relative;
}

.dash-section {
    background: #EEF3F6;
    flex-grow: 1;
    max-width: calc(100% - 200px);
    padding: 30px;
    display: none;
}

.monstre-dashboard {
    width: 100%;
}

.dash-section.active {
    display: block;
}

#automate-info {
    width: 100%;
    background: #FFF;
    border-radius: 3px;
    padding: 20px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}

#automate-info .info {
    width: 100%;
    flex: 1;
    padding-right: 10px;
}

#automate-info .info .name {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
}

#automate-info .info .address {
    margin: 4px 0 0 0;
    font-size: 14px;
    font-weight: 300;
}

#automate-info .actions {
    display: flex;
}

#automate-info button {
    margin-left: 5px;
    height: 43px;
    max-width: 220px;
}

#last-update,
.local-link {
    width: 100%;
    margin-top: 5px;
    background: #E5EAEE;
    border-radius: 3px;
    padding: 10px 20px;
    font-size: 13px;
    font-weight: 500;
    color: #565656;
}

#last-update p {
    margin: 0;
    font-size: 13px;
    font-weight: 500;
    color: #565656;
}

#last-update p b {
    margin-left: 3px;
    font-weight: 600;
}

#last-update p span {
    float: right;
    font-weight: 600;
}

#dashboard-historique .title {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
}

#dashboard-historique #historique {
    margin-top: 20px;
}

#dashboard-historique .update-item {
    background: #FFF;
    border-radius: 3px;
    margin-bottom: 5px;
    padding: 20px;
}

#dashboard-historique .update-item:first-of-type {
    border-left: 6px solid #813641;
}

#dashboard-historique .update-item p.name {
    margin: 0;
    font-size: 16px;
    font-weight: 500;
}

#dashboard-historique .update-item p.date {
    margin: 2px 0 0 0;
    font-size: 14px;
    font-weight: 500;
    color: #737373;
}

#dashboard-historique #historique .not-updated {
    width: 100%;
    margin-top: 0;
    background: #E5EAEE;
    border-radius: 3px;
    padding: 10px 20px;
    font-size: 13px;
    font-weight: 500;
    color: #565656;
}

.machine-settings .details {
    background: #FFF;
    border-radius: 4px;
    margin-bottom: 20px;
    padding: 2px 2px 2px 10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.machine-settings .details.info {
    justify-content: flex-start;
}

.machine-settings .details.info p {
    margin: 0;
}

.machine-settings .details button {
    width: 50px;
    height: 50px;
    margin-left: 10px;
    font-size: 20px;
    color: #a5a5b5;
    background: #eeeeee;
    padding: 13px;
    border: 0;
    border-radius: 4px;
    transition: all .2s ease;
    cursor: pointer;
    outline: none;
}

.machine-settings .details button.show,
.machine-settings .details button:hover {
    background-color:#943644;
    color: #FFF;
}

.machine-settings .details .detail p {
    padding: 0 10px;
    line-height: 50px;
    font-size: 12px;
    font-weight: 500;
    margin: 0;
    color: #a5a5b5;
}

.machine-settings form {
    display: none;
}

.form-zone > .zone.available {
    border: 3px solid rgba(148, 54, 68, 0.8);
}

.machine-settings form.show {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 4px;
    padding: 10px;
    background: #FFF;
    width: 100%;
}

.machine-settings > form > input {
    background: #f8fafc;
    border: 0;
    padding: 0 15px;
    border-radius: 5px;
    outline: 0;
    transition: .4s;
    font-weight: 500;
    height: 38px;
    line-height: 38px;
    font-size: 14px;
    width: calc(25% - 4px);
    margin-bottom: 4px;
}

.machine-settings > form > input[type="submit"] {
    background: var(--valide-color);
    color: #FFF;
    cursor: pointer;
    margin-left: auto;
}

.machine-settings > form > input[type="submit"]:hover {
    background: #179051;
}

#liste-menu .search {
    margin: 20px 20px 0;
    position: relative;
}

#liste-menu .search i {
    position: absolute;
    top: 11px;
    left: 14px;
    color: #a5a5a5;
}

#search-menu {
    width: 100%;
    padding: 10px 10px 12px 40px;
    border: 0;
    border-radius: 20px;
    font-size: 15px;
    outline: none;
    font-weight: 500;
}

#menus-liste {
    height: 58vh;
    margin: 10px 20px;
    box-sizing: border-box;
    overflow-y: scroll;
    background-color: #808080;
    border: 2px solid #080808;
    padding: 0;
}

#menus-liste::-webkit-scrollbar {
    width: 10px;
}

/* Track */
#menus-liste::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-left: 2px solid #f1f1f1;
}

/* Handle */
#menus-liste::-webkit-scrollbar-thumb {
    background: #888;
}

/* Handle on hover */
#menus-liste::-webkit-scrollbar-thumb:hover {
    background: #555;
}

#menus-liste .menu {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    border: 1px solid #000000;
    border-left: none;
    border-top: none;
    background-color: #21252B;
    cursor: pointer;
    position: relative;
    width: 286px;
}

#menus-liste .menu:last-of-type {
    border-bottom: 0;
}

#menus-liste .menu .menu-img{
    height: 60px;
    width: 60px;
    margin: 4px 10px 4px 4px;
    padding: 4px;
    box-sizing: border-box;
    border-radius: 3px;
    z-index: 200;
    background-size: cover;
    background-color: #813641;
    background-repeat: no-repeat;
    background-position: center;
}

#menus-liste .menu .menu-details {
    margin: 0;
    color: #FFF;
    line-height: 18px;
    font-size: 11px;
    font-family: Arial, sans-serif, sans-serif;
    flex-basis: 0;
    flex: 1;
    width: 100%;
}

#menus-liste .menu .menu-details p {
    margin: 0;
    font-size: 11px;
    font-weight: 600;
    font-family: arial;
    line-height: 17px;
    letter-spacing: .2px;
}

#menus-liste .menu .menu-details p.id {
    font-weight: 500;
    font-size: 10px;
    letter-spacing: normal;
    text-transform: uppercase;
}

#menus-liste .menu .menu-details p.id span {
    font-weight: 500;
    font-size: 10px;
    letter-spacing: normal;
    text-transform: uppercase;
    margin-left: 10px;
    font-family: arial;
    line-height: 17px;
}

.menu-layout {
    width: 100%;
    height: 100%;
    background: #eeeeee;
    border: 2px solid #ffffff;
    border-radius: 4px;
    overflow: hidden;
}

.menu-layout .menu-img {
    height: 100%;
    border-radius: 3px;
    background-color: #813641;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    transition: all 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.15);
    position: relative;
}

.menu-layout .menu-img span {
    display: none;
}

.admin-grid .menu-layout .menu-img span {
    display: block;
    z-index: 1000;
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 5px;
    font-size: 12px;
    font-weight: bold;
    background: #813641;
    color: #FFF;
}

.list-item .name span {
    padding: 5px;
    font-size: 12px;
    font-weight: bold;
    background: #813641;
    color: #FFF;
    margin-right: 6px;
}

.list-item .name {
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
}

.drag-helper {
    border: 2px solid #ddd;
    background: #21252B;
    border-radius: 50%;
    height: 14px;
    width: 14px;
    transition: all .1s ease;
    animation: dot-ripple 1s linear infinite;
}

@keyframes dot-ripple {
    to {
        opacity:0;
        transform:scale(3);
    }
}

.no-id {
    margin: 40px auto 20px;
    font-weight: 600;
    font-size: 20px;
    color: #943644;
}

.no-id a {
    width: 100px;
    margin: 20px auto;
}


#presets {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

#presets .btn {
    margin-right: 10px;
    outline: none;
    background-color: rgba(1, 92, 220, 0.70);
}

#presets .btn:disabled,
#presets .btn[disabled] {
    color: #a5a5a7;
    background-color: rgb(232, 232, 232);
    pointer-events: none;
}

#presets .btn i {
    margin-right: 5px;
}



/* ========================================================================== */
/* MODAL                                                                      */
/* ========================================================================== */

.modal {
    position: fixed;
    background-color: rgba(0, 0, 0, 0.7);
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 8999;
    visibility: hidden;
    opacity: 0;
    display: none;
    transition: all 0.3s;
    transition: opacity 0.3s linear 2s;
}

.modal.show {
    visibility: visible;
    opacity: 1;
    display: block;
    transition: opacity 0.3s linear 2s;
}

.modal-content {
    width: 870px;
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translate(-50%, 0);
    padding: 20px;
    border-radius: 3px;
    background: #ffffff;
}

.modal-close {
    color: #a5a6bc;
    font-weight: 500;
    font-size: 18px;
    float: right;
    text-align: center;
    line-height: 27px;
    top: 0;
    width: 90px;
    text-decoration: none;
}

.modal-close-rate {
    display: block;
    padding: 10px 15px;
    margin: 0;
    font-size: 20px;
    border-radius: 2px;
    border: 0;
    box-sizing: border-box;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 400;
    color: #FFFFFF;
    background-color: var(--main-color);
    text-align: center;
    position: relative;
    cursor: pointer;
}

.modal-close:hover {
    color: black;
}

.modal h2 {
    font-size: 24px;
    margin: 0 0 15px;
    font-weight: 500;
}

.modal-desc .modal-content .modal-header {
    padding: 2px 16px;
}

.modal-desc .modal-content {
    max-width: 500px;
    border-radius: 20px;
}

.modal-desc .modal-content .modal-header h2 {
    text-align: center;
    font-size: 22px;
    font-weight: 500;
    text-transform: uppercase;
    font-family: 'Abraham', arial;
    letter-spacing: 1.8px;
    color: var(--main-color);
    width: 100%;
}

#rate-modal .modal-content .modal-desc-close,
.modal-desc .modal-content .modal-desc-close {
    position: absolute;
    width: 36px;
    right: 12px;
    top: 11px;
    height: 36px;
    background: var(--main-color);
    color: white;
    border-radius: 26px;
    font-size: 34px;
    line-height: 37px;
    cursor: pointer;
    text-align: center;
    font-weight: 500;
}

.modal-desc .modal-content {
    -webkit-animation-name: fadeIn;
    -webkit-animation-duration: 0.4s;
    animation-name: fadeIn;
    animation-duration: 0.4s
}

@-webkit-keyframes fadeIn {
    from {opacity: 0}
    to {opacity: 1}
}

@keyframes fadeIn {
    from {opacity: 0}
    to {opacity: 1}
}

.modal-desc .modal-content .modal-body {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
}

.modal-desc .modal-content .modal-body img {
    width: 125px;
    height: 125px;
    margin: 10px auto 16px;
}

.modal-desc .modal-content .modal-body p {
    font-weight: 600;
    font-size: 17px;
    margin: 10px 0 24px;
    padding: 0 20px;
    font-family: 'Averta';
    color: #727373;
    text-align: justify;
}




/* ========================================================================== */
/* SLIDESHOW                                                                  */
/* ========================================================================== */

.presets-grids .mySlides {display: none}
.presets-grids img {vertical-align: middle;}

/* Slideshow container */
.presets-grids .slideshow-container {
    max-width: 1000px;
    position: relative;
    margin: auto;
}

.presets-grids .prev,
.presets-grids .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    padding: 16px;
    margin-top: -22px;
    color: white;
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
}

.presets-grids .next {
    right: 0;
    border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.presets-grids .prev:hover,
.presets-grids .next:hover {
    background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.presets-grids .text {
    color: #f2f2f2;
    font-size: 15px;
    padding: 8px 12px;
    position: absolute;
    bottom: 8px;
    width: 100%;
    text-align: center;
}

/* Number text (1/3 etc) */
.presets-grids .numbertext {
    color: #f2f2f2;
    font-size: 12px;
    padding: 8px 12px;
    position: absolute;
    top: 0;
}

/* The dots/bullets/indicators */
.presets-grids .dot {
    cursor: pointer;
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
}

.presets-grids .active,
.presets-grids .dot:hover {
    background-color: #717171;
}

/* Fading animation */
.presets-grids .fade {
    -webkit-animation-name: fade;
    -webkit-animation-duration: 1.5s;
    animation-name: fade;
    animation-duration: 1.5s;
}

@-webkit-keyframes fade {
    from {opacity: .4}
    to {opacity: 1}
}

@keyframes fade {
    from {opacity: .4}
    to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
    .prev, .next,.text {font-size: 11px}
}




/* ========================================================================== */
/* FOOTER                                                                     */
/* ========================================================================== */

.contact-area {
    width: 100%;
    border-bottom: 1px solid #353C46;
    padding: 60px 0;
    display: flex;
    flex-wrap: wrap;
}

.contact-area .container {
    max-width: 50%;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    position: relative;
}

.contact-area .container a {
    cursor: default;
}

.contact-area .container img {
    height: 84px;
}

.contact-area p {
    font-size: 13px;
    margin: 30px 0 60px;
    position: relative;
    text-align: center;
    font-weight: 400;
    line-height: 22px;
    color: #f1f1f1;
}

.contact-area p.titled {
    width: 100%;
    font-family: 'Abraham', arial;
    font-size: 30px;
    line-height: 32px;
    text-transform: uppercase;
}

.contact-area p::after {
    background: #8b9199;
    bottom: -30px;
    content: "";
    height: 1px;
    left: 50%;
    position: absolute;
    transform: translate(-50%);
    width: 80%;
}

.contact-area h6 {
    color: #8b9199;
    font-size: 13px;
    font-weight: 400;
    margin: 0 0 10px;
    width: 100%;
    text-align: center;
}

.contact-social {
    margin-top: 30px;
}

.contact-social > ul {
    display: inline-flex;
}

.contact-social ul li a {
    border: 1px solid #8b9199;
    color: #8b9199;
    display: inline-block;
    height: 40px;
    margin: 0 10px;
    padding-top: 7px;
    transition: all 0.4s ease 0s;
    width: 40px;
}

.contact-social ul li a:hover {
    border: 1px solid #FAB702;
    color: #FAB702;
}

.contact-area{
    background: #383838;
    color: #FFF;
}

/*.light-modal-body .slick-arrow {
	display : none!important;
}*/

.light-modal-body .slick-list {
    width: 100%!important;
}

.light-modal-body .slick-dots {
    display: flex!important;
    width: 100%;
    align-content: center;
    justify-content: center;
    padding: 0;
}

.light-modal-body .slick-dots li {
    list-style:none!important;
}

.light-modal-body .slick-dots li button {
    margin: 0 5px;
    border-radius: 50%;
    border: 0;
    background: #aed1b6;
    color: #aed1b6;
    content: "";
    width: 20px;
    height: 20px;
}

.light-modal-body .slick-dots li.slick-active button {
    background: #4b8458;
    color: #4b8458;
}

#rate-form {
    padding: 20px;
    display: flex;
    flex-direction: column;
}

.stars {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}

.star {
    width: 50px;
    height: 50px;
    font-size: 50px;
    margin: 0 6px;
    color: #ddd;
    cursor: pointer;
}

.star.active {
    color: #f5c518;
}

#rating-output {
    text-align: center;
    font-size: 14px;
    font-weight: 400;
    color: #888;
}

.rate-email,
.rate-comment {
    display: flex;
    flex-direction: column;
    margin-top: 5px;
}

.rate-email input {
    overflow: auto;
    resize: none;
    font-weight: 300;
    padding: 12px 10px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 14px;
    line-height: 18px;
    outline: none;
}

.rate-comment textarea {
    overflow: auto;
    resize: none;
    height: 160px;
    font-weight: 300;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 14px;
    line-height: 18px;
    outline: none;
}

#rate-char-count {
    color: #888;
    font-size: 12px;
    font-weight: 400;
    margin: 4px 0 0 auto;
}

.rate-footer {
    margin: 20px auto -5px auto;
    width: 100%;
    display: flex;
    flex-direction: row;
    gap: 10px;
    justify-content: flex-end;
    align-items: center;

}

.rate-footer button {
    width: 100px;
    border-radius: 4px;
    cursor: pointer;
}

.rate-footer button.modal-close-rate-btn {
    background-color: #ccc;
}

@media screen and (max-width: 769px) {
    .rate-footer button {
        width: 100%;
        margin-left: 0;
    }
}

footer {
    width: 100%;
    background: #222;
    color: #868c96;
}

footer a {
    width: 100%;
    text-align: center;
}

#qrcode {
    margin: 0px auto 30px;
    width: 100px;
    height: auto;
}

footer p {
    padding: 20px 0;
    font-size: 12px;
    font-weight: 500;
    margin: 0;
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

footer img {
    width: 44px;
}

footer img.lpj {
    display: inline-block;
    width: 26px;
    margin: 0 4px;
}



@media screen and (max-width: 1024px) {

    .charte {
        width: 100%;
    }

    .charte .section .text {
        width: 100%!important;
    }

    .charte .section .img,
    .charte .section > img {
        display: none!important;
    }

    .charte .section .text h3 {
        font-size: 40px;
        line-height: 44px;
    }

    .charte .section .text p {
        font-size: 18px!important;
        line-height: 20px!important;
    }

    #maison-etiquette {
        display: none!important;
    }

    .charte .section.smallPadding {
        padding: 40px 0 48px;
    }

    .parallax-background-container {
        max-height: 280px;
    }

    .step .allergenes p {
        font-size: 14px;
    }

    .step .allergenes .allergene {
        width: 25%;
    }
}


@media only screen and (max-width: 890px) {
    #login form,
    .simple-keyboard {
        display: none!important;
    }

    .warning-screen-size {
        display: block;
    }
}


@media only screen and (max-width: 1000px) {
    .nav-mobile {
        display: block;
    }

    nav {
        width: 100%;
        padding: 55px 0 15px!important;
    }
    nav ul {
        display: none;
        position: absolute;
        background: #727373;
        width: 100%;
        top: 113px;
        z-index: 1000;
    }
    nav ul.active {
        display: block;
    }
    nav ul li {
        float: none;
    }
    nav ul li a {
        padding: 15px;
        line-height: 20px;
    }
    nav ul li ul li a {
        padding-left: 30px;
    }

    .info-banner-container {
        padding: 20px 10px 0;
        width: 100%;
        margin: 0 auto;
    }

    #menus h2 {
        margin: 0 0 0 10px;
    }

    #menus .content {
        padding: 50px 10px 140px;
    }

    .slider button, .slick-arrow {
        display : none!important;
    }

    .slick-slider.carousel {
        padding: 80px 10px 0!important;
    }

    .slick-list {
        margin: 0 auto;
        width: calc(100% - 20px);
    }

    .instructions .content {
        padding: 0;
        max-width: 90%;
    }

    .instructions .steps > .step {
        padding: 40px 20px;
    }

    .instructions .steps > .step > .guide {
        padding: 0 40px;
    }

    .instructions .steps > .step > .guide p {
        margin: 2px 0 0;
    }

    .instructions .steps > .step > i {
        width: 40px;
        font-size: 40px;
    }

    .instructions .steps > .step > .explain {
        width: calc(100% - 60px);
    }

    .instructions .steps > .step > .explain p,
    .instructions .steps > .step > .explain h4 {
        margin : 0 0 0 10px;
    }

    .instructions .steps > .step > .explain h4 {
        font-size: 26px;
        line-height: 28px;
    }

    .step .allergenes .allergene {
        width: 33%;
    }

    .instructions .steps > .step > .count {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: var(--main-color);
        text-align: center;
        padding: 0;
        margin: 0 10px;
        font-size: 30px;
        font-family: 'Abraham', arial;
        line-height: 38px;
        color: #ffffff;
    }

    #footer-etiquette {
        display : none;
    }

    .slick-list {
        width: 100%!important;
    }
}

@media only screen and (max-width: 500px) {
    .charte .section .text h3 {
        font-size: 25px;
        line-height: 26px;
        text-align: center;
    }

    .charte .section .text p {
        font-size: 16px!important;
        line-height: 18px!important;
        text-align : center;
    }

    .section-bg {
        height: 210px;
    }

    .section-logo {
        background-size: 100%;
        background-position: 50% 30%;
    }

    .parallax-background-container {
        max-height: 200px;
    }

    .instructions .content {
        max-width: 90%!important;
    }

    .step .allergenes .allergene {
        width: 50%;
    }

    .charte h2,
    .instructions h2 {
        font-size: 40px;
        line-height: 42px;
    }

    .instructions .steps > .step > i,
    .instructions .steps > .step > .count {
        display: none;
    }

    .instructions .steps > .step > .explain {
        width: 100%;
    }

    .instructions .steps > .step > .explain p,
    .instructions .steps > .step > .explain h4 {
        text-align: center;
        margin: 0;
    }

    .instructions .steps > .step > .paiement {
        justify-content: center;
    }
}