html,body{
	max-width: 520px;
    overflow-x: hidden !important;
}

body{
	position: relative;
	background-image: url("777.avif");
    background-size: cover;
  background-attachment: fixed;
    background-repeat: no-repeat;
	padding: 0!important;
	
}

main {
	position: relative;
	height: 100%;
	background-position: 0px 0px;
    background-image: url(https://0e6302-726-ppp.oss-accelerate.aliyuncs.com/siteadmin/skin/lobby_asset/2-1-5/common/common/bg_pattern_tile.png?manualVersion=1&version=ec6dd18a58);
    background-size: revert;
    overflow: hidden;
}

.form-control::placeholder {
  color: #fff;
  opacity: 0.4; /* Firefox */
}

.form-control::-ms-input-placeholder { /* Edge 12 -18 */
  color: #fff;
}

.scrollbar{
    overflow-x: hidden;
    overflow-y: auto;
    height: 100%;
	padding-top: 4px;
	padding-bottom: 3rem;
}

@media (min-width:576px){
	.container.scrollbar.position-relative::-webkit-scrollbar{
		display:none
	}
}

.scrollbar>div:last-child:not(:first-child){
	margin-bottom: 5rem!important;
}

.owl-theme .owl-dots, .owl-theme .owl-nav {
	position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%) !important;
}

.owl-theme .owl-dots .owl-dot span {
	width: 8px;
    height: 8px;
}
.owl-theme .owl-dots .owl-dot span {
	background: #869791;
}
.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span {
	background: #fff;
}

#ProductGame .item{
	background-image: linear-gradient(180deg, #005CB3, #00529F);
    color: #9DC5E6;
    cursor: pointer;
    position: relative;
    z-index: 0;
    box-shadow: 0 0.15rem 0.2rem rgba(0, 0, 0, 0.15);
}


.scroll-Top {
	position: absolute;
	bottom: 120px;
	right: 0;
	z-index: 1;
	opacity: 0;
	transition: all 0.5s;
	cursor: pointer;
}
.scroll-Top img{
	filter: drop-shadow(0 5px 5px rgba(0, 0, 0, 1));
	animation: scrolltopimg 2s ease infinite;
}

@keyframes scrolltopimg {
  0%{
    transform: translateY(0);
  }
  50%{
    transform: translateY(-1rem);
  }
  100%{
    transform: translateY(0);
  }
}

.contact-us {
	position: absolute;
	bottom: 65px;
	right: 0;
	z-index: 1;
}

.contact-us .dropdown-toggle::after{
	display: none;
}

.contact-us button{
	border: none;
}
.contact-us button img{
	filter: drop-shadow(0 5px 5px rgba(0, 0, 0, 1));
}

.content-mask-center {
    align-items: center;
    animation: gradient-79734756 5s ease infinite;
    background: var(--nav-play-game);
    background-size: 200% 200%;
    border-radius: 50%;
    bottom: 45%;
	box-shadow: 0 0 20px 0 #3CCFFF, inset 1px 1px 1px 0 hsla(0, 0%, 98%, .6), inset 0 0 0 0 hsla(9, 6%, 79%, .5);
    cursor: pointer;
    display: flex;
    height: auto;
    justify-content: center;
    left: 50%;
    position: absolute;
    transform: translate(-50%, -40%);
    width: auto;
}

.content-mask-center:hover {
	box-shadow: 0 0 40px 0 #3CCFFF, inset 1px 1px 1px 0 hsla(0, 0%, 98%, .6), inset 0 0 0 0 hsla(9, 6%, 79%, .5);
}

.content-mask-center img {
	width: 35px;
	height: 35px;
}

.mobile-menu {
	position: fixed;
    transform: translate(-50%) !important;
    left: 50% !important;
    bottom: 0 !important;
    max-width: 520px;
    width: 100%;
	
	
}

