body {
	margin: 0;
	font-size: 13px;
	font-weight: 400;
}
a {
	color: #10519F;
	text-decoration: none;
	background-color: transparent;
	-webkit-text-decoration-skip: objects;
}
a:hover {
	color: #F58233 !important;
	text-decoration: none;
}
:focus {
	outline: 0 !important;
}
.bgbody{
	background: url(../../images/banner.png) no-repeat center center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	height: 100%;
	position: fixed;
	width: 100%;
}
#login-box{
	position: absolute;
	top: 112px;
	right: 95px;
	background: #FFF;
	padding: 30px;
	border-radius: 5px;
}
.forgot {
	margin-bottom:1rem;
}
.forgot a {
	color: #777777;
	font-size: 14px;
	text-decoration: none;
}
.box-help{
	right: 80px;
	top: 80px;
	left: inherit;
	width: 878px;
}
.font12{
	font-size:12px !important;
}
.font13{
	font-size:13px !important;
}
.font14{
	font-size:14px !important;
}
.font15{
	font-size:15px !important;
}
.font16{
	font-size:16px !important;
}
.font18{
	font-size:18px !important;
}
.font20{
	font-size:20px !important;
}
.font24{
	font-size:24px !important;
}
.font26{
	font-size:26px !important;
}
.font32{
	font-size:32px !important;
}
.font36{
	font-size:36px !important;
}
.font50{
	font-size:50px !important;
}
.w-16{
	width:16px;
	height:16px;
}
.w-20{
	width:20px;
	height:20px;
}
.w-70{
	width:70px;
	height:70px;
}
.w-24{
	width:24px;
	height:24px;
	border-radius:100%;
}
.w-26{
	width:26px;
	height:26px;
	border-radius:100%;
}
.w-32{
	width:32px;
	height:32px;
	border-radius:100%;
}
.w-40{
	width:40px;
	height:40px;
}
.w-68{
	width:68px;
	height:68px;
}
.big-avatar{
	width: 100px;
	border-radius: 100%;
	height: 100px;
}
.h-32{
	height:32px;
}
.pl-35{
	padding-left: 35px;
}
.box-dropdown{
	border: none;
	padding: 0px;
	box-shadow: none;
}
.box-dropdown:focus{
	box-shadow: none;
}
.box-input:focus{
	box-shadow: none;
}
.bg-white{
	background: #FFF;
}
.border-radius{
	border-radius:100%;
}
.radius-5{
	border-radius:5px;
}
.menu-top{
	position: fixed;
	width: 100%;
	z-index: 10;
	height: 42px;
	background: #FFF;
	border-bottom: 1px solid #d0d0d0;
	box-shadow: 0 2px 4px 0 rgba(0,0,0,.1), 0 1px 0 0 rgba(0,0,0,.03);
}
.menu-left{
	/* width: 50px; */
	background: #10519F;
	position: fixed;
	top: 42px;
	left: 0px;
	z-index: 10;
	height: 100%;
	border-right: 1px solid #c3c8ce;
	box-shadow: 1px 3px 4px #d0d0d0;
}
.button-group-radius{
	background: #FFF;
	border-top-right-radius: 0px;
	border-bottom-right-radius: 0px;
}
.main{
	/*padding-left: 50px; */
	padding-top: 42px;
}
.menu-left .nav-item .text-menu{
	display: none;
	text-transform: uppercase;
}
.menu-left .nav-item .position-arrow{
	display: none;
}
.menu-left:hover .nav-item .text-menu{
	display: block;
	display: inline-flex;
}
.menu-left:hover .nav-item-a{
	text-align: initial;
}
.menu-left:hover .nav-item .position-arrow{
	display: block;
}
.menu-left .sup-nav-item{
	display: none;
}
.menu-left .sup-nav-item:hover{
	display: block;
}
.sup-nav-item{
	position: absolute;
	left: 50px;
	background: #ffffff;
	top: 0px;
	color: #4D4F5C;
	width: 180px;
	height: auto;
	box-shadow: 0px 0px 2px #d0d0d0;
	display: none;
	z-index: 9
}
.sup-nav-item a{
	color: #4D4F5C !important;
	text-transform: capitalize;
	float: left;
}
.sup-nav-item a:hover{
	color: #f36a26;
	border: none !important;
}
.sup-nav-item li:hover{
	background:rgba(0,0,0,0.04) !important;
	border: none !important;
}
#sidebar .nav-item:hover .sup-nav-item{
	display: block !important;
	left: 220px;
}
#sidebar.active .nav-item:hover .sup-nav-item{
	display: block !important;
	left: 50px;
}
.menu-left .nav-item.active{
	color: #10519f !important;
	background: #FFF !important;
}
.menu-left .nav-item.active .nav-item-a{
	color: #10519f !important;
}
.menu-right{
	position: fixed;
	right: 0px;
	top: 150px;
	text-align: center;
	z-index: 1;
}
.menu-right li{
	width: 66px;
	padding-bottom: 5px;
}
.menu-right li i{
	background: #10519F;
	color: #FFF;
	padding: 10px;
	border-radius: 100%;
	cursor: pointer;
}
.menu-right li p{
	font-size: 12px;
	color: #6c757d;
	text-indent: -9999;
	/* padding-bottom: 10px; */
	margin-bottom: 0px;
}
.menu-right li a{
	text-decoration: none;	
}
.menu-right li i:hover{
	box-shadow: 2px 4px 10px #9c9c9c;
	background: #f36a26;
}
.menu-right li:hover p{
	text-indent:inherit;
	cursor: pointer;
	margin-bottom: 0px;
}
.menu-right li:hover i{
	box-shadow: 2px 4px 10px #9c9c9c;
	background: #f36a26;
}
.pl-66{
	padding-left: 66px;
}
.bg-main{
	background:#e9ebee;
}
.shortcut{
	background: #10519F;
	color: #FFF;
	padding: 12.5px;
	float: left;
	border-radius: 5px;
	margin-right: 15px;
	cursor:pointer;
	width: 38px;
	height: 38px;
}
.gficon .shortcut:hover{
	background: #f36a26;
}
.gficon{
	color: #10519f;
	cursor: pointer;
}
.gficon:hover{
	color: #f36a26;
	text-decoration: none;
}
.gficon i:hover{
	background: #f36a26;
}
.gficon a{
	text-decoration: none;
}
.gficon a:hover{
	color: #f36a26;
	text-decoration: none;
}
.text-secondary .shortcut{
	background: #6c757d;
}
.text-line-through{
	text-decoration: line-through;
}
.settingicon{
	right: 10px;
	position: absolute;
	top: 5px;
	font-size: 18px;
	cursor: pointer;
}
.color-orange{
	color: #f36a26 !important;
}
.color-blue{
	color: #10519F;
}
.bg-green{
	background: #00D50D;
}
.color-green{
	color: #00D50D;
}
.color-span{
	color: #212529;
}
.bg-orange{
	background: #f36a26 !important;
}
.bg-blue{
	background: #10519F;
}
.box{
	border: 1px solid #d0d0d0;
	border-radius: 5px;
	padding: 15px;
	box-shadow: 2px 4px 8px #d0d0d0;
}
.box-small{
	background: #f34949;
	padding: 20px;
	border-radius: 5px;
	color: #FFF;
}
.box-small:hover{
	box-shadow: 2px 4px 8px #d0d0d0;
	cursor: pointer;
}

