@import url('../fonts/font-thaisansneue/thaisansneue.css');
@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@100;200;300;400;500;600;700;800;900&display=swap');
@import url("/html/css/config.css");
html { }
body{
	font-family: 'Kanit', sans-serif;

	font-size:14px;
	background-color : #F4F4F4 ;
	position:relative ;


}

.text-primary {
  color: var(--color-primary);
}
.btn-custom-1m .btn-custom-1:hover {
  font-family: "Kanit", sans-serif;
  background-color: var(--color-primary);
  color: #FFFFFF;
  border-radius: 25px;
}

.btn-primary,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary:not(:disabled):not(.disabled):active
{
  font-family: "Kanit", sans-serif;
  color: #fff;
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

.btn-secondary,
.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active,
.btn-secondary:not(:disabled):not(.disabled):active
 {
  font-family: "FCVision", sans-serif;
  color: var(--color-secondary-contrast);
  background-color: var(--color-secondary);
  border-color: var(--color-secondary);
}

.btn-custom-1 {
	font-size: 18px;
	font-weight: normal ;
	background-color: var(--color-primary) ;
	border : var(--color-primary) ;
	color :#FFFFFF ;
	border-radius : 20px;
}


.btn-custom-2, .btn-custom-2:hover {
 	font-weight:bold ;
	background-color: var(--color-secondary) ;
	border : var(--color-secondary) ;
	color :#FFFFFF ;
	border-radius : 20px;
}
.btn-custom-2 img {
	width: 20px;
    margin-top: -5px;
    margin-right: 10px;;
}

.btn-custom-2:hover {background-color:#6c977c ; }


header img {max-width:100%;}
	a{text-decoration:none !important ; }
.desktop-hide{
	display:none !important;
}
.header-mobile { border-bottom : 1px solid #CCC ; padding:10px; }


.header-mobile { display:none !important; }
.mobile-foot {display:none !important;}

.header-desktop .header-content {
	padding-top:10px;
	padding-bottom : 10px;
	background-color :#FFFFFF ;

}


.header-desktop .app-title {
	display:block;
	margin-top: 20px;
    font-size: 22px;
	float:right;

}

.header-desktop .header-top {
	background-color : #EFEFEF ;
	padding : 4px ;
	text-align:right ;

}

.desktop-meun {
	background-color :#EFEFEF ;
    padding: 8px;
}

.desktop-meun .main-menu {margin : 0px; padding:0px; list-style-type:none;overflow:hidden; }
.desktop-meun .main-menu li{display:block ;float:left ; padding-right:40px;  }
.desktop-meun .main-menu li a{color :#464444 ; text-decoration :none ;  }

.desktop-meun .logout{
	float:right ;
	color :#464444 ;
	text-decoration :none ;
}
.mobile-foot {
	position:fixed ;
	bottom:0px;
	width:100%;
	background-color :#F8F8F8;
	font-size:12px;


	border-top : 1px solid  #EFEFEF ;
	-webkit-box-shadow: 0px -4px 16px -12px rgba(0,0,0,0.25);
	-moz-box-shadow: 0px -4px 16px -12px rgba(0,0,0,0.25);
	box-shadow: 0px -4px 16px -12px rgba(0,0,0,0.25);

}
.mobile-foot .foot-1{
	padding: 8px;
    overflow: hidden;
    padding-top: 12px;

}

.mobile-foot .foot-col { width: 25% ; float:left;}
.mobile-foot .foot-col .foot-link {display : block ; width:100%; }
.mobile-foot .foot-col .foot-link img {display : block ; margin:auto ; height:20px; margin-bottom : 3px}
.mobile-foot .foot-col .foot-link span {display : block ; text-align:center; line-height:16px; color :#525050 ;}

.main-color{
	color :var(--color-primary) ;
}


.login-content {
	margin-top:20px;
}
.forget-password-block {display:none;}
.desktop-picuture-content {border-radius:10px; max-height:420px;overflow:hidden;margin-top:20px;}
.login-content { padding : 20px;background-color :#FFFFFF; border-radius:10px; }
.login-content  .login-logo-1 {width: 100px;}
.login-content  .form-login {padding-left: 80px; padding-right: 80px;}
.login-content  .reigster-block {text-align:center; }

.footer-desktop { position: absolute ; bottom:0px; background-color :#FFFFFF ; width: 100%; text-align:center; padding-top:15px; padding-bottom:15px; }
.footer-desktop .title , .footer-desktop .address , .footer-desktop .contact  {
	color : #343333 ;
}


.logo-content-1 .login-logo-1 {
	max-width: 160px;
    margin: auto;
    display: block;

}

.logo-content-1 .login-logo-2 {
	max-width: 100px;
    margin: auto;
    display: block;
	margin-bottom: 10px;
    margin-top: 10px;
}

.logo-content-1 .logo-title .main{
	font-family: 'Kanit', sans-serif;

	text-align:center ;
	font-size:16px;
	line-height : 22px;
}
.logo-content-1 .logo-title .sub {
	font-family: 'Kanit', sans-serif;

	text-align:center ;
	font-size:16px;
	line-height : 22px;
}
.login-content .main-title {
	font-weight: normal;
	font-size:18px;
	text-align:center ;
	margin-top:8px;
	margin-bottom:8px;
	line-height : 24px;
}


.forget-password-block a{
	color :var(--color-primary) ;
}

.dashboard-content{
	margin-top:20px;
 	position:relative ;
	background-color :#FFFFFF ;
	border-radius:10px;
	font-size : 14px;
	padding: 10px;
	padding-top : 30px;
	padding-bottom : 30px;

	border : 1px solid #d1d1d1 ;
	-webkit-box-shadow: 0px 0px 25px -10px rgba(153,153,153,1);
	-moz-box-shadow: 0px 0px 25px -10px rgba(153,153,153,1);
	box-shadow: 0px 0px 25px -10px rgba(153,153,153,1);

}

.content-profile{
	margin-top:20px;
	text-align:center;
	position:relative ;
	background-color :#FFFFFF ;
	border-radius:10px;
	font-size : 14px;
	padding: 10px;
	padding-top : 30px;
	padding-bottom : 30px;

	border : 1px solid #d1d1d1 ;
	-webkit-box-shadow: 0px 0px 25px -10px rgba(153,153,153,1);
	-moz-box-shadow: 0px 0px 25px -10px rgba(153,153,153,1);
	box-shadow: 0px 0px 25px -10px rgba(153,153,153,1);

}
.content-profile .last-login {color :#707070}
.content-profile .profile-picture img {width : 100px ; height:100px;border-radius:50px; margin-bottom:20px;}
.content-profile .change-password a{color :#000}


.content-message {
	margin-top:20px;
	text-align:center;
	position:relative ;
	background-color :#FFFFFF ;
	border-radius:10px;
	font-size : 14px;
	padding: 10px;
	padding-top : 30px;
	padding-bottom : 30px;

	border : 1px solid #d1d1d1 ;
	-webkit-box-shadow: 0px 0px 25px -10px rgba(153,153,153,1);
	-moz-box-shadow: 0px 0px 25px -10px rgba(153,153,153,1);
	box-shadow: 0px 0px 25px -10px rgba(153,153,153,1);

}
.content-message h3 {font-size: 22px ;}
.content-message ul {list-style-type: none; margin: 0; padding: 0 ;}


.right-content {
	background-color :#FFF ;
	border-radius:10px;
	padding : 10px;
	margin-top:20px;
	border : 1px solid #d1d1d1 ;


	-webkit-box-shadow: 0px 0px 25px -10px rgba(153,153,153,1);
	-moz-box-shadow: 0px 0px 25px -10px rgba(153,153,153,1);
	box-shadow: 0px 0px 25px -10px rgba(153,153,153,1);
}



.reigster-block {
	margin-top:10px;
	text-align:center;
	color :var(--color-primary) ;

}

.reigster-block a{
	color :var(--color-primary) ;
}
.main-section {    padding-bottom: 130px; }
.dash-list {text-align:center ; margin-top: 20px; }
.dash-list a{text-align:center ; color :#000000 ;}

.dash-list .dash-block { padding : 4px; }
.dash-list .dash-block .dash-item {
	padding : 8px;
	border : 1px solid #d1d1d1  ;
	border-radius : 10px;
	height: 125px;
	width:125px;
	margin:auto;
	display:block;
	padding-top:36px;
	background-color :#FFF ;

	-webkit-box-shadow: 0px 0px 25px -10px rgba(153,153,153,0.5);
	-moz-box-shadow: 0px 0px 25px -10px rgba(153,153,153,0.5);
	box-shadow: 0px 0px 25px -10px rgba(153,153,153,0.5);

}
.dash-list .dash-block .dash-item .img{width:40px; }
.dash-list .dash-block  .dash-item:hover{background-color : #C5FFDA  }
.dash-list .title {
	line-height: 18px;
    margin-top: 5px;
}

.deposit-head {font-size: 28px;font-weight:bold ; margin-bottom:15px; }
.deposit-head .title{text-align:left ; }
.deposit-head .detail{text-align:right ; color :var(--color-primary) ;  }

.diposit-list {margin:0px;padding:0px;list-style-type:none; padding:0px;font-size : 14px; color :#707070 }
.diposit-list .list-item {
	border-bottom:1px solid  #EFEFEF  ;
    display: block;
    width: 100%;
    overflow: hidden;
	padding-top:8px;
	padding-bottom:8px;

}


.diposit-list .list-item:nth-last-child(1) {
	/* border-bottom: none  ; */
}

.list-item:hover{background-color : #F8F8F8 ; color :#000000!important ;}

.diposit-list .list-item .left {float:left ; text-align:left;  }
.diposit-list .list-item .right {float:right ; text-align:right; }
.diposit-list .list-item .account-no {font-size: 22px;line-height:28px; color :#000000 ; font-weight:bold;  }
.diposit-list .list-item .amount {font-size: 22px;line-height:28px; color : var(--color-primary) ; font-weight:bold;  }
.diposit-list .list-item .status .wait{color :#F26914; }
.diposit-list .list-item .name {color : #B2B0B0}
.payment-head {margin-bottom:15px;}
.payment-head .title{font-size:24px;  }
.payment-head .detail{font-size:16px;}
.payment-head .detail img {width: 32px;}
.payment-head .detail  a{ color:var(--color-primary) }

.payment-head .detail {text-align :right ; }


.password-head .title{font-size:24px;}

/** **/

.first-page-section-head{

}

.first-page-section-menu{

}

.main-section-head {    position: relative;display:none; }
.main-section-picture {
	background-image : url('../images/dbg.png');
	background-position: center;
    background-repeat: no-repeat;
	min-height : 150px;
	color :#FFFFFF ;
    padding-top: 15px;
	background-size: 100% auto;

}

.main-section-picture  .profile-picture-1{
	float:left ;
	width: 75px;
	background: #FFFFFF;
    border-radius: 50px;
    overflow: hidden;
}
.main-section-picture   .profile-detail {
	float: left;
    padding-left: 15px;
}
.main-section-account {
	background-color: rgba(0, 0, 0, 0.3);
	position : absolute ;
	width : 100% ;
	bottom: 0;
	color: #FFFFFF;

}
.main-section-account .left-1 {text-align:left ; }
.main-section-account .right-1 {text-align:right ; }
.main-section-account  .detail{font-size : 20px; color :#97CC54 }

.menu-items {
	padding-top: 15px;
    padding-bottom: 15px;
}
.menu-items .menu-item {
	color :#5A5A5A ;
	padding:5px;
	text-align: center ;
}
.menu-items .menu-item {
	color :#5A5A5A ;
	min-height : 85px ;
}
.menu-items .menu-item img {
	display : block ;
	margin:auto ;
}
.menu-items .menu-item span  {
	display : block ;
	margin:auto ;
	margin-top:5px;
	color :#5A5A5A ;

}

.right-content .content-head {
	padding-top:10px;
	font-size : 22px;

}
.right-content .content-head .title-1 {
	color : #1C1B1B ;
	text-align:left ;
}
.right-content .content-head .detail-1 {
	color : var(--color-primary);
	text-align:right ;
}

.content-list-block .content-list{
	list-style-type:none ;
	margin : 0px;
	padding : 0px;
	font-size: 18px;
}
.content-list-block .content-list .no-item-1{
	width:100%;
	text-align:center ;
	display:block ;
	font-size:16px
}
.content-list-block .content-list a{
	color :#1C1B1B
}
.content-list-block .content-list .list-item{
	overflow:hidden ;
	border-bottom : 1px solid  #CCCCCC ;
	padding-top : 10px;
	padding-bottom : 10px;
	position : relative ;
	font-size: 14px;

}
.content-list-block .content-list .list-item .left{
	float: left ;
	text-align : left ;

}
.content-list-block .content-list .list-item .right{
	float: right ;
	text-align : right ;
	position: absolute;
    right: 0;
	top: 10px;
	max-width: 80%;
}
.content-middle {
	background-color :#F7F7F7 ;
}
.content-middle > .row{
    font-size: 18px;
	padding-top:4px;
	padding-bottom : 4px;

}
.content-list-block .content-list .list-item .title-1{ font-size: 16px; }
.content-list-block .content-list .list-item .title-2{ font-size:20px;}
.content-list-block .content-list .list-item .title-3{ color :#837F7F }
.content-list-block .content-list .list-item .detail-2{ font-size:20px;color : var(--color-primary) ;  }
.content-list-block.content-loan .content-list .list-item .detail-2 {margin-top: 22px;}


.content-head .left-1{text-align:left ; }
.content-head .right-1{text-align:right ; }
.content-head-detail {font-size:18px;}

.content-head-account {color :#FFFFFF ;font-size:24px;   }
.content-head-account  {background-color :var(--color-primary) ;padding-top: 4px;padding-bottom: 4px; }

.content-list-block.content-deposit-item .plus{
	color : var(--color-primary) ;
}
.content-list-block.content-deposit-item .minus{
	color : #FF0000 ;
}

.content-head-account .bal-title-1 {font-size:16px;}
.content-head-account .use-title-1 {font-size:16px;}
.content-head-account .use-ar-1 {font-size:16px;}

.content-list-block.content-loan-eme-detail {
 	background-color :var(--color-primary) ;
}
.content-list-block.content-loan-eme-detail .list-item{
	padding-top:2px;
	padding-bottom : 2px;
	color :#FFFFFF ;
	padding-left : 10px;
	padding-right : 10px ;
	font-size: 16px !important ;
}
.content-middle.content-middle-chargback-item-1{color:#FFFFFF ; }
.content-middle.content-middle-chargback-item-1  {background-color :var(--color-primary) ; }

.content-list-block.content-guarantee .list-item{font-size:16px}
.content-list-block.content-guarantee .list-item .detail-2{font-size:16px}
.content-list-block.content-guarantee  .content-list .list-item .right{position:absolute;right : 0 }

.content-list-block.content-dividend .title-3 {
	font-size:14px;
}

.content-list-block.content-dividend .detail-1{
	color :#837F7F ;
	font-size:14px;
}
.footer-dividend {font-size : 16px; text-align:center ;}

.content-middle.content-middle-welfare > .row{background-color :var(--color-primary) ; color :#FFF ; }
.content-middle.content-middle-welfare .amount{font-size : 24px; }
.content-middle.content-middle-welfare .text-1{font-size : 14px;}
.item-list-benefic ul{list-style-type:none ; padding:0px; margin : 0 px; }
.content-profile-picture {font-size:18px;}
.content-list-block.content-list-profile .content-list .list-item .right {
	position:relative ;
	top: 0;

}
.content-list-block.content-loan-eme-detail .content-list .list-item .right {
	position:relative ;
	top: 0;
}
/** **/

@media only screen and (max-width: 768px) {

	body{background-color :#FFFFFF ; }
	.logo-content-1 .login-logo-1 { width : 160px; }
	.main-section {padding-bottom:60px;}
	.header-desktop {display:none !important ; }
	.desktop-meun {display:none !important ; }
	.footer-desktop {display: none; }
	.header-mobile {display:block !important ;  }

	.mobile-foot{display:block !important ; }


	.mobile-hide {display:none; }
	.desktop-hide {display:block !important ;  ; }
	.right-content {
		border: none;
		padding : 0px;
		-webkit-box-shadow: none ;
		-moz-box-shadow: none ;
		box-shadow: none ;
	}
	.content-profile {


	}

	.payment-head .detail {text-align :left  ; }
	.login-content .form-login {padding-left:0px; padding-right:0px;}

	.dash-list {
		margin-top : 60px;

	}
	.dash-list .dash-block .dash-item {
		width: 145px;
		height: 145px;
		padding-top: 45px;

	}
	.dash-list .dash-block .dash-item {
		border : 1px solid #EFEFEF  ;
	}

	.deposit-head {margin-bottom:6px;}
	.payment-head {margin-bottom:6px;}

	.main-section-head{display:block;}

	.content-middle > .row{
		background-color : #F7F7F7 ;
	}
	.content-list-block.content-loan-eme-detail > .row{
		background-color :var(--color-primary) ;
	}
	.content-middle.content-middle-chargback-item-1 > .row{
		background-color :var(--color-primary) ;

	}
	.content-head-account > .row{background-color :var(--color-primary) ;padding-top: 4px;padding-bottom: 4px; }
	.menu-items .menu-item {min-height:auto}

	.dashboard-content{
		margin-top:0px;
		position:relative ;
		background-color : none ;
		border-radius:0px;
		font-size : 14px;
		padding: 0px;
		padding-top : 0px;
		padding-bottom : 0px;

		border : none  ;
		-webkit-box-shadow: none;
		-moz-box-shadow: none;
		box-shadow: none;

	}

	.content-head-account  {background-color : inherit ; padding-top: 4px;padding-bottom: 4px; }

}

.cookie-info {
	font-family: "Kanit", sans-serif;
	display: block;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    max-width: 100%;
    background-color: rgba(0,0,0,.7);
	font-size: 16px;
	color : #FFFFFF ;
	font-weight : normal ;
    line-height: 1.5;
	z-index: 999;
	padding-bottom: 15px ;
    padding-top: 15px;

}
.cookie-info a{
	color: #FFEB3B;
	text-decoration: none;
}
.view-more-content {display: none ;}