html,
body {
	width: 100vw;
	height: 100vh;
	font-size: 1vw;
	margin: 0;
	padding: 0;
}

@font-face {
	font-family: 'Calibri';
	src: url(../fonts/Calibri.ttf);
}

@font-face {
	font-family: 'Prompt';
	src: url(../fonts/Prompt-Light.ttf);
}

body .ui-widget *,
body {
	font-family: 'Prompt' !important;
}

body[data-ref="scg"] .ui-widget *,
body[data-ref="scg"] {
	font-family: Tahoma !important;
}

#teemChatLogo {
	width: auto;
	height: 2vw;
}

#wellnessmarkLogo {
	position: absolute;
	top: 10px;
	left: 20px;
	width: 200px;
}

.overflow-x-hidden {
	overflow-x: hidden;
}

#fb_broadcast_menu>a.active,
#comment_menu>a.active {
	background-color: #f7f7f7 !important;
}

#intent_word_sel>div,
#intent_msg_sel>div {
	cursor: pointer;
}

.intent_msg {
	min-height: 2.5vw;
	padding: 0.5vw 1vw;
}

.intent_msg>div {
	border: 1px solid #ced4da;
	border-radius: 0.4vw;
	padding: 0.2vw 1vw;
}

.intent_msg>div.active {
	background-color: #f1f1f1 !important;
}

.intent_msg>div+div {
	margin-top: 0.5vw;
}

#navbarSupportedContent {
	flex-grow: inherit;
}

.modal-dialog {
	max-width: 40% !important;
}

.modal-dialog.modal-sm {
	max-width: 30% !important;
}

.modal-dialog.modal-md {
	max-width: 60% !important;
}

#colorModal>.modal-dialog {
	max-width: fit-content !important;
}

#topNav * {
	color: #fff;
}

.headerBg>.dropdown-item:hover {
	background-color: #949494;
}

.darkBg,
#db_navHeader,
.headerBg,
#navHeader {
	background-color: #424244 !important;
}

#db_navHeader,
#navHeader {
	height: 3.5vw;
}

#navMenu {
	background-color: #4fabb8;
	border-bottom: 0.2vw solid #424244;
}

body[data-ref="smartliving"] #navMenu {
	background-color: #d17193;
}

#navMenu .nav-item.active {
	border-bottom: 0.2vw solid yellow;
	margin-bottom: -0.2vw;
}

body.evrex #navMenu * {
	color: #424244;
}

body.evrex #navMenu {
	background-color: #afe389;
}

#main_menu_nav {
	border-radius: 10vw;
	background-color: #fff;
	margin: 0.2rem;
	font-size: 0.8rem;
}

#teemchat_menu {
	padding-left: 1.5rem;
	border-top-left-radius: 10vw;
	border-bottom-left-radius: 10vw;
}

#teemchat_menu.active {
	background-color: #4fabb840;
	border-bottom: none !important;
	margin-bottom: 0 !important;
}

#evrex_menu {
	padding-right: 1.5rem;
	border-top-right-radius: 10vw;
	border-bottom-right-radius: 10vw;
}

#evrex_menu.active {
	background-color: #afe38940;
	border-bottom: none !important;
	margin-bottom: 0 !important;
}

.yellowTxt {
	color: yellow;
}

.darkTxt,
body.evrex .eventCustom.active:not(.myBg) .grayTxt,
body.evrex .eventDiv.active:not(.myBg) .grayTxt,
#navMenu .nav-item.active>a {
	color: #424244;
}

body.evrex #navMenu .nav-item.active>a {
	font-weight: bold;
}

#menu .list-group-item,
#menu {
	background-color: #e8e8e8;
	border: none;
}

#mainPage>.container-fluid {
	overflow: hidden;
}

#menu .list-group-item.main_active,
#menu .list-group-item:hover {
	background-color: #d3d3d3;
}

#menu .list-group-item.active {
	background-color: #b2b2b2;
}

.imgProfile {
	width: 10vw;
	height: 10vw;
	object-fit: contain;
	border: 0.4vw solid #b9b9b9;
}

.blueBg {
	background-color: #c3e9ef;
}

.whiteBg {
	background-color: #fff;
}

.whiteTxt {
	color: #fff;
}

.btn-light {
	border-color: #ced4da !important;
	background-color: #fff !important;
}

.btn-light:hover {
	background-color: #f5f5f5 !important;
}

.grayTxt {
	color: #bcbcbc;
}

.grayBg {
	background-color: #ededed;
}

.grayBg-im {
	background-color: gray !important;
}

.myBg {
	background-color: #4fabb8 !important;
}

body.evrex .myBg {
	background-color: #afe389 !important;
}

body.evrex button.myBg {
	color: #424244;
	border-color: #afe389;
}

#langSel>a.active,
.myTxt {
	color: #4fabb8 !important;
}

body.evrex .myTxt {
	color: #307100 !important;
}

.w-1vw {
	width: 1vw;
}

.w-1-2vw {
	width: 1.2vw;
}

.w-1-5vw {
	width: 1.5vw;
}

.w-2vw {
	width: 2vw;
}

.w-3vw {
	width: 3vw;
}

.wh-4vw {
	width: 4vw;
	height: 4vw;
	object-fit: contain;
}

.w-5vw {
	width: 5vw;
}

.wh-5vw {
	width: 5vw;
	height: 5vw;
	object-fit: contain;
}

.w-6vw {
	width: 6vw;
}

.wh-6vw {
	width: 6vw;
	height: 6vw;
	object-fit: contain;
}

.h-6vw {
	height: 6vw;
}

.w-7vw {
	width: 7vw;
}

.product-ellipsis {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	text-overflow: ellipsis;
	overflow: hidden;
	height: 3.7vw;
	cursor: pointer;
}

.selectpicker+button,
.w-10vw {
	width: 10vw !important;
}

.h-2-5vw {
	height: 2.5vw;
}

.h-3vw {
	height: 3vw;
}

.txtOnInputR,
.searchIcon {
	position: relative;
}

.txtOnInputR>span,
.searchIcon>img {
	position: absolute;
	width: 1vw;
	top: 50%;
	right: 0.5vw;
	transform: translateY(-50%);
	z-index: 2;
}

/*.txtOnInputR > .form-control,*/
.searchIcon>.form-control {
	padding-right: 2vw;
}

.center-fit {
	width: 100vw;
	height: 100vh;
	background: #424244;
	display: flex;
	justify-content: center;
	align-items: center;
}

#beteemLogo {
	position: absolute;
	top: 2vw;
	left: 2vw;
	width: 5vw;
}

#guestChatDiv {
	position: absolute;
	bottom: 3vw;
	right: 3vw;
	width: 20vw;
	height: 50vh;
	background-color: #fff;
	border-radius: 0.5vw;
	display: flex;
	flex-direction: column;
}

#chatHeader {
	height: 5vh;
	background-color: #4fabb8;
	border-top-left-radius: 0.5vw;
	border-top-right-radius: 0.5vw;
	padding: 0 0.5vw;
	font-size: 1.2vw;
	cursor: pointer;
}

.exportFileIcon,
#chatHeader>div.close {
	font-size: 2.5vw;
	cursor: pointer;
}

#chatBody {
	height: 100%;
	overflow-y: auto;
	padding: 0.5vw;
	display: flex;
	flex-direction: column;
}

#chatBody>div {
	margin: 0.5vw 0;
	display: flex;
	align-items: flex-end;
}

#chatBody>div.sale {
	justify-content: flex-end;
}

div.msg {
	word-wrap: break-word;
	max-width: 65%;
	width: fit-content;
}

div.time+div.msg,
div.msg+div.time {
	margin-left: 0.2vw;
}

#chatBody>div.guest>div.time,
#chatBody>div.sale>div.time {
	color: #424244;
	font-size: 0.8vw;
}

