.content {
    font-family: Muli, sans-serif;
    color: #808080;
}

.main-sidebar {
    background-color: #686f6b;
}

.main-header {
    height: 200px;
    background-size: cover;
    background-repeat: no-repeat;
}

.main-footer {
    background-color: #f8f8f8;
}

.main-header .navbar-nav .nav-item {
    font-family: Muli, sans-serif;
    text-transform: uppercase;
    color: white;
}

.main-header .navbar-nav .nav-item p.page-name {
    letter-spacing: 2px;
    font-weight: bold;
}

.main-header .navbar-nav .nav-item p.auth {
    letter-spacing: 1px;
    font-size: 12px;
    float: right;
}

[class*=sidebar-dark-] .sidebar a,
[class*=sidebar-dark-] .sidebar a table td {
    color: white;
    font-family: Muli, sans-serif;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-size: 14px;
}

.page-item.active .page-link {
    background-color: #686f6b;
    border-color: #686f6b;
}

.page-link, .page-link:hover {
    color: #686f6b;
}

.btn-secondary {
    background-color: #686f6b;
    border-color: #686f6b;
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active {
    background-color: #858c88;
    border-color: #858c88;
}

a {
    color: #231f20;
}

a:hover,
a:focus,
a:active {
    color: #686f6b;
}

.card-header {
    background-color: #808080;
    color: white;
    font-family: Muli, sans-serif;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 10px 20px;
}

.nav-link.logout {
    background-color: #f8f8f8;
    color: #808080 !important;
    transition: .3s;
}

.nav-link.logout:hover,
.nav-link.logout:focus,
.nav-link.logout:active {
    background-color: #c0c0c0 !important;
    color: #f8f8f8 !important;
}

.direct-chat-text {
    background: #808080;
    border: 1px solid #808080;
    color: white;
}

.direct-chat-text::after, .direct-chat-text::before {
    border-right-color: #808080;
}

.direct-chat-primary .right > .direct-chat-text {
    background: #f8f8f8;
    border-color: #f8f8f8;
    color: #808080;
}

.direct-chat-primary .right > .direct-chat-text::after, .direct-chat-primary .right > .direct-chat-text::before {
    border-left-color: #f8f8f8;
}

.custom-control-input:checked ~ .custom-control-label::before {
    color: #f8f8f8;
    border-color: #8AB290;
    background-color: #8AB290;
}

.custom-switch .custom-control-input:checked~.custom-control-label::after {
    background-color: white;
}

.page-title {
    font-family: Muli, sans-serif;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #808080;
}

.bg-wood {
    background-color: #d6d3c7;
    background-image: url(../img/wood.svg);
    background-size: cover;
    background-position: center;
}

.card-title {
    font-size: 16px;
}

table.table {
    font-size: 15px;
}

.pagination .page-link {
    padding: 5px 8px;
}

.login-page {
    background-size: cover;
    background-repeat: no-repeat;
}

.card-header,
.card-body,
.input-group-text,
.btn,
.small-box,
.alert,
.form-control {
    border-radius: 0;
}

.card {
    box-shadow: none;
}

.card-body {
    border: 0.5px solid #DDD7CD;
}


.card.orders .card-body {
    border-top: 0;
}

.btn-success {
    background-color: #8AB290;
    color: white;
    transition: .3s;
    border-color: #8AB290;
}

.btn-success:hover,
.btn-success:focus,
.btn-success:active,
.btn-success:hover {
    background-color: #688b6e;
    color: white;
    border-color: #688b6e;
}

.badge-success {
    background-color: #8AB290;
}

.direct-chat-img {
    border-radius: 0;
    height: auto;
    width: 40px;
}

.dataTable > thead {
    background-color: #686f6b;
    color: white;
}

.dataTable tbody .even {
    background-color: #F8F8F8;
}

.table-bordered,
.table-bordered th, .table-bordered td {
    border-left: none;
    border-right: none;
    border-top: none;
}

table.dataTable.no-footer {
    border-bottom: none;
}

#table_wrapper > .row:first-child {
    display: none;
}

.table-bordered thead td, .table-bordered thead th {
    border-bottom-width: 0;
}

table.dataTable {
    margin: 0 !important;
}

.dataTables_paginate,
.dataTables_info {
    margin: 30px 20px !important;
}

.nav-item.active a {
    background-color: #F8F8F8 !important;
    transition: .3s;
}

.wrapper .nav-tabs .nav-link.active {
    color: white;
    background-color: #686f6b;
    border-color: #686f6b #dee2e6 #686f6b;
}

.nav-item.active a:hover {
    background-color: #c1c1c1 !important;
}

.nav-tabs .nav-link {
    border-radius: 0 !important;
}

.bg-info {
    background-color: #6BA8B7 !important;
}

.bg-success {
    background-color: #8AB290 !important;
}

.bg-warning {
    background-color: #D5BF79 !important;
}

.bg-brown {
    background-color: #686f6b;
}

.bg-muted {
    background-color: #F8F8F8;
}

.small-box > .small-box-footer {
    transition: .3s;
}

.small-box {
    font-family: Muli, sans-serif;
}

.btn-info {
    background-color: #6BA8B7;
    color: white;
    transition: .3s;
    border-color: #6BA8B7;
}

.btn-info:hover,
.btn-info:focus,
.btn-info:active,
.btn-info:hover {
    background-color: #5b96a5;
    color: white;
    border-color: #5b96a5;
}

.alert-info {
    background-color: #6BA8B7;
    border-color: #6BA8B7;
}

form label {
    margin-bottom: 0;
    font-size: 14px;
}

a.db-link.active {
    font-weight: bold;
    color: #6BA8B7;
}

i.text-muted {
    color: #b1b1b1 !important;
}

a.underline:hover {
    text-decoration: underline;
}

.limit-width {
    width: 400px;
}

.navbar-light .navbar-nav .nav-link {
    background-color: white;
}

table.table-products tr td:first-child {
    padding-left: 2px !important;
}

table.table-products tr td:last-child {
    padding-right: 2px !important;
}

.badge-count {
    position: absolute !important;
    font-size: 10px;
    margin-top: -5px;
    margin-left: -2px;
    background-color: #FD7E14;
    color: white;
}

.wait {
    position: relative;
}

.wait.waiting:before{
    content: '';
    position: absolute;
    height: 100%;
    background-image: url(../img/wait.gif);
    background-size: contain;
    background-position: top right;
    background-repeat: no-repeat;
    width: 30px;
    right: 10px;
    top: 28px;
}

.orders {
    font-size: 15px;
}

.orders .statuses, .orders .results .row {
    padding: 10px 15px;
}

.orders .results {
    border: 1px solid rgba(0,0,0,.125);
}

.orders .results .row.extra {
    padding-top: 25px;
    display: none;
}

.orders .results .row.extra.open {
    display: flex;
}

.btn.rotate {
    transition: .3s;
}

.btn.rotate i {
    transform: rotate(180deg);
}