@import url("common.css");
@import url("../fonts/fonts.css");
@import url("mCustomScrollbar.min.css");
body {
	font-family: 'Cairo';
	font-weight: 400;
	background-color: #f3f3f3;
	overflow: hidden;
}
select, select option {
	font-family: 'Cairo', sans-serif !important;
}
.content-wrapper{
	width: 100%;
	float: left;
}
.page-wrapper {
    width: 100%;
    float: left;
    height: calc( 100vh - 120px );
}
.page-wrapper.dashboard-wrapper{
	background-color: #f9f9f9;
	border-radius: 0 0 15px 15px;
}
.page-wrapper .mCSB_container{
	padding: 20px;
}
.ticket-wrapper .mCSB_container{
	padding: 0px;
}
.block {
	width: 100%;
	float: left;
	position: relative;
}
label {
	font-size: 14px;
	font-weight: 500;
	color: #000;
	margin: 0 0 3px;
	display: block;
}
label span {
    color: #ff0000;
}
label.error {
    color: #FE5971;
    padding-top: 0;
    height: auto;
    margin-bottom: 10px;
    display: inline-block;
    width: 100%;
    clear: both;
    font-weight: normal;
}
.form-control {
	color: #333;
	height: 32px;
	line-height: 1.42857143 !important;
	box-shadow: none;
	border-radius: 2px;
}
.form-control:hover, .form-control:focus {
	border-color: #80bdff !important;
	outline: 0;
	box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.18);
}
.form-control:focus {
	border-color: #2196f3 !important;
	box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
}
.form-control::placeholder {
 color: #999 !important;
}
.form-control:-ms-input-placeholder {
 color: #999 !important;
}
.form-control::-ms-input-placeholder {
 color: #999 !important;
}
.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control{
	background-color: #f6f6f6;
}
.field-loader {
    background-image: url(../img/loaders_bg/field_loader.svg);
    background-repeat: no-repeat;
    background-position: right 5px center;
    background-size: 22px;
    padding: 6px 12px;
}
select.form-control {
	padding: 0 25px 0 12px;
	background: url(../img/select_caret.svg) no-repeat right .75rem center/10px, url(../img/select_bg.svg) repeat !important;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}
