.ft-page-background {
	background: #ffffff;
}
/*------ Sidebar -------*/
.vs-sidebar {
	background: #fafafa;
	border-right: 1px solid #efefef;
}
.vs-sidebar--item {
	line-height: 30px;
}
.vs-sidebar--item a {
	color: rgba(0, 0, 0, 0.654);
	opacity: 1;
}
.vs-sidebar--group-items .vs-sidebar--item a {
	padding-left: 40px;
}
.vs-sidebar--item a:hover,
.vs-sidebar-item-active a,
.vs-sidebar-group-open h4  {
	color: #964628 !important;
	background: rgba(150, 70, 40, 0.1) !important;
}
.vs-sidebar-group h4 {
	padding: 10px 20px;
	padding-left: 40px;
	font-weight: normal;
}
.vs-sidebar-group .vs-sidebar-item-active a,
.vs-sidebar-group .vs-sidebar--item a {
	background: none !important;
}
.vs-sidebar-group h4,
.vs-sidebar--item a {
	font-size: 12px;
	color: rgba(0, 0, 0, 0.654);
}
.vs-sidebar-group .vs-sidebar--item a:hover,
.vs-sidebar-group .vs-sidebar-item-active a {
	background: none;
}
.vs-sidebar-group .vs-sidebar-item-active a {
	color: rgba(0, 0, 0, 0.654) !important;
}
.vs-sidebar-group .vs-sidebar--item a:hover,
.vs-sidebar-group .vs-sidebar-item-active a:hover {
	color: #964628 !important;
}
.vs-sidebar-group.vs-sidebar-group-open>ul {
	padding-left: 0;
}

.vuesax-app-is-ltr .vs-sidebar-primary .vs-sidebar-item-active {
	border-right: 0 !important;
	font-weight: normal;
}
.vs-sidebar {
	box-shadow: none;
}
.vs-sidebar--item a {
	padding: 5px 20px;
}
.ft-sidebar-top {
	border-bottom: 2px solid #efefef;
	padding-left: 15px;
	padding-right: 15px;
	box-sizing: border-box;
	top: 0;
	z-index: 9;
	background: #fafafa;
	width: 299px;
	position: fixed;
	height: 60px;
}
.ft-sidebar-top h3 {
	font-size: 24px;
	color: rgba(0, 0, 0, 0.654);
	font-weight: 500;
	font-family: inherit;
}
/*------ Icons ------*/
.vs-sidebar--item i.material-icons,
.vs-sidebar--item i.fa {
	font-size: 12px;
	margin-right: 8px;
}
.vs-sidebar-group h4 i:first-child {
	right: auto;
	left: 20px;
	top: 12px;
	font-size: 12px;
	transform: none !important;
	-webkit-transform: none !important;
}

/*------ Navbar ------*/
.vs-navbar {
	-webkit-box-shadow: none;
	box-shadow: none;
	border-bottom: 2px solid #efefef;
	position: fixed;
	top: 0;
	background: #ffffff;
	z-index: 500;
}
/*------ Alert ------*/
.ft-alert.danger .ft-alert-border {
	background-color: #dc3545 !important;;
} 
.ft-alert.danger .ft-alert-title {
	color: #dc3545 !important;;
}
.ft-alert.success .ft-alert-border {
	background-color: #28a745 !important;
} 
.ft-alert.success .ft-alert-title {
	color: #28a745 !important;;
}
.ft-alert.warning .ft-alert-border {
	background-color: #ffc107 !important;;
} 
.ft-alert.warning .ft-alert-title {
	color: #ffc107 !important;;
}
.ft-alert.info .ft-alert-border {
	background-color: #17a2b8 !important;;
} 
.ft-alert.info .ft-alert-title {
	color: #17a2b8 !important;;
}
/*---- Dropdown -----*/
button.vs-con-dropdown {
  cursor: pointer;
}
.vs-dropdown--menu .vs-dropdown--item {
  white-space: nowrap;
  border-radius: 0;
  margin-left: 0;
  margin-right: 0;
}
.vs-dropdown--menu .con-dropdown--group-con-ul {
  padding-left: 0;
  border-left: none;
} 
.vs-dropdown--menu .vs-dropdown--item .vs-dropdown--item-link {
	white-space: nowrap;
  padding-left: 15px;
  padding-right: 15px;
}
.vs-dropdown--menu .vs-dropdown--group.no-cascading > h3 {
  padding: 0 15px;
}