.box-small-color{
	background: #dedee2;
	padding: 20px;
	border-radius: 5px;
	color: #4D4F5C;
}
.box-small-color:hover{
	box-shadow: 2px 4px 8px #d0d0d0;
	cursor: pointer;
}
/*	
.box-small .navbar-nav li:hover{
	width: 100%;
	background: #fff;
}
.box-small .navbar-nav li{
	padding: 2px;
}
.box-small .navbar-nav li:hover a{
	color: #0cafd2;
}
.box-small .navbar-nav li a{
	color: #FFF;
	text-decoration: none;
}
*/
.box-add{
	color: #d0d0d0;
	border: 2px dashed #d0d0d0;
	background: #FFF;
	padding: 75px 20px;
	cursor: pointer;
	border-radius: 5px;
}
.pd30{
	padding: 30px;
}
.pd-8{
	padding: 8px !important;
}
.pd10{
	padding: 10px !important;
}
.logo{
	background: #FFF;
	height: 41px;
	width: 50px;
	border: none;
}
.logo:hover{
	background: rgba(239,240,241) !important;
	height: 41px;
	width: 50px;
	border: none !important;
}
.logo img{
	width: 40px;
	padding: 3px;
}
.logocty{
	width: 140px;
	border-radius: 100%;
}
.hoverbot:hover{
	border-bottom: 5px solid #f36a26;
	margin-bottom: -15px;
}
.navbar-nav-top{
	height: 41px;
	flex-direction: row;
	margin-left: auto!important;
}
.navbar-nav-top .nav-item-top{
	padding: 8px 0px;
	position: relative;
	cursor: pointer;
}
.navbar-nav-top .nav-item-top:hover{
	background: #E4E4E4 !important;
}
.navbar-nav-top .nav-item-top a:hover{
	color: #FFF;
}
.nav-item-top a{
	padding: 14px 17px 10px 17px;
}
/* 
.nav-item a {
	color: #FFF;
	text-decoration: none;
	font-size: 16px;
}
*/
.position-arrow{
	position: absolute;
	right: 10px;
	top: 15px;
	font-size: 18px;
}
/* 
.navhover li:hover{
	background: #d2e3ff;
	color: #f36a26;
	border-left: 5px solid #FFF;
	cursor: pointer;
}
*/
.question{
	position: fixed;
	bottom: 0px;
	width: 50px;
	z-index: 10;
}
.question:hover{
	background: #FFF;
}
.question .nav-item-a:hover{
	color: #10519f !important;
}
.navhover .nav-item a:hover{
	color: #10519f !important;
	text-decoration: none;
	background: #fff;
}
.nav-item-a{
	position: relative;
	padding: 15px;
	display: inherit;
	color: #FFF;
	cursor: pointer;
}
.confirm{
	position: absolute; 
	z-index: 9; 
	width: 460px; 
	right: 0px;
	top: 41px;
}
.new{
	background:#f5f6f7;
	padding: 1px 10px;
}
.confirmgroup-active{
	background:#edf2fa;
	cursor: pointer;
	border-bottom: 1px solid #d0d0d0;
}
.confirmgroup-active:hover{
	background: #e4e9f1;
	cursor: pointer;
}
.confirmgroup:hover{
	background-image: linear-gradient(rgba(29, 33, 41, .04), rgba(29, 33, 41, .04));
	cursor: pointer;
}
.confirmgroup{
	border-bottom: 1px solid #d0d0d0;
}
.checkicon{
	font-size: 20px !important;
	color: #10519f;
	display: none !important;
}
.confirmgroup:hover .checkicon{
	display: block !important;
}
.chat{
	position: absolute; 
	z-index: 9; 
	width: 460px; 
	right: 0px;
	top: 41px;
}
.online{
	position: absolute;
	right: -5px;
	bottom: 0px;
	color: #00D50D;
}
.offline{
	position: absolute;
	right: -5px;
	bottom: 0px;
	color: #00D50D;
	background: #FFF;
	border-radius: 100%;
}
.usermore{
	background: #000000;
	position: absolute;
	border-radius: 100%;
	opacity: 0.7;
	color: #FFF;
	width: 40px;
	height: 40px;
	text-align: center;
	padding-top: 10px;
}
.arrow-up {
	width: 0;
	height: 0;
	border-left: 8px solid transparent;
	border-right: 8px solid transparent;
	border-bottom: 8px solid rgba(0,0,0,.125);
}
.arrow-down {
	width: 0; 
	height: 0; 
	border-left: 20px solid transparent;
	border-right: 20px solid transparent;
	border-top: 20px solid #f00;
}
.arrow-right {
	width: 0; 
	height: 0; 
	border-top: 60px solid transparent;
	border-bottom: 60px solid transparent;
	border-left: 60px solid green;
}
.arrow-left {
	width: 0; 
	height: 0; 
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent; 
	border-right:10px solid blue; 
}
.position-arrowtop{
	position: absolute;
	right: 15px;
	top: -9px;
}
.position-arrowtop-r{
	position: absolute;
	right: 41px;
	top: -9px;
}
.bottom20{
	bottom:20px;
}
.notification{
	position: absolute; 
	z-index: 9; 
	width: 460px; 
	right: 0px;
	top: 41px;
}
.userinfo{
	position: absolute;
	z-index: 9;
	width: 275px;
	right: -30px;
	top: 41px;
}
.noti{
	background: #f36a26;
	border-radius: 10px;
	font-size: 10px;
	padding: 0px 5px;
	position: absolute;
	top: 3px;
	right: 0px;
	color: #FFF;
}
.notifications {
	border-radius: 10px;
	font-size: 10px;
	padding: 0 5px;
	border: 2px solid #fff;
	position: relative;
	top: 0;
	left: 3px;
}
.noti-relation{
	background: #10519f;
	border-radius: 10px;
	font-size: 10px;
	padding: 0px 5px;
	position: absolute;
	border: 2px solid #FFF;
	top: -12px;
	right: -5px;
	color: #FFF;
}
.noti-shortcut{
	left: 45px;
	top: -8px;
	border: 2px solid #FFF;
	right: inherit;
}
.addlogo{
	border: 2px dashed #d0d0d0;
	border-radius: 5px;
	font-size: 50px;
	width: 240px;
	padding: 93px;
	color:#d0d0d0;
	cursor: pointer;
}
/* step */
.stepwizard-step p {
	margin-top: 15px;
}
.stepwizard-row {
	display: table-row;
}
.stepwizard {
	display: table;
	position: relative;
}
.stepwizard-step button[disabled] {
	opacity: 1 !important;
	filter: alpha(opacity=100) !important;
}
.stepwizard-row:before {
	top: 14px;
	bottom: 0;
	position: absolute;
	content: " ";
	width: 100%;
	height: 1px;
	background-color: #ccc;
	right: 0px;
	left: 0px;
}
.stepwizard-step {
	display: table-cell;
	text-align: center;
	position: relative;
}
.btn-circle {
	width: 30px;
	height: 30px;
	text-align: center;
	padding: 6px 0;
	font-size: 12px;
	line-height: 1.428571429;
	border-radius: 15px;
}
.stepwizard-step a{
	border: 1px solid #10519E;
	border-radius: 100%;
	padding: 8px 13px !important;
	text-decoration: none;
	background: #FFF;
	color: #10519E;
}
.max-w-80{
	max-width: 80%;
}
.max-w-100{
	max-width: 100px;
}
.modal-order{max-width: 1200px;}
.close-order{
	position: absolute;
	top: -17px;
	right: 12px;
}
.stepwizard-step .numberstep{
	background: #10519E;
	border-radius: 100%;
	color: #FFF;
	padding: 10px 16px;
	text-decoration: none;
	font-weight: bold;
}
.bg-modal{
	background: #e9ebee;
}
/* switch */
.switch {
	position: relative;
	display: inline-block;
	width: 60px;
	height: 34px;
}
.switch input {display:none;}
.slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #ccc;
	-webkit-transition: .4s;
	transition: .4s;
}
.slider:before {
	position: absolute;
	content: "";
	height: 26px;
	width: 26px;
	left: 4px;
	bottom: 4px;
	background-color: white;
	-webkit-transition: .4s;
	transition: .4s;
}
input:checked + .slider {
	background-color: #2196F3;
}
input:focus + .slider {
	box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
	-webkit-transform: translateX(26px);
	-ms-transform: translateX(26px);
	transform: translateX(26px);
}
.slider.round {
	border-radius: 34px;
}
.slider.round:before {
	border-radius: 50%;
}
.border10{
	border: 10px solid #FFFF;
}
.btn-adduser{
	border: 2px dashed #969BB9;
	background: transparent;
	padding: 10px 20px;
	color: #969BB9;
	font-size: 16px;
	border-radius: 3px;
}

