@charset "UTF-8";

body {
	font-weight: var(--webFONTWEIGHT);
	font-size: var(--webFONTSIZE);
	color: var(--webTXT);
	background: var(--webBG)
}

p {
	color: var(--desk1_P_TXT);
}

.main-wrap {
	padding: 10rem 0 5rem
}

.main-wrap.login-main-wrap {
	margin-top: 75px
}

.body-content-area {
	padding: 5rem 0 0
}

/* ANIMATION */
@keyframes text_popping {
	0% {
		font-size: 12px
	} 50% {
		font-size: 18px
	} 100% {
		font-size: 12px
	}
}

@keyframes btn_creditClaim {
	0% {
		filter: var(--desk1_KEYFRAME_BTN_CREDIT_CLAIM_FILTER_ZERO);
	} 50% {
		filter: var(--desk1_KEYFRAME_BTN_CREDIT_CLAIM_FILTER_HALF);
	} 100% {
		filter: var(--desk1_KEYFRAME_BTN_CREDIT_CLAIM_FILTER_FULL);
	}
}

@keyframes maintenance {
	0% {
		text-shadow: var(--desk1_KEYFRAME_MAINTENANCE_ZERO_TEXT_SHADOW);
		box-shadow: var(--desk1_KEYFRAME_MAINTENANCE_ZERO_BOX_SHADOW);
	} 50% {
		text-shadow: var(--desk1_KEYFRAME_MAINTENANCE_HALF_TEXT_SHADOW);
		box-shadow: var(--desk1_KEYFRAME_MAINTENANCE_HALF_BOX_SHADOW);
	} 100% {
		text-shadow: var(--desk1_KEYFRAME_MAINTENANCE_FULL_TEXT_SHADOW);
		box-shadow: var(--desk1_KEYFRAME_MAINTENANCE_FULL_BOX_SHADOW);
	}
}

/* PRELOADER */
#preloader {
	z-index: 99999;
	background-color: var(--desk1_PRELOADER_BG);
}


#loading-center-absolute {
	max-width: 300px
}

#loading-center-absolute img {
	width: 100%
}

/* SCROLL */
.scroll-top {
	border-radius: 5px;
	text-align: center;
	margin: auto;
	padding: 0;
	transition: background .3s linear, color .3s linear, opacity 1s ease,
		bottom 1s ease;
	color: var(--desk1_SCROLL_TOP_TXT);
	background: var(--desk1_SCROLL_TOP_BG);
	border: 2px solid var(--desk1_SCROLL_BORDER);
}	



.scroll-top:hover {
	color: var(--desk1_SCROLL_TOP_HOVER);
	background: var(--desk1_SCROLL_TOP_BG)
}

/* FILTER */
.mix {
	display: none
}

/* SCROLLBAR */
::-webkit-scrollbar {
    width: 5px
}

::-webkit-scrollbar-thumb {
    background: var(--desk1_WEBKIT_SCROLLBAR_THUMB_TXT);
    color: var(--desk1_WEBKIT_SCROLLBAR_THUMB_BG);
    border-radius: 5px
}


::-webkit-scrollbar-track {
    background: var(--desk1_WEBKIT_SCROLLBAR_TRACK_TXT);
    color: var(--desk1_WEBKIT_SCROLLBAR_TRACK_BG);
    border-radius: 5px
}

::-ms-scrollbar {
	width: 5px
}

::-ms-scrollbar-thumb {
	background: var(--desk1_MS_SCROLLBAR_THUMB_BG);
    color: var(--desk1_MS_SCROLLBAR_THUMB_TXT);
    border-radius: 5px
}

::-ms-scrollbar-track-piece {
	background: var(--desk1_MS_SCROLLBAR_TRACK_PIECE_BG);
    color: var(--desk1_MS_SCROLLBAR_TRACK_PIECE_TXT);
    border-radius: 5px
}


/* TABLIST */
.tab-list-1 .nav-tabs {
	position: relative;
	gap: 3px;
	margin-bottom: 1rem;
	border-bottom: none
}

.tab-list-1 .nav-tabs:after {
	content: "";
	position: absolute;
	width: 100%;
	height: 1px;
	bottom: -1px;
	left: 0;
	background: var(--desk1_MODAL_TAB_LIST_1_AFTER_BG);
}

