body{
    -webkit-font-smoothing: antialiased;
}
html, body {
    overflow-x: hidden !important;
}

/* header */
#menu .nav > li > a {
    line-height: 42px;
    padding: 0 18px;
    margin-right: 15px;
    position: relative;
    z-index: 2;
    letter-spacing: 0.02em;
}
#menu .nav > li:last-child > a {
    margin-right: 0;
}
#menu .nav > li {
  margin-top: 13px;
}
#menu .nav > li > a.active {
    background: #FFFFFF;
    border-radius: 8px 8px 0px 0px;
    font-weight: 600;
    font-size: 15px;
    text-align: center;
    letter-spacing: 0.02em;
    color: #4453C4;
}
#menu .nav > li > a.active::after {
    content: "";
    background: white;
    position: absolute;
    width: 100%;
    height: 100%;
    bottom: -15px;
    z-index: -1;
    left: 0;
}
div#information-information div#content p {
    font-size: 16px;
}
#information-information #content > ol >li {
    margin-top: 30px;
}
#information-information div#content {
    padding-bottom: 50px;
}
#information-information div#content h2{
      margin-top: 55px;
}
#information-information #content br{
  display: none;
}
li.last-login {
    font-size: 14px;
    line-height: 19px;
    color: #4453C4;
    margin-top: 10px;
    margin-right: 15px;
}
.header-right li.acc-li a{
    padding-left: 0px;
}

.header-right ul {
		min-height: 75px;
		display: flex;
		align-items: center;
		place-content: flex-end;
		margin-bottom: 0;
}
.header-right li {
    list-style-type: none;
    margin-left: 30px;
		display: flex;
    align-items: center;
    position: relative;
}
#logo img.img-responsive {
    max-width: 180px;
}
div#logo {
    min-height: 65px;
    display: flex;
    align-items: center;
}
.header-right li > a {
    font-size: 14px;
		padding-left: 22px;
		display: flex;
		align-items: center;
		margin-top: 0px;
}
.logout {
    background-image: url(../image/logout.svg);
    background-repeat: no-repeat;
    background-position: left center;
}
.acc::before {
    content: "";
    background-image: url(../image/user.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-color: #4453C4;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: inline-flex;
    margin-right: 10px;
}
.top-menu {
		background-image: url(../image/menu-bg.jpg);
		background-position: bottom;
		background-size: cover;
		margin-bottom: 45px;
}
.header-right li span {
    margin-top: 10px;
    padding-left: 10px;
    margin-right: -10px;
}

/* information */
ul.nav.nav-tabs.nav-stacked {
    display: flex;
		margin-bottom: 57px;
}
ul.nav.nav-tabs.nav-stacked li > a {
    font-family: Didact Gothic;
    font-size: 16px;
    line-height: 21px;
    letter-spacing: 0.08em;
		background-color: transparent;
		text-transform: uppercase;
		border: 0px !important;
		padding: 14px 20px;
		margin-right: 20px;
}
ul.nav.nav-tabs.nav-stacked li > a.active,
ul.nav.nav-tabs.nav-stacked li > a:hover {
    color: #4453C4;
		opacity: 1;
		position: relative;
}
ul.nav.nav-tabs.nav-stacked li > a.active::after {
    content: "";
    display: block;
    border-bottom: 4px solid #4453C4;
    position: absolute;
    bottom: -4px;
    width: -webkit-fill-available;
    left: 0;
    right: 0;
}
#information-information h2{
		margin-bottom: 27px;
}
.info-bar-div {
		display: none;
}
select.info-bar {
	width: 100%;
	min-height: 50px;
	border: 0px;
	border-bottom: 3px solid #4453c4;
	color: #4453c4;
}

/* login */
.btn.btn-primary.login-btn {
	width: 100%;
	max-width: inherit;
}
div#loginModal {
    background-color: white !important;
}
#loginModal .modal-dialog {
    width: 100%;
    margin: 0;
    height: 100%;
}
#loginModal .modal-content {
		height: 100%;
    border-radius: 0;
    padding: 0;
    border-color: white !important;
    border: 0px !important;
		box-shadow: none !important;
}
#loginModal .modal-body {
    padding: 0 15px;
}
#loginModal .modal-body,
#loginModal .modal-body .row,
#loginModal .modal-body .col-sm-6 {
		height: 100%;
}
#loginModal .login-form {
		display: flex;
		flex-wrap: wrap;
		align-content: center;
}
#loginModal .login-form h2 {
    width: 100%;
    text-align: center;
    margin-bottom: 36px;
}
.login-bg {
    background-image: url(../image/login-bg.jpg);
    background-size: cover;
}
.login-form-div {
    max-width: 434px;
    width: 100%;
    margin-left: 65px;
}
.forgot-pass{
		font-size: 14px;
    line-height: 19px;
    color: #4453C4;
    text-align: center;
    display: block;
    margin-top: 57px;
		margin-bottom: 35px;
}
.login-form-div h1 {
    display: flex;
    align-items: flex-end;
    color: #474747;
}
.login-form-div img {
    display: inline-block;
    max-width: 262px;
    margin-left: 15px;
}
.form-group.checkbox input {
  padding: 0;
  height: initial;
  width: initial;
  margin-bottom: 0;
  display: none;
  cursor: pointer;
}

.form-group.checkbox label {
  position: relative;
  cursor: pointer;
	padding-left: 25px;
	font-size: 14px
}

.form-group.checkbox label:before {
	content: '';
	-webkit-appearance: none;
	background-color: transparent;
	border: 1px solid #4747474d;
	padding: 6px;
	display: inline-block;
	position: absolute;
	vertical-align: middle;
	cursor: pointer;
	margin-right: 5px;
	left: 0;
	top: 2px;
}

.form-group.checkbox input:checked + label:after {
	content: '';
	display: block;
	position: absolute;
	top: 3px;
	left: 5px;
	width: 5px;
	height: 10px;
	border: solid #474747;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}
.login-form-div .form-group.checkbox {
    margin-top: 29px;
    margin-bottom: 34px;
}

/* agent login */
.agent-login-bg{
	background-image: url(../image/agent-login-bg.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}
.agent-login-bg .col-sm-12{
		height: 100%;
    display: flex;
    flex-wrap: wrap;
}
.agent-login-div {
    max-width: 700px;
    background-color: #FFFFFF;
    margin: auto;
    min-height: 610px;
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: center;
}
#agent-login button.btn.dropdown-toggle.btn-default{
	max-width: 255px;
	min-height: 43px;
	padding: 7.2px 15px;
	margin-top: 15px;
}
button.btn.dropdown-toggle.btn-default {
    background-color: rgba(68, 83, 196, 0.05) !important;
    border: 0px;
    text-shadow: none;
    background-image: none;
    padding: 15px 20px;
    width: 100%;
    outline: none !important;
    box-shadow: none;
    min-height: 50px;
    text-transform: capitalize;
    font-size: 14px;
    color: #474747;
    letter-spacing: normal;
}
.agent-login-form {
    text-align: center;
}
#agent-login .dropdown.bootstrap-select.bs3 {
    max-width: 255px;
    width: 100% !important;
}
.dropdown.bootstrap-select.bs3 {
		width: 100% !important;
}
.agent-login-form h2 {
    margin-bottom: 60px;
    margin-top: 0;
}
.agent-login-form img {
    max-width: 252px;
}
.agent-login-form input.btn.btn-primary {
    max-width: 164px;
    text-transform: uppercase;
		margin-top: 70px;
}
.dropdown.bootstrap-select.bs3 .dropdown-menu {
    border: 0;
		border-radius: 0px;
    /* box-shadow: 1px 1px 10px rgb(0 0 0 / 20%); */
}
.dropdown-menu>.active>a, .dropdown-menu>.active>a:focus, .dropdown-menu>.active>a:hover {
    color: #4453C4;
    text-decoration: none;
    background-color: transparent;
    outline: 0;
}
.dropdown.bootstrap-select.bs3 .dropdown-menu li > a:hover {
    color: #4453C4;
    opacity: 1;
    background-color: transparent;
}
.dropdown.bootstrap-select.bs3 .dropdown-menu li > a {
    padding: 5px 20px;
}
.bootstrap-select .dropdown-toggle .caret {
    color: #474747;
}

/* agent dashboard */
table {
	font-family: Open Sans;
  border-collapse: collapse;
  width: 100%;
}

table td, table th {
	font-size: 14px;
  padding: 5px 5px !important;
}

table tr:nth-child(even){background-color: #F6F6FC;}

/* table tr:hover {background-color: #ddd;} */

table th {
	font-weight: 600;
	font-size: 14px;
	line-height: 19px;
	color: #FFFFFF;
  text-align: left;
  background-color: #4453C4;
	padding: 13px 20px;
	-webkit-font-smoothing: antialiased;
	outline: none !important;
}
table td {
    padding: 0px 20px;
	 height: 72px;
}

.btn.btn-secondary {
    max-width: 129px;
    min-height: 50px;
    width: 100%;
    border: 1px solid #4453C4;
    background-color: transparent;
    letter-spacing: 0.08em;
    color: #4453C4;
    font-family: Didact Gothic;
    font-size: 16px;
    text-transform: uppercase;
    border-radius: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.btn.btn-secondary:hover,
.btn.btn-secondary:active,
.btn.btn-secondary:focus {
    background-color: #96B6EA;
    color: white;
    border-color: #96B6EA;
    box-shadow: none !important;
}
.top-content {
    display: flex;
		margin-bottom: 18px;
		align-items: baseline;
}
.top-content .left-div h2 {
    margin: auto;
}
.top-content > div {
    width: 50%;
}
.top-content > div.left-div {
    margin-top: 10px;
}
.top-content .right-div {
    align-self: center;
    display: flex;
    margin-top: 20px;
    place-content: flex-end;
}
.top-content .right-div a {
    width: auto;
    margin-left: 10px;
}
.btn.btn-dark:hover,.btn.btn-dark:focus {
    color: white;
}
.btn.btn-dark {
	border-radius: 0px;
    /* max-width: 237px; */
    min-height: 50px;
    background: #273493;
    width: auto;
    height: 100%;
    padding: 14px 15px;
    text-transform: uppercase;
    font-family: Didact Gothic;
    font-size: 16px;
    line-height: 21px;
    letter-spacing: 0.08em;
    color: #FFFFFF;
    /* padding-left: 55px; */
		position: relative;
		-webkit-font-smoothing: antialiased;
}
.btn.btn-dark.create-new{
	background-image: url(../image/create-acc.svg);
	background-repeat: no-repeat;
	background-position: 18px center;
}
.create-new::before {
    content: "+";
    width: 19px;
    height: 19px;
    display: flex;
    background-color: #4453C4;
    border-radius: 50%;
    position: absolute;
    left: 29px;
    bottom: 8px;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    padding-left: 2px;
    padding-bottom: 2px;
    font-family: Didact Gothic;
    -webkit-font-smoothing: antialiased;
}
.rh{
	  margin-bottom: 23px;
}
.paginate_button.disabled {
    display: none;
}
div#dtBasicExample_paginate {
    text-align: center;
    display: flex;
    justify-content: center;
    margin-top: 70px;
    margin-bottom: 40px;
}
a.paginate_button {
	    width: 30px;
	    height: 30px;
	    display: inline-flex;
	    margin: 10px 5px;
	    font-family: Open Sans;
	    font-size: 14px;
	    color: #474747;
	    align-items: center;
	    justify-content: center;
			cursor: pointer;
}
a.paginate_button.current{
    background-color: #96B6EA;
    color: white;
}
table.dataTable thead .sorting:after{
	content: "\f0dc" !important;
}
table.dataTable thead .sorting_desc:after {
	content: "\f0dd" !important;
}
table.dataTable thead .sorting_asc:after {
	content: "\f0de" !important;
}

table.dataTable thead .sorting:after, table.dataTable thead .sorting_asc:after, table.dataTable thead .sorting_desc:after, table.dataTable thead .sorting_asc_disabled:after, table.dataTable thead .sorting_desc_disabled:after{
	font-family: "FontAwesome" !important;
	opacity: 1 !important;
	top: 0;
	bottom: 0 !important;
	margin: auto;
	display: inline-flex !important;
	align-items: center;
	position: relative !important;
	padding-left: 30px;
	font-weight: 100;
	font-size: 13px;
}
.form-control {
    background-color: rgba(68, 83, 196, 0.05);
    min-height: 50px;
    box-shadow: none;
    border: 0;
    color: #474747;
    font-size: 14px;
    padding: 6px 20px;
}
.btn-process {
    max-width: 169px;
    margin: auto;
    margin-top: 70px;
}
.btn.btn-primary {
    background-color: #4453C4;
    border-radius: 0px;
    display: flex;
    align-items: center;
    text-transform: uppercase;
    justify-content: center;
		color: white;
		border: 1px solid #4453C4;
		/* max-width: max-content; */
}
.btn.btn-primary:hover,.btn.btn-primary:focus {
    border-color: #4453C4;
    background-color: transparent;
    color: #4453C4;
		outline: none !important;
}
#agent-add .top-content,
#agent-complete .top-content {
    margin-bottom: 26px;
}
table.create-agent tbody tr:first-child td:last-child {
    display: none;
}
.create-agent tbody tr td:first-child input {
    text-transform: capitalize;
}


/* view application */
table#viewApplication th {
    padding: 13px 10px 13px 10px;
}
table#viewApplication td {
    padding: 18px 10px 18px 10px;
}
.agent-code,
.status-h{
	text-align: center;
}
span.pending-check {
    background-color: #FF9C07;
    border-radius: 5px;
    padding: 3px 7px;
    color: white;
}
span.approved {
    background-color: #53C549;
    border-radius: 5px;
    padding: 3px 7px;
    color: white;
}
.status-tag{
	margin: auto;
	text-align: center;
}
table#viewApplication th.no{
	width: 35px;
}
table#viewApplication th.name{
	width: 109px;
}
table#viewApplication th.nric{
	width: 126px;
}
table#viewApplication th.email{
	width: 180px;
}
table#viewApplication th.contact{
	width: 115px;
}
table#viewApplication th.upline{
	width: 95px;
}
table#viewApplication th.code{
	width: 150px;
}
table#viewApplication th.status-h{
	width: 150px;
}
.info-p > p:nth-child(1) {
    /* margin-right: 44px; */
}
.info-p {
    /* display: flex; */
}
#agent-view-application .top-content {
    margin-bottom: 30px;
}
a.back-page {
	font-size: 14px;
	line-height: 19px;
	color: #474747;
	position: relative;
	display: flex;
	align-items: center;
	place-content: flex-end;
  font-weight: 600;
}
a.back-page::before {
			content: "";
	    display: inline-flex;
	    width: 32px;
	    height: 32px;
	    background-color: #4453C4;
	    border-radius: 50%;
	    z-index: -1;
	    margin-right: 15px;
			background-image: url(../image/back-page.svg);
			background-repeat: no-repeat;
			background-position: 12px 11px;
}

