.w-35 {
    width: 35% !important;
}

.txt-red {
    color: #e21d23 !important;
}

.txt-orange {
    color: #ff7e00 !important;
}

.txt-red-hover:hover {
    color: #ba0001 !important;
}

.txt-link {
    color: #2074e2;
}

.txt-link:hover {
    color: #2074e2;
    text-decoration: underline;
}

.txt-gray-normal {
    color: #a5accd !important;
}

.txt-gray {
    color: #a5accd !important;
}

.txt-gray:hover,
.txt-active {
    color: #e81718 !important;
}

.btn-red {
    background-color: #e81718;
    color: #ffffff !important;
}

.btn-red:hover,
.btn-copy:hover {
    background-color: #ba0001;
    color: #ffffff;
}

.btn-red:focus {
    box-shadow: unset;
}

.btn-white {
    background-color: #ffffff;
}

.btn-white:hover .btn-icon {
    background-color: #ba0001;
    border-color: #ba0001;
}

.btn-white .btn-icon {
    color: #ffffff;
    background-color: #e21d23;
    border-color: #e21d23;
    width: 22px;
    height: 22px;
    margin-top: -3px;
}

.btn-gray {
    background-color: #f3f3f4;
    color: #a4a8b5
}

.bg-dark {
    background-color: #0f1327 !important;
}

.bg-red {
    border-radius: 5px;
    background-color: #e21d23;
}