.mobile-menu-content {
	display: flex;
	justify-content: center;
	
	background: linear-gradient(360deg, rgb(6 38 65) 0%, rgb(0 92 167) 53.13%, rgba(0, 115, 209, 1) 100%);
    border-radius: 20px 20px 0 0;

	mask-image: linear-gradient(360deg, rgba(0,0,0,0) 50%, rgba(0,0,0,0) 50%), url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzg0MCIgaGVpZ2h0PSI3MCIgdmlld0JveD0iMCAwIDM4NDAgNzAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0wIDAuODczMDEzQzAgMC44NzMwMTMgMTgxMi4zNCAtMS4wOTEyNyAxODU4LjUgMC44NzMwMTNDMTg4NS45OCAyLjA0MjMxIDE4OTIuOTkgMzUgMTkyMC41IDM1QzE5NDguMDEgMzUgMTk1MS40OSAxLjIxOTY1IDE5NzkgMC44NzMwMTNDMjAyNS4xNiAwLjI5MTI3MyAzODQwIDAuODczMDEzIDM4NDAgMC44NzMwMTNWNzBIMFYwLjg3MzAxM1oiIGZpbGw9InVybCgjcGFpbnQwX2xpbmVhcl82ODVfMjcyMDEpIi8+CjxkZWZzPgo8bGluZWFyR3JhZGllbnQgaWQ9InBhaW50MF9saW5lYXJfNjg1XzI3MjAxIiB4MT0iOS4xNjkxNGUtMDYiIHkxPSI0My4yNzMiIHgyPSIzODM5Ljk5IiB5Mj0iNDguODYxIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+CjxzdG9wIHN0b3AtY29sb3I9IiM3ODEwQUYiLz4KPHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjNDIxRjg3Ii8+CjwvbGluZWFyR3JhZGllbnQ+CjwvZGVmcz4KPC9zdmc+Cg==);
    -webkit-mask-position-x: center;
    -webkit-mask-position-y: center;
}


.mobile-menu-content .mask-center span{
	margin-top: auto !important;
}

.mobile-menu-content .mask-center img{
	display:none;
}

.mobile-menu-content > *{
	padding: .25rem !important;
	padding-bottom: .15rem !important;
}

.mobile-menu-content a{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-items: center;
    color: #fff;
    text-decoration: none;
	height: 55px;
}

.mobile-menu-content a span{
	margin-top: .15rem !important;
}

.mobile-menu-content a img{
	min-height: 35px;
	width: auto;
	height: 35px;
}

.card {
	background-color: var(--theme-body-bg-color);
}

.modal-content {
	background-color: #013D74;
	border: 1px solid #1466AB;
}

.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
	color: #fff;
    background-color: transparent;
	border-color:  transparent;
}

.nav-tabs {
	border-bottom: 1px solid #1466AB;
}

.nav-tabs .nav-item.show .nav-link span, .nav-tabs .nav-link.active span{
	border-color: transparent;
    border-bottom: 3px solid #3CCFFF;
    padding-bottom: 6px;
}

.nav-link:focus-visible {
	box-shadow: none;
}

.nav-tabs .nav-link.active:focus, .nav-tabs .nav-link.active:hover {
    border-bottom: transparent;
}

.nav-tabs .nav-link:focus, .nav-tabs .nav-link:hover {
    border-color: transparent;
}

nav.navbar{
	background-color: #013D74;
	border-bottom: 0.5px solid var(--theme-color-line);
	position: -webkit-sticky;
    position: sticky;
    top: 0;
	z-index: 1;
}

.input-group-text {
	padding: .5rem;
	border-right: transparent!important;
	border: var(--bs-border-width) solid #1466AB;
	background-color: transparent;
}

.input-group .form-control {
	border-left: transparent!important;
	border: var(--bs-border-width) solid #1466AB;
	background-color: transparent;
	padding-left: 0;
}
.input-group .form-select{
	border: var(--bs-border-width) solid #1466AB;
	background-color: transparent;
	padding: .5rem 2.25rem .5rem .75rem;
}

.input-group .form-select option {
	background-color: #013D74;
}

.input-group .form-select option:hover {
	color: #ff0000!important;
    background-color: #024C8C!important;
}

option:hover {
  background-color: #488f8f; 
} 

.input-group .form-control:focus {
	box-shadow: none;
}

.container-bg{
	background-color: #013D74;
	border-radius: .5rem;
	padding: .5rem;
	border: thin solid;
    border-color: #1466AB;
    border-radius: .5rem;
}

.list-fill{
	display: flex;
	height: 100%;
}

.list-group-item:first-child {
	border-top-left-radius: 0;
}

.list-group-horizontal>.list-group-item:not(:last-child) {
	border-right:0;
}

.list-group-horizontal>.list-group-item:last-child:not(:first-child) {
	border-top-right-radius: 0;
}