#chatBody>div.guest>div.msg,
#chatBody>div.sale>div.msg {
	padding: 0.5vw 1vw;
	border-radius: 0.5vw;
	color: #424244;
	font-size: 1vw;
	max-width: 70%;
	word-wrap: break-word;
}

#chatBody>div.guest>div.msg {
	background-color: #e0e0e0;
}

#chatBody>div.sale>div.msg {
	background-color: #99d9e2;
}

#chatIcon {
	position: absolute;
	bottom: 2vw;
	right: 1vw;
	width: 3vw;
	cursor: pointer;
	box-shadow: 0.1rem 0.1rem 1rem 0.2rem #424244;
	border-radius: 50%;
}

#chatIcon>img {
	width: 100%;
}

#loginIcon {
	position: absolute;
	top: 2vw;
	right: 2vw;
	width: 5vw;
	cursor: pointer;
}

#teemchatLogo {
	width: 35vw;
}

#otpForm .modal-content,
#loginForm .modal-content {
	background-color: #424244;
	padding: 5vw 3vw;
	border-radius: 1.5vw;
	box-shadow: 0.1rem 0.1rem 1rem 0.2rem #fff;
}

#otpForm>.modal-dialog,
#userDataModal>.modal-dialog,
#userModal>.modal-dialog,
#loginForm>.modal-dialog {
	max-width: 30% !important;
}

.modal-content {
	padding: 1vw;
	border-radius: 1.5vw;
}

#otpForm *,
#loginForm * {
	font-size: 1vw;
}

.placeholderWhite::placeholder {
	color: #fff;
	opacity: 1;
	/* Firefox */
}

.placeholderWhite:-ms-input-placeholder {
	/* Internet Explorer 10-11 */
	color: #fff;
}

.placeholderWhite::-ms-input-placeholder {
	/* Microsoft Edge */
	color: #fff;
}

#userProfileData,
#custProfileData,
.userDataDiv:not(svg) {
	width: 27%;
}

#userMsgData>div {
	overflow-y: auto;
}

.rounded-border,
.saleList {
	border-radius: 0.4vw;
}

.eventCustom,
.eventToggle,
.eventDiv {
	border-radius: 0.4vw;
	cursor: pointer;
}

.eventCustom.myBg:hover,
.eventToggle.myBg:hover,
.eventDiv.myBg:hover {
	background-color: #32696c !important;
}

.eventCustom.myBg.active,
.eventToggle.myBg.active,
.eventDiv.myBg.active {
	background-color: #32696c !important;
}

body.evrex .eventCustom.myBg:hover,
body.evrex .eventDiv.myBg:hover {
	background-color: #307100 !important;
}

body.evrex .eventCustom.myBg.active,
body.evrex .eventDiv.myBg.active {
	background-color: #3f8e05 !important;
}

.eventCustom:not(.myBg):hover,
.eventToggle:not(.myBg):hover,
.eventDiv:not(.myBg):hover {
	background-color: #f1f1f1 !important;
}

.eventCustom.active:not(.myBg),
.mkp_product_list.active,
.eventToggle.active:not(.myBg),
.eventDiv.active:not(.myBg) {
	background-color: #f1f1f1 !important;
}

body.evrex .eventCustom.active:not(.myBg),
body.evrex .eventDiv.active:not(.myBg) {
	background-color: #afe389 !important;
}

#editDiv {
	position: relative;
}

#editDiv>button {
	position: absolute;
	top: 0;
	right: -3vw;
}

#profileSetting div.form-row {
	line-height: 2.5;
}

.font-09vw,
#profileDiv {
	font-size: 0.9vw;
}

.lineHeight3 {
	line-height: 2.5
}

#grpColorShow,
.grpColorDisplay {
	width: 10vw;
	height: 10vw;
	border-radius: 50%;
}

.modal.modal-static .modal-dialog {
	-webkit-transform: none !important;
	transform: none !important;
}

/*----------------------------------------------------------------------------*/
.height100 {
	height: 100%;
}

.width100 {
	width: 100%;
}

.width0 {
	width: 0;
}

.width80 {
	width: 80% !important;
}

.width70 {
	width: 70%;
}

.width60 {
	width: 60%;
}

.width12 {
	width: 12%;
}

.width10 {
	width: 10%;
}

.width15 {
	width: 15%;
}

.width20 {
	width: 20%;
}

.width30 {
	width: 30%;
}

.width35 {
	width: 35%;
}

.width40 {
	width: 40%;
}

.width50 {
	width: 50%;
}

.fitCtn {
	width: 1%;
}

select.smallPaddingInput,
.widthFit {
	width: fit-content;
}

.width-fit {
	width: fit-content !important;
}

#dueDateDiv>div {
	width: 21vw;
	float: right;
	align-items: center;
}

#dueDateDiv input {
	padding: 2.5px 5px !important;
	height: auto;
}

#dueDateDiv select {
	padding: 1px 5px !important;
	height: auto;
}

#main {
	padding: 0 0 0 20%;
	width: 100%;
	overflow-y: auto;
	word-break: break-word;
}

#sidebar {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	padding: 0;
	background-color: #000;
	max-width: 20%;
	width: fit-content;
}

.imgTrigger,
.invisible {
	opacity: 0;
}

.disEdit input[type=checkbox]:not(.canEdit),
.disEdit input[type=radio]:not(.canEdit) {
	opacity: 0.7;
}

.disEdit input:not(.canEdit),
.disEdit select {
	cursor: default;
	pointer-events: none;
	background-color: #e9ecef;
}

body:not(.mobile) .shMobile,
body.mobile .hideMobile,
body.evrex .hideEvrex,
body:not(.evrex) .hideTeemchat,
.shPrintRow,
.shPrint,
.disEdit .hideEdit,
.disEdit #saveDocBtn,
.disEdit #ccDocBtn,
.divContent.edit #editDocBtn,
.divContent.edit #tallyBtn,
.divContent.edit #endJobDiv,
.hideObj,
.weightTB:not(.active)>td>svg,
#bodyDiv.hideM .subMenu,
#bodyDiv.hideM .detail {
	display: none !important;
}

#bodyDiv.hideM #sidebar {
	width: 6vw;
	text-align: center;
}

#bodyDiv.hideM #main {
	padding-left: 6vw;
}

#bodyDiv.hideM #logo>div {
	font-size: 1vw;
}

#sidebar * {
	color: #aaa;
}

#sidebar-sticky {
	position: relative;
	top: 0;
	height: 100vh;
	overflow-x: hidden;
	overflow-y: auto;
}

#sidebar .nav-link svg {
	font-size: 1.7vw;
}

#sidebar .nav-link span+span {
	margin-left: 0.7vw;
}

#sidebar .nav-link span {
	font-weight: 500;
}

#sidebar .nav-link:hover * {
	color: #fff;
}

#sidebar .nav-link:hover {
	background-color: #2d2d2d;
}

.subMenu.active .nav-item.active *,
#sidebar .nav-item.active:not(.notToggle)>.nav-link * {
	color: #00ff00 !important;
}

.subMenu.active,
#sidebar .nav-item.active {
	background-color: #444;
}

#sidebar-sticky>ul {
	margin-top: 2vw;
	font-size: 1.2vw;
}

#logo {
	padding: 2vw 1vw 0.5vw;
	text-align: center;
}

#logo>img {
	width: 70%;
}

#logo>div {
	font-weight: bold;
	color: #fff;
	font-size: 2vw;
	word-wrap: break-word;
	cursor: pointer;
	text-shadow: 2px 2px gray;
}

#logo>div:hover {
	text-shadow: -2px -2px gray;
}

.alignC {
	text-align: center !important;
}

.alignR {
	text-align: right !important;
}

.alignL {
	text-align: left !important;
}

.pull-right {
	float: right;
}

.pull-left {
	float: left;
}

