/* Media Queries */
@media screen and (min-width: 1650px) {

    .align-items-start{
        display:flex;
        align-items: start;
    }
    /* Plats */
    #view-plat{
        position: relative;
    }
    #view-plat>.swipe-overlay{
        background:transparent;
        position:absolute;
        width:100%;
        height:100%;
    }

    #view-plat {
        overflow: hidden;
    }

    .slide-leave-active,
    .slide-enter-active {
        transition: 100ms;
    }
    .slide-enter-from,
    .slide-leave-to {
        transform: translateX(30px);
        opacity: 0;
    }

    .plat-slider{
        overflow: hidden;
        position: relative;
        height: 200px;
        width: 400px;
    }

    .plat-slider .view-plat-container {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right:0;
        background:#fff;
    }

    .btn{
        height: 32px;
        width: 32px;
        border: none;
    }
    .valider{
        background: url("../images/valider.png");
        background-repeat: no-repeat;
        background-position: center;
        background-size: 30px;
    }
    .annuler{
        background: url("../images/annuler.png");
        background-repeat: no-repeat;
        background-position: center;
        background-size: 30px;
    }
    /* PWD */
    .show-hide-pwd{
        height: 32px;
        width: 32px;
        display: block;
        position: absolute;
        right: 1px;
        cursor: pointer;
    }
    .show-pwd{
        background: url("../images/btn-eye.png");
        background-repeat: no-repeat;
        background-size: 30px;
    }
    .hide-pwd{
        background: url("../images/btn-eye-closed.png");
        background-repeat: no-repeat;
        background-size: 32px;
    }

    ul#cgv-mentions-legals{
        list-style: none;
        width: fit-content;
        margin: 0px auto;
        padding: 0px;
    }
    ul#cgv-mentions-legals>li {
        display: inline-block;
        margin: 0px 10px;
    }

    .bg-white{
        background-color:#fff;
    }
    body{
        height: 100vh;
    }
    nav.fixed-sidebar>ul.menu-elements{
        margin-left:10px;
        padding-left:10px;
        margin-right:10px;
        padding-right:10px;
        font-size: 14px;
    }
    nav.fixed-sidebar>ul.menu-elements>li{
        position: relative;
        margin-bottom:10px
    }
    nav.fixed-sidebar>ul.menu-elements>li::after{
        content:'';
        height:1px;
        /* background:red; */
        position: absolute;
        bottom:-5px;
        left:0;
        right:0;
        border-top:1px dashed #000;
        /* border-style: dashed; */
    }
    nav.fixed-sidebar>ul.menu-elements>li>a{
        text-decoration: none;
        text-decoration: none;
        color:#000;
        font-weight: bold;
    }
    nav.fixed-sidebar>ul.menu-elements>li>a:hover{
        color:#000;
        text-decoration: underline;
    }
    nav.fixed-sidebar>ul.menu-elements>li.active>a{
        color:#000;
        text-decoration: underline;
    }
    nav.fixed-sidebar>ul.menu-elements>li>ul.sub-menu{
        margin-left:10px;
    }
    nav.fixed-sidebar>ul.menu-elements>li>ul.sub-menu>li{
        font-weight: bold;
        color:#000;
    }

    nav.fixed-sidebar>ul.menu-elements>li>ul.sub-menu>li.active
    {
        color:#B28B45;
        text-decoration: underline;
    }

    nav.fixed-sidebar>ul.menu-elements>li>ul.sub-menu>li>a,
    nav.fixed-sidebar>ul.menu-elements>li>ul.sub-menu>li>a:hover,
    nav.fixed-sidebar>ul.menu-elements>li>ul.sub-menu>li>a:focus{
        text-decoration: none;
        color:#000;
    }
    nav.fixed-sidebar>ul.menu-elements>li>ul.sub-menu>li.active>a,
    nav.fixed-sidebar>ul.menu-elements>li>ul.sub-menu>li>a:hover,
    nav.fixed-sidebar>ul.menu-elements>li>ul.sub-menu>li.active>a:focus{
        text-decoration: underline;
        color:#B28B45;
    }

    nav.fixed-sidebar>ul.menu-elements>li>ul.sub-menu{
        display: none;
    }

    nav.fixed-sidebar>ul.menu-elements>li.active>ul.sub-menu{
        display: block;
    }

    .center-alert-message{
        justify-content: center;
        display: flex!important;
    }
    div.menu-wrapper>div.two-lines-through{
        position: relative;
        height: 30px;
    }
    div.menu-wrapper>div.two-lines-through::before{
        content:'';
        position:absolute;
        height:3px;
        top:50%;
        transform: translateY(-50%);
        /* background-color: red; */
        left:0px;
        right:0px;
        border-top:1px solid #000;
        border-bottom:1px solid #000;
    }
    div.menu-wrapper>div.two-lines-through>div.title{
        position: absolute;
        height: 30px;
        left: 50%;
        transform: translateX(-50%);
        vertical-align: middle;
        line-height: 30px;
        min-width: 100px;
        color:#262863;
        cursor: pointer;
        font-size: 20px;
    }
    div.menu-wrapper.active>div.two-lines-through>div.title{
        color:#B28B45;
    }

    div.menu-wrapper>div.two-lines-through>div.title::before{
        content:'';
        position:absolute;
        height:30px;
        width:100px;
        top:0;
        /* transform: translateY(-50%); */
        background-color: #fff;
        left:-100px;
        background-image: url(../images/design2.png);
        background-repeat: no-repeat;
        background-position: center;
    }
    div.menu-wrapper>div.two-lines-through>div.title::after{
        content:'';
        position:absolute;
        height:30px;
        width:100px;
        top:0;
        /* transform: translateY(-50%); */
        background-color: #fff;
        right:-100px;
        background-image: url(../images/design.png);
        background-repeat: no-repeat;
        background-position: center;
    }

    div.menu-wrapper.active>div.two-lines-through>div.title::before{
        background-image: url(../images/design2-colored.png);
    }
    div.menu-wrapper.active>div.two-lines-through>div.title::after{
        background-image: url(../images/design-colored.png);
    }

    div.menu-wrapper>div.body{
        overflow-x: hidden;
        overflow-y: auto;
        transition: all .5s ease-in-out;

        height:auto;
        /* display: none; */
        max-height: 0px;
        padding-right:.5em;
        padding-left:.5em;
        /* transform:scaleY(0); */
        /* transform-origin: top; */
    }
    div.menu-wrapper.active>div.body{
        /* transform:scaleY(1); */
        /* height:auto; */
        /* display: block; */
        max-height: 400px;
    }
    .plat>.plat-description{
        display:none;

    }
    .plat.opened>.plat-description{
        display:block;

    }
    .plat.opened>.plat-header>.plat-title>.fa{
        transform: rotate(90deg);
    }
    .c-flag{
        display:inline-block;
        width:20px;
        /* background:gray; */
        /* border:1px solid #000; */
        margin-top:3px;
        margin-bottom:3px;
    }
    div.buttons>ul>li{
        position:relative;
    }
    #cc{
        margin-top:60px;
        background:#fbfbfb;
        position:absolute;
        right:0;
        left:0;
        height:0px;
        top:0;
        z-index: 1;
        transition: all .5s ease-in-out;
        overflow: hidden;
        padding:0px;
    }
    #cc.opened{
        height:500px;
        padding:20px;
    }
    .blue{
        color:#262863;
    }
    .capitalized{
        text-transform: capitalize;
    }
    .myscroll::-webkit-scrollbar{
        width: 8px;
        height: 8px;
    }
    .myscroll::-webkit-scrollbar-corner { background: rgba(0,0,0,0); }
    .myscroll::-webkit-scrollbar-thumb{
        background: #B28940;
        border-radius: 30px;
    }
    .myscroll::-webkit-scrollbar-thumb:hover{
        background: #b38434;
    }
    .myscroll::-webkit-scrollbar-track{
        background: #DBDBDB;
        border-radius: 30px;
        box-shadow: inset 0px 0px 0px 0px #F0F0F0;
    }
    div.formules-container>div.formule>div.formule-content>div.submenu>div.title-container{
        position: relative;
        height: 30px;
    }
    div.formules-container>div.formule>div.formule-content>div.submenu>div.title-container>div.title{
        position: absolute;
        height: 30px;
        left: 50%;
        transform: translateX(-50%);
        vertical-align: middle;
        line-height: 30px;
        min-width: 100px;
        color:#262863;
        cursor: pointer;
    }


    div.formules-container>div.formule>div.formule-content>div.submenu>div.title-container>div.title::before{
        content:'';
        position:absolute;
        height:30px;
        width:64px;
        top:0;
        /* transform: translateY(-50%); */
        background-color: #fff;
        left:-64px;
        background-image: url(../images/design2.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: 60px;
    }
    div.formules-container>div.formule>div.formule-content>div.submenu>div.title-container>div.title::after{
        content:'';
        position:absolute;
        height:30px;
        width:64px;
        top:0;
        /* transform: translateY(-50%); */
        background-color: #fff;
        right:-64px;
        background-image: url(../images/design.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: 60px;
    }

    .submenu-plat>.submenu-plat-description{
        display:none;

    }
    .submenu-plat.opened>.submenu-plat-description{
        display:block;

    }
    .submenu-plat.opened>.submenu-plat-header>.plat-title>.fa{
        transform: rotate(90deg);
    }
    div#page-body .menu-wrapper{
        margin: 20px auto;
    }
    div#page-body>div>.menu-wrapper>div.body>div.plat>div.plat-header{
        cursor: pointer;
    }
    div#page-body>div>.menu-wrapper>.body>.plat {
        margin-bottom: 10px;
        margin-top: 10px;
    }

}
@media screen and (min-width: 1300px) {

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

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

}
@media screen and (max-width: 1140px) {
    .multistepsform{
        width:100%;
        margin: 5px auto;
    }
    .form-container, .multistepsform>div>fieldset{
        width:90%;
        /*padding: 25px 10px;*/
    }
    .main-container{
        margin:0;
        max-width: 100%;
    }
    .fieldset-container{
        width: 100%;
        display: flex;
        justify-content: center;
    }
    .logo-container{
        width:100%;
    }
    .multistepsform #progressbar{
        margin-bottom: 0px;
    }
    .form-wrapper{
        display:flex;
        justify-content: center;
    }
    .form-header{
        margin-bottom: 10px;
    }
    div.mentions-legal{
        padding:2px 0px;
    }
    div#main{
        margin:auto 5px;
    }
    form .user-box{
        margin-top: 2px;
    }
    form .user-box input[type='submit'].size-lg, form .user-box input[type='button'].size-lg{
        padding: 5px 0px;
    }
    .multistepsform #progressbar li{
        width: 15px;
        height: 15px;
    }
    .multistepsform .fs-title{
        font-size: 12px;
        margin-bottom: 2px;
    }
    form .user-box input:focus ~ label, form .user-box input:valid ~ label, form .user-box input[value]:not([value=""]) ~ label{
        top:-20px;
    }
    /*form .user-box input[type='text'], form .user-box input[type='password']{
        margin-bottom: 10px;
    }*/
    .loyleek-dashbord-buttons-container{
        flex-direction: row;
        justify-content: center !important;
        align-items: center !important;
    }
    div.qr-container{
        padding: 10px 10px;
    }
    div.qr-left-text>p, div.qr-left-text>a.loyleek-link{
        font-size:10px;
    }
    div.qr-container div.left-texted-bar div.qr{
        margin-left: 26px;
    }
}
@media screen and (max-width: 991px) {

}
@media screen and (max-width: 970px) {
    
}
@media screen and (min-width: 768px) {

    table#mes-plats-table > tbody > tr:nth-of-type(even),
    table#list-cartes > tbody > tr,
    table#mes-categories-table > tbody > tr:nth-of-type(even){
        border-bottom: 1px dashed #5B9F8A;
    }
}