.list-group-horizontal>.list-group-item.rb-0:last-child:not(:first-child) {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}

.list-group-horizontal>.list-group-item.rb-0:first-child:not(:last-child) {
	border-bottom-left-radius: 0;
}

.list-group-horizontal.bct-0>.list-group-item {
    border-top:0;
}

.list-group-horizontal>.list-group-item+.list-group-item {
	border-top-width: thin;
    border-left-width: thin;
}


.list-fill .list-group-item {
	-webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
	width: 100%;
    padding: 0;
	border: 1px solid #1466AB;
	text-align:center;
	color: #fff;
}

.list-fill > .list-group-item > a{
	display: grid;
	justify-content: center;
	justify-items: center;
	width: 100%;
	height: 100%;
	padding: 0.25rem 0;
	text-align:center;
	align-self:center;
	background-color: var(--theme-body-bg-color);
	cursor: pointer;
	height: 100%;
	-webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
	color: #fff;
    text-decoration: none;
}

.list-fill .list-group-item a:hover {
	color: #2F8DDC;
}

.list-fill .list-group-item a svg, .list-fill .list-group-item a svg path{
	fill: #9DC5E6;
}

.list-fill .list-group-item a:hover svg, .list-fill .list-group-item a:hover svg path {
	fill: #2F8DDC;
}

/* .list-fill .list-group-item { */
	/* display: grid; */
	/* justify-content: center; */
	/* justify-items: center; */
	/* width: 100%; */
	/* padding: 0.25rem 0; */
	/* text-align:center; */
	/* align-self:center; */
	/* background-color: var(--theme-body-bg-color); */
	/* border: 1px solid #1466AB; */
	/* cursor: pointer; */
	/* height: 100%; */
	/* -webkit-appearance:none; */
    /* -moz-appearance:none; */
    /* appearance:none; */
/* } */

/* .list-fill .list-group-item svg, .list-fill .list-group-item svg path{ */
	/* fill: #9DC5E6; */
/* } */

/* .list-fill .list-group-item:hover { */
	/* color: #2F8DDC; */
/* } */
/* .list-fill .list-group-item:hover svg, .list-fill .list-group-item:hover svg path { */
	/* fill: #2F8DDC; */
/* } */

.list-item-box-group div div {
	border-radius: .5rem;
	border-top-width: var(--bs-list-group-border-width);
    border-left-width: thin;
}

.list-item-box-group div:nth-child(1) div {
	border-top-right-radius: 0;
    border-bottom-right-radius: var(--bs-list-group-border-radius);
}

.list-item-box-group div:nth-child(2) div, .list-item-box-group div:nth-child(3) div {
	border-top-left-radius: var(--bs-list-group-border-radius);
    border-top-right-radius: var(--bs-list-group-border-radius);
    border-bottom-left-radius: var(--bs-list-group-border-radius);
    border-bottom-right-radius: var(--bs-list-group-border-radius);
}

.list-item-box-group div:nth-child(4) div {
	border-bottom-left-radius: var(--bs-list-group-border-radius);
	border-top-left-radius: var(--bs-list-group-border-radius);
}

.list-item-box {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: 50px;
	background-color: #013D74;
	width: 100%;
	-webkit-box-sizing: border-box;
    box-sizing: border-box;
	border: 1px solid #1466AB;
}

.btn-theme {
    --bs-btn-color: #fff;
    --bs-btn-bg: #3CCFFF;
    --bs-btn-border-color: #3CCFFF;
    --bs-btn-hover-color: #3CCFFF;
    --bs-btn-hover-bg: rgba(0, 0, 0, 0);
    --bs-btn-hover-border-color: #3CCFFF;
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #3CCFFF;
    --bs-btn-active-border-color: #0a53be;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #3CCFFF;
    --bs-btn-disabled-border-color: #3CCFFF;
	border-radius: 1rem;
}

.btn-theme-outline {
    --bs-btn-color: #3CCFFF;
    --bs-btn-border-color: #3CCFFF;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #3CCFFF;
    --bs-btn-hover-border-color: #3CCFFF;
    --bs-btn-focus-shadow-rgb: 13, 110, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #3CCFFF;
    --bs-btn-active-border-color: #3CCFFF;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #3CCFFF;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #3CCFFF;
    --bs-gradient: none;
	border-radius: 1rem;
}

