/* CSS Document */

@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;600;700&display=swap');
/*@import url('https://fonts.googleapis.com/css2?family=Sarabun:ital,wght@0,100;0,200;0,400;0,500;0,700;1,100;1,400&display=swap');*/

body {
	font-family: 'Kanit', sans-serif;
	/*font-family: 'Sarabun', sans-serif;*/
	background-color: #0C2A34;
	background-image: linear-gradient(225deg, rgba(12, 42, 52, 1) 56%, rgba(14, 7, 10, 1) 100%);
	background-size: cover;
	background-attachment: fixed;
	color: white;
}

a {
	color: #FFF;
	text-decoration: none;
}
a:hover {
	color: red;
	text-decoration: underline;
}

.-glow-container a{
	text-decoration:none;
	transition:all .5s;
}
.-glow-container a.-btn-glow{
	-webkit-animation:neon4 1.5s ease-in-out infinite alternate;
	animation:neon4 1.5s ease-in-out infinite alternate;
}
.-glow-container a.-btn-glow-register{width:180px;background:#fff;border-radius:10px;-webkit-animation:neon-register 1.5s ease-in-out infinite alternate;animation:neon-register 1.5s ease-in-out infinite alternate}
@media (max-width:991.98px){.-glow-container button{text-decoration:none;transition:all .5s}
.-glow-container button.-btn-glow{-webkit-animation:neon4 1.5s ease-in-out infinite alternate;animation:neon4 1.5s ease-in-out infinite alternate}
}
@-webkit-keyframes neon4{0%{box-shadow:0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ecbd7b, 0 0 70px #ecbd7b, 0 0 80px #ecbd7b, 0 0 100px #ecbd7b, 0 0 150px #ecbd7b}
to{box-shadow:0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #ecbd7b, 0 0 35px #ecbd7b, 0 0 40px #ecbd7b, 0 0 50px #ecbd7b, 0 0 75px #ecbd7b}
}
@keyframes neon4{0%{box-shadow:0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ecbd7b, 0 0 70px #ecbd7b, 0 0 80px #ecbd7b, 0 0 100px #ecbd7b, 0 0 150px #ecbd7b}
to{box-shadow:0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #ecbd7b, 0 0 35px #ecbd7b, 0 0 40px #ecbd7b, 0 0 50px #ecbd7b, 0 0 75px #ecbd7b}
}
@-webkit-keyframes neon-register{0%{box-shadow:0 0 5px #fff, 0 0 8px #fff, 0 0 10px #fff, 0 0 13px #3f9e98, 0 0 16px #3f9e98, 0 0 28px #3f9e98, 0 0 36px #3f9e98, 0 0 44px #3f9e98}
to{box-shadow:0 0 2px #fff, 0 0 5px #fff, 0 0 8px #fff, 0 0 10px #3f9e98, 0 0 8px #3f9e98, 0 0 14px #3f9e98, 0 0 18px #3f9e98, 0 0 22px #3f9e98}
}
@keyframes neon-register{0%{box-shadow:0 0 5px #fff, 0 0 8px #fff, 0 0 10px #fff, 0 0 13px #3f9e98, 0 0 16px #3f9e98, 0 0 28px #3f9e98, 0 0 36px #3f9e98, 0 0 44px #3f9e98}
to{box-shadow:0 0 2px #fff, 0 0 5px #fff, 0 0 8px #fff, 0 0 10px #3f9e98, 0 0 8px #3f9e98, 0 0 14px #3f9e98, 0 0 18px #3f9e98, 0 0 22px #3f9e98}
}

.x-btn-image{display:inline-block}
.x-btn-image.-hoverable>img{max-width:100%;height:auto}
.x-btn-image.-hoverable .-hover{display:none}
@media (min-width:992px){.x-btn-image.-hoverable:hover .-default{display:none}
.x-btn-image.-hoverable:hover .-hover{display:inline-block}
}






.error {
	color: red;
	margin: 0;
	padding-top: 10px;
}
.scbbg {
	background-color: #5d3f9a;
}
.kbankbg {
	background-color: #2EC04D;
}
.ktbbg {
	background-color: #35acdf;
}
.bblbg {
	background-color: #0a41b7;
}
.ttbbg {
	background-color: #f68b20;
}


#loginpane {
	max-width: 400px;
	margin: 0 auto;
	padding-top: 5%;
	padding-left: 15px;
	padding-right: 15px;
}

#registerpane {
	max-width: 800px;
	margin: 0 auto;
	padding-top: 10%;
	padding-left: 15px;
	padding-right: 15px;
}

.input-group-prepend-modify {
	background-color: transparent;
	border-color: transparent;
	color:#FFF;
}

.input-form-control-modify,
.input-form-control-modify:focus{
	border-color: #fff0;
    outline: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
    background-color: #fff0;
    color: #fff;
    border-bottom: 1px solid #b0863d;
}
.select-style,
.select-style:focus {
	border-color: #fff0;
    outline: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
    background-color: #fff0;
    color: #fff;
    border-bottom: 1px solid #b0863d;
}
.select-style option {
    background-color:#000;
    color: #fff;
	border-color: #000;
}

@media(min-width:1281px) {
	#loginpane {
		width:30%;
		padding-top: 5% !important;
	}
	#registerpane {
		width:50%;
		padding-top: 10% !important;
	}
}
@media(min-width:1025px) and (max-width:1280px) {
	#loginpane {
		width: 30%;
		padding-top: 5% !important;
	}
	#registerpane {
		width:70%;
		padding-top: 10% !important;
	}
}
@media(min-width:768px) and (max-width:1024px) {
	#loginpane {
		width:50%;
		padding-top: 5% !important;
	}
	#registerpane {
		width:80%;
		padding-top: 10% !important;
	}
}
@media(orientation:landscape) {
	#loginpane {
		width: 50%;
		padding-top: 5% !important;
	}
	#registerpane {
		width:70%;
		padding-top: 10% !important;
	}
}
@media(min-width:481px) and (max-width:767px) {
	#loginpane {
		width:80%;
		padding-top:5% !important;
	}
	#registerpane {
		width:80%;
		padding-top: 10% !important;
	}
}