@media screen and (max-width: 918px) {
    .desktop-view-carte {
        display: none !important;
    }

    .desktop-view-carte-flex{
        display: none !important;
    }

    .mobile-view-carte{
        display: revert !important;
    }

    .custom-width-view-carte{
        width: 100%;
    }
}

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

    #nom-de-carte-user-box{
        width:100%;
    }
    .desktop{
        display: none !important;
    }
    .desktop-flex{
        display: none !important;
    }
    .desktop-block{
        display: none !important;
    }
    .align-set-category{
        padding-left: 15px;
    }
    .mobile{
        display: revert !important;
    }
    .sidebar{
        z-index: 999;
    }
    label.allergene-label{
        font-size: 12px;
    }
    div.row.row-reverse{
        display: flex;
        flex-direction: column-reverse;
    }
    span.text-bordered{
        border-left: 1px solid gray;
        /*  */
        padding: 0px 10px;
        white-space: nowrap;
    }
    span.text-bordered:last-of-type{
        border-right: 1px solid gray;
    }
    .center-in-mobile{
        justify-content: center !important;
    }
    .v--modal-box.v--modal{
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: 90% !important;
    }
    #mes-plats-lib-th{
        width:40%;
    }
    #mes-plats-cat-th,#mes-plats-all-th{
        width:15%;
    }
    #mes-plats-caract-th{
        width:30%;
    }
    #mes-plats-actions-th{
        width:0%;
    }
}
@media screen and (max-width: 700px) {

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

}
@media screen and (max-width: 575px) {
    .form-container, .multistepsform>div>fieldset{
        width:90%;
    }
}
@media screen and (max-width: 499px) {

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

@media screen and (max-width: 419px) {
    div#header > div.logo > div.buttons > ul > li > a > img,
    div#header > div.buttons > ul > li > a > img {
        width: 30px !important;
    }
    .largeLogo{
        display: none;
    }
    .smallLogo{
        display: block;
    }
}

