/*BG IMG*/
.background-primary-img {
    position: fixed;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
}

/* HEADER */
.red-:after {
	background: var(--h2_img_red_after);
}

.blue-:after {
	background: var(--blue)
}

.orange-:after {
	background: var(--orange)
}

.violet-:after {
	background: #775ef5
}

.green-:after {
	background: var(--green)
}

.scroll-top {
	position: fixed;
    opacity: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    border: none;
    padding: 2vw 3vw;
    font-size: 5vw;
    border-radius: 1vw;
    color: var(--h2_SCROLL_TOP_BTN_TXT);
    background: var(--h2_SCROLL_TOP_BTN_BG);
    transition: opacity .3s ease-in-out
}

.scroll-top.open {
	opacity: 1
}

.navbar {
	height: auto;
	padding: 2vw;
	color: var(--h2_TOP_NAVBAR_TXT);
    background: var(--h2_TOP_NAVBAR_BG) !important;
}
.navbar .left {margin-left:10px;}
/* #download_modal .download_inn{
	display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--h2_DOWNLOAD_INN);
    padding: 10px;
}

#download_modal .download_inn .close-banner{
    background: var(--h2_CLOSE_BANNER_BG);
    color: var(--h2_CLOSE_BANNER_TXT);
    padding: 1px 5px;
    border: none;
    font-size: 17px;
}

#download_modal .download_inn .banner-icon{
    padding: 10px;
    border-radius: 8px;
    width: 25%;	
}

#download_modal .download_inn .banner-text h4{
    color: var(--h2_BANNER_TXT);
    font-size: 14px;
    margin-bottom: 0;	
}

#download_modal .download_inn .banner-download .download-app{
	padding: 2px;
    padding-left: 5px;
    padding-right: 5px;
    width: 100%;
    text-align: center;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 600;
    color: var(--h2_DOWNLOAD_APP_TXT);
    text-transform: uppercase;
    font-size: 13px;
    min-width: 79px;
    background: var(--h2_DOWNLOAD_APP_BG);
    border: 1px solid transparent;	
} */

.traceAmt-box {
    width: 100%;
    display: flex;
    padding: 3px 0;
    gap: 5px
}

.navbar::after {
	background: transparent
}

.navbar .pl-view {
    display: flex;
    gap: 0 1rem
}

.navbar .link {
	height: unset;
	padding-right: 10px;
	color: var(--h2_TOP_NAVBAR_LINK)
}

.navbar .link .bars {
	position: relative;
	width: 30px
}

.navbar .link .bars div,
.navbar .link .bars:before,
.navbar .link .bars:after {
	content: "";
	border-radius: 3px;
    display: block;
    height: 3px;
    margin: 4px 0;
    background-color: var(--h2_TOP_NAVBAR_BARS)
}

.navbar .link .bars div {
	width: 80%
}

.navbar .link .bars:before {
	width: 100%
}

.navbar .link .bars:after {
	width: 60%
}

.navbar .logo {
	max-width: 150px
}

.navbar .label {
	font-size: 1.2rem;
    font-weight: 500
}

.navbar .menu-item {
	text-align: center;
	text-transform: capitalize;
	font-size: 3vw;
    font-weight: 600;
	color: var(--color4)
}

.navbar .menu-item img {
	width: 30px;
	margin: 0 auto;
	filter: var(--filter2);
	-wibkit-filter: var(--filter2)
}

/* SIDEMENU */
.sidemenu {
	position: fixed;
	top: 0;
	left: -300px;
	width: fit-content;
	height: 100%;
	z-index: 999;
    transition: left 200ms ease 0s
}

.sidemenu .main {
	width: fit-content;
	height: 100%;
	background: var(--h2_SIDEMENU_MAIN_BG);
	overflow-y: auto;
	overflow-x: hidden
}

/* Member Group Progress */
.sidemenu .member-container {
	margin: 0 0 1rem;
	display: flex;
    align-items: center;
    gap: 0 10px;
    padding: 10px 5px 5px;
    border-radius: 3px;
    width: 300px;
    background: var(--h2_HEADER_MEMBER_GRP_PROGRESS_MEMBER_CONTAINER_BG);
}

.sidemenu .member-container img {
	width: 40px
}

.sidemenu .member-container .dstg-member-grp {
	padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    text-align: center;
    background: var(--color8);
    color: var(--color1);
}

.sidemenu .-topRow {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
    align-items: center;
    gap: 10px;
}

.sidemenu .-topRow .dstg-info-memberGroup {
	padding: 2px 10px;
    border-radius: 16px;
    font-size: 14px;
}