/* create agent */
td.upline-th button {
    font-size: 14px !important;
    color: #474747;
}
table.create-agent td{
	vertical-align: middle;
	padding: 15px 6px;
	position: relative;
}
a.delete {
	background-image: url(../image/delete.svg);
	background-repeat: no-repeat;
	width: 27px;
	height: 27px;
	display: block;
	float: right;
}
div#agent-add2,
div#agent-complete2,
div#downline-add2,
div#downline-upload2,
div#downline-thank2 {
    background-color: rgba(68, 83, 196, 0.05);
    padding-bottom: 60px;
}
span.edit-icon {
    height: 15px;
    width: 15px;
    display: block;
    background-image: url(../image/edit.svg);
    background-repeat: no-repeat;
    position: absolute;
    right: 20px;
    top: 0;
    bottom: 0;
    margin: auto;
		/* cursor: pointer; */
}
button.btn.add-new:hover {
    background-color: transparent;
		box-shadow: none;
}
table.create-agent th {
    padding: 13px 14px;
		width: 20%;
}
table.create-agent tbody tr {
    border-bottom: 1px solid #E4E7EB;
}
button.btn.add-new::before {
    content: "+";
    background-color: #4453C4;
    width: 19px;
    height: 19px;
    display: inline-flex;
    justify-content: center;
    border-radius: 50%;
    font-family: Didact Gothic;
    font-size: 23px;
    letter-spacing: 0.08em;
    align-items: center;
    padding-bottom: 3px;
    padding-left: 2px;
    margin-right: 14px;
		color: white;
}
.btn {
    background-color: transparent;
    border: 0;
    color: #4453C4;
    font-family: Didact Gothic;
    font-size: 16px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
button.btn.add-new {
    display: flex;
    align-items: center;
    margin-top: 19px;
}
table.create-agent td:nth-child(1) {
    padding-left: 0;
}
table.create-agent td:nth-child(5) {
    padding-right: 0;
}
.red-color {
    color: #E30613;
}
.flow > div > a:hover{
	opacity: 1;
}
.flow > div > a {
    cursor: auto;
    background: #4453C4;
    border-radius: 40px;
    max-width: 100px;
    min-height: 45px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: 14px;
}
.flow > div > p {
    margin-bottom: 0;
    display: flex;
    align-items: center;
    margin-left: 8px;
}
.flow > div {
    display: flex;
}
.flow > div:nth-child(1){
	width: 20%;
}
.flow > div:nth-child(2){
	width: 22%;
}
.flow > div:nth-child(3){
	width: 58%;
}
.flow {
    display: flex;
    margin-top: 29px;
    margin-bottom: 32px;
}
.disabled > p {
	opacity: .4;
}
.disabled > a {
  pointer-events: none;
	background-color: #D3D3D3 !important;
}
.registration-p > .right-div .num-agent {
    margin-right: 35px;
}
.registration-p > div {
    width: 50%;
}
.registration-p > .right-div {
    display: flex;
    place-content: flex-end;
}
.registration-p {
    display: flex;
    margin-top: 40px;
    margin-bottom: 19px;
}
table.create-agent td:last-child {
    position: absolute;
    margin-top: 12px;
    margin-left: 9px;
}
div#agent-add2 input.btn.btn-primary, div#agent-add2 a.btn.btn-primary {
    padding: 13px 20px;
    width: max-content;
    float: right;
    margin-top: 47px;
}
.form-control[disabled], fieldset[disabled] .form-control {
    background-color: rgba(68, 83, 196, 0.05);
}
td.upline-th button.btn.dropdown-toggle.btn-default > div {
    display: contents;
		text-transform: capitalize;
}
td.upline-th button.btn.dropdown-toggle.btn-default {
    margin-top: 0;
    min-height: 50px;
    display: flex;
}
td .iti.iti--allow-dropdown {
    width: 100%;
}
td.upline-th {
  font-size: 14px;
    /* display: none; */
}

/* thanyou page */
p.thank-h {
    font-size: 22px;
		margin-bottom: 20px;
}
p.thank-p {
    font-size: 18px;
		margin-bottom: 70px;
}
.thank-div {
    text-align: center;
		margin-top: 75px;
}
#agent-complete2 a.btn.btn-primary {
    max-width: 224px;
    margin: auto;
}

/* create downline */
#downline-add .flow > div:nth-child(1),
#downline-upload .flow > div:nth-child(1),
#downline-thank .flow > div:nth-child(1) {
    width: 20%;
}
#downline-add .flow > div:nth-child(2),
#downline-upload .flow > div:nth-child(2),
#downline-thank .flow > div:nth-child(2) {
    width: 29%;
}
#downline-add .flow > div:nth-child(3),
#downline-upload .flow > div:nth-child(3),
#downline-thank .flow > div:nth-child(3) {
    width: 23%;
}
#downline-add .flow > div:nth-child(4),
#downline-upload .flow > div:nth-child(4),
#downline-thank .flow > div:nth-child(4) {
    width: 28%;
}
#downline-add .flow,
#downline-upload .flow,
#downline-thank .flow {
    margin-top: 36px;
    margin-bottom: 24px;
}
div#downline-add {
    margin-bottom: 27px;
}
.panel-default>.panel-heading {
  color: #333;
  background-color: #fff;
  border-color: #e4e5e7;
  padding: 0;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.panel-default>.panel-heading a {
	background-color: #4453C4;
	height: 55px;
	font-weight: 600;
	font-size: 18px;
	color: #FFFFFF;
	display: flex;
	align-items: center;
}

.panel-default>.panel-heading a:before {
  content: "";
  position: relative;
  top: 1px;
  display: inline-block;
  font-family: 'Glyphicons Halflings';
  font-style: normal;
  font-weight: 400;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  float: right;
  transition: transform .25s linear;
  -webkit-transition: -webkit-transform .25s linear;
	font-size: 10px;
	margin-left: 16px;
	margin-right: 20px;
}
.panel-group .panel {
	border-radius: 0px;
	border-color: transparent;
	background-color: transparent;
	box-shadow: none !important;
}
.panel-default>.panel-heading a[aria-expanded="true"] {
	background-color: #4453C4;
	height: 55px;
	font-weight: 600;
	font-size: 18px;
	color: #FFFFFF;
	display: flex;
	align-items: center;
}

.panel-default>.panel-heading a[aria-expanded="true"]:before {
  content: "\e252";
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}

.panel-default>.panel-heading a[aria-expanded="false"]:before {
  content: "\e250";
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}
#downline-add2 .form-horizontal .control-label {
    padding: 0;
		padding-right: 15px;
}
label.col-sm-3.control-label.input-jointaccic {
    padding-right: 23px !important;
}
.form-horizontal .left-div {
    padding-right: 50px;
}
.form-horizontal .right-div {
    padding-left: 50px;
}
.form-horizontal .form-group {
    display: flex;
    align-items: center;
}
.form-horizontal .form-group.address {
    align-items: baseline;
}
.form-horizontal .form-group > label.col-sm-3.control-label {
    width: 33%;
    display: flex;
    text-align: left;
}
.form-horizontal .form-group > div.col-sm-9 {
    width: 67%;
    padding: 0;
}
.form-horizontal .form-group > label.col-sm-3.control-label > span {
    margin-left: 4px;
}
.iti.iti--allow-dropdown {
    width: 100%;
}
.main-input:first-child {
    margin-top: 0;
}
.main-input {
    position: relative;
    margin-top: 15px;
}
.form-horizontal .form-group .bootstrap-select .dropdown-toggle .caret {
    right: 25px;
}
ul.custom-radio{
	list-style: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
	display: flex;
	width: 100%;
	flex-wrap: wrap;
}
.incometax:nth-child(4) {
    width: 65%;
    padding-left: 14px;
}

.incometax:nth-child(3) {
    width: 35%;
}
.incometax {
    position: relative;
}
ul.custom-radio li{
	display: block;
  position: relative;
  float: left;
  height: auto;
}
ul.custom-radio li:first-child{
	width: 35%;
}
ul.custom-radio li:nth-child(2){
	width: 65%;
}
ul.custom-radio li input[type=radio]{
 position: absolute;
 visibility: hidden;
}

ul.custom-radio li label{
	display: block;
	position: relative;
	font-weight: 300;
	font-size: 14px;
	padding: 15px 0px 15px 25px;
	margin: auto;
	height: auto;
	z-index: 9;
	cursor: pointer;
	-webkit-transition: all 0.25s linear;
}
ul.custom-radio li .check{
	display: block;
	position: absolute;
	border: 1px solid #C4C4C4;
	border-radius: 100%;
	height: 16px;
	width: 16px;
	top: 0px;
	left: 0px;
	z-index: 5;
	transition: border .25s linear;
	-webkit-transition: border .25s linear;
	bottom: 0;
	margin: auto;
}
ul.custom-radio li .check::before {
	display: block;
	position: absolute;
  content: '';
	border-radius: 100%;
	height: 8px;
	width: 8px;
	top: 0px;
	left: 0px;
	margin: auto;
	transition: background 0.25s linear;
	-webkit-transition: background 0.25s linear;
	bottom: 0;
	right: 0;
}

input[type=radio]:checked ~ .check {
 border: 1px solid #C4C4C4;
}

input[type=radio]:checked ~ .check::before{
 background: #4453C4;
}
.next-input-line {
    margin-top: 65px;
}
.next-input-line.tax{
	margin-top: 50px;
}
.next-input-line.tax .form-group{
	    margin-bottom: 0px;
}
.next-input-line.div-incometax{
	margin-top: 50px;
}
.next-input-line.bank {
	margin-top: 49px;
}
.next-input-line.bank .form-group {
    margin-bottom: 0px;
}
#downline-add2 form.form-horizontal {
    margin-top: 40px;
}
#accordion div#content {
    min-height: auto;
    padding-bottom: 55px;
}
div#downline-add2 a.submit-btn {
    max-width: 244px;
    float: right;
    margin-top: 71px;
    margin-bottom: 40px;
}
#accordion div#content p {
    margin-left: -15px;
}
.datepicker-days table th {
    border-radius: 0;
}
.datepicker table tr td.active, .datepicker table tr td.active.disabled, .datepicker table tr td.active.disabled:hover, .datepicker table tr td.active:hover {
    background-color: #4453C4 !important;
    background-image: none !important;
}
.datepicker .datepicker-switch:hover, .datepicker .next:hover, .datepicker .prev:hover, .datepicker tfoot tr th:hover {
    background: #4453C4;
    opacity: .7;
}
#datetimepicker1 span.input-group-addon,
#datetimepicker2 span.input-group-addon,
.input-group.date span.input-group-addon{
    background-color: #ededf9;
    border: 0px;
    border-radius: 0;
}
span.glyphicon.glyphicon-calendar {
    background-image: url(../image/calander.svg);
    background-repeat: no-repeat;
    display: block;
    width: 20px;
    height: 20px;
}
.glyphicon-calendar:before {
    display: none !important;
}

/* upload downline */
label.filelabel::before {
    content: "";
    display: block;
    background-image: url(../image/upload-big-arrow.svg);
    background-repeat: no-repeat;
    width: 37px;
    height: 37px;
    background-color: #4453C4;
    border-radius: 50%;
    background-position: center;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
}
.filelabel {
    border-radius: 5px;
    display: block;
    padding: 9px;
    cursor: pointer;
    padding-left: 50px;
    text-align: left;
		max-width: max-content;
		position: relative;
}
.filelabel .title {
    transition: 200ms color;
    font-family: Open Sans;
    font-weight: 600;
    font-size: 14px;
    text-decoration-line: underline;
    color: #4453C4;
}
.filelabel:hover .title {
  color: #1665c4;
}
.FileUpload1{
    display:none !important;
}
span.max {
    font-size: 13px;
    line-height: 18px;
    color: #474747;
    padding-left: 36px;
}
#downline-upload2 h6 {
    font-weight: 600;
    font-size: 18px;
    color: #4453C4;
    margin-top: 64px;
    margin-bottom: 50px;
}
#downline-upload2 a.btn.btn-primary.submit-btn {
    max-width: 312px;
    margin-top: 79px;
    margin-bottom: 40px;
}
h2.fee {
    color: #474747;
		margin-top: 90px;
		margin-bottom: 34px;
}
h2.fee > span {
    font-size: 46px;
    color: #4453c4;
}
.form-group.checkbox a {
    text-decoration: underline !important;
    color: #4453c4;
}
#downline-upload2 .form-group.checkbox {
    padding-left: 15px;
}
#downline-upload .flow,
#downline-thank .flow {
    margin-bottom: 38px;
}
a.tooltip {
    outline: none;
    display: inline-block;
    opacity: 1;
    margin-left: 6px;
}
a.tooltip:hover {text-decoration:none;}
a.tooltip span {
    z-index: 10;
    display: none;
    padding: 20px;
    width: 356px;
    min-height: 246px;
    bottom: 0;
    top: 0;
    margin: auto;
    margin-left: 15px;
}
a.tooltip:hover span {
    display: flex;
    position: absolute;
    color: white;
    background: #474747;
    align-items: center;
    justify-content: center;
    left: 10px;
}
a.tooltip:hover span::before {
    content: "";
    width: 15px;
    height: 15px;
    background-color: #474747;
    display: block;
    position: absolute;
    left: -8px;
    transform: rotate(45deg);
    top: 0;
    bottom: 0;
    margin: auto;
}
a.tooltip span > div.right-div {
    padding-left: 23px !important;
    display: flex;
}
a.tooltip span > div.left-div {
    padding-right: 15px !important;
}
#downline-upload2 .form-horizontal .form-group > label.col-sm-3.control-label {
    width: 28%;
}

/* thankyou downline */
.thank-btn{
	margin: auto;
}
#downline-thank2 p.thank-h {
    font-size: 20px;
		margin-bottom: 5px;
    line-height: 30px;
}
#downline-thank2 p.thank-p {
    line-height: 35px;
}

/* admin dashboard */
div.dataTables_filter > label {
    display: none;
}
.filter-table {
    display: flex;
    flex-wrap: wrap;
		margin-bottom: 17px;
}
.filter-table label.col-sm-3 {
    width: 65px;
}
.filter-table .col-sm-9 {
    width: 236px;
}
.filter-table .form-group {
    display: flex;
    align-items: center;
}
table#dtBasicExample2 td {
    /* padding: 26px 20px; */
		position: relative;
}
div.dataTables_wrapper div.dataTables_paginate {
    text-align: center !important;
    margin-top: 67px;
    margin-bottom: 30px;
}

