:root {
  --allImg: 2; /*slide img*/
  --imgHeight: calc(100% * var(--allImg));
}

html, body {
    background-color: #2c006a;
    /* height: 100vh; */
}

body{        
    padding-top: 80px;
    padding-bottom: 80px;
}

.fixed-header, .fixed-footer{
    width: 100%;
    position: fixed;        
}
.fixed-header{
    top: 0;
}
.fixed-footer{
    bottom: 0;
} 

h1 {
	font-size: 1.5rem;
}
p{
    margin-top: 0;
    margin-bottom: 0rem;
}

.-m-header {
    /* position: fixed; */
    display: block;
    /* top: 0;
    left: 0;
    right: 0;
    padding: 0px 0px;
    z-index: 900; */
    height: 65px;
    /* background-color: #222; */
}

.-m-footer {
    background-color: white;
    color: #a60000;
    position: fixed;
    z-index: 999;
}

/* input */
.modal-input {
    position: relative;
    margin: 10px 0px;
}

.-m-form-control {
    color: #AAA;
    background-color: #480d42;
    border-radius: 0px;
    width: 100%;
    font-size: 1rem;
    border: none;
    padding-left: 50px;
    height: calc(2.5em + 0.5rem);
    /* font-family: 'Noto Sans Thai'; */
}
.-m-form-control1 {
    color: #AAA;
    background-color: #3f1717;
    border-radius: 0px;
    width: 100%;
    font-size: 1rem;
    border: none;
    padding-left: 50px;
    height: calc(2.5em + 0.5rem);
    /* font-family: 'Noto Sans Thai'; */
}
.input-icon1 {
    position: absolute;
    width: 30px;
    top: 18px;
    left: 15px;
    text-align: center;
    color: #fdff07;
}

.input-icon {
    position: absolute;
    width: 30px;
    top: 18px;
    left: 15px;
    text-align: center;
    color: #ff4ef9;
}

.input-red {
    display: block;
    width: 100%;
    border-left: 3px solid #ff4ef9;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    border-bottom: 1px solid #000;
    box-sizing: border-box;
    /* padding: 10px 40px 10px 50px; */
}
.input-red1 {
    display: block;
    width: 100%;
    border-left: 3px solid #ff4e4e;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    border-bottom: 1px solid #b00;
    box-sizing: border-box;
    /* padding: 10px 40px 10px 50px; */
}
.input-red1:focus {
    border: none;
    border-left: 3px solid #10010f;
    color: #fff;
    background-color: #370202;
    box-shadow: 0 0 1pt 3pt #e44d22;
}

.input-red:focus {
    border: none;
    border-left: 3px solid #ff4ef9;
    color: #fff;
    background-color: #260000;
    box-shadow: 0 0 1pt 3pt #ff4ef9;
}
/* input */


.btn-play {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background-color: var(--color-secondary);
    color: #fff;
    margin: -25px auto;
    font-size: 3rem;
    z-index: 999;
    position: relative;
}

