@import url("/dl/com/fonts/bankgothic/font.css");
:root {
	--primary-color: #f48d2e;
	--secondary-color: #6c757d;
	--success-color: #28a745;
	--danger-color: #dc3545;
	--warning-color: #ffc107;
	--info-color: #17a2b8;
	--muted-color: #6c757d;
	--based-color: white; /* Either black or white based on color scheme*/

	/* Primary */
	--primary-bg-color: #1c2233;
	--primary-font-color: #ffffff;
	--primary-theme-bg: linear-gradient(
		180deg,
		rgb(241, 132, 62) 0%,
		#fbbe14 100%
	);
	--primary-theme-bg-color: #f1843e;
	--primary-theme-font-color: #ffffff;

	/* Secondary */
	--secondary-bg-color: #192e4c;
	--secondary-font-color: #000000;
	--secondary-theme-bg-color: #f79601;
	--secondary-theme-font-color: #ffffff;

	/* Tertiary */
	--tertiary-theme-bg-color: #ffffff;
	--tertiary-theme-font-color: #000000;
	--tertiary-bg-color: #273d76;

	/*Dark Theme*/
	--dark-primary-bg: #161629;
	--dark-secondary-bg: #282b38;
	--dark-primary-font-color: white;
	--dark-inverse-primary-font-color: #161629;
	--dark-secondary-font-color: #919090;
	--dark-page-heading-bg-color: transparent;
	--dark-page-heading-font-color: #ffd62c;
	--dark-page-subheading-font-color: var(--dark-secondary-font-color);
	--dark-form-element-input-bg-color: #1c1c2b;
	--dark-form-element-input-font-color: var(--dark-primary-font-color);
	--dark-menu-bg: var(--dark-secondary-bg);
	--dark-menu-font-color: var(--dark-primary-font-color);
	--dark-section-bg-color: rgb(81 81 81 /50%);
	--dark-section-font-color: var(--dark-primary-font-color);
	--dark-subsection-bg-color: var(--dark-secondary-bg);
	--dark-subsection-font-color: white;
	--dark-selectbox-bg-color: var(--dark-secondary-bg);
	--dark-selectbox-font-color: var(--dark-primary-font-color);
	--dark-accordion-bg-color: #090920;
	--dark-accordion-font-color: var(--dark-primary-font-color);
	--dark-dropdown-toggle-bg: #e6e6e6;
	--dark-dropdown-toggle-font-color: #333;
	--dark-dropdown-menu-bg: #fff;
	--dark-dropdown-menu-font-color: #333;
	--dark-dropdown-menu-active-bg: var(--primary-theme-bg-color);
	--dark-dropdown-menu-active-font-color: var(--primary-theme-font-color);
	--dark-instruction-bg: var(--dark-secondary-bg);

	/*Light Theme*/
	--light-primary-bg: white;
	--light-secondary-bg: #6f6f6f;
	--light-primary-font-color: #090920;
	--light-inverse-primary-font-color: white;
	--light-secondary-font-color: #6f6f6f;
	--light-font-secondary-color: #6f6f6f;
	--light-page-heading-bg-color: transparent;
	--light-page-heading-font-color: inherit;
	--light-page-subheading-font-color: var(--light-secondary-font-color);
	--light-form-element-input-bg-color: var(--light-primary-bg);
	--light-form-element-input-font-color: var(--light-primary-font-color);
	--light-menu-bg: var(--light-secondary-bg);
	--light-menu-font-color: white;
	--light-section-bg-color: var(--light-primary-bg);
	--light-section-font-color: var(--light-primary-font-color);
	--light-subsection-bg-color: var(--light-secondary-bg);
	--light-subsection-font-color: white;
	--light-selectbox-bg-color: var(--light-primary-bg);
	--light-selectbox-font-color: var(--light-primary-font-color);
	--light-accordion-bg-color: var(--light-primary-bg);
	--light-accordion-font-color: var(--light-primary-font-color);
	--light-dropdown-toggle-bg: #e6e6e6;
	--light-dropdown-toggle-font-color: #333;
	--light-dropdown-menu-bg: #fff;
	--light-dropdown-menu-font-color: #333;
	--light-dropdown-menu-active-bg: var(--primary-theme-bg-color);
	--light-dropdown-menu-active-font-color: var(--primary-theme-font-color);
	--light-instruction-bg: var(--light-secondary-bg);

	/*transparent-dark Theme*/
	--transparent-dark-primary-bg: transparent;
	--transparent-dark-secondary-bg: #6f6f6f;
	--transparent-dark-primary-font-color: #d6d6d6;
	--transparent-dark-inverse-primary-font-color: black;
	--transparent-dark-secondary-font-color: #6f6f6f;
	--transparent-dark-page-heading-bg-color: transparent;
	--transparent-dark-page-heading-font-color: inherit;
	--transparent-dark-page-subheading-font-color: var(--transparent-dark-secondary-font-color);
	--transparent-dark-form-element-input-bg-color: var(--transparent-dark-primary-bg);
	--transparent-dark-form-element-input-font-color: var(--transparent-dark-primary-font-color);
	--transparent-dark-menu-bg: var(--transparent-dark-secondary-bg);
	--transparent-dark-menu-font-color: white;
	--transparent-dark-section-bg-color: #292929;
	--transparent-dark-section-font-color: var(--transparent-dark-primary-font-color);
	--transparent-dark-subsection-bg-color: var(--transparent-dark-secondary-bg);
	--transparent-dark-subsection-font-color: white;
	--transparent-dark-selectbox-bg-color: var(--transparent-dark-primary-bg);
	--transparent-dark-selectbox-font-color: var(--transparent-dark-primary-font-color);
	--transparent-dark-accordion-bg-color: var(--transparent-dark-primary-bg);
	--transparent-dark-accordion-font-color: var(--transparent-dark-primary-font-color);
	--transparent-dark-dropdown-toggle-bg: #e6e6e6;
	--transparent-dark-dropdown-toggle-font-color: #333;
	--transparent-dark-dropdown-menu-bg: #fff;
	--transparent-dark-dropdown-menu-font-color: #333;
	--transparent-dark-dropdown-menu-active-bg: var(--primary-theme-bg-color);
	--transparent-dark-dropdown-menu-active-font-color: var(--primary-theme-font-color);
	--transparent-dark-instruction-bg: var(--transparent-dark-secondary-bg);

	/*transparent-light Theme*/
	--transparent-light-primary-bg: transparent;
	--transparent-light-secondary-bg: #6f6f6f;
	--transparent-light-primary-font-color: #090920;
	--transparent-light-inverse-primary-font-color: white;
	--transparent-light-secondary-font-color: #6f6f6f;
	--transparent-light-page-heading-bg-color: transparent;
	--transparent-light-page-heading-font-color: inherit;
	--transparent-light-page-subheading-font-color: var(--transparent-light-secondary-font-color);
	--transparent-light-form-element-input-bg-color: var(--transparent-light-primary-bg);
	--transparent-light-form-element-input-font-color: var(--transparent-light-primary-font-color);
	--transparent-light-menu-bg: var(--transparent-light-secondary-bg);
	--transparent-light-menu-font-color: white;
	--transparent-light-section-bg-color: var(--transparent-light-primary-bg);
	--transparent-light-section-font-color: var(--transparent-light-primary-font-color);
	--transparent-light-subsection-bg-color: var(--transparent-light-secondary-bg);
	--transparent-light-subsection-font-color: white;
	--transparent-light-selectbox-bg-color: var(--transparent-light-primary-bg);
	--transparent-light-selectbox-font-color: var(--transparent-light-primary-font-color);
	--transparent-light-accordion-bg-color: var(--transparent-light-primary-bg);
	--transparent-light-accordion-font-color: var(--transparent-light-primary-font-color);
	--transparent-light-dropdown-toggle-bg: #e6e6e6;
	--transparent-light-dropdown-toggle-font-color: #333;
	--transparent-light-dropdown-menu-bg: #fff;
	--transparent-light-dropdown-menu-font-color: #333;
	--transparent-light-dropdown-menu-active-bg: var(--primary-theme-bg-color);
	--transparent-light-dropdown-menu-active-font-color: var(--primary-theme-font-color);
	--transparent-light-instruction-bg: var(--transparent-light-secondary-bg);


	/* Bottom Nav */
	--mobile-bottom-nav-font-color: #ffffff;
	--mobile-bottom-nav-bg-color: #1c233a;

	/* Page Heading */
	--page-heading-bg-color: transparent;
	--page-heading-font-color: #ffd62c;
	--page-subheading-font-color: #919090;

	/* Buttons */
	--primary-btn-bg-color: #2c95b5;
	--primary-btn-font-color: #ffffff;
	--secondary-btn-bg-color: #ef0a7b;
	--secondary-btn-font-color: #ffffff;
	--tertiary-btn-bg-color: #ffc107;
	--tertiary-btn-font-color: #ffffff;
	--quaternary-btn-bg-color: #d42520;
	--quaternary-btn-font-color: #ffffff;

	/*Form UI*/
	--form-element-label-color: #6f6f6f;
	--form-element-label-size: 11px;
	--form-element-input-color: white;
	--form-element-input-color-constrast: #716d6d;
	--form-element-input-size: 11px;
	--form-element-border-color: #ccc;
	--form-element-label-heading-size: 15px;
	--form-element-label-heading-color: white;
	--form-element-input-bg-color: rgb(48 48 48 / 22%);

	/*Promotion Detail*/
	--promotion-details-panel-main-bg-color: #192e4c;
	--promotion-details-panel-heading-bg-color: #ffc107;
	--promotion-details-panel-heading-font-color: #000000;
	--promotion-details-panel-content-heading-bg-color: #ffc107;
	--promotion-details-panel-content-heading-font-color: #000000;
	--promotion-details-panel-content-description-bg-color: #1c2233;
	--promotion-details-panel-content-description-font-color: #ffffff;
	--promotion-details-panel-button-bg-color: #ffc107;
	--promotion-details-panel-button-font-color: #000000;
	--promotion-details-panel-timer-bg-color: #2c95b5;
	--promotion-details-panel-timer-font-color: #ffffff;
}

.btn.focus, .btn:focus {
    box-shadow: none;
}

/*Bootstrap Overwrite*/
.collapse.collapse {
	display: none;
}
.collapse.collapse.in {
	display: block;
}
/*Bootstrap Grid System*/
.col-1,
.col-xs-1 {
	width: 8.33333333%;
}
.col-2,
.col-xs-2 {
	width: 16.66666667%;
}
.col-2\.4,
.col-xs-2\.4 {
	width: 20%;
}
.col-3,
.col-xs-3 {
	width: 25%;
}
.col-4,
.col-xs-4 {
	width: 33.33333333%;
}
.col-5,
.col-xs-5 {
	width: 41.66666667%;
}
.col-6,
.col-xs-6 {
	width: 50%;
}
.col-7,
.col-xs-7 {
	width: 58.33333333%;
}
.col-8,
.col-xs-8 {
	width: 66.66666667%;
}
.col-9,
.col-xs-9 {
	width: 75%;
}
.col-10,
.col-xs-10 {
	width: 83.33333333%;
}
.col-11,
.col-xs-11 {
	width: 91.66666667%;
}
.col-12,
.col-xs-12 {
	width: 100%;
}

@media (min-width: 576px) {
	.col-sm-1 {
		width: 8.33333333%;
	}
	.col-sm-2 {
		width: 16.66666667%;
	}
	.col-sm-2\.4 {
		width: 20%;
	}
	.col-sm-3 {
		width: 25%;
	}
	.col-sm-4 {
		width: 33.33333333%;
	}
	.col-sm-5 {
		width: 41.66666667%;
	}
	.col-sm-6 {
		width: 50%;
	}
	.col-sm-7 {
		width: 58.33333333%;
	}
	.col-sm-8 {
		width: 66.66666667%;
	}
	.col-sm-9 {
		width: 75%;
	}
	.col-sm-10 {
		width: 83.33333333%;
	}
	.col-sm-11 {
		width: 91.66666667%;
	}
	.col-sm-12 {
		width: 100%;
	}
}
@media (min-width: 768px) {
	.col-md-1 {
		width: 8.33333333%;
	}
	.col-md-2 {
		width: 16.66666667%;
	}
	.col-md-2\.4 {
		width: 20%;
	}
	.col-md-3 {
		width: 25%;
	}
	.col-md-4 {
		width: 33.33333333%;
	}
	.col-md-5 {
		width: 41.66666667%;
	}
	.col-md-6 {
		width: 50%;
	}
	.col-md-7 {
		width: 58.33333333%;
	}
	.col-md-8 {
		width: 66.66666667%;
	}
	.col-md-9 {
		width: 75%;
	}
	.col-md-10 {
		width: 83.33333333%;
	}
	.col-md-11 {
		width: 91.66666667%;
	}
	.col-md-12 {
		width: 100%;
	}
}
@media (min-width: 992px) {
	.col-lg-1 {
		width: 8.33333333%;
	}
	.col-lg-2 {
		width: 16.66666667%;
	}
	.col-lg-2\.4 {
		width: 20%;
	}
	.col-lg-3 {
		width: 25%;
	}
	.col-lg-4 {
		width: 33.33333333%;
	}
	.col-lg-5 {
		width: 41.66666667%;
	}
	.col-lg-6 {
		width: 50%;
	}
	.col-lg-7 {
		width: 58.33333333%;
	}
	.col-lg-8 {
		width: 66.66666667%;
	}
	.col-lg-9 {
		width: 75%;
	}
	.col-lg-10 {
		width: 83.33333333%;
	}
	.col-lg-11 {
		width: 91.66666667%;
	}
	.col-lg-12 {
		width: 100%;
	}
}
@media (min-width: 1200px) {
	.col-xl-1 {
		width: 8.33333333%;
	}
	.col-xl-2 {
		width: 16.66666667%;
	}
	.col-xl-2\.4 {
		width: 20%;
	}
	.col-xl-3 {
		width: 25%;
	}
	.col-xl-4 {
		width: 33.33333333%;
	}
	.col-xl-5 {
		width: 41.66666667%;
	}
	.col-xl-6 {
		width: 50%;
	}
	.col-xl-7 {
		width: 58.33333333%;
	}
	.col-xl-8 {
		width: 66.66666667%;
	}
	.col-xl-9 {
		width: 75%;
	}
	.col-xl-10 {
		width: 83.33333333%;
	}
	.col-xl-11 {
		width: 91.66666667%;
	}
	.col-xl-12 {
		width: 100%;
	}
}


