/* INDEX */
/*KANIT FONTS*/
@font-face {
    font-family: 'Kanit';
	src: url('/fonts/Kanit-Regular.ttf');
}
@font-face {
    font-family: 'Kanit-Italic';
	src: url('/fonts/Kanit-Italic.ttf');
	
}
@font-face {
    font-family: 'Kanit-Bold';
	src: url('/fonts/Kanit-Bold.ttf');
}
@font-face {
    font-family: 'Kanit-BoldItalic';
	src: url('/fonts/Kanit-BoldItalic.ttf');
}
/* poppins font */
@font-face {
    font-family: 'poppins';
	src: url('/fonts/Poppins-Regular.ttf');
}
@font-face {
    font-family: 'poppins-Italic';
	src: url('/fonts/Poppins-Italic.ttf');
	
}
@font-face {
    font-family: 'poppins-Bold';
	src: url('/fonts/Poppins-Bold.ttf');
}
@font-face {
    font-family: 'poppins-BoldItalic';
	src: url('/fonts/Poppins-BoldItalic.ttf');
}
.poppins-thin {
  font-family: "poppins", sans-serif;
  font-weight: 100;
  font-style: normal;
}

.poppins-extralight {
  font-family: "Poppins", sans-serif;
  font-weight: 200;
  font-style: normal;
}

.poppins-light {
  font-family: "Poppins", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.poppins-regular {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.poppins-medium {
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.poppins-semibold {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-style: normal;
}

.poppins-bold {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.poppins-extrabold {
  font-family: "Poppins", sans-serif;
  font-weight: 800;
  font-style: normal;
}

.poppins-black {
  font-family: "Poppins", sans-serif;
  font-weight: 900;
  font-style: normal;
}

.poppins-thin-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 100;
  font-style: italic;
}

.poppins-extralight-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 200;
  font-style: italic;
}

.poppins-light-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 300;
  font-style: italic;
}

.poppins-regular-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.poppins-medium-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-style: italic;
}

.poppins-semibold-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-style: italic;
}

.poppins-bold-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-style: italic;
}

.poppins-extrabold-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 800;
  font-style: italic;
}

.poppins-black-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 900;
  font-style: italic;
}


body {
	background-color:#242424;
	color:#e1e1e1;
  	font-family: "Kanit", sans-serif;
  	font-weight: 400;
  	font-style: normal;
}