.sidemenu .-topRow .dstg-info-memberGroup.firstRank {
	background-color: var(--h2_HEADER_MEMBER_GRP_PROGRESS_FIRST_RANK_MEMBER_GRP_BG);
}

.sidemenu .-topRow .dstg-info-memberGroup.secondRank {
	background-color: var(--h2_HEADER_MEMBER_GRP_PROGRESS_SECOND_RANK_MEMBER_GRP_BG);
}

.sidemenu .-topRow .dstg-info-memberGroup.thirdRank {
	background-color: var(--h2_HEADER_MEMBER_GRP_PROGRESS_THIRD_RANK_MEMBER_GRP_BG);
}

.sidemenu .-topRow .dstg-info-memberGroup.fourthRank {
	background-color: var(--h2_HEADER_MEMBER_GRP_PROGRESS_FOURTH_RANK_MEMBER_GRP_BG);
}

.sidemenu .-topRow .dstg-info-memberGroup.topRank {
	background-color: var(--h2_HEADER_MEMBER_GRP_PROGRESS_TOP_RANK_MEMBER_GRP_BG);
}

.sidemenu .-bottomRow {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.sidemenu .-bottomRow .member-progress-text {
	font-size: 14px;
}

.sidemenu .-bottomRow .member-progress-text .currentPoint {
	font-size: 24px;
	padding-right: 5px;
	font-weight: bold;
	color: var(--h2_HEADER_MEMBER_GRP_PROGRESS_CURR_POINT_COLOR);
}

.sidemenu .-bottomRow .member-progress-container {
    width: 100%;
    border-radius: 4px;
    overflow: hidden;
    height: 6px;
    background-color: var(--h2_HEADER_MEMBER_GRP_PROGRESS_MEMBER_PROGRESS_BAR_CONTAINER_BG);
}

.sidemenu .-bottomRow .member-progress-container .member-progress-bar {
	height: 100%;
    width: 0%;
    transition: width 0.4s ease;
}

.sidemenu .-bottomRow .member-progress-container.firstRank .member-progress-bar {
	background-color: var(--h2_HEADER_MEMBER_GRP_PROGRESS_FIRST_RANK_MEMBER_PROGRESS_BAR_BG);
}

.sidemenu .-bottomRow .member-progress-container.secondRank .member-progress-bar {
	background-color: var(--h2_HEADER_MEMBER_GRP_PROGRESS_SECOND_RANK_MEMBER_PROGRESS_BAR_BG);
}

.sidemenu .-bottomRow .member-progress-container.thirdRank .member-progress-bar {
	background-color: var(--h2_HEADER_MEMBER_GRP_PROGRESS_THIRD_RANK_MEMBER_PROGRESS_BAR_BG);
}

.sidemenu .-bottomRow .member-progress-container.fourthRank .member-progress-bar {
	background-color: var(--h2_HEADER_MEMBER_GRP_PROGRESS_FOURTH_RANK_MEMBER_PROGRESS_BAR_BG);
}

.sidemenu .-bottomRow .member-progress-container.topRank .member-progress-bar {
	background-color: var(--h2_HEADER_MEMBER_GRP_PROGRESS_TOP_RANK_MEMBER_PROGRESS_BAR_BG);
}
/* Member Group Progress */

/* Member Group Upgrade Downgrade Modal */
.rankUpgradeModal, 
.rankDowngradeModal {
	display: none;
	opacity: 0;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    justify-content: center;
    align-items: center;
    transition: opacity 0.3s ease;
    background-color: var(--h2_HEADER_MEMBER_GRP_UP_DOWN_MODAl_HOVER_LAYER_BG);
}

.rankUpgradeModal .modal-content, 
.rankDowngradeModal .modal-content {
	width: 90%;
	max-width: 280px;
	border-radius: 10px;
	padding: 20px;
	text-align: center;
	position: relative;
	top: -8%;
	transform: scale(0.9);
	transition: transform 0.3s ease;
	background: var(--h2_HEADER_MEMBER_GRP_UP_MODAl_CONTENT_BG);
	border: var(--h2_HEADER_MEMBER_GRP_MODAl_CONTENT_BORDER);
}

.rankDowngradeModal .modal-content {
	background: var(--h2_HEADER_MEMBER_GRP_DOWN_MODAl_CONTENT_BG);
}

.rankUpgradeModal.show .modal-content, 
.rankDowngradeModal.show .modal-content {
    transform: scale(1);
}

.rankUpgradeModal .modal-content .modal-header, 
.rankDowngradeModal .modal-content .modal-header {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 20px;
    padding: 10px;
    justify-content: center;
    color: var(--h2_HEADER_MEMBER_GRP_UP_MODAl_HEADER_COLOR);
    background: var(--h2_HEADER_MEMBER_GRP_UP_MODAl_HEADER_BG);
}

.rankDowngradeModal .modal-content .modal-header {
    color: var(--h2_HEADER_MEMBER_GRP_DOWN_MODAl_HEADER_COLOR);
}

.rankUpgradeModal .modal-content .modal-header:after, 
.rankDowngradeModal .modal-content .modal-header:after {
	border: none;
}

.rankUpgradeModal .modal-content .modal-close, 
.rankDowngradeModal .modal-content .modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    color: var(--h2_HEADER_MEMBER_GRP_UP_MODAl_CLOSE_BTN_COLOR);
    background: var(--h2_HEADER_MEMBER_GRP_MODAl_CLOSE_BTN_BG);
    border: var(--h2_HEADER_MEMBER_GRP_UP_MODAl_CLOSE_BTN_BORDER);
}