/*---- Dialog ------*/
.vs-dialog .vs-button {
	border-radius: 0px !important;
}
.con-vs-dialog .vs-dialog footer:before {
	width: 100%;
	margin-left: 0;
}

/*----- Button ------*/
button.btn-text.vs-button:disabled {
	opacity: 1.0;
	border: none;
	padding: 0;
}
.vs-button.paddless {
  padding: 5px 8px;
  border-radius: 2px;
  margin: 2px;
}
.vs-button.paddless i.vs-icon {
  font-size: 12px;
}

/*---- Notifications ------*/
.notif-badge {
	width: 8px;
	height: 8px;
	background: red;
	border-radius: 50%;
	position: absolute;
	right: 2px;
	top: 2px;
}
.notif-container {
	position: relative;
	margin-right: 10px;
}
.notif-wrap {
	position: absolute;
	top: 100%;
	padding-top: 15px;
	right: 0;
	width: 300px;
	transition: all .3s ease;
}
.notif-wrap-content {
	position: relative;
	background: #ffffff;
	border: 1px solid rgba(100, 100, 100, .4);
	box-shadow: 0 3px 8px rgba(0, 0, 0, .25);
}
.notif-wrap-content::after {
	content: '';
	width: 0;
	height: 0;
	position: absolute;
	top: -7px;
	right: 5px;
	border-left: 7px solid transparent;
	border-right: 7px solid transparent;
	border-bottom: 7px solid #6B9DE7;
}
.notif-title,
.notif-title-bg {
	padding: 5px 10px;
}
.notif-title-bg {
	background: #efefef;
	border-top: 1px solid #cccccc;
	border-bottom: 1px solid #cccccc;
	font-size: 11px;
}
.notif-content {
	max-height: 400px;
	min-height: 100px;
	overflow-y: scroll;
	list-style: none;
}
.notif-content li {
	padding: 10px;
	border-bottom: 1px solid #dddfe2;
	cursor: pointer;
}
.notif-content li:last-child {
	border-bottom: none;
}
.notif-content li.unread {
	background: rgba(150, 70, 40, 0.1);
}
.notif-content li:hover {
	background: rgba(0,0,0,.05);
}
.notif-content .notif-item-message {
	font-size: 12px;
}
.notif-content .notif-item-time {
	font-size: 11px;
	color: #333333;
}
.notif-empty {
	text-align: center;
	margin: 10px;
	font-size: 13px;
}
/*------ Notification Animations -------*/
.slide-fade-enter-active {
  transition: all .3s ease;
}
.slide-fade-leave-active {
  transition: all .2s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-to {
  transform: translateY(20px);
  opacity: 0;
}

/*----- Navbar ------*/
.navbar {
	-webkit-box-shadow: none;
	box-shadow: none;
	border-bottom: 2px solid #efefef;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 60px;
	background: #ffffff;
	z-index: 500;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
@media screen and (min-width: 920px) {
	.navbar {
		left: 300px;
	}
}
.navbar-left {
	display: flex;
	align-items: center;
}
.navbar-left .navbar-title {
	display: inline;
	font-size: 1.1em;
	vertical-align: middle;
	margin-left: 20px;
}
.navbar-left .btn-back + .navbar-title {
	margin-left: 10px;
}
.navbar .navbar-right {
	display: flex;
	align-items: center;
	padding-right: 20px;
}
.navbar-account {
	cursor: pointer;
}
.text-center {
	text-align: center;
}
/*---- Checkbox style ----*/
input[type=checkbox] + label {
	display: inline-block;
	cursor: pointer;
}
input[type=checkbox]:not(.default) {
	display: none;
}
input[type=checkbox] + label:before {
	content: '\2714';
	border: 1.5px solid #B4B4B4;
	border-radius: 2px;
	display: inline-block;
	width: 10px;
	height: 13px;
	padding-left: 0.2em;
	padding-right: 0.2em;
	padding-bottom: 0.3em;
	margin-right: 5px;
	vertical-align: bottom;
	color: transparent;
	transition: 0.2s;
}
input[type=checkbox] + label:active:before {
	transform: scale(0);
}
input[type=checkbox]:checked + label:before {
	background: #1D75FF;
	border-color: #1D75FF;
	color: #ffffff;
}
input[type=checkbox]:disabled + label:before {
	transform: scale(1);
	border-color: #aaaaaa;
}
input[type=checkbox]:checked:disabled + label:before {
	transform: scale(1);
	background: #bfbfbf;
	border-color: #bfbfbf;

}

/*----- Table -----*/
.vs-con-table.no-header .header-table {
	display: none;
}
.vs-con-table.no-header .vs-table--thead tr th:first-child {
	border-top-left-radius: 4px;
}
.vs-con-table.no-header .vs-table--thead tr th:last-child {
	border-top-right-radius: 4px;
}
.vs-table--tbody-table .tr-values td.td-pad-left {
	/*padding-left: 25px;*/
}
.vs-table--thead {
	white-space: nowrap;
}
.vs-table--thead tr {
	background: #efefef;
}
table.table {
	font-size: 12px;
}
table.table,
table.table tr th,
table.table tr td {
	border: 1px solid #666666;
	border-collapse: collapse;
}
table.table thead {
	background: #cccccc;
}
table.table tr.footer {
	background: #efefef;
}
/*---- Vuesax radio ----*/
.con-vs-radio.radio-inline {
	display: inline-flex;
	margin-right: 10px;
}
.con-vs-radio.radio-inline:last-child {
	margin-right: 0;
}
/*---- Login page ----*/
.vs-col:last-child {
	padding-bottom: 0;
}

/* vs card */
.con-vs-card.child-no-margin .vs-card--content {
	margin: 0;
}
.con-vs-card.child-no-padding .vs-card--content {
	padding: 0;
}
.con-vs-card.child-no-padding .vs-card--content > label {
	padding: 18px 14px;
	cursor: pointer;
	flex-wrap: unset;
}
/* Common */
.cursor-pointer {
	cursor: pointer;
}

/* event detail at order */
.table-order-detail {
	padding: 0;
	margin-bottom: 10px;
}
.table-order-detail td {
	padding: 0;
}
/* old order at order */
.old-orders-wrap {
	list-style: none;
}
.old-orders-wrap li {
	display: flex;
	padding: 8px 10px;
	background: #efefef;
	border-radius: 2px;
	justify-content: space-between;
	align-items: center;
	border-left: 3px solid #cccccc;
	margin-bottom: 2px;
}
.old-orders-wrap li:last-child {
	margin-bottom: 0;
}
.old-orders-wrap li button {
  margin-left: 10px;
  flex-shrink: 0;
}

.vs-tabs--content {
	padding: 10px 0 !important;
}

/* Filter date */
.filter-wrap {
	display: flex;
	flex-direction: row;
	align-items: center;
	margin-bottom: 20px;
}
.filter-wrap label {
	margin-right: 5px;
}
.filter-wrap .vdp-datepicker__calendar {
	z-index: 1000;
}
.filter-wrap .input-wrap {
	margin-right: 5px;
}
.filter-wrap .input-filter {
	padding: 3px 10px;
}

.full-width {
  display: block;
  width: 100%;
}

/* Improtant Order */
.important-order-table .my-input {
	padding: 8px;
	border: 1px solid #cccccc;
	border-radius: 4px;
}
.important-order-table .event-time {
  display: flex;
  align-items: center;
}
.important-order-table .event-time .time-separator {
  padding-left: 10px;
  padding-right: 10px;
}
.vs__search, .vs__search:focus,
.vs__selected-options {
	font-size: 14px;
}

/* New menu badge */
.vs-sidebar-group,
.vs-sidebar--item {
	position: relative;
}
.vs-sidebar-group .new-menu,
.vs-sidebar--item .new-menu {
	position: absolute;
	top: 5px;
	right: 5px;
	background: red;
	color: #ffffff;
	font-size: 10px;
	border-top-left-radius: 7px;
	border-top-right-radius: 7px;
	border-bottom-right-radius: 7px;
	padding: 2px 5px;
	line-height: initial;
}

/* Invoice */
.table-invoice-detail td {
	padding: 1px 5px;
}

/* Under Construction Message */
#app .under-construction-message {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	color: #31708f;
	background-color: #d9edf7;
	border: 1px solid #bce8f1;
	height: 80px;
	padding: 0 20px;
	overflow-y: scroll;
	z-index: 500;
}
#app .under-construction-message + #page-container .navbar,
#app .under-construction-message + #page-container .vs-sidebar,
#app .under-construction-message + #page-container .ft-sidebar-top {
	top: 80px;
}
#app .under-construction-message + #page-container .ft-page {
	margin-top: 140px !important;
}

