﻿/*#region SearchTags*/
.wrapper {
    background: #fff;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: nowrap;
    overflow-x: scroll;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
}
    .wrapper::-webkit-scrollbar {
        display: none
    }

    .wrapper:hover {
        cursor: pointer;
    }
.wrapper-cell {
    display: flex;
    margin: 0 30px;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
}

@keyframes placeHolderShimmer {
    0% {
        background-position: -468px 0
    }

    100% {
        background-position: 468px 0
    }
}

.animated-background {
    animation-duration: 1.25s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-name: placeHolderShimmer;
    animation-timing-function: linear;
    /*    background: #F6F6F6;
    background: linear-gradient(to right, #F6F6F6 8%, #F0F0F0 18%, #F6F6F6 33%);*/
    background: #e5e5e5;
    background: linear-gradient(to right, #dddbdb80 8%, #f1f1f196 18%, #dedcdc8c 33%);
    background-size: 800px 104px;
    height: 96px;
    position: relative;
}


.imageSearchTags {
    height: 115px;
    width: 115px;
    border-radius: 100px;
    @extend .animated-background;
}

.text {
    margin-left: 20px
}

.text-line {
    height: 10px;
    width: 118px;
    margin: 4px 0;
}

/*LOGO EMPTY INFO*/
.shake-vertical {
    animation: shake-vertical 20s linear both
}

@keyframes shake-vertical {
    0%,100% {
        transform: translateY(0)
    }

    10%,30%,50%,70% {
        transform: translateY(-8px)
    }

    20%,40%,60% {
        transform: translateY(8px)
    }

    80% {
        transform: translateY(6.4px)
    }

    90% {
        transform: translateY(-6.4px)
    }
}
/*LOGO EMPTY INFO*/
/*#endregion SearchTags*/

/*#region MENU*/
.wrapperMenu {
    background: #edeff4;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    flex-wrap: wrap;
}

.wrapper-cell-menu {
    display: flex;
    margin: 15px 30px;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
}

@keyframes placeHolderShimmer {
    0% {
        background-position: -468px 0
    }

    100% {
        background-position: 468px 0
    }
}

.animated-background-menu {
    animation-duration: 1.25s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-name: placeHolderShimmer;
    animation-timing-function: linear;
    /*    background: #F6F6F6;
    background: linear-gradient(to right, #F6F6F6 8%, #F0F0F0 18%, #F6F6F6 33%);*/
    background: #e5e5e5;
    background: linear-gradient(to right, #dddbdb80 8%, #f1f1f196 18%, #dedcdc8c 33%);
    background-size: 800px 104px;
    height: 96px;
    position: relative;
}


.imageLoader {
    height: 135px;
    width: 135px;
    border-radius: 7px;
    @extend .animated-background;
}
.content-line-menu {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
}
.text-line-title-menu {
    width: 98px;
    height:15px;
    margin-bottom: 18px;
}

.text-line-menu {
    height: 28px;
    width: 118px;
    margin: 4px;
    border-radius: 6px;
}
.text-line-btn-menu {
    height: 28px;
    width: 118px;
    margin: 4px;
    margin-top: 10px;
    border-radius: 6px;
}
.text-line-btn-menu-DineIn{
    display: none;
}
/*LOGO EMPTY INFO*/
.shake-vertical {
    animation: shake-vertical 20s linear both
}

@keyframes shake-vertical {
    0%,100% {
        transform: translateY(0)
    }

    10%,30%,50%,70% {
        transform: translateY(-8px)
    }

    20%,40%,60% {
        transform: translateY(8px)
    }

    80% {
        transform: translateY(6.4px)
    }

    90% {
        transform: translateY(-6.4px)
    }
}
/*LOGO EMPTY INFO*/
/*#endregion MENU*/