.card-red {
    box-shadow: 0px 3px 2.9px 0.2px rgba(63, 77, 112, 0.1);
    background-image: linear-gradient(to top, #b8080e, #d1161c);
}

.copyright {
    position: absolute;
    bottom: 15px;
    left: 0px;
    right: 0px;
    margin-left: auto;
    margin-right: auto;
}

.avatar {
    width: 32px;
    height: 32px;
    padding: 0;
    background: linear-gradient(to right bottom, #841d23, #ec1d23);
    border: 0;
    border-radius: 50px !important;
}

.avatar svg {
    margin-top: -3px;
    color: #ffffff;
}

.nav-alert {
    background: none;
}

.table {
    background-color: #ffffff;
    border-radius: 15px;
    padding: 20px;
}

.table thead tr {
    background-color: #f7f8fa;
    height: 40px;
}

.badge-danger {
    color: #ee1f46 !important;
    background-color: #ffe7eb !important;
    padding: 7px 15px;
    border-radius: 20px;
    line-height: 11px;
}

.badge-info {
    color: #14bae4 !important;
    background-color: #d0f6ff !important;
    padding: 7px 15px;
    border-radius: 20px;
    line-height: 11px;
}

.badge-warning {
    color: #ff7e00 !important;
    background-color: #ffeddf !important;
    padding: 7px 15px;
    border-radius: 20px;
    line-height: 11px;
}

.badge-success {
    color: #31c971 !important;
    background-color: #cfffe3 !important;
    padding: 7px 15px;
    border-radius: 20px;
    line-height: 11px;
}

.badge-default {
    color: #a4a8b5 !important;
    background-color: #efefef !important;
    padding: 7px 15px;
    border-radius: 20px;
    line-height: 11px;
}

.badge-white {
    color: #2b3357 !important;
    background-color: #ffffff !important;
    border: solid 1px #e5e5e5;
    padding: 7px 15px;
    border-radius: 20px;
    line-height: 11px;
}

.badge-red {
    color: #ffffff !important;
    background-color: #e21d23 !important;
    padding: 7px 15px;
    border-radius: 20px;
    line-height: 11px;
}

.bg-danger {
    color: #ee1f46 !important;
    background-color: #ffe7eb !important;
    padding: 7px 15px;
    border-radius: 20px;
    line-height: 11px;
}

.badge-danger-noti {
    color: #ffffff !important;
    background-color: #e21d23 !important;
    padding: 5px 10px;
    border-radius: 10px;
    line-height: 10px;
}

a:hover,
a:active {
    outline: none;
    box-shadow: none !important;
}

.form-control:not(.is-valid):not(.is-invalid):focus {
    border-color: rgba(255, 36, 37, 0.8);
    box-shadow: rgba(255, 36, 37, 0.8);
}

.form-control:focus {
    box-shadow: 0 0 0 0.2rem rgb(255 36 37 / 25%);
}

.card {
    border-radius: 15px;
    padding: 20px;
}

.card-gray {
    background-image: linear-gradient(to right, #9199b3, #a6aec7);
}

.card-red {
    background-image: linear-gradient(to right, #b8080e, #d1161c);
}

.card-body-nopadding {
    padding: 0 1rem !important;
}

.btn-copy {
    box-shadow: 0 1px 2px rgb(0 0 0 / 5%);
}

.nav-link.nav-custom {
    border-radius: 8px;
    background-color: #ededf2 !important;
    color: #a0a3b2;
}

.nav-link.nav-custom:hover {
    background-color: #ba0001 !important;
    color: #ffffff !important;
}

.nav-link.nav-custom.active {
    background-color: #e21d23 !important;
    color: #ffffff !important;
}

.nav-link.nav-custom.active::before {
    width: 0;
    height: 0;
}

input.form-control,
.select2-selection {
    background-color: #f3f3f4 !important;
}

input[type="radio"] {
    accent-color: #e81718;
}

.light-status {
    color: #31c971;
    margin-right: 8px;
}

.dropdown-machine {
    background-color: #f3f3f4;
    border-radius: 50%;
    padding: 4px 8px 4px 8px;
}

.bg-gray {
    background-color: #f3f3f4;
}

.text-bold {
    font-weight: 400 !important;
}

.card-selected {
    border-color: rgba(255, 36, 37, 0.8) !important;
    border-width: 2px;
    box-shadow: 0px 3px 3px 1px rgb(226 29 35 / 50%);
}

.card-preorder-selected {
    border-color: rgba(255, 36, 37, 0.8) !important;
    border-width: 2px;
    box-shadow: 0px 3px 3px 1px rgb(226 29 35 / 50%);
}

.card-takeaway-selected {
    border-color: rgba(255, 36, 37, 0.8) !important;
    border-width: 2px;
    box-shadow: 0px 3px 3px 1px rgb(226 29 35 / 50%);
}

.delivery-service svg {
    margin-top: -3px;
}

.delivery-service .btn-success {
    background-color: #00c300;
}

.user-setting.avatar {
    width: 70px;
    height: 70px;
}

.user-setting.avatar svg {
    font-size: 35px;
}

.user-info {
    margin-left: 20px;
}

.user-info .badge-success {
    font-size: 9px;
    padding: 3px 8px;
}

#user-setting-topmenu .nav-item {
    width: 120px;
    text-align: center;
}

#user-setting-topmenu .nav-link {
    padding: 6px 5px 1px 5px;
}

@media (min-width: 992px) {
    .avatar.chevron:after {
        position: absolute;
        right: -10px;
        display: inline-block;
        width: 0;
        height: 0;
        margin-left: 0.255em;
        vertical-align: 0.255em;
        content: "";
        border-top: 0.3em solid;
        border-right: 0.3em solid transparent;
        border-bottom: 0;
        border-left: 0.3em solid transparent;
        color: #b8bdcb;
    }
}

.search {
    box-shadow: unset !important;
    border-radius: 10px;
}

.search:focus {
    background-color: #f3f3f4;
}

.btn-search {
    border-radius: 10px;
    margin-left: -8px;
}

.btn-search:hover {
    border: unset !important;
}


.flex-table {
    padding: 5px;
}

.flex-table-head {
    display: none;
    font-weight: bold;
    margin-bottom: 10px;
    background-color: #f7f8fa;
    padding: 10px 10px;
}

.flex-table-row {
    margin-bottom: 10px;
    padding: 6px 6px 12px 6px;
    border-bottom: 1px solid #f7f8fa;
}

.table-flex-column {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 5px 0px 5px 0px;
}

.table-flex-column .column-content {
    text-align: right;
}

.table-flex-column.column-more_info {
    justify-content: center;
    padding: 5px 0;
}

.column-head {
    font-weight: bold;
    color: #99a0ac !important;
    font-size: 12px;
}

.column-head,
.column-content {
    padding: 3px;
}

.card-custom {
    padding: 0;
}

.card-custom .card-header {
    padding-top: 22px;
}

.card-custom .card-header {
    border: unset;
}

.card-custom .card-body {
    padding: 0px 20px 0px 20px;
}

.page-item-custom {
    min-width: 40px;
    border-radius: 50% !important;
    text-align: center;
}

.btn-lang {
    width: 50px !important;
    min-width: 50px !important;
}

@keyframes placeHolderShimmer {
    0% {
        background-position: -468px 0
    }

    100% {
        background-position: 468px 0
    }
}

.animated-background-loading {
    animation-duration: 1s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-name: placeHolderShimmer;
    animation-timing-function: linear;
    background: #f6f7f8;
    background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
    background-size: 800px 104px;
    max-width: 100% !important;
    position: relative;
}

@media (min-width: 600px) {
    .table-flex-column {
        margin: 0px;
    }

    .flex-table-head {
        display: flex;
    }

    .flex-table-row {
        display: flex;
    }

    .flex-table-row .column-head {
        display: none;
    }

    .table-flex-column .column-content {
        text-align: left;
    }

    .table-flex-column.column-more_info {
        justify-content: start;
    }
}