#toggleIcon {
	position: sticky;
	bottom: 0;
	width: calc(100% - 2px);
	background-color: #000;
	margin: 2vw 1px;
	border: 1px solid;
}

#mainHeader {
	border-bottom: 0.2vw solid #00bb90;
	margin: 1vw 1vw 0;
	width: calc(100% - 2vw);
	position: relative;
	height: 3vw;
}

#mainHeader>#title {
	font-size: 2vw;
	color: #00bb90;
	font-weight: bold;
}

#userMenu {
	position: absolute;
	top: 0;
	right: 0;
	cursor: pointer;
	height: 3vw;
	display: flex;
	align-items: center;
}

#userMenu>div+div {
	margin-left: 1vw;
}

.user {
	font-size: 2.4vw;
	color: gray;
}

.user span.name {
	font-size: 1.3vw;
}

.langSel>img {
	width: 2.8vw;
}

.divContent {
	border: 1px solid #00bb90;
	height: 100%;
	padding: 2vw;
	background-color: #f2fff2;
	position: relative;
}

.custom-tab .tab-content,
#tagCodeTab .tab-content,
#inOutManageDiv .tab-content {
	border-left: 1px solid #00bb90;
	border-right: 1px solid #00bb90;
	border-bottom: 1px solid #00bb90;
	height: calc(100% - 4vw);
	padding: 2vw;
	background-color: #f2fff2;
}

.custom-tab .nav-tabs,
#tagCodeTab .nav-tabs,
#inOutManageDiv .nav-tabs {
	border-bottom: 1px solid #00bb90;
}

.custom-tab .nav-link,
#tagCodeTab .nav-link,
#inOutManageDiv .nav-link {
	border-color: #00bb90 !important;
}

.custom-tab .nav-link.active,
#tagCodeTab .nav-link.active,
#inOutManageDiv .nav-link.active {
	border-bottom-color: #f2fff2 !important;
	background-color: #f2fff2;
}

.selectStyle {
	border: 1px solid #ced4da;
	background-color: #fff;
}

.selectStyle:hover {
	background-color: #efefef;
}

.inline {
	display: inline;
}

.form-control[readonly] {
	background-color: #fff;
}

.tmpForm {
	border: 1px solid #00bb90;
	border-radius: 3px;
	padding: 2vw 0 1.5vw;
}

.tmpForm+.tmpForm {
	margin-top: 1vw;
}

.tmpOp {
	background-color: #ffffbb;
	padding-top: 1rem;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.smallInput {
	width: 100px !important;
}

.mediumInput {
	width: 150px !important;
}

.table-data {
	width: 100%;
}

.table-data>tbody>tr>th {
	width: 35%;
}

.custom-table {
	width: 100% !important;
}

.rem08,
.fixed-table-pagination *,
.custom-table *:not(.svg-inline--fa),
.custom-table {
	font-size: 0.8rem;
}

.custom-table * {
	text-align: center;
}

.custom-table .bootstrap-select {
	padding: 0 !important;
}

.custom-table .bootstrap-select * {
	text-align: left;
}

.curPoint {
	cursor: pointer;
}

.btnn-green {
	color: #28a745;
}

.text-soft-red {
	color: #ff8080;
}

.redTxt,
.btnn-red {
	color: red;
}

.btnn-orange {
	color: orange;
}

.btnn-gray {
	color: gray;
}

.nowrapTable th,
.nowrapTable td,
.nowrap,
.custom-table th {
	white-space: nowrap;
}

.custom-table th.date {
	width: 130px;
}

.custom-table th.num {
	width: 100px;
}

.custom-table th.file {
	width: 60px;
}

.custom-table th.product {
	width: 300px;
}

.custom-table:not(.reportTable)>tbody>tr:nth-child(odd) {
	background-color: #ffffe6;
}

.custom-table:not(.reportTable)>tbody>tr:nth-child(even) {
	background-color: #ffe6ff;
}

#logData {
	overflow: auto;
}

.buySaleTable {
	white-space: nowrap;
	font-size: 0.7vw;
}

.buySaleTable th,
.buySaleTable td {
	border: 1px solid #000;
}

.coupleRowTable>tbody>tr:nth-child(4n+3),
.coupleRowTable>tbody>tr:nth-child(4n+4) {
	background-color: #ffffe6 !important;
}

.coupleRowTable>tbody>tr:nth-child(4n+1),
.coupleRowTable>tbody>tr:nth-child(4n+2) {
	background-color: #ffe6ff !important;
}

tr.detail-view,
.custom-table:not(.reportTable)>thead>tr,
.custom-table:not(.reportTable)>tbody>tr.grayRow {
	background-color: #efefef !important;
}

.custom-table th,
.custom-table td {
	padding: 3px;
}

.col-12.bootstrap-select {
	padding: 0;
}

.outline-border {
	border: 1px solid #ccc;
	border-radius: 3px;
	padding: 1vw;
}

label.btn {
	cursor: pointer;
	margin-bottom: 0;
}

::-webkit-scrollbar-track {
	-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
	border-radius: 10px;
	background-color: #f5f5f5;
}

::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}

::-webkit-scrollbar-thumb {
	border-radius: 10px;
	background-color: #ccc;
	-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

.c-popup,
.overlay,
#overlay {
	z-index: 2000;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	position: absolute;
	background-color: rgba(0, 0, 0, 0.5);
}

.c-popup {
	position: fixed;
}

.overlay.white,
#overlay.white {
	background-color: rgba(0, 0, 0, 0);
}

#chatHisOverlay {
	background-color: rgba(0, 0, 0, 0.2);
}

#loader {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 5000;
	margin: -60px 0 0 -60px;
	border: 16px solid #f3f3f3;
	border-radius: 50%;
	border-top: 16px solid rgba(84, 198, 255, 1);
	width: 120px;
	height: 120px;
	-webkit-animation: spin 2s linear infinite;
	animation: spin 2s linear infinite;
}

.loader-sm,
#loader-sm {
	z-index: 1000;
	margin: auto;
	border: 0.4vw solid #f3f3f3;
	border-radius: 50%;
	border-top: 0.4vw solid rgba(84, 198, 255, 1);
	width: 3vw;
	height: 3vw;
	-webkit-animation: spin 2s linear infinite;
	animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
	0% {
		-webkit-transform: rotate(0deg);
	}

	100% {
		-webkit-transform: rotate(360deg);
	}
}

@keyframes spin {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

.col-form-label {
	white-space: nowrap;
}

#productForm {
	position: relative;
}

.subtext {
	font-size: 1.2vw;
	color: gray;
}

#scale {
	border: 1px solid #00bb90;
	background-color: #f2fff2;
	width: 50%;
	min-width: 200px;
	padding: 1vw;
	text-align: center;
}

.font-1vw {
	font-size: 1vw;
}

.font-1-2vw {
	font-size: 1.2vw;
}

.font-1-5vw {
	font-size: 1.5vw !important;
}

.font-1-8-vw {
	font-size: 1.8vw;
}

.font-1-5vh {
	font-size: 1.5vh;
}

.font-2vh {
	font-size: 2vh;
}

.font-2-4vh {
	font-size: 2.4vh;
}

.font-2vw,
#scale>div {
	font-size: 2vw;
}

.tmpForm>.inline-legend {
	position: absolute;
	left: 1vw;
	top: -1rem;
	background-color: #f2fff2;
	padding: 0 0.5vw;
}

#shipmentDataDiv {
	/*background-color: #fff;*/
	border: 1px solid #00bb90;
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 185px;
}

#shipmentDataDiv>div {
	flex: 1;
	padding: 1vw;
}

#productScale {
	font-size: 5vw;
}

#productScale>div {
	padding: 1vw;
	border-radius: 3px;
	background-color: #f2fff2;
}

#scaleVal {
	background-color: #fff;
	border: 1px solid #ced4da;
	border-radius: 0.25rem;
}