.tab-list-1 .nav-tabs .nav-link {
	font-weight: 500;
    color: var(--desk1_MODAL_TAB_LIST_1_TXT);
    background: var(--desk1_MODAL_TAB_LIST_1_BG);
    border: none;
}


.tab-list-1 .nav-tabs .nav-link.active,
.tab-list-1 .nav-tabs .nav-link:hover,
.tab-list-1 .nav-tabs .nav-link:focus {
	color: var( --desk1_MODAL_TAB_LIST_1_ACTIVE_TXT);
    background: var(--desk1_MODAL_TAB_LIST_1_ACTIVE_BG)

}

/* INPUT */
.form-group .col-form-label {
	padding: 0;
	font-size: 14px;
    font-weight: 500;
    text-transform: uppercase
}

.form-group .input- {
	position: relative;
    display: flex;
    flex-direction: column
}

.form-group input,
.form-group select {
	width: 100%;
	padding: 10px;
    border-radius: 3px;
    transition: .3s ease-in-out;
    border: 1px solid var(--desk1_MODAL_FORM_GROUP_INPUT_BORDER);
    box-shadow: none
}

.form-group input:focus,
.form-group input:hover,
.form-group select:focus,
.form-group select:hover {
	border-color: var(--desk1_MODAL_FORM_GROUP_HOVER_TXT);
	box-shadow: none
}

.form-group input:disabled,
.form-group input.disabled,
.form-group input:disabled:hover,
.form-group input:disabled:focus {
    font-weight: 500;
    color: var(--desk1_MODAL_FORM_GROUP_INPUT_DISABLED_HOVER_TXT);
    background: var(--desk1_MODAL_FORM_GROUP_INPUT_DISABLED_HOVER_BG);
    border-color: var(--desk1_MODAL_FORM_GROUP_INPUT_DISABLED_HOVER_BORDER)
}

.form-group input[type='checkbox'],
.form-group input[type='checkbox']:hover,
.form-group input[type='checkbox']:focus {
	 box-shadow: none
}

.form-group .input-.pswd input {
	padding: 10px 45px 10px 1rem
}

.visibleIcon,
.copyIcon {
	position: absolute;
    width: fit-content;
    height: fit-content;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    font-size: 1rem;
    cursor: pointer
}

.error {
	color: var(--desk1_ERROR_TXT) !important
}

.btn-g {
	position: relative;
	border-radius: 5px;
	min-width: unset;
    max-width: unset;
    padding: 10px 1rem;
    font-weight: 100;
    letter-spacing: 0;
    color: var(--desk1_MODAL_BTN_G_TXT);
    border: none;
    background: var(--desk1_MODAL_BTN_G_BG);
    background-size: 200%;
    background-position: 0 0;
    transition: all .3s ease-in-out
}


.btn-g:hover {
	background-position: 100% 0
}

.btn-g.shover:hover {
	filter: brightness(.8);
	-webkit-filter: brightness(.8)
}

.btn-g.btn-2 {
	font-weight: 500;
    color: var(--desk1_MODAL_BTN_G_BTN_2_TXT);
    background: var(--desk1_MODAL_BTN_G_BTN_2_BG);
}

.btn-g.btn-2:hover {
	filter: brightness(.8);
	-webkit-filter: brightness(.8)
}


.btn-g.btn-3 {
	background: var(--desk1_BTN_G_BTN_3_BG);
    border: 1px solid var(--desk1_BTN_G_BTN_3_BORDER);
}

.btn-g.btn-3:hover {
	border-color: inherit
}

.btn-g.btn-4 {
	background: var(--desk1_BTN_G_BTN_4_BG);
}

.btn-g.btn-4:after {
	content: "";
	position: absolute;
	width: 70%;
	height: 1px;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	transition: .3s ease-in-out;
	background: var(--desk1_BTN_G_BTN_4_AFTER_BG);
}

.btn-g.btn-4:hover {
	color: var(--desk1_BTN_G_HOVER);
}

.btn-g.btn-4:hover:after {
	background: var(--desk1_BTN_G_HOVER_AFTER);
}

