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;
}
#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;
}
#db_navHeader,
.headerBg,
#navHeader{
	background-color: #424244 !important;
}
#db_navHeader,
#navHeader{
	height: 3.5vw;
}
#navMenu{
	background-color: #4fabb8;
	border-bottom: 0.2vw solid #424244;
}
#navMenu .nav-item.active{
	border-bottom: 0.2vw solid yellow;
	margin-bottom: -0.2vw;
}
.yellowTxt{
	color: yellow;
}
.darkTxt,
#navMenu .nav-item.active > a{
	color: #424244;
}
#menu .list-group-item,
#menu{
	background-color: #e8e8e8;
	border: none;
}
#mainPage > .container-fluid{
	overflow: hidden;
}
#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;
}
#langSel > a.active,
.myTxt{
	color: #4fabb8 !important;
}
.w-1vw{
	width: 1vw;
}
.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;
}
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{
	width: 27%;
}
#userMsgData > div{
	overflow-y: auto;
}
.rounded-border,
.saleList{
	border-radius: 0.4vw;
}
.eventToggle,
.eventDiv{
	border-radius: 0.4vw;
	cursor: pointer;
}
.eventToggle.myBg:hover,
.eventDiv.myBg:hover{
	background-color: #32696c !important;
}
.eventToggle.myBg.active,
.eventDiv.myBg.active{
	background-color: #32696c !important;
}
.eventToggle:not(.myBg):hover,
.eventDiv:not(.myBg):hover{
	background-color: #f1f1f1 !important;
}
.mkp_product_list.active,
.eventToggle.active:not(.myBg),
.eventDiv.active:not(.myBg){
	background-color: #f1f1f1 !important;
}
#editDiv{
	position: relative;
}
#editDiv > button{
	position: absolute;
	top: 0;
	right: -3vw;
}
#profileSetting div.form-row{
	line-height: 2.5;
}
#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%;
}
.width70{
	width: 70%;
}
.width60{
	width: 60%;
}
.width12{
	width: 12%;
}
.width10{
	width: 10%;
}
.width15{
	width: 15%;
}
.width20{
	width: 20%;
}
.width30{
	width: 30%;
}
.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,
.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;
}
.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;
}
.font-2rem{
	font-size: 2rem;
}
.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;
}
.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;
}
.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: #eaeaea;
}
.flex1,
#chatHistoryDiv > div.date > hr{
	flex: 1;
}
#chatHistoryDiv > div.sale{
	background-color: #fff;
	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;
}
#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;
	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{
	width: fit-content;
	height: fit-content;
	font-size: 3vw;
	padding: 0 1vw;
}
#loaderDiv2{
	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: 50%;
	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 .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 .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;
}
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;
}
#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;
}
#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;
}
.min-height-40-vh{
	min-height: 40vh;
}
.thick-border-left{
	border-left-width: thick !important;
}
.dart-border-left{
	border-left-color: #989898 !important;
}
#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;
}