.search-field {
    background: url(../img/search_icon.png) no-repeat left 8px center;
    padding: 0 32px;
}
.input-calendar{
	background: url(../img/calendar_bg.svg) no-repeat right 10px center;
    padding: 0 32px 0 12px;
}
textarea{
	min-height: 100px;
	resize: none;
}
body.modal-open {
	overflow: hidden !important;
	padding: 0 !important;
}
.tooltip{
	font-family: 'Cairo', sans-serif !important;
}
.tooltip-inner{
	font-size: 11px;
	font-weight: 500;
	padding: 4px 8px 3px;
	background-color: #78909C;
	border-radius: 3px;
}
.tooltip.top .tooltip-arrow{
	border-top-color: #78909C;
}
.tooltip.bottom .tooltip-arrow{
	border-bottom-color: #78909C;
}
.tooltip.right .tooltip-arrow{
	border-right-color: #78909C;
}
.tooltip.left .tooltip-arrow{
	border-left-color: #78909C;
}
.modal-backdrop.in {
    filter: alpha(opacity=70);
    opacity: .7;
}
.btn-company{
	min-width: 182px;
	min-height: 32px;
	font-size: 13px;
    font-weight: 500;
    display: flex;
    align-items: center;
	padding: 0 0 0 15px;
}
.btn-company i{
	font-size: 16px;
	margin: 0 3px 0 0;
}
.btn-company span{
	min-width: 32px;
	min-height: 32px;
	font-size: 13px;
	font-weight: 500;
	border-left: 1px solid #039BE5;
	display: flex;
    justify-content: center;
    align-items: center;
	margin: 0 0 0 auto;
}
html[dir="rtl"] .btn-company{
	padding: 0 15px 0 0;
}
html[dir="rtl"] .btn-company i{
	margin: 0 0 0 3px;
}
html[dir="rtl"] .btn-company span{
	border-left: none;
	border-right: 1px solid #039BE5;
	margin: 0 auto 0 0;
}
.custom-heading{
	font-size: 14px;
	font-weight: 500;
	color: #000;
	line-height: 26px;
	display: block;
	margin: 0 0 10px;
}
.custom-heading.fw-700{
	font-weight: 700;
}
/*==========================
	Alerts code  
============================*/
.alert-wrapper {
    width: 600px;
    padding: 5px;
    background-color: #FFF;
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    border-radius: 0 0 5px 5px;
    overflow: hidden;
    box-shadow: 0px 3px 10px 0px rgb(0 0 0 / 20%);
}
.alert-wrapper .alert{
	margin: 0;
}
.alert{
	font-size: 13px;
	color: #000;
	width: 100%;
	float: left;
	padding: 15px 15px 15px 45px;
	background-position: left 15px center !important;
	min-height: 50px;
	display: flex;
	align-items: center;
	border-radius: 4px;
	position: relative;
}
.alert strong{
	display: inline-block;
	margin: 0 5px;
}
.alert i {
    font-size: 16px;
    color: #666;
    cursor: pointer;
    position: absolute;
    right: 10px;
    top: 16px;
}
.alert::before{
	content: '';
	width: 4px;
	background-color: #000;
	position: absolute;
	left: 0;
	top: 10px;
	bottom: 10px;
	border-radius: 0 5px 5px 0;
}
.alert.alert-success{
	background: #F9FFFE url(../img/success_bg.png) no-repeat;
	border-color: #2DCBAF;
}
.alert.alert-success::before{
	background-color: #2DCBAF;
}
.alert.alert-error{
	background: #FFF5F5 url(../img/error_bg.png) no-repeat;
	border-color: #D63838;
}
.alert.alert-error::before{
	background-color: #D63838;
}
.alert.alert-info{
	background: #F9FFFE url(../img/info_bg.png) no-repeat;
	border-color: #226BB2;
}
.alert.alert-info::before{
	background-color: #226BB2;
}
.alert.alert-warning{
	background: #FFFDF8 url(../img/warning_bg.png) no-repeat;
	border-color: #E5A903;
}
.alert.alert-warning::before{
	background-color: #E5A903;
}
html[dir="rtl"] .alert{
	padding: 15px 45px 15px 15px;
	background-position: right 15px center !important;
}
html[dir="rtl"] .alert i {
	right: auto;
    left: 10px;
}
html[dir="rtl"] .alert::before{
	left: auto;
	right: 0;
	border-radius: 5px 0 0 5px ;
}
/*==========================
	Site Loader code  
============================*/
.site-loader{
	user-select: none;
	display: none;
}
body.site-loading .site-loader{
	display: block;
}
.site-loader:before{
	content: '';
	background-color: rgba(0,0,0,0.8);
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 99999;
	transition: all .3s ease-in-out;
}
.site-loader-wrap{
	width: 180px;
	height: 180px;
	background-color: #FFF;
	border-radius: 5px;
	display: flex;
	justify-content: center;
	align-items: center;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);
	z-index: 999991;
	transition: all .3s ease-in-out;
}
/*==========================
	Country Picker code  
============================*/
.input-group-btn {
    vertical-align: top;
}
.disabledcontent {
    pointer-events: none;
    opacity: .6;
}
.input-group label.error {
    position: relative;
    left: -75px;
}
.cc-picker-code {
    width: 40px !important;
}
.cc-picker-code-filter {
    font-family: 'Cairo' !important;
    width: 283px !important;
    margin: 1px 0 0 -5px !important;
    z-index: 100 !important;
}
.cc-picker-code-list{
    z-index: 100 !important;
}
.input-group-btn .cc-picker-code-select-enabled {
    font-family: 'Cairo';
    height: 32px;
    border: 1px solid #ccc;
    border-right: none;
    border-radius: 3px 0 0 3px;
    padding: 0 5px;
    display: flex;
    align-items: center;
}
.cc-picker-flag{
    top: 0 !important;
}
.cc-picker-code-select-enabled::after {
    top: 13px !important;
}
html[dir="rtl"] .cc-picker-code-filter {
    margin: 1px -5px 0 0 !important;
}
html[dir="rtl"] .input-group-btn .cc-picker-code-select-enabled {
    border-right: 1px solid #ccc;
    border-left: none;
    border-radius: 0 3px 3px 0;
}
html[dir="rtl"] .input-group label.error {
	left: auto;
    right: -75px;
}
/*==========================
	Confirm Popup code  
============================*/
.confirm-wrap{
	width: 100%;
	min-height: 270px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.confirm-wrap .confirm-icon{
	font-size: 36px;
	width: 80px;
	height: 80px;
	background-color: #000;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0 0 25px;
}
.confirm-wrap.delete .confirm-icon{
	background-color: #FFDCE1;
	color: #CE001E;
}
.confirm-wrap span{
	font-size: 20px;
	font-weight: 700;
	color: #000;
	display: block;
	margin: 0 0 5px;
}
.confirm-wrap p{
	font-size: 14px;
	color: #000;
	line-height: 26px;
	margin: 0 0 25px;
}
.confirm-buttons{
	display: flex;
}
.confirm-buttons .btn {
    padding: 5px 20px;
    display: flex;
    align-items: center;
}
.confirm-buttons .btn i {
    margin: 0 5px 0 0;
}
.confirm-buttons .btn + .btn{
	margin: 0 0 0 10px;
}
html[dir="rtl"] .confirm-buttons .btn i {
    margin: 0 0 0 5px;
}
html[dir="rtl"] .confirm-buttons .btn + .btn{
	margin: 0 10px 0 0;
}
/*==========================
	Content Wrapper code  
============================*/
.left-col{
	width: 250px;	
	height: calc( 100vh - 30px );
	float: left;
	margin: 15px 0 0;
}
.right-col{
	width: calc( 100% - 265px );
	height: calc( 100vh - 30px );
	float: left;
	background-color: #FFF;
	border-radius: 15px;
	margin: 15px 0 0;
	position: relative;
	z-index: 20;
	box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.16);
}
/*==========================
	Left Col code  
============================*/
.left-col .site-logo {
    display: flex;
    justify-content: center;
	margin: 5px 0 0;
}
.action-btn ul.action-ul {
    width: 100%;
    display: flex;
    justify-content: center;
	margin: 20px 0;
}
.action-btn ul.action-ul > li + li{
	margin: 0 0 0 10px;
}
.action-btn ul.action-ul > li > a{
	font-size: 20px;
	color: #666;
	width: 36px;
	height: 36px;
	background-color: #FFF;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: all .3s ease-in-out;
}
.action-btn ul.action-ul > li:last-child > a:hover{
	color: #FE5971;
	transition: all .3s ease-in-out;
}
.action-btn .dropdown-menu{
	top: calc( 100% + 10px );
	border: none;
	border-radius: 6px;
	transform: translateX(-40%);
	box-shadow: 0 0 10px 0 rgba(0,0,0,0.25);
	-webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    display: block;
    opacity: 0;
    -webkit-transform-origin: top center;
    transform-origin: top center;
    -webkit-transform: translateX(-38%) scale(0);
    transform: translateX(-38%) scale(0);
    -webkit-transition: opacity 120ms linear, -webkit-transform 500ms cubic-bezier(0.19, 1, 0.22, 1);
    transition: opacity 120ms linear, -webkit-transform 500ms cubic-bezier(0.19, 1, 0.22, 1);
    transition: opacity 120ms linear, transform 500ms cubic-bezier(0.19, 1, 0.22, 1);
    transition: opacity 120ms linear, transform 500ms cubic-bezier(0.19, 1, 0.22, 1), -webkit-transform 500ms cubic-bezier(0.19, 1, 0.22, 1);
}
.action-btn .dropdown-toggle[aria-expanded="true"] ~ .dropdown-menu {
    -webkit-transform: translateX(-38%) scale(1);
    transform: translateX(-38%) scale(1);
    -webkit-transform-origin: top center;
    transform-origin: top center;
    opacity: 1;
    -webkit-transition: opacity 120ms linear, -webkit-transform 500ms cubic-bezier(0.19, 1, 0.22, 1);
    transition: opacity 120ms linear, -webkit-transform 500ms cubic-bezier(0.19, 1, 0.22, 1);
    transition: opacity 120ms linear, transform 500ms cubic-bezier(0.19, 1, 0.22, 1);
    transition: opacity 120ms linear, transform 500ms cubic-bezier(0.19, 1, 0.22, 1), -webkit-transform 500ms cubic-bezier(0.19, 1, 0.22, 1);
}
.action-btn .dropdown-menu:before {
    content: "";
    position: absolute;
    top: -7px;
    left: 50%;
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 7px solid #FFF;
    transform: translateX(-50%);
}
.action-btn .dropdown-menu li a{
	padding: 6px 15px;
}
.action-btn .dropdown-menu img{
	width: 18px;
	display: inline-block;
	margin: 0 5px 0 0;
	border-radius: 50%;
}
.action-btn .dropdown-menu span{
	font-size: 12px;
	font-weight: 500;
}
.action-btn .dropdown-menu i {
    font-size: 18px;
    color: #aaa;
    float: right;
	opacity: 0;
	transition: all .3s ease-in-out;
}
.action-btn .dropdown-menu>.active>a{
	color: #333;
	background-color: #FFF;
}
.action-btn .dropdown-menu>.active>a:focus, .action-btn .dropdown-menu>.active>a:hover{
	background-color: #f5f5f5;
}
.action-btn .dropdown-menu li.active i{
	color: #3BD491;
}
.action-btn .dropdown-menu li.active i, .action-btn .dropdown-menu li a:hover i{
	opacity: 1;
	transition: all .3s ease-in-out;
}
.search-wrap{
	width: 214px;
	position: relative;
	margin: 0 auto 10px;
}
.search-wrap .form-control{
	background-image: url(../img/search_bg.svg);
    background-repeat: no-repeat;
    background-position: left 10px top 7px;
    background-size: 20px;
    padding: 6px 12px 6px 35px;
	font-size: 12px;
	height: 32px;
	border: none;
	box-shadow: none;
	border-radius: 16px;
}
.search-wrap i{
    font-size: 18px;
	color: #999;
    position: absolute;
    top: 7px;
    right: 10px;
	display: none;
	cursor: pointer;
	transition: all .3s ease-in-out;
}
.search-wrap i:hover{
	color: #FE5971;
	transition: all .3s ease-in-out;
}
body.menu-search-active .search-wrap i{
	display: block;
}
.site-menu{
	height: calc( 100vh - 210px );
	position: relative;
}
body.menu-open .site-menu{
	overflow: hidden !important;
}
.site-menu ul.primary-ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
	padding: 10px 18px 0;
}
.site-menu ul.primary-ul > li{
	width: 100px;
	margin: 0 0 15px;
}
.site-menu ul.primary-ul > li > a{
	width: 100px;
	height: 90px;
	color: #333;
	background-color: #FFF;
	padding: 5px;
	border-radius: 5px;
	display: flex;
	flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
	position: relative;
	top: 0;
	box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.10);
	transition: all .3s ease-in-out;
}
.site-menu ul.primary-ul > li > a i{
	font-size: 24px;
	margin: 0 0 8px;
}
.site-menu ul.primary-ul > li > a span{
	font-size: 12px;
	font-weight: 500;
	line-height: 16px;
}
.site-menu ul.primary-ul > li:nth-child(1) > a i, .site-menu ul.primary-ul > li:nth-child(1) .secondary-menu-wrap i{
	color: #51A0E4;
}
.site-menu ul.primary-ul > li:nth-child(2) > a i, .site-menu ul.primary-ul > li:nth-child(2) .secondary-menu-wrap i{
	color: #E4A951;
}
.site-menu ul.primary-ul > li:nth-child(3) > a i, .site-menu ul.primary-ul > li:nth-child(3) .secondary-menu-wrap i{
	color: #3BD491;
}
.site-menu ul.primary-ul > li:nth-child(4) > a i, .site-menu ul.primary-ul > li:nth-child(4) .secondary-menu-wrap i{
	color: #9D6FD9;
}
.site-menu ul.primary-ul > li:nth-child(5) > a i, .site-menu ul.primary-ul > li:nth-child(5) .secondary-menu-wrap i{
	color: #E45151;
}
.site-menu ul.primary-ul > li:nth-child(6) > a i, .site-menu ul.primary-ul > li:nth-child(6) .secondary-menu-wrap i{
	color: #3ECAFF;
}
.site-menu ul.primary-ul > li:nth-child(7) > a i, .site-menu ul.primary-ul > li:nth-child(7) .secondary-menu-wrap i{
	color: #EEAF42;
}
.site-menu ul.primary-ul > li:nth-child(8) > a i, .site-menu ul.primary-ul > li:nth-child(8) .secondary-menu-wrap i{
	color: #76B954;
}
.site-menu ul.primary-ul > li:nth-child(9) > a i, .site-menu ul.primary-ul > li:nth-child(9) .secondary-menu-wrap i{
	color: #5568C5;
}
.site-menu ul.primary-ul > li:hover > a{
	top: -2px;
	box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.15);
	transition: all .3s ease-in-out;
}
.site-menu ul.primary-ul > li.active > a{
	top: 0;
	box-shadow: 0 0 0 3px rgba(120,144,156,0.3);
	transition: all .3s ease-in-out;
}
.secondary-menu-wrap {
    width: 250px;
    height: calc( 100vh - 205px);
    padding: 5px 0 0;
    position: fixed;
    left: 0;
    top: 190px;
    bottom: 0;
    background-color: #f3f3f3;
    z-index: 10;
	opacity: 0;
    transform: translateX(120%);
    transition: all .3s ease-in-out;
}
.secondary-menu-wrap.active{
	transform: translateX(0%);
	opacity: 1;
	transition: all .3s ease-in-out;
}
.secondary-menu-header {
    width: 100%;
    min-height: 50px;
    padding: 0 35px 0 0;
    background-color: #FFF;
    display: flex;
    align-items: center;
	position: relative;
	margin: 0 0 20px;
    box-shadow: 0px 2px 4px 0px rgb(0 0 0 / 16%);
}
.secondary-menu-header i{
	font-size: 24px;
	margin: 0 8px;
}
.secondary-menu-header .close-menu {
    font-size: 22px;
    color: #666 !important;
	padding: 14px 12px;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    cursor: pointer;
    margin: 0;
}
.secondary-menu-header span {
    font-size: 15px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.secondary-menu-wrap ul {
    height: calc( 100vh - 290px);
}
.search-menu-listing ul {
    height: calc( 100vh - 210px);
}
.secondary-menu-wrap ul li a, .search-menu-listing ul li a{
    font-size: 13px;
    font-weight: 500;
    color: #000;
    padding: 15px;
    display: block;
    margin: 0 0 3px;
    border-left: 5px solid transparent;
    display: flex;
    align-items: center;
    transition: all .3s ease-in-out;
}
.secondary-menu-wrap ul li a i, .search-menu-listing ul li a i{
	font-size: 20px;
	color: #78909C !important;
	display: inline-block !important;
	margin: 0 15px 0 0;
	transition: all .3s ease-in-out;
}
.secondary-menu-wrap ul li a:hover, .secondary-menu-wrap ul li.active a, .search-menu-listing ul li a:hover, .search-menu-listing ul li.active a{
	border-color: #039BE5 !important;
	background-color: #fafafa;
	transition: all .3s ease-in-out;
}
.secondary-menu-wrap ul li a:hover i, .secondary-menu-wrap ul li.active a i, .search-menu-listing ul li a:hover i, .search-menu-listing ul li.active a i{
	color: #039BE5 !important;
	transition: all .3s ease-in-out;
}
.search-menu-listing, body.menu-search-active .site-menu{
	display: none;
}
body.menu-search-active .search-menu-listing{
	display: block;
}
.search-error span {
    font-size: 13px;
    font-weight: 500;
    color: #000;
    text-align: center;
    margin: 15px 0 0;
    display: block !important;
}
/*================================
	Custom Search code 
=================================*/
.custom-search{
	width: 100%;
	float: left;
	display: none;
}
.custom-search-wrap{
	width: 100%;
	display: flex;
	border: 1px solid #e5e5e5;
	border-radius: 3px;
	margin: 10px 0 30px;
	position: relative;
}
.custom-search-heading{
	font-size: 13px;
    font-weight: 700;
    color: #000;
    line-height: 16px;
    background: #FFF;
    padding: 0 5px;
    position: absolute;
    top: -10px;
    left: 10px;
}
.custom-search .custom-search-wrap > .leftbar{
	flex: auto;
	padding: 20px 15px 5px;
}
.custom-search .custom-search-wrap > .rightbar{
	width: 105px;
	background-color: #fafafa;
	border-left: 1px solid #e5e5e5;
	display: flex;
	justify-content: center;
	align-items: center;
}
.custom-search .custom-search-wrap > .leftbar .form-control{
	font-size: 13px;
	font-weight: 500;
	border-color: #ddd;
}
.custom-search .custom-search-wrap > .rightbar .btn {
    font-size: 20px;
    width: 32px;
    height: 32px;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}
.custom-search .custom-search-wrap > .rightbar .btn + .btn{
	margin: 0 0 0 10px;
}

/*================================
	Page Header code 
=================================*/
.page-header{
	min-height: 60px;
	padding: 5px 20px;
	margin: 0;
	border: none;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	position: relative;
}
.page-header .page-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
.page-header .page-title span{
	font-size: 24px;
	font-weight: 500;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.page-header .page-title .back-btn{
	width: 34px;
	height: 34px;
	background-color: #F3F3F3;
	border-radius: 50%;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	flex: none;
	margin: 0 10px 0 0;
	cursor: pointer;
}
.page-header .page-title .back-btn a {
    display: flex;
}
.page-header .page-title .back-btn i{
	font-size: 22px;
	color: #333;
}
.page-buttons{
	display: flex;
    flex-wrap: wrap;
	margin: 0 0 0 auto;
}
.page-buttons .form-control{
	font-size: 13px;
	font-weight: 500;
	min-width: 130px;
	border-radius: 3px;
}
.page-buttons .btn:not(.btn-icon) {
	font-size: 13px;
	font-weight: 500;
	padding: 5px 19px 5px 13px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
	justify-content: center;
}
.page-buttons .btn:not(.btn-icon) i{
	font-size: 20px;
	margin: 0 7px 0 0;
}
.page-buttons .btn.btn-icon{
	width: 32px;
	height: 32px;
	padding: 0;
	border-radius: 3px;
	display: flex;
    flex-wrap: wrap;
    align-items: center;
	justify-content: center;
}
.page-buttons .btn.btn-icon i {
    font-size: 23px;
    position: relative;
    top: -1px;
}
.page-buttons .btn.btn-icon i.icon-search{
	font-size: 20px;
    top: 0;
}
.page-buttons .btn + .btn{
	margin: 0 0 0 10px;
}
.custom-header{
	width: 100%;
	display: flex;
    background-color: #F6FCFF;
	border: 1px solid #039BE5;
	border-radius: 3px;
	overflow: hidden;
	margin: 0 0 20px;
}
.custom-header > .leftbar{
    font-size: 14px;
    color: #FFF;
	width: 40px;
    min-height: 40px;
	background-color: #039BE5;
    display: flex;
    justify-content: center;
    align-items: center;
	position: relative;
}
.custom-header > .leftbar:before {
    content: "";
    position: absolute;
    top: 50%;
    right: -7px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid #039BE5;
    transform: translateY(-50%) rotate(90deg);
}
.custom-header > .rightbar {
    width: calc( 100% - 40px );
    display: flex;
    align-items: center;
    padding: 0 10px 0 15px;
}
.custom-header > .rightbar span{
	font-size: 14px;
	font-weight: 500;
	color: #039BE5;
}
.custom-header > .rightbar span strong{
	display: inline-block;
}
.custom-header > .rightbar .btn {
    font-size: 13px;
    font-weight: 500;
    padding: 5px 12px;
    display: flex;
    align-items: center;
    margin: 0 0 0 auto;
}
.custom-header > .rightbar .btn i {
    font-size: 18px;
    margin: 0 5px 0 0;
}
.custom-header.info{
	background-color: #FFFDF6;
	border-color: #E5A903;
}
.custom-header.info > .leftbar{
	font-size: 22px;
	background-color: #E5A903;
}
.custom-header.info > .leftbar:before {
    border-bottom-color:  #E5A903;
}
.custom-header.info > .rightbar span{
	color: #000;
}
.export-dropdown .dropdown-toggle {
    width: 115px;
    height: 32px;
	display: flex;
	align-items: center;
    justify-content: flex-start;
    padding: 0 10px;
    position: relative;
	border: 1px solid transparent;
    background-color: #f3f3f3;
    border-color: #f3f3f3;
	transition: all .3s ease-in-out;
}
.export-dropdown .dropdown-toggle:hover, .export-dropdown .dropdown-toggle.open{
	background-color: #eee;
	border-color: #eee;
	transition: all .3s ease-in-out;
}
.export-dropdown .dropdown-toggle span{
	font-size: 22px;
	color: #000;
	margin: 0 5px;
}
.export-dropdown .dropdown-toggle p{
	font-size: 13px;
	font-weight: 500;
	margin: 0;
}
.export-dropdown .dropdown-toggle i {
    font-size: 12px;
    color: #999;
    position: absolute;
    right: 1px;
    z-index: 10;
}
.export-dropdown .dropdown-toggle:after {
    content: '';
    width: 15px;
    background-color: #E5E5E5;
    position: absolute;
    top: -1px;
    right: -1px;
    bottom: -1px;
	border-radius: 0 3px 3px 0;
}
.export-dropdown + .btn{
	margin: 0 0 0 10px;
}
.export-dropdown .dropdown-menu{
	min-width: 170px;
	top: calc( 100% + 10px );
	left: auto;
	right: -10px;
	border: none;
	border-radius: 6px;
	transform: translateX(-40%);
	box-shadow: 0 0 10px 0 rgba(0,0,0,0.25);
	-webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    display: block;
    opacity: 0;
    -webkit-transform-origin: top right;
    transform-origin: top right;
    -webkit-transform: scale(0);
    transform: scale(0);
    -webkit-transition: opacity 120ms linear, -webkit-transform 500ms cubic-bezier(0.19, 1, 0.22, 1);
    transition: opacity 120ms linear, -webkit-transform 500ms cubic-bezier(0.19, 1, 0.22, 1);
    transition: opacity 120ms linear, transform 500ms cubic-bezier(0.19, 1, 0.22, 1);
    transition: opacity 120ms linear, transform 500ms cubic-bezier(0.19, 1, 0.22, 1), -webkit-transform 500ms cubic-bezier(0.19, 1, 0.22, 1);
}
.export-dropdown .dropdown-toggle[aria-expanded="true"] ~ .dropdown-menu {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transform-origin: top right;
    transform-origin: top right;
    opacity: 1;
    -webkit-transition: opacity 120ms linear, -webkit-transform 500ms cubic-bezier(0.19, 1, 0.22, 1);
    transition: opacity 120ms linear, -webkit-transform 500ms cubic-bezier(0.19, 1, 0.22, 1);
    transition: opacity 120ms linear, transform 500ms cubic-bezier(0.19, 1, 0.22, 1);
    transition: opacity 120ms linear, transform 500ms cubic-bezier(0.19, 1, 0.22, 1), -webkit-transform 500ms cubic-bezier(0.19, 1, 0.22, 1);
}
.export-dropdown .dropdown-menu:before {
    content: "";
    position: absolute;
    top: -7px;
    right: 3px;
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 7px solid #FFF;
    transform: translateX(-50%);
}
.export-dropdown .dropdown-menu li a {
    font-size: 13px;
    font-weight: 500;
    padding: 10px 15px;
}
.export-dropdown .dropdown-menu li a i {
    font-size: 18px;
    color: #78909C;
    display: inline-block;
    vertical-align: bottom;
    margin: 0 8px 0 0;
}
/*================================
	Breadcrumb code 
=================================*/
.breadcrumb-wrapper .breadcrumb{
	min-height: 30px;
	background-color: #fafafa;
	border-top: 1px solid #E5E5E5;
	border-bottom: 1px solid #E5E5E5;
	border-radius: 0px;
	padding: 1px 20px;
	margin: 0;
	display: flex;
}
.breadcrumb-wrapper .breadcrumb li{
	font-size: 12px;
	font-weight: 500;
	color: #666;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
}
.breadcrumb-wrapper .breadcrumb li a{
	color: #333;
}
.breadcrumb-wrapper .breadcrumb li i {
    font-size: 18px;
    color: #aaa;
    display: inline-block;
    vertical-align: middle;
}
.breadcrumb-wrapper .breadcrumb li:first-child a i{
	color: #039BE5;
	position: relative;    
	top: -1px;
}
.breadcrumb>li+li:before{
	display: none;
}
/*================================
	Custom Table code 
=================================*/
.custom-table{
	width: 100%;
	float: left;
	/* padding: 20px; */
	margin: 0 0 15px;
}
.custom-box-body .custom-table{
	float: none;
}
.custom-table .table-counter{
	font-size: 18px;
    font-weight: 700;
    color: #333;
	width: 100%;
	float: left;
    display: flex;
    flex-wrap: wrap;
}
.custom-table .table-meta {
	width: 100%;
    display: flex;
    flex-wrap: wrap;
	margin: 0 0 20px;
}
.custom-filter.flex-auto {
    flex: auto;
}
.custom-table .table-meta .custom-filter .form-control{
	font-size: 13px;
	font-weight: 500;
	min-width: 200px;
	height: 36px;
	border-radius: 3px;
}
.custom-table .table-meta .custom-filter + .custom-filter,
.custom-table .table-meta .custom-filter + .leftbar,
.custom-table .table-meta > .leftbar + .rightbar{
	margin: 0 0 0 10px;
}
.custom-table .table-meta > .leftbar.f-auto{
	flex: auto;
}
.custom-table .table-meta .form-control.search-field{
	font-size: 13px;
	font-weight: 500;
	min-width: 250px;
	border: 1px solid #ddd;
	height: 36px;
	border-radius: 3px;
}
.custom-table .table-meta > .rightbar .btn{
	font-size: 13px;
	font-weight: 500;
	min-height: 36px;
	padding: 7px 26px;
	text-transform: uppercase;
}
.custom-table .table-meta > .rightbar .btn + .btn{
	margin: 0 0 0 7px;
}

.custom-table .table-responsive{
	overflow: visible;
}
.custom-table .table{
	border-color: transparent;
}
.custom-table .table>thead>tr>th{
	font-size: 12px;
	font-weight: 700;
	color: #000;
	background-color: #EEF3F5;
	border: none;
	padding: 6px 12px;
	letter-spacing: 0.30px;
	text-transform: uppercase;
	vertical-align: middle;
}
.custom-table .table>tbody>tr>td{
	font-size: 13px;
	font-weight: 500;
	color: #222;
	padding: 11px 12px;
	border: none;
	border-bottom: 1px solid #eee;
	vertical-align: middle;
}
.custom-table .table-striped>tbody>tr:nth-of-type(even) {
    background-color: #fafafa;
}
.custom-table .table-striped>tbody>tr:nth-of-type(odd) {
    background-color: #FFF;
}
.custom-table .table>tbody>tr>td .form-control{
	height: 28px;
}
.custom-table .table>tbody>tr>td .form-control[disabled], .custom-table .table>tbody>tr>td .form-control[readonly]{
	background-color: #F3F3F3;
	border-color: #f6f6f6;
}
.custom-table .table>thead>tr>th.w-50, .custom-table .table>tbody>tr>td.w-50{
	width: 50px;
}
.custom-table .table>thead>tr>th.w-60, .custom-table .table>tbody>tr>td.w-60{
	width: 60px;
}
.custom-table .table>thead>tr>th.w-100, .custom-table .table>tbody>tr>td.w-100{
	width: 100px;
}
.custom-table .table>thead>tr>th.w-120, .custom-table .table>tbody>tr>td.w-120{
	width: 120px;
}
.custom-table .table>thead>tr>th.w-130, .custom-table .table>tbody>tr>td.w-130{
	width: 130px;
}
.custom-table .table>thead>tr>th.w-150, .custom-table .table>tbody>tr>td.w-150{
	width: 150px;
}
.custom-table .table>thead>tr>th.w-200, .custom-table .table>tbody>tr>td.w-200{
	width: 200px;
}
.custom-table .table > thead > tr > th.w-250, .custom-table .table > tbody > tr > td.w-250 {
    width: 250px;
}
.custom-table .table > thead > tr > th.w-300, .custom-table .table > tbody > tr > td.w-300 {
    width: 300px;
}
.custom-table .table>tbody>tr>td span{
	display: block;
	margin: 0 0 4px;
}
.custom-table .table>tbody>tr>td p{
	font-size: 11px;
	font-weight: 500;
	color: #666;
	letter-spacing: 0.30px;
	margin: 0;
}
.custom-table .table>tbody>tr>td .detail-badge, .custom-table .table>tbody>tr>td .status-badge, .custom-table .table>tbody>tr>td:last-child i{
	font-size: 24px;
	color: #78909c;
	margin: 0;
	cursor: pointer;
}
.custom-table .table>tbody>tr>td i.text-red{
	color: #FE5971;
}
.custom-table .table>tbody>tr>td .status-badge{
	cursor: default;
}
.custom-table .table>tbody>tr>td .status-badge.active, .custom-table .table>tbody>tr>td:last-child .status-badge.active i{
	color: #2DCBAE;
}
.custom-table .table>tbody>tr>td .status-badge.in-active, .custom-table .table>tbody>tr>td:last-child .status-badge.in-active i{
	color: #FE5971;
}
.custom-table .table>tbody>tr>td i[data-toggle="modal"]{
	cursor: pointer;
}
.custom-table .table>tbody>tr>td .table-badge, .ticket-badge {
    font-size: 12px;
    font-weight: 500;
    color: #000;
    padding: 2px 10px 3px;
    border: 1px solid #ccc;
    border-radius: 3px;
    display: inline-block;
    margin: 0;
}
.custom-table .table>tbody>tr>td .table-badge.green, .ticket-badge.green{
	color: #20B499;
	border-color: #20B499;
}
.custom-table .table>tbody>tr>td .table-badge.yellow, .ticket-badge.yellow{
	color: #E5A903;
	border-color: #E5A903;
}
.custom-table .table>tbody>tr>td .table-badge.red, .ticket-badge.red{
	color: #FE5971;
	border-color: #FE5971;
}
.custom-table .table>tbody>tr>td .table-badge.blue, .ticket-badge.blue{
	color: #039BE5;
	border-color: #039BE5;
}
.custom-table .table>tbody>tr>td .table-badge.brown, .ticket-badge.brown{
	color: #C59100;
	border-color: #C59100;
}
.custom-table .table-dropdown {
	float: right;
}
.custom-table .table-dropdown .dropdown-toggle{
	width: 32px;
	height: 32px;
	border-radius: 50%;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.3s ease-in-out;;
}
.custom-table .table-dropdown .dropdown-toggle i{
	font-size: 22px;
	color: #666;
	transition: all 0.3s ease-in-out;;
}
.custom-table .table-dropdown:hover .dropdown-toggle{
	background-color: #f2f2f2;
	transition: all 0.3s ease-in-out;;
}
.custom-table .table-dropdown:hover .dropdown-toggle i{
	color: #333;
	transition: all 0.3s ease-in-out;;
}
.custom-table .table-dropdown .dropdown-menu{
	min-width: 140px;
	border: none;
    top: 50%;
    left: auto;
    right: calc( 100% + 3px );
	transform: translateY(-50%);
	display: block;
	opacity: 0;
	z-index: -1;
	margin: 0 -15px 0 0;
	box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.25);
	transition: all 0.3s ease-in-out;;
}
.custom-table .table-dropdown:hover .dropdown-menu{
	opacity: 1;
	z-index: 999;
	margin: 0 !important;
	transition: all 0.3s ease-in-out;;
}
.custom-table .table-dropdown .dropdown-menu:before {
    content: "";
    position: absolute;
    top: 50%;
    right: -10px;
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 7px solid #FFF;
    transform: translateY(-50%) rotate(90deg);
}
.custom-table .table-dropdown .dropdown-menu li a{
	font-size: 12px;
	font-weight: 500;
	color: #222;
	padding: 7px;
	display: flex;
    flex-wrap: wrap;
    align-items: center;
}
.custom-table .table-dropdown .dropdown-menu li a i{
	font-size: 18px !important;
	color: #78909C;
	display: inline-block;
	margin: 0 8px 0 0 !important;
	position: relative;
    right: -10px;
	transition: all 0.3s ease-in-out;;
}
.custom-table .table-dropdown:hover .dropdown-menu li a i{
    right: 0;
	transition: all 0.3s ease-in-out;;
}
.custom-table .table-dropdown .dropdown-menu li.li-delete a{
	color: #E23636;
}
.custom-table .table-dropdown .dropdown-menu li.text-primary a{
	color: var(--primary-color);
}
.custom-table .table-dropdown .dropdown-menu li + li a{
	margin-top: 5px;
}
.custom-table.config-table .table>tbody>tr>td:first-child{
	font-size: 12px;
	font-weight: 700;
	color: #000;
	line-height: 16px;
	letter-spacing: 0.3px;
	width: 200px;
	border-bottom: 1px solid #E1E7E9;
	border-right: 5px solid #FFF;
	background-color: #EEF3F5;
}
.custom-table.config-table .table>tbody>tr:nth-child(even)>td:first-child{
	background-color: #e6edf1;
}
.custom-table.config-table .table>tbody>tr:first-child>td {
    border-top: 5px solid #FFF;
}
.table-pagination{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin: 0 0 15px;
}
.table-pagination > .leftbar{
	display: flex;
	flex: auto;
}
.table-pagination > .leftbar span{
	font-size: 12px;
	font-weight: 500;
	color: #666;
}
.table-pagination .pagination{
	margin: 0;
}
.table-pagination .pagination ul{
	display: flex;
	flex-wrap: wrap;
}
.table-pagination .pagination li > *{
	font-size: 13px;
	font-weight: 500;
	color: #666;
	width: 24px;
	height: 24px;
	background: rgb(250,250,250);
	background: linear-gradient(180deg, rgba(250,250,250,1) 0%, rgba(238,238,238,1) 100%);
	border: 1px solid #ddd;
	border-radius: 3px;
	letter-spacing: 0.5px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	transition: all .3s ease-in-out;
}
.table-pagination .pagination li:not(:last-child) > *{
	margin: 0 5px 0 0;
}
.table-pagination .pagination li i{
	font-size: 22px;
}
.table-pagination .pagination li i[class^='icon-skip']{
	font-size: 20px;
}
.table-pagination .pagination li > *:hover{
	color: #333;
	border-color: #999;
	background: rgb(250,250,250);
	background: linear-gradient(180deg, rgba(250,250,250,1) 0%, rgba(221,221,221,1) 100%);
	transition: all .3s ease-in-out;
}
.table-pagination .pagination li.active > *{
	color: #039BE5;
	border-color: #039BE5;
	background: rgb(250,250,250);
	background: linear-gradient(180deg, rgba(250,250,250,1) 0%, rgba(221,221,221,1) 100%);
	transition: all .3s ease-in-out;
}

.page-buttons .table-pagination{
	width: auto;
	margin: 0 10px 0 0;
}
html[dir="rtl"] .page-buttons .table-pagination{
	margin: 0 0 0 10px;
}
.page-buttons .table-pagination .pagination li > *{
	width: 32px;
	height: 32px;
}
.page-buttons .table-pagination .pagination li i{
	font-size: 30px;
}
.table-pagination .pagination li i[class^='icon-skip']{
	font-size: 25px;
}
/*================================
	Custom Box code 
=================================*/
.custom-box{
	width: calc( 100% + 20px );
    margin: -10px -10px 20px;
}
.custom-box-header{
	width: 100%;
	min-height: 44px;
	background-color: #FFF;
	display: flex;
	align-items: center;
	padding: 0 15px;
	position: relative;
	box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.15);
}
.custom-box-header span{
	font-size: 16px;
	font-weight: 500;
	color: #039BE5;
	flex: auto;
}
.custom-box-badge {
    font-size: 12px;
    font-weight: 500;
    font-style: normal;
    padding: 2px 10px;
    border: 1px solid #000;
    border-radius: 3px;
    display: inline-block;
    margin: 0 5px;
}
.custom-box-badge.green{
	color: #20B499;
	border-color: #20B499;
}
.custom-box-badge.red{
	color: #FE5971;
	border-color: #FE5971;
}
.custom-box-header p{
	font-size: 15px;
	font-weight: 500;
	color: #666;
	margin: 0;
}
.custom-box-body{
	background-color: #FFF;
	padding: 15px 15px 5px;
	box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.05);
}
.company-listing {
	margin: 5px 0 0;
}
.custom-listing ul{
	display: flex;
	flex-wrap: wrap;
}
.custom-listing ul li{
	width: 50%;
	display: flex;
	margin: 0 0 15px;
}
.custom-listing.custom-listing-1 ul li{
	width: 32%;
}
.custom-listing.custom-listing-1 .clearfix{
	width: 30%;
}
.custom-listing ul li.w-100{
	width: 100%;
}
.custom-listing ul li > .leftbar{
	width: 32px;
	height: 32px;
	font-size: 22px;
	color: #78909C;
	background-color: #eff2f3;
	border-radius: 3px;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 3px 10px 0 0;
}
.custom-listing ul li > .rightbar span{
	font-size: 13px;
	font-weight: 500;
	color: #888;
	display: block;
	margin: 0 0 -2px;
}
.custom-listing ul li > .rightbar p{
	font-weight: 500;
	color: #333;
	margin: 0;
}
.custom-listing ul li > .rightbar p.fs-16{
	font-size: 16px;
	color: #000;
}
.custom-listing ul li > .rightbar p i {
    font-size: 9px;
    font-weight: 700;
    font-style: normal;
    color: #226BB2;
	padding: 3px 7px;
    border: 1px solid #226BB2;
	display: inline-block;
    border-radius: 2px;
}
.company-listing ul.listing-ul > li{
	min-height: 110px;
	display: flex;
	border: 1px solid #A8BAC4;
	margin: 0 0 15px;
	border-radius: 4px;
	box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.10);
}
.company-listing ul.listing-ul > li > .leftbar {
    width: 26px;
    background-color: #039BE5;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: -1px 0 -1px -1px;
    border-radius: 4px 0 0 4px;
}
.company-listing ul.listing-ul > li > .rightbar{
	width: calc( 100% - 26px );
	padding: 15px 15px 0;
}
.company-listing ul.listing-ul > li > .leftbar span {
    font-size: 13px;
    font-weight: 500;
    color: #FFF;
    transform: rotate(-90deg);
    display: block;
	letter-spacing: 0.8px;
}
.company-meta{
	width: 100%;
	display: flex;
	margin: 0 0 18px;
}
.company-meta .company-id{
	font-size: 14px;
	font-weight: 700;
	color: #000;
	padding: 2px 11px;
	background-color: #F1F5F8;
	border: 1px solid #BDC8CE;
	border-radius: 3px 0 0 3px;
}
.company-meta .company-status{
	font-size: 12px;
	font-weight: 500;
	color: #000;
	padding: 2px 11px;
	border: 1px solid #BDC8CE;
	border-radius: 0 3px 3px 0;
	margin: 0 0 0 -1px;
	display: flex;
    align-items: center;
}
.company-listing ul.listing-ul > li.lic-purchased > .leftbar{
	background-color: #039BE5;
}
.company-listing ul.listing-ul > li.lic-purchased .company-meta .company-status{
	border-color: #20B499;
	color: #20B499;
}
.company-listing ul.listing-ul > li.lic-demo > .leftbar{
	background-color: #E5A903;
}
.company-listing ul.listing-ul > li.lic-demo .company-meta .company-status{
	border-color: #FE5971;
	color: #FE5971;
}
.ticket-listing ul li{
	float: left;
	font-size: 11px;
	font-weight: 500;
	color: #666;
	line-height: 16px;
	letter-spacing: 0.3px;
	position: relative;
}
.ticket-listing ul li + li{
	padding: 0 0 0 8px;
	margin: 0 0 0 8px;
}
.ticket-listing ul li + li:before{
	content: '';
	width: 1px;
	height: 12px;
	background-color: #ccc;
	position: absolute;
	left: 0;
	top: 2px;
}
.tree-checkbox ul li{
	width: 100%;
	float: left;
	margin: 0 0 5px;
}
.tree-checkbox ul ul li {
    padding: 0 0 0 25px;
}
html[dir="rtl"] .tree-checkbox ul ul li {
    padding: 0 25px 0 0;
}
/*=======================
	Ticket code
========================*/
.ticket-wrapper {
    width: 100%;
    height: calc( 100vh - 120px);
    position: relative;
    overflow: hidden;
}
.ticket-wrapper > .leftbar{
	width: 100%;
	float: left;
	position: relative;
	transition: all .3s ease-in-out;
}
.ticket-wrapper.col-open > .leftbar{
	width: calc( 100% - 300px );
	transition: all .3s ease-in-out;
}
.ticket-wrapper > .rightbar{
	width: 300px;
	float: right;
	background-color: #f6f6f6;
	border-left: 1px solid #ddd;
	position: relative;
	position: absolute;
    right: -300px;
    top: 0;
    bottom: 0;
	border-radius: 0 0 15px 0;
	box-shadow: -2px 0 6px rgba(0,0,0,0.0);
	transition: all .3s ease-in-out;
}
.ticket-wrapper.col-open > .rightbar{
	right: 0;
	box-shadow: -2px 0 6px rgba(0,0,0,0.08);
	transition: all .3s ease-in-out;
}
.ticket-meta-panel{
	position: absolute !important;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}