.container-tabs-boxmenu {
	color: #9DC5E6;
    cursor: pointer;
    height: 1.05rem;
    position: relative;
    width: 1.5rem;
    z-index: 0;
}
#tabsmenu .col-12 .item-boxmenu.active {
	color: #fff;
	background-image: linear-gradient(180deg, #3CCFFF, #008cff);
}

#tabsmenu .col-12 .item-boxmenu.active svg{
	display: none;
}
#tabsmenu .col-12 .item-boxmenu.active img{
	display: block;
}

#tabsmenu .col-12 .item-boxmenu img{
	display: none;
}

#tabsmenu .col-12 .active {
	background-image: linear-gradient(180deg, #12b2e6, #3CCFFF);
}

#tabsmenu .item-boxmenu img {
	width: 62%;
}

#tabsmenu .item-boxmenu img.d-block {
	width: 42%;
}

#tabsmenu a {
	text-decoration:none;
}

.item-boxmenu {
	background-image: linear-gradient(180deg, #005CB3, #00529F);
	color: #9DC5E6;
    cursor: pointer;
    height: 70px;
    position: relative;
    width: 100%;
    z-index: 0;
	box-shadow: 0 0.15rem 0.2rem rgba(0, 0, 0, 0.15);
	border-radius: .5rem;
}
.item-boxmenu:hover {
	color: #2F8DDC;
}
.item-boxmenu:hover svg path {
	fill: #2F8DDC;
}


#listproductname .col .content-item {
	background-color: transparent;
    color: #9DC5E6;
    cursor: pointer;
    border-radius: .5rem;
    position: relative;
    z-index: 0;
    overflow: hidden;
	height: 100%;
	width: 100%;
}

.item-boxmenu-2 {
	background-repeat: no-repeat;
    background-size: contain;
	height: 100%;
	width: 100%;
	color: #9DC5E6;
    cursor: pointer;
    position: relative;
    z-index: 0;
	box-shadow: 0 0.15rem 0.2rem rgba(0, 0, 0, 0.15);
}

.item-boxmenu-2 img{
	width: inherit;
}

.item-boxmenu-2 span{
	text-align: center;
}

@media (max-width:576px){
	.item-boxmenu-2 {
		background-size: contain;
		height: 100%;
		width: 100%;
		color: #9DC5E6;
		cursor: pointer;
		position: relative;
		z-index: 0;
		box-shadow: 0 0.15rem 0.2rem rgba(0, 0, 0, 0.15);
	}
}

.item-boxbody {
	display: contents;
    background-color: var(--theme-body-bg-color);
	border: 1px solid #1466AB;
	border-radius: .5rem;
    color: #9DC5E6;
    position: relative;
    z-index: 0;
    box-shadow: 0 0.15rem 0.2rem rgba(0, 0, 0, 0.15);
    overflow: hidden;
}
.item-boxbody .d-c{
	display: contents;
}
.item-boxbody .badge{
	font-weight: 550;
	line-height: 1;
	padding: 0.45em 0.65em 0.35em 0.65em;
}