.rankDowngradeModal .modal-content .modal-close {
	color: var(--h2_HEADER_MEMBER_GRP_DOWN_MODAl_CLOSE_BTN_COLOR);
	border: var(--h2_HEADER_MEMBER_GRP_DOWN_MODAl_CLOSE_BTN_BORDER);
}

.rankUpgradeModal .modal-content .modal-image {
    width: 75%;
    margin: auto;
}

.rankDowngradeModal .modal-content .modal-image {
	width: 50%;
    margin: auto;
}

.rankUpgradeModal .modal-content .modal-text, 
.rankDowngradeModal .modal-content .modal-text {
    margin-top: 20px;
    font-size: 14px;
    color: var(--h2_HEADER_MEMBER_GRP_UP_MODAl_TXT_COLOR);
}

.rankDowngradeModal .modal-content .modal-text {
	color: var(--h2_HEADER_MEMBER_GRP_DOWN_MODAl_TXT_COLOR);
}

.rankUpgradeModal .modal-content .modal-button, 
.rankDowngradeModal .modal-content .modal-button {
    display: inline-block;
    padding: 10px 20px;
    font-size: 13px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    text-decoration: none;
    margin: 20px auto auto;
    width: 80%;
    background-color: var(--h2_HEADER_MEMBER_GRP_MODAl_VIEW_REWARD_BTN_BG);
    color: var(--h2_HEADER_MEMBER_GRP_MODAl_VIEW_REWARD_BTN_COLOR);
}

.rankUpgradeModal .modal-content .modal-button:hover, 
.rankDowngradeModal .modal-content .modal-button:hover {
    background-color: var(--h2_HEADER_MEMBER_GRP_MODAl_VIEW_REWARD_BTN_HOVER_BG);
}
/* Member Group Upgrade Downgrade Modal */

.sidemenu .menu-list:before {
	border-top: none
}

.sidemenu .menu-list {
    width: 300px;
	margin: 1rem 0;
	background: var(--h2_SIDEMENU_MENU_LIST_BG);
	border-bottom: 1px solid var(--h2_SIDEMENU_MENU_LIST_BORDER)
}

.sidemenu .menu-list:first-child {
	margin-top: 0
}

.sidemenu .menu-list:last-child {
	margin-bottom: 0
}

.sidemenu .menu-list li {
	position: relative;
	display: flex;
	padding: 15px 10px;
	align-items: center;
    gap: 10px;
    color: var(--h2_SIDEMENU_MENU_LIST_LI_TXT);
    background: var(--h2_SIDEMENU_MENU_LIST_LI_BG)
}

.sidemenu .menu-list li:after {
	content: "";
	position: absolute;
	width: calc(100% - 10px);
    height: 1px;
    right: 0;
    bottom: 0;
    background: var(--h2_SIDEMENU_MENU_LIST_BORDER)
}

.sidemenu .menu-list li:last-child:after {
	width: 0;
	height: 0;
	background: transparent
}

.sidemenu .menu-list li.active {
	color: var(--h2_SIDEMENU_MENU_LIST_LI_HOVER_TXT);
	background: var(--h2_SIDEMENU_MENU_LIST_LI_HOVER_BG)
}

.sidemenu .menu-list li.active:before {
	content: "";
	position: absolute;
	width: 5px;
	height: 100%;
	left: 0;
	top: 0;
	background: var(--color4)
}

.sidemenu .menu-list li .img {
	position: relative;
	z-index: 1
}