.btn-g.disabled,
.btn-g:disabled,
.btn-g:disabled:hover {
	cursor: default;
	color: var(--desk1_BTN_G_DISABLED_HOVER_TXT);
    background-image: var(--desk1_BTN_G_DISABLED_HOVER_BG);
    background-size: 100%;
    background-position: 0 0
}

.btn-g.small- {
	padding: 5px 1rem
}

.btn-modalClose {
	position: absolute;
	width: 60px;
    height: 100%;
    right: 0;
    top: 0;
    padding: 0;
    font-size: 20px;
    text-align: center;
    border-radius: 0 5px 0 0;
    transition: .3s ease-in-out;
    border: none;
    color: var(--desk1_MODAL_CLOSE_TXT);
    background-color: var(--desk1_MODAL_CLOSE_BG)
}

.btn-modalClose:hover {
	background-color: var(--desk1_MODAL_CLOSE_HOVER_BG);
}

.btn-form {
	min-width: 200px;
    font-size: 14px
}

.btn-regCopy,
.btn-regCopy:hover {
	min-width: 100px;
	background-color: var(--desk1_BTN_REGCOPY_HOVER_BG);
}

.btn-modalDownload,
.btn-modalDownload:hover {
	padding: 5px 10px;
    font-size: 10px;
    background: var(--desk1_BTN_MODALDOWNLOAD_HOVER_BG) none repeat scroll 0 0
}


.btn-refShare {
    width: 100px;
    padding: 0;
	border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border: none;
    background-color: var(--desk1_BTN_REFSHARE_BG)
}

.btn-refShare img {
	width: 100%;
	background-color: var(--desk1_BTN_REFSHARE_IMG_BG);
}

.btn-detail {
	padding: 5px 15px;
	min-width: 60px
}

.btn-delete,
.btn-delete:hover {
	font-size: 16px;
	background-color: var(--desk1_BTN_DELETE_HOVER_BG);
}

.btn-add {
	padding: 10px 15px;
	border-radius: 5px;
	cursor: pointer;
	transition: .3s ease-out;
	color: var(--desk1_BTN_ADD_TXT);
    border: 2px solid var(--desk1_BTN_ADD_BORDER);
    background-color: var(--desk1_BTN_ADD_BG)
    
}

.btn-add:hover {
	color: var(--desk_BTN_ADD_HOVER_TXT);
    border: 2px solid var(--desk1_BTN_ADD_HOVER_BORDER);
    background-color: var(--desk1_BTN_ADD_HOVER_BG)
}


.btn-remove,
.btn-remove:hover {
    background: var(--desk1_BTN_REMOVE_HOVER_BG)
}

.btn-exchange,
.btn-exchange:hover {
    font-size: 14px;
    background-color: var(--desk1_BTN_EXCHANGE_HOVER_BG);
    filter: var(--desk1_BTN_EXCHANGE_HOVER_FILTER)
}


.btn-creditInfo,
.btn-creditInfo:hover {
	padding: 0;
	font-size: 12px;
	color: var(--desk1_BTN_EXCHANGE_HOVER_TXT);
	background-color: var(--desk1_BTN_EXCHANGE_HOVER_BG);
	filter: var(--desk1_BTN_EXCHANGE_HOVER_FILTER);
}

.btn-creditInfo:hover {
	text-decoration: underline
}

.btn-voucherClaim,
.btn-voucherClaim:hover {
	width: 100%;
	background-color: var(--desk1_BTN_VOUNCHER_CLAIM_HOVER_BG)
}

.btn-allin {
	background: var(--desk1_ALLIN_BG)
}

.btn-restore {
	background: var(-desk1_BTN_RESTORE_BG)
}


.btn-play {
	width: 100%;
    padding: 5px
}

.btn-creditClaim {
    width: 180px;
    font-size: 20px;
	animation: btn_creditClaim 2s ease-in-out infinite;
	-webkit-animation: btn_creditClaim 2s ease-in-out infinite;
	border: 2px solid var(--desk1_BTN_CREDIT_CLAIM_BORDER);
	background: var(--desk1_BTN_CREDIT_CLAIM_BG) none repeat scroll 0 0
}


.btn-creditClaim:hover {
	background: var(--desk1_BTN_CREDIT_CLAIM_HOVER_BG) none repeat scroll 0 0
}