.list-group-flush>.list-group-item {
   background-image: linear-gradient(180deg, #3CCFFF, #008cff);
}


.item-boxlist {
	background-color: #0059ac;
    background: linear-gradient(180deg, rgb(29 146 255) 0%, #0059ac 30%, #0059ac 60%, rgba(0, 0, 0, 0.95) 97%);
    color: #9DC5E6;
    cursor: pointer;
    border-radius: .5rem;
    position: relative;
    z-index: 0;
    box-shadow: 0 0.15rem 0.2rem rgba(0, 0, 0, 0.15);
    overflow: hidden;
}

.item-boxlist img{
	max-height: 200px;
}

.item-boxlist span{
	margin-top: .25rem;
	margin-bottom: .25rem;
}

.imgspin {
	animation: 1s linear infinite spinner-border;
}

.content-item-boxmenu-gameproviders{
	background-color: #0059ac;
	background: linear-gradient(180deg, rgb(29 146 255) 0%, #0059ac 30%, #0059ac 60%, rgba(0, 0, 0, 0.95) 97%);
    color: #9DC5E6;
    cursor: pointer;
    border-radius: .5rem;
    position: relative;
    z-index: 0;
    box-shadow: 0 0.15rem 0.2rem rgba(0, 0, 0, 0.15);
	overflow: hidden;
}

.item-boxmenu-gameproviders span{
	width: 95%;
	overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
	font-size: 0.8rem;
	font-weight: bold;
}
@media (max-width:576px){
	.item-boxmenu-gameproviders span{
		font-size: 0.8rem;
        font-weight: 550;
	}
}

.item-boxmenu-gameproviders img{
	filter: drop-shadow(0 4px 2px rgba(0, 0, 0, 1));
	transition: all 0.1s;
	padding-right: .4rem;
    padding-left: .4rem;
}
.item-boxmenu-gameproviders {
	color: #9DC5E6;
    cursor: pointer;
	border-radius: .5rem;
    position: relative;
    z-index: 0;
	text-align:center;
	overflow: hidden;
}

.item-boxmenu-gameproviders:hover,
.item-boxmenu-gameproviders:active,
.item-boxmenu-gameproviders:focus {
	color: #fff;
}

.item-boxmenu-gameproviders:hover img,
.item-boxmenu-gameproviders:active img,
.item-boxmenu-gameproviders:focus img{
	-webkit-transform: scale(1.05);
    transform: scale(1.05);
}

.offcanvas{
	position: absolute;
	background-color: #013D74;
}

.offcanvas-body a.logout{
	background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
	background-color: rgba(0, 115, 209, 1);
}

.offcanvas-body > div.mt-auto{
	padding: 0.5rem 0.7rem;
	border-top: 0.5px solid var(--theme-color-line);
}

.offcanvas-body {
	display: flex;
	flex-direction: column;
    flex-grow: 1;
    padding: 0 0;
	overflow: hidden;
}

.offcanvas-body .scrollbar-content{
	display: flex;
    flex-direction: column;
    flex-grow: 1;
    padding: 1rem 0.7rem;
	overflow-x: hidden;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

.offcanvas-body .scrollbar-content::-webkit-scrollbar {
  display: none;
}

.offcanvas, .offcanvas-lg, .offcanvas-md, .offcanvas-sm, .offcanvas-xl, .offcanvas-xxl {
	position: absolute;
	background-color: #013D74;
	--bs-offcanvas-width: 210px;
}
.offcanvas-backdrop{
	top:57px;
	width:520px;
	position: absolute;
}
.offcanvas.offcanvas-start {
	top:57px;
}

.offcanvas-end {
  opacity: 0;
  pointer-events: none;
  transform: translateX(100%);
  transition: all 0.2s ease;
}
.offcanvas-end.show {
  opacity: 1;
  pointer-events: all;
  transform: translateX(0);
}

.offcanvas-start {
  opacity: 0.5;
  pointer-events: none;
  transform: translateX(-100%);
  transition: all 0.2s ease;
  
  border: 0.5px solid var(--theme-color-line)!important;
  border-top:0!important;
  border-left:0!important;
}
.offcanvas-start.show {
  opacity: 1;
  pointer-events: all;
  transform: translateX(0);
}

.offcanvas-top {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-100%);
  transition: all 0.4s ease;
}
.offcanvas-top.show {
  opacity: 1;
  pointer-events: all;
  transform: translateY(0);
}

.offcanvas-bottom {
  opacity: 0;
  pointer-events: none;
  transform: translateY(100%);
  transition: all 0.4s ease;
}
.offcanvas-bottom.show {
  opacity: 1;
  pointer-events: all;
  transform: translateY(0);
}

.offcanvas-column {
	background-color:rgba(0, 80, 154, 1);
	border-radius: 0.5rem;
}

.offcanvas-column > div{
	
}

.offcanvas-column div a{
	position: relative;
	display:flex;
	cursor: pointer;
	color: #fff;
	text-decoration:none;
	height: 3.4rem;
	border-radius: 0.5rem;
}
.offcanvas-column div a span{
	font-size: 12px;
    margin-left: 0.3rem;
    margin-top: 0.3rem;
    line-height: 1;
	filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .4));
}

.offcanvas-column > div > a{
	
	background: linear-gradient(180deg, rgba(244, 175, 2, 1), rgba(244, 145, 2, 1));
}
.offcanvas-column > div:nth-child(2) > a{
	background: linear-gradient(180deg, rgba(50, 199, 82, 1), rgba(50, 169, 82, 1));
}
.offcanvas-column > div:nth-child(3) > a{
	background: linear-gradient(180deg, rgba(237, 101, 58, 1), rgba(237, 71, 58, 1));
}
.offcanvas-column > div:nth-child(4) > a{
	background: linear-gradient(180deg, rgba(203, 83, 244, 1), rgba(170, 87, 239, 1));
}
.offcanvas-column > div:nth-child(5) > a{
	background: linear-gradient(180deg, rgba(52, 158, 255, 1), rgba(52, 128, 255, 1));
}
.offcanvas-column > div:nth-child(6) > a{
	background: linear-gradient(180deg, rgba(251, 71, 72, 1), rgba(251, 41, 72, 1));
}

.offcanvas-column > div > a > img{
	position: absolute;
	right: 2%;
    bottom: 6%;
	max-width: 37px;
	max-height: 37px;
	width: auto;
	height: auto;
	filter: drop-shadow(0 3px 2px rgba(0, 0, 0, 0.5));
}

.fadeIn {
    visibility: visible;
    opacity: 1;
    transition: opacity 2s linear;
}
.fadeOut {
	visibility: hidden;
	opacity: 0;
	transition: visibility 0s 2s, opacity 2s linear;
}
.fade {
    opacity: 0;
    transition: opacity .10s linear;
}
.fade.show {
    opacity: 1;
}
.modal {
    transition: all 0.2s ease;
}
.modal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: none;
    overflow: hidden;
    outline: 0;
}
.modal-backdrop {
	
}
.modal-backdrop.fade {
    opacity: 0
}
.modal-backdrop.show {
    opacity: .8
}
.offcanvas-backdrop.fade {
    opacity: 0
}
.offcanvas-backdrop.show {
    opacity: .6
}
.modal.fade .modal-dialog {
	transition: -webkit-transform .2s ease-out;
    transition: transform .2s ease-out;
    transition: transform .2s ease-out, -webkit-transform .2s ease-out;
    -webkit-transform: translate(0, -25%);
    transform: translate(0, -25%);
}
.modal.show .modal-dialog{
	-webkit-transform: translate(0, 0);
    transform: translate(0, 0);
}