.btn-play img {
	animation-name: rotate;
    animation-duration: 30s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
@keyframes rotate{
    from{ transform: rotate(-360deg); }
    to{ transform: rotate(360deg); }
}

.profile-img {
    border-radius: 50%;
    height: 40px;
}

.-m-header-bg {
    background-color: #222;
}

.-m-menu-icon {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #323232;
    color: #e95c5c;
}

.-m-text-color32 {
    color: #323232;
}

.-m-text-colore95 {
    color: #e95c5c;
}

.account-box {
	max-width: 550px;
}

.account-header {
    /* display: flex;
    flex-grow: 1;
    flex-wrap: wrap; */
	font-family: 'Noto Sans Thai', sans-serif;
    background-color: #871414;
	color: var(--color-secondary);
    padding: 15px;
	padding-top: 8px;
    border-radius: 20px;
    background: linear-gradient(325deg,hsl(var(--color-primary-h),var(--color-primary-s),calc(var(--color-primary-l) + 8%)) 30%,hsl(var(--color-primary-h),var(--color-primary-s),calc(var(--color-primary-l) + 30%)));
}
.account-header1 {
    /* display: flex;
    flex-grow: 1;
    flex-wrap: wrap; */
	font-family: 'Noto Sans Thai', sans-serif;
    background-color: #871414;
	color: #fff;
    padding: 15px;
	padding-top: 8px;
    border-radius: 20px;
    background: linear-gradient(0.25turn, #770202, #db3d12, #f19502);
    /*background: linear-gradient(325deg,hsl(var(--color-primary-h),var(--color-primary-s),calc(var(--color-primary-l) + 8%)) 30%,hsl(var(--color-primary-h),var(--color-primary-s),calc(var(--color-primary-l) + 30%)));*/
}
.account-header1 hr{
	margin-bottom: 5px;
}
.account-header1 h6{
	color: #F4F4F4;
}
.account-header1 .comment{
	font-size: 0.8em;
    color: black;
    display: block;
	background-color: var(--color-primary-light);
	border-radius: 8px;
	padding: 5px;
}
.account-header hr{
	margin-bottom: 5px;
}
.account-header h6{
	color: #F4F4F4;
}
.account-header .comment{
	font-size: 0.8em;
    color: black;
    display: block;
	background-color: var(--color-primary-light);
	border-radius: 8px;
	padding: 5px;
}
.bank-logo {
    width: 30px;
    filter: brightness(100%);
}
#creditPlayer {
	color: #ffba00;
}
#member-name {
	font-size: 1.1em;
	text-overflow: ellipsis;
  	overflow: hidden;
	white-space: nowrap;
}
#menu-user-money{
    position: fixed;
    z-index: 60;
    display: flex;
    justify-content: center;
	cursor: pointer;
    bottom: -70px;
    width: 100%;
    max-width: 500px;
    padding: 0px 10px;
    -webkit-transition: 0.5s ease-in-out;
   -moz-transition: 0.5s ease-in-out;
   -o-transition: 0.5s ease-in-out;
   transition: 0.5s ease-in-out;
}
#menu-user-money .money-menu{
    font-family: 'Noto Sans Thai', sans-serif;
    display: flex;
    flex-grow: 1;
    background-color: #dd1c1e;
    padding: 10px 5px;
    text-align: center;
    justify-content: center;
    font-size: 1.2rem;
}
#menu-user-money .money-menu a{
    width: 100%;
}
#menu-user-money .money-menu:first-child{
      border-top-left-radius: 20px;			 
}
#menu-user-money .money-menu:last-child{
      border-top-right-radius: 20px;			 
}