.btn-generate,
.btn-generate:hover {
	position: absolute;
	top: 50%;
    transform: translate(10px, -50%);
    background: var(--desk1_BTN_GENERATE_HOVER_BG) none repeat scroll 0 0
}

.isMaintenance {
	width: 100%;
    padding: 5px;
    border-radius: 5px;
    text-align: center;
    text-transform: uppercase;
    color: var(--desk1_ISMAINTENANCE_TXT);
    background-color: var(--desk1_ISMAINTENANCE_BG)
}

.toggle-btn {
    position: relative;
    display: flex;
    align-items: center
}

.toggle-btn label {
	margin: 0 10px 0 0;
	color: inherit
}

.toggle-btn input[type=checkbox] {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    cursor: pointer;
    opacity: 0;
    z-index: 1
}

.toggle-btn .toggle-slider {
	position: relative;
	width: 80px;
    border-radius: 20px;
    padding: 3px 0;
    text-transform: uppercase;
    transition: .3s linear;
    color: var(--desk1_TOGGLE_BTN_SLIDER_TXT);
    border: 1px solid var(--desk1_TOGGLE_BTN_SLIDER_BORDER);
	background-color: var(--desk1_TOGGLE_BTN_SLIDER_BG)
}

.toggle-btn input[type=checkbox]:checked + .toggle-slider {
    background-color: var(--desk1_TOGGLE_BTN_INPUT_CHECKED_TOGGLE_SLIDER_BG);
    border-color: var(--desk1_TOGGLE_BTN_INPUT_CHECKED_TOGGLE_SLIDER_BORDER)
}

.toggle-btn .toggle-slider:before {
	content: "";
	position: absolute;
	border-radius: 100%;
	width: 15px;
	height: 15px;
	top: 50%;
    transform: translate(5px, -50%);
	transition: .3s linear;
	background-color: var(--desk1_BTN_TOGGLE_SLIDER_BEFORE_BG)
}


.toggle-btn input[type=checkbox]:checked + .toggle-slider:before {
	transform: translate(60px, -50%)
}

.toggle-btn .toggle-slider .off {
    width: fit-content;
    margin: auto;
    display: block
}

.toggle-btn .toggle-slider .on {
	width: fit-content;
	margin: auto;
	display: none
}

.toggle-btn input[type=checkbox]:checked + .toggle-slider .on {
	display: block
}

.toggle-btn input[type=checkbox]:checked + .toggle-slider .off {
	display: none
}

/* DATATABLES */
.dataTables_wrapper .dataTables_filter {
	color: var(--desk1_DATATABLES_WRAPPER_FILTER_TXT)
}

.dataTables_wrapper .dataTables_filter input {
	padding: 10px 15px;
    font-size: 12px;
    transition: .3s linear;
    color: var(--desk1_DATATABLES_WRAPPER_FILTER_INPUT_TXT);
	border: 2px solid var(--desk1_DATATABLES_WRAPPER_FILTER_INPUT_BORDER);
	background-color: var(--desk1_DATATABLES_WRAPPER_FILTER_INPUT_BG)
}

.dataTables_wrapper .dataTables_filter input:hover {
	text-decoration: none;
    outline: none;
    box-shadow: none;
	border: 2px solid var(--desk1_DATATABLES_WRAPPER_FILTER_INPUT_HOVER_BORDER)
}

.dataTables_wrapper .dataTable {
	width: 100% !important;
	border: none
}

.dataTables_wrapper .dataTable thead tr td {
	text-transform: uppercase;
    font-weight: 500;
    border: none;
	color: var(--desk1_DATATABLES_WRAPPER_THEAD_TR_TD_TXT) ;
	background-color: var(--desk1_DATATABLES_WRAPPER_THEAD_TR_TD_BG);
}

.dataTables_wrapper .dataTable tbody tr td {
	color: var(--desk1_DATATABLES_WRAPPER_TBODY_TR_TD_TXT);
    border-bottom: 1px solid var(--desk1_DATATABLES_WRAPPER_TBODY_TR_TD_BORDER);
	background-color: var(--desk1_DATATABLES_WRAPPER_TBODY_TR_TD_BG);
}
	