/* admin create new account */
.center {
    text-align: center;
		width: 100%;
}
form.admin-add {
    max-width: 434px;
    margin: auto;
    margin-top: 47px;
}
form.admin-add a.btn.btn-primary.submit-btn {
    width: 100%;
    max-width: inherit;
    margin-top: 54px;
}
.form-group {
    position: relative;
}

/* admin update account */
.update-acc .form-group > label, .update-acc .form-group > div {
    padding: 0;
}

.update-acc .form-group {
    display: flex;
		align-items: center
}
.update-acc div#content {
    min-height: auto;
		margin-bottom: 40px;
}
.update-acc div#content.right-div {
    padding-left: 35px;
}

.update-acc div#content.left-div {
    padding-right: 45px;
}
.update-acc .form-group label.col-sm-3.control-label {
    width: 35%;
}
.update-acc a.btn.btn-primary.submit-btn {
    float: right;
    max-width: 215px;
}
#admin-update .top-content {
    margin-bottom: 35px;
}

/* admin configure */
.configure-box > div.configure-top > .form-group label {
    min-height: 40px;
    margin-bottom: 0px !important;
    display: flex;
    align-items: center;
    margin-right: 15px;
}

.configure-box div.configure-top .form-group > div {
	max-width: 171px;
	min-height: 40px;
}
.configure-box div.configure-top .form-group {
    display: flex;
    margin-bottom: 0;
    align-items: center;
    min-height: 40px;
    height: 100%;
}
.configure-box > div.configure-top {
    display: flex;
    align-items: center;
}
.current-amount p {
    margin-left: 70px;
    margin-right: 37px;
    margin-bottom: 0;
}
.configure-top {
    border: 1px solid #E5E5E5;
    padding: 15px 20px;
		margin-bottom: 41px;
}
.configure-box h6,
.configure-box-view h6 {
    margin-bottom: 26px;
		color: #4453C4;
}
a.btn.btn-dark.create-new.group {
	background-image: url(../image/group.svg);
	background-position: 12px center;
	padding-left: 60px;
}
.create-new.group::before {
    left: 35px;
    bottom: 5px;
}
.configure-top > a {
    padding: 15px 32px;
}
#dtConfigure tr > td:nth-child(1),
#dtConfigure tr > td:nth-child(5) {
    text-align: center;
}
#dtConfigure th.no-th {
    width: 22px !important;
}
#dtConfigure th.promo-th {
    width: 160px !important;
}
#dtConfigure th.start-th {
    width: 160px !important;
}
#dtConfigure th.fee-th {
    width: 130px !important;
}
#dtConfigure th.view-th {
    text-align: center;
}
#dtConfigure th.end-th {
    width: 160px !important;
}

/* admin configure view */
.configure-box-view .configure-top > div {
    width: 25%;
}
.configure-box-view .configure-top {
    border: 0px;
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    margin-bottom: 67px;
    margin-top: 45px;
}
.configure-box-view .configure-top > div.remarks {
    width: 87%;
    margin-right: 15px;
		margin-top: 37px;
}
/* .remark-p {
    background-color: #F6F6FC;
    padding: 15px 20px;
} */
.remark-p textarea {
    background-color: #F6F6FC;
}
.configure-box-view .configure-top > a {
    margin-top: 68px;
}
a.btn.btn-dark.create-new.delete {
    background-image: none;
    padding: 13px 20px;
}
a.btn.btn-dark.create-new.delete::before{
	display: none;
}
.configure-box-view .top-content .right-div {
    display: flex;
    place-content: flex-end;
    align-items: center;
}
.configure-box-view .top-content .right-div > span {
    font-size: 14px;
    margin-right: 18px;
}
.configure-box-view .top-content > .left-div {
    display: flex;
    align-self: flex-end;
}

.configure-box-view .top-content > .left-div h6 {
    margin-bottom: 0px;
}
.configure-box-view .top-content {
    margin-bottom: 27px;
}
#dtConfigureView .checkbox label {
    font-size: 0px;
}
#dtConfigureView td .form-group.checkbox input:checked + label:after {
    top: -3px;
    left: 7px;
    width: 8px;
    height: 17px;
    border: solid #474747;
		border-width: 0 2px 2px 0;
}
#dtConfigureView td .form-group.checkbox label:before {
    border: 1px solid #474747;
    padding: 10px;
    margin-right: 0px;
    left: 0;
    top: -3px;
		opacity: .4;
}
#dtConfigureView th .form-group.checkbox label:before {
    border: 1px solid #ffffffd4;
    padding: 10px;
    margin-right: 0px;
    left: 0;
    top: -3px;
}
#dtConfigureView th .form-group.checkbox input:checked + label:after {
    border: solid #ffffffd4;
		top: -3px;
    left: 7px;
    width: 8px;
    height: 17px;
		border-width: 0 2px 2px 0;
}
#dtConfigureView .form-group.checkbox {
    margin: 0;
}
#dtConfigureView th.check-th {
    width: 5% !important;
}
#dtConfigureView th.no-th {
    width: 7% !important;
}
#dtConfigureView th.fullname-th {
    width: 15% !important;
}

/* admin create new group */
.add-file input[type="file"] {
    opacity: 0.7;
    border: 0;
    padding: 10px 0px;
    outline: none !important;
    font-size: 14px;
}
.form-group.add-file > span {
    font-size: 14px;
}

.form-group.add-file > label {
    width: 100%;
		margin-top: 10px;
}
form.admin-add.group #datetimepicker1 span.input-group-addon, form.admin-add.group #datetimepicker2 span.input-group-addon, form.admin-add.group .input-group.date span.input-group-addon {
    background-color: rgba(68, 83, 196, 0.05);
    border: 0px;
    border-radius: 0;
}
textarea {
    padding: 15px 20px !important;
}
.form-group.textarea span.edit-icon {
    bottom: auto;
    top: 20px;
}

/* admin view application */
.search-name {
    background-image: url(../image/search.svg);
    background-repeat: no-repeat;
}
.search-name > input {
    border: 0px;
    padding-left: 30px;
}
.search-name > input {
    border: 0px;
    padding-left: 40px;
    z-index: 1;
    background-color: transparent;
}
.search-name {
    background-image: url(../image/search.svg);
    background-repeat: no-repeat;
    display: block;
    background-position: 5px center;
    max-height: 35px;
		margin-right: 55px;
}
.dateinput {
    width: 160px;
    margin-left: 10px;
		position: relative;
}
.configure-box-view.admin-app .top-content > .left-div {
    align-items: center;
}
.configure-box-view.admin-app .filter-table .form-group {
    margin-bottom: 0;
}
td.dataTables_empty {
    padding: 15px 20px !important;
}
a.btn.btn-secondary.delete-view {
    padding-left: 50px;
    max-width: inherit;
    width: max-content;
    background-image: url(../image/download.svg);
    background-repeat: no-repeat;
    background-position: 15px 13px;
    padding-right: 20px;
		float: right;
}
.configure-box-view.admin-app .top-content {
    margin-bottom: 31px;
}
/* admin view transaction */
a.btn.btn-dark.create-new.delete-white {
    background-image: url(../image/download-white.svg);
		background-position: 15px center;
    padding-left: 45px;
}
a.btn.btn-dark.create-new.delete-white::before{
	display: none;
}
#dtTransactionView tfoot th, tfoot tr {
    background-color: transparent !important;
    color: #474747;
    padding-top: 10px;
    padding-bottom: 0;
}
#dtTransactionView tfoot tr th:nth-child(2) {
    text-align: center;
}

#dtTransactionView tfoot tr th:nth-child(1) {
    text-align: right;
}
#dtTransactionView tfoot tr:nth-child(1) th {
    border-top: 1px solid #E4E7EB !important;
		padding-top: 30px;
}
#dtTransactionView tbody tr td:last-child {
    text-align: center;
}
#dtTransactionView th.datetransaction-th {
    width: 55% !important;
}
#dtTransactionView th.applicantname-th {
    width: 15% !important;
}
#dtTransactionView th.no-th {
    width: 10% !important;
}
/* boa dashboard */
span.app-rejected {
    border-radius: 5px;
    padding: 3px 7px;
    color: white;
    background-color: #E30613;
}
.input-daterange input {
    text-align: left;
}
.dateinput span.caret {
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    right: 15px;
}
li.button-dropdown {
    list-style-type: none;
    position: relative;
}
ul.dropdown-menu {
    display: block;
    width: 100%;
    border: 0px;
    border-radius: 0px;
    top: 92%;
}
.top_account.my_cart a{
    background-image: url(../image/my_cart.svg);
    background-repeat: no-repeat;
    background-position: left 98%;
}
.hello_name a{
    background-image: url(../image/hello_name.svg);
    background-repeat: no-repeat;
    background-position: left 102%;
}
.dateinput ul.dropdown-menu li > a {
    background-color: #F6F6FC;
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
li.top_account ul.dropdown-menu.iconic_dropdown_list {
    max-width: 200px;
}
li.top_account ul.dropdown-menu.iconic_dropdown_list li > a:hover {
    color: #4453C4;
    font-weight: 600;
}
li.top_account ul.dropdown-menu.iconic_dropdown_list li{
    margin-left: 20px !important;
}
li.top_account ul.dropdown-menu.iconic_dropdown_list li a {
    background-repeat: no-repeat;
    background-position: left center;
}
li.top_account ul.dropdown-menu.iconic_dropdown_list li > a.idl_changebranch{
  background-image: url(../image/changes.png);
}
li.top_account ul.dropdown-menu.iconic_dropdown_list li > a.idl_profile{
  background-image: url(../image/my_profile.svg);
}
li.top_account ul.dropdown-menu.iconic_dropdown_list li > a.idl_password{
  background-image: url(../image/my_order.svg);
}
li.top_account ul.dropdown-menu.iconic_dropdown_list li > a.idl_logout{
  background-image: url(../image/logout.svg);
}
ul.dropdown-menu li {
    padding: 5px 10px;
}
ul.dropdown-menu li > div {
    width: 50%;
}
li.date-range-menu > div:nth-child(2) {
    padding-left: 5px;
}

li.date-range-menu > div:nth-child(1) {
    padding-right: 5px;
}
li.date-range-menu {
    display: flex;
}
li.date-range-menu input {
    min-height: 40px;
}
li.button-dropdown.dateinput > input {
    border: 0px;
    background-color: #f6f6fc;
    min-height: 50px;
}
li.button-dropdown.dateinput {
    width: auto;
}
.filter-table.boa > div {
    padding-right: 20px;
}
.filter-table.boa label {
    margin-right: 10px;
}
.filter-table.boa > div:nth-child(1) label {
    width: 32%;
}
.filter-table.boa > div:nth-child(2) {
    width: 32%;
}
.filter-table.boa > div:nth-child(1) {
    width: 41%;
}
.form-group > ul {
    display: flex;
    align-items: center;
    padding-left: 0;
    margin-bottom: 0;
}
.filter-table.boa .form-group > div {
    max-width: 237px;
    width: 100%;
}
.filter-table.boa > div:last-child {
    padding-right: 0;
    width: 26%;
}
input.dropdown-toggle {
    font-size: 14px;
}
/* application detail */
#application-detail .top-content > div {
    display: flex;
		width: 100%;
}
.top-content > div.left-div h2 {
    margin-bottom: 5px;
}
#application-detail .top-content .not-active.center {
	padding-right: 30px;
	padding-left: 30px;
	width: max-content;
	margin: inherit;
}
a.not-active h2,h2.not-active {
    color: #474747;
}
.application-top {
    display: flex;
    align-content: space-between;
    justify-content: space-between;
    margin-top: 45px;
    margin-bottom: 45px;
}
.application-group .panel-default>.panel-heading a[aria-expanded="true"] {
    background-color: #F6F6FC;
    color: #4453C4;
}
.application-group .panel-default>.panel-heading a {
    position: relative;
		background-color: #F6F6FC;
    color: #4453C4;
}
.application-group .panel-default>.panel-heading a > span{
	position: absolute;
	    right: 23px;
	    font-size: 14px;
	    font-weight: normal;
	    padding: 3px 12px;
	    font-family: Open Sans;
	    line-height: 19px;
}
span.checking-approved {
    background: #4453C4;
    border-radius: 5px;
    font-family: Open Sans;
    font-size: 14px;
    line-height: 19px;
    color: #FFFFFF;
    padding: 2px 12px;
		font-weight: normal;
}
.application-group.panel-group .panel-heading+.panel-collapse>.list-group,
.application-group.panel-group .panel-heading+.panel-collapse>.panel-body {
    border-top: 0px;
}
.application-group.panel-group .panel {
    border: 1px solid #E5E5E5;
    margin-bottom: 15px;
}
p.bold {
    font-weight: bold;
    font-size: 14px;
    line-height: 19px;
    color: #474747;
}
p.subtitle {
    font-size: 13px;
    line-height: 18px;
    margin-bottom: 4px;
}
.application-group .panel-body > div > div {
    width: 50%;
}
.application-group .panel-body > div.agent {
  width: 42%;
}
.application-group .panel-body > div {
    width: 28%;
    display: flex;
    flex-wrap: wrap;
    height: fit-content;
}
.application-group .panel-body > div > p {
    width: 100%;
    font-weight: 600;
    font-size: 14px;
    line-height: 19px;
    color: #4453C4;
    margin-bottom: 22px;
}
.application-group .panel-body > div > div.column_full > div p {
    width: 50%;
    align-self: center;
    margin-bottom: 0;
}
.application-group .panel-body > div > div.column_full {
    width: 100%;
}
.application-group .panel-body > div > div.column_full > div {
    display: flex;
		margin-bottom: 10px;
		justify-content: flex-end;
}
.application-group .panel-body {
    display: flex;
    padding-left: 44px;
    padding: 30px 23px 30px 44px;
		flex-wrap: wrap;
}
.application-group .panel-body > div.support {
    width: 30%;
}
.switch {
	position: relative;
	display: inline-block;
	width: 45px;
	height: 25px;
	margin-bottom: 0;
}

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

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

.slider:before {
	position: absolute;
	content: "";
	height: 29px;
	width: 29px;
	left: -7px;
	bottom: -2px;
	background-color: white;
	-webkit-transition: .4s;
	transition: .4s;
	border: 2px solid #C4C4C4;
}

