/*===== Common CSS =====*/
.btn.focus, .btn:focus {
	box-shadow: none;
}
.btn + .btn {
	margin-left: 15px;
}
.page-title-box .btn.btn-purple {
	background-color: #D6323E !important;
    border-color: #D6323E !important;
}
.btn.btn-purple {
	background: #2cd07e;
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	border-radius: 4px;
	min-width: 100px;
	height: 30px;
	line-height: 15px;
}
.btn.btn-bordered {
    background: #313131;
    font-size: 14px;
    font-weight: 600;
    border-radius: 4px;
    border: 1px solid #313131;
    color: #fff;
    min-width: 100px;
    height: 30px;
    line-height: 15px;
}



.page-header-top {
    display: flex;
    align-items: center;
    flex: 1;
    justify-content: space-between;
}
.page-title {
	position: relative;
}
.page-title-box .page-title {
	line-height: initial;
	font-size: 16px;	
}

.page-title:after {
	content: "";
	position: absolute;
	right: 0px;
	top: 50%;
	transform: translateY(-50%);
	width: 1px;
	height: 24px;
	background: #ccc;
}
.card-box {
	border: 1px solid #ebe9f1;
	border-radius: 4px;
	padding: 10px;
}

.page-title-box {
	padding: 10px 0;
}

/*===== Auth CSS =====*/
.auth-fluid .auth-fluid-form-box {
	padding: 4rem 2rem;
}

/*===== header/sidebar CSS =====*/
body .navbar-custom {
    background-color: #fff!important;
    box-shadow: 0 0.75rem 6rem rgb(56 65 74 / 3%);
    z-index: 99;
    height: 50px;
}
.auth-brand {
	position: relative;
	top: 0;
}

.logo-box {
	background: #fff;
	height: 50px;
}
.logo-box .logo {
    line-height: 48px;
}

.left-side-menu {
	background: #20222a;
	top: 50px;
}
.navbar-custom .button-menu-mobile {
	color: #6e768e !important;
	height: 50px;
    line-height: 50px;
}
.navbar-custom .topnav-menu .nav-link {
	color: #6e768e;
	line-height: 50px;
	max-height: 50px;
}
#sidebar-menu>ul>li>a {
	display: flex;
	align-items: center;
}
#sidebar-menu>ul>li>a>span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.content-page {
	padding-left:0;
	padding-right:0;
	padding-bottom: 0;
	padding-top: 0;
	margin-top: 50px;
}
#sidebar-menu .menuitem-active>a {
	color: #fff !important;
}
li.menuitem-active a {
    background-color: #D6323E;
}

#sidebar-menu>ul>li>a:active, #sidebar-menu>ul>li>a:focus, #sidebar-menu>ul>li>a:hover {
	color: #fff;
}
body[data-sidebar-size=condensed] .left-side-menu #sidebar-menu>ul>li:hover>a {
	color: #7367F1;
}
.custom-table-area {
    margin: 0;
    display: flex;
    flex-direction: column;
}
.custom-table-area .table-responsive {
	flex: 1;
	margin-bottom: 20px;
}
.custom-table-area .custom-table {
	
}
.floatThead-container .table thead {
	background: #fff;
}
.custom-table .dropdown .dropdown-menu {
	min-width: inherit;
}
.custom-table .dropdown .dropdown-menu .dropdown-item {
	padding: 5px 12px;
	font-size: 14px;
}
.custom-table .dropdown .dropdown-menu .dropdown-item i {
	font-size: 14px;
}
.switchery {
	height: 24px;
}
.switchery>small {
	width: 24px;
	height: 24px;
}
.add-edit-content {
	margin-bottom: 0px;
}
.add-edit-status-btn {
	display: flex;
	justify-content: flex-end;
	border: 1px solid #ebe9f1;
	padding: 10px 10px;
	background: #fff;
	margin-top: -1px;
}