.box-integrated{
	background: #FFF;
	text-align: center;
	padding: 15px 10px;
	border-radius: 3px;
	box-shadow: 0px 2px 6px #ababab;
	width: 160px;
	float: left;
	margin-right: 15px;
	margin-bottom: 10px;
	border: 1px solid #d0d0d0;
}
.box-integrated:hover{
	box-shadow: 0px 2px 6px #d0d0d0;
	cursor: pointer;
}
.check-integrated{
	border: 1px solid #00D50D;
	box-shadow: none;
	position: relative;
}
.icon-check-integrated{
	position: absolute;
	right: 5px;
	top: 5px;
	color: #00D50D;
}
.pointer{
	cursor: pointer;
}
.position{
	position: relative;
}
.add-mqh{
	position: absolute;
	top: 0px;
	z-index: 9;
	width: 381px;
}
.r-0{
	right: 0px;
}
.icon-help{
	position: fixed;
	bottom: 10px;
	right: 25px;
	padding: 10px;
	cursor: pointer;
	z-index: 9;
	background: #10519f;
	color: #FFF;
	border-radius: 100%;
	font-size: 16px;
}
.icon-help:hover{
	color: #FFF;
	text-indent: 1;
}
.chat-box{
	position: relative;
	display: none;
}
.chat-show{
	background: #10519F;
	right: 105px;
	position: absolute;
	width: 300px;
	border-top-left-radius: 5px;
	color: #FFF;
	padding: 10px;
	border-top-right-radius: 5px;
	cursor: pointer;
	z-index: 1;
}
.chat-content{
	position: absolute;
	right: 105px;
	top: 40px;
	width: 300px;
	border: 1px solid #d0d0d0;
	background: #FFF;
}
.chat-main-content{
	height: 280px;
	overflow-y: auto;
}
.chat-help{
	background: #F0F0F7;
	padding: 10px;
}
.chat-help span{
	font-size: 12px;
	color:#BCBCCB;
}
.chat-help i {
	color: #BCBCCB;
}
.box-chat-left{
	background: #EDF0F5;
	padding: 10px;
	border-top-left-radius: 15px;
	border-top-right-radius: 15px;
	border-bottom-right-radius: 15px;
	margin-bottom: 10px;
}
.box-chat-right{
	background: #EDF0F5;
	padding: 10px;
	border-bottom-left-radius: 15px;
	border-top-right-radius: 15px;
	border-top-left-radius: 15px;
	margin-bottom: 10px;
}
.user-cmt{
	background: #10519F !important;
	color: #FFF !important;
}
.box-chat-user{
	position: absolute;
	bottom: 0px;
	left: 5px;
	width: 30px;
	height: 30px;
	border-radius: 100%;
}
.border-none{
	border: none !important;
}
.user-view{
	position: relative;
	float: right;
	margin-right: 5px;
}
.user-view img {
	width: 18px;
	border-radius:100%; 
}
.user-view span{
	background-color: rgba(0, 0, 0, .05);
	border-radius: 8px;
	color: rgba(0, 0, 0, .40);
	font-size: 11px;
	font-weight: bold;
	line-height: 20px;
	margin: 0;
	padding: 0 4px;
	text-align: center;
}
.box-color{
	background: #FFF;
	padding: 5px;
}
.nav-pills .nav-link-search.active, .nav-pills .show>.nav-link{
	background: transparent;
	color: #10519E;
	border-bottom: 5px solid #f36a26;
	border-radius: 0 !important;
	padding: 10px 40px;
	font-weight: bold;
}
.navsearch:hover{
	background: transparent;
	color: #212529;
	border-bottom: 5px solid #f36a26;
	border-radius: 0 !important;
	padding: 10px 40px;
	text-decoration: none;
}
.navsearch{
	color: #212529;
	padding: 10px 40px;
}
.text-decoration{
	text-decoration: none !important;
}
.box-description{
	height: 40px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: inherit;
	margin-bottom: 0px;
}
.box-upload{
	width: 150px;
	height: 160px;
	background: #c5c5c5;
	float: left;
	border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;
	cursor: pointer;
}
.box-upload:hover{
	background: #f36a26;
}
.box-upload-icon{
	padding: 52px 61px;
	font-size: 36px !important;
	color: #FFF;
}
.notify .active{
	color: #10519F !important;
	font-weight: bold;
}
#support{
	position: absolute;
	z-index: 9;
	left: 50px;
	width: 400px;
	top: -40px;
}
#support a {
	color: #212529;
	text-decoration: none;
}
#support a:hover{
	color: #10519F;
}
.border-input{
	border: 1px solid #10519F !important;
}
.search-bar{
	padding: 20px 80px 15px 80px;
	background: #d2e5ec;
}
.border-right-color{
	border-right: 1px solid #10519F !important;
}
.overdoc{
	overflow-y: auto;
	height: 400px;
}
.w20{
	width: 20px;
	text-align: center;
}
.text-none{
	color: #212529;
	text-decoration: none;
}
.btn-bg{
	background: #10519F;
	border: 1px solid #10519F;
}
.btn-bg:hover{
	color: #fff;
	background-color: #10519F;
	border-color: #10519F;
}
.employee-campaigns{
	width: 24px;
	height: 24px;
	float: left;
	margin-right: 3px;
	border-radius: 100%;
}
.employee-more{
	background: #000000;
	position: absolute;
	border-radius: 100%;
	opacity: 0.7;
	color: #FFF;
	width: 24px;
	height: 24px;
	text-align: center;
	padding-top: 3px;
	font-size: 10px;
}
.employee-task-user{
	width: 30px;
	height: 30px;
	float: left;
	margin-right: 3px;
	border-radius: 100%;
}
.hoverlogo:hover{
	width: 240px;
	height: 240px;
	background: #000;
	position: absolute;
	top: 60px;
	left: 100px;
	border-radius: 5px;
	opacity: 0.8;
	cursor: pointer;
}
.nav-project ul li a{
	color: #212529;
}
.nav-project ul li:hover{
	background: #d0d0d0;
	padding: 5px;
	text-decoration: none;
	cursor: pointer;
}
.nav-project ul li a:hover{
	text-decoration: none;
}
/* Task */
.noti-project{
	top: 11px;
	right: 5px;
	border: none;
}
.noti-project-right{
	right: 35px !important;
}
.noti-task{
	top: 17px;
	right: inherit;
	margin-left: 5px;
	border: none;
	position: initial;
}
.thtable th{
	font-weight: normal;
	color: #bcbccb;
	border: none !important;
}
.thtable td a:hover{
	text-decoration: none;
}
.thtable td .slow-progress{
	color: red;
}
.thtable tbody tr:hover{
	background: rgba(77,190,238,.16);
	box-shadow: 0px 3px 3px #e9e9ed;
}
.priority {
	width: 5px;
	float: left;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
}
.icontable{
	background: #10519f;
	color: #FFF;
	padding: 9px 11px;
	border-radius: 5px;
}
.task-tab{
	border-bottom: 1px solid #F58233;
}
.task-tab .active{
	/* color: #F58233 !important; */
	border-bottom: 2px solid #F58233 !important;
	border: none;
}
.task-tab .nav-link:hover{
	color: #F58233 !important;
	border-bottom: 2px solid #F58233 !important;
	border: none;
}
.form-control{
	font-size: 14px;
	height: calc(2.25rem + 2px);
}
.btn-dashed{
	border: 2px dashed #d0d0d0;
	color: #d0d0d0;
}
.task-date{
	padding: 5px !important;
	font-size: 12px;
	background: #e9ebee;
	border: none;
}
.task-active-show{
	position: absolute;
	right: 55px;
	top: 165px;
	z-index: 9;
	box-shadow: -3px 0px 6px 0px #d0d0d0;
	width: 243px;
}
.task-color{
	border-left: 3px solid red;
	float: left;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
}
.task-progress{
	width: 0%;
	color: #707070;
	margin-left: 5px;
}
.task-flag-important{
	font-size: 20px !important;
	color: #f36a26;
	cursor: pointer;
}
.task-flag{
	font-size: 20px !important;
	color:#bebebe !important;
	cursor: pointer;
}
.task-flag:hover{
	font-size: 20px !important;
	color: #f36a26 !important;
	cursor: pointer;
}
.radius-100{
	border-radius:100px;
}
.folder-project{
	background: #10519f !important;
	border-bottom: 1px solid #FFF;
	color: #FFF;
}
.folder-project a {
	color: #FFF !important;
}
.nav-project ul .active a{
	color: #FFF !important;
	font-weight: bold;
}
.nav-project ul .active{
	background:#10519e;
}
.nav-task li{
	/* background: #E9EBEE; */
	margin-bottom: 0px !important;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	margin: 1px;
}
.nav-tabs .nav-link{
	border: none;
}
.task-color-detail{
	border-left: 20px solid red;
	float: left;
	position: absolute;
	top: 3px;
	left: 3px;
	bottom: 3px;
	border-bottom-left-radius: 5px;
	border-top-left-radius: 5px;
}
.task-file-topic{
	font-size: 36px !important;
	background: #FFF;
	padding: 10px;
	border-radius: 5px;
	color: #10519F;
	margin: auto;
	width: 60px;
	height: 60px;
	border: 1px solid #d0d0d0;
	text-align: center;
}
.task-file-topic:hover{
	background: #f36a26;
	cursor: pointer;
	color: #FFF;
	text-align: center;
}
.task-file{
	font-size: 36px !important;
	background: #FFF;
	padding: 20px;
	border-radius: 5px;
	color: #10519F;
	margin: auto;
	width: 80px;
	height: 80px;
	border: 1px solid #d0d0d0;
	text-align: center;
}
.task-file:hover{
	background: #f36a26;
	cursor: pointer;
	color: #FFF;
	text-align: center;
}
.task-file-img{
	position: relative;
	font-size: 36px !important;
	border-radius: 5px;
	color: #10519F;
	margin: auto;
	width: 80px;
	height: 80px;
}
.task-file-img:hover{
	background: #f36a26;
	cursor: pointer;
	color: #FFF;
	text-align: center;
	opacity: 0.8;
}
.task-file-img:hover .icon-btn{
	display: block !important;
	position: absolute;
	padding: 30px;
	top: 0px;
	background: #f36a26;
	border-radius: 5px;
	width: 80px;
	height: 80px;
	font-size: 20px;
}
.icon-btn{
	display: none !important;
}
.task-file:hover .icon-btn{
	display: block !important;
	padding: 7.5px;
}
.task-file:hover .icon-file{
	display: none !important;
}
.box-cmt:hover .actions{
	opacity: 1;
}
.box-cmt-img{
	width: 40px;
	float: left;
	padding: 0px;
}
.box-cmt-text{
	padding-left: 40px;
	float: initial;
}
.actions{
	opacity: 0;
}
.actions a{
	text-decoration: none;
}
.actions a:hover{
	color: #10519F;
}
.add-relate{
	border-radius: 100px;
	border: 1px dashed #d0d0d0;
	color: #d0d0d0;
	padding: 8.5px 10px;
	cursor: pointer;
}
.add-relate:hover{
	color: #F36a26;
	border: 1px dashed #F36a26;
}
.icon-action{
	color: #10519f;
	font-size: 24px;
	cursor: pointer;
	padding-right: 5px;
	padding-left: 5px;
}
.icon-action:hover{
	color: #F36a26;
}
.btn-action{
	color: #10519f;
	cursor: pointer;
	padding-right: 5px;
	padding-left: 5px;
}
.btn-action:hover{
	color: #F36a26;
}
.btn-color{
	background: #10519f;
	color: #FFF;
	height: 38px;
}
.btn-color:hover{
	background: #F36a26;
	color: #FFF !important;
}
.colse-modal{
	top: 0px;
	right: 5px;
	left: inherit;
	position: absolute;
} 
.position-initial{
	position: initial;
}
.input-text{
	border: none;
	border-bottom: 1px solid #d0d0d0;
	border-radius: 0px;
}
.input-text:focus{
	box-shadow: none;
}
.input-action{
	position: absolute;
	bottom: 5px;
	right: 10px;
}
.cmt-blur{
	color: transparent;
	text-shadow: 0 0 6px #c2c2c2, 0 0 3px #b8b8b8;
}
.btn-read{
	background: #f36a26;
	color:#FFF;
	position: absolute;
	right: 0px;
	top: 0px;
	font-size: 12px;
}
.pt3{
	padding-top: 3px;
}
.pt10{
	padding-top: 10px;
}
.time-cmt{
	color: #8B8B8B;
	font-size: 12px;
	padding-left: 5px;
}
.help-icon{
	bottom: 0px;
	position: fixed;
	height: 62px;
}
.help-icon i{
	width: 36px;
	height: 36px;
	font-size: 16px;
}
.max-width-100{
	max-width: 100px !important;
}
.opacity05{
	opacity: 0.5
}
.noti-task-kpi{
	right: inherit;
	top: inherit;
	position: initial;
	color: #f36a26;
	font-weight: bold;
}
.box-cmt:hover .noti-task-kpi{
	background: #F36a26;
	color: #FFF;
	border-radius: 10px;
	font-size: 10px;
	padding: 2px 5px;
}
.box-cmt:hover .actions{
	opacity: 1;
}
.actions{
	opacity: 0;
}
.search-result{
	background: #F36a26;
	color: #FFF;
	padding: 5px;
	border-radius: 5px;
	font-size: 11px;
	cursor: pointer;
	font-weight: bold;
}
.search-result:hover i{
	color: #000;
}
.box-topic{
	overflow-y: auto;
	height: 750px;
	background: #F1F1F1;
}
.line{
	display: block;
	width: 100%;
	border-bottom: 1px solid #d0d0d0;
	margin-top: 0px;
	text-align: center;
	margin-bottom: 25px;
}
.line span{
	font-size: 12px;
	text-align: center;
	position: relative;
	top: 8px;
	padding: 0 10px;
	display: inline-block;
	background: #F1F1F1;
	color: #8B8B8B;
}
.box-left-cmt{
	border: 1px solid #d0d0d0;
	background: #FFF;
	border-radius: 5px;
	margin-bottom: 15px;
	padding: 5px 10px !important;
	margin-left: 6%;
	width: fit-content;
	box-shadow: 2px 4px 8px #d0d0d0;
	position: relative;
}
.box-right-cmt{
	border: 1px solid #d0d0d0;
	background: #E2F5FC;
	border-radius: 5px;
	margin-bottom: 25px;
	padding: 5px 10px !important;
	width: 402px;
	box-shadow: 2px 4px 8px #d0d0d0;
	float: right;
	position: relative;
}
.edit-project{
	position: absolute;
	right: 0px;
	background: #FFF;
	z-index: 9;
	border-radius: 5px;
	box-shadow: -2px 4px 8px #d0d0d0;
}
.share-task{
	position: absolute;
	right: 0px;
	top: 40px;
	background: #FFF;
	border: 1px solid #d0d0d0;
	z-index: 9;
	border-radius: 5px;
	box-shadow: 2px 4px 8px #d0d0d0;
}
.add-usertask{
	position: absolute;
	background: #FFF;
	z-index: 1;
	padding: 10px;
	border-radius: 5px;
	border: 1px solid #d0d0d0;
	box-shadow: 2px 4px 8px #d0d0d0;
	top: 35px;
	left: 0px;
}
.add-customer{
	position: absolute;
	background: #FFF;
	border: 1px solid #d0d0d0;
	z-index: 9;
	border-radius: 5px;
	top: 40px;
	width: 390px;
}
.btn-add-mqh{
	height: 38px;
	border: 1px solid #d0d0d0;
}
.dell-user{
	position: absolute;
	right: 5px;
	top: -5px;
}
.avatar-task{
	cursor: pointer;
}
.avatar-task:hover .icon-btn {
	display: block !important;
}
.box-right-cmt:hover .action-topic{
	opacity: 1;
	left: 10px;
	right: inherit;
}
.box-left-cmt:hover .action-topic{
	opacity: 1;
	right: 10px;
	left: inherit;
}
.action-topic{
	position: absolute;
	right: 30px;
	top: -20px;
	background: #10519f;
	padding: 5px;
	border-radius: 5px;
	cursor: pointer;
	color: #FFF;
	box-shadow: 2px 4px 8px #d0d0d0;
	opacity: 0;
}
.action-topic-more{
	position: absolute;
	top: 35px;
	width: 190px;
	padding: 5px;
	color: #000;
	right: 0px;
	border: 1px solid #d0d0d0;
	background: #FFF;
	z-index: 9;
}
.customize-tags{
	width: 50%;
	cursor: pointer;
}
.topic-title{
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	margin-bottom: 0px;
}
.topic-des{
	font-size: 12px;
	color: #6c757d;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	margin-bottom: 0px;
}
.vote-cmt{
	position: absolute;
	background: #FFF;
	z-index: 9;
	bottom: 110px;
	box-shadow: 2px 4px 8px #d0d0d0;
	padding: 10px;
	border-radius: 5px;
	left: 10px;
	width: 350px;
}
.emoji-cmt{
	position: absolute;
	background: #FFF;
	z-index: 9;
	bottom: 110px;
	box-shadow: 2px 4px 8px #d0d0d0;
	padding: 10px;
	border-radius: 5px;
	left: 10px;
}
.share-file{
	position: absolute;
	top: 60px;
	background: #FFF;
	border: 1px solid #d0d0d0;
	z-index: 9;
	border-radius: 5px;
	box-shadow: 2px 4px 8px #d0d0d0;
	width: 400px;
	right: 55px;
}
.more-img{
	width: 80px;
	height: 80px;
	background: #000;
	opacity: 0.7;
	top: 0px;
	position: absolute;
	left: 0px;
	color: #FFF;
	font-size: 20px;
	padding: 20px;
}
.avatar{
	border-radius: 100%;
}
.vote-progess{
	background: #f36a26;
	border-radius: 10px;
}
.more-view{
	border-radius: 100%;
	width: 20px;
	height: 20px;
	font-size: 14px;
}
.more-person{
	width: 32px;
	height: 32px;
	padding: 5px;
	background: #000000;
	position: absolute;
	border-radius: 100%;
	opacity: 0.7;
	color: #FFF;
	text-align: center;
}
.search-result-cmt{
	background-color: #fc0;
	border-radius: .3em;
	box-shadow: 2px 0 #ffcc00, -2px 0 #fc0;
	padding: 2px 0;
}
.folder-big{
	width: 130px;
	padding: 10px;
	float: left;
	text-align: center;
}
.folder-actions{
	float: left;
	top: 5px;
	position: absolute;
	right: 0px;
}
.width-search{
	width: 600px;
}
.search-position{
	position: absolute;
	z-index: 9;
}
#searchorder{
	position: absolute;
	z-index: 9;
	border-radius: 5px;
	box-shadow: 2px 5px 5px #d0d0d0;
}
#searchcustomer{
	position: absolute;
	z-index: 9;
	border-radius: 5px;
	box-shadow: 2px 5px 5px #d0d0d0;
}
#searchproduct{
	position: absolute;
	z-index: 9;
	border-radius: 5px;
	box-shadow: 2px 5px 5px #d0d0d0;
}
.mark-important{
	position: absolute;
	z-index: 9;
	width: 330px;
	right: 0px;
}
.emoji-actions{
	position: absolute;
	right: 0px;
	width: 330px;
	z-index: 9;
}
.display-inherit{
	display: inherit;
}
.box-emoji{
	position: absolute;
	right: 12px;
	bottom: -12px;
	border: 1px solid #d0d0d0;
	border-radius: 15px;
	background: #FFF;
	padding: 2px 5px 5px 5px;
	font-size: 12px;
	cursor: pointer;
}
.add-plus{
	padding: 8px;
	border-radius: 5px;
	text-align: center;
	font-size: 20px;
	cursor: pointer;
	border: 1px solid #ced4da;
	color: #ced4da;
}
.add-plus:hover{
	border: 1px solid #10519F;
	color: #10519F;
}
.trash-contact{
	position: absolute;
	right: -5px;
	top: -5px;
	cursor: pointer;
}
#sources-order{
	position: absolute;
	right: 15px;
	bottom: -55px;
	z-index: 9;
	border: 1px solid rgb(208, 208, 208);
	padding: 10px;
	background: #FFF;
	width: 385px;
	border-radius: 5px;
}
.check-inventory{
	position: absolute;
	background: #FFF;
	padding: 10px;
	width: 360px;
	z-index: 9;
	border: 1px solid #d0d0d0;
	border-radius: 5px;
	box-shadow: 0px 2px 3px #d0d0d0;
	margin-top: 10px;
}
.order-price{
	position: absolute;
	background: #FFF;
	padding: 10px;
	width: 550px;
	z-index: 9;
	border: 1px solid #d0d0d0;
	border-radius: 5px;
	box-shadow: 0px 2px 3px #d0d0d0;
	margin-top: 30px;
}
.form-control:focus{
	box-shadow: inherit;
}
.btn.focus, .btn:focus{
	box-shadow: inherit;
}
.search-time{
	position: absolute;
	right: 0px;
	top: 0px;
}
.bg-creat{
	background: rgba(77,190,238,.16);
}
.more-view-file{
	width: 32px;
	height: 32px;
	font-size: 12px;
	background: #000000;
	position: absolute;
	border-radius: 100%;
	opacity: 0.7;
	color: #FFF;
	text-align: center;
	padding: 7px 0px 0px 0px;
}
.add-view-file{
	border-radius: 100px;
	border: 1px dashed #d0d0d0;
	color: #d0d0d0;
	padding: 5px 9px;
	cursor: pointer;
	top: 5px;
}
.bs-vertical-wizard ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
.bs-vertical-wizard ul>li {
	display: block;
	position: relative;
}
.bs-vertical-wizard ul>li>.content-box {
	display: block;
	padding: 5px 0px 5px 55px;
	color: #333c4e;
	font-weight: 400;
	letter-spacing: .8px;
}
.bs-vertical-wizard ul>li>.content-box:hover{
	color: #333c4e !important;
}
.bs-vertical-wizard ul>li>.content-box:before {
	content: '';
	position: absolute;
	width: 2px;
	height: calc(100% - 25px);
	background-color: #bdc2ce;
	left: 25px;
	bottom: -9px;
	z-index: 3;
}
.bs-vertical-wizard ul>li>.content-box .ico {
	pointer-events: none;
	font-size: 14px;
	position: absolute;
	left: 10px;
	top: 0px;
	z-index: 2;
}
.bs-vertical-wizard ul>li>.content-box:after {
	content: '';
	position: absolute;
	border: 2px solid #bdc2ce;
	border-radius: 50%;
	top: 14px;
	left: 6px;
	width: 16px;
	height: 16px;
	z-index: 3;
}
.bs-vertical-wizard ul>li>.content-box .desc {
	display: block;
	color: #bdc2ce;
	font-size: 11px;
	font-weight: 400;
	line-height: 1.8;
	letter-spacing: .8px;
}
.bs-vertical-wizard ul>li.complete>.content-box:before {
	background-color: #10519f;
	opacity: 1;
	height: calc(100% - 34px);
	bottom: 0px;
}
.bs-vertical-wizard ul>li.complete>.content-box:after {display:none;}
.bs-vertical-wizard ul>li.locked>.content-box:after {display:none;}
.bs-vertical-wizard ul>li:last-child>.content-box:before {display:none;}