.sidemenu .menu-list li .img:before {
	content: "";
	position: absolute;
	width: 45px;
    height: 45px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 100%;
    background: #444;
    z-index: -1
}

.sidemenu .menu-list li .img:after {
	content: "";
	position: absolute;
	width: 10px;
    height: 10px;
    right: 10px;
    top: 60%;
    transform: translateY(-60%);
    border-radius: 100%;
    z-index: -1
}

.sidemenu .menu-list li .img img {
	width: 30px;
	margin: 0 5px
}

.sidemenu .menu-list li span {
	width: 100%;
	font-size: 14px;
    letter-spacing: 1px
}

.sidemenu .menu-list.v2 {
	margin: 0;
	padding: 1rem 0
}

.sidemenu .menu-list.v2 li {
	margin: 10px 1rem;
    padding: 15px 10px;
    border-radius: 5px;
    border: 1px solid var(--h2_SIDEMENU_MENU_LIST_V2_LI_BORDER);
    background: var(--h2_SIDEMENU_MENU_LIST_V2_LI_BG)
}

.sidemenu .menu-list.v2 li:after {
	width: 0;
    height: 0;
    background: transparent
}

.sidemenu .menu-list.v2 li:first-child {
	margin-top: 0
}

.sidemenu .menu-list.v2 li:last-child {
	margin-bottom: 0
}

.sidemenu .menu-list.v2 .info div {
    display: flex;
    flex-direction: column;
    gap: 5px
}

.sidemenu .menu-list.v2 .info div .lbl {
	font-size: 3vw
}

.sidemenu .menu-list.v2 .info div span {
	font-size: 2vw
}

.sidemenu .menu-list.v2 .lang {
	justify-content: center;
    color: #222;
    background: #d7e3f0;
    border-color: #d7e3f0
}

.sidemenu .menu-list.v2 .lang img {
	width: 30px
}

.sidemenu .menu-list.v2 .lang div {
	display: flex;
	flex-direction: column;
    text-align: left
}

.sidemenu .menu-list.v2 .lang span {
	font-size: 2.7vw;
    font-weight: 600;
    line-height: 1;
    letter-spacing: normal
}

.sidemenu .sub-menu-list .sub-menu- {
	position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 120px;
    overflow-x: hidden;
    overflow-y: auto;
    opacity: 0;
    z-index: -1;
    transition: left .3s ease 0s, z-index .5s;
    background: var(--h2_SIDEMENU_SUB_MENU_LIST_BG)
}

.sidemenu .sub-menu-list .sub-menu-.active {
	left: 229px;
	opacity: 1;
	z-index: 1
}

.sidemenu .sub-menu-list .sub-menu- ul li {
	position: relative;
	padding: 1rem;
    color: var(--h2_SIDEMENU_SUB_MENU_LIST_LI_TXT)
}

.sidemenu .sub-menu-list .sub-menu- ul li:after {
	content: "";
	position: absolute;
    width: 80%;
    height: 1px;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    background: var(--h2_SIDEMENU_SUB_MENU_LIST_LI_AFTER)
}

.sidemenu .sub-menu-list .sub-menu- ul li:last-child:after {
	width: 0;
    height: 0;
	background: none
}

.sidemenu .sub-menu-list .sub-menu- .prov- .prov-img {
	text-align: center;
	text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    font-size: 3vw;
    font-weight: 600
}

.sidemenu .sub-menu-list .sub-menu- .prov- .prov-img img {
	width: 65px;
    margin: 0 auto 5px
}

.sidemenu .sub-menu-list .sub-menu- .prov- .locked {
	position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem;
    z-index: 2;
    color: var(--color2);
    background: #000000c9
}

/* BOTTOM BAR */
.floatbar {
	position: fixed;
	z-index: 99;
    bottom: var(--fb_BOTTOM);
    left: var(--fb_LEFT);
    right: var(--fb_RIGHT);
    width: var(--fb_WIDTH);
    padding: var(--fb_PADDING);
    background: var(--fb_BG);
}

.floatbar .menu-list {
	display: flex
}

.floatbar .menu-list button {
	width: var(--fb_MENU_BTN_WIDTH);
}

.floatbar .menu-list .lang {	
	display: flex;
    align-items: center;
    justify-content: center;
    width: var(--fb_MENU_LANG_WIDTH);
    gap: var(--fb_MENU_LANG_GAP);
    font-size: var(--fb_MENU_LANG_FONT_SIZE);
    font-weight: var(--fb_MENU_LANG_FONT_WEIGHT);
    color: var(--fb_MENU_LANG_COLOR);
    background: var(--fb_MENU_LANG_BG);
    border: var(--fb_MENU_LANG_BORDER);
}