/*===== Plan CSS =====*/
body .content-page.plan-content-page {
	margin: 0px !important;
	padding: 0px !important;
}
.select-plan-header {
    position: relative;
    margin-top: 50px;
    text-align: center;
    background: #313131;
}
.select-plan-header .sp-head {
	position: absolute;
    height: 100%;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
}
.select-plan-header .sp-head .title {
	margin: 0px;
	font-size: 24px;
	color: #ffffff;
}
.sp-head .nav {
	margin-top: 24px;
}
.sp-head .nav .nav-item .nav-link {
	margin: 0px;
	border-radius: 0px;
	min-width: 145px;
	font-size: 14px;
	font-weight: 600;
}
.select-plan-content .tab-content {
	padding-top: 0px;
	margin-top: 0 !important;
	position: relative;
	z-index: 9;
}
.select-plan-content .tab-content .tab-pane {
	width:100%;
	margin: 0 auto;
	background: #ffffff;
	box-shadow: 0px 0px 10px 0px rgba(5, 5, 5, 0.1);
	border-radius: 4px !important;
}
.select-plan-content .plan-header {
	background: #d6323e;
	border-top-left-radius: 4px !important;
	border-top-right-radius: 4px !important;
	text-align: center;
	padding: 18px;
}
.select-plan-content .plan-header span {
	font-size: 18px;
	color: #ffffff;
	font-weight: 500;
}
.select-plan-content .plan-header h4 {
	margin: 0px;
	color: #ffffff;
	font-size: 24px;
	font-weight: 700;
}
.select-plan-content .plan-list {
	margin: 0px;
	padding: 0px;
	list-style: none;
	text-align: center;
}
.select-plan-content .plan-list li {
	padding: 15px 10px;
	font-size: 16px;
	font-weight: 500;
	color: #6e6b7b;
	border-bottom: 1px solid #e6e6e6;
}
.select-plan-content .plan-select-btn {
	text-align: center;
	padding-top: 38px;
	padding-bottom: 40px;
}
.select-plan-content .plan-select-btn .btn-purple {
	width: 145px;
	height: auto;
	line-height: 20px;

}

.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
	background-color: #d6323e;
}

.select-plan-header {
    position: relative;
    margin-top: 0;
}

/*PLAN*/
.plan-box-group {
    display: flex;
    justify-content: center;
    padding:20px 0;
    flex-wrap: wrap;
}
.plan-box {
	width: 300px;
	display: inline-block;
	margin: 0 10px;
	border-left:1px solid #e6e6e6;
	border-right:1px solid #e6e6e6;
	border-bottom:1px solid #e6e6e6;
	margin-bottom: 10px;

}


/*TABLE FILTER*/
.table-filter-right {
    display: flex;
    align-items: center;
    margin-left: 15px;
}

/*TABLE DESIGN STYLE*/
.table td, .table th {
	padding: 7px 8px;
}

.dropdown-menu.show {
    top: 100%!important;
    right: 0;
    left: auto !important;
}
.custom-table-area .table-responsive {
    height: calc(100vh - 230px);
}
.zoomin .custom-table-area .table-responsive {
    height: calc(100vh - 134px);
}



.table-responsive {
	margin-bottom: 0 !important;
}
.footable-pagination li a {
    padding: 5px 10px;
    height: 30px;
}
.result-page-block .form-control {
	padding: 4px 4px;
	height: 30px;
}




/*PAGNATION*/
.pagination-block {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    border-top: 1px solid #eee;
    /*padding-bottom: 0;*/
}
.result-page-block {
    display: flex;
    justify-content: center;
}
.show-result-block .focus-label {
    white-space: nowrap;
    margin-bottom: 0;
    display: flex;
    align-items: center;
}
.pagination {
	margin-bottom: 0;
}
.dropdown-menu.show {
    z-index: 9999;
}


.floatThead-container {
    /*width: 100% !important;*/
   /* padding-right: 17px !important;*/
}
.form-control.disabled {
    background: #f2f3f5;
}

.btn-primary,
.btn-primary:hover {
    color: #fff !important;
    background-color: #D6323E !important;
    border-color: #D6323E !important;
}