.dataTables_wrapper .dataTable tbody tr:last-child td {
    border-bottom: none
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
    border-radius: 5px;
	transition: .3s ease-out 0s;
	color: var(--desk1_DATATABLES_WRAPPER_PAGINATE_BUTTON_TXT) !important;
    border: 2px solid var(--desk1_DATATABLES_WRAPPER_PAGINATE_BUTTON_BORDER) !important;
    background: var(--desk1_DATATABLES_WRAPPER_PAGINATE_BUTTON_BG) !important
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button:active,
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
	color: var(--desk1_DATATABLES_WRAPPER_PAGINATE_BUTTON_HOVER_TXT) !important;
	background: var(--desk1_DATATABLES_WRAPPER_PAGINATE_BUTTON_HOVER_BG) !important;
	box-shadow: none
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
	border: 2px solid var(--desk1_DATATABLES_WRAPPER_PAGINATE_BUTTON_DISABLED_HOVER_BORDER) !important;
	background: var(--desk1_DATATABLES_WRAPPER_PAGINATE_BUTTON_DISABLED_HOVER_BG) !important
}

/* MODAL */
.modal {
	background-color: var(--desk1_MODAL_BG);
}

.modal .modal-content {
	background-color: var(--desk1_MODAL_MODAL_CONTENT_BG);
}
	

.modal .modal-content .modal-header {
    position: relative;
    border-bottom: none;
    gap: 5px;
    min-height: 50px;
    color: var(--desk1_MODAL_HEADER_TXT);
    background: var(--desk1_MODAL_HEADER_BG);
    width: auto;
    height: auto;
    z-index: 0
}

.modal .modal-content .modal-header .title {
	font-size: 1rem;
    font-weight: 500;
    text-transform: uppercase
}

.modal .modal-content .modal-body {
	border-radius: 0 0 5px 5px;
    color: var(--desk1_MODAL_BODY_TXT);
    background: var(--desk1_MODAL_BODY_BG)
}

/* CAROUSEL BULLETS */
.carousel .carousel-indicators {
	justify-content: flex-end
}

.carousel-indicators li {
	width: 15px;
    height: 15px;
    border-radius: 100%;
    opacity: 1;
    background-color: var(--desk1_CAROUSEL_INDICATORS_LI_BG);
    box-shadow: inset 0 0 4px 1px var(--desk1_CAROUSEL_INDICATORS_LI_BOX_SHADOW);
}

.carousel-indicators .active {
	background-color: var(--desk1_CAROUSEL_INDICATORS_ACTIVE_BG);
    box-shadow: inset 0 0 0 0 var(--desk1_CAROUSEL_INDICATORS_ACTIVE_SHADOW)
}

/* BORDER */
.box-border {
	position: relative;
	margin: 1rem 0;
	padding: 0;
	border-radius: 3px;
    background-color: var(--desk1_BOX_BORDER_BG)
}

.box-border.labeled {
	margin: 3rem 0 1rem
}
.box-border h3,
.box-border .h3 {
    margin: 0;
    padding: 1rem 5rem 1rem 25px;
    font-size: 1rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 3px 3px 0 0;
    color: var(--desk1_BOX_BORDER_H3_TXT);
    background-color: var(--desk1_BOX_BORDER_H3_BG);
}

/* SLICK */
.slick- {
	height: fit-content
}

.slick-prev,
.slick-next {
	width: 40px;
    height: 40px;
    top: -40px;
    transform: translateY(0);
	font-size: 15px;
	z-index: 2;
	color: var(--desk1_SLICK_PREV_NEXT_TXT);
	transition: .2s linear
}
	
.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus {
	font-size: 20px;
	color: var(--desk1_SLICK_PREV_HOVER_TXT)
}

.slick-prev {
	right: 40px;
	left: unset
}

.slick-next {
	right: 0
}

.slick-prev:before,
.slick-next:before {
	content: ""
}

.slick-prev:before,
.slick-prev:hover:before,
.slick-prev:focus:before {
	content: "";
	position: absolute;
	width: 1px;
	height: 30px;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
	opacity: .3;
	background: var(--desk1_SLICK_PREV_BEFORE_HOVER_BG)
}
	

.slick-layer.gap {
	margin: 1rem 10px
}