input:checked + .slider {
  background-color: #4453C4;
}

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

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
	border-color: #4453C4;
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}
.application-group .panel-body > div.bottom-btn {
    width: 100%;
    margin-top: 32px;
}
.application-group .panel-body > div.bottom-btn > div > div p {
    margin-bottom: 0;
		margin-right: 19px;
}
.application-group .panel-body > div.bottom-btn > div > div {
    display: flex;
    align-content: center;
    /* align-items: center; */
    margin-right: 50px;
}
.application-group .panel-body > div.bottom-btn > div {
    display: flex;
    width: 70%;
}
.application-group span.max {
    padding-left: 15px;
}
.application-group .filelabel {
    margin-left: 20px;
}
.application-group button.btn.btn-primary.submit-btn.reject-btn {
    background-color: #E30613;
    border-color: #E30613;
}
.application-group button.btn.btn-primary.submit-btn {
    max-width: 224px;
		margin-bottom: 7px;
}
.application-group .panel-body > div.bottom-btn > div.column_right {
    width: 30%;
    flex-wrap: wrap;
    place-content: flex-end;
}
.application-group button.btn.btn-primary.submit-btn.reject-btn:hover {
    background-color: transparent;
    color: #E30613;
}
.application-group .panel-body > div.support > p {
    padding-left: 33px;
}
.switch-div{
		margin-top: 7px;
}
p.bold.email{
	word-wrap: break-word
}
.application-group .panel-body > div.agent > div > div,
.application-group .panel-body > div.other > div > div {
    margin-bottom: 27px;
}
div#tabs > a.sort {
    padding: 0 25px;
    padding-bottom: 15px;
    margin-bottom: 40px;
    font-family: Didact Gothic;
    font-size: 16px;
    line-height: 21px;
    letter-spacing: 0.08em;
    color: #474747;
    border-bottom: 1px solid #E4E7EB;
		position: relative;
		cursor: pointer;
}
div#tabs > a.sort:hover{
	opacity: 1;
}
div#tabs{
		display: flex;
    flex-wrap: wrap;
    place-content: center;
		margin-bottom: 100px;
}
div#tabs >a.sort.highlight {
    color: #4453C4;
}
div#tabs >a.sort:after {
  background: none repeat scroll 0 0 transparent;
  bottom: -4px;
  content: "";
  display: block;
  height: 4px;
  left: 50%;
  position: absolute;
  background: #4453C4;
  transition: width 0.3s ease 0s, left 0.3s ease 0s;
  width: 0;
}
div#tabs >a.sort:hover:after {
  width: 100%;
  left: 0;
}
div#tabs > a.sort.highlight:after {
    width: 100%;
    left: 0;
}
.application-form{
	width: 100%;
}
.select-div {
    display: none;
}
select {
  /* for Firefox */
  -moz-appearance: none;
  /* for Chrome */
  -webkit-appearance: none;
}

/* For IE10 */
select::-ms-expand {
  display: none;
}
select#detail {
    border: 0px;
    min-height: 50px;
    padding: 15px 20px;
    background-color: rgba(68, 83, 196, 0.05) !important;
    width: 100%;
}
.select-div span.caret {
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    right: 15px;
}
.select-div {
    position: relative;
    margin-bottom: 25px;
		width: 100%;
}
#application-detail a.back-page {
    width: 100%;
}
.application-group h6{
		width: 100%;
    color: #4453C4;
    margin-top: -10px;
}
a.btn.btn-secondary.view-document {
    max-width: fit-content;
    max-height: 50px;
    padding-left: 40px;
		background-image: url(../image/document.svg);
		background-repeat: no-repeat;
		background-position: 8px center;
}
/* application log */
#application-detail .info-p > p:nth-child(2),#application-detail .info-p > p:nth-child(1) {
    margin-right: 70px;
}
#application-detail .info-p {
    margin-top: 45px;
    margin-bottom: 13px;
}
#application-detail th.rejectreason {
    width: 120px;
}

#application-detail table#viewApplication th {
    padding: 13px 8px 13px 8px;
}
#application-detail td.center {
    width: auto;
}

/* dashboard */
.dashboard_box{
    margin-top: 41px;
    display: flex;
    /* margin-bottom: 17px; */
    flex-wrap: wrap;
}
.dashboard_box a{
    width: 33.333%;
    margin-bottom: 17px;
}
.dashboard_box a:hover{
  opacity: 1;
}
div.fitbox {
    border-radius: 10px !important;
    width: calc(100% - 25px) !important;
    height: 100% !important;
    min-height: 350px;
    display: flex;
    float: none;
    margin: auto;
    background-size: cover;
    color: white;
    padding: 20px;
    position: relative;
    background-repeat: no-repeat;
}
div.fitbox::before {
    content: "";
    /* background: #4453C4; */
    display: inline-block;
    width: 100%;
    height: 100%;
    position: absolute;
    border-radius: 10px;
    top: 0;
    left: 0;
    background: linear-gradient(
    328.33deg
    , rgba(68, 83, 196, 0.8) 24.84%, rgba(84, 91, 146, 0) 86.36%);
    mix-blend-mode: multiply;
}
div.fitbox::after {
    content: "";
    opacity: 0;
    transition: opacity .3s ease-in-out;
    background: linear-gradient(
349.59deg
 , rgba(68, 83, 196, 0.8) 29%, rgba(84, 91, 146, 0) 87.01%);
    z-index: 1;
    display: inline-block;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 10px;
}
div.fitbox:hover:after {
    opacity: 1;

}
div.fitbox .title{
    margin: auto;
    text-align: -webkit-center;

}
div.fitbox span.cn{
  font-family: Noto Sans SC;
  font-size: 20px;
  line-height: 29px;
  text-align: center;
  letter-spacing: 2px;
  font-weight: 400;
}
div.fitbox span.text_element {
    margin-top: 7px;
}
div.fitbox span {
    margin: auto;
    font-weight: bold;
    font-size: 24px;
    line-height: 33px;
    text-align: center;
    letter-spacing: 0.02em;
    color: #FFFFFF;
    text-shadow: 0px 1px 4px rgb(0 0 0 / 40%);
    position: relative;
    z-index: 2;
    width: 100%;
    display: block;
}
/* announcements dashboard */
#announcements-dashboard .top-content > div.left-div{
  margin-top: 0px;
}
#announcements-dashboard .top-content > div.left-div h2 {
    margin-bottom: 5px;
}
#announcements-dashboard .dashboard_box {
    margin-top: 10px;
}
/* login */
div#login > div {
    width: 100%;
}
div#login .row.modal-full >div {
    height: 100%;
}
.modal-full {
    max-width: inherit;
    margin: 0;
    height: 100%;
    padding: 0;
}
.modal-full .modal-content{
    height: 100%;
}
.login-bg {
    background-image: url(../image/login-bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
.login-form {
    max-width: 100%;
    margin-top: 15px;
    margin-left: 48px;
    background-color: transparent;
    border: 0;
}
.login-form .row.tab-a {
    display: flex;
    padding: 0 15px;
}
.login-form .row.tab-a > a {
    width: 50%;
}
.login-form img {
    max-width: 179px;
    margin: auto;
    display: block;
}
.tab-a {
    margin-top: 60px;
}
.tab-a a.active, .tab-a a:hover {
    color: #4453C4;
    border-bottom: 2px solid #4453C4;
}

.tab-a a {
    color: #474747;
    text-align: center;
    text-transform: uppercase;
    padding-bottom: 9px;
    margin-bottom: 37px;
    border-bottom: 2px solid transparent;
}
.login-form .btn {
    width: 100%;
    margin-top: 18px;
    margin-bottom: 72px;
}
.forgot a {
    color: #4453C4;
}
.forgot > a:last-child {
    padding-left: 7px;
}
.forgot > a:first-child {
    padding-right: 10px;
}
.forgot {
    text-align: center;
}
div#login {
    padding: 0 !important;
    border-radius: 0px;
    background: white;
    border: 0px;
}
div#login .modal-content {
    border: 0px;
    box-shadow: none !important;
}
/* register */
.half-flex > .form-group:nth-child(2) {
    padding-left: 6px;
}

.half-flex > .form-group:nth-child(1) {
    padding-right: 6px;
}
.half-flex > .form-group {
    width: 50%;
}
.half-flex {
    display: flex;
    flex-wrap: wrap;
}
.text-danger {
    font-size: 12px;
}
.select{
    background-image: url(../image/dropdown-icon.svg);
    background-repeat: no-repeat;
    background-position: 95% center;
}
label.input-agree {
    display: block;
    position: relative;
    padding-left: 22px;
    margin-bottom: 30px;
}
input#input-agree {
    width: 15px;
    height: 15px;
    display: inline-block;
    position: absolute;
    left: 0;
    top: 0;
    min-height: auto;
    margin-top: 2px;
}
#account-register .login-bg {
    min-height: 900px;
}
label.input-agree a {
    color: #474747;
    text-decoration: underline !important;
}
/* Events */
.dashboard_box.announcements div.fitbox::before {
    display: none;
}

.dashboard_box.announcements div.fitbox::after {
    background: linear-gradient(0deg, rgba(3, 18, 128, 0.8) -2.62%, rgba(84, 91, 146, 0) 70.28%, rgba(110, 122, 216, 0) 70.28%);
    mix-blend-mode: normal;
}
.dashboard_box.announcements a {
    margin-bottom: 25px;
}
div#pagination-container ul li {
    width: 30px;
    height: 30px;
    line-height: 30px;
}
div#pagination-container ul {
    list-style-type: none;
    padding: 0;
    display: flex;
    text-align-last: center;
    margin: auto;
    place-content: center;
    margin-top: 40px;
}
div#pagination-container ul li span {
    font-size: 14px;
    width: 30px;
    height: 30px;
    display: block;
}
div#pagination-container li.active span.current.prev,
div#pagination-container li.active span.current.next {
    background-color: transparent;
    color: #474747;
}
div#pagination-container a.next,
div#pagination-container span.next,
a.paginate_button#example_next,
#promotionGift_next,
#customerGift_next {
    font-size: 0px;
    background-image: url(../image/pagin-right.svg);
    background-repeat: no-repeat;
    width: 30px;
    height: 30px;
    display: block;
    background-position: center;
}
div#pagination-container a.prev,
div#pagination-container span.prev,
a#example_previous.paginate_button,
#promotionGift_previous,
#customerGift_previous {
    font-size: 0px;
    background-image: url(../image/pagin-right.svg);
    background-repeat: no-repeat;
    width: 30px;
    height: 30px;
    display: block;
    background-position: center;
    transform: rotate(180deg);
}
div#promotionGift_paginate,
div#customerGift_paginate {
    display: flex;
    justify-content: center;
}
div#example_paginate {
    display: flex;
    justify-content: center;
}
div#pagination-container li.active span.current {
    background-color: #96B6EA;
    color: white;
}
.datatable-filter .dropdown-menu ul{
    max-height: 170px !important;
}
h7.announcements-title {
    font-weight: 700;
    text-align: center;
    display: block;
    background-color: #F6F6FC;
    padding: 15px;
    margin-bottom: 40px;
}
h7.announcements-title .cn {
    font-weight: 100;
    font-size: 18px;
    line-height: 26px;
    text-align: center;
    letter-spacing: 2px;
    color: #313131;
    width: 100%;
    display: block;
}
.announcements-detail > div {
    width: 50%;
}

.announcements-detail {
    display: flex;
    flex-wrap: wrap;
}
.announcements-detail img {
    border-radius: 10px;
    width: 100%;
    margin-bottom: 25px;
}
.announcements-detail > div.column_left{
    padding-right: 35px;
}
.announcements-detail > div.column_right {
    padding-left: 25px;
    line-height: 25px;
}
.announcements-detail > div.column_right h7 {
    font-family: Open Sans;
    font-style: normal;
    font-weight: 600;
    font-size: 26px;
    line-height: 25px;
    padding-bottom: 10px;
    display: block;
    margin-bottom: 19px;
    border-bottom: 1px solid #E4E7EB;
}
.info {
    margin-bottom: 25px;
}
.info div {
    font-size: 14px;
    margin-bottom: 12px;
}
.info div .info-title {
    min-width: 110px;
    display: inline-block;
}
.info.promotion div .info-title{
    min-width: 200px;
}
.info.promotion div {
    font-size: 14px;
    margin-bottom: 12px;
    display: flex;
    /* flex-wrap: wrap; */
}
.info div span:nth-child(2) {
    margin-left: 25px;
}
/* gift redepmtion */
th.select-checkbox.selected::after {
    content: "✔";
    margin-top: -11px;
    margin-left: -4px;
    text-align: center;
    text-shadow: rgb(176, 190, 217) 1px 1px, rgb(176, 190, 217) -1px -1px, rgb(176, 190, 217) 1px -1px, rgb(176, 190, 217) -1px 1px;
}
table input[type="checkbox"] {
    width: 21px;
    height: 21px;
}
.btn-view {
    border: 1px solid #4453C4;
    min-height: 50px;
    max-width: 80px;
    width: 100%;
    padding: 13px 15px;
}
.url-icon{
  background-image: url(../image/url.svg);
  width: 23px;
  height: 23px;
  background-repeat: no-repeat;
  margin-left: 10px;
}
.url-icon:hover{
    background-color: transparent;
}
.datatable-filter > div:first-child {
    padding-left: 0;
}

.datatable-filter > div {
    display: flex;
    align-items: center;
    padding-left: 30px;
}

.datatable-filter {
    display: flex;
    margin-bottom: 32px;
}
.datatable-filter > div label {
    font-weight: 600;
    font-size: 14px;
    margin-right: 15px;
}
.datatable-filter > div .dropdown {
    min-width: 200px;
    max-width: 200px;
}
select:invalid { color: gray; }

option.disabled,
ul.dropdown-menu.inner li.disabled {
  display: none;
}
td.redeemed span {
    font-size: 14px;
    line-height: 19px;
    color: #FFFFFF;
    background: #FF9C07;
    border-radius: 5px;
    padding: 2px 10px;
    margin: 17%;
}
span.redeemed {
  font-size: 14px;
  line-height: 19px;
  color: #FFFFFF;
  background: #FF9C07;
  border-radius: 5px;
  padding: 2px 10px;
}
span.expired {
  font-size: 14px;
  line-height: 19px;
  color: #FFFFFF;
  background: #E30613;
  border-radius: 5px;
  padding: 2px 10px;
}
span .available{
  font-size: 14px;
  line-height: 19px;
  color: #FFFFFF;
  background: #53C549;
  border-radius: 5px;
  padding: 2px 10px;
}
td.expired span {
    font-size: 14px;
    line-height: 19px;
    color: #FFFFFF;
    background: #E30613;
    border-radius: 5px;
    padding: 2px 10px;
    margin: 23%;
}
td.available span {
    font-size: 14px;
    line-height: 19px;
    color: #FFFFFF;
    background: #53C549;
    border-radius: 5px;
    padding: 2px 10px;
    margin: 21%;
}
table.dataTable tbody td.select-checkbox:before, table.dataTable tbody th.select-checkbox:before,
button#MyTableCheckAllButton:before {
    border: 1px solid #47474780 !important;
    content: "";
}