.bs-vertical-wizard ul>li.complete>.content-box .ico {
	left: 8px;
}
.bs-vertical-wizard ul>li>.content-box .ico.ico-green {
	color: #ffffff;
	background: #10519f;
	padding: 10px;
	border-radius: 100%;
}
.bs-vertical-wizard ul>li>.content-box .ico.ico-green-none {
	color: #10519f;
	background: #FFF;
	padding: 10px;
	border-radius: 100%;
	border: 1px solid #10519f;
}
.bs-vertical-wizard ul>li>.content-box .ico.ico-muted {
	color: #bdc2ce;
}
.bs-vertical-wizard ul>li.current {
	background-color: #fff;
}
.bs-vertical-wizard ul>li.current>.content-box:before {
	background-color: #ffe357;
	opacity: 1;
}
.bs-vertical-wizard ul>li.current>.content-box:after {
	border-color: #ffe357;
	background-color: #ffe357;
	opacity: 1;
}
.bs-vertical-wizard ul>li.current:after, .bs-vertical-wizard ul>li.current:before {
	left: 100%;
	top: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}
.bs-vertical-wizard ul>li.current:after {
	border-color: rgba(255,255,255,0);
	border-left-color: #fff;
	border-width: 10px;
	margin-top: -10px;
}
.bs-vertical-wizard ul>li.current:before {
	border-color: rgba(234,236,241,0);
	border-left-color: #eaecf1;
	border-width: 11px;
	margin-top: -11px;
}
.box-cmt-img-cmt-order {
	width: 10%;
	float: left;
	padding: 0px;
}
.box-cmt-text-cmt-order {
	width: 90%;
	float: left;
	padding-left: 10px;
}
.quickview-cus{
	position: absolute;
	top: 0px;
	left: 0px;
	cursor: pointer;
}
.quick-custom{
	background: #ffffff;
	position: absolute;
	width: 800px;
	border-radius:5px;
	border: 1px solid #d0d0d0;
	z-index: 9;
}
.close-quickview{
	position: absolute;
	right: 0px;
	top: 0px;
	z-index: 9;
}
.pay-order{
	background: rgba(77,190,238,.32);
	box-shadow: 0px 3px 3px #e9e9ed;
}
.customer-color{
	border-left: 10px solid #e81f1f;
	float: left;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
}
.customer-color1{
	border-left: 10px solid #0be89e;
	float: left;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
}
.customer-color2{
	border-left: 10px solid #144969;
	float: left;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
}
.customer-color3{
	border-left: 10px solid #272cb9;
	float: left;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
}
.customer-color4{
	border-left: 10px solid #da2929;
	float: left;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
}
.customer-color5{
	border-left: 10px solid #3d3632;
	float: left;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
}
.customer-color6{
	border-left: 10px solid #f36a26;
	float: left;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
}
.action-customer{
	position: absolute;
	right: 10px;
	top: 10px;
}
#repcmt .box-cmt-text{
	max-width: 93%;
	padding-left: 0px;
	width: 100%;
}
#repcmt1 .box-cmt-text{
	max-width: 93%;
	padding-left: 0px;
	width: 100%;
}
#repcmt2 .box-cmt-text{
	max-width: 93%;
	padding-left: 0px;
	width: 100%;
}
#repcmt3 .box-cmt-text{
	max-width: 93%;
	padding-left: 0px;
	width: 100%;
}
#repcmt4 .box-cmt-text{
	max-width: 93%;
	padding-left: 0px;
	width: 100%;
}
#repcmt5 .box-cmt-text{
	max-width: 93%;
	padding-left: 0px;
	width: 100%;
}
#repcmt6 .box-cmt-text{
	max-width: 93%;
	padding-left: 0px;
	width: 100%;
}

