.drawer-hamburger-icon,
.drawer-hamburger-icon::before,
.drawer-hamburger-icon::after {
    background-color: #6c757d;
}

.header-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.header-bar-left {
    position: absolute;
    left: 0;
}

.header-bar-right {
    position: absolute;
    right: 0;
}

#menu-user-avatar {
    max-width: 50px;
    max-height: 50px;
}

#snackImagesCarousel {
    max-width: 820px;
}

.container {
    width: 90%;
    max-width: 820px;
}

.offcanvas {
    height: 100vh;
}

.btn-twitter {
    background-color: #1d9bf0;
}

.btn-line {
    background-color: #00B900;
}

#barcode-scanner video {
    width: 100%;
}

canvas {
    width: 0px;
    height: 0px;
}

.snacks-img {
    position: relative;
    width: 100%;
}

.snacks-img:before {
    content: "";
    display: block;
    padding-top: 100%;
}

.snacks-img img {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    object-fit: cover;
}

.snack-img {
    position: relative;
    width: 100%;
}

.snack-img:before {
    content: "";
    display: block;
    padding-top: 50%;
}

.snack-img img {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    object-fit: contain;
}

.avatar-image {
    width: 12%;
}