#moneyDiv {
    background-color: #282828;
    border-radius: 10px;
}
#main-content{
	margin-bottom: 80px;
}
#top-menu {
	flex-wrap: nowrap;
	max-width: 550px;
	margin:auto;
	padding-left: 10px;
	padding-right: 10px;
}
#top-menu > div > div{
    font-size: 0.8em;
    color: #9d9d9d;
    border-radius: 10px;
    position: relative;
    margin-top: -7px;
    border: solid 1px #484848;
    background-color: #000000;
	margin-left: 0.1em;
	margin-right: 0.1em;
}
.list-group-item.active {
    background-color: #480d42;
    border-color: #480d42;
    color: #ff4ef9;
}
.list-group-item.active1 {
    /*background-color: #480d42;*/
    background: linear-gradient(0.25turn, #aa060a, #cd6a04, #aa060a);
    border-color: #480d42;
    color: #fff;
}
.main-icon{
	width: 90%;
}
.main-icon1{
	width: 90%!important;
}
.box-rank img{
	height: 50px;
	cursor: pointer;
}
.box-life {
	font-size: 0.8em;
	color: #E2E2E2;
	font-weight: 800;
}
.box-life img{
	width: 30px;
}
.box-life span{
	color: #FF6C6F;
}

.box-slide{
    margin-top: 0.3em;
    margin-bottom: 0.3em;
    overflow: hidden;
    border-radius: 8px;
    width: 100%;
	max-width: 800px;
	max-height: 250px;
	aspect-ratio: 9/3;
}

.box-slide .slide-img{
	width: auto;
    height: auto;
    max-width: 100%;
    position: relative;
	aspect-ratio: 9/3;
    -webkit-animation: slide-down 15s infinite;
    -moz-animation: slide-down 15s infinite;
    animation: slide-down 15s infinite;
}

@keyframes slide-down{   
  0%,100%{top:calc(100% * -1);}
  50%,100%{top:calc(100% * -1);}
  60%{top: calc(100% * 0);}
  95%{top: calc(100% * 0);}
} 

.-m-footer .container{
	max-width: 550px;
}
.-m-footer .container .h3{
	margin-bottom: 0px;
}
.img-promotion {
    width: 90%;
}
.bg-secondary{
	background-color: #363636!important;
}
.on-cursor {
    cursor: pointer;
}

.radio-container {
    padding: 5px;
}

.radio-container:hover {
    border: #EBAC3B 1px solid;
    border-radius: 15px;
}

.nav-icn-game .game-icon img{
	display: block;
	width: 100%;
	height: 100%;
}
.nav-link {
	padding: 0;
}
.btn-money {
    font-weight: 600;
    color: #b9b9b9;
    font-size: 0.9em;
    width: 80px;
    margin: 5px;
	padding: 5px;
    text-align: center;
    background-color: #ff4ef9;
    border-radius: 15px;
	border: none;
}
.btn-money1 {
    font-weight: 600;
    color: #b9b9b9;
    font-size: 0.9em;
    width: 80px;
    margin: 5px;
    padding: 5px;
    text-align: center;
    background-color: #584eff;
    border-radius: 15px;
    border: none;
}
.btn-money1:focus {
    color: #FFF;
    border: none;
	background-color: #6B0001;
}

.btn-money:focus {
    color: #FFF;
    border: none;
	background-color: #6B0001;
}

.moneyInputDiv {
    border-radius: 10px;
}

.btn-main {
    display: flex;
    font-family: 'Noto Sans Thai', sans-serif;
    font-weight: 600;
    justify-content: center;
    align-items: center;
    min-width: 80px;
    height: 30px;
    margin: 0 0 0 0.4rem;
    padding: 0.85rem 0.7rem;
    font-size: 1rem;
    line-height: 1;
    letter-spacing: 0.8px;
    border-radius: 22px;
    border-style: solid;
    border-width: 2px;
    cursor: pointer;
}

.btn-red {
    background-color: #ff00e5;
    border-color: #8200c3;
    color: white;
}
.btn-white {
    color: #4000c3;
    background-color: #EBEBEB;
    border-color: transparent;
}
.btn-danger {
    color: #FFFFFF;
    background-color: #dc3545;
    border-color: #920815;
}
.btn-white a:link,.btn-white a:visited,.btn-white a:hover,.btn-white a:active {
	text-decoration: none;
    color: #8200c3;
}
.btn-red a:link,.btn-red a:visited,.btn-red a:hover,.btn-red a:active {
	text-decoration: none;
	color: #EBEBEB!important;
}

.swal2-popup {
    background-color: #222;
}

.noti-detail {
    display: flex;
    flex-wrap: wrap;
    flex-grow: 1;
    justify-content: center;
    color: #606060;
    border-bottom: thin solid #4b006d;
    padding: 5px;
    margin: 8px 0px;
}
.swal2-popup {
    background-color: #dfdfdf;
    color: #140707;
}
	.noti-body .text-header{
		font-size: 0.9em;
	}
	.noti-header h4{ 
		font-size: 1.2em;
		color: #4b006d; 
	}
	.noti-header hr{
		margin: 5px;
		color: #4b006d;
		opacity: 1;
	}
	.noti-detail {
		font-size: 0.8em;
	}
	.noti-date{
		font-size: 0.9em;
		text-align: left;
		color: #4b006d;
	}
.text-xs {
	font-size: 0.7em;
}
.text-15em{
	font-size: 1.5em;
}
#creditS {
	font-size: 3em;
	font-weight: 600;
}
.main-text-color {
	color: var(--color-primary);
}
.comment {
	font-size: 0.8em;
    background-color: #fff;
    color: #000000;
    border-radius: 8px;
    padding: 3px;
}
/* layout */
.pr-5 {
	padding-right: 5px;
}
.pr-10 {
	padding-right: 10px;
}
.pr-15 {
	padding-right: 15px;
}
.pl-5 {
	padding-left: 5px;
}
.pl-10 {
	padding-left: 10px;
}
.pl-15 {
	padding-left: 15px;
}
.ml-5 {
	margin-left: 5px;
}
.mr-5 {
	margin-right: 5px;
}

.max-content {
	width: max-content;
}
.max-w550 {
	max-width: 550px;
}
.max-w400 {
	max-width: 400px;
}

@media screen and (min-width:768px) {
	.bank-logo {
		width: 50px;
	}
}