.dimHover:hover {
	filter: brightness(95%);
}

#searchDiv {
	position: absolute;
	right: 2vw;
}

#searchBlock {
	width: fit-content;
	margin-left: auto;
	margin-bottom: 1vw;
	display: flex;
}

#searchBlock>input+select {
	margin-left: 1vw;
}

#searchBlock>select {
	/*#searchBlock > input,
#searchDiv > input{*/
	border-radius: 2vw;
}

#productCodeDiv .tmpForm .form-group,
#tagCodeDiv .tmpForm .form-group {
	margin-bottom: 0.4vw;
}

.onModal {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	display: flex;
	justify-content: center;
	align-items: center;
}

.tagCard {
	position: absolute;
	width: 50%;
	height: 50%;
	opacity: 0.2;
}

.tagCardTxt {
	z-index: 1;
	font-size: 3vw;
}

.bgWhite {
	background-color: #fff !important;
}

.bgGreen {
	background-color: green;
}

.bgYellow {
	background-color: #ffb100;
}

.bgRed {
	background-color: red;
}

.light_orange_bg {
	background-color: #fff0e9;
}

.enaJob {
	width: 20%;
}

input.hideArrow::-webkit-outer-spin-button,
input.hideArrow::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* Firefox */
input[type=number].hideArrow {
	-moz-appearance: textfield;
}

#workTagDiv>div {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 90%;
	height: 90%;
	background-color: #d1ffe1;
	padding: 1vw 3vw;
	display: flex;
	justify-content: center;
	align-items: center;
}

#workTagDiv #tagRes {
	font-size: 5vw;
	color: #00bb90;
	font-weight: bold;
	text-align: center;
}

#workTagDiv .close {
	font-size: 7vw;
	color: #00bb90;
	position: fixed;
	top: 0;
	right: 2vw;
}

.alertBg {
	background-color: #ff5858 !important;
}

#menuDiv {
	background-color: #000;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	overflow: auto;
}

#menuBody {
	width: fit-content;
	min-width: 50%;
	margin: 3vh auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	text-align: center;
}

#menuBody>div {
	background-color: #bdbdbd;
	margin: 2.5vh;
	padding: 2.5vh;
	font-size: 1.8vw;
	cursor: pointer;
	border: 0.5vw solid #bdbdbd;
	border-radius: 1vh;
}

#menuBody>div:hover {
	font-weight: bold;
	background-color: #d8d8d8;
	border: 0.5vw groove #f5f5f5;
	box-shadow: 0 4px 8px 0 rgba(255, 255, 255, 0.2), 0 6px 20px 0 rgba(255, 255, 255, 0.19);
}

#menuHead {
	color: #fff;
	font-size: 4vw;
	text-align: center;
	padding: 2vh;
	display: flex;
	justify-content: center;
	align-items: center;
}

.fullscreen {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	overflow: auto;
}

.blackWhiteDisplay {
	background-color: #000;
	color: #fff;
}

#queueTable {
	border-collapse: collapse;
	width: 100%;
	text-align: center;
	font-size: 4vw;
}

#queueTable th {
	border-bottom: 0.5vw solid #fff;
}

#queueTable tr.newStatus td {
	border-top: 0.5vw solid #fff;
}

#queueTable td {
	border-bottom: 0.1vw solid #fff;
	padding: 1vw 0;
}

.data {
	width: 100%;
	display: flex;
	justify-content: space-between;
}

.printData {
	margin-top: 16px;
}

.table_td_on_top td,
#ctnWeightListDiv td {
	vertical-align: top;
}

tr.bottomLine2>td,
tr.bottomLine:not(:last-child)>td {
	border-bottom: thin solid gray;
}

.reportTable th:not(.noLine),
.reportTable .footer td,
.reportTable tfoot td {
	border-top: 1px solid #000;
	border-bottom: 1px solid #000;
}

tr.topLine>td {
	border-top: thin solid gray;
}

.reportTable tr:first-child td:first-child>span,
.reportTable tr.bottomLine+tr td:first-child>span,
.reportTable tr.topLine td:first-child>span {
	visibility: visible;
}

.reportTable td>span {
	visibility: hidden;
}

.reportTable tr.f24 {
	font-weight: bold;
}

.reportTable tr.f26 {
	font-size: 1rem;
	font-weight: bold;
}

.pageNavGrp {
	display: inline-block;
	border: 1px solid #ccc;
	border-radius: 0.25rem;
	width: fit-content;
}

button.disabled {
	pointer-events: none;
}

.text-discount {
	text-decoration: line-through;
	margin-right: 0.5rem;
	font-size: 0.7vw;
}

.ellipText {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 0;
}

.ellipText2 {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

table.branch_detail_table td {
	position: relative;
	text-align: center;
	min-width: 400px;
}

#ctnDetailModal>.modal-dialog {
	max-width: 80%;
}

#inOutEndDisplay>.modal-dialog {
	max-width: 90%;
}

#inOutEndSh .form-group {
	margin-bottom: 0.3rem;
}

.tableAlignTop td {
	vertical-align: top;
}

#ui-datepicker-div {
	z-index: 1999 !important;
}

.custom-table-line th,
.custom-table-line td,
.tableLine th,
.tableLine td {
	border: 1px solid #000;
}

.tableLine tr {
	background-color: inherit !important;
}

#stockData {
	position: relative;
}

#stockData>div:first-child {
	position: absolute;
	top: 10px;
	left: 0px;
	width: 70%;
}

#stockData>div.load {
	position: relative;
}

.qTR>.dName {
	width: 75%;
	padding-left: 2.5vw !important;
}

.qTR>.que {
	width: 12%;
}

.qTR>.timeIn {
	width: 18%;
}

.qTR>.workTime {
	width: 20%;
}

.qTR>.lplate,
.qTR>.status {
	width: 25%;
}

.qTR {
	width: 100%;
}

.qTD {
	display: inline-block;
	border-bottom: 0.1vw solid #fff;
	padding: 1vw 0;
	background-color: #000;
}

.qTable {
	width: 100%;
	text-align: center;
	font-size: 4vw;
}

.qTHead,
.qTBody {
	border-bottom: 0.5vw solid #fff;
}

.qTable * {
	box-sizing: border-box;
}

.qTHead .qTD {
	padding: inherit;
	background-color: gray;
}

#productCodeTab.load {
	padding-top: 50px;
}

.redBorder:focus {
	border: 1px solid red;
	box-shadow: 0 0 0 0.2rem rgba(255, 0, 0, .25);
}

.redBorder {
	border: 1px solid red;
}

.fontBold {
	font-weight: bold;
}

#loginPage {
	display: flex;
	justify-content: center;
	align-items: center;
	background: rgb(208, 255, 208);
	background: linear-gradient(148deg, rgba(155, 255, 195, 1) 0%, rgba(208, 255, 208, 1) 25%, rgba(237, 255, 237, 1) 50%, rgba(208, 255, 208, 1) 75%, rgba(155, 255, 195, 1) 100%);
	height: 100vh;
	color: #00bb90;
}

#loginPage * {
	box-sizing: border-box;
}

#loginPage>form {
	width: 35%;
}

#loginContent {
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	border: 1px solid #00bb90;
	border-radius: 1vw;
	padding: 4vw 1vw 5vw;
	background-color: #00bb9020;
}

#loginContent>div {
	width: 60%;
	display: flex;
	align-items: center;
	border: 1px solid #00bb90;
	background-color: #fff;
	margin: 1vw;
}

#loginContent>div>svg {
	width: 15%;
}

#loginContent input:not(.btn) {
	color: #00bb90;
	padding: 1vw;
	cursor: pointer;
	width: 85%;
	border: none;
	border-left: 1px solid #00bb90;
}

#loginContent input:not(.btn):focus {
	outline-color: #00bb90;
}