#repcmt .cmt-small{
	max-width: 85%;
	padding-left: 0px;
	width: 100%;
}
#repcmt1 .cmt-small{
	max-width: 85%;
	padding-left: 0px;
	width: 100%;
}
#repcmt2 .cmt-small{
	max-width: 85%;
	padding-left: 0px;
	width: 100%;
}
#repcmt3 .cmt-small{
	max-width: 85%;
	padding-left: 0px;
	width: 100%;
}
#repcmt4 .cmt-small{
	max-width: 85%;
	padding-left: 0px;
	width: 100%;
}
#repcmt5 .cmt-small{
	max-width: 85%;
	padding-left: 0px;
	width: 100%;
}
#repcmt6 .cmt-small{
	max-width: 85%;
	padding-left: 0px;
	width: 100%;
}
.nav-stacked .active a{
	font-weight: bold;
}
.switchToggle input[type=checkbox]{height: 0; width: 0; visibility: hidden; position: absolute; }
.switchToggle label {cursor: pointer; text-indent: -9999px; width: 80px; max-width: 80px; height: 30px; background: #d1d1d1; display: block; border-radius: 100px; position: relative; }
.switchToggle label:after {content: ''; position: absolute; top: 2px; left: 2px; width: 26px; height: 26px; background: #fff; border-radius: 90px; transition: 0.3s; }
.switchToggle input:checked + label, .switchToggle input:checked + input + label  {background: #3e98d3; }
.switchToggle input + label:before, .switchToggle input + input + label:before {content: ''; position: absolute; top: 3px; left: 30px; width: 26px; height: 26px; border-radius: 90px; transition: 0.3s; text-indent: 0; color: #495057; }
.switchToggle input:checked + label:before, .switchToggle input:checked + input + label:before {content: ''; position: absolute; top: 3px; left: 10px; width: 26px; height: 26px; border-radius: 90px; transition: 0.3s; text-indent: 0; color:#fff; }
.switchToggle input:checked + label:after, .switchToggle input:checked + input + label:after {left: calc(100% - 2px); transform: translateX(-100%); }
.switchToggle label:active:after {width: 60px; } 
.toggle-switchArea { margin: 10px 0 10px 0; }
.fixed-abso {
	position: absolute;
	top: 5px;
	right: 0;
}
.add-usercustomer{
	position: absolute;
	background: #FFF;
	z-index: 1;
	padding: 10px;
	border-radius: 5px;
	border: 1px solid #d0d0d0;
	box-shadow: 2px 4px 8px #d0d0d0;
	right: 0px;
}
.progress-bar{
	background-color: #10519f;
}
.box-edit-customer:hover{
	box-shadow: inset 0px 0px 4px 1px #d0d0d0 !important;
	-webkit-transition: all 250ms linear !important;
	transition: all 250ms linear !important;
	cursor: pointer;
}
.box-email{
	background: #e9ebee;
	padding: 15px;
	text-align: center;
	border: 1px solid #e9e9e9;
}
.box-email:hover{
	background: #d0d0d0;
	cursor: pointer;
}
.box-email:hover img{
	opacity: 0.5;
}
.arrow-slide{
	width: 0%;font-size: 60px;color: #101010;
}
.detail-warehousing-bills {
	position: absolute;
	background: #FFF;
	padding: 10px;
	width: 400px;
	z-index: 9;
	border: 1px solid #d0d0d0;
	border-radius: 5px;
	box-shadow: 0px 2px 3px #d0d0d0;
	right: 20px;
}
.pos-box{
	border: 1px solid #dee2e6!important;
	padding: .25rem!important;
	margin: .25rem!important;
	border-radius:.2rem!important;
	position: relative;
}
.pos-box:hover{
	box-shadow: 2px 4px 8px #d0d0d0;
	cursor: pointer;
}
.pos-price{
	position: absolute;
	bottom: 10px;
	right: 10px;
	margin-bottom: 0px;
	text-align: right;
	font-size: 18px;
	font-weight: bold;
	color: #f36a26;
}
.pos-img{
	float: left;
	width: 30%;
}
.pos-des{
	height: 40px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: inherit;
	margin-bottom: 0px;
	line-height: normal;
}
.pos-product{
	height: 315px;
	overflow-y: scroll;
	position: absolute;
	bottom: 0px;
	left: 15px;
	right: 15px;
}
.pos-info{
	float: left;
	width: 67%;
	padding-left: 3%;
}
.box-bank{
	border: 1px solid rgb(208, 208, 208);
	padding: 10px;
	border-radius: 5px;
	position: absolute;
	z-index: 9;
	background: #FFF;
	width: 100%;
}
#edit-approved{
	position: absolute;
	right: 15px;
	top: 60px;
	z-index: 9;
	padding: 10px;
	width: 310px;
	border: 1px solid rgb(208, 208, 208);
	background: rgb(255, 255, 255);
}
.box-libilities{
	background: #FFF;
	width: 300px;
	border: 1px solid #d0d0d0;
	padding: 10px;
	border-radius: 5px;
	position: absolute;
	right: 30px;
}
.noti-social{
	right: inherit !important;
	left: 25px !important;
	top: -5px !important;
}


.box-right-social{
	background: #0084ff;
	color: #FFF;
	border-radius: 5px;
	margin-bottom: 25px;
	padding: 5px 10px !important;
	box-shadow: 2px 4px 8px #d0d0d0;
	margin-right: 10px;
	float: right;
}
.box-left-social{
	background: #FFF;
	border-radius: 5px;
	margin-bottom: 15px;
	padding: 5px 10px !important;
	margin-left: 10px;
	box-shadow: 2px 4px 8px #d0d0d0;
	float: left;
}
.topsales{
	width: 80px;
	text-align: center;
	float: left;
	padding-right: 10px;
}
.box-camp{
	border-radius:5px;
	border: 1px solid #d0d0d0;
	padding: 5px;
	margin-bottom: 10px;
	cursor: pointer;
}
.box-camp:hover{
	box-shadow: 2px 4px 8px #d0d0d0;
}
.quick-cam{
	background: #ffffff;
	position: absolute;
	width: 600px;
	border-radius: 5px;
	border: 1px solid #d0d0d0;
	z-index: 9;
	display: none;
}
.box-camp:hover .quick-cam{
	display: block;
}
.box-camp-list:hover .quick-cam{
	display: block;
}
.camp-point{
	position: absolute;
	right: 5px;
}
.camp-btn{
	height: 50px;
	font-size: 13px;
	font-weight: bold;
	cursor: pointer;
}
.camp-hover:hover{
	background: #d0d0d0!important;
}
#chart-new{
	background: #FFF;
	border: 1px solid #d0d0d0;
	position: absolute;
	right: 15px;
	padding: 10px;
	width: 960px;
	height: 300px;
	z-index: 9;
	border-radius: 5px;
}
#chart-customer{
	background: #FFF;
	border: 1px solid #d0d0d0;
	position: absolute;
	right: 15px;
	padding: 10px;
	width: 960px;
	height: 300px;
	z-index: 9;
	border-radius: 5px;
}
.stati-email{
	background: #FFF;
	border: 1px solid #d0d0d0;
	position: absolute;
	right: 15px;
	padding: 10px;
	width: 960px;
	height: 300px;
	z-index: 9;
	border-radius: 5px;
}
.email-template{
	cursor: pointer;
	background: #10519f;
	color: #FFF;
}
.email-template img{
	width: 100%;
	max-height: 230px;
	padding: 10px 10px 0px 10px;
	transition: .5s ease;
	backface-visibility: hidden;
}
.email-template:hover .email-template img{
	opacity: 1;
	top: 50%;
	-webkit-transition: all .3s,-webkit-transform .35s;
	transition: all 1s .2s,transform .35s;
	z-index: 999;
}
.email-template:hover img{
	opacity: 0.1;
}
.email-template:hover{
	background: #769dbb;
}
.email-action {
	transition: .5s ease;
	opacity: 0;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	text-align: center;
}
.email-template:hover .email-action {
	opacity: 1;
}
.btn-sm-email{
	font-size: 12px;
	padding: 2px 4px 2px 4px;
	margin-bottom: 5px;
	cursor: pointer;
	background-color: #6c757d;
	border-color: #6c757d;
}
.btn-sm-email:hover{
	background-color: #10519F;
	border-color: #10519F;
}
#save-template{
	border: 1px solid rgb(208, 208, 208);
	padding: 10px;
	position: absolute;
	background: rgb(255, 255, 255);
	z-index: 9;
	width: 300px;
	border-radius: 5px;
	top: 30px;
	right: 0px;
}
#payment-history{
	border: 1px solid #d0d0d0;
	padding: 10px;
	position: absolute;
	background: #FFF;
	right: 30px;
	z-index: 9;
}
#call-statistic{
	position: absolute;
	background: #FFF;
	padding: 10px;
	width: 300px;
	z-index: 9;
	border: 1px solid #d0d0d0;
	border-radius: 5px;
	box-shadow: 0px 2px 3px #d0d0d0;
	margin-top: 25px;
	left: 75px;
	top: 0px;
}
#add-group-customer{
	position: absolute;
	right: 30px;
	background: rgb(255, 255, 255);
	border: 1px solid rgb(208, 208, 208);
	border-radius: 5px;
	padding: 10px;
	z-index: 9;
	width: 320px;
	top: 60px;
}
#edit-time{
	position: absolute;
	background: #FFF;
	padding: 10px;
	width: 310px;
	z-index: 9;
	border: 1px solid #d0d0d0;
	border-radius: 5px;
	box-shadow: 0px 2px 3px #d0d0d0;
	margin-top: 0px;
	right: 15px;
}
.noti-ticket{
	border: none;
	position: relative;
	top: 0px;
}
.nav-optin .nav-item.show .nav-link, .nav-optin .nav-link.active{
	background: #10519f;
	color: #FFF;
	border-radius: 0px;
}
.box-auto{
	border: 1px solid #d0d0d0;
	border-radius: 5px;
	padding: 15px;
	/* height: 427px */
}
.box-auto:hover{
	box-shadow: 2px 4px 8px #d0d0d0;
}
.box-auto-action{
	border: 1px solid #d0d0d0;
	border-radius: 5px;
	text-align: center;
	padding: 1rem;
	height: 180px;
	cursor: pointer;
}
.box-auto-action:hover{
	box-shadow: 2px 4px 8px #d0d0d0;
}
.add-step{
	border-radius: 100%;
	padding: 5px;
	width: 25px;
	position: absolute;
	left: 13px;
	background: #FFF;
	z-index: 3;
	height: 25px;
	border: 1px solid #d0d0d0;
	cursor: pointer;
	margin-top: 5px;
}
.name-auto{
	border: none;
	border-bottom: 1px solid #d0d0d0;
	border-radius: 0px;
}
.actions-box{
	border: 1px solid #d0d0d0;
	padding: 1.5rem!important;
	margin-bottom: 1.5rem!important;
}
.actions-box:hover{
	box-shadow: 2px 4px 8px #d0d0d0;
}
.filter-box{
	padding: 1.5rem!important;
	background: #e9ebee;
	border: 1px dashed #d0d0d0;
	margin-bottom: 1.5rem;
}
.input-auto{
	width: 200px;
	margin: 0px 20px;
}
#bien-email{
	background: rgb(255, 255, 255);
	border: 1px solid rgb(208, 208, 208);
	padding: 10px;
	position: absolute;
	right: 15px;
	top: 80px;
	z-index: 9;
	width: 800px;
	border-radius: 5px;
}
.nav-stacked li a{
	color: #6c757d;
}
.nav-stacked li:hover{
	background: #e9ebee;
	cursor: pointer;
	font-weight: bold;
}
.sms-tem{
	border: 1px solid #d0d0d0;
	border-radius: 5px;
	padding: 0px;
	background: #d0d0d0;
	height: 200px;
}
.sms-template{
	cursor: pointer;
	background: #10519F;
	color: #FFF;
	height: 220px;
}
.sms-template:hover {
	background: #f36a26;
	opacity: .6;
	cursor: pointer;
}
.sms-action {
	transition: .5s ease;
	opacity: 0;
	position: absolute;
	bottom: 0%;
	left: 50%;
	transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	text-align: center;
}
.sms-template:hover .sms-action {
	opacity: 1;
}
#save-template-sms{
	border: 1px solid rgb(208, 208, 208);
	padding: 10px;
	position: absolute;
	background: rgb(255, 255, 255);
	z-index: 9;
	width: 400px;
	border-radius: 5px;
	top: 45px;
	right: 10px;
}
.charge-person{
	position: absolute;
	left: 0px;
	top: 80px;
	z-index: 9;
	padding: 10px;
	width: 310px;
	border: 1px solid #d0d0d0;
	background: #FFF;
}
.edit-last-contact{
	position: absolute;
	left: 0px;
	top: 80px;
	z-index: 9;
	padding: 10px;
	width: 310px;
	border: 1px solid #d0d0d0;
	background: #FFF;
}
.top5{
	top: 5px;
}
.dell-contact{
	position: absolute;
	right: 0px;
	top: -10px;
}
.not-read{
	background: #FFC;
}
.border-top15{
	border-top: 15px solid #e9ebee;
}
.border-left15{
	border-left: 15px solid #e9ebee;
}
.border-right15{
	border-right: 15px solid #e9ebee;
}
.step-img{
	width: 350px;
	position: relative;
	float: left;
	padding-left: 10px;
}
.show-popup{
	text-align: right;
}
.show-popup:hover{
	font-weight: bold;
	cursor: pointer;
	height: 15px;
}
.security-customer{
	font-size: 60px !important;
	color: #10519f;
}
.target-kpi{
	font-size:12px;
	color:#8d9396;
	position:absolute;
	left:436px;
	top:-20px;
	text-align:center
}
.target-current{
	border-right: 5px solid #ef6928;
	position:absolute;
	left:455px;
	height: 26px;
	margin-top: 2px;
}
.border-target-left{
	border-left:1px solid #d0d0d0;
	padding-left:0;
	position:absolute;
	margin-top:10px;
	left:0;
}
.border-target-right{
	border-left:1px solid #d0d0d0;
	padding-left:5px;
	position:absolute;
	right:-10px;
	margin-top:10px;
}
.target-start{
	float:left;
	font-size:12px;
	color:#8d9396;
}
.target-end{
	float:right;
	font-size:12px;
	color:#8d9396;
}
.contact-arrow{
	position: absolute;
	right: 10px;
	top: 5px;
	cursor: pointer;
}
.bg-noti{
	background: #edf2fa;
}
.check-noti{
	position: absolute;
	right: 10px;
	top: 17px;
}
.next-pages{
	position: absolute;
	right: 0px;
	top: 0px;
}
.language-setting{
	vertical-align: middle;
	/* position: fixed;
	bottom: 40px; */
	width: 50px;
	height: 50px;
	z-index: 9;
}
.language-setting a{
	padding: 15px 20px;
	position: absolute;
	color: #FFF;
}
.language-show{
	position: absolute;
	left: 50px;
	width: 200px;
	bottom: -40px;
	border-radius: 0px;
	color: #212529;
}
.button-cmt{
	position: absolute;
	right: 10px;
	bottom: 10px;
}
.button-cmt-small{
	right: 45px;
	bottom: 15px;
}
.group-item{
	overflow: hidden;
	margin: 0 10px;
	padding: 10px;
	border-radius: 5px;
}
.group-item:hover{
	background: #e9ebee;
}
.group-item .num{
	width: 30px;
	float: left;
	line-height: 90px;
	font-size: 34px;
	font-weight: 700;
	letter-spacing: .5px;
	color: #df322f;
}
.group-course-item{
	margin-bottom: 0 !important;
}
.group-course-item figure{
	float: left;
	width: 90px;
	overflow: hidden;
	margin: 0;
	border-radius: 5px;
	box-shadow: 1px 4px 5px #d0d0d0;
}
.b-hover:hover{
	background: #e4e9f1;
}