table.dataTable tbody td.select-checkbox:before, table.dataTable tbody td.select-checkbox:after, table.dataTable tbody th.select-checkbox:before, table.dataTable tbody th.select-checkbox:after,
button#MyTableCheckAllButton:before,button#MyTableCheckAllButton:after {
    top: 44% !important;
    width: 21px !important;
    height: 21px !important;
    display: block;
}
table.dataTable tr.selected td.select-checkbox:after, table.dataTable tr.selected th.select-checkbox:after ,
button#MyTableCheckAllButton{
    content: '' !important;
    background-image: url(../image/tick.svg);
    margin-top: -11px;
    margin-left: -4px;
    text-align: center;
    background-position: 19% 97%;
    background-repeat: no-repeat;
}
button#MyTableCheckAllButton::before {
    left: 62%;
    position: absolute;
    top: 25% !important;
    border-color: #ffffff80 !important;
}
button#MyTableCheckAllButton {
    position: relative;
}
button#MyTableCheckAllButton.checked-all::after {
    content: "";
    background-image: url(../image/white-tick.svg);
    background-repeat: no-repeat;
    position: absolute;
    left: 73%;
    top: 13px !important;
}
table.dataTable.stripe tbody>tr.odd.selected, table.dataTable.stripe tbody>tr.odd>.selected, table.dataTable.display tbody>tr.odd.selected, table.dataTable.display tbody>tr.odd>.selected {
    background-color: transparent !important;
}
table.dataTable tbody>tr.selected, table.dataTable tbody>tr>.selected {
    background-color: #F6F6FC !important;
}
.datatable-filter .dropdown-menu .inner {
    margin-right: 5px;
}
#promotionModal .modal-dialog,
#customerModal .modal-dialog{
    margin: auto !important;
    width: 100% !important;
    max-width: 858px !important;
    transform: initial !important;
    display: flex;
    justify-content: center;
}
#promotionModal .modal-flex > div.right,
#customerModal .modal-flex > div.right{
    width: 44%;
}
#promotionModal .modal-flex > div.left,
#customerModal .modal-flex > div.left{
    width: 56%;
}
#promotionModal .modal-flex,
#customerModal .modal-flex{
    display: flex;
    flex-wrap: wrap;
}
#promotionModal .modal-content,
#customerModal .modal-content{
  border-radius: 0px;
}
#promotionModal .modal-flex > div.left img,
#customerModal .modal-flex > div.left img{
    width: 420px;
    height: 420px;
    border: 2px solid #D2D3D9;
}
#promotionModal .modal-flex > div.right img.qr,
#customerModal .modal-flex > div.right img.qr{
    width: 286px;
    margin: auto;
    text-align: center;
    display: block;
}
.notice_p{
    padding-left: 20px;
    background-image: url(../image/notice.svg);
    background-repeat: no-repeat;
    background-position: left 10%;
}
#promotionModal .modal-body,
#customerModal .modal-body{
    padding: 25px;
}
#promotionModal button.close,
#customerModal button.close{
    width: 30px;
    height: 30px;
    background-image: url(../image/button_close.svg);
    background-repeat: no-repeat;
    opacity: 1;
    position: absolute;
    right: 15px;
    top: 15px;
}
#promotionModal hr,
#customerModal hr{
    margin: 14px 0;
}
div#promotionModal.modal.fade.in,
div#customerModal.modal.fade.in{
    display: flex !important;
}
body.modal-open{
  padding: 0 !important;
}
.datatable-filter-btn{
  display: none;
}
/* promotion details */
.promotion_detail_title .left {
    width: 80%;
    align-self: center;
}
.promotion_detail_title .right {
    width: 20%;
    text-align: end;
    align-content: center;
}
.promotion_detail_title {
    background-color: #F6F6FC;
    display: flex;
    padding: 18px 20px;
    margin-top: 25px !important;
    flex-wrap: wrap;
}
.promotion_detail_title .left h6 {
    margin: 0;
    font-weight: bold;
    color: #313131;
}
.promotion_detail_title .right p {
    margin: 0;
    font-size: 15px;
}
.promotion_detail > div.left {
    width: 57%;
}
.promotion_detail .img-div img {
    /* max-width: 300px; */
    border: 10px solid #F6F6FC;
    width: 50%;
}
.promotion_detail > div{
  margin-top: 26px;
}
.promotion_detail .img-div {
    display: flex;
    margin-bottom: 15px;
    border: 5px solid #F6F6FC;
}
.promotion_detail {
    display: flex;
    flex-wrap: wrap;
}
.promotion_detail > div.right {
    width: 43%;
    padding-left: 50px;
}
.promotion_detail_top h2, .promotion_detail_top {
    margin-bottom: 0px !important;
}
.promotion_detail_top h2.cn{
  margin-bottom: 5px !important;
}
.promotion_info > div span:last-child {
    text-align: right;
    font-weight: bold;
}

.promotion_info > div span, .promotion_info > div > div {
    width: 50%;
    font-size: 14px;
}
.promotion_info > div {
    display: flex;
    padding: 8px 0;
}
.promotion_info > div > div {
    text-align: right;
}
.promotion_detail > div.right hr {
    margin-top: 9px;
    margin-bottom: 7px;
}
.promotion_info {
    padding-right: 15px;
}
#lifeplanning-dashboard .dashboard_box a {
    width: 50%;
    margin-bottom: 17px;
}
#lifeplanning-dashboard .dashboard_box {
    margin-top: 0px;
}
#lifeplanning-dashboard form label {
    text-align: left;
}
input[type="date"]::-webkit-inner-spin-button,
input[type="date"]::-webkit-calendar-picker-indicator {
    display: none;
    -webkit-appearance: none;
}
#lifeplanning-dashboard .form-horizontal .form-group > label.col-sm-3.control-label{
      width: 25%;
      padding-left: 0;
}
#lifeplanning-dashboard input[type=date],
#lifeplanning-dashboard input.datepicker {
    max-width: 359px;
}
#lifeplanning-dashboard input[type=date],
#lifeplanning-dashboard input.datepicker{
    background-image: url(../image/calendar.svg);
    background-repeat: no-repeat;
    background-position: 95% center;
}
input[type="file"] {
    display: none;
}
.custom-file-upload {
    cursor: pointer;
      font-weight: 600;
      font-size: 14px;
      text-decoration-line: underline;
      color: #4453C4;
      line-height: 40px;
      padding-left: 55px;
      background-image: url(../image/upload-icon.svg);
      background-repeat: no-repeat;
      background-size: contain;
      background-position: left center;
  }
.custom-open-camera{
    border: 1px solid #4453C4;
    padding: 10px 12px;
    padding-left: 45px;
    font-size: 16px;
    line-height: 21px;
    letter-spacing: 0.08em;
    color: #4453C4;
    margin-left: 20px;
    margin-bottom: 0;
    background-image: url(../image/camera.svg);
    background-repeat: no-repeat;
    background-size: 30px;
    background-position: 6% center;
}
#lifeplanning-dashboard input[type=submit] {
    max-width: 164px;
    margin-top: 64px;
}
.tpom-form{
  margin-bottom: 0px;
}
.pls-fill{
  margin-bottom: 45px;
}
table#customerGift th {
    font-size: 14px;
    padding: 13px 5px !important;
}
#customerGift td:nth-child(5) {
    text-align: left;
}
#customerGift td.redeemed span,
#customerGift td.expired span,
#customerGift td.available span,
#customerGift td.processing span {
    text-align: center;
    margin: auto !important;
}
#customerGift td.redeemed,
#customerGift td.expired,
#customerGift td.available,
#customerGift td.processing {
    display: flex;
}
td.processing span {
    font-size: 14px;
    line-height: 19px;
    color: #FFFFFF;
    background: #0788FF;
    border-radius: 5px;
    padding: 2px 10px;
    margin: 17%;
}
#customerGift button#MyTableCheckAllButton::before{
    left: 88%;
}

#customerModal .modal-flex > div.right img,
#customerModal .modal-flex > div.right p,
#customerModal .modal-flex > div.right hr {
    width: 100%;
}
#customerModal .modal-flex > div.right {
    width: 44%;
    display: inline-flex;
    flex-wrap: wrap;
    align-content: center;
}
.agent-sales table td:last-child {
    text-align: right;
}
.agent-sales table#customerGift th {
    padding: 6px 5px !important;
}
#product-category .btn-group.btn-group-sm {
    display: none;
}
.product-thumb .image img {
    width: 100%;
    max-height: 300px;
    object-fit: cover;
}
.qc-image > a, .qc-name  > a {
  pointer-events: none !important;
}
.product-thumb .input-group button {
    width: 25% !important;
    min-width: auto;
    background-color: white !important;
    color: #9C9C9C !important;
    font-size: 30px !important;
    display: flex;
    align-items: center;
}
.product-thumb .button-group > .input-group {
    width: 50%;
    display: flex;
}
.product-thumb input.form-control.item-quantity {
    background: white;
}
#checkout-cart thead td {
    height: auto;
    background-color: #F3F4F9;
    padding: 13px 5px !important;
    font-weight: 600;
    font-size: 14px;
    line-height: 19px;
    color: #4453C4;
}
#checkout-cart img.img-thumbnail {
    padding: 0;
    border-radius: 0px;
    border: 0px;
    min-width: 80px;
}
#checkout-cart tbody tr td, #checkout-cart tbody tr td a {
    font-size: 14px;
    line-height: 19px;
    color: #474747 !important;
    padding-top: 19px !important;
    padding-bottom: 19px !important;
    vertical-align: middle;
}
#checkout-cart table tr:nth-child(even){
  background-color: transparent;
}
.input-group.cart-quantity button {
    width: 25%;
    background-color: white;
    border: 0px;
    color: #9C9C9C;
    font-size: 30px;
    min-height: 50px;
}
#checkout-cart .table>tbody>tr:last-child>td {
    border-bottom: 1px solid #ddd;
}
#checkout-cart table.table.cart-total tr td {
    border: 0px !important;
    padding: 6px 13px !important;
    height: auto;
    font-size: 16px;
    line-height: 22px;
    letter-spacing: 0.01em;
    color: #474747;
}
#checkout-cart table.table.cart-total tr:last-child td {
    font-weight: bold;
    font-size: 16px;
    line-height: 22px;
    letter-spacing: 0.01em;
    color: #474747;
}
#checkout-cart table.table.cart-total tr:last-child td.text-right {
    font-weight: bold;
    font-size: 20px !important;
    line-height: 27px;
    color: #4453C4 !important;
}
#checkout-cart .buttons .pull-right a {
    padding: 15px 30px;
}
#checkout-cart .buttons .pull-left a {
    padding: 15px;
    max-width: none;
    padding-left: 44px;
    background-image: url(../image/cart.svg);
    background-repeat: no-repeat;
    background-position: 6% center;
}
#checkout-cart .buttons .pull-right {
    margin-right: 45px;
}
.totalprice-tb{
    padding-right: 65px;
    margin-top: 17px;
}
.input-group.cart-quantity input {
    width: 50%;
    background-color: white;
}
.input-group.cart-quantity {
    display: flex;
    border: 1px solid #DCDEEE;
    max-width: 148px;
    min-width: 148px;
}
.move-trash {
    background-image: url(../image/trash.svg);
    background-repeat: no-repeat;
    background-position: center;
}
.btn-danger.move-trash:hover {
    background-color: transparent;
    border-color: transparent;
    box-shadow: none !important;
    opacity: .6;
}
#d_quickcheckout .qc-col-3.col-md-6 {
    order: 1;
}
#d_quickcheckout .row {
    display: flex;
}
.qc-checkout-product.panel-body {
    padding: 0 !important;
}
div#confirm_comment_input {
    display: none;
}
.form-horizontal.qc-totals > .row{
    place-content: flex-end;
}
.form-horizontal.qc-totals > .row label{
  text-align: left !important;
}
div#payment_method_list > div {
    margin-bottom: 25px !important;
}
#payment_method_form .panel.panel-default {
    margin-bottom: 0 !important;
}
div#payment_method_list > div:last-child {
    margin-bottom: 0px !important;
}
div#d_quickcheckout .qc-col-4.col-md-6 {
    border-right: 1px solid #E4E7EB;
}
table.qc-cart thead td {
    font-weight: 600;
    font-size: 14px;
    line-height: 19px;
    color: #4453C4;
    height: auto;
    background-color: #F3F4F9;
    padding: 10px 15px !important;
}

table.qc-cart td {
    font-size: 14px;
    padding: 5px 15px !important;
}
table.qc-cart tbody td {
    border-top: 0px !important;
}
table.qc-cart tr:nth-child(even) {
    background-color: transparent;
}
.form-horizontal.qc-totals {
    background-color: #F3F4F9;
    padding: 19px 20px;
}
#d_quickcheckout .qc-totals .row:last-child {
    border-top: 0px !important;
    padding-top: 0px !important;
    margin-top: 0px !important;
}
p.needstarpoint {
    font-style: italic;
    font-weight: normal;
    font-size: 13px;
    line-height: 18px;
    text-align: right;
    color: #9C9C9C;
    margin-bottom: 0px !important;
}
.form-horizontal.qc-totals label, .form-horizontal.qc-totals div {
    font-size: 16px !important;
    line-height: 22px;
    letter-spacing: 0.01em;
}
.form-horizontal.qc-totals .row:nth-last-child(2) label {
    font-weight: bold !important;
}
.form-horizontal.qc-totals .row:nth-last-child(2) div {
    font-weight: bold !important;
    color: #4453C4 !important;
    font-size: 20px !important;
}
table.qc-cart img {
    width: 60px;
}
table.qc-cart tr, table.qc-cart tr a {
    font-size: 14px !important;
    line-height: 19px;
    color: #474747 !important;
}
.qc-cart td.qc-name span {
    font-size: 10px;
    text-align: center;
    letter-spacing: 0.05em;
    color: #FFFFFF;
    background: #A4AEE0;
    border-radius: 50px;
    padding: 2px 6px;
    padding-top: 1px !important;
}
table.qc-cart tr td {
    vertical-align: middle !important;
}
#d_quickcheckout .panel-default > .panel-heading {
    background-color: #F3F4F9 !important;
    border: 0px !important;
    border-radius: 0px !important;
    padding: 0;
}
#d_quickcheckout .panel-default {
    border: 0px !important;
    box-shadow: none !important;
}
#payment_method span.text {
    font-weight: 600;
    font-size: 14px;
    line-height: 19px;
    color: #4453C4;
    padding: 11px 17px !important;
    display: block;
}