.form-control:disabled, 
.form-control[readonly] {
    background-color:#f2f3f5 !important;
    opacity: 1;
}

.footable-pagination li.active a {
    color: #fff;
    background-color: #313131;
    border-color: #313131;
}
.small, small {
    font-size: .75rem;
    font-weight: 400;
    color: #D6323E;
    font-size: .875rem;
}

a, a:hover {
    color: #D6323E ;
}
.custom-control-input:checked~.custom-control-label::before {
    color: #fff;
    border-color: #d6323e;
    background-color: #d6323e;
}

.custom-checkbox .custom-control-input:disabled:checked~.custom-control-label::before {
    background-color: #d6323e;
    opacity: 0.5;
}

.text-muted a {
    color: #000 !important;
}

.auth-fluid .auth-fluid-right {
	background-color: #f8f8f8;
	align-items: center;
    display: flex;
    justify-content: center;
}

.auth-user-testimonial {
	position: relative;
	left: auto;
	right: auto;
	bottom: inherit;
	width: 100%;
	max-width:750px ;
}



body[data-sidebar-size=condensed]:not([data-layout=compact]) {
    	min-height: initial !important;
	}


span.text-require-star {
	color: #D6323E;
}

body[data-sidebar-size=condensed] .left-side-menu {
	z-index: 1002;
}


body[data-sidebar-size=condensed] .left-side-menu #sidebar-menu>ul>li:hover>a {
    background-color: #d3323e !important;
    color: #ffffff;
}

/*PURCHASE PLAN*/ 
.purchase-plan-section {
    width: 1056px;
    max-width: 100%;
    position: relative;
    margin: 0 auto;
    background: #fff;
    padding: 40px 100px 50px 100px;
    margin-top: -60px;
    border-radius: 4px;
    box-shadow: 0 0 10px rgba(0,0,0,0.07);
}
.pps-head { text-align: center; }
.pps-head h3 { text-align: center; margin-bottom: 40px; font-weight: 600; }
.card-payment-img { margin-bottom: 30px; }


.ppb-list {
    display: flex;
    justify-content: space-between;
    border-top: 1px solid #e9e9e9;
    border-bottom: 1px solid #e9e9e9;
    padding: 12px 5px;
    margin-top: -1px;
}
.ppb-list label, .ppb-list .plan-price {
    font-size: 16px;
    color: #6f6f6f !important;
    margin-bottom: 0;
}
.plan-price-box {
    margin: 20px 0 30px 0;
}

.btn-icon {
    display: inline-block;
    position: relative;
    padding: 0 15px;
    background: #2cd07e;
    border-radius: 4px;
    height: 30px;
    min-width: 100px;
    line-height: 28px;
}
.btn-icon i.fas {
    color: #fff;
}
.btn-icon .action-button {
    background: #2cd07e;
    border: none;
    font-weight: normal;
    color: #fff;
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    line-height: 28px;
}

.btn-icon .action-button:focus {
    outline: none;
}
.purchse-btn .btn.btn-bordered {
	line-height: 14px;
}