@media screen and (min-width: 419px) {
    .largeLogo{
        display: block;
    }
    .smallLogo{
        display: none;
    }
}

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

    .icon-btn, .valider, .annuler, .btn{
        width: 30px!important;
        height: 30px!important;
        background-size: 30px!important;
    }
    div#header > div.logo > img,
    div#header > div.logo > a > img{
        width: 100px!important;
    }
}
@media screen and (max-width: 320px) {
    div.qr-container div.left-texted-bar::before{
        display:none;
    }
    div.qr-container div.left-texted-bar div.qr{
        margin-left:0;
    }
    div.qr-container div.left-texted-bar{
        border-left: 0;
    }

}
@media screen and (min-width: 50px) {

}
@media screen and (max-width: 687px) {
    #qrModal>div.modal-dialog{
        min-width: 75%;
        width: 75%;
        margin: auto;
    }
}
@media screen and (max-width: 800px) {
  .loyleek-dashbord-buttons-container{
    flex-direction: column;
    justify-content: center !important;
    align-items: center !important;
    width:50%;
  }
}

  @media screen and (max-width: 1140px) and (orientation: landscape) {
    .loyleek-dashbord-buttons-container{
      flex-direction: row;
      justify-content: space-around !important;
      align-items: center !important;
      width:100%;
    }
    .form-container, .multistepsform>div>fieldset{
        margin:auto;
    }
    form .user-box textarea#message{
        height:50px;
    }
      #qrModal>div.modal-dialog{
          min-width: 60%;
          width: 60%;
          margin: auto;
      }
  }
@media screen and (max-width: 1140px) and (orientation: portrait) {

    .w-mobile-100{
        width: 100%!important;
    }
    table#mes-plats-table>tbody>tr:nth-of-type(even),
    table#mes-categories-table>tbody>tr:nth-of-type(even){
        border-bottom: 1px dashed #5B9F8A!important;
    }
    table#mes-plats-table>tbody>tr:nth-of-type(odd),
    table#restaurants-table>tbody>tr:nth-of-type(odd),
    table#mes-categories-table>tbody>tr:nth-of-type(odd){
        border-bottom: 0px!important;
    }

    div.qr-container.disabled div.left-texted-bar{
        border-left:0px !important;
    }
    div.qr-container.disabled div.left-texted-bar::before{
        display:none;
    }
    /* mes plats */
    form#tri-form{
        width:100%;
    }
    form#mes-plats-search-form{
        width:100%;
    }

    p.pagination-title{
        padding:0px 10px;
        width: calc(100% - 90px);
    }

    #qrModal>div.modal-dialog{
        min-width: 60%;
        width: 60%;
        margin: auto;
    }
}