.ticket-meta-wrap{
	padding: 10px;
	height: calc( 100vh - 76px);
	overflow-y: auto;
}
.ticket-meta-wrap.custom-scroll > .mCustomScrollBox > .mCSB_container{
	padding: 10px;
}
.panel-cursor{
	width: 20px;
    height: 100px;
	background-color: #FFF;
	background-image: url(../img/panel_bars_vertical.svg), url(../img/panel_bars_vertical.svg);
    background-repeat: no-repeat;
    background-size: 8px;
    background-position: center top 12px, center bottom 12px;
    border-radius: 3px 3px 0 0;
	display: flex;
    align-items: center;
    justify-content: center;
	cursor: pointer;
	position: absolute;
    left: -20px;
    top: 50%;
    margin: -50px 0 0;
    box-shadow: 0px 1px 10px 0px rgb(0 0 0 / 10%);
	transition: all .3s ease-in-out;
}
.panel-cursor i {
    font-size: 18px;
    color: #666;
    display: block;
	transition: all .3s ease-in-out;
}
.ticket-wrapper.col-open > .rightbar .panel-cursor i {
    transform: rotate(180deg);
    transition: all .3s ease-in-out;
}
.message-wrapper {
    width: 100%;
	height: calc( 100vh - 240px );
	overflow-y: auto;
    position: relative;
	padding: 20px 0 0;
}
.ticket-wrapper.ticket-detail .message-wrapper{
	height: calc( 100vh - 120px );
}
ul.message-ul{
	padding: 0 20px;
}
ul.message-ul li.message-li {
    display: flex;
	flex-wrap: wrap;
	margin: 0 0 10px;
}
ul.message-ul li.message-li .message-row{
	display: flex;
	flex-wrap: wrap;
}
ul.message-ul li.message-li:nth-child(even){
	justify-content: flex-end;
}
ul.message-ul li.message-li:nth-child(even) .message-row{
	flex-direction: row-reverse;
}
ul.message-ul li.message-li .message-row > .leftbar{
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: center;
	padding: 0 0 20px;
}
ul.message-ul li.message-li .message-row > .rightbar{
	min-width: 250px;
	max-width: 480px;
	flex: 1;
	padding: 0 7px;
}
ul.message-ul li.message-li .message-row > .rightbar ul li:not(:last-child){
	margin:  0 0 10px;
}
ul.message-ul li.message-li .message-row > .rightbar ul li:not(:last-child) .message-meta span{
	padding: 0 15px;
}
ul.message-ul li.message-li .message-row > .rightbar ul li:last-child .message-wrap:before {
    content: '';
    background: url(../img/blue-corner.svg) no-repeat;
    position: absolute;
    bottom: -3px;
    left: -17px;
    width: 20px;
    height: 20px;
    transform: rotate(90deg);
}
ul.message-ul li.message-li:nth-child(even) .message-row > .rightbar ul li:last-child .message-wrap:before {
    background: url(../img/gray-corner.svg) no-repeat;
    transform: rotate(90deg);
    left: auto;
    right: -14px;
    transform: rotate(180deg);
    bottom: 0;
}
ul.message-ul li.message-li .message-row > .leftbar span{
	font-size: 13px;
	font-weight: 700;
	color: #FFF;
	width: 30px;
	height: 30px;
	text-transform: uppercase;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	background-color: #039BE5;
	border-radius: 50%;
}
ul.message-ul li.message-li:nth-child(even) .message-row > .leftbar span{
	background-color: #5E7185;
}
ul.message-ul li.message-li .message-row > .rightbar .message-wrap{
	padding: 10px 14px;
	background-color: #f2fafe;
	border-radius: 5px;
	position: relative;
	margin: 0 15px;
}
ul.message-ul li.message-li:nth-child(even) .message-row > .rightbar .message-wrap{
	background-color: #f1f3f5;
}
ul.message-ul li.message-li .message-row > .rightbar .message-wrap .message-span{
	font-size: 13px;
	color: #202123;
	line-height: 18px;
	word-wrap: break-word;
}
ul.message-ul li.message-li .message-row > .rightbar .message-meta span{
	font-size: 11px;
	font-weight: 500;
	color: #63697B;
	line-height: 12px;
	display: block;
	margin: 5px 0;
}
ul.message-ul li.message-li:nth-child(even) .message-row > .rightbar .message-meta span{
	text-align: right;
}
.message-box {
    width: 100%;
    float: left;
	padding: 0 10px;
	background-color: #FFF;
    border-top: 1px solid #ddd;
    position: relative;
    min-height: 120px;
    display: flex;
    flex-wrap: wrap;
	align-items: center;
	border-radius: 0 0 0 15px;
}
.ticket-wrapper.ticket-detail .message-box{
	display: none;
}
.ticket-wrapper:not(.col-open) .message-box{
	border-radius: 0 0 15px 15px;
}
.message-box > .leftbar{
	width: calc( 100% - 100px );
	float: left;
	height: 119px;
	overflow-y: auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	cursor: text;
	-ms-overflow-style: none;
    scrollbar-width: none;
}
.message-box > .leftbar::-webkit-scrollbar { 
    display: none;
}
.message-box > .rightbar{
	width: 100px;
	float: right;
}
.message-box > .rightbar ul {
	display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}