/*Icons*/
.dl-result-icon {
	background: url("/dl/com/itemM/images/Result.png");
	height: 1em;
	width: 1em;
	background-size: 1em 1em;
	margin: auto;
}
.dl-MyBets-icon {
	background: url("/dl/com/itemM/images/My-bet.png");
	height: 1em;
	width: 1em;
	background-size: 1em 1em;
	margin: auto;
}
.dl-Statement-icon {
	background: url("/dl/com/itemM/images/Statement.png");
	height: 1em;
	width: 1em;
	background-size: 1em 1em;
	margin: auto;
}
.dl-Account-icon {
	background: url("/dl/com/itemM/images/Account.png");
	height: 1em;
	width: 1em;
	background-size: 1em 1em;
	margin: auto;
}
.dl-Contact-icon {
	background: url("/dl/com/itemM/images/Contact-Us.png");
	height: 1em;
	width: 1em;
	background-size: 1em 1em;
	margin: auto;
}
.dl-Message-icon {
	background: url("/dl/com/itemM/images/message.png");
	height: 1em;
	width: 1em;
	background-size: 1em 1em;
	margin: auto;
}

/*Overwrite layer.css*/
.layui-layer-dialog .layui-layer-content.layui-layer-content {
	word-break: break-word;
}

/*注册框*/
.form-group p {
	font-size: 12px;
	padding: 0px 5px;
	width: 90%;
	color: #888;
	text-shadow: none;
}
.form-group input::-webkit-input-placeholder {
	color: #bdcada;
}
.form-group input:-moz-placeholder {
	color: #bdcada;
} /* Mozilla Firefox 4 to 18 适配火狐 */
.form-group input::-moz-placeholder {
	color: #bdcada;
} /* Mozilla Firefox 19+ 适配火狐 */
.form-group input:-ms-input-placeholder {
	color: #bdcada;
} /* Internet Explorer 10+ 适配ie*/
/* --------- Tooltip Styles ---------- */
.tooltip.fade:not(.show) {
	opacity: 1;
}
.tooltip-reg .tooltip {
	font-size: 11px;
}
#home-reg input,
#home-reg select {
	height: 40px;
	font-size: 14px;
	border: 1px solid #cecfd4;
	border-radius: 3px;
	box-sizing: border-box;
	padding: 5px 10px;
	width: 90%;
}
#home-reg span {
	height: 40px;
}

.fancybox-container {
	z-index: 9999;
}

@media only screen and (max-width: 750px) {
	#navbar-sub ul li ul li img {
		width: 80px !important;
		height: 80px !important;
	}
}

@media only screen and (min-width: 750px) {
	#navbar-sub ul li ul li img {
		width: 130px !important;
		height: 150px !important;
	}
}

#navbar-sub li ul {
	position: absolute !important ;
	min-width: 100%;
	text-align: center;
	border: 1px solid rosybrown;
	background: rgba(0, 0, 0, 0.8);
	padding: 10px 20px;
	right: 50px;
	z-index: 1000;
	display: none;
}
#navbar-sub ul {
	overflow: hidden;
	padding: 0;
	float: right;
}

/*NAVBAR SCROLL ON MOBILE VIEW*/
@media only screen and (max-width: 750px) {
	.navbar-sub {
		display: grid;
	}

	#navbar-sub ul {
		white-space: nowrap;
		overflow-x: auto;
		display: flex;
		width: 100%;
	}
}

@media only screen and (max-width: 750px) {
	#navbar-sub li ul li {
		/*float:left;*/
		line-height: 40px;
		text-align: center;
		font-size: 16px; /*height: 120px;*/ /*display: flex;*/
		flex-direction: column;
		justify-content: flex-end;
		display: inline-block;
		vertical-align: middle;
		float: none !important;
		height: auto !important; /*margin-left: -5px !important; margin-right: 0px !important; width: 16.66666%;*/
	}
}
@media only screen and (min-width: 750px) {
	#navbar-sub li ul li {
		/*float:left;*/
		line-height: 40px;
		text-align: center;
		font-size: 16px; /*height: 120px;*/ /*display: flex;*/
		flex-direction: column;
		justify-content: flex-end;
		display: inline-block;
		vertical-align: middle;
		float: none !important;
		height: auto !important;
		margin-left: -5px !important;
		margin-right: 0px !important;
		width: 16.66666%;
	}
}
#navbar-sub li ul li a {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	height: 100%;
}
#navbar-sub li ul li a img {
	margin: auto;
}

/*适配移动端*/
@media screen and (min-width: 640px) {
	#navbar-sub li ul {
		min-width: 640px;
	}
}
@media screen and (max-width: 1025px) {
}

/*Promotion Item Default CSS*/
.pkg-item {
	border: 2px solid #ccc;
	overflow: hidden;
	margin-bottom: 5px;
	padding: 2px;
}

/*Register Form Default CSS*/
.prefix-wrapper {
	display: flex;
	flex-wrap: wrap;
}
.prefix {
	position: relative;
	display: inline-flex;
	flex-wrap: wrap;
	width: 100%;
}
.prefix + i {
	flex-grow: 1;
}
#home-reg input,
#home-reg select,
#home-reg .prefix {
	width: 90%;
}
.prefix span.parentName,
.prefix span.input-group-addon.parentName {
	color: black;
	background: whitesmoke;
	width: fit-content;
	text-align: right;
	display: inline-flex;
	align-items: center;
	justify-content: flex-end;
	border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;
	overflow-x: hidden;
	border: none;
}
.prefix input,
#home-reg .prefix input,
.reg-panel .prefix input,
.reg-panel .form-group .prefix input,
.register-wrapper form .form-group .prefix input,
.input-group .prefix input[type="date"],
.input-group .prefix input[type="datetime-local"],
.input-group .prefix input[type="datetime"],
.input-group .prefix input[type="email"],
.input-group .prefix input[type="number"],
.input-group .prefix input[type="password"],
.input-group .prefix input[type="tel"],
.input-group .prefix input[type="text"],
.input-group .prefix input[type="time"] {
	display: inline-flex;
	width: 15%;
	border-top-left-radius: 0px;
	border-bottom-left-radius: 0px;
	flex-grow: 1;
	padding-left: 5px;
}
.prefix i,
.prefix.item i {
	flex-grow: 1;
}

.expired:after {
	content: "EXPIRED";
	font-size: 40px;
	font-weight: bolder;
	color: rgb(255, 0, 0, 0.15);
	border-top: 10px solid;
	border-bottom: 10px solid;
	text-align: center;
	position: absolute;
	top: 35%;
	left: 10%;
	width: 80%;
	line-height: 200%;
	transform: rotate(-20deg);
}

.redeemed {
	position: relative;
}
.redeemed:after {
	content: "REDEEMED";
	font-size: 40px;
	font-weight: bolder;
	color: rgb(75, 181, 67, 0.15);
	border-top: 10px solid;
	border-bottom: 10px solid;
	text-align: center;
	position: absolute;
	top: 35%;
	left: 10%;
	width: 80%;
	line-height: 200%;
	transform: rotate(-20deg);
}

.finalized {
	position: relative;
}
.finalized:after {
	content: "FINALIZED";
	font-size: 40px;
	font-weight: bolder;
	color: rgb(2, 117, 216, 0.2);
	border-top: 10px solid;
	border-bottom: 10px solid;
	text-align: center;
	position: absolute;
	top: 35%;
	left: 10%;
	width: 80%;
	line-height: 200%;
	transform: rotate(-20deg);
}

.ticket-section {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 15px;
}

@media (min-width: 768px) {
	.ticket-section {
	    grid-template-columns: repeat(4, 4fr);
	}
}

.ld-details-btns {
    background: rgb(213 212 212);
    padding: 5px;
}

.ld-details-date {
    grid-template-columns: 2fr 3fr;
}

.ld-details-title {
    border-left: 3px solid #2386b8;
    padding-left: 5px;
}

.ld-attempts {
    position: absolute;
    right: 5%;
    top: 5%;
    background: black;
    padding: 2px 10px;
    border-radius: 15px;
    border: 2px solid #ffffff40;
}

.ld-pill-status {
    padding: 5px 10px;
    border-radius: 15px;
    font-size: 11px;
    color: white;
}