#loginContent input.btn {
	background-color: #00bb90;
	border: none;
	color: #fff;
	padding: 1vw;
	margin: 1vw;
	cursor: pointer;
	width: 60%;
}

#loginContent>div,
#loginContent>.btn {
	transition: .3s;
}

#loginContent input.btn:hover {
	background-color: #009a77;
}

.cfName {
	font-size: 1vw;
	width: 100%;
	overflow: hidden;
	white-space: nowrap;
}

.topValign {
	vertical-align: top;
}

#timelineContent {
	overflow: auto;
	height: 100%;
	background-color: #efefef;
}

#timelineDiv>div {
	display: flex;
	flex-direction: column;
}

#timelineDiv>div>div.tmpForm {
	flex: unset;
}

.timelineTable {
	table-layout: fixed;
	height: 190mm;
	margin: auto;
	width: 100%;
	text-align: center;
}

.timelineTable th {
	border-left: 1px solid #000;
	border-right: 1px solid #000;
	height: 10mm;
	position: sticky;
	top: 0;
	background-color: #ccc;
	width: 12.5%;
	font-size: 1vw;
	z-index: 1000;
}

.timelineTable td {
	position: relative;
	width: 12.5%;
	border-left: 1px solid #000;
	border-right: 1px solid #000;
}

.timelineContentDiv {
	position: relative;
	padding-left: 3.5vw;
	/*	height: 100%;*/
	padding-bottom: 1vw;
}

.timelineContentDiv+.timelineContentDiv {
	margin-top: 2vw;
}

.timelineGrid {
	padding-top: 10mm;
	padding-left: 3.5vw;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	font-size: 1vw;
}

.timelineGrid>div {
	position: relative;
}

.timelineGrid>div:not(:last-child) {
	border-bottom: 1px dotted #000;
	height: 12mm;
}

.timelineGrid>div>div {
	position: absolute;
	top: -0.8vw;
	left: -3vw;
}

.timelineTable>tbody>tr>td>div {
	position: absolute;
	width: 100%;
	font-size: 3mm;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}

.lineIcon {
	font-size: 3vw;
	color: #00b900;
	vertical-align: middle;
}

.borderRound {
	border: 1px solid #ccc;
	border-radius: 5px;
	padding: 1vw;
}

.teamDataDiv {
	display: flex;
	justify-content: space-around;
	align-items: center;
}

#trackBackModal>.modal-dialog {
	margin-top: 3rem;
	max-width: 80%;
}

.font-8rem {
	font-size: 0.8rem;
}

.sm-font {
	font-size: 1vw;
}

.lg-font {
	font-size: 3vw;
	line-height: 3vw;
}

.vsm-font {
	font-size: 0.7vw;
}

body.evrex .vsm-font {
	font-size: 0.9vw;
}

.trackBackTable td {
	padding: 0 0.7vw;
}

#tareFFdiv {
	position: absolute;
	top: 0;
	right: 0;
	width: 50%;
}

.reduceGap label {
	margin-bottom: 0 !important;
}

.reduceGap .form-group {
	margin-bottom: 0.5rem !important;
}

.modalTopLine {
	border-top: 1px solid #dee2e6;
}

.smallPaddingInput {
	padding: 0.2rem;
	height: auto;
}

table#productCodeTable * {
	font-size: 0.7rem;
}

#addProductModal>.modal-dialog {
	width: 70%;
	max-width: initial;
}

.productDivModal>.modal-dialog {
	width: 50% !important;
	max-width: initial;
}

#addProductData>.modal-dialog {
	width: 30%;
	max-width: initial;
}

#addProductCodeBtn {
	float: left;
	margin-top: 10px;
}

#internalProductDiv {
	display: flex !important;
	flex-direction: column;
	overflow: hidden;
}

#internalProductDiv .inBody {
	height: calc(100% - 7vw);
	background-color: #f2fff2;
	display: flex;
	position: relative;
}

#internalProductDiv .inHead {
	padding-top: 0.1vw;
	height: 3vw;
	font-size: 1.8vw;
	color: #fff;
	background-color: #00bb90;
	text-align: center;
}

#internalProductDiv .inFoot {
	height: 4vw;
	background-color: #00bb90;
}

#internalProductDiv .inBody>div {
	overflow: auto;
	height: 100%;
	flex: 1;
}

#internalProductDiv .inFoot button {
	margin-top: 0.5vw;
	margin-right: 1vw;
}

.sepLine {
	position: absolute;
	top: 0;
	width: 0.5vw;
	height: 100%;
	background-color: #00bb90;
}

.sepLineC {
	left: 50%;
	tranform: translateX(-50%);
}

.sepLineL {
	left: 0;
}

.sepLineR {
	right: 0;
}

#replyMsgBtn,
#shChatBtn {
	position: sticky;
	bottom: 0;
	left: 0;
}

#chatHistoryDiv {
	white-space: pre-line;
	word-wrap: break-word;
	background-color: #fff;
}

#chatHistoryDiv>div {
	padding: 1vw;
}

.hoverEffect.active,
.hoverEffect:hover {
	background-color: #f1f1f1;
}

#chatHistoryDiv>div.guest {
	background-color: #fff;
}

.flex1,
#chatHistoryDiv>div.date>hr {
	flex: 1;
}

#chatHistoryDiv>div.sale {
	background-color: #eaeaea;
	text-align: right;
}

.plus-orange {
	color: #ffaa00;
}

.tagList.active {
	border-color: #4fabb8 !important;
	color: #4fabb8;
	background-color: #4fabb811;
}

.text-resize-none,
#cp_noteMsg>textarea,
#noteMsg>textarea {
	resize: none !important;
	width: 100%;
	border-color: #dee2e6 !important;
	border-radius: 0.4vw;
	padding: 10px;
}

#cp_noteMsg>textarea:focus,
#noteMsg>textarea:focus {
	outline: none !important;
	border: 1px solid #4fabb8 !important;
}

#cp_noteMsg>label,
#noteMsg>label {
	position: absolute;
	top: -0.6vw;
	left: 5px;
	background-color: #fff;
	padding: 0 5px;
}

#cp_noteMsg>button,
#noteMsg>button {
	position: absolute;
	right: 0;
	bottom: .38rem;
	font-size: 0.8vw;
	opacity: 0.4;
}

#cp_noteMsg>button.active,
#noteMsg>button.active {
	opacity: 1;
}

.tagData {
	width: fit-content;
	display: inline-block;
	margin: 0.2vw;
}

.customerData {
	max-width: 50%;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.toggle_switch {
	position: relative;
	display: inline-block;
	width: 4vw;
	height: 2vw;
}

.toggle_switch input {
	opacity: 0;
	width: 0;
	height: 0;
}

.toggle_switch_slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #ccc;
	-webkit-transition: .4s;
	transition: .4s;
}

.toggle_switch_slider:before {
	position: absolute;
	content: "";
	height: 1.6vw;
	width: 1.7vw;
	left: 0.25vw;
	bottom: 0.2vw;
	background-color: white;
	-webkit-transition: .4s;
	transition: .4s;
}

input:checked+.toggle_switch_slider {
	background-color: #4fabb8;
}

input:focus+.toggle_switch_slider {
	box-shadow: 0 0 1px #2196F3;
}

input:checked+.toggle_switch_slider:before {
	-webkit-transform: translateX(1.8vw);
	-ms-transform: translateX(1.8vw);
	transform: translateX(1.8vw);
}

.toggle_switch_slider.round,
.toggle_switch_slider.round:before {
	border-radius: 2vw;
}

.uploadProfile {
	position: absolute;
	bottom: 0;
	left: 60%;
	box-shadow: 1px 1px 5px;
	padding: 0.2vw;
	border-radius: 50%;
	font-size: 1.5vw;
	width: 3vw;
	height: 3vw;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #fff;
	color: #555;
	cursor: pointer;
}