#confirm_form div#confirm_agree_input {
    display: none;
}
button#qc_confirm_order {
    background: #4453C4 !important;
    border-color: #4453C4 !important;
    background-position: inherit !important;
    text-shadow: none !important;
    opacity: 1 !important;
    border-radius: 0px !important;
}
#d_quickcheckout .checkbox label, #d_quickcheckout .radio label {
    padding-left: 40px;
}
.payment_method_list:focus-within::before {
  content: "";
  background: hsl(199deg, 65%, 73%);
}
[type="radio"]:checked,
[type="radio"]:not(:checked) {
    position: absolute;
    left: -9999px;
}
[type="radio"]:checked + label,
[type="radio"]:not(:checked) + label,
#payment_method_list [type="radio"]:checked + span,
#payment_method_list [type="radio"]:not(:checked) + span
{
    position: relative;
    padding-left: 28px;
    cursor: pointer;
    line-height: 20px;
    display: inline-block;
    color: #666;
}
[type="radio"]:checked + label:before,
[type="radio"]:not(:checked) + label:before,
#payment_method_list [type="radio"]:checked + span:before,
#payment_method_list [type="radio"]:not(:checked) + span:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 10px;
  height: 10px;
  border-radius: 100%;
  background: #C4C4C4;
  margin: auto;
}
[type="radio"]:checked + label:after,
[type="radio"]:not(:checked) + label:after,
#payment_method_list [type="radio"]:checked + span:after,
#payment_method_list [type="radio"]:not(:checked) + span:after {
  content: '';
width: 10px;
height: 10px;
background: #4453C4;
position: absolute;
top: 0px;
left: 0px;
border-radius: 100%;
-webkit-transition: all 0.2s ease;
transition: all 0.2s ease;
bottom: 0;
margin: auto;
}
[type="radio"]:not(:checked) + label:after, #payment_method_list [type="radio"]:not(:checked) + span:after {
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
}
[type="radio"]:checked + label:after, #payment_method_list [type="radio"]:checked + span:after {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
}
[type="radio"]:checked + label, #payment_method_list [type="radio"]:checked + span{
  color: black;
}
[type="radio"]:not(:checked) + label, #payment_method_list [type="radio"]:not(:checked) + span{
  color: #9C9C9C;
}
#d_quickcheckout #payment_method .radio label > span {
    margin-right: 10px;
    padding-left: 20px;
    font-size: 14px !important;
}
#d_quickcheckout #payment_method .radio label > span img {
    padding-left: 10px;
}
#d_quickcheckout #payment_method .radio label {
    display: flex;
    padding-left: 0;
}
#payment_method_list .radio-input.radio label {
    flex-wrap: wrap;
}

#payment_method_list .radio-input.radio label p {
    width: 100%;
    padding-left: 20px;
    font-size: 13px;
    line-height: 18px;
    letter-spacing: 0.01em;
    color: #9C9C9C;
    margin-bottom: 5px;
}
#payment_method_list .radio-input.radio label p.warning{
    color: #FF0000;
}
#payment_method_list .radio-input.radio label p.star_point_sufficent{
    color: #4453C4;
}
#payment_method_list .radio-input.radio label p.star_point_insufficent{
    color: #ff0000;
}
div#account-edit fieldset > div.right {
    margin-left: 20px;
}
div#account-edit fieldset > div.left {
    margin-right: 20px;
}
div#account-edit fieldset > div {
    width: calc(50% - 20px);
}
div#account-edit fieldset {
    display: flex;
    margin-top: 40px;
}
div#account-edit legend {
    font-weight: 600;
    font-size: 18px;
    line-height: 25px;
    color: #4453C4;
    padding-bottom: 10px;
}
#account-edit label::after{
  display: none;
}
#account-edit label{
  padding-top: 0;
}
#account-edit .col-sm-9 {
    margin-right: 15px;
    margin-left: 15px;
    display: block;
}
#account-edit .col-sm-9.active::before {
  content: "";
  background-image: url(../image/pen-icon.svg);
  background-repeat: no-repeat;
  width: 15px;
  height: 15px;
  display: block;
  position: absolute;
  right: 15px;
  top: 18px;
}
#account-order table thead td {
    font-weight: 600;
    font-size: 14px;
    line-height: 19px;
    color: #FFFFFF;
    background-color: #4453C4;
    height: auto;
    padding: 12px 15px !important;
}
#account-order table td{
    padding: 12px 15px !important;
    vertical-align: middle;
}
#account-order small {
    font-size: 10px;
    line-height: 14px;
    text-align: center;
    letter-spacing: 0.05em;
    color: #FFFFFF;
    background-color: #A4AEE0;
    border-radius: 50px;
    padding: 1px 8px;
}
td.text-left.product-td > .p_qty:last-child::after {
    display: none;
}

td.text-left.product-td > .p_qty::after {
    content: "/";
    padding-left: 2px;
}
td.text-left.product-td > .p_qty {
    padding-right: 10px;
    display: contents;
}
td.text-left.product-td {
    /* display: flex; */
}
span.Complete,b.Complete {
    font-size: 14px;
    line-height: 19px;
    color: #FFFFFF;
    background: #53C549;
    border-radius: 5px;
    padding: 3px 10px;
}
span.Pending,b.Pending {
  font-size: 14px;
  line-height: 19px;
  color: #FFFFFF;
  background: #FF9C07;
  border-radius: 5px;
  padding: 3px 10px;
}
#account-order table.orderlist {
    margin-top: 35px;
}
.order_id_date{
  font-size: 14px;
  line-height: 19px;
  letter-spacing: 0.02em;
  margin-top: 10px;
  margin-bottom: 27px;
}
.order_info > .order_right {
    width: 35%;
    padding-left: 53px;
}
table.table.order_info_tb thead tr td, table.table.order_info_tb tfoot tr td {
    background-color: #F3F4F9 !important;
}

.order_info > .order_left {
    width: 65%;
    padding-right: 18px;
}
.order_info {
    display: flex;
    flex-wrap: wrap;
}
.order_right img {
    border: 15px solid #F6F6FC;
    max-width: 340px;
    margin-bottom: 18px;
}
table.table.order_info_tb thead tr td {
    color: #4453C4 !important;
}
table.order_info_tb td {
    border-top: 0px !important;
}
table.order_info_tb tr:nth-child(even) {
    background-color: transparent;
}
.order_info_tb tfoot tr:nth-child(2) td {
    display: none;
}
.ostatus .history-s span:last-child {
    display: initial;
}

.ostatus .history-s span {
    display: none;
}
.history-s {
    display: contents;
}
.order_info_tb img {
    max-width: 60px;
    margin-right: 20px;
}
#account-order table.order_info_tb tfoot tr td {
    padding: 10px 25px !important;
    height: auto;
    font-weight: normal;
    font-size: 16px;
    line-height: 22px;
    letter-spacing: 0.01em;
    color: #474747;
    padding-top: 20px !important;
}
#account-order table.order_info_tb tfoot tr:last-child td:nth-child(2) {
    font-weight: bold;
}
#account-order table.order_info_tb tfoot tr:last-child td:nth-child(3) {
    font-weight: bold;
    font-size: 20px;
    line-height: 27px;
    color: #4453C4;
}
#account-order table.order_info_tb tfoot tr:last-child td {
    padding-top: 5px !important;
    padding-bottom: 20px !important;
}
.status_payment > div> span {
    max-width: 140px;
    display: inline-block;
    width: 100%;
}
.status_payment > div {
    margin-bottom: 15px;
}
span.cart_num {
    font-size: 8px;
    line-height: 11px;
    color: #FFFFFF;
    background-color: #474747;
    z-index: 1;
    border-radius: 50%;
    padding: 1px 4px !important;
    text-align: center;
    position: absolute;
    top: -10px;
    display: flex;
    justify-content: center;
    left: 17px;
}
li.my_menu{
  display: none;
}
.dataview div.fitbox{
  padding: 0px;
  min-height: auto;
}
.dataview div.fitbox img{
  display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}
.header-right .dropdown-menu-right li {
    place-content: baseline;
}

/* width */
.datatable-filter .dropdown-menu .inner::-webkit-scrollbar {
  width: 3px;

}

/* Track */
.datatable-filter .dropdown-menu .inner::-webkit-scrollbar-track {
  background: transparent;
}

/* Handle */
.datatable-filter .dropdown-menu .inner::-webkit-scrollbar-thumb {
  background: #EAEAF1;
}

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: red;
  opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: red;
}

::-ms-input-placeholder { /* Microsoft Edge */
  color: red;
}


@media only screen and (max-width:1199px) {
  .header-right li {
    margin-left: 15px;
    margin-right: 10px;
  }
  .order_right img {
    width: 100%;
  }
  .order_info > .order_right {
    padding-left: 23px;
  }
  .dashboard_box {
    padding: 0 15px;
  }
	.application-group h6 {
    margin-top: 10px;
	}
	#application-detail .top-content > div.right-div {
    width: 40%;
	}
	.application-group .panel-body > div.support > p {
    padding-left: 0px;
	}
	.application-group .panel-body > div.bottom-btn > div > div.switch-div {
    width: 50%;
	}
	.application-group .panel-body > div.bottom-btn > div > div{
		margin-right: 0px;
    padding-right: 15px;
		flex-wrap: wrap;
		width: 100%;
	}
	.application-group .filelabel {
    margin-left: 0px;
	}
	.application-group .panel-body > div.bottom-btn > div {
    flex-wrap: wrap;
	}
	p.subtitle, p.bold {
    padding-right: 10px;
	}
	.filter-table.boa > div:nth-child(1) {
    width: 50%;
	}
	.filter-table.boa > div:nth-child(1) label {
    width: 39%;
	}
	.filter-table.boa .form-group > div {
    max-width: inherit;
    width: 100%;
	}
	.filter-table.boa > div:last-child {
    padding-right: 0;
    width: 100%;
	}
	.form-group > ul {
    width: 100%;
	}
	li.button-dropdown.dateinput {
    width: 100%;
	}
	li.button-dropdown.dateinput > input {
    width: 100%;
	}
	.filter-table.boa > div:nth-child(2) {
    width: 50%;
    padding-left: 30px;
	}
	.filter-table.boa > div {
	    padding-right: 0px;
	}
	#dtTransactionView th.applicantname-th {
    width: 18% !important;
	}
	#dtTransactionView th.datetransaction-th {
    width: 49% !important;
	}
	.configure-box-view.admin-app .top-content {
    flex-wrap: wrap;
	}
	.configure-box-view.admin-app .top-content > .left-div {
    width: 100%;
	}
	.configure-box-view.admin-app .top-content .right-div {
	    width: 100%;
	    margin-top: 15px;
	}
	.configure-box-view .configure-top > div.remarks {
    width: 84%;
	}
	label.col-sm-3.control-label.input-jointaccic {
    padding-right: 15px !important;
	}
	#downline-upload2 .form-horizontal .form-group > label.col-sm-3.control-label {
	    width: 31%;
	}
	.login-form-div {
	    margin: auto;
	}
	.form-horizontal .right-div {
    padding-left: 25px;
	}
	.form-horizontal .left-div{
		padding-right: 25px;
	}
	.form-horizontal .form-group > div.col-sm-9 {
    width: 63%;
	}
	.form-horizontal .form-group > label.col-sm-3.control-label {
    width: 37%;
	}
}

@media only screen and (max-width:1050px) {
	table.create-agent td:last-child {
    position: relative;
	}
}
@media only screen and (max-width:1024px) {
  .login-form {
    margin: auto;
  }
}
@media only screen and (max-width:1005px) {
  .url-icon {
      margin-left: 6px;
  }
}