/* =========== after login ============= */
#mainpane {
	margin: 0 auto;
	padding-left: 10px;
	padding-right: 10px;
}
#logo {
	position: absolute;
	left: 0;
	right: 0;
	text-align: center;
	z-index: -1;
	margin-top: 5px;
}

#toppane {
	display: flex;
	position: relative;
	justify-content: space-between;
	padding: 15px 10px;
}
#userpane {
	position: relative;
	margin: 0 auto;
	text-align: center;
}
#userpane #username {
	color: yellow;
	font-size: 1.5em;
}
.viplevelimg {
	width: 25px;
}

#creditpane {
	position: relative;
	width: 230px;
	height: 230px;
	margin: 0 auto;
	padding: 20px 10px;
	text-align: center;
	border-radius: 50%;
	border: 2px solid gold;
	box-shadow: 0 0 0 rgba(204,169,44, 0.4);
	animation: pulse 2s infinite;
}
#creditpane #wallet {
	padding-top: 5px;
}
#creditpane #credit {
	padding-top: 10px;
	font-size: 2em;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(204,169,44, 0.4);
  }
  70% {
      box-shadow: 0 0 0 20px rgba(204,169,44, 0);
  }
  100% {
      box-shadow: 0 0 0 0 rgba(204,169,44, 0);
  }
}

@keyframes pulseicon {
  0% {
    box-shadow: 0 0 0 0 rgba(0,255,170, 0.4);
  }
  70% {
      box-shadow: 0 0 0 10px rgba(0,255,170, 0);
  }
  100% {
      box-shadow: 0 0 0 0 rgba(0,255,170, 0);
  }
}

.menupane {
	position: relative;
	margin: 20px 0;
}
.menupane .menurow {
	position: relative;
	text-align: center;
}
.menupane .menurow a {
	max-width: 120px;
	margin: 0 10px;
	position: relative;
	display:inline-block;
}
.menupane .menurow a {
	color: white;
}
.menupane .menurow a:hover {
	color: gold;
	text-decoration: none;
}
.menupane .menurow a .rowicon:hover {
	border: 2px solid gold;
	animation: pulse 2s infinite;
}
.menupane .menurow a .rowicon {
	border: 1px solid white;
	width: 55px;
	height: 55px;
	border-radius: 50%;
	position: relative;
	padding-top: 10px;
	border-color: #0fa;
	/*animation: pulseicon 1.5s infinite;*/
	font-size: 1.3em;
}
.menupane .menurow a .rowtext {
	position: relative;
	padding-top: 10px;
	font-size: 0.85em;
}

.buttonpane {
	max-width: 500px;
	text-align: center;
	margin: 0 auto;
}

.caramel {
	color: #FFE096;
}
.calamansi {
	color: #FDF8AF;
}
.littlegirlpink {
	color: #F4B5D2;
}
.lightpastelpurple {
	color: #B19CD8;
}
.columbiablue {
	color: #BED8D7;
}







#topbar {
	position: relative;
	background-color: #000;
	color:#FFF;
	height: 60px;
	line-height: 60px;
	margin-bottom: 10px;
}
#topbar h1{
	text-align: center;
	padding-top: 5px;
}
#topbar #x-button {
	position: absolute;
	right: 20px;
	top: 5px;
}

.datapane {
	width:80%;
	margin: 0 auto;
	padding: 0 15px;
}

.record {
	color:#000;
	background-color: #FFF;
	position: relative;
	padding: 10px 15px 10px 30px;
	margin-bottom: 20px;
	border-radius: 20px;
	font-size: 20px;
}
.record .record-status-bar {
	position: absolute;
	width: 8px;
	height: 80%;
	top: 10%;
	left:15px;
}
.record .record-status-bar.deposit {
	background-color: green;
}
.record .record-status-bar.withdraw {
	background-color: red;
}
.record .deposit {
	color: green;
}
.record .withdraw {
	color: red;
}
.record .done {
	color: green;
}
.record .pending {
	color:orange;
}
.record .reject {
	color: red;
}

.record .record-datetime {
	font-size: 22px;
	position: relative;
}
.record .record-row {
	display: flex;
	justify-content: space-between;
}

.record .record-doing {
	position: relative;
}
.record .record-amount {
	position: relative;
}
.card-bank {
	width: 95%;
	margin: 0 auto;
	border-radius: 15px;
	color:#000;
}
.card-bankname {
	padding: 10px;
	font-size: 1.8em;
}
.card-banknumber {
	font-size: 1.7em;
}
.card-promotion {
	
}
.card-promotion .card-header,
.card-bank .card-header{
	text-align: center;
	font-size: 1.5em;
}

.sa-card {
	/*
	background: linear-gradient(-45deg, #0F5B51, #052C2F, #092324, #040710);
	animation: cardbg 5s ease infinite;
	background-size:400% 400%;
	*/
	background-color: #0A433B;
	border-radius: 20px;
}
@-webkit-keyframes cardbg {
    0%{background-position:51% 0%}
	50%{background-position:50% 100%}
	100%{background-position:51% 0%}
}
@-moz-keyframes cardbg {
    0%{background-position:51% 0%}
    50%{background-position:50% 100%}
    100%{background-position:51% 0%}
}
@keyframes cardbg {
    0%{background-position:51% 0%}
    50%{background-position:50% 100%}
    100%{background-position:51% 0%}
}