.uploadProfile label {
	margin: 0;
	cursor: pointer;
}

.sm-img {
	width: 2vw;
	height: 2vw;
	object-fit: contain;
}

.md-img {
	width: 3vw;
	height: 3vw;
	object-fit: cover;
}

.logoImg {
	width: 10vw;
	height: 10vw;
	object-fit: cover;
}

.db_header {
	font-size: 1.2vw;
	font-weight: bold;
}

.db_data0 {
	padding: 1vw 1vw 0 1vw;
}

.db_data {
	background-color: #424244;
	color: #fff;
	padding: 0vw 1vw;
	border-radius: 0.3vw;
	text-align: center;
	border: 1px solid #000;
}

.db_data_w {
	padding: 0vw 1vw;
	border-radius: 0.3vw;
	text-align: center;
	border: 1px solid #ccc;
}

.db_data_sm {
	padding: 1vw 1.5vw;
}

.justify-content-evenly {
	justify-content: space-evenly !important;
}

.db_dateTime>div>div:first-child {
	width: 55%;
}

.pt-1vw {
	padding-top: 1vw;
}

.db_shTeam {
	background-color: yellow;
	color: #000;
	height: fit-content;
	padding: 0vw 0.5vw;
	border-radius: 0.3vw;
}

#teemchatDashboard {
	min-height: 35vw;
}

#bodyDashboard {
	overflow-x: hidden;
}

.db_waitcust {
	position: absolute;
	top: 0;
	left: 0;
}

.db_radius3,
.db_user {
	border-radius: 0.3vw;
}

.db_user_parent {
	font-size: 0.9vw;
	padding: 0.3vw;
}

.db_user {
	margin-bottom: 0.3vw;
}

.db_team_color {
	background-color: #ccc;
	width: 0.7vw;
	height: 0.7vw;
	border-radius: 50%;
}

.db_user>div {
	flex: 1;
	width: 30%;
}

.width22 {
	width: 2.2vw;
}

#bodyDashboard * {
	font-weight: bold;
}

.word-break,
.edit_profile_data>span {
	word-break: break-word;
}

.reportBg {
	background-color: #f7f7f7;
}

#reportContainer {
	position: absolute;
	top: 0;
	left: 0;
}

#reportHead {
	font-size: 1.5vw;
}

.font-08vw,
#reportFilterOption *,
#reportFilterDate * {
	font-size: 0.8vw;
}

#reportFilterOption span+span,
#reportFilterDate span+span {
	margin-left: 0.5vw;
}

.date_filter img,
#reportFilterDate img {
	width: 1.5vw;
}

#reportFilterDate>div {
	align-items: center;
}

#reportFilterDate input {
	text-align: center;
	width: 8vw;
}

#reportFilterOption .filterInput * {
	color: #4fabb8 !important;
}

.dropdown-item.active,
.dropdown-item:active {
	background-color: #e8e8e8 !important;
}

.bootstrap-select>.dropdown-toggle:active,
.bootstrap-select>.dropdown-toggle:focus {
	outline: 0 !important;
	border-color: #80bdff;
	box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, .25);
}

#reportBody {
	color: #495057;
}

#reportTable th {
	background-color: #e8e8e8;
	position: sticky;
	top: 0;
	z-index: 1;
}

#reportTable td {
	border-bottom: 1px solid #e8e8e8;
}

#reportTable th,
#reportTable td {
	padding: 0.5vw 1vw;
	white-space: nowrap;
}

.up-down-icon {
	position: relative;
	margin-left: 0.5vw;
}

.up-down-icon>svg {
	position: absolute;
	color: #bcbcbc;
}

.up-down-icon>.fa-chevron-up {
	bottom: 45%;
}

.up-down-icon>.fa-chevron-down {
	top: 45%;
}

.up-down-icon.active.desc>.fa-chevron-up,
.up-down-icon.active.asc>.fa-chevron-down {
	color: #424244;
}

.line-height-initial {
	line-height: initial !important;
}

.height-fit {
	height: fit-content;
}

#closeHis {
	padding: 0 1vw;
}

#teemchat-loader {
	min-height: 150px;
	display: flex;
	justify-content: center;
	align-items: flex-end;
}

div.highlight>.msg {
	background-color: yellow;
}

.border-gray {
	border: 1px solid #dee2e6;
}

.border-gray+.border-gray {
	border-left: none;
}

.profileMode.active {
	font-weight: 600;
}

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

.msg-data,
#searchContent>div,
#cp_notesDiv>.flex1 {
	white-space: pre-line;
	word-wrap: break-word;
}

.profileModeParent.disEditNote #cp_tagData {
	pointer-events: none !important;
}

.profileModeParent.disEditNote #cp_addInvoice,
.profileModeParent.disEditNote .notePop,
.profileModeParent.disEditNote .delNote,
.profileModeParent.disEditNote #cp_addNote {
	display: none !important;
}

.status0 {
	background-color: #ccc;
}

.notePopMenu {
	position: absolute;
	top: 1.2vw;
	right: 0.2vw;
	background-color: #fff;
	cursor: pointer;
}

.notePopMenu>div {
	padding: 0.2vw 1vw;
}

.notePopMenu>div:hover {
	background-color: #d4d4d4;
}

.notePopMenu:focus {
	outline: none;
}

#indexLogo {
	width: 13vw;
	position: absolute;
	top: 0.5vw;
	left: 2vw;
}

.scg_loginIcon {
	top: 4vw !important;
}

#scgLogo {
	width: 8vw;
	/*height: 10vw;*/
	position: absolute;
	top: 1vw;
	left: 1vw;
	/*background-color: #fff;*/
	/*padding: 0vw;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;*/
}

#db_user>.status1:not(.away) .name {
	color: #4fabb8;
}

#db_user>.status1.away .name {
	color: red;
}

.max-w-0 {
	max-width: 0;
}

.container_chart {
	display: flex;
	justify-content: center;
	align-items: center;
}

.container_cus,
.container_msg {
	width: 40%;
	height: 30vh;
	padding: 1vw;
}

body.mobile,
#chat_main_body {
	min-height: 100vh;
	max-height: 100vh;
	min-height: -webkit-fill-available;
	max-height: -webkit-fill-available;
	height: calc(100vh - calc(100vh - 100%));
}

html.mobile,
#chat_main_html {
	max-height: 100vh;
	height: -webkit-fill-available;
	height: calc(100vh - calc(100vh - 100%));
	overflow: hidden;
}

body.mobile #navHeader button {
	font-size: 3vw;
	padding: 0.5vw 2.5vw;
	border-radius: 1vw;
}

body.mobile #img_logo {
	width: 8vw;
	height: auto;
}

body.mobile #company_name {
	font-size: 3.8vw;
	margin-left: 1vw;
}

body.mobile #navHeader {
	height: auto;
	padding: 1vw !important;
}

body.mobile #navHeader>div>a {
	display: flex;
	align-items: center;
}

body.mobile .popover *,
body.mobile .modal-dialog *,
body.mobile #mobile_cust_detail_div *,
body.mobile #mobile_cust_div * {
	font-size: 3vw;
}

body.mobile #slideObj>div {
	padding: 2vw !important;
}

body.mobile #slideObj img,
body.mobile #chatHistoryDiv img,
body.mobile #mobile_cust_detail_div img,
body.mobile .sm-img,
body.mobile .w-2vw {
	width: 7vw;
	height: 7vw;
}

body.mobile #chatHistoryDiv img.w-10vw {
	width: 40vw !important;
	height: auto;
}

body.mobile .vsm-font {
	font-size: 2.5vw !important;
}

body.mobile #cp_notesDiv_all>div,
body.mobile #cp_notesDiv_room>div,
body.mobile .eventCustom,
body.mobile .eventToggle,
body.mobile .eventDiv {
	padding: 1vw 2vw !important;
	margin: 1vw 1vw 0 !important;
	border-radius: 1.5vw !important;
}