.pill-canceled {background: #B0BEC5;}

.pill-pending {background: #42A5F5;}

.pill-inactive {background: #757575;}

.pill-halfattempt {background: #FFA726;}

.pill-fullattempt {background: #66BB6A;}

.pill-expired {background: #FF7043;}

.ticket {
	position: relative;
	max-width: 320px;
	margin: 5px;
	display: inline-block;
	flex-grow: 1;
	width: 100%;
	border: 1px solid lightgray;
	border-radius: 10px;
}
.ticket-section .ticket {
	max-width: 320px;
	width: 32%;
}
.ticket table {
	margin: 0;
}
@media (max-width: 767.98px) {
	.ticket {
		width: 100%;
	}
	.ticket-section .ticket {
		width: 100%;
	}
}

.ticket img {
	width: 100%;
	height: 120px;
	object-fit: cover;
}

div.imageInfo {
	position: relative;
}
div.imageInfo:hover {
	filter: brightness(0.8);
}
div.imageInfo:before {
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	font-size: 3rem;
	content: "\f05a";
	color: white;
	position: absolute;
	right: 10px;
	bottom: 5px;
}
div.imageInfo:hover:before {
	content: "\f05a \ Click to view info";
	right: left;
	bottom: 5px;
	font-size: 2rem;
}

.btn-xs.btn-xs,
.btn-group-xs.btn-group-xs > .btn {
	padding: 1px 5px;
	font-size: 12px;
	line-height: 1.5;
	border-radius: 3px;
}

.language-selector img {
	max-height: 30px;
	height: 100%;
}

.fancybox-stage .fancybox-slide > div {
	/*background: rgb(7 22 44 / 75%) !important;*/
	border: 0px !important;
	border-radius: 15px;
}

.fancybox-stage .fancybox-slide > div[id*="terms"] {
	background: white;
}
.fancybox-stage .fancybox-slide > div[id*="terms"] hr {
	background: white;
}

.fancybox-stage .fancybox-content > div {
	background: transparent !important;
	border: 0px !important;
}

.fancybox-stage .fancybox-content > div,
.fancybox-stage .fancybox-content > div a,
.fancybox-stage .fancybox-content > div p {
	color: grey;
}

.fancybox-stage .fancybox-content > div a:hover,
.fancybox-stage .fancybox-content > div a:focus,
.fancybox-stage .fancybox-content > div li.active > a {
	color: dimgray;
	background: white;
}

.fancybox-stage .card-header h2 {
	font-size: 20px !important;
}

.fancybox-stage .fancybox-content div ul i.fas.fa-check-square {
	color: #8bc34a !important;
	padding-right: 10px;
}

.fancybox-stage .card-header .text-green {
	color: #8bc34a;
}

.fancybox-stage .fancybox-close-small {
	padding: 10px !important;
}

.fancybox-slide table {
	color: black !important;
}

.dl-welcome {
	font-family: "BankGothic Bold", sans-serif;
	font-size: 3rem;
	letter-spacing: 2px;
	background-size: 100% 90px;
	height: 90px;
	padding-top: 30px;
	text-shadow: 0 0 2px #858585;
	-moz-text-shadow: 0 0 2px #858585;
	-webkit-text-shadow: 0 0 2px #858585;
}

.otp-btn {
	border: none !important;
	color: white !important;
	text-align: center !important;
	display: inline-block !important;
	font-size: 12px !important;
	border-radius: 100vw !important;
	background: linear-gradient(
		25deg,
		rgba(162, 46, 40, 1) 0%,
		rgb(55 36 59) 100%
	) !important;
	height: 40px !important;
}

.otp-tab {
	border: none;
	color: black;
	text-align: center;
	display: inline-block;
	font-size: 15px;
	border-radius: 100vw;
	background: -webkit-linear-gradient(
		0deg,
		rgba(94, 1, 3, 1) 0%,
		rgba(241, 0, 0, 1) 100%
	);
	background: -o-linear-gradient(
		0deg,
		rgba(94, 1, 3, 1) 0%,
		rgba(241, 0, 0, 1) 100%
	);
	background: -moz-linear-gradient(
		0deg,
		rgba(94, 1, 3, 1) 0%,
		rgba(241, 0, 0, 1) 100%
	);
	background: linear-gradient(0deg, rgb(138 138 138) 0%, rgb(135 135 135) 100%);
	margin: 15px 15px;
	cursor: pointer;
}

.otp-tab.active {
	background: linear-gradient(0deg, rgb(2 9 25) 0%, rgb(20 98 247) 100%);
	color: white;
}

.input-group[class*="otp-by-"]:not(.active) {
	/* CSS rules */
	display: none;
}

/* Hide element only on mobile view */
@media (max-width: 767px) {
	.hide-on-mobile {
		display: none !important;
	}
}

/* Hide element only on desktop view */
@media (min-width: 768px) {
	.hide-on-desktop {
		display: none !important;
	}
}

/* Remove top left border radius */
.no-top-left-border-radius {
	border-top-left-radius: 0 !important;
}

/* Remove top right border radius */
.no-top-right-border-radius {
	border-top-right-radius: 0 !important;
}

/* Remove bottom left border radius */
.no-bottom-left-border-radius {
	border-bottom-left-radius: 0 !important;
}

/* Remove bottom right border radius */
.no-bottom-right-border-radius {
	border-bottom-right-radius: 0 !important;
}

.pkg-item.disabled {
	background: rgb(0, 0, 0, 0.1);
	filter: grayscale(1);
}
.pkg-item.disabled:hover {
	filter: grayscale(0);
	border: 2px solid transparent;
}

.sort-container {
	display: flex;
	align-items: center;
	width: 35%;
	height: 4rem;
}

.sort-container .sort-type-container .standard-select {
	align-items: center;
	justify-content: space-between;
	background: #ececec;
	border-radius: 1rem;
	padding: 0 2rem 0 2rem;
	font-weight: bold;
}

.sort-container .sort-type-container .standard-select .drop-down-arrow {
	width: 0.1rem;
}

.standard-tab .tab-container {
	display: flex;
	align-items: center;
	padding: 0px 1rem;
	background: #cecece;
	width: 100%;
	height: 3rem;
	border-radius: 0.5rem;
}

.standard-tab .tab-container .tab-wrapper {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	white-space: nowrap;
	background: #cecece;
	padding-right: 3rem;
	min-width: unset;
	min-height: unset;
	cursor: pointer;
}

.standard-tab .tab-container .tab-wrapper.active p {
	padding: 0.1rem 0;
	border-bottom: 0.3rem solid #ff8a00;
}

.navbar-expand-lg .navbar-nav .dropdown-menu {
	z-index: 2;
}

#fileInput[type="file"] {
	display: block;
	padding: 10px 20px;
	border: 2px dashed #808080a1;
}

.pkg-list {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px 5px;
}

@media (min-width: 768px) {
	.pkg-list {
		grid-template-columns: 1fr 1fr 1fr;
	}
}

.pkg-item {
	border-radius: 5px;
	border: 2px solid #ccc;
	overflow: hidden;
	margin-bottom: 20px;
	padding: 2px;
	height: 100%;
	display: flex;
	flex-direction: column;
	width: 100%;
}

.package-image-section {
	height: 95px;
	background: #eeeeee;
}

@media (min-width: 768px) {
	.package-image-section {
		height: 160px;
	}
}

.package-details-image-section {
	height: 160px;
	background: #eeeeee;
}

@media (min-width: 768px) {
	.package-details-image-section {
		height: 300px;
	}
}

.package-buttons-section {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 5px;
	margin-top: auto;
}

.package-details-intro-section {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: repeat(5, auto);
	grid-template-areas:
		"package-details-title-section"
		"package-details-limit-section"
		"package-details-game-category-section"
		"package-details-countdown-section"
		"package-details-apply-section";
	gap: 15px 0px;
	padding: 10px 15px;
}

@media (min-width: 768px) {
	.package-details-intro-section {
		display: grid;
		grid-template-columns: 2fr 1fr;
		grid-template-rows: repeat(3, 1fr);
		grid-template-areas:
			"package-details-title-section package-details-game-category-section"
			"package-details-limit-section package-details-countdown-section"
			"package-details-apply-section package-details-countdown-section";
		gap: 0px 15px;
		padding: 10px 15px;
	}
}

.package-details-title-section {
	grid-area: package-details-title-section;
}

.package-details-limit-section {
	grid-area: package-details-limit-section;
}

.package-details-apply-section {
	grid-area: package-details-apply-section;
}

.package-details-game-category-section {
	grid-area: package-details-game-category-section;
}

.package-details-countdown-section {
	grid-area: package-details-countdown-section;
}

.package-description-section {
	padding: 5px 0px;
}

.package-description-title-section {
	font-size: 11px;
	font-weight: 600;
}

.package-description-details-section {
	font-size: 10px;
	padding-top: 5px;
	font-weight: 400;
}

@media (min-width: 768px) {
	.package-description-title-section {
		font-size: 14px;
	}

	.package-description-details-section {
		font-size: 11px;
	}
}

.package-game-category-label {
	gap: 5px;
	display: flex;
	flex-direction: row;
	align-items: center;
	flex-wrap: wrap;
	width: 100%;
}

/***
    Customization
**/
.form-element {
	position: relative;
	min-width: 0;
	padding: 5px 0px;
	display: flex;
	flex-direction: column;
}

.form-element.form-row {
	flex-direction: row;
}

.form-element__label {
	text-wrap: nowrap;
	-ms-hyphens: auto;
	hyphens: auto;
	display: flex;
	font-size: var(--form-element-label-size);
	flex: 1;
	width: 100%;
	font-weight: normal;
}

.form-element__label,
.form-element__label p {
	font-size: var(--form-element-label-size);
	line-height: 1;
	margin-bottom: 5px;
}

.form-element__control {
	clear: left;
	position: relative;
	display: flex;
	width: 100%;
	align-items: flex-start;
	flex-direction: column;
	flex: 1;
	gap: 20px;
}

.form-element__box {
	width: 100%;
}

@media (min-width: 768px) {
	.form-element__control {
		flex: 3;
	}
}

.form-element__input {
	width: 100%;
	height: 100%;
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
}

.form-element__input .form-element__recipient_bank_account_name,
.form-element__input .form-element__recipient_bank_account_number {
	width: 100%;
	position: relative;
}

.form-element__input
	.form-element__recipient_bank_account_name
	.copy-details-icon,
.form-element__input
	.form-element__recipient_bank_account_number
	.copy-details-icon {
	/* position: absolute; */
	right: 0;
	top: 0;
	display: flex;
	align-items: center;
	height: 100%;
	padding: 15px;
	color: white;
    background: var(--theme-primary-color);
	border-top-right-radius: 5px;
	border-bottom-right-radius: 4px;
	cursor: pointer;
}

.recipient_account_name_box,
.recipient_account_number_box {
	display: flex;
	gap: 5px;
	align-items: center;
}

.form-element .error {
	font-size: var(--form-element-input-size);
	/* font-size: .75rem;
    margin-top: .125rem;
    display: block; */
}

.form-element-icon {
	position: absolute;
	right: 10px;
	display: flex;
	align-items: center;
	height: 100%;
	gap: 8px;
	top: 0px;
}

.form-element__content_height {
	position: relative;
}

.form-element.form-row .form-element__content_height {
	height: 34px;
	width: 100%;
	align-items: center;
	display: flex;
}

.form-element #validImg {
	float: left;
	width: 100%;
	max-width: 100px;
	height: 100%;
	border-radius: 0px;
	margin: 0;
	border-bottom-left-radius: 10px;
	border-top-left-radius: 10px;
}

.form-element #validCode {
	width: 100%;
	max-width: 100%;
	border-radius: 0;
	border-bottom-right-radius: 10px;
	border-top-right-radius: 10px;
}

.form-element__amount_btns {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 10px;
	width: 100%;
}

.form-element__preset_amount_btn,
.form-element__preset_amount_btn:hover:not(.active) {
	background: #f0f0f0; /* This may be redundant, you can remove it if the background should not change */
	color: orange;
}

.form-element__preset_amount_btn.active {
	background: var(--primary-theme-bg);
	color: var(--primary-theme-font-color);
}

.form-element .form-control {
	border: 1px solid var(--form-element-border-color);
}

.form-element__input .form-control:focus {
	border: 1px solid #c3c3c3;
	box-shadow: none;
	outline: 0px;
}

.form-element__btn {
	padding: 0.5em 3em;
}

.form-element__btn-secondary {
	border: 1px solid #f1843e;
	background: transparent;
	color: orange;
}

.btn.form-element__btn-primary {
	background: var(--primary-theme-bg);
	border: 1px solid transparent;
	color: var(--primary-theme-font-color);
}

.form-element__transaction_type {
	display: grid;
	grid-template-columns: 3fr 1fr 3fr;
}

.form-element.transaction_type_icon {
	justify-content: center;
	text-align: center;
	font-size: 1.5em;
	color: orange;
}

label.each-payment-method.payment-selection-box input[type="radio"],
input[type="checkbox"] {
	position: absolute;
	opacity: 0;
}

label.each-payment-method.payment-selection-box:has(input:checked) {
	border: 1px solid transparent;
	background: var(--primary-theme-bg);
	color: var(--primary-theme-font-color);
}
label.each-payment-method.payment-selection-box:has(input:checked) img {
	filter: brightness(0.5);
}

label.each-payment-method.payment-selection-box:has(input:checked)
	.form__label-name {
}

.form__label-name {
	font-weight: normal;
	font-size: 12px;
	margin-bottom: initial;
}

.form-element__section {
	gap: 10px;
	display: grid;
}

.transaction-footer {
	/* border-top: 1px solid #c6c6c6; */
	display: flex;
	gap: 10px;
	justify-content: end;
	margin-top: 30px;
}

.transaction-info-section,
.transaction-method-section {
	display: flex;
	flex-direction: column;
}

.pkg-img {
	height: 160px;
	justify-content: center;
}

.transaction-method-section .transaction-details {
	/* max-height: 300px; */
	/*overflow: scroll;*/

}

/* .shadow-top {
    position: relative;
    z-index: 2;
    box-shadow: 0px 50px 20px -15px rgb(255 255 255 / 90%) inset;
    height: 50px;
    margin-bottom: -50px;
}

.shadow-bottom {
    position: relative;
    z-index: 2;
    box-shadow: 0px -50px 20px -15px rgb(255 255 255 / 90%) inset;
    height: 50px;
    margin-top: -50px;
} */

/* Customize scrollbar for WebKit browsers */
.transaction-method-section .transaction-details::-webkit-scrollbar {
	width: 12px;
	/* Width of the scrollbar */
	background: #f1f1f1;
	/* Color of the scrollbar track */
}

.transaction-method-section .transaction-details::-webkit-scrollbar-thumb {
	background: #d9d9d9;
	/* Color of the scrollbar thumb */
	border-radius: 6px;
	/* Rounded corners for the thumb */
}

/* Customize scrollbar for Firefox */
.transaction-method-section .transaction-details {
	scrollbar-width: thin;
	/* Make scrollbar thinner */
	scrollbar-color: #d9d9d9 #f1f1f1;
	/* Thumb color, Track color */
}

.transaction-method-section .transaction-details::-webkit-scrollbar-thumb {
	background: #d9d9d9;
	/* Color of the scrollbar thumb */
	border-radius: 6px;
	/* Rounded corners for the thumb */
}

.transaction-method-section .transaction-details::-webkit-scrollbar-track {
	background: #f1f1f1;
	/* Color of the scrollbar track */
}

.package-instruction-details {
	background: #090920;
}

.upload-section {
	position: relative;
	width: 100%;
	max-width: 100%;
	/* Adjust the max-width as needed */
	margin: 0 auto;
	/* Center the section horizontally */
}

.file-upload {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	opacity: 0;
	cursor: pointer;
}

.upload-box {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	border: 0.5px solid var(--theme-primary-color);
	border-radius: 10px;
	padding: 30px;
	text-align: center;
	/* background: linear-gradient(
		180deg,
		rgba(255, 255, 255, 0.54) 0%,
		#ffffff 100%
	); */
	box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);
}

.upload-box a {
	/* text-decoration: underline; */
}

.color-payment-theme {
	color: var(--primary-color);
}

.btn-payment-theme {
	background: var(--primary-color);
}

.upload-logo {
	width: 50px;
	/* Adjust size as needed */
	height: 50px;
	/* Adjust size as needed */
	margin-bottom: 20px;
	/* Space between logo and text */
}

.upload-box p {
	font-size: 16px;
	/* Text size */
	/* color: #666; */
	/* Text color */
}



/*.transaction-section {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto auto;
}

@media (min-width: 768px) {
	.transaction-section {
		display: grid;
		grid-template-columns: 1fr 2fr 1fr;
		grid-template-rows: auto;
		gap: 5%;
	}
}*/

.transaction-section > div {
	padding-bottom: 30px;
}

.transaction-section .transaction-details {
	display: grid;
}
@media (min-width: 768px) {
	.transaction-section .transaction-details {
		display: grid;
		gap: 15px;
	}
}

.amount-btns {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 10px;
}

.amount-btns .btn {
	color: var(--primary-color);
}

.amount-btns .btn.active {
	background: var(--primary-theme-bg);
	color: var(--primary-theme-font-color);
}

.transaction-section .transaction-title {
	border-bottom: 1px solid #c6c6c6;
	padding: 15px 0px;
	font-weight: 700;
	font-size: 15px;
}

@media (min-width: 768px) {
	.transaction-section .transaction-title {
		border-bottom: 1px solid #c6c6c6;
		padding: 15px;
		font-weight: 700;
		font-size: 15px;
	}
}

.transaction-section label.control-label {
	color: #6f6f6f;
	font-size: 12px;
	font-weight: 500;
	padding: 10px 0px;
}

.form-select {
	display: flex;
}

.payment-method-selection {
	display: flex;
	gap: 15px;
	/* grid-template-columns: repeat(3, 1fr); */
	/* width: 100%; */
}

.payment-method-selection > .payment-selection-box {
	border: 1px solid var(--form-element-border-color);
	width: 80%;
	justify-content: center;
	align-items: center;
	display: flex;
	border-radius: 5px;
	flex-direction: column;
	padding: 5px;
	gap: 5px;
	/* width: 103px;
    height: 65px; */
}
.payment-method-selection > .payment-selection-box,
.payment-method-selection > .payment-selection-box label {
	cursor: pointer;
}

.payment-method-selection > .payment-selection-box .form__label-name {
	/* font-size: var(--form-element-input-size); */
}

label.each-payment-method.payment-selection-box img {
	width: 30px;
	height: 30px;
}

#payment_select_option {
	/* padding-left: 3em; */
	/* color: var(--form-element-input-color); */
	/* padding-right: 15px; */
}

.form-element-icon-left {
	position: absolute;
	/* padding: 15px; */
	color: orange;
	display: flex;
	height: 100%;
	align-items: center;
	padding: 0em 1em;
	left: 0;
}

.form-element-icon-right {
	position: absolute;
	/* padding: 15px; */
	color: orange;
	display: flex;
	height: 100%;
	align-items: center;
	padding: 0em 1em;
	right: 0;
}

.left-0 {
	left: 0;
}

.right-0 {
	right: 0;
}

.payment-method-selection > .payment-selection-box label {
	font-size: var(--form-element-input-size);
	padding: 0px 0px;
	text-align: center;
}

.w-full {
	width: 100% !important;
}

.form-element__input.form-element__content_height .form-control {
	/* padding: 15px; */
	font-size: var(--form-element-input-size);
	padding: 15px;
	height: auto;
	width: inherit;
}

.form-element__input_details {
	display: flex;
}
.form-element__input_details .form-control {
	padding-left: 3em !important;
}

.form-element__input.form-element__input:has(> .addon) input {
	padding-left: 21%;
	font-size: 20px;
}

.form-element__input.form-element__input .addon {
	position: absolute;
	height: 100%;
	justify-content: center;
	align-items: center;
	display: flex;
	width: 20%;
	color: #606060;
}

.blinking-border {
	border: 2px solid transparent; /* Start with a transparent border */
	border-radius: 10px;
	animation: blink-border 2s infinite; /* Apply the blink animation */
}

@keyframes blink-border {
	0% {
		border-color: rgb(
			255 0 0 / 50%
		); /* Start with a semi-transparent red color */
	}
	50% {
		border-color: rgb(255 0 0 / 0%); /* Fade to fully transparent */
	}
	100% {
		border-color: rgb(255 0 0 / 50%); /* End with semi-transparent red */
	}
}

.form-element .notice-box {
	display: flex;
	align-items: center;
	padding: 5px 10px;
	background: rgb(255 192 72 / 29%);
	border-radius: 5px;
	gap: 10px;
}

.form-element .notice-icon-box {
	font-size: 2em;
	color: #ffc048;
}

.form-element .notice-message {
	text-align: justify;
	font-size: 11px;
}

.payment-selection-box-single {
	display: flex;
	flex-direction: column;
}

.form-element__instruction {
	padding: 10px 15px;
	width: 100%;
	display: grid;
	align-items: center;
}

.form-element__instruction_box {
	display: flex;
	border-radius: 5px;
	border: 1px solid var(--form-element-border-color);
	/* align-items: center; */
	/*background: var(--form-element-input-bg-color);
	color: var(--form-element-input-color-constrast);*/
}

.form-element__instruction_box .notification-icon {
	padding: 15px;
	background: #6f6f6f;
	color: #878686;
	font-size: 15px;
	border-radius: 5px;
	align-items: center;
	display: flex;
}

.form-element__instruction_box ul li {
	list-style: square;
}

.form-element__image_qr_box {
	width: 100%;
	justify-content: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 15px;
	display: none;
}
.image_qr_box_cut_corner {
	background: linear-gradient(to right, #f1843e 4px, transparent 4px) 0 0,
		linear-gradient(to right, #f1843e 4px, transparent 4px) 0 100%,
		linear-gradient(to left, #f1843e 4px, transparent 4px) 100% 0,
		linear-gradient(to left, #f1843e 4px, transparent 4px) 100% 100%,
		linear-gradient(to bottom, #f1843e 4px, transparent 4px) 0 0,
		linear-gradient(to bottom, #f1843e 4px, transparent 4px) 100% 0,
		linear-gradient(to top, #f1843e 4px, transparent 4px) 0 100%,
		linear-gradient(to top, #f1843e 4px, transparent 4px) 100% 100%;
	background-repeat: no-repeat;
	background-size: 20px 20px;
	padding: 15px;
	width: 50%;
	max-width: 200px;
}

.image_qr_box_cut_corner img {
	width: 100%;
}

/* #recipient_details .form-element__label {
	display: none;
} */

.separator-with-text {
	display: flex;
	align-items: center;
	text-align: center;
	width: 100%;
	color: var(--form-element-label-color);
}

.separator-with-text::before,
.separator-with-text::after {
	content: "";
	flex: 1;
	border-bottom: 1px solid var(--form-element-label-color);
}

.separator-with-text:not(:empty)::before {
	margin-right: 1em;
}

.separator-with-text:not(:empty)::after {
	margin-left: 1em;
}

.image_qr_box_intro {
	text-align: center;
}

.image_qr_box_heading {
	font-size: var(--form-element-label-heading-size);
	font-weight: bold;
	color: var(--form-element-label-color);
}

div#recipient_details {
	/* padding: 15px 10%; */
	/* box-shadow: 0px 2px 10px 0px rgb(159 159 159 / 30%) inset; */
	/* border-radius: 20px; */
	display: none;
	gap: 10px;
	flex-direction: column;
}

.registration__section {
	display: grid;
	grid-template-columns: 1fr 1fr;
	padding: 15px;
	width: 100%;
}

.registration__banner,
.registration__form {
	width: 100%;
	height: 100%;
	position: relative;
}

.register-wrapper {
	padding: 15px;
	background: linear-gradient(
		0deg,
		rgba(0, 0, 0, 1) 0%,
		rgb(177 146 14) 40%,
		rgb(193 150 0) 55%,
		rgba(0, 0, 0, 1) 100%
	);
	border-radius: 15px;
}

.register-heading {
	font-size: 25px;
	font-weight: bold;
	color: white;
}

.registration__form {
	border-radius: 15px;
	padding: 3px;
	background: linear-gradient(
		0deg,
		rgb(253 199 12) 0%,
		rgb(237 232 12) 50%,
		rgb(236 234 15) 100%
	);
}
.register-wrapper label.form-element__label {
	color: white;
}

.transaction-records {
	padding: 30px 15px;
	border-top: 1px solid #80808029;
	gap: 15px;
	display: flex;
	flex-direction: column;
}

.standard-setting-table {
	width: 100%;
	overflow-x: auto;
}

nav.page-pagination {
	padding: 10px;
}

.page-pagination .pagination-items {
	justify-content: center;
	display: flex;
	gap: 10px;
}

.page-pagination .pagination-items .disabled {
	color: #999;
	opacity: 0.7;
}

.page-pagination li.page-item {
	width: 30px;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 100%;
	border: 1px solid #343c52;
}
.table-heading {
	font-size: 15px;
	display: flex;
	align-items: center;
	gap: 15px;
}
.table-sub-heading {
	font-size: 12px;
	filter: brightness(0.8);
}

.form-horizontal {
	display: flex;
	flex-wrap: wrap;
}

.wallets-totalBalance-info.wallets-totalBalance-info {
	overflow: visible;
}
.account-box, .main-container-bg {
	border-radius: 15px;
	border-radius: 16px;
	box-shadow: 0px 0px 30px 5px rgba(0, 0, 0, 0.1);
	/* backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px); */
	/* border: 1px solid rgba(0, 0, 0, 0.3); */
}

.transaction-information-details,
.account-box {
	/* box-shadow: 0px 4px 10px lightgray; */
	/* backdrop-filter: blur(5px); */
	/* -webkit-backdrop-filter: blur(5px); */
	padding: 10px 15px;
	border-radius: 15px;
	overflow: auto;
}

.main-container-bg {
	padding: 10px 15px;
}

.transaction-information-details .transaction-information-details__header {
	font-size: var(--form-element-label-heading-size);
	font-weight: bold;
	text-align: center;
	padding: 15px 0px;
	display: flex;
	gap: 15px;
}

.transaction-information-details ul li {
	padding: 5px 0px;
	list-style: square;
}

.transaction-information-details ul {
	font-size: var(--form-element-label-size);
	padding: 10px;
}

.form-element__input_select .input_select_items {
	display: flex;
	flex-direction: column;
	justify-content: start;
	align-items: baseline;
	position: absolute;
	bottom: 0px;
	transform: translateY(100%);
	width: 100%;
	left: 0;
	z-index: 1;
	background: white;
	display: none;
	box-shadow: 0px 20px 30px -25px rgb(255 255 255 / 30%);
	max-height: 50vh;
	overflow-y: scroll;
}

.form-element__input_select .input_select_item {
	width: 100%;
	padding: 10px;
	margin: 0px;
	font-size: 11px;
	display: flex;
	align-items: center;
	gap: 5px;
}

.form-element__input_select .input_select_item:hover {
	background: orange;
	color: white;
}

.form-element__input_select:hover .input_select_items {
	display: block;
}

.form-element__input_select .input_select_item input[type="radio"] {
	opacity: 0;
}

.form-element__page-header-intro {
	justify-content: center;
	display: grid;
	text-align: center;
	padding: 15px;
	width: 50%;
	min-width: 280px;
	margin: auto;
}

.form-element__page-header.form-element__page-header {
	border-bottom: 1px solid #80808029;
}

.form-element__page-heading {
	font-size: 20px;
	font-weight: bold;
	padding-bottom: 10px;
}
.form-element__page-subheading {
	font-size: 11px;
}

.transaction-tab-section {
	padding: 15px 15px;
	width: 100%;
}
.transaction-tab-container {
	display: flex;
	gap: 15px;
}

.transaction-tab__item {
	padding: 2px 15px;
	border-radius: 15px;
	font-size: 12px;
	cursor: pointer;
	border: 1px solid transparent;
}

.transaction-tab__item.active {
	color: var(--primary-theme-font-color);
	background: var(--primary-theme-bg);
}

.dropdown-menu {
	background: white;
	color: var(--light-color);
}
/*Form V4*/
.bootstrap-select img {
	width: fit-content;
}

.v1 .bootstrap-select .dropdown-toggle .filter-option-inner-inner {
	font-size: var(--form-element-input-size);
	padding: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.bootstrap-select .dropdown-menu li a span.text {
    display: flex;
    align-items: center;
    gap: 8px;
}


.v1 .bootstrap-select i {
	font-size: 1.5em;
}

.v1 .bootstrap-select img {
	height: 30px;
	width: 30px;
}

@media (min-width: 768px) {
	.v1 .bootstrap-select img {
		height: 25px;
		width: 25px;
	}
}

.v1 .bootstrap-select .dropdown-menu i {
	font-size: 1.2em;
}

.v1 .bootstrap-select .dropdown-menu img {
/*
	height: 30px;
	width: 30px;
*/
}

.v1 .bootstrap-select .dropdown-menu {
	font-weight: bold;
	font-size: var(--form-element-input-size);
}

.v1 .bootstrap-select .dropdown-menu a {
	padding: 10px 20px;
}

.v1 .dropdown-menu > .active > a,
.v1 .dropdown-menu > .active > a:hover,
.v1 .dropdown-menu > .active > a:focus {
	background: var(--primary-color);
	color: var(--based-color);
}

/*Layer Loading Animation*/
*:has(> .loader-animation) {
	min-height: 100px;
}
.loader-animation {
	position: absolute;
	top: 0;
	left: 0;

	width: 100%;
	height: 100%;

	display: flex;
	justify-content: center;
	align-items: center;

	font-size: 30px;
	opacity: 0.8;
	color: lightslategray;
}

.spin {
	-animation: spin 1s infinite linear;
	-webkit-animation: spin2 1s infinite linear;
}

@-webkit-keyframes spin2 {
	from {
		-webkit-transform: rotate(0deg);
	}
	to {
		-webkit-transform: rotate(360deg);
	}
}

@keyframes spin {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

/*Bootstrap - Paginate*/
.pagination-container.center {
	display: flex;
	justify-content: center;
	align-items: center;
}
.pagination.circle li a.next_page,
.pagination.circle li a.prev_page,
.pagination.circle li a.text {
	border: none;
}
.pagination.circle i {
	font-size: 1.5em;
}

.pagination.circle li a {
	border-radius: 100%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 0 5px;
}

.default > .pagination > .active > a,
.default > .pagination > .active > span,
.default > .pagination > .active > a:hover,
.default > .pagination > .active > span:hover,
.default > .pagination > .active > a:focus,
.default > .pagination > .active > span:focus {
	border: 1px solid darkgray;
	background: darkgray;
	color: white;
}

.default > .pagination > li > a,
.default > .pagination > li > span {
	color: darkgray;
	background: white;
}

/*Wallet Summary*/
.card.summary {
	box-shadow: 0px 5px 5px lightgray;
	background: lightgray;
	color: black;
	border-radius: 5px;
	padding: 7% 5%;
	font-size: var(--form-element-input-size);
}
.card.summary p,
.card.summary span {
	display: flex;
	align-items: center;
	font-size: var(--form-element-input-size);
}
.card.summary .txt-primary {
	color: #ffc048;
}

.card.summary .card-title,
.card.summary .card-subtitle {
	margin: 15px 0;
}

.card.summary .card-title {
	font-size: 1.5em;
}

.card.summary .card-subtitle {
	font-size: 1.1em;
	font-weight: bold;
}

.card.summary .card-body > div {
	background: dimgray;
	color: white;
	border-radius: 15px;
	padding: 2.5% 5%;
	margin: 2% 0;
}

.card.summary *:has(> .right) {
	display: flex;
}
.card.summary span.right {
	display: inline-flex;
	flex-grow: 1;
	justify-content: right;
}

.card.summary .amt {
	font-weight: bold;
	display: flex;
	align-items: center;
}
.card.summary .amt big {
	font-size: 1.4em;
}
.card.summary .amt small {
	font-weight: initial;
	margin-right: 5%;
}
.text-boldz {
	font-size: 1.5em;
	font-weight: bold;
}
.transaction-username {
	padding: 15px 0 10px 0;
}
.transaction-username,
.transaction-username p {
	line-height: 1;
	margin-bottom: 5px;
}

.btn-accordion.btn-accordion.btn-accordion {
	border: 1px solid var(--form-element-border-color);
	width: 100%;
	padding: 10px 20px;
	display: flex;
}

.btn-accordion.btn-accordion.btn-accordion .right {
	flex-grow: 1;
}

.bootstrap-select > .dropdown-toggle:after {
	display: none;
}

/** Promotion Details Panel */
.promotion-details-panel {
	display: flex;
	width: 100vw;
	height: 100vh;
	justify-content: center;
	align-items: center;
	z-index: 9999;
	left: 0;
	top: 0;
	position: fixed;
	background: rgb(0 0 0 / 80%);
}

.promotion-details-panel__section {
	display: flex;
	flex-direction: column;
	width: 90vw;
	height: 65vh;
	position: relative;
	background: var(--promotion-details-panel-main-bg-color);
	gap: 0px;
	overflow-y: scroll;
	border-radius: 5px;
}

@media (max-width: 768px) {
	.promotion-details-panel__section {
		height: 75vh;
		margin-top: -10vh;
	}
}

@media (min-width: 768px) {
	.promotion-details-panel__section {
		width: 70vw;
		height: 80vh;
	}
}

@media (min-width: 992px) {
	.promotion-details-panel__section {
		width: 60vw;
		height: 80vh;
	}
}

@media (min-width: 1200px) {
	.promotion-details-panel__section {
		width: 50vw;
		height: 80vh;
	}
}

@media (min-width: 1400px) {
	.promotion-details-panel__section {
		width: 40vw;
		height: 80vh;
	}
}

/* For WebKit browsers (Chrome, Safari) */
.promotion-details-panel__section::-webkit-scrollbar {
	display: none; /* Hides the scrollbar */
}

/* For Firefox */
.promotion-details-panel__section {
	scrollbar-width: none; /* Hides the scrollbar */
	-ms-overflow-style: none; /* Hides scrollbar on Internet Explorer 10+ */
}

.promotion-details-panel__title-section {
	padding: 20px 15px;
	display: flex;
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	background: var(--promotion-details-panel-heading-bg-color);
	font-weight: bold;
	color: var(--promotion-details-panel-heading-font-color);
	font-size: 16px;
	z-index: 1;
	align-items: center;
}
.promotion-details-panel__image-section {
	height: 160px;
}

@media (min-width: 768px) {
	.promotion-details-panel__image-section {
		height: 300px;
	}
}

.promotion-details-panel__image-section img {
	height: 100%;
	width: 100%;
}

.promotion-details-panel__title {
	margin-right: auto;
}

.promotion-details-panel__timer-section {
	display: flex;
	padding: 10px 15px;
	align-items: center;
	margin: 10px 0;
}

.promotion-details-panel__time-colon {
	display: flex;
	align-items: center;
}

.promotion-details-panel__time-text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 5px;
}

.promotion-details-panel__apply-button {
	margin-right: auto;
	display: inline-flex;
	align-items: center;
}

.promotion-details-panel__countdown-area
	.promotion-details-panel__countdown-section
	.promotion-details-panel__valid-time {
	display: flex;
	align-items: center;
}

.promotion-details-panel__num_box {
	border-radius: 5px;
	background: var(--promotion-details-panel-timer-bg-color);
	color: var(--promotion-details-panel-timer-font-color);
	display: flex;
	justify-content: center;
	padding: 10px 15px;
}

.promotion-details-panel__colon {
	color: var(--promotion-details-panel-timer-font-color);
}

.promotion-details-panel__contents-section {
	padding: 10px 15px;
	border-top: 3px solid var(--promotion-details-panel-content-heading-bg-color);
	margin: 10px 0;
}

.promotion-details-panel__contents-section
	> div:first-child
	.promotion-details-panel__info-title {
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
}

.promotion-details-panel__contents-section
	> div:last-child
	.promotion-details-panel__info-description {
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
}

.promotion-details-panel__info-title {
	padding: 5px 10px;
	background: var(--promotion-details-panel-content-heading-bg-color);
	color: var(--promotion-details-panel-content-heading-font-color);
	font-weight: bold;
}

.promotion-details-panel__info-description {
	background: var(--promotion-details-panel-content-description-bg-color);
	color: var(--promotion-details-panel-content-description-font-color);
	padding: 5px 10px;
	border: 1px solid #ffffff33;
	border-top: 0px;
	border-bottom: 0;
}

.promotion-details-panel__apply-section {
	position: -webkit-sticky;
	position: sticky;
	bottom: -1px;
	padding: 10px 15px;
	background: var(--promotion-details-panel-main-bg-color);
	margin-top: auto;
}

.promotion-details-panel__button {
	border-radius: 5px;
	font-size: 13px;
	border: 1px solid transparent;
	padding: 5px 15px;
	background: var(--promotion-details-panel-button-bg-color);
	color: var(--promotion-details-panel-button-font-color);
	font-weight: 600;
}

.promotion-details-panel__apply-section .promotion-details-panel__button {
	width: 100%;
}

.promotion-details-panel__countdown-message,
.promotion-details-panel__text {
	display: none;
}

.promotion-details-panel__close_btn {
	padding: 0px 5px;
}

/*Promotion Game Category Selector*/
.pkg-item .intro a.label {
	padding: 0.2em 0.6em 0.3em;
	color: #fff;
}

.tab-backdrop {
	/* background: lightgrey; */
	margin-bottom: 20px;
	border-radius: 10px;
	overflow-x: auto;
}

.tab-backdrop ul.tab-container {
	display: flex;
	flex-wrap: wrap;
	/* box-shadow: inset 0 0px 10px #e4e4e4; */
	background: #ffffff;
	border-radius: 5px;
}

.tab-backdrop ul.tab-container li {
	padding: 0px 5px;
	color: gray;
	cursor: pointer;
}

.tab-backdrop ul.tab-container li.active {
	/* background: var(--primary-theme-bg-color); */
	color: var(--primary-theme-font-color);
}

.tab-backdrop ul.tab-container li:first-child {
	/* border-top-left-radius: 10px; */
	/* border-bottom-left-radius: 10px; */
	border-radius: 10px;
}

/*
    .tab-backdrop ul.tab-container li:hover,
    .tab-backdrop ul.tab-container li.active {
        background: orange;
        color: black;
    }
*/

.tab-backdrop ul.tab-container li:hover p,
.tab-backdrop ul.tab-container li.active p {
	border-bottom: 3px solid var(--primary-color);
}

li.tab-wrapper p {
	padding: 5px 15px;
	margin: 5px;
	font-size: 11px;
}

img.icon {
	width: 1.2em;
}

/*Wallets*/

/*Custom Grid System*/
.grid.grid {
	display: grid;
	/* grid-template-columns: repeat(12, 1fr); */
}

.grid.auto-fit{
	grid-auto-rows: min-content;
    grid-template-rows: auto;
}

.grid > [class^="col-"],
.grid > [class*=" col-"],
.grid > [class^="row-"],
.grid > [class*=" row-"] {
	width: 100%;
	max-width: 100%;
}
.grid > .col-xs-1 {
	grid-column: span 1;
}
.grid > .col-xs-2 {
	grid-column: span 2;
}
.grid > .col-xs-3 {
	grid-column: span 3;
}
.grid > .col-xs-4 {
	grid-column: span 4;
}
.grid > .col-xs-5 {
	grid-column: span 5;
}
.grid > .col-xs-6 {
	grid-column: span 6;
}
.grid > .col-xs-7 {
	grid-column: span 7;
}
.grid > .col-xs-8 {
	grid-column: span 8;
}
.grid > .col-xs-9 {
	grid-column: span 9;
}
.grid > .col-xs-10 {
	grid-column: span 10;
}
.grid > .col-xs-11 {
	grid-column: span 11;
}
.grid > .col-xs-12 {
	grid-column: span 12;
}

.grid > .row-xs-1 {
	grid-row: span 1;
}
.grid > .row-xs-2 {
	grid-row: span 2;
}
.grid > .row-xs-3 {
	grid-row: span 3;
}
.grid > .row-xs-4 {
	grid-row: span 4;
}
.grid > .row-xs-5 {
	grid-row: span 5;
}
.grid > .row-xs-6 {
	grid-row: span 6;
}
.grid > .row-xs-7 {
	grid-row: span 7;
}
.grid > .row-xs-8 {
	grid-row: span 8;
}
.grid > .row-xs-9 {
	grid-row: span 9;
}
.grid > .row-xs-10 {
	grid-row: span 10;
}
.grid > .row-xs-11 {
	grid-row: span 11;
}
.grid > .row-xs-12 {
	grid-row: span 12;
}

@media (min-width: 768px) {
	.grid > .col-sm-1 {
		grid-column: span 1;
	}
	.grid > .col-sm-2 {
		grid-column: span 2;
	}
	.grid > .col-sm-3 {
		grid-column: span 3;
	}
	.grid > .col-sm-4 {
		grid-column: span 4;
	}
	.grid > .col-sm-5 {
		grid-column: span 5;
	}
	.grid > .col-sm-6 {
		grid-column: span 6;
	}
	.grid > .col-sm-7 {
		grid-column: span 7;
	}
	.grid > .col-sm-8 {
		grid-column: span 8;
	}
	.grid > .col-sm-9 {
		grid-column: span 9;
	}
	.grid > .col-sm-10 {
		grid-column: span 10;
	}
	.grid > .col-sm-11 {
		grid-column: span 11;
	}
	.grid > .col-sm-12 {
		grid-column: span 12;
	}

	.grid > .row-sm-1 {
		grid-row: span 1;
	}
	.grid > .row-sm-2 {
		grid-row: span 2;
	}
	.grid > .row-sm-3 {
		grid-row: span 3;
	}
	.grid > .row-sm-4 {
		grid-row: span 4;
	}
	.grid > .row-sm-5 {
		grid-row: span 5;
	}
	.grid > .row-sm-6 {
		grid-row: span 6;
	}
	.grid > .row-sm-7 {
		grid-row: span 7;
	}
	.grid > .row-sm-8 {
		grid-row: span 8;
	}
	.grid > .row-sm-9 {
		grid-row: span 9;
	}
	.grid > .row-sm-10 {
		grid-row: span 10;
	}
	.grid > .row-sm-11 {
		grid-row: span 11;
	}
	.grid > .row-sm-12 {
		grid-row: span 12;
	}
}

@media (min-width: 992px) {
	.grid > .col-md-1 {
		grid-column: span 1;
	}
	.grid > .col-md-2 {
		grid-column: span 2;
	}
	.grid > .col-md-3 {
		grid-column: span 3;
	}
	.grid > .col-md-4 {
		grid-column: span 4;
	}
	.grid > .col-md-5 {
		grid-column: span 5;
	}
	.grid > .col-md-6 {
		grid-column: span 6;
	}
	.grid > .col-md-7 {
		grid-column: span 7;
	}
	.grid > .col-md-8 {
		grid-column: span 8;
	}
	.grid > .col-md-9 {
		grid-column: span 9;
	}
	.grid > .col-md-10 {
		grid-column: span 10;
	}
	.grid > .col-md-11 {
		grid-column: span 11;
	}
	.grid > .col-md-12 {
		grid-column: span 12;
	}

	.grid > .row-md-1 {
		grid-row: span 1;
	}
	.grid > .row-md-2 {
		grid-row: span 2;
	}
	.grid > .row-md-3 {
		grid-row: span 3;
	}
	.grid > .row-md-4 {
		grid-row: span 4;
	}
	.grid > .row-md-5 {
		grid-row: span 5;
	}
	.grid > .row-md-6 {
		grid-row: span 6;
	}
	.grid > .row-md-7 {
		grid-row: span 7;
	}
	.grid > .row-md-8 {
		grid-row: span 8;
	}
	.grid > .row-md-9 {
		grid-row: span 9;
	}
	.grid > .row-md-10 {
		grid-row: span 10;
	}
	.grid > .row-md-11 {
		grid-row: span 11;
	}
	.grid > .row-md-12 {
		grid-row: span 12;
	}
}

@media (min-width: 1200px) {
	.grid > .col-lg-1 {
		grid-column: span 1;
	}
	.grid > .col-lg-2 {
		grid-column: span 2;
	}
	.grid > .col-lg-3 {
		grid-column: span 3;
	}
	.grid > .col-lg-4 {
		grid-column: span 4;
	}
	.grid > .col-lg-5 {
		grid-column: span 5;
	}
	.grid > .col-lg-6 {
		grid-column: span 6;
	}
	.grid > .col-lg-7 {
		grid-column: span 7;
	}
	.grid > .col-lg-8 {
		grid-column: span 8;
	}
	.grid > .col-lg-9 {
		grid-column: span 9;
	}
	.grid > .col-lg-10 {
		grid-column: span 10;
	}
	.grid > .col-lg-11 {
		grid-column: span 11;
	}
	.grid > .col-lg-12 {
		grid-column: span 12;
	}

	.grid > .row-lg-1 {
		grid-row: span 1;
	}
	.grid > .row-lg-2 {
		grid-row: span 2;
	}
	.grid > .row-lg-3 {
		grid-row: span 3;
	}
	.grid > .row-lg-4 {
		grid-row: span 4;
	}
	.grid > .row-lg-5 {
		grid-row: span 5;
	}
	.grid > .row-lg-6 {
		grid-row: span 6;
	}
	.grid > .row-lg-7 {
		grid-row: span 7;
	}
	.grid > .row-lg-8 {
		grid-row: span 8;
	}
	.grid > .row-lg-9 {
		grid-row: span 9;
	}
	.grid > .row-lg-10 {
		grid-row: span 10;
	}
	.grid > .row-lg-11 {
		grid-row: span 11;
	}
	.grid > .row-lg-12 {
		grid-row: span 12;
	}
}

/* Custom gap classes similar to Bootstrap g-* classes */

/* No gap */
.g-0 {
  gap: 0 !important;
}

/* 0.25rem gap (4px) */
.g-1 {
  gap: 0.25rem !important;
}

/* 0.5rem gap (8px) */
.g-2 {
  gap: 0.5rem !important;
}

/* 1rem gap (16px) */
.g-3 {
  gap: 1rem !important;
}

/* 1.5rem gap (24px) */
.g-4 {
  gap: 1.5rem !important;
}

/* 3rem gap (48px) */
.g-5 {
  gap: 3rem !important;
}

/* Horizontal gap classes */

/* No horizontal gap */
.gx-0 {
  column-gap: 0 !important;
}

/* 0.25rem horizontal gap (4px) */
.gx-1 {
  column-gap: 0.25rem !important;
}

/* 0.5rem horizontal gap (8px) */
.gx-2 {
  column-gap: 0.5rem !important;
}

/* 1rem horizontal gap (16px) */
.gx-3 {
  column-gap: 1rem !important;
}

/* 1.5rem horizontal gap (24px) */
.gx-4 {
  column-gap: 1.5rem !important;
}

/* 3rem horizontal gap (48px) */
.gx-5 {
  column-gap: 3rem !important;
}

/* Vertical gap classes */

/* No vertical gap */
.gy-0 {
  row-gap: 0 !important;
}

/* 0.25rem vertical gap (4px) */
.gy-1 {
  row-gap: 0.25rem !important;
}

/* 0.5rem vertical gap (8px) */
.gy-2 {
  row-gap: 0.5rem !important;
}

/* 1rem vertical gap (16px) */
.gy-3 {
  row-gap: 1rem !important;
}

/* 1.5rem vertical gap (24px) */
.gy-4 {
  row-gap: 1.5rem !important;
}

/* 3rem vertical gap (48px) */
.gy-5 {
  row-gap: 3rem !important;
}


/*THY - Create adjust dark/light theme must be started like .dark.dark something / .light.light something
eg:
.dark.dark .card.summary{}
.light.light .card.summary{}

Note:
- continue under respective theme below
- Both theme need to adjust if adjust 1 element
*/
.text-primary {
	color: var(--primary-color);
}
.text-secondary {
	color: var(--secondary-color);
}
.text-success {
	color: var(--success-color);
}
.text-danger {
	color: var(--danger-color);
}
.text-warning {
	color: var(--warning-color);
}
.text-info {
	color: var(--info-color);
}
.text-muted {
	color: var(--muted-color);
}

.text-greenyellow {
	color: greenyellow;
}

.btn-primary {
	border-color: var(--primary-color);
	background: var(--primary-color);
	color: white;
}
.bg-primary {
	background-color: var(--primary-color);
	color: white;
}
a {
	color: var(--primary-color);
}
a:hover,
a:focus {
	color: var(--primary-color);
	filter: brightness(1.1);
}



/*Dark Theme*/
.dark.dark {
	scrollbar-color: var(--primary-color) rgb(255, 255, 255, 0.2);
}
.dark.dark a {
	color: var(--dark-primary-font-color);
}

.dark.dark .userhome,
.userhome.dark.dark,
.dark.dark .main-container,
.main-container.dark.dark,
.dark.dark .main-container .bg-container,
.main-container.dark.dark .bg-container {
	background: rgb(27 27 27 / 0%);
    backdrop-filter: blur(10px);
	color: var(--dark-primary-font-color);
}
.dark.dark .page-header {
	background: var(--dark-page-heading-bg-color);
	color: var(--dark-page-heading-font-color);
}
.dark.dark .wallets-container-header, .transparent-dark.transparent-dark .wallets-container-header{
	background-color: rgba(72, 72, 72, 0.3);
}
.dark.dark .page-header .form-element__page-heading {
	color: var(--dark-page-heading-font-color);
}
.dark.dark .page-header .form-element__page-subheading {
	color: var(--dark-page-subheading-font-color);
}

.dark.dark .transaction-tab__item.active {
	background: var(--dark-menu-bg);
	color: var(--dark-menu-font-color);
}
.dark.dark .transaction-information-details,
.dark.dark .account-box,
.dark.dark .main-container-bg,
.dark.dark .box {
	box-shadow: 0px 6px 14px 0px #00000040;
	background: var(--transparent-dark-section-bg-color);
	color: var(--dark-section-font-color);
}
.dark.dark .payment-method-selection > .payment-selection-box {
	background-color: var(--dark-selectbox-bg-color);
	color: var(--dark-selectbox-font-color);
}
.dark.dark
	.payment-method-selection
	> .payment-selection-box:has(input:checked) {
	border: 1px solid transparent;
	background: var(--primary-theme-bg);
	color: var(--primary-theme-font-color);
}

.dark.dark .form-element__content_height {
	color: var(--dark-secondary-font-color);
}
.dark.dark .accounts-box, .transparent-dark.transparent-dark .accounts-box{
	background-color: rgba(72, 72, 72, 0.3);
}
.dark.dark .wallets-details, .transparent-dark.dark .transparent-wallets-details{
	background-color: rgba(72, 72, 72, 0.3);
}
.dark.dark .card.summary {
	box-shadow: 0px 6px 14px 0px #00000040;
	background: var(--dark-section-bg-color);
	color: var(--dark-section-font-color);
}
.dark.dark .card.summary .card-body > div {
	background: var(--dark-subsection-bg-color);
	color: var(--dark-subsection-font-color);
}
.dark.dark .form-element .form-control {
	background: var(--dark-form-element-input-bg-color);
	color: var(--dark-form-element-input-font-color);
}
.dark.dark .form-element__input.form-element__input .addon {
	color: var(--dark-secondary-font-color);
}
.dark.dark .btn-accordion {
	background: var(--dark-accordion-bg-color);
	color: var(--dark-accordion-font-color);
}
.dark.dark .panel {
	background: transparent;
}

.dark.dark .table,
.dark.dark .table .table {
	background: transparent;
}

.dark.dark .table-striped > tbody > tr:nth-of-type(odd) {
	background: rgb(255, 255, 255, 0.1);
}

.dark.dark .table-hover > tbody > tr:hover {
	background: rgb(255, 255, 255, 0.2);
}

.dark.dark .pagination > .active > a,
.dark.dark .pagination > .active > span,
.dark.dark .pagination > .active > a:hover,
.dark.dark .pagination > .active > span:hover,
.dark.dark .pagination > .active > a:focus,
.dark.dark .pagination > .active > span:focus {
	border-color: var(--primary-color);
	background: var(--primary-color);
	color: white;
}

.dark.dark .pagination > li > a,
.dark.dark .pagination > li > span {
	color: var(--primary-color);
	background: white;
}
.dark.dark .pagination .disabled {
	color: var(--muted-color);
}
.dark.dark .input-group .input-group-addon {
	border-color: var(--primary-color);
	background: var(--primary-color);
	color: white;
}

.dark.dark .tab-backdrop ul.tab-container {
	background: var(--wallet-tab-background);
	color: white;
}

.dark.dark .dropdown-toggle {
	background: var(--dark-dropdown-toggle-bg);
	color: var(--dark-dropdown-toggle-font-color);
}
.dark.dark .dropdown-menu {
	background: var(--dark-dropdown-menu-bg);
}
.dark.dark .dropdown-menu a,
.dark.dark .dropdown-menu > li > a {
	color: var(--dark-dropdown-menu-font-color);
}
.dark.dark .dropdown-menu > .active > a,
.dark.dark .dropdown-menu > .active > a:hover,
.dark.dark .dropdown-menu > .active > a:focus {
	background: var(--dark-dropdown-menu-active-bg);
	color: var(--dark-dropdown-menu-active-font-color);
}

.dark.dark .form-element__instruction_box {
	border: 1px solid var(--dark-instruction-bg);
}
.dark.dark .form-element__instruction_box .notification-icon {
	background: var(--dark-instruction-bg);
}

/*Light Theme*/
.light.light {
	scrollbar-color: var(--primary-color) rgb(0, 0, 0, 0.7);
}
.light.light a {
	color: var(--light-primary-font-color);
}

.light.light .userhome,
.userhome.light.light,
.light.light .main-container,
.main-container.light.light,
.light.light .main-container .bg-container,
.main-container.light.light .bg-container {
	background-color: rgba(204, 204, 204, 0.8);
    backdrop-filter: blur(10px);
	color: var(--light-primary-font-color);
}
.light.light .page-header {
	background: var(--light-page-heading-bg-color);
	color: var(--light-page-heading-font-color);
}
.light.light .page-header .form-element__page-heading {
	color: var(--light-page-heading-font-color);
}
.light.light .page-header .form-element__page-subheading {
	color: var(--light-page-subheading-font-color);
}

.light.light .transaction-tab__item.active {
	background: var(--light-menu-bg);
	color: var(--light-menu-font-color);
}
.light.light .transaction-information-details,
.light.light .account-box,
.light.light .main-container-bg,
.light.light .box {
	/* box-shadow: 0px 6px 14px 0px #00000040; */
	background: rgba(255,255,255, 0.7);
	color: var(--light-section-font-color);
}
.light.light .payment-method-selection > .payment-selection-box {
	background: var(--light-selectbox-bg-color);
	color: var(--light-selectbox-font-color);
}
.light.light
	.payment-method-selection
	> .payment-selection-box:has(input:checked) {
	border: 1px solid transparent;
	background: var(--primary-theme-bg);
	color: var(--primary-theme-font-color);
}

.light.light .form-element__content_height {
	color: var(--light-font-secondary-color);
}
.light.light .card.summary {
	box-shadow: 0px 6px 14px 0px #00000040;
	background: var(--light-section-bg-color);
	color: var(--light-section-font-color);
}
.light.light .card.summary .card-body > div {
	background: var(--light-subsection-bg-color);
	color: var(--light-subsection-font-color);
}
.light.light .form-element .form-control {
	background: var(--light-form-element-input-bg-color);
	color: var(--light-form-element-input-font-color);
}
.light.light .form-element__input.form-element__input .addon {
	color: var(--light-font-secondary-color);
}
.light.light .btn-accordion {
	background: var(--light-accordion-bg-color);
	color: var(--light-accordion-font-color);
}
.light.light .panel {
	background: transparent;
}

.light.light .table,
.light.light .table .table {
	background: transparent;
}

.light.light .table-striped > tbody > tr:nth-of-type(odd) {
	background: rgb(255, 255, 255, 0.1);
}

.light.light .table-hover > tbody > tr:hover {
	background: rgb(255, 255, 255, 0.2);
}

.light.light .pagination > .active > a,
.light.light .pagination > .active > span,
.light.light .pagination > .active > a:hover,
.light.light .pagination > .active > span:hover,
.light.light .pagination > .active > a:focus,
.light.light .pagination > .active > span:focus {
	border-color: var(--primary-color);
	background: var(--primary-color);
	color: white;
}

.light.light .pagination > li > a,
.light.light .pagination > li > span {
	color: var(--primary-color);
	background: white;
}
.light.light .pagination .disabled {
	color: var(--muted-color);
}
.light.light .input-group .input-group-addon {
	border-color: var(--primary-color);
	background: var(--primary-color);
	color: white;
}

.light.light .tab-backdrop ul.tab-container , .light.light .tab-backdrop ul.tab-container li.active {
	background: var(--light-primary-bg);
	color: var(--light-primary-font-color);
}

.light.light .dropdown-toggle {
	background: var(--light-dropdown-toggle-bg);
	color: var(--light-dropdown-toggle-font-color);
}
.light.light .dropdown-menu {
	background: var(--light-dropdown-menu-bg);
}
.light.light .dropdown-menu a,
.light.light .dropdown-menu > li > a {
	color: var(--light-dropdown-menu-font-color);
}

.light.light .dropdown-menu > .active > a,
.light.light .dropdown-menu > .active > a:hover,
.light.light .dropdown-menu > .active > a:focus {
	background: var(--light-dropdown-menu-active-bg);
	color: var(--light-dropdown-menu-active-font-color);
}
.light.light .form-element__instruction_box {
	border: 1px solid var(--light-instruction-bg);
}
.light.light .form-element__instruction_box .notification-icon {
	background: var(--light-instruction-bg);
}
.light.light .account-box .orangegradient, .transparent-light.transparent-light .account-box .orangegradient, .dark.dark .account-box .orangegradient, .transparent-dark.transparent-dark .account-box .orangegradient{
	 /* color: var(--theme-primary-color); */
	 font-weight: bold;
	 background-clip: text;
	 -webkit-background-clip: text;
     -moz-background-clip: text;
     -webkit-text-fill-color: transparent;
     -moz-text-fill-color: transparent;
     background-image: var(--primary-theme-bg);
	 }

/*transparent-light Theme*/
.transparent-light.transparent-light {
	scrollbar-color: var(--primary-color) rgb(0, 0, 0, 0.7);
}
.transparent-light.transparent-light a {
	color: var(--transparent-light-primary-font-color);
}

.transparent-light.transparent-light .userhome,
.userhome.transparent-light.transparent-light,
.transparent-light.transparent-light .main-container,
.main-container.transparent-light.transparent-light,
.transparent-light.transparent-light .main-container .bg-container,
.main-container.transparent-light.transparent-light .bg-container {
	background: var(--transparent-light-primary-bg);
	color: var(--transparent-light-primary-font-color);
}
.transparent-light.transparent-light .page-header {
	background: var(--transparent-light-page-heading-bg-color);
	color: var(--transparent-light-page-heading-font-color);
}
.transparent-light.transparent-light .page-header .form-element__page-heading {
	color: var(--transparent-light-page-heading-font-color);
}
.transparent-light.transparent-light .page-header .form-element__page-subheading {
	color: var(--transparent-light-page-subheading-font-color);
}

.transparent-light.transparent-light .transaction-tab__item.active {
	background: var(--transparent-light-menu-bg);
	color: var(--transparent-light-menu-font-color);
}
.transparent-light.transparent-light .transaction-information-details,
.transparent-light.transparent-light .account-box,
.transparent-light.transparent-light .main-container-bg,
.transparent-light.transparent-light .box {
	/* box-shadow: 0px 6px 14px 0px #00000040; */
	background: var(--transparent-light-section-bg-color);
	color: var(--transparent-light-section-font-color);
}
.transparent-light.transparent-light .payment-method-selection > .payment-selection-box {
	background: var(--transparent-light-selectbox-bg-color);
	color: var(--transparent-light-selectbox-font-color);
}
.transparent-light.transparent-light
	.payment-method-selection
	> .payment-selection-box:has(input:checked) {
	border: 1px solid transparent;
	background: var(--primary-theme-bg);
	color: var(--primary-theme-font-color);
}

.transparent-light.transparent-light .form-element__content_height {
	color: var(--transparent-light-font-secondary-color);
}
.transparent-light.transparent-light .card.summary {
	box-shadow: 0px 6px 14px 0px #00000040;
	background: var(--transparent-light-section-bg-color);
	color: var(--transparent-light-section-font-color);
}
.transparent-light.transparent-light .card.summary .card-body > div {
	background: var(--transparent-light-subsection-bg-color);
	color: var(--transparent-light-subsection-font-color);
}
.transparent-light.transparent-light .form-element .form-control {
	background: var(--transparent-light-form-element-input-bg-color);
	color: var(--transparent-light-form-element-input-font-color);
}
.transparent-light.transparent-light .form-element__input.form-element__input .addon {
	color: var(--transparent-light-font-secondary-color);
}
.transparent-light.transparent-light .btn-accordion {
	background: var(--transparent-light-accordion-bg-color);
	color: var(--transparent-light-accordion-font-color);
}
.transparent-light.transparent-light .panel {
	background: transparent;
}

.transparent-light.transparent-light .table,
.transparent-light.transparent-light .table .table {
	background: transparent;
}

.transparent-light.transparent-light .table-striped > tbody > tr:nth-of-type(odd) {
	background: rgb(255, 255, 255, 0.1);
}

.transparent-light.transparent-light .table-hover > tbody > tr:hover {
	background: rgb(255, 255, 255, 0.2);
}

.transparent-light.transparent-light .pagination > .active > a,
.transparent-light.transparent-light .pagination > .active > span,
.transparent-light.transparent-light .pagination > .active > a:hover,
.transparent-light.transparent-light .pagination > .active > span:hover,
.transparent-light.transparent-light .pagination > .active > a:focus,
.transparent-light.transparent-light .pagination > .active > span:focus {
	border-color: var(--primary-color);
	background: var(--primary-color);
	color: white;
}

.transparent-light.transparent-light .pagination > li > a,
.transparent-light.transparent-light .pagination > li > span {
	color: var(--primary-color);
	background: white;
}
.transparent-light.transparent-light .pagination .disabled {
	color: var(--muted-color);
}
.transparent-light.transparent-light .input-group .input-group-addon {
	border-color: var(--primary-color);
	background: var(--primary-color);
	color: white;
}

.transparent-light.transparent-light .tab-backdrop ul.tab-container {
	background: var(--wallet-tab-background);
	color: white;
}

.transparent-light.transparent-light .dropdown-toggle {
	background: var(--transparent-light-dropdown-toggle-bg);
	color: var(--transparent-light-dropdown-toggle-font-color);
}
.transparent-light.transparent-light .dropdown-menu {
	background: var(--transparent-light-dropdown-menu-bg);
}
.transparent-light.transparent-light .dropdown-menu a,
.transparent-light.transparent-light .dropdown-menu > li > a {
	color: var(--transparent-light-dropdown-menu-font-color);
}

.transparent-light.transparent-light .dropdown-menu > .active > a,
.transparent-light.transparent-light .dropdown-menu > .active > a:hover,
.transparent-light.transparent-light .dropdown-menu > .active > a:focus {
	background: var(--transparent-light-dropdown-menu-active-bg);
	color: var(--transparent-light-dropdown-menu-active-font-color);
}
.transparent-light.transparent-light .form-element__instruction_box {
	border: 1px solid var(--transparent-light-instruction-bg);
}
.transparent-light.transparent-light .form-element__instruction_box .notification-icon {
	background: var(--transparent-light-instruction-bg);
}


/*transparent-dark Theme*/
.transparent-dark.transparent-dark {
	scrollbar-color: var(--primary-color) rgb(0, 0, 0, 0.7);
}
.transparent-dark.transparent-dark a {
	color: var(--transparent-dark-primary-font-color);
}

.transparent-dark.transparent-dark .userhome,
.userhome.transparent-dark.transparent-dark,
.transparent-dark.transparent-dark .main-container,
.main-container.transparent-dark.transparent-dark,
.transparent-dark.transparent-dark .main-container .bg-container,
.main-container.transparent-dark.transparent-dark .bg-container {
	background: var(--transparent-dark-primary-bg);
	color: var(--transparent-dark-primary-font-color);
}
.transparent-dark.transparent-dark .page-header {
	background: var(--transparent-dark-page-heading-bg-color);
	color: var(--transparent-dark-page-heading-font-color);
}
.transparent-dark.transparent-dark .page-header .form-element__page-heading {
	color: var(--transparent-dark-page-heading-font-color);
}
.transparent-dark.transparent-dark .page-header .form-element__page-subheading {
	color: var(--transparent-dark-page-subheading-font-color);
}

.transparent-dark.transparent-dark .transaction-tab__item.active {
	background: var(--transparent-dark-menu-bg);
	color: var(--transparent-dark-menu-font-color);
}
.transparent-dark.transparent-dark .transaction-information-details,
.transparent-dark.transparent-dark .account-box,
.transparent-dark.transparent-dark .main-container-bg,
.transparent-dark.transparent-dark .box {
	/* box-shadow: 0px 6px 14px 0px #00000040; */
	background: var(--transparent-dark-section-bg-color);
	color: #d6d6d6;
}
.transparent-dark.transparent-dark .payment-method-selection > .payment-selection-box {
	background: var(--transparent-dark-selectbox-bg-color);
	color: var(--transparent-dark-selectbox-font-color);
}
.transparent-dark.transparent-dark
	.payment-method-selection
	> .payment-selection-box:has(input:checked) {
	border: 1px solid transparent;
	background: var(--primary-theme-bg);
	color: var(--primary-theme-font-color);
}

.transparent-dark.transparent-dark .form-element__content_height {
	color: var(--transparent-dark-font-secondary-color);
}
.transparent-dark.transparent-dark .card.summary {
	box-shadow: 0px 6px 14px 0px #00000040;
	background: var(--transparent-dark-section-bg-color);
	color: var(--transparent-dark-section-font-color);
}
.transparent-dark.transparent-dark .card.summary .card-body > div {
	background: var(--transparent-dark-subsection-bg-color);
	color: var(--transparent-dark-subsection-font-color);
}
.transparent-dark.transparent-dark .form-element .form-control {
	background: var(--transparent-dark-form-element-input-bg-color);
	color: var(--transparent-dark-form-element-input-font-color);
}
.transparent-dark.transparent-dark .form-element__input.form-element__input .addon {
	color: var(--transparent-dark-font-secondary-color);
}
.transparent-dark.transparent-dark .btn-accordion {
	background: var(--transparent-dark-accordion-bg-color);
	color: var(--transparent-dark-accordion-font-color);
}
.transparent-dark.transparent-dark .panel {
	background: transparent;
}

.transparent-dark.transparent-dark .table,
.transparent-dark.transparent-dark .table .table {
	background: transparent;
}

.transparent-dark.transparent-dark .table-striped > tbody > tr:nth-of-type(odd) {
	background: rgb(255, 255, 255, 0.1);
}

.transparent-dark.transparent-dark .table-hover > tbody > tr:hover {
	background: rgb(255, 255, 255, 0.2);
}

.transparent-dark.transparent-dark .pagination > .active > a,
.transparent-dark.transparent-dark .pagination > .active > span,
.transparent-dark.transparent-dark .pagination > .active > a:hover,
.transparent-dark.transparent-dark .pagination > .active > span:hover,
.transparent-dark.transparent-dark .pagination > .active > a:focus,
.transparent-dark.transparent-dark .pagination > .active > span:focus {
	border-color: var(--primary-color);
	background: var(--primary-color);
	color: white;
}

.transparent-dark.transparent-dark .pagination > li > a,
.transparent-dark.transparent-dark .pagination > li > span {
	color: var(--primary-color);
	background: white;
}
.transparent-dark.transparent-dark .pagination .disabled {
	color: var(--muted-color);
}
.transparent-dark.transparent-dark .input-group .input-group-addon {
	border-color: var(--primary-color);
	background: var(--primary-color);
	color: white;
}

.transparent-dark.transparent-dark .tab-backdrop ul.tab-container {
	background: var(--wallet-tab-background);
	color: white;
}

.transparent-dark.transparent-dark .dropdown-toggle {
	background: var(--transparent-dark-dropdown-toggle-bg);
	color: var(--transparent-dark-dropdown-toggle-font-color);
}
.transparent-dark.transparent-dark .dropdown-menu {
	background: var(--transparent-dark-dropdown-menu-bg);
}
.transparent-dark.transparent-dark .dropdown-menu a,
.transparent-dark.transparent-dark .dropdown-menu > li > a {
	color: var(--transparent-dark-dropdown-menu-font-color);
}

.transparent-dark.transparent-dark .dropdown-menu > .active > a,
.transparent-dark.transparent-dark .dropdown-menu > .active > a:hover,
.transparent-dark.transparent-dark .dropdown-menu > .active > a:focus {
	background: var(--transparent-dark-dropdown-menu-active-bg);
	color: var(--transparent-dark-dropdown-menu-active-font-color);
}
.transparent-dark.transparent-dark .form-element__instruction_box {
	border: 1px solid var(--transparent-dark-instruction-bg);
}
.transparent-dark.transparent-dark .form-element__instruction_box .notification-icon {
	background: var(--transparent-dark-instruction-bg);
}




/*Maintenance State*/
.maintenance:before {
	font-family: "Font Awesome 6 Pro";
	content: "\f7d9";
	font-size: 1.5em;
	color: darkorange;
	opacity: 1;
	display: flex;
	background-color: rgb(0, 0, 0, 0.5);
	justify-content: center;
	align-items: center;
	text-align: center;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	border-radius: 5px;
}
.maintenance.maintenance.maintenance {
	position: relative;
}

/* ACCOUNT PAGE*/
:root {
	--acc-label-header: white;
	--acc-label-primary: gainsboro;
	--acc-label-secondary: #a5a5a5;
}
.wallets-buttons.wallets-buttons > a {
	/* background: transparent;
	border: 1px solid var(--theme-primary-color);
	border-radius: 25px;
	width: 100%;
	text-align: center;
	font-weight: 600;
	color: var(--theme-primary-color); */
	border-radius: 60px !important;

}

.wallets-buttons > a:hover {
	/*background: var(--primary-theme-bg);
	border: 1px solid var(--theme-primary-color);
	text-decoration: none;
	color: black;*/
}

.account-info__item-header .account-info__label {
	/* color: var(--acc-label-header); */
}

.wallets-totalBalanceTitle {
	font-weight: bold;
	/* color: var(--acc-label-header); */
}

.wallets-balances {
	/* color: var(--acc-label-primary); */
}

span.wallets-activeBalanceLabel,
span.wallets-withdrawableBalanceLabel {
	opacity: 0.75;
	padding-right: 15px;
}

span.wallets-activeBalanceAmount,
span.wallets-withdrawableBalanceAmount {
	font-weight: bold;
}

.wallets-balances {
    font-size: 12px;
}

.large-profile .wallet-totalBalance-amount {
	font-size: 3.5em;
	color: var(--theme-primary-color);
	font-weight: bold;
}

.small-profile .wallet-totalBalance-amount {
	font-size: 1.3em;
	color: var(--theme-primary-color);
	font-weight: bold;
}

.wallet-totalBalance-currency {
	padding-left: 10px;
	color: var(--theme-primary-color);
	font-weight: 600;
}

.light.light .wallets-totalBalanceLabel {
	color: black;
}
.dark.dark .wallets-totalBalanceLabel {
	color: white;
}

.account-info__back-icon, .account-info__header-title{
	cursor: pointer;
}
/* larger wallet balance  */
.large-profile .wallets-totalBalance-info {
	justify-content: space-between;
	display: flex;
	gap: 10px;
}

.large-profile .wallets-totalBalance-info .balance-left {
	display: flex;
	flex-direction: column;
}

.large-profile .wallets-totalBalance-info .wallets-totalBalanceTitle {
	order: 0;
}

.large-profile .wallets-totalBalance-info .wallets-totalBalanceLabel {
	order: 2;
}

.large-profile .wallets-totalBalance-info .wallets-totalBalance {
	order: 1;
	display: flex;
	align-items: center;
}

.large-profile .wallets-totalBalance-info .balance-right {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.large-profile .wallets-totalBalance-info .balance-right .wallets-buttons {
	display: flex;
	justify-content: center;
	gap: 10px;
}

.large-profile .wallets-balances > div {
	justify-content: space-between;
	display: flex;
}

:root {
	--theme-primary-color: #fbbe14;
	--theme-secondary-color: #f0b90b;
	--theme-tertiary-color: #f0b90b;
	--theme-quaternary-color: #f0b90b;
	--theme-border-radius: 15px;
}

.account-box {
	border-radius: 15px;
	background: rgb(81 81 81 /50%);
	border-radius: 5px;
	/* box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); */
	/* backdrop-filter: blur(5px); */
	/* -webkit-backdrop-filter: blur(5px); */
	/* border: 1px solid rgba(0, 0, 0, 0.3); */
}

.large-profile .account-box {
	padding: 30px;
}

.small-profile .account-box {
	padding: 10px 15px;
}

/* Large Screen Layout */
.large-profile.account-info {
	gap: 15px;
	overflow: hidden;
	height: 100%;
	box-shadow: 0px 0px 30px 5px rgba(0, 0, 0, 0.1);
	/* backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px); */
}

.large-profile .account-info__navs {
}

.large-profile .account-info__nav {
	padding-bottom: 15px;
}

.large-profile .wallets-totalBalance-info {
}

.large-profile .account-info__item {
}

/* Large account navigation  */
.large-profile .account-info__item-header {
	font-weight: 600;
	padding: 5px;
}

.large-profile .account-info__items {
	display: flex;
	flex-direction: column;
	gap: 15px;
}

.large-profile .account-info__item {
	display: flex;
	justify-items: center;
	width: 100%;
	border-radius: 5px;
	opacity: 0.75;
}

.large-profile .account-info__item.active,
.large-profile .account-info__item:hover {
	background: #ffffff;
	color: var(--theme-primary-color);
	cursor: pointer;
}

.large-profile .account-info__item .account-info__icon {
	border: 1px solid transparent;
	border-radius: 10px;
	justify-content: center;
	display: flex;
	padding: 0.5em;
}

.large-profile .account-info__item .account-info__label {
	padding: 0.5em 1em;
	text-align: center;
	font-size: 10px;
	font-weight: 550;
	align-items: center;
	display: flex;
	width: 100%;
	text-wrap: nowrap;
	text-transform: capitalize;
}
.account-info__item:hover {
	text-decoration: none;
}

/* larger wallet balance  */

.large-profile .wallets-totalBalance-info {
	justify-content: space-between;
	display: flex;
	gap: 10px;
}

.large-profile .wallets-totalBalance-info .balance-left {
	display: flex;
	flex-direction: column;
}

.large-profile .wallets-totalBalance-info .wallets-totalBalanceTitle {
	order: 0;
}

.large-profile .wallets-totalBalance-info .wallets-totalBalanceLabel {
	order: 2;
}

.large-profile .wallets-totalBalance-info .wallets-totalBalance {
	order: 1;
	display: flex;
	align-items: center;
}

.large-profile .wallets-totalBalance-info .balance-right {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.large-profile .wallets-totalBalance-info .balance-right .wallets-buttons {
	display: flex;
	justify-content: center;
	gap: 10px;
}

.large-profile .wallets-balances > div {
	justify-content: space-between;
	display: flex;
}

/* Large account content  */
.large-profile .account-contents {
	display: grid;
	gap: 15px;
	position: relative;
	height: 100%;
}

.large-profile .account-info__header {
	display: flex;
	/*color: var(--theme-primary-color);*/
	font-size: 15px;
	align-items: center;
	font-weight: bold;
	padding-bottom: 10px;
	background-clip: text;
	-webkit-background-clip: text;
	-moz-background-clip: text;
	-webkit-text-fill-color: transparent;
	-moz-text-fill-color: transparent;
	background-image: var(--primary-theme-bg);
}

.account-info__header .account-info__header-title{
	flex-grow: 1;
}

.large-profile .account-info__header .account-info__back-icon {
	display: none;
}

.large-profile .account-info__back-icon {
	padding: 10px;
}

.large-profile .account-info__table {
	display: grid;
	gap: 5px;
	padding-bottom: 30px;
	/* color: white; */
	height: fit-content;
}

.large-profile .account-info__table-header {
	color: black;
	font-weight: 800;
	font-size: 13px;
}

.large-profile .account-info__table-header i {
    padding-right: 10px;
}

.large-profile .account-info__table-body {
	display: grid;
	gap: 10px;
	/* color: var(--acc-label-primary); */
}

.large-profile .account-info__table-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.large-profile .account-info__table-data {
	display: grid;
	grid-template-columns: 1fr 2fr;
	width: 100%;
	align-items: center;
}

.large-profile .account-info__table-title {
	font-weight: 400;
	opacity: 0.8;
}

.large-profile .account-info__table-label {
}

.large-profile .account-info__navs-tab-section {
	display: none;
}

.large-profile .account-info-toggler {
	display: none;
}

/* Small Screen Layout */
.small-profile.grid >div{
	grid-column: span 12;
}

.small-profile.account-info {
	/* display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto; */
	gap: 10px;
	/* overflow: hidden; */
}

.small-profile.grid>div{
	grid-column: span 12;
}

.small-profile .account-info__navs {
	order: 1;
}

.small-profile .wallets-totalBalance-info {
	order: 0;
}

.small-profile .account-contents {
	order: 2;
}

/* Small wallet balance  */

.small-profile .wallets-totalBalance-info {
	justify-content: space-between;
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-bottom: 10px;
}

.small-profile .wallets-totalBalance-info .balance-left {
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-rows: auto auto;
}

.small-profile .wallets-totalBalance-info .wallets-totalBalanceTitle {
	grid-column: 1 / 3;
	grid-row: 1 / 2;
}

.small-profile .wallets-totalBalance-info .wallets-totalBalanceLabel {
	grid-column: 1 / 3;
	grid-row: 2 / 3;
}

.small-profile .wallets-totalBalance-info .wallets-totalBalance {
	grid-column: 2 / 2;
	grid-row: 1 / 3;
	display: flex;
	align-items: center;
}

.small-profile .wallets-totalBalance-info .balance-right {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding-bottom: 1em;
}

.small-profile .wallets-totalBalance-info .balance-right .wallets-buttons {
	display: flex;
	justify-content: center;
	gap: 10px;
}

.small-profile .wallets-balances {
	display: none;
}

.small-profile .wallets-balances > div {
	justify-content: space-between;
	display: flex;
}

/* Small account info  */

.small-profile .account-info__item-header {
	font-weight: 600;
	padding: 5px;
}

.small-profile .account-info__items {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0px 5px;
}

.small-profile .account-info__item {
	display: grid;
	grid-template-rows: auto 1fr;
	/* justify-items: center; */
	width: 100%;
	color: var(--theme-primary-color);
}

.small-profile .account-info__item .account-info__icon {
	border: 1px solid transparent;
	border-radius: 10px;
	justify-content: center;
	display: flex;
	padding: 1.1em;
	/* background: #9d9d9d33; */
}

.small-profile .account-info__item .account-info__icon i {
	font-size: 1.5em;
}

.small-profile .account-info__item:hover .account-info__icon {
	background: var(--theme-primary-color);
	color: black;
}

.small-profile .account-info__item .account-info__label {
	padding: 0.5em 1em;
	text-align: center;
	font-size: 10px;
	font-weight: 500;
	text-transform: capitalize;
}

/* small account content  */
.small-profile .account-contents:not(.open) {
	display: none;
}

.small-profile .account-contents.open {
	display: grid;
	gap: 15px;
}

.small-profile .account-info__header {
	display: flex;
	color: var(--theme-primary-color);
	font-size: 13px;
	align-items: center;
}

.small-profile .account-info__header {
	display: flex;
	color: var(--theme-primary-color);
	font-size: 13px;
	align-items: center;
}

.small-profile .account-info__header .account-info__back-icon {
	color: gainsboro;
}

.small-profile .account-info__back-icon {
	padding: 10px;
}

.small-profile .account-info__header-title {
	padding: 15px 0px;
	font-size: 15px;
	font-weight: bold;
}

.small-profile .account-info__table {
	display: grid;
	padding: 5px 0px;
}

.small-profile .account-info__table-header {
	color: var(--acc-label-header);
	font-weight: 500;
	padding: 5px 0px;
	font-size: 12px;
}

.small-profile .account-info__table-body {
	display: grid;
	/* color: var(--acc-label-primary); */
}

.small-profile .account-info__table-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 8px 0px;
	/* border-bottom: 1px solid #606060ad; */
}

.small-profile .account-info__table-data {
	display: grid;
	grid-template-columns: 2fr 3fr;
	width: 100%;
}

.small-profile .account-info__table-title {
	font-size: 11px;
	opacity: 0.75;
	display: flex;
	align-items: center;
}

.small-profile .account-info__table-label {
	font-size: 12px;
	font-weight: 550;
	justify-content: space-between;
	display: flex;
}

form#addressUpdate {
	display: flex;
	justify-content: space-between;
	width: 100%;
	gap: 5px;
}

input#address {
	width: 100%;
}

.btn-theme-primary.btn-theme-primary {
	background: linear-gradient(180deg, #D6974C 0%, #FBBE14 100%) !important;
	color: var(--primary-font-color) !important;
	outline: 0px;
	outline-offset: 0px;
}


/**
.dark .btn-theme-primary.btn-theme-primary,.btn-theme-primary:hover, .btn-theme-primary:focus {
	background: var(--theme-primary-color);
	color: var(--dark-inverse-primary-font-color) !important;

}
.light .btn-theme-primary.btn-theme-primary,.btn-theme-primary:hover, .btn-theme-primary:focus {
	background: var(--theme-primary-color);
	color: var(--light-inverse-primary-font-color) !important;
	outline: 0px;
	outline-offset: 0px;
}

.transparent-light .btn-theme-primary.btn-theme-primary,.btn-theme-primary:hover, .btn-theme-primary:focus {
	background: var(--theme-primary-color);
	color: var(--transparent-light-inverse-primary-font-color) !important;
	outline: 0px;
	outline-offset: 0px;
}
.transparent-dark .btn-theme-primary.btn-theme-primary,.btn-theme-primary:hover, .btn-theme-primary:focus {
	background: var(--theme-primary-color);
	color: var(--transparent-dark-inverse-primary-font-color) !important;
	outline: 0px;
	outline-offset: 0px;
}


*/


.btn-nav-tab {
    outline: 0px;
    outline-offset: 0px;
}

.dark .btn-nav-tab, .dark .btn-nav-tab:hover {
	color: var(--primary-font-color);
}

.light .btn-nav-tab, .light .btn-nav-tab:hover {
	color: var(--primary-font-color);
}

.transparent-light .btn-nav-tab, .transparent-light .btn-nav-tab:hover {
	color: var(--primary-font-color);
}
.transparent-dark .btn-nav-tab, .transparent-dark .btn-nav-tab:hover {
	color: var(--primary-font-color);
}


.btn-nav-tab.current-tab {
	background: var(--theme-primary-color);
	color: var(--primary-font-color);
}

.dark .btn-theme-secondary.btn-theme-secondary, .btn-theme-secondary:hover, .btn-theme-secondary:focus {
    border: 1px solid var(--theme-primary-color);
    color: var(--dark-primary-font-color) !important;
	outline: 0px;
	outline-offset: 0px;
}

.light .btn-theme-secondary.btn-theme-secondary, .btn-theme-secondary:hover, .btn-theme-secondary:focus {
    border: 1px solid var(--theme-primary-color);
	/*color: var(--light-primary-font-color) !important;*/
	outline: 0px;
	outline-offset: 0px;
	background-clip: text;
	-webkit-background-clip: text;
	-moz-background-clip: text;
	-webkit-text-fill-color: transparent;
	-moz-text-fill-color: transparent;
	background-image: var(--primary-theme-bg);
}

.transparent-dark .btn-theme-secondary.btn-theme-secondary, .btn-theme-secondary:hover, .btn-theme-secondary:focus {
    border: 1px solid var(--theme-primary-color);
    color: var(--transparent-dark-primary-font-color) !important;
	outline: 0px;
	outline-offset: 0px;
}

.transparent-light .btn-theme-secondary.btn-theme-secondary, .btn-theme-secondary:hover, .btn-theme-secondary:focus {
    border: 1px solid var(--theme-primary-color);
	color: var(--transparent-light-primary-font-color) !important;
	outline: 0px;
	outline-offset: 0px;
}

.account-info-toggler {
	width: 100%;
	position: absolute;
	justify-content: center;
	display: flex;
	transform: translateY(50%);
	left: 0px;
	bottom: 0px;
}

.account-info-toggler-icon {
	border-radius: 50%;
	cursor: pointer;
	outline: 0px;
	outline-offset: 0px;
}
.dark .account-info-toggler-icon {
	background: var(--theme-primary-color);
	color: var(--dark-inverse-primary-font-color) !important;
	outline: 0px;
	outline-offset: 0px;
}
.light .account-info-toggler-icon {
	background: var(--theme-primary-color);
	color: var(--light-inverse-primary-font-color) !important;
	outline: 0px;
	outline-offset: 0px;
}

.transparent-light .account-info-toggler-icon {
	background: var(--theme-primary-color);
	color: var(--transparent-light-inverse-primary-font-color) !important;

}
.transparent-dark .account-info-toggler-icon {
	background: var(--theme-primary-color);
	color: var(--transparent-dark-inverse-primary-font-color) !important;
	outline: 0px;
	outline-offset: 0px;
}

.account-info-toggler-icon.open {
	rotate: 180deg;
}

.account-info-toggler-icon i {
	padding: 10px;
}

.btn {
	padding: 5px;
	border-radius: var(--theme-border-radius);
	font-weight: 600;
	align-items: center;
	display: flex;
	justify-content: center;
}

input, input:focus, input:hover,
select, select:focus, select:hover,
button, button:focus, button:hover
.btn, .btn:focus, .btn:hover,
.bootstrap-select .dropdown-toggle:focus, .bootstrap-select>select.mobile-device:focus+.dropdown-toggle, a:focus{
    outline: 0px !important;
    outline-offset: 0px !important;
}

.btn-theme-secondary {
	background: transparent;
	border: 1px solid var(--theme-primary-color);
	color: var(--theme-primary-color);
}

.small-profile .account-info__navs {
	display: none;
	opacity: 0;
	translate: -20% 0;
	transition-property: display opacity;
	transition-duration: 0.5s;
	transition-behavior: allow-discrete;
}

.small-profile .account-info__navs.open {
	display: block;
	opacity: 1;
	translate: 0 0;

	@starting-style {
		opacity: 0;
		translate: -20% 0;
	}
}

.small-profile .account-info__content {
	display: none;
	opacity: 0;
	translate: 25% 0;
	transition-property: display opacity;
	transition-duration: 0.5s;
	transition-behavior: allow-discrete;
}

.small-profile .account-info__content.open {
	display: block;
	opacity: 1;
	translate: 0 0;

	@starting-style {
		opacity: 0;
		translate: 25% 0;
	}
}
/*
	.small-profile .account-info__item-header .account-info__label {
		display: none;
	} */

.small-profile .account-info__navs-tab-section {
	display: flex;
	justify-content: center;
	padding: 10px;
}

.account-info__navs-tabs {
	background: #282828;
	border-radius: var(--theme-border-radius);
	display: flex;
	padding: 6px 8px;
	color: var(--acc-label-primary);
	gap: 15px;
}
.transaction-records {
	/* color: white; */
}
.table-col-no-record {
	color: white;
	text-align: center;
}


.small-profile [class^="pagebar-"] {
	display: flex;
	flex-direction: column;
	align-items: center;
}
.small-profile [class^="pagebar-"] {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 15px;
}

.small-profile [class^="pagebar-"] .pull-left {
	order: 1;
}

.deposit-records-detail-icon i {
	color: var(--theme-primary-color);
}

/* Wallet Details */
.wallets-details {
	border-radius: 4px;
	overflow: hidden;
}

.wallets-detail-header {
	padding: 10px;
	background: #d3d3d3;
	display: flex;
	align-items: center;
}
.wallets-item-image {
	width: 24px;
	height: 24px;
	margin-right: 10px;
}
.wallets-category-label {
	font-weight: bold;
}
.wallets-category-content {
	flex: 1;
}
.wallets-items {
	padding: 10px;
	background: #fafafa;
}
.wallets-item {
	padding: 5px 0;
}
.wallets-item:last-child {
	border-bottom: none;
}
.wallets-item-amount {
	float: right;
}
.wallets-category-amount {
	float: right;
	font-weight: bold;
}

/* Checkbox */
.wallets-detail-container .checkbox {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
	margin: 0;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
}
.wallets-detail-container .checkbox-label {
	color: lightgray;
	display: flex;
	align-items: center;
	cursor: pointer;
}

/* Wallet Detail Container */
.light.light .wallets-details-content {
	border-radius: 15px;
	/* background: #f9f9f9; */
	color: black;
	/* padding: 20px 30px; */
	/*margin-top: 20px;*/
}
.dark.dark .wallets-details-content {
	border-radius: 15px;
	color: white;
}
.wallets-detail-container {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 1px;
	/*margin-bottom: 5px;*/
}
/*
@media (max-width: 481px) {
	.wallets-totalBalance-info {
		padding: 30px 30px 22px 30px;
		border-radius: 15px;
		margin-bottom: 15px;
		background: #f9f9f9;
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-direction: row;
	}

	.wallets-balance-left {
		align-items: flex-start;
	}

	.wallets-balance-right {
		align-items: flex-end;
	}

	.wallets-buttons {
		display: block;
	}

	.wallets-balances {
		align-items: flex-end;
	}

	.wallets-activeBalance,
	.wallets-withdrawableBalance {
		display: block;
	}

	.wallets-activeBalanceLabel,
	.wallets-withdrawableBalanceLabel {
		text-align: right;
	}
} */

.package-info__header {
	font-size: 15px;
	padding-bottom: 15px;
	font-weight: 600;
}
.col {
	color: white;
}

/* General Styles */
.reward-tabs {
	display: flex;
	margin: 30px 0 10px 0;
	gap: 10px;
}
.reward-header-tab {
	padding: 10px;
	cursor: pointer;
	border: 1px solid #000;
	background: none;
	border-radius: 10px;
}
.reward-header-tab:hover {
	background: #e1e1e1;
}
.reward-header-tab.active {
	background: #373333;
	border-color: #373333;
	color: white;
}
.reward-header-tab .icon {
	margin-left: 10px;
}

/* Reward Details */
.reward-details {
	border-radius: 4px;
	overflow: hidden;
}
/*.reward-detail {
				border-top: 1px solid #ddd;
			}*/
.reward-detail-header {
	padding: 10px;
	background: #d3d3d3;
	display: flex;
	align-items: center;
}
.reward-item-image {
	width: 24px;
	height: 24px;
	margin-right: 10px;
}
.reward-category-label {
	font-weight: bold;
}
.reward-category-content {
	flex: 1;
}
.reward-items {
	padding: 10px;
	background: #fafafa;
}
.reward-item {
	padding: 5px 0;
	display: flex;
	align-items: center;
}
.reward-item:last-child {
	border-bottom: none;
}
.reward-item-amount {
	float: right;
	flex: 1;
}

.reward-item-amount-action {
	float: right;
	flex: 1;
}
.reward-category-amount {
	float: right;
	font-weight: bold;
}

/* Checkbox */
.checkbox {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
	margin: 0;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
}
.checkbox-label {
	color: lightgray;
	display: flex;
	align-items: center;
	cursor: pointer;
}

/* Reward Detail Container */
.reward-details-content {
	border-radius: 15px;
	/* background:#f9f9f9; */
	color: black;
	/* padding: 20px 30px; */
	margin-top: 20px;
}
.reward-detail-container {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px 0;
	margin-bottom: 5px;
}


.reward-tabs, .wallets-tabs {
	display: none;
}


.wallet-info, .wallets-info {
	visibility: hidden;
}

#packageDetail .panel-default>.panel-heading a {
    color: black;
}
.swal2-popup .swal2-image {
    width: 60px;
    height: 60px;
}

.bottom-nav.style-3 li i {
    font-size: 15px;
    padding: 3px;
}

.bottom-nav.style-3 li {
    font-size: 11px;
}

span[tmp-data-lang="lang_live_chat"] {
    text-transform: capitalize;
}

/* Progress/Target */
.skill {
	width: 100px;
	/* Change to desired width */
	height: 100px;
	/* Change to desired height */
	position: relative;
	padding: 5px;
	/* Add 5px padding to create space around the content */
	box-sizing: border-box;
	/* Include padding in the width and height calculations */
}

.skill > .outer {
	width: 100%;
	height: 100%;
	padding: 10px;
	/* Adjust padding for smaller size */
	border-radius: 50%;
	background: #D1D1D1;
	position: absolute;
	top: 0;
	left: 0;
}

.skill > .outer > .inner {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: inset 4px 4px 6px -1px rgba(0, 0, 0, 0.2), inset -4px -4px 6px -1px rgba(255, 255, 255, 0.7), -0.5px -0.5px 0px rgba(255, 255, 255, 0.2), 0.5px 0.5px 0px rgba(0, 0, 0, 0.15), 0px 12px 10px -10px rgba(0, 0, 0, 0.05);
	background: white;
}

.skill > .outer > .inner > #number {
	font-weight: 600;
	color: #259BBF;
	font-size: 20px;
	/* Adjust font size for smaller container */
}

.skill > .outer > svg {
	width: 100%;
	/* Make SVG width relative to parent */
	height: 100%;
	/* Make SVG height relative to parent */
	position: absolute;
	top: 0;
	left: 0;
}


.skill > .outer circle {
	fill: none;
	stroke: url(#GradientColor);
	stroke-width: 20px;
	/* Adjust stroke width to percentage for scalability */
	stroke-dasharray: 440;
	stroke-dashoffset: 440;
	animation: anim 2s linear forwards;
	transform: rotate(-90deg);
	transform-origin: 50% 50%;
}

.top-login form#loginForm {
    display: flex;
	gap: 5px;
}




.meeting-schedule-table >thead>tr>th, .meeting-schedule-table >tbody>tr>th, .meeting-schedule-table >tfoot>tr>th, .meeting-schedule-table >thead>tr>td, .table>tbody>tr>td, .table>tfoot>tr>td {
	border: none !important;
}

.meeting-schedule-table  tbody td:first-child {
    border-bottom-left-radius: 10px;
    border-top-left-radius: 10px
}

.meeting-schedule-table  tbody td:last-child {
    border-bottom-right-radius: 10px;
    border-top-right-radius: 10px
}

.meeting-schedule-table  tbody tr:not(#spacing-row) {
	background:#6f6f6f;
}

.meeting-schedule-table #spacing-row {
    height: 10px
}

/* Select any element with an onclick attribute containing "window.location.href" */
[onclick*="window.location.href"] {
    cursor: pointer;
}