@import url('https://fonts.googleapis.com/css?family=Oswald&display=swap');

@font-face {
  font-family: 'DegularDisplay Thin';
  src: url('https://ecatalogfiles.blob.core.windows.net/files/survey/font/DegularDisplay-Thin.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'DegularDisplay Light';
  src: url('https://ecatalogfiles.blob.core.windows.net/files/survey/font/DegularDisplay-Light.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'DegularDisplay Bold';
  src: url('https://ecatalogfiles.blob.core.windows.net/files/survey/font/DegularDisplay-Bold.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'DegularDisplay-Regular';
  src: url('https://ecatalogfiles.blob.core.windows.net/files/roadster/CustomFont/DegularDisplay-regular.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'DegularDisplayRoman';
  src: url('https://ecatalogfiles.blob.core.windows.net/files/roadster/CustomFont/DegularDisplay-Thin.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'DegularDisplayHeavy';
  src: url('https://ecatalogfiles.blob.core.windows.net/files/roadster/CustomFont/DegularDisplay-Bold.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

body, .tabs, .tab, .dropbtn, .dropdown-content, #menuitemstabs, .overlay {
    font-family: 'DegularDisplayHeavy' !important;
}

.menu-item-name, .menu-item-detail-name, .subcategory-title {
    font-family: 'DegularDisplayHeavy' !important;
    color: #444 !important;
}

.menu-item-price, .menu-item-detail-price {
    font-family: 'DegularDisplayHeavy' !important;
    color: #D09336 !important;
}

.menu-item-description, .menu-item-detail-description {
    font-family: 'DegularDisplayRoman' !important;
    color: #444 !important;
}

/* INCREASING BANNER HEIGHT */
body {
    overflow-y: hidden;
}

.carousel-inner .carousel-item.categories {
    height: 150px;
}

#banner {
    height: 150px;
}

#menu-title {
    top: 115px;
}

@media (max-width: 820px) {
    .menu-items {
        height: calc(100vh - 193px) !important;
    }
}

@media (max-width: 768px) {
    .menu-items {
        height: calc(100vh - 210px) !important;
    }
}

.menu-items {
    display: none;
    height: calc(100vh - 193px) !important;
    overflow-y: auto;
}

/* END INCREASING BANNER HEIGHT */

@media (max-width: 820px) {
    .image-container .image {
        flex: unset !important;
        margin: 20px !important;
        width: 100% !important;
    }

    .menu-items {
        height: calc(100vh - 143px);
    }

    .menu-item {
        display: flex !important;
        /* margin: 0px 0px 0px 0px !important; */
        /* border-bottom: 1px solid #ddd !important; */
        border: 1px solid #ddd !important;
        padding: 0px 0 10px 0 !important;
        flex-direction: column !important;
        width: unset !important;
        float: unset !important;
        height: unset !important;
    }

    .menu-item-image {
        margin-right: 0px !important;
        border-radius: 0px !important;
    }

    .menu-item-info {
        margin: 10px 15px 5px 15px !important;
    }
}

.menu-item-name, .tab {
    text-transform: uppercase;
}

/** Start Tab headers scroll */

.dropdown {
    display: none !important;
}

.tabs-container {
    overflow-x: auto !important;
}

.tabs {
    overflow-x: auto !important;
}

.tab {
    display: block !important;
}

/** End Tab headers scroll */

@media (max-width: 820px) {
    .category-page {
        overflow-x: hidden;
        overflow-y: auto;
        position: relative;
        left: 0px;
        top: 0px;
    }

    .category-page-header {
        height: 53px;
        background-color: #111111;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        border-bottom: 4px solid #8d0000;
    }

    .category-page-item {
        height: 130px;
        background-color: #8d0000;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        border-bottom: 4px solid #8d0000;
        width: unset !important;
        float: unset !important;
        margin-left: unset !important;
        margin-right: unset !important;
        border-radius: unset !important;
        margin-top: unset !important;
    }

    .category-page-item-span {
        top: 15px;
        left: 20px;
        color: white !important;
        justify-content: unset !important;
        margin: unset !important;
        position: absolute;
    }

    .category-page-item-image {
        border-radius: 0px !important;
    }

    .category-page-item-overlay {
        opacity: 0.2 !important;
    }

    .category-page-back-button-label, .back-button-label {
        left: 50px;
        /*text-shadow: -0.5px 0.5px 2px black;*/
        display: block;
    }
}

/* START DOCK MENU TO THE TOP OF THE PAGE */

.tabs.sticky {
    position: fixed;
    top: 0px !important;
    z-index: 99999;
}

.menu-items.sticky {
    margin-top: 43px;
}

#menuitemspage {
    overflow-y: auto !important;
}

body {
    overflow-y: auto !important;
}

.menu-items {
    height: unset !important;
}

/* END DOCK MENU TO THE TOP OF THE PAGE */

/* Start Dark Mode */

body, .content {
    background-color: #111 !important;
}

h5.title, .catalog-title {
    color: #eee !important;
}

.tabs, .tab, .dropbtn, .dropdown-content, .menu-item,
.menu-items, .overlay, .carousel-item,
.category-page-back-button-label, .back-button-label,
.category-page-item-span {
    background-color: #111 !important;
}

.tabs, .tab, .dropbtn, .dropdown-content, .menu-item,
.menu-items, .overlay, .carousel-item,
.category-page-back-button-label, .back-button-label,
.category-page-item-span {
    color: #eee !important;
}

.menu-item-name,
.menu-item-price,
.menu-item-description,
.menu-item-detail-name,
.menu-item-detail-price,
.menu-item-detail-description,
.subcategory-title {
    color: #eee !important;
}

.menu-item {
    border: 1px solid #777 !important;
}

.subcategory-title {
    border-bottom: 1px solid #777 !important;
}

.tab.selected-tab {
    background-color: #31703c !important;
    color: #111 !important;
}