.floatbar .menu-list .lang img {
	width: var(--fb_MENU_LANG_IMG_WIDTH);
}

.floatbar .menu-list .lang div {
	display: flex;
	flex-direction: column;
	text-align: left
}

.floatbar .menu-list .loggedin {
	position: relative;	
	text-align: center;
    word-break: break-word;
    z-index: 1;
    padding: var(--fb_MENU_LOGGEDIN_PADDING);
    font-size: var(--fb_MENU_LOGGEDIN_FONT_SIZE);
    color: var(--fb_MENU_LOGGEDIN_COLOR);
    border: var(--fb_MENU_LOGGEDIN_BORDER);
    background: var(--fb_MENU_LOGGEDIN_BG);   
    font-weight: var(--fb_MENU_LOGGEDIN_FONT_WEIGHT);
}

.floatbar .menu-list .loggedin.active {
	font-weight: var(--fb_MENU_LOGGEDIN_ACTIVE_FONT_WEIGHT);
}

.floatbar .menu-list .loggedin .img {
	position: relative
}

.floatbar .menu-list .loggedin .img img {
	width: var(--fb_MENU_LOGGEDIN_IMG_IMG_WIDTH);
    margin: var(--fb_MENU_LOGGEDIN_IMG_IMG_MARGIN);
    filter:--fb_MENU_LOGGEDIN_IMG_IMG_FILTER;
}

.floatbar .menu-list .loggedin .img:after {
	content: "";
	position: absolute;
	z-index: -1;
	width: var(--fb_MENU_LOGGEDIN_IMG_AFT_WIDTH);
    height: var(--fb_MENU_LOGGEDIN_IMG_AFT_HEIGHT);
    top: var(--fb_MENU_LOGGEDIN_IMG_AFT_TOP);
    border-radius: var(--fb_MENU_LOGGEDIN_IMG_AFT_BORDER_RADIUS);
    background: var(--fb_MENU_LOGGEDIN_IMG_AFT_BG);   
}

.floatbar .menu-list .loggedin.active:before {
	content: "";
	position: absolute;
	z-index: -1;
	width: var(--fb_MENU_LOGGEDIN_ACTIVE_BEF_WIDTH);
    height: var(--fb_MENU_LOGGEDIN_ACTIVE_BEF_HEIGHT);
    top: var(--fb_MENU_LOGGEDIN_ACTIVE_BEF_TOP);
    left: var(--fb_MENU_LOGGEDIN_ACTIVE_BEF_LEFT);
    transform: var(--fb_MENU_LOGGEDIN_ACTIVE_BEF_TRANSFORM);
    border-radius: var(--fb_MENU_LOGGEDIN_ACTIVE_BEF_BORDER_RADIUS); 
    background: var(--fb_MENU_LOGGEDIN_ACTIVE_BEF_BG); 
}

.floatbar .menu-list .btn-login,
.floatbar .menu-list .btn-register {
	padding: var(--fb_MENU_BTN_PADDING);
	border-radius: var(--fb_MENU_BTN_BORDER_RADIUS);
	font-size: var(--fb_MENU_BTN_FONT_SIZE);
	font-weight: var(--fb_MENU_BTN_FONT_WEIGHT);
}

.floatbar .menu-list .btn-register,
.floatbar .menu-list .btn-register:hover {
	color: var(--h2_fb_REG_TXT);
	background: var(--h2_fb_REG_BG)
}

.floatbar .menu-list .btn-login,
.floatbar .menu-list .btn-login:hover {
	color: var(--h2_fb_LOGIN_TXT);
	background: var(--h2_fb_LOGIN_BG)
}

/* ACCOUNT MODAL */
.usrmenu-modal {
	position: fixed;
    width: 100%;
    height: 100%;
    bottom: -100%;
    left: 0;
    visibility: hidden;
    transition: all .2s ease-in-out;
    background: var(--h2_USER_MENU_BG);
    z-index: 98
}

.usrmenu-modal.active {
	bottom: 0;
	visibility: visible;
	z-index: 100
}

.usrmenu-modal .close {
	position: absolute;
    width: 65px;
    height: 65px;
    top: 0;
    right: 0;
    opacity: 1;
    z-index: 1
}

.usrmenu-modal .close:before,
.usrmenu-modal .close:after {
	content: "";
	position: absolute;
    width: 2px;
    height: 40%;
    top: 40%;
    left: 60%;
    background: var(--h2_USER_MENU_MODAL_CLOSE_BG);
}