.kanit-regular {
  font-family: "Kanit", sans-serif;
  font-weight: 400;
  font-style: normal;
}
.kanit-regular-italic {
  font-family: "Kanit", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.kanit-bold {
  font-family: "Kanit", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.kanit-bold-italic {
  font-family: "Kanit", sans-serif;
  font-weight: 700;
  font-style: italic;
}
/*
.kanit-thin {
  font-family: "Kanit", sans-serif;
  font-weight: 100;
  font-style: normal;
}

.kanit-extralight {
  font-family: "Kanit", sans-serif;
  font-weight: 200;
  font-style: normal;
}

.kanit-light {
  font-family: "Kanit", sans-serif;
  font-weight: 300;
  font-style: normal;
}


.kanit-medium {
  font-family: "Kanit", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.kanit-semibold {
  font-family: "Kanit", sans-serif;
  font-weight: 600;
  font-style: normal;
}


.kanit-extrabold {
  font-family: "Kanit", sans-serif;
  font-weight: 800;
  font-style: normal;
}

.kanit-black {
  font-family: "Kanit", sans-serif;
  font-weight: 900;
  font-style: normal;
}

.kanit-thin-italic {
  font-family: "Kanit", sans-serif;
  font-weight: 100;
  font-style: italic;
}

.kanit-extralight-italic {
  font-family: "Kanit", sans-serif;
  font-weight: 200;
  font-style: italic;
}

.kanit-light-italic {
  font-family: "Kanit", sans-serif;
  font-weight: 300;
  font-style: italic;
}


.kanit-medium-italic {
  font-family: "Kanit", sans-serif;
  font-weight: 500;
  font-style: italic;
}

.kanit-semibold-italic {
  font-family: "Kanit", sans-serif;
  font-weight: 600;
  font-style: italic;
}


.kanit-extrabold-italic {
  font-family: "Kanit", sans-serif;
  font-weight: 800;
  font-style: italic;
}

.kanit-black-italic {
  font-family: "Kanit", sans-serif;
  font-weight: 900;
  font-style: italic;
}
*/
INPUT, SELECT, BUTTON {
	font-family: "Poppins", sans-serif;
  	font-weight: 300;
  	font-style: normal;
}
img {

	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font-weight: 400;
	background: rgba(0,0,0,0);
}
h1 {
	font-size: calc(1.0rem + 1.0vw);
}
.error, .login-error {
	color: #bf1e2e;
	display:none
}
.loginAlert { display:none }
.success {
	color: #78e08f;
}

.font-red {
	color:#bf1e2e;
}
.bgi-dark {
	background-color:#1e1e1e !important;
}
.topspace {
	height:10vh;
}
.actPartArea{
	padding:1rem .48rem;
	position:relative;
	font-size:.28rem;
	line-height:.36rem;
	text-align:center;
	min-width:auto
}
.TopBanner {
	position:relative;
	width:100%;
	height:90vh;

	overflow:hidden;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	padding:0;background:#000
}

.TopBanner .media-container {
	position:absolute;
	/*width:100%;*/
	height:90vh;
	top:0;
	/*left:0;*/
	right:-5vh;
	bottom:0
}

.TopBanner .media-container .poster {
	width:100%;
	max-width:1366px;
	min-width:640px
}

.title {
	color: #ffffff;
	position:relative;
	left:0;
	text-align:center;
	margin-top: 5vh;
	z-index:0
}
.ltitle {
	font-size:1rem;
	margin: 5px 0 5px 5px;
}
.jumbotron {
	background-color:#1e1e1e;
}
.form-group {
	margin-left:0;
	margin-right:0;
}

.loginBox {
	display:none;
	font-size:0.9em;
	background-color: #fff;
	color:#333333;
	border-radius: 12px;
	box-sizing: border-box;
	height: 580px;
	left: 50%;
	max-width: 990px;
	overflow: hidden;
	position: absolute;
	top: 50%;
	transform: translate(-50%,0);
	width: 480px;
	z-index:999;
}

.form-title {
	font-size:1.3em;
}
.container {
	position:relative;
	width:100%;
}

/* MAIN */

.theme-color { color: #000000 }
.theme-bg { background-color: #000000 }
.td-active {
	color: #fff;
	background-color: #bf1e2e;
}
.grey-table {
	background-color: #333;
}
td.tdtitle {
	background-color: #bf1e2e;
	text-align:center
}
.price { text-align:right }
.dropdown-menu {
	top:auto;
	left:auto;
	bottom:50px;
	right:0;
	min-width:20rem;
	background-color:#e7e7e7;
}

.dropdown-menu>li {
	background-color:#e7e7e7 !important;
}

.fixed-table {
	margin:0px;
	position:fixed; 
	bottom:0; 
	background-color:#1e1e1e;
}
.table {
	color: #f5f6fa;
}
.table-bordered>tbody>tr>td {
	border-color:#000;
}

.tr_a { cursor:pointer }
.tr_a:hover { background-color:#535c68}
.tr_high { 
	background-color:#000000;
	color:#ffffff;
	font-weight:bold
}

.td-active>a  { color: #fff; text-decoration:none }
.td-st>a  { color: #e7e7e7; text-decoration:none }
.td-st>a:hover  { color: #fff; }
td>a  { color: #e7e7e7; text-decoration:none }
a { color: #bf1e2e; }
a:active { color: #bf1e2e; }
a:focus { color: #bf1e2e; }
a:hover { color: #990033 }
label {
    display: inline-block;
    max-width: 100%;
    margin-bottom: 5px;
    /*font-weight: 700;*/
}

.col-md-6, .col-sm-6, .col-xs-12 {
	    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}
.form-group {
	margin-bottom:15px;
}
.subsection {
	text-align:center;
	margin-bottom:20px;
}

.withdrawal-icon {
	height:15px;
}
.iblink {
	border: 1px solid #777777;
	border-radius: 10px;
	color: #e7e7e7;
	background-color: #bf1e2e;
	padding: 10px;
	text-align:center;
}
.iblink a {
	text-decoration:none;
	color: #e7e7e7;
}
.iblink a:hover {
	text-decoration:none;
	color: #ffffff;
}
.breadcrumb {
	display:inline;
	margin-bottom:1.5rem;
	font-size:0.8rem
}
.breadcrumb a {
	color:#ffffff;
	text-decoration:none;
}
.breadcrumb a:focus { color: #eeeeee; }
.breadcrumb a:hover { color: #990033 }



@media screen and (max-width 991px) {
	nav>li {
		width:25%;
	}
	.fixed-table {
		bottom:90px !important; 
	}
	.iblink a {
		font-size:0.8rem
	}
}


/* Note: Try to remove the following lines to see the effect of CSS positioning */
.affix {
	bottom: 0;
	width: 100%;
	z-index: 9999 !important;
}

.affix + .container-fluid {
	padding-top: 70px;
}



@media screen and (min-width:768px){
	.TopBanner .media-container {
		height:52.734375vw;
		width:100vw;
	}
	.title {
		position:absolute;
		left:10vh;
		top:40%;
		z-index:99;
		text-align:left
	}

}



@media (max-width: 992px) {
	.navbar-collapse {
		position: absolute;
		top: 54px;
		left: 100%;
		height:100vh;
		padding-left: 15px;
		padding-right: 15px;
		padding-bottom: 15px;
		width: 100%;
		transition: all 0.4s ease;
		display: block;
	}
	.navbar-collapse.collapsing {
		height: auto !important;
		margin-left: 50%;
		left: 50%;
		transition: all 0.2s ease;
	}
	.navbar-collapse.show {
		left: 0;
	}
	.loginBox {
		max-width: 350px !important;
	}
	.navbar-nav {
		background-color:#bf1e2e;
		padding-left:10px;
		border-radius:10px;
	}
}