.group-course-item figure img{
	transform: translateX(-25%);
	height: 90px;
	max-width: 200% !important;
}
.group-course-item figure img{
	transform: translateX(-25%);
	height: 90px;
	max-width: 200% !important;
}
.group-course-item-description h3{
	margin: 0px 0px 5px;
	height: 32px;
	font-size: 13px;
	font-weight: 600;
	overflow: hidden;
	color: #464646;
}
.group-course-item-description h3 a{
	height: 34px;
	text-overflow: ellipsis;
	overflow: hidden;
	display: -webkit-box;
	line-clamp: 2;
	-o-line-clamp: 2;
	-ms-line-clamp: 2;
	-webkit-line-clamp: 2;
	-moz-line-clamp: 2;
	box-orient: vertical;
	-o-box-orient: vertical;
	-ms-box-orient: vertical;
	-webkit-box-orient: vertical;
	-moz-box-orient: vertical;
	color: #464646 !important;
}
.group-course-item-description {
	float: left;
	padding-left: 10px;
	width: calc(100% - 100px);
}
.course-teacher a{
	white-space: nowrap;
}
.course-teacher span{
	font-size: 13px;
	color: #9b9b9b !important;
	padding-left: 2px;
	line-height: 1.38;
	font-weight: 400;
	display: inline-block;
	max-width: 230px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	transform: translateY(3px);
}
.group-course{
	position: relative;
	border: 1px solid #e9ebee;
	height: 385px;
	border-radius: 7px;
	overflow: hidden;
	padding: 10px 10px 30px;
}
.group-course-item-description .new-tag {
	width: 38px;
	height: 18px;
	border-radius: 3px;
	margin-bottom: 8px;
	background-color: #17b99f;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: -.2px;
	text-align: center;
	color: #fff;
}
.carousel-indicators li{
	background-color: #10519e;
	width: 10px;
	height: 10px;
	border-radius: 100%;
}
.carousel-ol{
	border-top: 1px solid #d0d0d0;
	margin: 10px 10px 0px 10px;
	z-index: 1;
}
.setting-box{
	position: absolute;
	right: 0px;
	top: 0px;
}
.banner-wrapper{
	width: 100%;
}
.banner{
	position: relative;
	overflow: hidden;
}
.banner-image{
	height: 306px;
	width: 100%;
	filter: blur(10px);
	opacity: .8;
}
.banner-image img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.blur-mask{
	height: 306px;
	width: 100%;
	position: absolute;
	top: 0;
	opacity: .6;
	z-index: 1;
	background: rgba(0,0,0,.6);
}
.banner-course-info{
	position: absolute;
	top: 0;
	left: 170px;
	z-index: 2;
	padding-top: 45px;
}
.course-name{
	font-size: 36px;
	font-weight: 600;
	font-style: normal;
	font-stretch: normal;
	line-height: 1.19;
	letter-spacing: .7px;
	color: #fff;
	width: 830px;
	margin-bottom: 18px;
	height: 86px;
	text-overflow: ellipsis;
	overflow: hidden;
	display: -webkit-box;
	line-clamp: 2;
	-o-line-clamp: 2;
	-ms-line-clamp: 2;
}
.breadcum-banner{
	position: absolute;
	left: 170px;
	top: 10px;
	color: #FFF;
	z-index: 9;
}
.course-description{
	letter-spacing: normal;
	color: #fff;
	height: 40px;
	text-overflow: ellipsis;
	overflow: hidden;
}
.author-area{
	display: flex;
	width: 688px;
	justify-content: space-between;
	position: absolute;
	bottom: -100px;
}
.author-info{
	display: flex;
	align-items: center;
}
.student-info{
	display: flex;
	align-items: center;
}
.author-name{
	font-size: 15px;
	max-width: 180px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	font-weight: 600;
	font-style: normal;
	font-stretch: normal;
	line-height: 1.33;
	letter-spacing:-.2px;
	color: #FFF;
}
.student-count{
	font-size: 15px;
	font-weight: 600;
	font-style: normal;
	font-stretch: normal;
	line-height: 1.33;
	letter-spacing: -.2px;
	color: #fff;
}
.box-right-img{
	position: fixed;
	top: 150px;
	background: #FFF;
	border: 5px solid #FFF;
	z-index: 9;
	border-radius: 5px;
	box-shadow: 2px 4px 8px #d0d0d0;
	margin-left: 50px;
}
.box-des{
	border-radius: 5px;
	margin-top: 20px;
	background: #ffffff;
	padding: 20px;
	font-size: 15px;
}
#myHeader{
	padding: 10px;
	background: #ffffff;
	border-radius: 5px;
	margin-top: 20px;
	box-shadow:6px 6px 20px 0 rgba(57,74,103,.1);
}
#myHeader a {
	color: #464646;
	padding: 10px 10px;
	font-size: 18px;
	margin: 50px;
}
#myHeader .active{
	border-bottom: 5px solid #f36926;
}
.sticky{
	position: fixed;
	top: 20px;
	z-index: 9;
}
.pin{
	position: absolute;
	right: 15px;
	bottom: 15px;
	width: 30px;
}
#position{
	position: absolute;
	right: 15px;
	top: 50px;
	background: #FFF;
	border: 1px solid #d0d0d0;
	padding: 10px;
	z-index: 1;
	width: 300px;
	border-radius: 5px;
	box-shadow: 2px 4px 8px #d0d0d0;
}
#group-workflow{
	position: absolute;
	right: 15px;
	background: #FFF;
	border: 1px solid #d0d0d0;
	padding: 10px;
	z-index: 1;
	width: 300px;
	border-radius: 5px;
	box-shadow: 2px 4px 8px #d0d0d0;
}
.status-workflow{
	background: #10519e;
	color: #FFF;
	text-align: center;
	font-weight: bold;
}
.popup-call{
	position: absolute;
	right: 30px;
	z-index: 10000;
	width: 500px;
}
#list-contact{
	position: absolute;
	right: 0px;
	background: #FFF;
	z-index: 9;
	border: 1px solid #d0d0d0;
	padding: 5px;
	width: 300px;
	top: 40px;
}
.secondary-contact{
	border-bottom: 1px solid #d0d0d0;
	padding: 10px;
}
#quick-list-contact{
	position: absolute;
	background: #FFF;
	z-index: 9;
	border: 1px solid #d0d0d0;
	padding: 5px;
	width: 300px;
	top: 170px;
	right: 15px;
}
.close-times{
	position: absolute;
	right: 10px;
	top: 10px;
	font-size: 16px !important;
	cursor: pointer;
}
.fix-call{
	position: fixed;
	z-index: 9;
	width: 500px;
	bottom: 0px;
	right: 45px;
	border: 1px solid #d0d0d0;
	background: #FFF;
}
/*
.mypage-alo-phone {
	display: none;
}
*/
.mypage-alo-phone {
	position: absolute;
	left: -40px;
	top: -40px;
	visibility: visible;
	background-color: transparent;
	width: 20px;
	height: 20px;
	cursor: pointer;
}
.mypage-alo-ph-img-circle {
	width: 10px;
	height: 10px;
	top: 43px;
	left: 43px;
	position: absolute;
	-webkit-border-radius: 100%;
	-moz-border-radius: 100%;
	border-radius: 100%;
	border: 2px solid transparent;
	opacity: .7;
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-ms-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
	-webkit-transform-origin: 50% 50%;
	-moz-transform-origin: 50% 50%;
	-ms-transform-origin: 50% 50%;
	-o-transform-origin: 50% 50%;
	transform-origin: 50% 50%;
	background-color: #10519F;
	background-size: 70%;
}
.mypage-alo-ph-circle-fill {
	width: 20px;
	height: 20px;
	top: 38px;
	left: 38px;
	position: absolute;
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-ms-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
	-webkit-border-radius: 100%;
	-moz-border-radius: 100%;
	border-radius: 100%;
	border: 2px solid transparent;
	-webkit-transition: all .5s;
	-moz-transition: all .5s;
	-o-transition: all .5s;
	transition: all .5s;
	background-color: rgba(0, 175, 242, 0.5);
	opacity: .75 !important;
}
.mypage-alo-ph-circle{
	width: 30px;
	height: 30px;
	top: 33px;
	left: 33px;
	position: absolute;
	background-color: transparent;
	-webkit-border-radius: 100%;
	-moz-border-radius: 100%;
	border-radius: 100%;
	border: 2px solid rgba(30, 30, 30, 0.4);
	opacity: .1;
	border-color: #0089B9;
	opacity: .5;
}
#close-sidebar {
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
}
.page-wrapper.toggled .sidebar-wrapper {
	left: 0px;
}
#sidebar #show-sidebar {
	position: fixed;
	left: 0;
	bottom: 0px;
	width: 50px;
	z-index: 9;
	color: #FFF;
	padding: 14px;
	cursor: pointer;
	border-top: 1px solid #d0d0d0;
	width: 220px;
}
#sidebar.active #show-sidebar {
	width: 50px;
	text-align: center;
}
#sidebar.active #show-sidebar span{
	display: none;
}
.page-wrapper.toggled #show-sidebar {
	left: -80px;
}
.sidebar-wrapper {
	width: 220px;
	height: 100%;
	max-height: 100%;
	position: fixed;
	top: 42px;
	left: -300px;
	z-index: 999;
}
.sidebar-content {
	max-height: calc(100% - 30px);
	height: calc(100% - 30px);
	overflow-y: auto;
	position: relative;
}
.menu-left ul li .nav-item-a span{display: none;}
.toggled .menu-left ul li .nav-item-a span{
	display: inline-block !important;
	padding-left: 5px;
}
.toggled .menu-left{width: 220px;}
.toggled .sup-nav-item{left: 220px;}
.toggled #support{left: 220px;}
#close-sidebar{
	position: absolute;
	left: 0px;
	bottom: 10px;
	padding: 8.5px;
	width: 100%;
	border-top: 1px solid #d0d0d0;
	z-index: 10;
	color: #FFF;
	cursor: pointer;
}
.course-item{
	margin-top: 15px;
	position: relative;
	background-color: #fff;
	border-radius: 7px;
	overflow: hidden;
	min-height: 276px;
	box-shadow: 0 1px 11px 0 rgba(0,0,0,0.02), 0 1px 6px 0 rgba(0,0,0,0.1);
}
.course-item figure{
	height: 118px;
	overflow: hidden;
	margin: 0;
}
.course-item figure img{
	width: 100%;
	height: 118px;
	overflow: hidden;
	margin: 0;
	border-bottom: 1px solid #d0d0d0;
}
.course-item-description{
	height: 178px;
	padding: 10px 15px;
	display: inline-block;
	width: 100%;
}
.course-item-description h3{
	margin: 8px 0;
	height: 40px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.33;
	letter-spacing: -.2px;
	overflow: hidden;
}
.course-item-description h3 a{
	text-overflow: ellipsis;
	overflow: hidden;
	display: -webkit-box;
	line-clamp: 2;
	-o-line-clamp: 2;
	-ms-line-clamp: 2;
	-webkit-line-clamp: 2;
	-moz-line-clamp: 2;
	box-orient: vertical;
	-o-box-orient: vertical;
	-ms-box-orient: vertical;
	-webkit-box-orient: vertical;
	-moz-box-orient: vertical;
	color: #464646 !important;
}
.img-call{
	width: 50px;
	margin-left: -15px;
}
.close-call{
	position: absolute;
	right: 7px;
	top: 7px;
	color: #FFF;
	font-size: 16px !important;
}
#group-customer{
	position: absolute;
	z-index: 9;
	border: 1px solid rgb(208, 208, 208);
	padding: 10px;
	background: #FFF;
	width: 385px;
	border-radius: 5px;
	margin-top: 3px;
}
#customer-sources{
	position: absolute;
	z-index: 9;
	border: 1px solid rgb(208, 208, 208);
	padding: 10px;
	background: #FFF;
	width: 385px;
	border-radius: 5px;
	margin-top: 3px;
	right: 15px;
}
#customer-business{
	position: absolute;
	z-index: 9;
	border: 1px solid rgb(208, 208, 208);
	padding: 10px;
	background: #FFF;
	width: 385px;
	border-radius: 5px;
	margin-top: 3px;
	right: 15px;
}
#customer-nation{
	position: absolute;
	z-index: 9;
	border: 1px solid rgb(208, 208, 208);
	padding: 10px;
	background: #FFF;
	width: 385px;
	border-radius: 5px;
	margin-top: 3px;
	right: 15px;
}
#collapse-phone{
	position: absolute;
	right: 15px;
	top: 60px;
	background: #FFF;
	padding: 10px;
	border: 1px solid #d0d0d0;
	z-index: 9;
	width: 420px;
	box-shadow: 0 0 5px #ccc;
	border-radius: 5px;
}
#collapse-email{
	position: absolute;
	right: 15px;
	top: 60px;
	background: #FFF;
	padding: 10px;
	border: 1px solid #d0d0d0;
	z-index: 9;
	width: 420px;
	box-shadow: 0 0 5px #ccc;
	border-radius: 5px;
}
.select-customer{
	position: absolute;
	right: 10px;
	top: 35px;
	font-size: 24px !important;
	color: #f36926;
}
.wrapper {
	display: flex;
	width: 100%;
	align-items: stretch;
	min-height: 100vh;
}
#sidebar {
	min-width: 220px;
	max-width: 220px;
	background: #10519F;
	color: #fff;
	transition: all 0.3s;
	z-index: 9;
}
#sidebar.active {
	max-width: 50px !important;
	min-width: 50px !important;
}
#sidebar.active span{
	display: none;
}
#content {
	width: 100%;
	padding: 20px 20px 0;
	transition: all 0.3s;
}
.nav-left{
	position: fixed;
	left: 0px;
	width: 220px;
	z-index: 10;
}
.active .nav-left{
	position: fixed;
	left: 0px;
	width: 50px;
	z-index: 10;
	background: #10519f;
}
/* Thêm css */
#sidebar.active .noti-menu{
	top: 5px;
	right: 5px;
}
.noti-menu{
	top: 5px;
	right: 175px;
}
.noti-submenu{
	top: 10px;
	right: 10px;
}
#sidebar .nav-item:hover .language-show{
	left: 220px;
}
#sidebar.active .nav-item:hover .language-show{
	left: 50px;
}
#sidebar .nav-item:hover #support{
	left: 220px;
}
#sidebar.active .nav-item:hover #support{
	left: 50px;
}
.nav-lang{
	position: fixed;
	bottom: 49px;
	width: 220px;
}
.nav-support{
	position: fixed;
	bottom: 100px;
	width: 220px;
}
.table-fix{
	max-width: 1000px;
	min-width: 100%;
}
	/*
.sup-nav-item {
	position: absolute;
	top: 0px;
}
/* responsive css */
@media screen and ( min-width: 576px ) and ( max-height: 576px ){
	.table-fix{
		max-width: 540px;
		min-width: 100%;
	}
	.nav-item-a{
		padding: 10px 15px;
	}
	/*
	.sup-nav-item{
		position: fixed;
		top: 42px;
		left: 0;
	}
	*/
}
@media screen and ( min-width: 768px ) and ( max-height: 768px ){
	.table-fix{
		max-width: 720px;
		min-width: 100%;
	}
	.step-img{
		width: 20%;
	}
	.step-img .s-img{
		width: 100%;
		height: 72px;
	}
	.nav-item-a{
		padding: 8px 15px !important;
	}
	.sup-nav-item a {
		padding: 5px !important;
	}
}
@media screen and ( min-width: 992px ) and ( max-height: 992px ){
	.table-fix{
		max-width: 960px;
		min-width: 100%;
	}
	.step-img{
		width: 20%;
	}
	.step-img .s-img{
		width: 100%;
		height: 72px;
	}
	
}
@media screen and ( min-width: 1200px ) and ( max-height: 1200px ){
	.table-fix{
		max-width: 1140px;
		min-width: 100%;
	}
	.step-img{
		width: 20%;
	}
	.step-img .s-img{
		width: 100%;
		height: 72px;
	}
	
}
.border2{
	border: 2px solid #10519e;
}
.project-icon{
	padding: 10px;
	font-size: 20px !important;
	cursor: pointer;
	color: #10519e;
}
.project-icon:hover{
	background: #dcdcdc;
	border-radius:5px; 
	color: #10519e;
}
.info-project{
	position: absolute;
	right: 15px;
	top: -3px;
}
.view-file{
	position: absolute;
	right: 15px;
}
.opp-active{
	padding: 8px 5px !important;
	background: #10519f;
	color: #FFF;
	border: 1px solid #10519f;
}
.opp-probability{
	padding: 8px 5px !important;
}
.btn-read:hover{
	background: #fd8a50;
	color: #FFF;
}
.birthday-btn{
	background: #f36926;
}
#sidebar.active .nav-support{
	width: 50px;
}
#sidebar.active .nav-lang{
	width: 50px;
}
.setting-mqh{
	position: absolute;
	right: 15px;
	text-align: right;
}
#collapse-progress{
	position: absolute;
	right: 140px;
	width: 350px;
	background: rgb(255, 255, 255);
	border: 1px solid rgb(208, 208, 208);
	padding: 10px;
	border-radius: 5px;
	top: -220px;
}
.table{
	font-size: 13px;
}
.table td, .table th{
	padding: .50rem;
}
.progress{
	background-color: #e9ecef;
	/* box-shadow: inset 1px 1px 4px rgba(146, 140, 140, 0.5); */
}
/* 24-06-2019 */
.btn-relation{
	height: 34px !important;
	padding: .255rem 0.55rem;
}
.remove-product{
	position: absolute;
	right: 3px;
	top: 3px;
}
.mark-point {
	border: 1px solid #d0d0d0;
	padding: .5rem!important;
	border-radius: .25rem!important;
	cursor: pointer;
}
.mark-point:hover{
	background: #10519F;
	border: 1px solid #10519F;
	color: #FFF;
}
.mark-point.active{
	background: #10519F;
	border: 1px solid #10519F;
	color: #FFF;
}
.check-point{
	border: 1px solid #d0d0d0;
	border-radius: 100%;
	width: 50px;
	height: 50px;
	padding: 7px 9px;
	background: #10519f;
	color: #FFF;
	font-size: 12px;
	text-align: center;
	cursor: pointer;
}
.text-screen{
	position: absolute;
	right: 160px;
	top: 250px;
}
.date-expired{
	background: red;
	color: #FFF;
	padding: 5px;
	border-radius: 25px;
	font-size: 16px;
	margin-left: 30px;
}
.m-point{
	position: absolute;
	right: 0px;
	top: 5px;
	font-size: 16px;
	font-weight: bold;
	color: red;
	cursor: pointer;
}
/* 03/07/2019 */
.custom-control-label{
	cursor: pointer;
}
.getfly-zoom{
	line-height: 10px;
}
.getfly-zoom:hover{
	font-size: 20px;
	cursor: pointer;
	padding: 0px;
}
.sms-times{
	position: absolute;
	z-index: 9;
	width: 320px;
	right:0px;
}
.close-conversion{
	position: absolute;
	right: 8px;
	top: 8px;
	cursor: pointer;
	font-size: 18px !important;
}
.conversion{
	position: fixed;
	width: 800px;
	bottom: 0;
	right: 0;
	z-index: 9;
	background: #fff;
	box-shadow: 0 0 7px #707070;
}
.optin{
	border: 1px solid #d0d0d0;
	padding: 1rem;
	border-radius: 5px;
	background: #FFF;
	z-index: 9;
	cursor: pointer;
}
.optin:hover{
	box-shadow: 0 0 0 1px #7fd1de, 0 0 12px 0 rgba(0,163,189,.3);
}
.optin.active{
	background:#e5f5f8;
	box-shadow: 0 0 0 1px #7fd1de, 0 0 12px 0 rgba(0,163,189,.3);
}
.optin-style1{
	border: none;
	border-bottom: 1px solid #d0d0d0;
	border-radius: 0px;
}
.optin-style2{
	border-radius: 30px;
}
.button-style2{
	border-radius: 30px;
}
.optin-style3{
	border-radius: 0px;
}
.button-style3{
	border-radius: 0px; 
}
.button-color{
	border-radius: 100% !important;
	width: 40px !important;
	height: 40px !important;
	text-indent: -99 !important;
}
.sms-content{
	overflow-y: auto;
	height: 145px;
}
/* 12/07 */
.introjs-disabled{
	display: none !important;
}
.introjs-nextbutton{
	margin-left: 5px !important;
}
.introjs-prevbutton{
	border: 1px solid #d4d4d4 !important;
}
.introjs-donebutton{
	background: #f36a26 !important;
	text-shadow: none !important;
	color: #FFF !important;
	border: 1px solid #f36a26 !important;
}
.introjs-donebutton:hover{
	color: #FFF !important;
}
.vote{
	background: #FFF;
	cursor: pointer;
	border: 1px solid #d0d0d0;
	border-radius: .25rem;
	text-align: center;
	padding: .5rem;
}
.vote.active{
	background: #10519F;
	color: #FFF;
}
.stepwizard-step .numberstep{
	background: transparent;
	color: #10519E;
}
.stepwizard-step-number a{
	border-radius: 100%;
	text-decoration: none;
	font-weight: bold;
	padding: 12px 14px !important;
	border: 1px solid #10519E;
}
.stepwizard-step-plus{
	background: #10519E;
	border-radius: 100%;
	color: #FFF;
	text-decoration: none;
	font-weight: bold;
	padding: 10px 14px !important;
}