.usrmenu-modal .close:before {
	transform: translate(-60%, -40%) rotateZ(135deg)
}

.usrmenu-modal .close:after {
	transform: translate(-60%, -40%) rotateZ(-135deg)
}

.usrmenu-modal .close div {
	position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    border-radius: 0 0 0 100%;
    background: var(--h2_USER_MENU_MODAL_CLOSE_DIV_BG);
    z-index: -1
}

.usrmenu-modal .top- {
	position: relative;
    width: 100%
}

.usrmenu-modal .top- .bg {
	position: absolute;
    width: 100%;
    height: 45.3333333333vw;
    background-repeat: no-repeat;
    background-position: bottom center;
    background-size: 100%;
    z-index: -1
}

.usrmenu-modal .top- .content- {
	padding: 3rem 1rem 2rem;
    display: flex;
    align-items: center;
    gap: 10px
}

.usrmenu-modal .top- .content- .member-group- {
	width: 80px
}

.usrmenu-modal .top- .content- .member-info- {
	font-size: 1rem;
    color: var(--h2_USER_MENU_MODAL_TOP_CONTENT_MEMBER_INFO_COLOR);
}

.usrmenu-modal .top- .content- .member-info- .reward-point {
	display: flex;
    align-items: center;
    margin-top: 5px;
    padding: 5px 1rem;
     gap: 5px;
    border-radius: 20px;
    background: var(--h2_USER_MENU_MODAL_TOP_CONTENT_MEMBER_INFO_REWARD_PT_BG);
}

.usrmenu-modal .top- .content- .member-info- .reward-point #usrreward {
	padding-right: 10px;
    border-right: 1px solid
}

.usrmenu-modal .bottom- {
	padding: 0 10px;
	overflow-y: auto;
    overflow-x: hidden
}

.usrmenu-modal .bottom- .menu-sec- {
	margin-bottom: 10px;
	border-radius: 5px;
    background: var(--h2_USER_MENU_MODAL_BOTTOM_MENU_SEC_BG);
}

.usrmenu-modal .bottom- .menu-sec-:last-child {
	margin-bottom: 0
}

.usrmenu-modal .bottom- .menu-sec-.hidelbl {
	padding: 1rem
}

.usrmenu-modal .bottom- .menu-sec-.btn-logout {
	text-align: center;
    font-size: 1rem
}

.usrmenu-modal .bottom- .menu-sec- h5 {
	position: relative;
	padding: 1rem 1rem 1rem 2rem;
	font-size: 3.5vw;
    color: var(--h2_USER_MENU_MODAL_BOTTOM_MENU_SEC_H5_COLOR);
    border-bottom: 1px solid
}

.usrmenu-modal .bottom- .menu-sec- h5:before {
	content: "";
	position: absolute;
    width: 5px;
    height: 50%;
    top: 50%;
    left: 1rem;
    transform: translateY(-50%);
    background: var(--h2_USER_MENU_MODAL_BOTTOM_MENU_SEC_H5_BEFORE_BG)
}

.usrmenu-modal .bottom- .menu-sec- ul {
	display: flex;
	flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: flex-start;
    gap: 5vw 8vw;
    padding: 5vw 2vw 3vw
}

.usrmenu-modal .bottom- .menu-sec- ul li {
	width: min-content;
	min-width: 60px;
    text-align: center;
    font-size: 3.5vw;
    line-height: 3.3vw;
    color: var(--h2_USER_MENU_MODAL_BOTTOM_MENU_SEC_UL_LI_COLOR);
}

.usrmenu-modal .bottom- .menu-sec- ul li .img {
	position: relative;
	margin-bottom: 3vw;
	z-index: 1
}

.usrmenu-modal .bottom- .menu-sec- ul li .img:before {
	content: "";
	position: absolute;
	width: 10vw;
    height: 10vw;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 100%;
    background: var(--h2_USER_MENU_MODAL_BOTTOM_MENU_SEC_UL_LI_IMG_BEFORE_BG);
    z-index: -1
}

.usrmenu-modal .bottom- .menu-sec- ul li .img:after {
	content: "";
	position: absolute;
	width: 3vw;
    height: 3vw;
    top: 2vw;
    border-radius: 100%;
    z-index: -1
}

.usrmenu-modal .bottom- .menu-sec- ul li .img img {
	width: 7vw;
	margin: auto
}

.usrmenu-modal .urs-wall-info {
	display: flex;
    margin-bottom: 10px;
    font-size: 1rem
}

.usrmenu-modal .urs-wall-info .item- {
	display: flex;
    width: 50%;
    gap: 10px;
    align-items: center
}