.slick-dots li {
	width: 50px;
	height: 5px	
}

.slick-dots li button {
	width: 100%;
    height: 100%;
    padding: 0;
    opacity: .5;
    transition: .3s ease-in-out;
    background: var(--desk1_DOTS_LI_BUTTON_BG)
}

.slick-dots li button:hover,
.slick-dots li button:focus,
.slick-dots li.slick-active button,
.slick-dots li.slick-active button:focus {
    opacity: 1
}

.slick-dots li button:before,
.slick-dots li button:focus:before,
.slick-dots li.slick-active button:before,
.slick-dots li.slick-active button:focus:before {
	width: 0;
	height: 0;
	color: var(--desk1_SLICK_DOTS_LI_BUTTON_BEFORE_ACTIVE_TXT);
	background: var(--desk1_SLICK_DOTS_LI_BUTTON_BEFORE_ACTIVE_BG);
}

.slick-arrow {
	position: absolute;
    top: 50%;
    right: 5px;
    transform: translateY(-50%)
}

.slick-arrow button {
	position: relative;
    width: 25px;
    top: unset;
    transform: unset;
    padding: 0;
    color: var(--desk1_SLICK_ARROW_BUTTON_TXT);
    background: var(--desk1_SLICK_ARROW_BUTTON_BG);
    border: none
}

.slick-arrow button:first-child:after {
	content: "";
	position: absolute;
	right: -5px;
    width: 1px;
    height: 100%;
    background: var(--desk1_SLICK_ARROW_BUTTON_AFTER_BG)
}


.slick-arrow:first-child {
	justify-content: left
}

.slick-arrow:last-child {
	justify-content: right
}

/* CUSTOM CAROUSEL */
.carousel-container {
	position: relative;
	width: 1100px;
    margin: 0 auto
}

.carousel-container .inner-carousel {
	width: 100%;
	overflow: hidden
}

.carousel-container .track {
	display: inline-flex;
	height: fit-content;
	transition: transform .2s ease-in-out
}

.carousel-container .item-container {
	flex-shrink: 0
}

.carousel-container .paddle.disabled {
	display: none
}

.carousel-container .paddle button {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	font-size: 2rem;
	transition: .2s ease-in-out;
    color: var(--desk1_CAROUSEL_CONTAINER_BUTTON_TXT);
    border: none;
    background: var(--desk1_CAROUSEL_CONTAINER_BUTTON_BG)
}

.carousel-container .paddle button:disabled {
	filter: brightness(.5);
	-webkit-filter: brightness(.5)
}

.carousel-container .paddle .prev {
	left: -35px;
}

.carousel-container .paddle .next {
	right: -35px
}

/* FREE CREIDT FLOATING*/
.freecredit-wrap {
    position: fixed;
    width: 130px;
    height: 130px;
    bottom: 15%;
    left: 15px;
    z-index: 99;
}

.minigame-wrap {
    position: fixed;
    width: 130px;
    height: 300px;
    bottom: 15%;
    left: 15px;
    z-index: 99;
}

.freecreditCloseBtn,
.miniGameCloseBtn {
	margin-left: 120px;
}

.freecredit-wrap .freecreditCloseBtn #btn-freecredit-close,
.minigame-wrap .miniGameCloseBtn #btn-minigame-close{
	position: absolute;
    border-radius: 25px;
    color: var(--desk1_FREECREDIT_WRAP_BTN_FREECREDIT_CLOSE_MINIGAME_WRAP_CLOSEBTN_TXT);
    background-color: var(--desk1_FREECREDIT_WRAP_BTN_FREECREDIT_CLOSE_MINIGAME_WRAP_CLOSEBTN_BG);
    width: 1.5625rem;
    height: 1.5625rem;
    z-index: 2;
    top: 0;
}

.freecredit-wrap a img,
.minigame-wrap a img {
    animation: popping 2s ease-in-out infinite;
}

@-webkit-keyframes popping {
    0% {
        width: 100%
    } 50% {
        width: 115%
    } 100% {
        width: 100%
    }
}
/* FREE CREIDT FLOATING*/