.preview{
	position: relative;
}
.preview-img{
	border-radius: 100%;
	box-shadow: 0px 0px 5px 1px rgb(91, 92, 93);
}
.browse-button{
	width: 200px;
	height: 200px;
	border-radius: 100%;
	background: linear-gradient(180deg, transparent, black);
	opacity: 0;
	transition: 0.3s ease;
	cursor: pointer;
	margin: auto;
}
.browse-button:hover{
	opacity: 1;
}
.browse-input{
	width: 200px;
	height: 200px;
	border-radius: 100%;
	transform: translate(-1px,-26px);
	opacity: 0;
	cursor: pointer;
}
.text-logo{
	position: absolute;
	bottom: 25px;
	width: 200px;
	color: #FFF;
}
.browse{
	position: absolute;
	top: 0px;
}
.browse-button-small{
	width: 100px;
	height: 100px;
	border-radius: 100%;
	background: linear-gradient(180deg, transparent, black);
	opacity: 0;
	transition: 0.3s ease;
	cursor: pointer;
	margin: auto;
}
.browse-button-small:hover{
	opacity: 1;
}
.browse-button-small .text-logo{
	width: 100px;
}
.browse-button-custom{
	width: 140px;
	height: 140px;
	border-radius: 100%;
	background: linear-gradient(180deg, transparent, black);
	opacity: 0;
	transition: 0.3s ease;
	cursor: pointer;
	margin: auto;
}
.browse-button-custom:hover{
	opacity: 1;
}
.browse-button-custom .text-logo{
	width: 140px;
}
.number-auto{
	border: 1px solid #10519f;
	padding: 2px 7px;
	border-radius: 100%;
	margin-right: 7px;
}
.auto-connect{
	position: absolute;
	background: #ffffff;
	z-index: 1;
	width: 425px;
	top: -180px;
	left: 400px;
	box-shadow: 2px 4px 8px #d0d0d0;
	border-radius: 5px;
}
.add-auto-extra{
	position: absolute;
	right: 15px;
	font-size: 16px;
}
input[type="checkbox"].toggle {opacity: 0;position: absolute;left: -99999px;}
input[type="checkbox"].toggle + label {height: 30px;line-height: 30px;background-color: #ccc;padding: 0px 10px;border-radius: 16px;display: inline-block;position: relative;cursor: pointer;-moz-transition: all 0.25s ease-in;-o-transition: all 0.25s ease-in;-webkit-transition: all 0.25s ease-in;transition: all 0.25s ease-in;}
input[type="checkbox"].toggle + label:before, input[type="checkbox"].toggle + label:hover:before {content: ' ';position: absolute;top: 2px;left: 2px;width: 26px;height: 26px;background: #fff;z-index: 2;-moz-transition: all 0.25s ease-in;-o-transition: all 0.25s ease-in;-webkit-transition: all 0.25s ease-in;transition: all 0.25s ease-in;-moz-border-radius: 14px;-webkit-border-radius: 14px;border-radius: 14px;}
input[type="checkbox"].toggle + label .off, input[type="checkbox"].toggle + label .on {color: #fff;}
input[type="checkbox"].toggle + label .off {margin-left: 26px;display: inline-block;}
input[type="checkbox"].toggle + label .on {display: none;}
input[type="checkbox"].toggle:checked + label .off {display: none;}
input[type="checkbox"].toggle:checked + label .on {margin-right: 26px;display: inline-block;}
input[type="checkbox"].toggle:checked + label, input[type="checkbox"].toggle:focus:checked + label {background-color: #67a5ec;}
input[type="checkbox"].toggle:checked + label:before, input[type="checkbox"].toggle:checked + label:hover:before, input[type="checkbox"].toggle:focus:checked + label:before, input[type="checkbox"].toggle:focus:checked + label:hover:before {background-position: 0 0;top: 2px;left: 100%;margin-left: -28px;}
.max-toggle{width: 80px;}
.min-toggle{width: 50px;}
.nav-auto .nav-link active{
	font-weight: bold !important;
	border-left: 2px solid #10519F !important;
	color: #10519F !important;
}
.nav-auto .nav-link a{
	color: #212529 !important;
}
.box-group-auto-frist{
	border: .08em dashed #ccc !important;
	background: #f1f3f6 !important;
}
.box-group-auto{
	border-radius: 8px;
	width: 330px;
	min-width: 250px;
	height: 445px;
	border: .08em solid #ccc;
	padding: 20px;
	text-align: center;
	margin: 0 15px 30px;
	float: left;
}
.box-group-auto img{
	padding-top: 20px;
	padding-bottom: 20px;
}
.box-group-auto-heading {
	min-height: 64px;
	margin-bottom: 0px;
	overflow: hidden;
	font-size: 1.2rem;
	font-weight: 500;
}
.nav-auto .nav-link.active{
	font-weight: bold;
	color: #000;
	border-left: 3px solid #10519f;
}
.nav-auto .nav-link:hover{
	border-left: 3px solid #10519f;
}
.nav-auto .nav-link{
	border-left: 3px solid transparent;
}
.box-group-auto-center{
	height: 278px;
}
.box-group-auto-des{
	font-size: 14px;
	height: 42px;
	line-height: 20px;
	overflow: hidden;
	color: #7990a1;
	word-break: normal;
	margin: 0px;
}
.box-group-auto-center span{
	color: #7990a1;
}
.statistics-chart{
	font-size: 22px !important;
	position: absolute;
	right: 20px;
	top: 20px;
}
.logo-dashboard{
	display: flex;
	align-items: center;
	width: 240px;
	height: 240px;
	border: 1px solid #d0d0d0;
}
.note-logo{
	font-size: 12px;
	font-style: italic;
	padding: 0px 20px;
	color: #a9a4a5;
}
.step-hguide-auto{
	padding: 10px;
	border-radius: 0px !important;
	color: #754b4b;
}
.step-hguide-auto:hover{
	background-color: #007bff !important;
	cursor: pointer;
	color: #FFF !important;
}
.checkbox-auto{
	position: absolute;
	left: 20px;
	bottom: -5px;
}
.close-modal-auto{
	position: absolute;
	right: 15px;
	top: 10px;
	z-index: 10 !important;
}
.box-quick{
	position: absolute;
	background: rgb(255, 255, 255);
	z-index: 1;
	border: 1px solid rgb(208, 208, 208);
	padding: 10px;
	right: 10px;
	width: 270px;
	border-radius: 5px;
	top: 60px;
	}

    #diamond {
      width: 0;
      height: 0;
      border: 30px solid transparent;
      border-bottom-color: #10519f;
      position: relative;
      top: -30px;
      z-index: 1
    }
    #diamond:after {
      content: '';
      position: absolute;
      left: -30px;
      top: 30px;
      width: 0;
      height: 0;
      border: 30px solid transparent;
      border-top-color: #10519f;
    }
    #circle {
      width: 60px;
      height: 60px;
      background: #fe7b1a;
      border-radius: 50%;
      position: relative;
      z-index:10;
    }
     #circle:after {
     content: '';
     position: absolute;
     left: 0px;
     top: 0px;
     width: 60px;
     height: 60px;
     background: #fe7b1a;
     border-radius: 50%;
     z-index: 10;
    }
    #rectangle {
      width: 60px;
      height: 60px;
      background: #0d526a;
      position: relative;
      z-index: 10;
    }
    #rectangle:after {
     content: '';
     position: absolute;
     left: 0px;
     top: 0px;
     width: 60px;
     height: 60px;
     background: #0d526a;
     z-index: 10;
    }
 