@media only screen and (max-width:1000px) {
  td.redeemed span {
    margin: 12%;
  }
  td.expired span {
    margin: 19%;
  }
  td.available span {
    margin: 17%;
  }
}
@media only screen and (max-width:991px) {
  table.cart-table tbody tr td:nth-child(3) {
    width: 30% !important;
  }
  #menu .nav > li > a {
    padding: 0 11px;
  }
  table.table.order_info_tb thead tr td:first-child {
    width: 50% !important;
  }
  #account-order table.order_info_tb td {
    padding: 12px 5px !important;
  }
  #account-order table thead td {
    padding: 12px 5px !important;
  }
  table.table.order_info_tb thead tr td:nth-child(2) {
    width: 36% !important;
  }
  div#account-edit fieldset {
    flex-wrap: wrap;
  }
  #d_quickcheckout .row {
    flex-wrap: wrap;
  }
  div#d_quickcheckout .qc-col-4.col-md-6 {
    width: 100%;
    border-right: 0px solid #E4E7EB;
  }
  #d_quickcheckout .qc-col-3.col-md-6 {
    width: 100%;
    margin-top: 15px;
  }
  .totalprice-tb {
    padding-right: 0px;
    padding-left: 0px;
  }
  #checkout-cart .buttons .pull-right {
    margin-right: 0px;
  }
  .agent-sales #customerGift td:nth-child(3), .agent-sales #customerGift td:nth-child(4) {
    width: 100% !important;
  }
  .agent-sales #customerGift td:last-child {
    width: 100% !important;
  }
  .agent-sales #customerGift td:last-child::before{
    display: none;
  }
  .agent-sales #customerGift td:nth-child(3)::before{
    content: "Challenge Period ";
  }
  .agent-sales #customerGift td:nth-child(4)::before{
    content: "Entitled Gift ";
  }
  .agent-sales #customerGift td:nth-child(5)::before{
    display: none;
  }
  .promotion_detail > div.left {
    width: 100%;
  }
  .promotion_detail > div.right {
    width: 100%;
    padding-left: 0px;
  }
  .promotion_info {
    padding-right: 0px;
  }
  #giftredemption-dashboard .top-content.promotion_detail_top .right-div .back-page {
    display: flex;
  }
  #promotionModal .modal-flex > div.right img.qr,
  #customerModal .modal-flex > div.right img.qr{
    width: 106px;
    margin: auto;
    text-align: center;
    display: block;
    margin-top: 10px;
    margin-bottom: 5px;
  }
  #promotionModal .modal-flex > div.left,#promotionModal .modal-flex > div.right,
  #customerModal .modal-flex > div.left,#customerModal .modal-flex > div.right {
    width: 100%;
  }
  #promotionModal .modal-content,
  #customerModal .modal-content{
    margin: 40px;
  }
  #promotionModal .modal-flex > div.right button.btn-primary,
  #customerModal .modal-flex > div.right button.btn-primary{
    margin-left: -15px;
    width: calc(100% + 30px);
    margin-bottom: -15px;
  }
  #promotionModal button.close,
  #customerModal button.close{
    right: -15px;
    top: -15px;
  }
  #promotionModal hr,
  #customerModal hr{
    display: none;
  }
  #promotionModal .modal-body,
  #customerModal .modal-body{
    padding: 15px;
  }
  #promotionModal .modal-flex > div.left img,
  #customerModal .modal-flex > div.left img{
    width: 220px;
    height: 220px;
    margin: auto;
    display: block;
  }
  .datatable-filter{
    display: none;
  }
  #giftredemption-dashboard .top-content .right-div .back-page{
    display: none;
  }
  .datatable-filter-btn{
    display: block;
    font-weight: 600;
    font-size: 11px;
    line-height: 15px;
    text-align: right;
    letter-spacing: 0.01em;
    color: #96B6EA;
    margin-top: 0 !important;

  }
  .datatable-filter-btn::before {
    content: "";
    background-image: url(../image/filter-icon.svg);
    background-repeat: no-repeat;
    width: 100%;
    height: 20px;
    display: flex;
    background-position: right;
  }

  #promotionGift th, #promotionGift td,
  #customerGift th, #customerGift td {
    width: 100% !important;
    height: auto;
    padding: 10px 15px!important;
    font-weight: bold;
  }
  #customerGift td:nth-child(8), #customerGift td:nth-child(3),
  #customerGift td:nth-child(4), #customerGift td:nth-child(5),
  #customerGift td:nth-child(6), #customerGift td:nth-child(7) {
    width: calc(50% - 30px) !important;
    text-align: left;
  }
  #promotionGift th,
  #customerGift th{
    display: none;
  }
  #promotionGift td.select-checkbox,
  #customerGift td.select-checkbox {
    display: none;
  }
  #promotionGift td:nth-child(2),
  #customerGift td:nth-child(2){
    background-color: #F6F6FC;
    color: #4453C4;
    font-size: 15px;
    font-weight: 600;
    padding: 12px 15px !important;
    padding-right: 90px !important;

  }
  #promotionGift td:nth-child(2)::after,
  #customerGift td:nth-child(2)::after{
    content: "";
    background-image: url(../image/arrow_more.svg);
    width: 12px;
    height: 15px;
    display: inline-block;
    position: relative;
    z-index: 92;
    background-size: contain;
    background-repeat: no-repeat;
    top: 2px;
    left: 4px;

  }

  #promotionGift tbody tr,
  #customerGift tbody tr {
    border: 1px solid #E5E5E5;
    position: relative;
    margin-bottom: 15px;
    display: flex;
    flex-wrap: wrap;
  }
  #promotionGift td:nth-child(3) {
    position: relative;
  }

  #promotionGift td:nth-child(3)::after {
    content: "";
    border-bottom: 1px solid #E5E5E5;
    width: 98%;
    height: 1px;
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
  }
  #customerGift td:nth-child(3)::before {
    content: "PO Number ";
    font-weight: normal;
    font-size: 11px;
    color: #474747;
    display: block;
  }
  #customerGift td:nth-child(4)::before {
    content: "Customer Name ";
    font-weight: normal;
    font-size: 11px;
    color: #474747;
    display: block;
  }
  #customerGift td:nth-child(5)::before {
    content: "TPOM Table No ";
    font-weight: normal;
    font-size: 11px;
    color: #474747;
    display: block;
  }
  #customerGift td:nth-child(6)::before {
    content: "Product ";
    font-weight: normal;
    font-size: 11px;
    color: #474747;
    display: block;
  }
  #customerGift td:nth-child(7)::before {
    content: "Entitled Gift ";
    font-weight: normal;
    font-size: 11px;
    color: #474747;
    display: block;
  }
  #customerGift td:nth-child(8)::before {
    content: "Booking Fee ";
    font-weight: normal;
    font-size: 11px;
    color: #474747;
    display: block;
  }
  #customerGift td:nth-child(9)::before {
    content: "Payment Date";
    font-weight: normal;
    font-size: 11px;
    color: #474747;
    display: block;
  }
  #promotionGift td:nth-child(3)::before {
    content: "SO Number : ";
    font-size: 11px;
    line-height: 15px;
    color: #474747;
    font-weight: normal;
  }
  #promotionGift td:nth-child(4)::before {
    content: "Customer Name ";
    font-weight: normal;
    font-size: 11px;
    color: #474747;
    display: block;
  }
  #promotionGift td:nth-child(5) {
    width: calc(50% - 30px) !important;
  }
  #promotionGift td:nth-child(4) {
    width: calc(50% - 30px) !important;
  }
  #promotionGift td:nth-child(5)::before {
    content: "Entitled Gift ";
    font-weight: normal;
    font-size: 11px;
    color: #474747;
    display: block;
  }
  #promotionGift td:nth-child(5){
    color: #4453C4;
  }
  #promotionGift td:nth-child(7)::before {
    content: "Redeem Location ";
    font-weight: normal;
    font-size: 11px;
    color: #474747;
    display: block;
  }
  #promotionGift td:nth-child(6) span,
  #customerGift td:nth-child(10) span,
  .agent-sales #customerGift td:nth-child(5) span{
    position: absolute;
    top: 10px;
    right: 10px;
    margin: 0;
  }
  table#promotionGift tr:nth-child(even),
  table#customerGift tr:nth-child(even){
    background-color: white;
  }
  #promotionGift td:nth-child(6),
  #customerGift td:nth-child(10) {
    padding: 0 !important;
  }
  #promotionGift button.btn.url-icon::before,
  #customerGift button.btn.url-icon::before{
    content: "VIEW QR CODE";
    color: white;
    padding: 22px 15px;
  }
  #promotionGift a.btn-view,
  #customerGift  a.btn-view{
      display: none;
  }
  #promotionGift button.btn.url-icon,
  #customerGift button.btn.url-icon{
    background-image: none;
    width: 100%;
    background-color: #4453C4;
    padding: 22px 15px;
    display: flex;
    align-items: center;
    text-align: center;
    margin: auto;
    justify-content: center;
  }
  #promotionGift td:last-child,
  #customerGift td:last-child {
    padding: 0 !important;
  }
  #promotionGift td:nth-child(7) {
    padding-top: 0px !important;
  }

  .datatable-filter > div .dropdown{
    max-width: inherit;
  }
  .datatable-filter {
    margin-bottom: 10px;
    flex-wrap: wrap;
  }
  .datatable-filter > div {
    width: 100%;
    padding: 0;
    margin-bottom: 10px;
  }
  .datatable-filter > div label {
    max-width: 77px;
    width: 100%;
  }
  td.available span {
    margin: 13%;
  }
  td.expired span {
    margin: 15%;
  }
  td.redeemed span {
    margin: 7%;
  }
  table#promotionGift th {
    padding: 5px 5px !important;
  }
  .url-icon {
    margin-left: -1px;
  }
  .announcements-detail > div.column_left {
    padding-right: 0px;
  }
  .announcements-detail img {
    border-radius: 10px;
    width: 100%;
    margin-bottom: 25px;
    max-width: 400px;
  }
  .announcements-detail .column_left {
    text-align: center;
  }
  .announcements-detail > div {
    width: 100%;
  }
  .announcements-detail > div.column_right {
    padding-left: 0px;
  }
  #account-register .login-bg {
    min-height: 300px;
  }
  #account-register .row.modal-full > div {
    width: 100%;
  }
  .modal-full {
    height: auto;
    margin-bottom: 0px !important;
  }
  .modal-full .modal-content {
    height: calc(100% + 170px);
  }
  div#login > div {
    width: 100%;
    height: 100%;
  }
  .login-bg {
    background-position: center 16%;
    min-height: 300px;
  }
  .login-form {
    box-shadow: none;
      margin: auto;
  }
  body #content{
    padding-bottom: 15px;
  }
  footer .row > div {
    text-align: center;
  }
  footer ul {
    place-content: center;
    margin-top: 8px;
  }
  .dashboard_box a {
    width: 50%;
  }
  div.fitbox {
    width: calc(100% - 12px) !important;
  }
  .header-right ul{
    padding-left: 0;
  }
  li.last-login {
    margin-left: 0 !important;
  }
	#application-detail table#viewApplication th{
		padding: 13px 8px !important;
	}
	#application-detail .info-p {
    flex-wrap: wrap;
	}
	#application-detail .info-p > p:nth-child(2), #application-detail .info-p > p:nth-child(1) {
    margin-right: 0px;
    width: 100%;
    margin-bottom: 10px;
	}
	.approver .application-group .panel-body > div.bottom-btn > div.column_right {
    width: 35%;
	}
	.approver .application-group .panel-body > div.bottom-btn > div {
    width: 65%;
	}
	#application-detail .top-content {
    flex-wrap: wrap;
	}
	#application-detail .top-content > div.right-div {
    width: 100%;
    margin-top: 15px;
		margin-bottom: 15px;
	}
	.application-top > div {
    width: 50%;
	}
	.application-top {
    flex-wrap: wrap;
	}
	.application-group .panel-body > div {
    width: 100%;
	}
	.application-group .panel-body > div > div.column_full > div {
    justify-content: flex-start;
	}
	.application-group .panel-body > div.support {
    width: 100%;
	}
	#dtTransactionView th.datetransaction-th {
    width: 40% !important;
	}
	#dtTransactionView th.applicantname-th {
    width: 22% !important;
	}
	table#dtConfigureView th {
    padding: 13px 20px !important;
	}
	.configure-box-view .configure-top > a {
	    margin-top: 15px;
	}
	.configure-box-view .configure-top > div {
    width: 50%;
	}
	.configure-box-view .configure-top > div.remarks {
    width: 100%;
    margin-right: 0px;
	}
	.configure-top > a {
    margin-top: 15px;
	}
	.configure-box > div.configure-top {
    flex-wrap: wrap;
	}
	#downline-thank2 div#content {
    min-height: auto;
	}
	#downline-upload2 .form-horizontal .form-group > label.col-sm-3.control-label {
	    width: 100%;
	}
	#downline-upload2 .form-horizontal .form-group > div.col-sm-9 {
    width: 67%;
    margin: 0 15px;
	}
	#downline-add .flow > div,#downline-upload .flow > div,#downline-thank .flow > div {
    width: 50% !important;
	}
	.form-horizontal .form-group {
    flex-wrap: wrap;
	}
	.form-horizontal .form-group > label.col-sm-3.control-label {
    width: 100%;
	}
	.form-horizontal .form-group > div.col-sm-9 {
    width: 100%;
	}
	div#agent-complete2 div#content {
    min-height: auto !important;
	}
	#agent-complete2 a.btn.btn-primary {
    margin-bottom: 40px;
	}
	div#agent-add, div#agent-complete, div#downline-upload, div#downline-add, div#downline-thank {
    margin-bottom: 0px !important;
	}
	.flow > div:nth-child(1),.flow > div:nth-child(2) {
    width: 50% ;
    margin-bottom: 10px;
	}
	.flow > div:nth-child(3){
		width: 100% ;
    margin-bottom: 10px;
	}
	.flow {
    flex-wrap: wrap;
	}
	.viewApplication {
    overflow-x: auto;
	}
	table th {
    padding: 13px 15px !important;
	}
	.login-form-div h1 {
    font-size: 40px;
	}
	.login-form-div img {
    max-width: 202px;
	}
	ul.nav.nav-tabs.nav-stacked li > a {
    font-size: 14px;
	}
	body > div.container {
    margin-bottom: 30px;
	}
}
@media only screen and (max-width:880px) {
  #account-order table.orderlist td {
      width: 100% !important;
      height: auto !important;
      border: 0px;
  }
  #account-order table.orderlist tr {
    display: flex;
    flex-wrap: wrap;
    border: 1px solid #ddd;
    margin-bottom: 15px;
    position: relative;
  }
  #account-order table.orderlist td:nth-child(1)::before {
    content: "Order ID ";
  }
  #account-order table.orderlist td:nth-child(1) {
    background-color: #F6F6FC;
    font-weight: 600;
    font-size: 15px;
    line-height: 20px;
    color: #4453C4;
  }
  #account-order table.orderlist td:nth-child(2)::before {
    content: "Date Added: ";
    display: block;
  }
  #account-order table.orderlist td:nth-child(3)::before {
    content: "Items: ";
    display: block;
  }
  #account-order table.orderlist td:nth-child(4)::before {
    content: "Order Total: ";
    display: block;
  }
  #account-order table.orderlist td:nth-child(5) span {
    position: absolute;
    right: 15px;
    top: 10px;
  }
  #account-order table.orderlist td:nth-child(5) {
    padding: 0 !important;
  }
  #account-order table.orderlist td:nth-child(6) {
    padding: 0 !important;
  }

  #account-order table.orderlist td:nth-child(6) a {
    width: 100%;
    display: block;
    max-width: inherit;
  }
  #account-order table.orderlist tr:nth-child(even) {
    background-color: white;
  }
  #account-order table.orderlist td::before{
    font-weight: normal;
    /* font-size: 11px; */
    /* line-height: 15px; */
  }
  #account-order table.orderlist td{
    font-weight: bold;
    /* font-size: 12px; */
    /* line-height: 16px; */
  }
  #account-order table.orderlist thead tr{
    display: none;
  }

}

@media only screen and (max-width:767px) {
  .header-right li {
    margin-right: 0px;
  }
  .totalprice-tb {
    padding-left: 15px;
  }
  header {
    box-shadow: 1px 1px 10px rgb(37 46 119 / 15%);
  }
  body > div.container {
    margin-top: 30px;
  }
  #menu .nav > li > a.active::after{
    display: none;
  }
  #menu .collapse.navbar-collapse.navbar-ex1-collapse{
    display: block;
  }
  #menu .navbar-nav {
    display: block;
    width: 100%;
    margin: 0px;
  }
  #menu .nav > li > a.active {
    border-radius: 0px !important;
    width: 100%;
    text-align: left;
  }
  #menu {
    display: block;
    width: 100%;
  }

/** fadeInLeft **/

@-webkit-keyframes fadeInLeft {
    from {
        opacity:0;
        -webkit-transform: translatex(100px);
        -moz-transform: translatex(100px);
        -o-transform: translatex(100px);
        transform: translatex(100px);
    }
    to {
        opacity:1;
        -webkit-transform: translatex(0);
        -moz-transform: translatex(0);
        -o-transform: translatex(0);
        transform: translatex(0);
    }
}
@-moz-keyframes fadeInLeft {
    from {
        opacity:0;
        -webkit-transform: translatex(100px);
        -moz-transform: translatex(100px);
        -o-transform: translatex(100px);
        transform: translatex(100px);
    }
    to {
        opacity:1;
        -webkit-transform: translatex(0);
        -moz-transform: translatex(0);
        -o-transform: translatex(0);
        transform: translatex(0);
    }
}
@keyframes fadeInLeft {
    from {
        opacity:0;
        -webkit-transform: translatex(100px);
        -moz-transform: translatex(100px);
        -o-transform: translatex(100px);
        transform: translatex(100px);
    }
    to {
        opacity:1;
        -webkit-transform: translatex(0);
        -moz-transform: translatex(0);
        -o-transform: translatex(0);
        transform: translatex(0);
    }
}

