:root {
    --menu-color: #292721;
}

body {
    padding-top: 100px;
    margin: 0;
    min-height: calc(100vh - 100px);
    position: relative;
}

* {
    box-sizing: border-box;
}

/* ::::::::::::::: images :::::::::::::::::::*/
.container-width-image {
    width: 100%;
    height: auto;
}

.container-height-image {
    width: auto;
    height: 100%;
}

.order-image {
    width: 100%;
    max-width: 150px;
    height: auto;
}

/* ::::::::::::::: theme :::::::::::::::::::*/
i:hover {
    color: #d2d32c;
}

.footer {
    left: 0;
    bottom: 0;
    width: 100%;
    position: absolute;
}

thead {
    font-weight: bold;
}

table.order td {
    padding: 5px;
}

table>thead {
    font-weight: bold !important;
}

.product-group {
    border-radius: 10px !important;
    border: var(--menu-color) solid 1px !important;
}

#cart-badge {
    background-color: #d2d32c;
    color: #000000;
}

td.center {
    text-align: center;
}

td.right {
    text-align: right;
}

td.middle {
    vertical-align: middle;
}

td.nowrap {
    white-space: nowrap;
}

.container-height {
    height: 100%;
}

select.form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
}

select {
    border-color: transparent !important;
    border-radius: 15em !important;
    background-color: var(--menu-color) !important;
    color: #ffffff !important;
    text-align: center;
}

input, textarea {
    border-radius: 15em !important;
    border-color: var(--menu-color) !important;
    text-align: center;
}

input.inline-edit {
    border: none !important;
    width: 100%;
}

.contact-link {
    text-decoration: none;
    color: inherit;
    font-weight: 500;
}

.theme-button {
    padding: 10px 15px;
    background-color: #d2d32c;
    color: #000000;
    border: 2px #d2d32c solid;
    border-radius: 15em;
    font-weight: 700;
    text-decoration: none;
}

.theme-button:hover {
    background-color: var(--menu-color);
    color: #d2d32c;
}

.theme-button-secondary {
    padding: 10px 15px;
    background-color: #ffffff;
    color: #000000;
    border: 2px var(--menu-color) solid;
    border-radius: 15em;
    font-weight: 700;
}

.theme-button-secondary:hover {
    background-color: var(--menu-color);
    color: #ffffff;
}

.toast-alert {
    border: 2px solid var(--menu-color);
    background-color: #ffffff;
    color: var(--menu-color);
}

/* ::::::::::::::: footer :::::::::::::::::::*/
footer {
    background-color: var(--menu-color);
    color: #ffffff;
}

/* ::::::::::::::: menu :::::::::::::::::::*/
nav {
    background-color: var(--menu-color);
    color: #ffffff;
    height: 100px;
}

.navbar-collapse>li {
    color: #ffffff;
}

.dropdown-menu {
    background-color: #292721;
}

nav div {
    background-color: var(--menu-color);
    width: 100%;
}

.nav-link {
    border: 2px var(--menu-color) solid;
}

.nav-link:hover {
    border-bottom: 2px #ffffff solid;
}

.nav-link, .dropdown-item {
    color: #ffffff !important;
}

.dropdown-item:hover {
    background-color: #ffffff;
    color: #000000 !important;
}

/* ::::::::::::::: scroll :::::::::::::::::::*/
::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--menu-color);
}

/* 
::-webkit-scrollbar-thumb:hover {
    background: #ffffff;
} */

::-webkit-scrollbar-corner {
    background-color: transparent;
}