body.mobile #setCustomerTagModal .tagList {
	padding: 1vw 2vw !important;
	margin: 1vw 0 0 !important;
	border-radius: 1.5vw !important;
}

body.mobile #shChatBtn {
	padding: 1vw 2vw !important;
	border-radius: 1.5vw !important;
}

body.mobile .form-control {
	border-radius: 1.5vw !important;
	padding: 0.5vw 2vw !important;
}

body.mobile .form-control-sm {
	line-height: unset;
	height: auto;
}

body.mobile #mobile_filter_div {
	margin: 0 -26px;
	padding: 5px 15px !important;
}

body.mobile #h_name,
body.mobile #cp_notesDiv_room .notePop,
body.mobile svg {
	font-size: 4vw !important;
}

body.mobile #cust_detail_nav>a {
	padding: 2vw;
}

body.mobile #mobile_cust_detail_div>div {
	flex-wrap: unset;
	flex-direction: column;
}

body.mobile #cust_detail_name>span {
	font-size: 4vw;
	font-weight: bold;
}

body.mobile #cust_detail_name {
	text-align: center;
	padding: 2vw;
	background-color: #fff;
	margin-bottom: 1vw;
}

body.mobile #hisSearchTxt,
body.mobile #hisSearchTxtG {
	border-top-right-radius: 0 !important;
	border-bottom-right-radius: 0 !important;
}

body.mobile #hisSearchTxt+div svg.fa-search,
body.mobile #cust_detail_nav_1 svg.fa-search {
	font-size: 3vw !important;
}

body.mobile #cp_profileDiv img.profile_img {
	margin-top: 2vw;
	width: 50% !important;
	height: auto;
}

body.mobile #cp_name {
	font-size: 4vw;
	margin-bottom: 1vw;
}

body.mobile #userProfileData>div.profileModeParent {
	padding: 2vw;
}

body.mobile .notePopMenu {
	padding: 1vw 2vw;
	right: 1vw;
	top: 1vw;
	border-radius: 1.5vw;
}

body.mobile #searchNote {
	padding-right: 4vw !important;
}

body.mobile #searchNote+img {
	width: 3vw;
	height: auto;
}

body.mobile .modal-dialog {
	max-height: 90% !important;
	max-width: 90% !important;
	margin: 5% auto;
}

body.mobile.modal-open {
	padding: 0 !important;
}

body.mobile .popover,
body.mobile .btn {
	padding: 1vw 2vw;
	border-radius: 1vw;
}

body.mobile #operator>div {
	margin-left: 0 !important;
	margin-right: 0 !important;
}

body.mobile .modal-body {
	overflow-x: hidden;
}

body.mobile .modal-content {
	padding: 5vw;
}

.font-8vw {
	font-size: 8vw;
}

.font-10vw,
body.mobile #chatHistoryModal button.close>span {
	font-size: 10vw;
}

body.mobile #slideArrow {
	padding: 0.5vw 1vw;
	font-size: 1vw;
}

body.mobile #addStaffToUserModal .searchIcon>input {
	padding-right: 4vw !important;
}

body.mobile #addStaffToUserModal .searchIcon>img {
	width: 3vw;
}

@media only screen and (max-width: 768px) {
	#chatIcon>img {
		display: none;
	}

	#loginIcon {
		width: 10vw;
	}

	.scg_loginIcon {
		top: 8vw !important;
	}

	#teemchatLogo {
		width: 50vw;
	}

	#beteemLogo {
		width: 7vw;
	}

	#indexLogo {
		width: 20vw;
	}

	#scgLogo {
		width: 20vw;
		padding: 1vw;
	}

	#otpForm>.modal-dialog,
	#loginForm>.modal-dialog {
		max-width: 50% !important;
		margin: auto;
	}

	#otpForm *,
	#loginForm * {
		font-size: 2vw;
	}

	#otpForm .modal-content,
	#loginForm .modal-content {
		padding: 5vw 8vw;
	}
}

@media only screen and (max-width: 480px) {
	#loginIcon {
		width: 15vw;
		top: 5vw;
		right: 5vw;
	}

	#teemchatLogo {
		width: 70vw;
	}

	#beteemLogo {
		top: 5vw;
		left: 5vw;
		width: 10vw;
	}

	#otpForm>.modal-dialog,
	#loginForm>.modal-dialog {
		max-width: 90% !important;
	}

	#otpForm *,
	#loginForm * {
		font-size: 3vw;
	}

	#otpForm .modal-content,
	#loginForm .modal-content {
		padding: 10vw 15vw;
	}
}

.accDataDiv {
	white-space: nowrap;
	width: 70%;
	overflow: hidden;
	text-overflow: ellipsis;
}

#invoiceModal .modal-dialog {
	width: 75%;
	max-width: none !important;
}

.shadow_box_up {
	border-left: 1px solid #ccc;
	border-right: 1px solid #ccc;
	box-shadow: 1px -1px 2px #989898;
}

.shadow_box_down {
	border-top: 1px solid #ccc;
	border-left: 1px solid #ccc;
	border-right: 1px solid #ccc;
	box-shadow: 1px 1px 3px #989898;
}

.txt_fb {
	color: #006aff !important;
}

.txt_fib {
	color: #a56e54 !important;
}

.txt_lazada {
	color: #10166e !important;
}

.txt_furinbox {
	color: #466f22 !important;
}

.txt_fibshp,
.txt_shopee {
	color: #fd5f32 !important;
}

.txt_ig {
	color: #ff0000 !important;
}

.txt_web {
	color: #fba03f !important;
}

.txt_line {
	color: #57aa58 !important;
}

.txt_mind_line {
	color: #846152 !important;
}

#chatHistoryModal .modal-content {
	height: 95vh;
}

#marketplace_product_list_modal #product_list_grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-gap: 1rem;
	padding: 1rem 0;
}

.mkp_product_disabled {
	pointer-events: none;
	background-color: #e9ecef;
	min-height: 2vw;
}

.star-color {
	color: orange;
	font-size: 1vw;
}

.product_star_title>div {
	line-height: 1.5vw;
}

.btn-outline-primary.myTxt {
	border-color: #4fabb8 !important;
}

.btn-outline-primary.myTxt:hover {
	background-color: #4fabb8 !important;
	color: #fff !important;
}

.review_img_list {
	display: grid;
	grid-template-columns: repeat(8, minmax(0, 1fr));
	grid-gap: 0.5rem;
	padding: 1rem 0;
}

#preview_img_close_btn {
	position: absolute;
	top: 1vw;
	right: 2vw;
	font-size: 2vw;
}

#preview_modal img {
	object-fit: contain;
}

#image_preview_div {
	max-width: none !important;
}

#image_preview_div>div {
	max-width: 60%;
	max-height: 75%;
	width: 60%;
	height: 75%;
	display: flex;
	justify-content: center;
	align-items: center;
}

#preview_navigate_left {
	font-size: 3vw;
	position: absolute;
	left: 2vw;
	top: 50%;
	transform: translateY(-50%);
}

#preview_navigate_right {
	font-size: 3vw;
	position: absolute;
	right: 2vw;
	top: 50%;
	transform: translateY(-50%);
}

.video_overlay {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	font-size: 2vw;
	opacity: 0.6;
}

.col_line th,
.col_line td {
	border: 1px solid #ccc;
}

#lhmLogo {
	position: absolute;
	width: 5vw;
	border-radius: 50%;
	top: 2vw;
	left: 2vw;
}

.flex-none {
	flex: none !important;
}

.branch_detail_list ul {
	list-style-type: none;
	padding: 0;
	margin: 0;
}

.branch_detail_list ul>li {
	border: 1px solid #ccc;
	padding: 0.2rem 1rem;
}