/* VERIFY TIPS */
.member-day-data li {
    margin-bottom: 0;
    border-right: 1px solid var(--desk1_MEMBER_DAY_DATA_LI_BORDER);
    text-align: left;
}

.verify-tips {
	position: relative;
    padding: 0.9375rem 1.25rem;
    border: 1px solid var(--desk1_VERIFY_TIPS_BORDER);
    background-color: var(--desk1_VERIFY_TIPS_BG);
    box-shadow: 0 2px 4px var(--desk1_VERIFY_TIPS_BOX_SHADOW);
}

.verify-tips label::before {
	content: "";
    display: inline-block;
    margin-right: 0.3125rem;
    vertical-align: sub;
    width: 0.1875rem;
    height: 1.25rem;
    border-radius: 0.1875rem;
    background: var(--desk1_VERIFY_TIPS_LABEL_BEFORE_BG);
    color: var(--desk1_VERIFY_TIPS_LABEl_BEFORE_TXT);
}

.info-contact label {
    color: var(--desk1_INFO_CONTENT_LABEL_TXT);
}

.tips-title-box {
    justify-content: space-between;
    margin-bottom: 10px;
}

.tips-title-box h6 {
    flex: 1;
    justify-content: flex-start;
    width: 100%;
    font-size: .9375rem;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    font-weight: 100;
}

.tips-info.verify-tips ul {
    padding-left: 0;
    list-style: none;
    display: inline-block;
    width: 100%;
    font-size: .8125rem;
    text-align: left;
    vertical-align: top;
}

.info-contact li {
	display: inline-block;
    margin: 0 0.3125rem 0.3125rem 0;
    padding: 0.1875rem 0.625rem;
    border-radius: 15px;
    vertical-align: middle;
    cursor: pointer;
}

.info-contact li {
    background: var(--desk1_INFO_CONTACT_LI_BG);
    color: var(--desk1_INFO_CONTACT_LI_TXT);
}
/* VERIFY TIPS */

/* SECURITY LEVEL */
.right-overview-area {
	display: inline-block;
    vertical-align: middle;
    position: relative;
    width: 74%;
    text-align: right;
}

.verify-phone {
	display: inline-block;
    width: 1.5625rem;
    height: 1.5625rem;
    margin-top: -0.6875rem;
    border-radius: 100%;
    opacity: .5;
    text-decoration: none;
    cursor: pointer;
	line-height: 1.2;
    word-wrap: break-word;
}

.verify-phone::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: var(--desk1_VERIFY_PHONE_BEFORE_BG);
}


.verify-phone::before {
    -webkit-mask: url('/resources/images/icons/theme1/icon-phone-white.svg') no-repeat center/40%;
    mask: url('/resources/images/icons/theme1/icon-phone-white.svg') no-repeat center/40%
}

.status-verify-no .verify-phone:hover {
    opacity: 1;
}

.status-verify-no {
    animation: verifyState .3s ease-in-out alternate-reverse infinite;
    background: var(--desk1_STATUS_VERIFY_NO_BG);
}

.status-verify-no.gray {
    animation: unset !important;
    cursor: default !important;
    background: var(--desk1_STATUS_VERIFY_NO_GRAY_BG);
}

@-webkit-keyframes verifyState {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1
    }

    to {
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
        opacity: .5
    }
}

@keyframes verifyState {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1
    }

    to {
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
        opacity: .5
    }
}
/* SECURITY LEVEL */

/* VERIFY MODAL */
.btn-vcode {
    position: absolute;
    z-index: 2;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    padding: 0 1.25rem;
    font-size: .8125rem;
    line-height: 0;
    cursor: pointer;
}

.btn-vcode p span {
    display: none;
    width: 3px;
    height: 3px;
    margin-left: 3px;
    border-radius: 50%;
    background-color: var(--desk1_BTN_VCODE_P_SPAN_BG)
}


.btn-vcode.active {
    padding: 0;
    -webkit-animation: btnmove .4s forwards ease-in;
    animation: btnmove .4s forwards ease-in
}

.btn-vcode.active .line {
    -webkit-animation: none;
    animation: none;
    opacity: 0
}

.btn-vcode.active.sending {
    overflow: auto;
    opacity: 0
}

.btn-vcode p, .btn-vcode>i, .sms-svg-group {
    display: inline-block;
    vertical-align: middle;
}