/* Search */
.search-wrap {
	margin-bottom: 20px;
	display: flex;
	justify-content: center;
}
.search-wrap .in-search {
	padding: 8px 10px;
	border-radius: 20px;
	border: 1px solid #efefef;
}

/* Products image */
.item-menu-img-wrap {
	margin-bottom: 10px;
}
.item-menu-img-wrap img {
	width: 100%;
	height: 120px;
	object-fit: cover;
	border-radius: 5px;
	opacity: 0.95;
}
.item-menu-img-wrap img.img-order {
	border-bottom-right-radius: 0;
	border-bottom-left-radius: 0;
}
.item-menu-img-wrap img:hover {
	opacity: 1;
}

.form-group label {
	display: block;
}

.text-danger {
	color: #E7646E !important;
}

/* Others */
.no-padding-top {
	padding-top: 0 !important;
}
.nowrap {
	white-space: nowrap;
}

.sidebar-title {
	position: relative;
}
.p2m-info {
	position: absolute;
	font-size: 12px;
    line-height: 12px;
    top: -5px;
    left: calc(100% + 5px);
    background: blue;
    color: #ffffff;
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
    border-bottom-right-radius: 7px;
    padding: 2px 5px;
}

/*---- Avatar Icon ----*/
/*---- copied from custom.css ----*/
.avatar-icon {
	margin-right: 6px;
	height: 35px;
	width: 35px;
	background: rgb(189, 189, 189);
	border-radius: 50%;
  overflow: hidden;
}
.avatar-icon > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- */
/* vue-select */
/* ---------- */

.v-select .vs__dropdown-menu li {
  white-space: normal;
  line-height: 20px;
  padding-top: 5px;
  padding-bottom: 5px;
}
/* .v-select .vs__dropdown-menu li:not(:last-child) {
  margin-bottom: 10px;
} */
.v-select-btn-clear::before {
  content: '\2716';
  font-size: .8em;
  color: #444;
}
.vs__open-indicator {
  font-size: 9px;
  margin-top: 3px;
  color: #444;
}
.vs__dropdown-menu {
  border-top-style: solid!important;
}
.v-select.vs--single.v-select-single-line .vs__selected-options {
  max-width: inherit;
  overflow: hidden;
  flex-wrap: nowrap;
}
.v-select.vs--single.v-select-single-line .vs__selected {
  max-width: inherit;
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}