.message-box > .rightbar ul li{
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
}
.message-box > .rightbar ul li.send-li{
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background-color: #039BE5;
}
.message-box > .rightbar ul li.send-li i {
    font-size: 20px;
    color: #FFF;
    position: relative;
    left: 2px;
}
.message-box > .rightbar ul li:not(.send-li) i{
	font-size: 22px;
	color: #575F6A;
}
.message-box .form-control {
    border: none !important;
    box-shadow: none !important;
    min-height: unset;
    height: 40px;
}
.ticket-panel-header {
    width: 100%;
    min-height: 44px;
    background-color: #FFF;
    padding: 0 15px;
    border-bottom: 1px solid #ddd;
    display: flex;
    align-items: center;
	box-shadow: 0px 1px 3px 0px rgb(0 0 0 / 15%);
}
.ticket-panel-header > .leftbar{
	flex: auto;
}
.ticket-panel-header > .leftbar span{
	font-size: 16px;
	font-weight: 500;
	color: #039BE5;
}
.ticket-panel-header > .rightbar .btn{
	font-size: 12px;
    font-weight: 500;
    padding: 4px 15px;
}
.ticket-panel-body{
	width: calc( 100% - 30px );
    background-color: #FFF;
    display: flex;
    margin: 15px;
    padding: 7px 15px 10px;
    border: 1px dashed #aaa;
    border-radius: 3px;
}
.ticket-panel-body ul {width: 100%;}
.ticket-panel-body ul li{
	width: 100%;
	font-size: 12px;
	font-weight: 500;
	color: #333;
	line-height: 23px;
	display: flex;
}
.ticket-panel-body ul li:not(:last-child){
	margin: 0 0 5px;
}
.ticket-panel-body ul li .ticket-info-left{
	width: 50%;
}
.ticket-panel-body ul li .ticket-info-right{
	width: 50%;
	text-align: right;
}
.ticket-panel-body ul li .btn{
	font-size: 12px;
	font-weight: 500;
	padding: 4px 14px;
}
.ticket-panel-body + .btn{
	width: calc( 100% - 30px );
	font-size: 13px;
	font-weight: 500;
	background-color: #FFF;
	padding: 8px 12px;
	margin: -5px 15px 15px;
}
.history-body{
	background-color: #f3f3f3;
}
.history-box{
	width: 100%;
	float: left;
	padding: 15px 20px 0;
	background-color: #FFF;
	border: 1px solid #A8BAC4;
	border-radius: 4px;
	margin: 0 0 10px;
	box-shadow: 0px 2px 4px 0px rgb(0 0 0 / 10%);
}
.serial-badge{
	font-size: 14px;
	font-weight: 700;
	color: #000;
	line-height: 22px;
	padding: 1px 11px;
	margin: 0 0 10px;
	display: inline-block;
	background-color: #F1F5F8;
	border: 1px solid #BDC8CE;
	border-radius: 3px;
}
.history-box ul li{
	width: 50%;
	float: left;
	margin: 0 0 15px;
}
.history-box ul li.w-100{
	width: 100%;
}
.history-box ul li span{
	font-size: 13px;
	font-weight: 500;
	color: #888;
	line-height: 22px;
	display: block;
	margin: 0 0 -5px;
}
.history-box ul li p{
	font-size: 14px;
	font-weight: 500;
	color: #333;
	line-height: 22px;
	margin: 0;
}
.price-plan-listing ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.price-plan-listing ul li{
	width: 19%;
	margin: 0 0 20px;
}
fieldset{
	width: 100%;
	padding: 0 15px 15px;
	border: 1px solid #ddd;
	border-radius: 3px;
}
fieldset legend{
	width: auto;
	font-size: 13px;
	font-weight: 700;
	color: #000;
	border: none;
	margin: 0 0 10px;
	background-color: #FFF;
}
fieldset hr{
	border-color: #ddd;
	margin: 15px -15px;
}
.price-plan-listing fieldset .row{
	margin: 0 -5px;
}
.price-plan-listing fieldset .row [class*=col]{
	padding: 0 5px;
}
.row.d-flex > [class*=col]{
	display: flex;
}
.row.d-flex > [class*=col] .price-plan-listing{
	width: 100%;
	border: 1px solid #ddd;
	border-radius: 3px;
}
.row.d-flex > [class*=col] .price-plan-listing > fieldset{
	border: none;
}
.row.d-flex > [class*=col] .price-plan-listing > fieldset > legend{
	margin: 0;
	position: relative;
	top: -10px;
}
.price-plan-listing ul li fieldset label{
	margin: 18px 0 3px;
}
.ticket-empty-wrap{
	display: none;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.ticket-wrapper.ticket-empty .ticket-empty-wrap{
	height: calc( 100vh - 122px );
	display: flex;
}
.ticket-empty-wrap img{
	margin: 0 0 15px;
}
.ticket-empty-wrap span{
	font-size: 13px;
	font-weight: 500;
	color: #333;
	line-height: 16px;
	display: block;
}
.ticket-wrapper.ticket-empty .message-wrapper, .ticket-wrapper.ticket-empty .message-box{
	display: none;
}
/*=======================
	Tree code
========================*/
.tree-wrapper{
	width: 100%;
	float: left;
	margin: 0 0 25px;
}
.tree-wrapper ul {
	width: 100%;
	float: left;
	padding: 3px 0 0;
	border-left: 1px dotted #aaa;
	position: relative;
}
.tree-wrapper ul::after{
    content: '';
    width: 5px;
    height: 9px;
    background: #FFF;
    display: block;
    position: absolute;
    left: -1px;
    bottom: 0px;
}
.tree-wrapper ul ul {
	margin: 10px 0 0 6px;
}
.tree-wrapper ul li{
	width: 100%;
	float: left;
	padding: 0 0 0 15px;
	margin: 0 0 10px;
	position: relative;
}
.tree-wrapper ul li:last-child{	margin: 0; }
.tree-wrapper ul li:before {
	content: '';
    width: 10px;
    border-top: 1px dotted #aaa;
    position: absolute;
    top: 7px;
    left: 0;
}
.tree-wrapper ul li .custom-control{
	font-size: 12px;
	font-weight: 500;
	color: #333;
	margin: 0;
}
.tree-wrapper ul li .custom-control .custom-indicator{
	width: 15px;
	height: 15px;
}
.tree-wrapper ul li .custom-control.custom-checkbox .custom-indicator:after {
    top: 1px;
    left: 4px;
    width: 5px;
    height: 9px;
}
/*=======================
	Support Team code
========================*/
.support-wrap > .leftbar{
	width: 300px;
	float: left;
}
.support-wrap > .rightbar{
	width: calc( 100% - 330px );
	float: right;
}
.support-empty-wrap{
	width: 100%;
	min-height: 300px;
	float: left;
	background-color: #fafafa;
	border: 1px solid #eee;
	border-radius: 5px;
	display: none;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.support-empty-wrap span{
	font-size: 13px;
	font-weight: 500;
	color: #333;
	line-height: 16px;
	letter-spacing: 0.3px;
	margin: 10px 0 0;
}
.support-empty .support-empty-wrap{
	display: flex;
}
.support-empty .table-wrapper, .support-empty .table-pagination{
	display: none;
}
.support-heading {
    font-size: 12px;
    font-weight: 700;
    color: #000;
    line-height: 16px;
    letter-spacing: 0.3px;
    padding: 7px 12px;
    background-color: #EEF3F5;
    display: block;
    text-transform: uppercase;
    border-radius: 3px;
}
.support-listing ul li{
	width: 100%;
	float: left;
	padding: 12px;
	background-color: #FFF;
	position: relative;
	cursor: pointer;
	border-bottom: 1px solid #eee;
}
.support-listing ul li:nth-child(even){
	background-color: #fafafa;
}
.support-listing ul li i {
    font-size: 22px;
    color: #039BE5;
    position: absolute;
    top: 40%;
    right: 3px;
    transform: translateY(-50%);
    display: none;
}
.support-listing ul li span{
	font-size: 13px;
	color: #222;
	line-height: 16px;
	letter-spacing: 0.3px;
	display: block;
}
.support-listing ul li p{
	font-size: 11px;
	color: #656565;
	line-height: 16px;
	letter-spacing: 0.3px;
	display: inline-block;
	margin: 0;
	position: relative;
}
.support-listing ul li p + p {
    padding: 0 0 0 9px;
    margin: 0 0 0 3px;
}
.support-listing ul li p + p::before{
	content: '';
	width: 1px;
	height: 10px;
	background-color: #d3d3d3;
	position: absolute;
	left: 0;
	top: 3px;
}
.support-listing ul li.active i{
	display: block;
}
.support-listing ul li.active span{
	font-weight: 700;
	color: #000;
}
/*==========================
	Login Page code  
============================*/
.login-page{
	padding: 0 0 60px;
    overflow: auto;
	background-color: #FFF;
}
.login-page .alert{
	float: none;
	max-width: 350px;
	margin: 0 auto 30px;
}
.header-login{
	padding: 30px 0;
}
.header-login img{
	display: block;
	margin: 0 auto;
}
.login-box {
    width: 100%;
    max-width: 350px;
    padding: 20px 20px 0;
    margin: 0 auto;
    border: 1px solid #ddd;
    border-radius: 4px;
    position: relative;
}
.login-heading {
    font-size: 24px;
    font-weight: 500;
    color: #222;
    display: block;
    margin: 0 0 17px;
}
.login-box .form-group{
	margin-bottom: 20px;
}
.login-box label{
	font-size: 14px;
	font-weight: 700;
	color: #111;
}
.login-box .form-control{
	height: 34px;
	border-color: #aaa;
}
.login-box .btn{
	width: 100%;
    background: #3391e1;
    background: -moz-linear-gradient(top, #3391e1 0%, #1369b2 100%);
    background: -webkit-linear-gradient(top, #3391e1 0%,#1369b2 100%);
    background: linear-gradient(to bottom, #3391e1 0%,#1369b2 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3391e1', endColorstr='#1369b2',GradientType=0 );
    border: 1px solid #055FAB;
	margin: 0 0 10px;
}
.login-box-footer {
    min-height: 48px;
    background: #fafafa;
    border-top: 1px solid #ddd;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    width: calc( 100% + 40px );
    position: relative;
    left: -20px;
}
html[dir="rtl"] .login-box-footer{
	left: auto;
	right: -20px;
}
.login-box-footer span {
    font-size: 13px;
    font-weight: 500;
    color: #000;
    display: block;
}
.login-box-footer span a {
    font-weight: 500;
    display: inline-block;
    color: #2167CF;
	margin: 0 3px;
    text-decoration: none;
}
.footer-login{
	width: 100%;
	min-height: 43px;
	background-color: #FAFAFA;
	border-top: 1px solid #ddd;
	position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
}
.footer-login span{
	font-size: 12px;
	color: #666;
}
/*==========================
	No Found & Reset App code  
============================*/
.reset-app, .no-found{
	width: 100%;
    min-height: calc( 100vh - 160px );
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.reset-app img{
	max-width: 270px;
	margin: -12px 0 10px;
}
.no-found img{
	max-width: 86px;
	margin: 0 0 10px;
}
.reset-app span, .no-found span{
	font-size: 13px;
	font-weight: 500;
	color: #000;
	line-height: 16px;
	letter-spacing: 0.30px;
	margin: 0 0 20px;
}
.reset-app .btn {
    font-size: 13px;
    font-weight: 500;
    padding: 6px 22px;
    display: flex;
    align-items: center;
}
.reset-app .btn i{
	font-size: 18px;
	margin: 0 5px 0 0;
}
/*==========================
	Dashboard Page Code  
============================*/
.dashboard-box{
	width: 100%;
	float: left;
	min-height: 170px;
	background-color: #FFF;
	padding: 15px 20px 20px;
	border-radius: 5px;
	margin: 0 0 20px;
	position: relative;
	overflow: hidden;
    box-shadow: 0px 1px 7px 0px rgb(0 0 0 / 7%);
}
.dashboard-box.pd-0{
	padding: 0;
}
.dashboard-sub-box {
    padding: 15px 20px 20px;
}
.dashboard-box.m-h-365{
	min-height: 365px;
}
.dashboard-box.pd-btm-0{
	padding-bottom: 0;
}
.dashboard-box-header{
	display: flex;
	align-items: center;
}
.dashboard-box-header > .leftbar{
	flex: 1;
}
.dashboard-box-header > .leftbar span{
	font-size: 22px;
	font-weight: 500;
	color: #000;
	letter-spacing: .3px;
	display: block;
	position: relative;
	margin: 0 0 20px;
}
.dashboard-box-header > .leftbar p{
	font-size: 14px;
	font-weight: 500;
	color: #999;
	line-height: 16px;
	margin: -20px 0 20px;
}
.dashboard-box-header > .rightbar .form-control{
	font-size: 13px;
	font-weight: 500;
	min-width: 100px;
	border-radius: 3px;
	margin: 0 0 15px;
}
.dashboard-box .custom-table, .dashboard-box .custom-table .table{
	margin: 0;
}
.dashboard-box .highcharts-yaxis-grid .highcharts-grid-line, .dashboard-box .highcharts-xaxis .highcharts-axis-line{
	stroke: #F0F0F0;
}
.dashboard-box .highcharts-title{
	font-family: 'Cairo';
	font-size: 22px !important;
	font-weight: 700;
	color: #000 !important;
	fill: #000 !important;
}
.dashboard-box .product-chart .highcharts-title{
	font-size: 24px !important;
	color: #C59100 !important;
	fill: #C59100 !important;
}
.highcharts-legend-item{
	font-family: 'Cairo';
	font-size: 13px;
	font-weight: 500;
	color: #000;
}
.product-chart > div{
	float: left;
}
.dashboard-icon-box {
    width: 100px;
    height: 100px;
    position: absolute;
    left: -35px;
    top: -35px;
	border-radius: 50%;
}
.dashboard-icon-box i{
	font-size: 25px;
    position: absolute;
    left: 50%;
    top: 50%;
}
.dashboard-icon-box.green{
	background-color: #eaf5e5;
}
.dashboard-icon-box.green i{
	color: #76B954;
}
.dashboard-icon-box.pink{
	background-color: #ffe6ea;
}
.dashboard-icon-box.pink i{
	color: #FE5971;
}
.dashboard-icon-box.shamrock {
	background-color: #dff7f3;
}
.dashboard-icon-box.shamrock i{
	color: #2DCBAF;
}
.dashboard-box .fs-36, .dashboard-box .fs-24{
	font-size: 36px;
	font-weight: 500;
	display: block;
}
.dashboard-box .fs-24{
	font-size: 24px;
}
.dashboard-box [class^='fs'].green{
	color: #76B954;
}
.dashboard-box [class^='fs'].pink{
	color: #FE5971;
}
.dashboard-box [class^='fs'].shamrock{
	color: #2DCBAF;
}
.dashboard-box [class^='fs'].grey{
	color: #78909C;
}
.dashboard-box [class^='fs'].orange{
	color: #E5A903;
}
.dashboard-box [class^='fs'].red {
    color: #f10023;
}
.fs-14{
	font-size: 14px;
	font-weight: 500;
	display: block;
}
.fs-14.grey{
	color: #999;
}
.fs-14.black{
	color: #000;
}
ul.stats-ul {
    display: flex;
    flex-direction: row;
}
ul.stats-ul li {
    width: 50%;
    float: left;
    text-align: center;
}
ul.stats-ul li:not(:last-child){
	border-right: 1px solid #ddd;
}
/*==========================
	Database Page Code  
============================*/
.database-wrapper .database-step-one, .database-wrapper .database-step-two{
	width: 100%;
	min-height: 285px;
	background-color: #f7fcff;
	border: 2px dashed #9cd8f5;
	border-radius: 5px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	margin: 0 0 20px;
}
.database-step-one{
	text-align: center;
}
.database-step-one img{
	width: 70px;
	margin: 0 0 20px;
}
.database-step-one span{
	font-size: 14px;
	font-weight: 500;
	color: #333;
	display: block;
	margin: 0 0 10px;
}
.database-meta{
	display: flex;
}
.database-step-one p{
	font-size: 11px;
	font-weight: 500;
	color: #707070;
	line-height: 13px;
	display: inline-block;
	margin: 0 0 5px;
}
.database-step-one p + p {
    border-left: 2px solid #ccc;
    margin: 0 0 5px 5px;
    padding: 0 0 0 7px;
}
html[dir="rtl"] .database-step-one p + p {
	border-left: none;
    border-right: 2px solid #ccc;
    margin: 0 5px 10px 0;
    padding: 0 7px 0 0;
}
.database-step-one .btn {
	font-size: 13px;
	font-weight: 500;
	padding: 5px 20px;
    display: block;
    margin: 10px auto 0;
	position: relative;
	cursor: pointer;
}
.database-step-one .btn i{
	font-size: 16px;
	display: inline-block;
    vertical-align: top;
	margin: 0 3px 0 0;
}
html[dir="rtl"] .database-step-one .btn i{
	margin: 0 0 0 3px;
}
.database-step-one .btn input[type="file"] {
	position: absolute;
	top: 0;
	right: 0;
	margin: 0;
	padding: 0;
	font-size: 20px;
	cursor: pointer;
	opacity: 0;
	filter: alpha(opacity=0);
	cursor: pointer;
}
.database-step-two img{
	width: 100%;
	max-width: 680px;
	margin: 0 auto;
}
.database-progress{
	width: 100%;
	min-height: 90px;
	padding: 0 35px;
	border-top: 1px solid #96d6f5;
	background-color: #FFF;
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin: 40px 0 0;
}
.database-progress-meta {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 5px;
}
.database-progress-meta span{
	font-size: 14px;
	font-weight: 500;
	color: #333;
}
.database-progress-meta p{
	font-size: 11px;
	font-weight: 500;
	color: #666;
	margin: 0;
}
.database-progress .progress {
    width: 100%;
    height: 10px;
    background-color: #e5f5fd;
    box-shadow: none;
    margin: 0;
}
.database-progress .progress .progress-bar{
	background-color: #2fb5f7;
	border-radius: 4px;
}