.btn-vcode p, .btn-vcode>i {
    text-align: center;
}

.sms-svg-group {
    position: relative;
    width: auto;
    height: 100%;
}

.svg-mail-group {
    width: 1.875rem;
    height: 100%;
}

.svg-mail-group .line {
    position: absolute;
    top: 50%;
    left: -13px;
    width: 0.75rem;
    padding: 0;
    -webkit-transform: translateY(-49%);
    transform: translateY(-49%);
}

.svg-mail-group .line li {
    width: 100%;
    height: 2px;
    margin: 1px 0;
    padding: 0;
    float: right;
    border-radius: 3px;
    background: var(--desk1_SVG_MAIL_GROUP_LINE_LI_BG);
}

.svg-mail-group .line li:first-child {
    width: 70%;
    animation: smsAct .3s alternate-reverse infinite;
}

.svg-mail-group .line li:nth-child(2) {
    animation: smsAct .3s .1s alternate-reverse infinite;
}

.svg-mail-group .line li:last-child {
    width: 50%;
    animation: smsAct .3s .2s alternate-reverse infinite;
}

@-webkit-keyframes smsAct {
    0% {
        -webkit-transform: translate(0,0);
        transform: translate(0,0)
    }

    to {
        -webkit-transform: translate(5px,0);
        transform: translate(5px,0)
    }
}

@keyframes smsAct {
    0% {
        -webkit-transform: translate(0,0);
        transform: translate(0,0)
    }

    to {
        -webkit-transform: translate(5px,0);
        transform: translate(5px,0)
    }
}

@keyframes mail {
    0% {
      opacity: 1;
      transform: translateX(0);
    }
    to {
      opacity: 0;
      transform: translateX(100%);
    }
}

.btn-vcode.active {
    padding: 0;
    -webkit-animation: btnmove .4s forwards ease-in;
    animation: btnmove .4s forwards ease-in
}

.btn-vcode.active .line {
    -webkit-animation: none;
    animation: none;
    opacity: 0
}

.btn-vcode p {
    padding: 0;
    color: var(--desk1_BTN_VCODE_P_TXT);
    font-size: 1rem;
    line-height: 2.5rem;
}

.form-group .countTimer,
.form-group .resendOTP {
	position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    cursor: pointer;
}

.form-group .resendOTP .resend-otp-field {
    text-decoration: underline;
}

.form-group .btn-g.disable {
	background: var(--desk1_FORM_GROUP_BTN_G_DISABLE_BG);
    pointer-events: none;
}

/* VERIFY MODAL */


/* color css */
.tips-title-box h6 {
	color: var(--desk1_TIPS_TITLE_BOX_H6_TXT);
}

#btn-verify-remark-close {
	color: var(--desk1_BTN_VERIFY_REMARK_CLOSE)
}

.verified, .text-verified {
    color: var(--desk1_VERIFIED_TEXT_VERIFIED_TX) !important;
}

#verifyMobile {
    border-color: var(--desk1_VERIFY_MOBILE_BORDER);
    color: var(--desk1_VERIFY_MOBILE_TXT);
    background: var(--desk1_VERIFY_MOBILE_BG);
}

/* VERIFY MODAL */
.btn-2nd {
    background: var(--desk1_BTN_2ND_BG);
    background-position: 50%0;
    background-size: 200%;
    box-shadow: var(--desk1_BTN_BOX_SHADOW);
    color: var(--desk1_BTN_BOX_TXT);
}

.btn-2nd:hover {
    background-position: 0 0;
    box-shadow: var(--desk1_BTN_2ND_HOVER_BOX_SHADOW);
    color: var(--desk1_BTN_2ND_HOVER_TXT);
    text-shadow: 0 1px 3px var(--desk1_BTN_2ND_HOVER_SHADOW);
}

.resend-otp-field {
	color: var(--desk1_RESEND_OTP_FIELD_TXT);
}

#mobile-num-tab-list .form-group .col-form-label {
    text-transform: none !important;
    color: var(--desk1_MOBILE_NUM-TAB_LIST_FORM_GROUP_COL_FORM_LABEL_TXT);
}

.visibleIcon, .copyIcon {
	color: var(--color1);
}