.usrmenu-modal .urs-wall-info .item-:last-child {
	justify-content: right
}

.usrmenu-modal .urs-wall-info .tol-wal-amt {
	position: relative;
	display: flex;
    gap: 0 10px;
    padding-top: 20px
}

.usrmenu-modal .urs-wall-info .tol-wal-amt .lbl {
	position: absolute;
	top: 0;
	left: 0
}

.usrmenu-modal .urs-wall-info .tol-wal-amt .tolWalBal{
    font-weight: 900 !important;
    font-size: 20px !important;
}

.usrmenu-modal .btn-viewwallist {
	font-size: 1rem;
	font-weight: 600
}

.contactList li img {
	width: 30px;
}

.wallet-box- {
	padding: 1rem 15px;
    background: var(--h2_WALLET_BOX_BG);
}

.wallet-box- .box-row- {
	display: flex;
	margin-bottom: 10px
}

.wallet-box- .box-row-.line {
    padding-bottom: 5px;
    border-bottom: 1px solid
}

.wallet-box- .box-row-:last-child {
	margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none
}

.wallet-box- .box-row- .item- {
	display: flex;
    width: 50%;
    gap: 10px;
    align-items: center;
    font-size: 1rem
}

.wallet-box- .box-row- .item- .refreshTimer{
	color: var(--color2);
}

.wallet-box- .box-row- .item-:last-child {
	justify-content: right
}

.wallet-box- .tol-wal-amt {
	position: relative;
	padding-top: 20px;
	font-size: 1rem;
    color: var(--h2_WALLET_BOX_TOL_WAL_AMT_COLOR);
}

.wallet-box- .tol-wal-amt .lbl {
	position: absolute;
	top: 0;
    left: 0
}

.wallet-box- .btn-viewwallist {
	font-size: 1rem;
    font-weight: 600
}

.wallet-list- {
	position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 100%;
    visibility: hidden;
    z-index: -1;
    transition: all .2s ease-in-out;
    background: var(--h2_WALLET_LIST_BG);
}

.wallet-list-.active {
	top: 0;
    visibility: visible;
    z-index: 16
}

.wallet-list- .wal-wrap- {
	margin: 8vw 15px
}

.wallet-list- .btn-viewwallist {
	font-size: 1rem;
    font-weight: 600
}

.wallet-list- .main-wal-info- {
	display: flex;
    align-items: center;
    margin: 1rem 0 10px;
    padding-bottom: 5px;
    border-bottom: 1px solid;
    color: var(--h2_WALLET_LIST_PROV_WAL_INFO_COLOR)
}

.wallet-list- .main-wal-info- .main-bal {
    display: flex;
    align-items: baseline;
    gap: 0 5px;
    padding: 0;
    font-size: 20px
}

.wallet-list- .prov-wal-info- {
	padding-right: 5px;
	overflow-y: auto;
    overflow-x: hidden;
    color: var(--h2_WALLET_LIST_PROV_WAL_INFO_COLOR);
}

.wallet-list- .prov-wal-info- .list-item- {
	display: grid;
    grid-template-columns: 55% 30% 15%;
    margin-bottom: 1rem;
    font-size: 1rem
}

.wallet-list- .prov-wal-info- .list-item- div:nth-child(2) {
	display: flex;
    justify-content: right
}

.wallet-list- .prov-wal-info- .list-item- div:nth-child(2).active {
	color: var(--h2_WALLET_LIST_PROV_WAL_INFO_LIST_ITEM_DIV_CHILD_2_ACTIVE_COLOR);
}

.wallet-list- .prov-wal-info- .list-item- .locked.hide {
	display: none;
    opacity: 0
}

/* modal */
#langmodal .lang- {
	margin: 0 0 10px;
    padding: 0 0 10px;
    align-items: flex-start;
    border-bottom: 1px solid
}

#langmodal .lang-:last-child {
	margin: 0;
	padding: 0;
	border-bottom: 0
}

#langmodal .lang-lbl {
	display: flex;
    gap: 0 1rem;
    align-items: center;
    padding-left: 0;
    color: var(--h2_LANG_MODAL_LANG_LBL_COLOR);
}

#langmodal .lang-lbl img {
	width: 30px
}

#langmodal .lang-option {
	display: flex;
	flex-wrap: wrap;
    gap: 5px;
    padding: 0
}

#langmodal .lang-option li {
	padding: 5px 1rem;
    border-radius: 3px;
    cursor: pointer;
    transition: .3s ease-in-out;
    color: var(--h2_LANG_MODAL_LANG_OPTION_LI_COLOR);
    border: 1px solid var(--h2_LANG_MODAL_LANG_OPTION_LI_BORDER);
}