.top-menu {
    -webkit-animation-name: fadeInLeft;
    -moz-animation-name: fadeInLeft;
    -o-animation-name: fadeInLeft;
    animation-name: fadeInLeft;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-duration: .4s;
    -moz-animation-duration: .4s;
    -o-animation-duration: .4s;
    animation-duration: .4s;
    -webkit-animation-delay: .2s;
    -moz-animation-delay: .2s;
    -o-animation-duration:.2s;
    animation-delay: .2s;
}

  .top-menu{
    position: absolute;
    z-index: 9;
    width: inherit;
    height: calc(100% + 100%);
    display: none;
    overflow-x: hidden !important;
  }
  li.my_menu{
    display:block;
    background-image: url(../image/menu.svg);
    width: 23px;
    height: 18px;
    background-repeat: no-repeat;
    background-position: bottom;
  }
  .order_info > .order_left {
    width: 100%;
    padding-right: 0px;
  }
  .order_info > .order_right {
    width: 100%;
    padding-left: 0px;
    margin-top: 15px;
  }
  div#account-edit fieldset > div.left {
    margin-right: 0px;
  }
  div#account-edit fieldset > div.right {
    margin-left: 0px;
    margin-top: 15px;
  }

  div#account-edit fieldset > div {
    width: 100%;
  }
  table.table.cart-table thead tr td {
    display: none !important;
  }
  #checkout-cart table.cart-table tr {
    position: relative;
  }
  #checkout-cart table.cart-table tr td:nth-child(4), #checkout-cart table.cart-table tr td:nth-child(5) {
    width: 50% !important;
  }
  #checkout-cart table.cart-table tr td:nth-child(1) button {
    position: absolute;
    right: 0;
  }
  #checkout-cart table.cart-table tr td:nth-child(4)::before{
    content: "Price ";
    display: block;
    font-weight: 600;
    font-size: 14px;
    line-height: 19px;
    color: #4453C4;
  }
  #checkout-cart table.table.cart-total tr td:first-child {
    padding-left: 0px !important;
  }
  #checkout-cart table.cart-table tr td:nth-child(5) {
    display: flex;
    place-content: flex-end;
  }
  #checkout-cart table.cart-table tr td:nth-child(6)::before{
    content: "Total Price ";
    display: block;
    font-weight: 600;
    font-size: 14px;
    line-height: 19px;
    color: #4453C4;
  }
  #checkout-cart table.cart-table tr td, table.cart-table th {
    width: 100% !important;
    text-align: left !important;
    border: 0px !important;
    padding: 0 !important;
    padding: 5px 0 !important;
    height: auto;
  }
  #checkout-cart table.cart-table tbody tr {
    display: flex;
    flex-wrap: wrap;
    border-bottom: 1px solid #E4E7EB;
  }
  #lifeplanning-dashboard .form-horizontal .form-group > label.col-sm-3.control-label {
    width: 100%;
  }
  #lifeplanning-dashboard .dashboard_box a {
    width: 100%;
  }
  .promotion_detail_title .left {
    width: 100%;
  }
  .promotion_detail_title .right {
    width: 100%;
  }
  footer div.text-md-left {
    font-size: 14px;
  }
  .login-bg {
    background-position: center 20%;
    min-height: 250px;
  }
  .forgot {
    margin-bottom: 50px;
  }
  .login-form img {
    margin-top: 10px;
  }
  .top-content > div {
    width: 100%;
  }
  .top-content {
    flex-wrap: wrap;
  }
  div#logo {
    margin-bottom: 0px;
  }
  li.last-login {
    margin-top: 0px;
  }
	.navbar-nav {
    display: flex;
    width: max-content;
	}
	.header-right ul {
    min-height: auto;
    margin-bottom: 0px;
    padding-left: 0px;
	}
  li.top_account.my_cart {
    min-height: 65px;
    margin: 0 !important;
  }
  li.top_account.my_cart a > span {
    font-size: 0px;
  }
  span.cart_num {
    top: 7px;
  }
  li.hello_name > a {
    font-size: 0px;
    padding-right: 4px;
    margin-left: 5px;
  }
	.header-right li > a {
    margin-top: 0px;
	}
	a.btn.btn-secondary.view-document {
    margin-top: 20px;
	}
	.approver .application-group .panel-body > div.bottom-btn > div.column_right,
	.approver .application-group .panel-body > div.bottom-btn > div {
    width: 100%;
	}
	.application-group a.btn.btn-primary.submit-btn {
    margin-left: 0px;
	}
	.select-div {
    display: block;
	}
	div#tabs a.sort {
    display: none;
	}
	.application-group .panel-body > div.bottom-btn > div.column_right {
	    width: 100%;
	    margin-top: 15px;
	}
	.application-group .panel-body > div.bottom-btn > div {
    width: 100%;
	}
	.application-group a.btn.btn-primary.submit-btn {
    margin-left: 20px;
	}
	table#dtBoaDashboard td {
    padding: 0px 8px;
	}
	div#dtBoaDashboard_wrapper {
    overflow-x: auto;
	}
	table#dtBoaDashboard {
    min-width: 737px;
	}
	#dtTransactionView th.applicantname-th {
    width: 26% !important;
	}
	#dtTransactionView th.datetransaction-th {
    width: 32% !important;
	}
	.search-name {
    margin-right: 0px;
    width: 100%;
    margin-bottom: 15px;
	}
	.configure-box-view.admin-app .filter-table .form-group {
    width: 100%;
	}
	.configure-box-view.admin-app .filter-table .form-group > label{
		width: 20%;
	}
	.dateinput {
    width: 40%;
	}
	.configure-box-view.admin-app .top-content > .left-div {
    flex-wrap: wrap;
	}
	.configure-box-view.admin-app .top-content > .left-div .filter-table {
    width: 100%;
	}
	table#dtConfigureView th {
    padding: 10px 20px !important;
	}
	#dtConfigureView th.check-th {
    width: 10% !important;
	}
	#dtConfigureView th.no-th {
    width: 10% !important;
	}
	#dtConfigureView th.fullname-th {
    width: 25% !important;
	}
	table#dtConfigure {
    min-width: 720px !important;
	}
	div#dtConfigure_wrapper {
    overflow-x: auto;
	}
	.current-amount p {
    margin-left: 0px;
    margin-right: 0px;
    width: 100%;
    margin-top: 15px;
	}
	.current-amount {
    width: 100%;
	}
	.configure-box div.configure-top .form-group > div {
    max-width: inherit;
    width: 100%;
	}
	.configure-box div.configure-top .form-group {
    width: 100%;
	}
	.update-acc div#content.left-div {
    padding-right: 15px;
    margin-bottom: 15px;
	}
	.update-acc div#content.right-div {
    padding-left: 15px;
	}
	.update-acc .form-group label.col-sm-3.control-label {
    width: 25%;
	}
	.update-acc .form-group > div {
    width: 75%;
	}
	div#dtBasicExample2_wrapper {
    overflow-x: auto;
	}
	#accordion div#content {
    padding-bottom: 0px;
	}
	.next-input-line {
    margin-top: 15px !important;
	}
	.form-horizontal .right-div {
    padding-left: 15px;
	}
	.form-horizontal .left-div{
		padding-right: 15px;
	}
	.registration-p {
    flex-wrap: wrap;
	}
	.registration-p > div {
    width: 100%;
	}
	.registration-p > .right-div {
    place-content: flex-start;
	}
	.create-agent-div {
    overflow-x: auto;
	}
	table.create-agent {
    width: 737px;
	}
	table.create-agent th {
    padding: 10px 6px !important;
	}
	table.create-agent td {
    padding: 15px 3px;
	}
	table#dtBasicExample th:nth-child(3) {
    min-width: 100px;
	}
	table#dtBasicExample th:nth-child(2) {
    min-width: 109px;
	}
	table#dtBasicExample th:nth-child(1) {
    min-width: 48px;
	}
	table th {
    padding: 10px 10px !important;
	}
	div#dtBasicExample_wrapper{
		overflow-x: auto;
	}
	.login-form-div img {
    max-width: 63%;
	}
	#loginModal .modal-body .col-sm-6 {
    height: auto;
	}
	#loginModal .login-form {
    align-content: baseline;
	}
	.login-bg {
    height: 300px !important;
    background-position: center;
	}
	.info-bar-div {
		display: block;
		margin-bottom: 40px;
	}
	ul.nav.nav-tabs.nav-stacked {
    display: none;
	}
}
@media only screen and (max-width:576px) {
  .dataview div.fitbox{
    min-height: 290px;
  }
  #account-order table.order_info_tb tfoot tr td {
    padding: 10px 2px !important;
    font-size: 14px;
  }
  #account-order table.order_info_tb tfoot tr:last-child td:nth-child(3) {
    font-size: 17px;
  }
  #account-order table.order_info_tb tfoot tr td:nth-child(3){
    padding-right: 10px !important;
  }

  #account-order table.orderlist td::before{
    /* font-weight: normal; */
    font-size: 11px;
    line-height: 15px;
  }
  #account-order table.orderlist td{
    /* font-weight: bold; */
    font-size: 12px;
    line-height: 16px;
  }
  #checkout-cart .buttons .pull-left a {
    margin-bottom: 10px;
  }
  .custom-file-upload {
    display: block;
  }
  .custom-open-camera {
    margin-top: 10px;
    margin-left: 0px;
  }
  .pls-fill {
    margin-bottom: 25px;
    margin-top: 10px;
  }
  #giftredemption-dashboard .top-content.promotion_detail_top > div.left-div,
  #giftredemption-dashboard .top-content.promotion_detail_top > div.right-div {
    width: 100%;
  }
  #giftredemption-dashboard .top-content > div.left-div h2.cn {
    font-size: 14px;
    margin-bottom: 5px;
  }
  #giftredemption-dashboard .top-content > div.left-div h2{
    font-size: 20px;
  }

  .info.promotion div .info-title {
    min-width: 126px;
  }
  .info.promotion div span:last-child {
    width: 100%;
    margin-left: 10px;
  }
  .half-flex > .form-group:nth-child(1),
  .half-flex > .form-group:nth-child(2) {
    padding-right: 0px;
    padding-left: 0px;
  }
  .half-flex > .form-group {
    width: 100%;
  }
  .login-form {
    padding: 0;
  }
  .top-content .right-div a {
    /* margin-top: 10px; */
  }
  .top-content .right-div {
    flex-wrap: wrap;
  }
  #giftredemption-dashboard .top-content .right-div{
    width: 20%;
  }
  #giftredemption-dashboard .top-content > div.left-div {
    width: 80%;
  }
  .dashboard_box a {
    width: 100%;
  }
  div.fitbox {
    width: 100% !important;
  }
  .header-right li {
    place-content: flex-end;
    margin-top: 5px;
    margin-left: 10px;
  }
  .header-right ul {
    flex-wrap: wrap;
  }
  .header-right {
    padding-top: 10px;
  }
  .header-right li.last-login {
    display: none;
  }
  .acc::before {
    width: 20px;
    height: 20px;
    margin-right: 5px;
  }
	.application-group a.btn.btn-primary.submit-btn {
    margin-left: 0px;
	}
	.application-top > div {
    width: 100%;
	}
	.application-top{
		 margin-top: 0px;
	}
	#application-detail .top-content .not-active.center {
    padding-right: 10px;
    padding-left: 10px;
	}
	#application-detail .top-content > div {
    flex-wrap: wrap;
	}
	.application-group .panel-default>.panel-heading a {
    min-height: 65px;
    padding-top: 30px;
	}
	.application-group .panel-default>.panel-heading a > span {
    right: 10px;
    top: 10px;

	}
	.application-group .panel-body > div.bottom-btn > div > div.switch-div {
    width: 100%;
	}
	.application-group span.max {
    padding-left: 0px;
	}
	.application-group .panel-body > div > div {
    width: 100%;
	}
	.application-group .panel-body > div.bottom-btn > div > div p {
    min-width: 95px;
    margin-bottom: 10px;
	}
	.application-group .panel-body > div > div.column_full > div {
    flex-wrap: wrap;
	}
	.application-group .panel-body > div > div.column_full > div p {
    width: 100%;
	}
	.filter-table.boa > div:nth-child(1) label {
    width: 170px;
	}
	.filter-table.boa > div:nth-child(1) {
    width: 100%;
	}
	.filter-table.boa > div:nth-child(2) {
    width: 100%;
    padding-left: 0px;
	}
	.configure-box-view .top-content .right-div span {
    width: 100%;
		margin-bottom: 15px;
	}
	.configure-box-view .configure-top > div {
    width: 100%;
	}
	.configure-box-view .top-content .right-div {
    margin-top: 15px;
    flex-wrap: wrap;
		place-content: flex-start;
	}
	div#dtConfigureView_wrapper {
    overflow-x: auto;
	}
	#dtConfigureView th.fullname-th {
    width: 35% !important;
	}
	.configure-box div.configure-top .form-group > div {
    position: relative;
	}
	.configure-box div.configure-top .form-group {
    flex-wrap: wrap;
	}
	.configure-box > div.configure-top > .form-group label {
    width: 100%;
	}
	h2.fee > span {
    font-size: 40px;
	}
	.form-group.checkbox label {
    padding-right: 15px;
	}
	a.tooltip:hover span::before {
	    width: 12px;
	    height: 12px;
	    left: -6px;
	    top: 3px;
	    bottom: auto;
	    margin: auto;
	}
	a.tooltip:hover span {
    display: block;
    left: 0px;
    margin-top: -17px;
    margin-left: 25px;
    padding: 15px;
	}
	a.tooltip span {
    bottom: auto;
    top: inherit;
    margin-left: 0px;
    left: 0;
		width: auto;
	}
	a.tooltip span > div.right-div {
    padding-left: 0px !important;
	}
	span.max {
    display: block;
    padding-left: 0px;
	}
	#downline-add .flow > div,
	#downline-upload .flow > div,
	#downline-thank .flow > div {
    width: 100% !important;
	}
	.flow > div{
		width: 100% !important;
	}
	.info-p > p:nth-child(1) {
    margin-right: 0px;
    margin-bottom: 10px;
	}
	.info-p {
    display: block;
	}
	.top-content .right-div {
    text-align: left;
	}
	.top-content > div {
    width: 100%;
	}
	.top-content {
    flex-wrap: wrap;
	}
	.top-content .left-div h2 {
    margin-bottom: 20px;
	}
	.agent-login-form img {
    max-width: 222px;
	}
	.login-form-div h1 {
    font-size: 30px;
		justify-content: center;
	}
	.login-form-div img {
    margin-left: 5px;
	}
}

.share_statement_content img {
    width: 18px;
    max-height: 18px;
		margin-right: 8px;
		opacity: 0.4;
		transition: all .2s ease-in-out;
}
.share_statement_content a {
    display: block;
    margin-bottom: 10px;
}
.share_statement_content a span {
    color: #8f97dc;
    font-size: 14px;
		transition: all .2s ease-in-out;
}
.share_statement_content a:hover img {
    color: #867CDD;
    opacity: 1;
}
.share_statement_content a:hover span {
    color: #867CDD;
    font-weight: 600;
}
.share_statement_content a:last-child {
    margin-bottom: 0;
}

@media only screen and (max-width:425px){

	table#dtTransactionView {
    min-width: 395px;
	}
	div#dtTransactionView_wrapper {
    overflow-x: auto;
	}
}