.pinkBg {
    background-color: #f36a26!important;
    background-image: linear-gradient(90deg, #f36a26, #fd8b55);
}
.intro-banner-vdo-play-btn{
    height: 60px;
    width: 60px;
    position: fixed;
    right: 0px;
    bottom: 0px;
    text-align: center;
    margin: -30px 0 0 -30px;
    border-radius: 100px;
    z-index: 1;
}
.intro-banner-vdo-play-btn i{
    line-height:56px;
    font-size:30px
}
.intro-banner-vdo-play-btn .ripple{
    position:fixed;
        width: 80px;
    height: 80px;
    z-index:-1;
    right: 0px;
    bottom:0px;
    opacity:0;
    border-radius:100px;
    -webkit-animation:ripple 1.8s infinite;
    animation:ripple 1.8s infinite
}

@-webkit-keyframes ripple{
    0%{
        opacity:1;
        -webkit-transform:scale(0);
        transform:scale(0)
    }
    100%{
        opacity:0;
        -webkit-transform:scale(1);
        transform:scale(1)
    }
}
@keyframes ripple{
    0%{
        opacity:1;
        -webkit-transform:scale(0);
        transform:scale(0)
    }
    100%{
        opacity:0;
        -webkit-transform:scale(1);
        transform:scale(1)
    }
}
.intro-banner-vdo-play-btn .ripple:nth-child(2){
    animation-delay:.3s;
    -webkit-animation-delay:.3s
}
.intro-banner-vdo-play-btn .ripple:nth-child(3){
    animation-delay:.6s;
    -webkit-animation-delay:.6s
}


s {
	background: url(../../images/sprites.png) no-repeat;
	position: relative;
	display: inline-block;
	cursor: pointer;
}

.gf-phone {
    width: 36px; height: 36px;
    background-position: -97px -51px;
}
.gf-mesenger {
    width: 36px; height: 36px;
    background-position: -51px -51px;
}
.gf-mail {
    width: 36px; height: 36px;
    background-position: -5px -51px;
}
.gf-play {
    width: 36px; height: 36px;
    background-position: -97px -5px;
}
.gf-study {
    width: 36px; height: 36px;
    background-position: -5px -97px;
}
.gf-book {
    width: 36px; height: 36px;
    background-position: -5px -5px;
}
.gf-help {
    width: 36px; height: 36px;
    background-position: -51px -5px;
}

.color-red{
	color: red;
}