#langmodal .lang-option li.active,
#langmodal .lang-option li:hover {
	color: var(--h2_LANG_MODAL_LANG_OPTION_LI_ACTIVE_COLOR);
    border-color: var(--h2_LANG_MODAL_LANG_OPTION_LI_ACTIVE_BORDER_COLOR)
}

#announcemodal .announce-item {
	margin: 5px 0;
    padding: 10px;
    border-radius: 3px;
    color: var(--h2_ANNOUNCEMODAL_ANNOUNCE_ITEM_COLOR);
    border: 1px solid
}

#announcemodal .announce-item .title {
	display: flex;
    gap: 10px;
    align-items: baseline;
    margin-bottom: 5px;
    padding-bottom: 5px;
    border-bottom: 1px solid
}

#announcemodal .announce-item .message p {
	color: var(--h2_ANNOUNCEMODAL_ANNOUNCE_ITEM_MSG_P_COLOR);
}

/*partner logo*/
#partnerSlider, .slick-slide {
	display: flex;
	justify-content: center;
	align-items: center;
}

#partnerSlider img {
	width: 50px;
	height: auto;
}

.partnerSlider-wrap{
	width: 100px;
}

.partner-logo-1{
	width: 100%;
}

/* contact float */
.hcontact-float- {
	position: fixed;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    right: 1.25rem;
    bottom: 14%;
    z-index: 99
}

.hcontact-float- .float-item- {
    width: 65px;
    height: 65px;
    padding: .25em;
    font-size: 2.75rem;
    border-radius: 100%
}

.hcontact-float- .float-item-[data-contactcode='WHATSAPP'] {
	color: var(--color2);
	background: #2ebc0b
}

.hcontact-float- .float-item-[data-contactcode='TELEGRAM'] {
	color: var(--color2);
	background: #00a5ff
}

.hcontact-float- .float-item-[data-contactcode='MESSENGER'] {
	background: var(--color2)
}

.hcontact-float- .float-item-[data-contactcode='MESSENGER'] i {
	background: linear-gradient(35deg, #0695ff 20%, #a334fa 50%, #ff6968 85%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent
}

/* Contact Box */
.contactBox.active {
    right: 0;
}

.contactBox {
    align-items: center;
    bottom: 200px;
    display: flex;
    position: fixed;
    right: -240px;
    transition: all .3s;
    width: 270px;
    z-index: 9999;
}

.contactBox_left {
    align-items: center;
    border-bottom-left-radius: 10px;
    border-top-left-radius: 10px;
    display: flex;
    flex-direction: column;
    font-size: 12px;
    font-weight: 400;
    justify-content: center;
    padding: 20px 0;
    white-space: nowrap;
    width: 30px;
    z-index: 2;
}

#contact_icon_mobile{
	max-width:30px;
	min-width:30px;
	margin-right: .75rem;
}

.contactbox_text {
    transform: rotate(0);
    writing-mode: vertical-lr;
}

.active .contact_us_arrow {
    transform: rotate(180deg);
}

.contact_us_arrow {
    background-color: #fff3;
    border-radius: 100%;
    height: 21px;
    margin-top: 10px;
    position: relative;
    transition: all .3s;
    width: 21px;
}

.contact_us_arrow i {
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%) rotate(0deg);
    width: 9px;
}

.contactBox_right {
    align-self: stretch;
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
    padding: 10px;
    transition: all .15s;
    width: calc(100% - 30px);
}

.contactBox_right .contact_btn_mobile i{
	font-size: 30px;
    margin-right: .75rem;
    color: #fff;
}

.contactBox.active .contactBox_right {
    margin-left: 0;
    padding: 10px 0 10px 20px;
    width: calc(100% - 30px);
}

.contact_btn_mobile:first-child {
    margin-top: 0;
}

.contact_btn_mobile {
    align-items: center;
    display: flex;
    margin-top: 15px;
}

.contact-tab-text-1, .contact-tab-text-2 {
	font-size: .75rem;
    line-height: 1rem;
}
/* Contact Box */

/* Beside Parnter Logo */
.BesideParnterLogo .ParnterLogo-1,
.BesideParnterLogo .ParnterLogo-2 {
	position: fixed;
    width: 25px;
    right: 0px;
    z-index: 99;
}

.BesideParnterLogo .ParnterLogo-1 {
	bottom: 350px;
}

.BesideParnterLogo .ParnterLogo-2 {
    bottom: 465px;
}
/* Beside Parnter Logo */