.branch_detail_list ul>li+li {
	margin-top: 0.5rem;
}

.border-top-dark {
	border-top: 1px solid #424244;
}

.border-bottom-dark {
	border-bottom: 0.02rem solid #424244 !important;
}

.sorting_level_icon {
	position: absolute;
	top: 0.2rem;
	left: 0;
	color: #8f8f8f !important;
	font-size: 1rem;
}

.normal-white-space {
	white-space: normal !important;
}

#score_bar_div>div>img {
	width: 18%;
	margin: 0 1%;
}

#score_bar_div>progress {
	display: inline-block;
	width: 100%;
	height: 1vw;
	padding: 15px 0 0 0;
	margin: 0;
	background: none;
	border: 0;
	border-radius: 15px;
	text-align: left;
	position: relative;
}

#score_bar_div>progress::-webkit-progress-bar {
	height: 1vw;
	width: 100%;
	margin: 0 auto;
	background-color: #ddd;
	border-radius: 15px;
	box-shadow: 0px 0px 6px #bbb inset;
}

#score_bar_div>progress::-webkit-progress-value {
	display: inline-block;
	height: 1vw;
	margin: 0px -10px 0 0;
	background: #1ea757;
	border-radius: 15px;
	box-shadow: 0px 0px 6px #bbb inset;
}

.col_line th,
.col_line td {
	border: 1px solid #ccc;
}

div.progress {
	height: 0.7vw !important;
	font-size: 0.5vw !important;
}

.score_color_5 {
	color: #1ea757;
}

.score_color_4 {
	color: #73be86;
}

.score_color_3 {
	color: #f6ca11;
}

.score_color_2 {
	color: #ff9922;
}

.score_color_1 {
	color: #fa4e4e;
}

.score_bg_5 {
	background-color: #1ea757;
}

.score_bg_4 {
	background-color: #73be86;
}

.score_bg_3 {
	background-color: #f6ca11;
}

.score_bg_2 {
	background-color: #ff9922;
}

.score_bg_1 {
	background-color: #fa4e4e;
}

#db_progress_score_bar {
	height: 1vw !important;
}

#db_progress_score_bar>div {
	width: 0%
}

#msgScheduleModal>.modal-dialog {
	max-width: 70% !important;
}

#reportContainer.relative {
	position: relative !important;
}

#todayCust_div * {
	font-size: 0.8vw;
}

.input-with-times {
	position: relative;
}

.input-with-times input {
	padding-right: 2rem;
}

.input-with-times .fa-times {
	position: absolute;
	right: 0.5rem;
	top: 50%;
	transform: translateY(-50%);
	color: gray;
	cursor: pointer;
}

#deviceModal>div.modal-dialog {
	max-width: 70vw !important;
}

.delChargerIcon {
	font-size: 1.5vw;
	position: absolute;
	top: -0.25vw;
	right: -0.25vw;
	cursor: pointer;
	color: #ff8080;
	z-index: 1;
}

.edit_owner_icon,
.edit_station_icon {
	position: absolute;
	top: 0;
	right: 0;
}

.on-between {
	display: flex;
	justify-content: space-between;
}

.credit-header-group {
	width: 100%;
	margin-bottom: 1rem;
	border-bottom: 1px dashed #ccc;
	padding-bottom: 0.5rem;
}

.min-height-40-vh {
	min-height: 40vh;
}

.ev-device-status-circle-1 {
	color: #47b883;
}

.ev-device-status-circle-2 {
	color: #fed191;
}

.ev-device-status-circle-3 {
	color: #f66262;
}

.ev-device-status-idx-1,
.ev-device-status-idx-3 {
	color: #fff;
}

.ev-device-status-idx-2 {
	color: #000;
}

.thick-border-left {
	border-left-width: thick !important;
}

.dart-border-left {
	border-left-color: #989898 !important;
}

#line_broadcast_filter,
#fb_broadcast_filter {
	position: absolute;
	width: fit-content;
	right: 2rem;
}

.txt-org {
	white-space: pre-wrap !important;
	word-wrap: break-word !important;
}

.btn-trans {
	border: 0;
	background-color: transparent;
}

.w-07vw {
	width: 0.7vw;
}

.toggle_active {
	color: #bcbcbc;
}

.toggle_active.active {
	color: #4fabb8;
}

.dim-txt {
	opacity: 0.7;
}

.disable-click {
	pointer-events: none;
}

.btn-link-no-line,
.btn-link-no-line:hover {
	text-decoration: none !important;
}

.dim-txt>.hide-dim {
	display: none;
}

.form-row {
	margin-bottom: 0.2rem;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	margin-right: -5px;
	margin-left: -5px;
}

.form-row>.col,
.form-row>[class*=col-] {
	padding-right: 5px;
	padding-left: 5px;
}

.form-group {
	margin-bottom: 1rem;
}

.db_small {
	height: 2rem;
	flex: none;
}

.expand-line {
	border-bottom: 2px solid;
	width: 100%;
}

.first-priority-chat {
	background-color: #c5fff5 !important;
}

.potential-chat {
	background-color: #ffe1e6 !important;
}

.leave-chat{
    background-color: #fffde1 !important;
}

#db_scg_v3 {
	zoom: 0.9;
}

#db_scg_v3 #status_option {
	border: 1px solid #ccc;
	border-radius: 5vw;
	padding: 0.2vw 0.5vw 0.2vw 0.2vw;
}

#db_scg_v3 #status_option>div {
	background: #5babb7;
	color: #fff;
	border-radius: 5vw;
	padding: 0 1vw;
	font-size: 0.8vw;
	display: flex;
	align-items: center;
	justify-content: center;
}

#db_scg_v3 #status_option>select {
	font-size: 0.85vw;
	border: none;
}

#db_scg_v3 #status_option>select:focus {
	box-shadow: none;
}

#db_scg_v3 #db_customer_table td {
	padding: 0.25vw 1vw;
	font-size: 1.2vw;
	width: 33.33%;
}

#db_scg_v3 .db_header {
	font-size: 1.5vw;
}

#db_scg_v3 .account_cust_list {
	display: flex;
	align-items: center;
}

#db_scg_v3 .canvas_size {
	width: 7vw;
	height: 7vw;
}

#db_scg_v3 .bg_style1 {
	background-color: #ffcd56;
}

#db_scg_v3 .bg_style2 {
	background-color: #ff8ba4
}

.db_data_rounded {
	padding: 0.1vw 1vw;
	border-radius: 5vw;
}

.db_small_data_rouned {
	width: 5rem;
}

.dashed-bottom {
	border-bottom: 2px dashed #ccc;
}

.dashed-left {
	border-left: 2px dashed #ccc;
	padding-left: 1rem;
	margin-left: 1rem;
}

.db_canvas_data {
	position: absolute;
	top: 52%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.avg_msg_rate_box {
	width: 50vw;
	height: 1vw;
	background: rgb(255, 255, 255);
	background: linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(199, 83, 18, 1) 100%);
}


.svg-inline--fa {
	height: 1em;
}

#usernameChg {
	text-transform: lowercase;
}

.btn-info {
	color: #fff;
}

.btn-outline-info:hover {
	color: #fff;
	background-color: #4fabb8;
}

.col {
	-ms-flex-preferred-size: 0;
	flex-basis: 0;
	-ms-flex-positive: 1;
	flex-grow: 1;
	min-width: 0;
	max-width: 100%;
}

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

.modal-header{
	justify-content: space-between;
}

.resent-otp-btn{
	border-bottom: 1px solid #4fabb8;
}

.admin_readed{
    background: transparent;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 100%;
	position: absolute;
	left: -0.4rem;
}

.admin_readed[data-read="1"]{
    background: red;
}

.p_topic1 {
    background-color: #c3c3c3;
}

.p_topic2 {
    background-color: #dbdbdb;
}