.modal .modal-body .badge.bg-danger {
	--bs-bg-opacity: 0.7;
	--bs-badge-font-weight: 500;
	font-size: .875em;
}


.btn-default {
    --bs-btn-color: #fff;
    --bs-btn-bg: #3CCFFF;
    --bs-btn-border-color: #0d6efd;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #0abdf7;
    --bs-btn-hover-border-color: #0a58ca;
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #0abdf7;
    --bs-btn-active-border-color: #0a53be;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #0d6efd;
    --bs-btn-disabled-border-color: #0d6efd;
	--bs-btn-border-radius: 1rem;
}

.fs-7 {
    font-size: 1rem;
}

.fs-8 {
    font-size: 0.8rem;
}

.fs-9 {
    font-size: 0.85em;
}

@keyframes wobble-horizontal {
  16.65% {
    transform: translateX(8px);
  }
  33.3% {
    transform: translateX(-6px);
  }
  49.95% {
    transform: translateX(4px);
  }
  66.6% {
    transform: translateX(-2px);
  }
  83.25% {
    transform: translateX(1px);
  }
  100% {
    transform: translateX(0);
  }
}

.wobble-horizontal {
  display: inline-block;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  animation-name: wobble-horizontal;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

.wobble-horizontal:hover {
  animation-name: wobble-horizontal;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}


.card-body {
	color:#dee2e6;
}

.text-muted {
    opacity: 1;
    color: rgba(222, 226, 230, 0.75)!important;
}

marquee {
	color: #dee2e6;
}

.navbar > div {
	
}

.alert-warning {
    --bs-alert-color: #ffda6a;
    --bs-alert-bg: #332701;
    --bs-alert-border-color: #997404;
    --bs-alert-link-color: #ffda6a;
}

.item-promotion img {
	max-height: 120px;
}


#listproductname .modal .modal-body {
	max-height: calc(100vh - 200px);
    overflow-y: auto;
}

/* width */
#listproductname .modal .modal-body::-webkit-scrollbar {
  width: 10px;
}

/* Track */
#listproductname .modal .modal-body::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 10px;
}
 
/* Handle */
#listproductname .modal .modal-body::-webkit-scrollbar-thumb {
  background: #ab1414;
  border-radius: 10px;
}

/* Handle on hover */
#listproductname .modal .modal-body::-webkit-scrollbar-thumb:hover {
  background: #ab1414; 
}