.pof-fields {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.pof-fields > .input-field {
    width: 48%;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.btn-mobile-user-dropdown,
.mobile-user-collapse{
	display: none;
}

/*NEW CHANGES STYLE*/
.datepicker-with-icon {
    display: flex;
    position: relative;
}
.datepicker-with-icon i {
    position: absolute;
    right: 12px;
    font-size: 20px;
    top: 9px;
}

/*NEW CHANGES STYLE*/
.label-input-text {
    margin-top: 30px;
}

.form-group.label-input-text {
    font-size: 15px;
}
.status-active {
    color: #2cd07e;
}
.status-expired {
    color: #D6323E;
}
.status-cancelled {
    color: #000;
}

.min-w-auto {
    min-width: auto !important;
}




/*ALL PAGES HEIGHT SET*/

/*========== AR479 BugFix ==========*/
.gift-img-preview { position: relative; display: inline-block; margin-top: 10px;}
.gift-img-preview .close { position: absolute; right: -10px; top: -10px; width: 20px; height: 20px; background: #D6323E; border-radius: 50%; opacity: 1; display: flex; align-items: center; justify-content: center;}
.gift-img-preview .close i { font-size: 12px; color: #fff;}
.gift-img-preview img { height: 100px; border-radius: 4px;}

/*========== AR479 BugFix ==========*/

@media (min-width:1400px) {
	.auth-user-testimonial {
		width:100% !important;
    	max-width: 900px !important;
	}
}

@media (min-width:768px){
	.table-filter-mobile-inner > li:first-child {display: none !important; }
	.table-filter-mobile-inner > li:last-child {display: block !important; margin-left: 10px; border-radius: 4px;margin-right: 0; }
	.dashboard-page .table-filter-mobile-inner  {
	    display: none !important;
	}

	body.zoomin:before {
	    content: "";
	    background: rgba(0,0,0,0.5);
	    position: absolute;
	    top: 0;
	    left: 0;
	    width: 100%;
	    height: 100%;
	    z-index: 99999;
	}
	body.zoomin .table-future-zoom {
	    position: fixed;
	    top: 15px;
	    left: 0;
	    width: calc(100% - 30px);
	    height: calc(100% - 30px);
	    border-radius: 4px;
	    background: #fff;
	}
	body.zoomin .table-future-zoom .card-box {
		padding: 0;
		border:none;
	}
}

@media (max-width:767px) {
	.table-filter-mobile-inner {margin-left: 10px; } 
	.table-filter-mobile-inner > li:last-child {display: none !important; } 
	.dataTables_info,
	.show-result-block {
		display: none !important;
	}
	.pagination-block {
		justify-content: center;
	}
	body {
	    padding-bottom: 0 !important;
	}

	/*SELECT PLAN*/
/*	.plan-box-group {
	    display: flex;
	    justify-content: center;
	    flex-direction: column;
	}
	.plan-box {
		margin-bottom: 20px;
		border-bottom: 1px solid #e6e6e6;
		margin: 0 auto 15px;
	}
.form-group.mt-3.mb-2 {
    margin-top: 5px !important;
    margin-bottom: 20px !important;
}*/

	/*===== MOBILE VIEW : CARAD VIEW =====*/
	.column-card-box .table-responsive .table > tbody > tr { display: grid; padding: 5px 0; border: 1px solid #eff2f7; }
	.column-card-box .table-responsive .table thead { display: none; }
	.column-card-box .table-responsive .table > tbody > tr > td { border: none; display: flex; position: relative; width: 100%; right: 0; height: auto; padding: 5px 10px; align-items: center; }
	.column-card-box .table-responsive .table label.d-none { min-width: 110px; max-width: 110px;  font-weight: 500; color: #333; display: block !important; text-align: left !important; }
	.column-card-box .table-responsive .table label + span { color: #999; }

	.column-card-box .header-sticky-table thead {
	    display: none !important;
	}
	.column-card-box .table-responsive>.header-sticky-table {
	    border: 0;
	    display: flex;
	    flex-flow: wrap;
	    flex-direction: column;
	    width: 100%;
	    min-width: 100% !important;
	}
	.header-sticky-table.table-bordered thead th {
		white-space: nowrap;
	}

	.auth-fluid .auth-fluid-right {
		display: none !important;
	}

	.auth-fluid-form-box .card-body {
		padding: 0;
	}
	.auth-fluid .auth-fluid-form-box {
    	padding: 1rem 2rem;
    	display: flex;
    	align-items: center;
    	justify-content: center;
	}
	footer.footer.footer-alt {
		position: relative;
		padding:15px 0 0 0;
	}
	.select-plan-header {
		padding: 20px 0;
	}

	.sidebar-enable .left-side-menu {
		z-index: 1002 !important;
	}
	.left-side-menu:after {
		content: '';
		background: rgba(0,0,0,0.7);
		position: fixed;
		width: 100%;
		height: 100%;
		left: 0;
		top: 50px;
		z-index: -1;
		opacity: 0;
		transition: all 0.5s ease-in-out;
		-webkit-transition: all 0.5s ease-in-out;
	}
	.sidebar-enable .left-side-menu:after {
		opacity: 1;
	}
	.topbar-dropdown{
		display: none;
	}
	.btn-mobile-user-dropdown{
		display: block;
		position: absolute;
		right: 10px;
		top: 6px;
		font-size: 24px;
    	padding: 0;
	}
	.mobile-user-collapse{
		display: block;
		position: absolute;
		width: 100%;
		top: 50px;
	}
	.mobile-user-detail{
		display: flex;
		align-items: center;
	}	
	.mobile-user-collapse .card-body{
		padding: 10px;
    	margin: 0;
		border-radius: 0;
		background: #EEE;
	}
	.mobile-user-detail .notify-item{
		width: 44px;
		text-align: center;
		color: #a2a5bd;
		font-size: 18px;
	}
	.mobile-user-detail .username{
		color: #D6323E;
		margin-left: auto;
	}
	.purchase-plan-section {
	    width: 90%;
	    padding: 20px 20px 30px 20px;
	    margin-top: -40px;
	    border-radius: 4px;
	    box-shadow: 0 0 10px rgb(0 0 0 / 7%);
	    margin-bottom: 20px;
	}

	.pof-fields > .input-field {
		width: 100%;
		margin-top: 0;
	}

	.pps-head h3 {
		font-size: 20px;
	}

	.pof-fields > .input-field > .row .col-md-4 {
	    margin-bottom: 15px;
	}

	.pof-fields > .input-field > .row .col-md-4:last-child {
		margin-bottom: 0;
	}

	.page-title-right.mt-0 {
	    display: none;
	}
.sp-head .nav .nav-item .nav-link {
    margin: 0px;
    border-radius: 0px;
    min-width: 115px;
    font-size: 13px;
    font-weight: 600;
}

.purchse-btn .btn.btn-bordered {
    line-height: 14px;
    font-size: 14px;
}

}



@media (max-width: 991px) {
	body .navbar-custom.plan-navbar {
	    background: #fff !important;
	    box-shadow: 0 0 2px rgba(0,0,0,0.5) !important;
	}
	body #wrapper .navbar-custom {
    background: #ffffff !important;
    box-shadow: 0 0 5px rgb(0 0 0 / 10%);
	}
}


@media (min-width: 992px) and (max-width: 1024px) {
	.auth-fluid .auth-fluid-form-box {
	    padding:0 !important;
	}
	.auth-fluid .auth-fluid-right {
	    padding: 2rem 0;
	}
	.purchase-plan-section {
	    width: 800px;
	    padding: 40px 50px 50px 50px;
    	margin-top: -40px;
    	border-radius: 4px;
    	box-shadow: 0 0 10px rgb(0 0 0 / 7%);
	}	
}

@media (min-width: 768px) and (max-width: 991px) {
	.auth-fluid-right.text-center {
		display: none !important;
	}
	.auth-fluid .auth-fluid-form-box {
		display: flex;
		align-items: center;
	}

	.align-items-center.d-flex.h-100 {
	    width: 460px;
	    margin: 0 auto;
	}

	.purchase-plan-section {
	    width: 90%;
	    padding: 40px 30px 50px 30px;
    	margin-top: -40px;
    	border-radius: 4px;
    	box-shadow: 0 0 10px rgb(0 0 0 / 7%);
	}	
}





/*===== MOBILE VIEW  TABLE FILTER BUTTONS =====*/
.table-filter-mobile { text-align: right; margin-bottom: 0; }
.table-filter-mobile-inner { display: inline-flex; margin-bottom: 0; padding: 0;}
.table-filter-mobile-inner > li { border: 1px solid #eee; margin-right: -1px; border-radius: 4px; list-style: none; }
.table-filter-mobile-inner > li a.filter-link { width: 30px; height: 30px; border-radius: 4px; background: #fff; display: flex; justify-content: center; align-items: center; color: #7d7d7d; font-size: 14px;}

/*===== MOBILE VIEW : ZOOM IN/ZOOM OUT =====*/
.zoomin { overflow: hidden; }
.zoomin .table-future-zoom {position: fixed; top: 0; left: 0; right: 0; border: 0; width: 100%; height: 100%; z-index: 99999; border-radius: 0; }
.zoomin.column-card-box { overflow: visible; }
.zoomin i.fa-expand:before { content: "\f066"; color: #D6323E; }


/*shorting style*/

th.c-sorting {
    padding-right: 24px;
    position: relative;
}

.table-bordered thead th.c-sorting:before {
	content: "\e022";
	font-family: 'footable';
	opacity: 0.5;
	position: absolute;
	right: 8px;
}

.table-bordered thead th.c-sorting.sorting_asc:before {
	content: "\e012";
}

.table-bordered thead th.c-sorting.sorting_desc:before {
	content: "\e013";	
}

.table-bordered td .form-group {
	margin-bottom: 0 !important;
}

.table-bordered td label.label-switch.switch-primary {
	margin-bottom: 0 !important;		
}

.table-bordered thead th {
	white-space: nowrap;
}

/*action btn style*/
.action-btn-group {
	display: flex;
	justify-content: center;
}
.action-btn-group .action-icn {
    width: 30px;
    height: 30px;
    display: flex;
    margin: 0 1px;
    align-items: center;
    justify-content: center;
    color: #999;
    border-radius: 4px;
}
.action-btn-group .action-icn:hover {
    background: #f5f6f8;
}

/*required field style*/
span.requ-star-color {
    color: #D6323E;
}

.close {
	cursor: pointer;
}

/*loader*/

.loader-box {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    background: rgba(0,0,0,0.5);
}
.loader {
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #D6323E;
  border-bottom: 16px solid #20222a;
  width: 100px;
  height: 100px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

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

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

 
label.error {
    color: #D6323E !important;
}
.custom-control.custom-checkbox.agree-field {
    margin-bottom: 30px;
}
.agree-field .custom-control-label a {
	color: #000 !important;
}

label#agree-error {
    position: absolute;
    top: 20px;
    margin: 0;
    left: 0;
}

.select-plan-box {
    justify-content: center;
    flex-direction: column;
    text-align: center;
    min-height: 60px;
}

.purchse-btn {
	display: flex;
	align-items: center;
	justify-content: flex-end;
}


/*
 .preview-item{width:336px; height: 192px; padding:15px; border:1px solid #EEE;background:#FFF;display: flex; flex-direction: column; border-radius: 5px;}
 .preview-item .top-row{display: flex; margin-bottom: 15px;}
 .preview-item .top-row .col-one{flex: 1; display: flex;}
 .preview-item .top-row .col-tow {text-align: right;}
 .preview-item .top-row .col-tow img{    max-width: 44px;    max-height: 44px;    margin-bottom: 3px;    margin-top: 10px;}
 .preview-item .bottom-row .col-one{flex: 1;}
 .preview-item .bottom-row{display: flex; align-items: flex-end;}
 .preview-item .brand-logo{max-width:60px;max-height:60px;margin-right:10px;}
 .preview-item .brand-name{font-size:18px;color:rgb(94,88,115);font-weight:bold;margin:0 0 10px 0;}
 .preview-item .brand-tagline{font-size:12px;color:rgb(94,88,115);margin:0 0 30px 0;}
 .preview-item .card-name{font-size:16px;color:rgb(94,88,115);font-weight:bold;margin:0;}
 .preview-item .reward-point{font-size:16px;line-height:20px;color:rgb(115,103,240);font-weight:bold;margin: 0; text-align: center;}
 .preview-item .reward-point strong{display:block;    font-size: 120%;    color: #ccb826;}
 .preview-item .qr-name{font-size:16px;line-height:20px;color:rgb(115,103,240);font-weight:bold;margin:0 0 5px 0;}
 .preview-item .qr-code{max-width: 44px; max-height: 44px;}*/