/* your styles go here */
.alertbox {
	width: 100%;
	max-width: 800px;
	background-color: #900000;
	border-radius: 2px;
	color: #FFF;
	text-align: center;
	padding: 5px;
	font-size: 12px;	
	margin: 5px auto;
}

.succbox {
	width: 100%;
	max-width: 800px;
	background-color: green;
	border-radius: 2px;
	color: #FFF;
	text-align: center;
	padding: 5px;
	font-size: 12px;	
	margin: 5px auto;
}

input[type=text].panel,input[type=password].panel,input[type=number].panel,input[type=email].panel { 
	font-family: "Arial","Chakra Petch";	
	display: inline-block;	
	margin: 0 5px 5px 0; 	
	border: none;
	outline: none;
	padding: 10px;
	font-size: 13px;
	color: #000;	
	border: 1px solid rgba(0,0,0,0.3);
	border-radius: 4px;
	box-shadow: inset 0 -5px 45px rgba(100,100,100,0.2), 0 1px 1px rgba(255,255,255,0.2);
	-webkit-transition: box-shadow .5s ease;
	-moz-transition: box-shadow .5s ease;
	-o-transition: box-shadow .5s ease;
	-ms-transition: box-shadow .5s ease;
	transition: box-shadow .5s ease;
}

input[type=submit].panel, button.panel { 	
	margin-bottom: 10px;	
	border: none;
	outline: none;
	padding: 10px;	
	font-size: 13px;
	color: #000;	
	border: 1px solid rgba(0,0,0,0.3);
	border-radius: 4px;	
	-webkit-transition: box-shadow .5s ease;
	-moz-transition: box-shadow .5s ease;
	-o-transition: box-shadow .5s ease;
	-ms-transition: box-shadow .5s ease;
	transition: box-shadow .5s ease;
	cursor: pointer;
	transition: 0.5s;
}

input[type=submit].panel:hover, button.panel:hover {
	border: 1px solid rgba(250,0,0,0.8);
	color:red;
}

.full {
	width:100%;
	max-width: 80%;
}

.full-btn {
	width:100%;
}

input:focus { box-shadow: inset 0 -5px 45px rgba(100,100,100,0.4), 0 1px 1px rgba(255,255,255,0.2); }

div#menuleft {
	width: 155px;	
	float: left;
}

div#content {
	width: 80%;
	float: left;
	min-width: 300px;
	max-width: 1000px;
}

.buttonsmall {
	padding: 10px 15px;
	border:1px solid #495057;
	border-radius: 6px;	
	font-weight: bold;
	margin: 10px 0;
	display: inline-block;
	cursor: pointer;
}

.text-center {
	text-align: center;
}

.gray {
	color:#d8d8d8;
}

.listItem {
	width: 15%;
	height: 380px;
	min-width: 150px;
	float: left;	
	border-radius: 4px;
	margin: 10px;
	border:1px solid #000;	
	overflow: hidden;
	cursor: pointer;
	padding:5px;
	background-color: rgba(0,0,0,1) ;		
}

.listItem:hover {
	background-color: rgba(0,0,0,0.8) ;
}

.listItem img {
	width: 40px;
	display: block;
	margin:5px auto;
}

.listItem p {
	font-size: 11px;
	text-align: center;	
	margin: 5px 0 5px 0;

}

.mediumTx {
	font-size: 14px;
}

.pshop {
	text-align: center;
	font-size: 11px;
	color:#000;	
}

select.soflow {
   -webkit-appearance: button;
   -webkit-border-radius: 2px;
   -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
   -webkit-padding-end: 20px;
   -webkit-padding-start: 2px;
   -webkit-user-select: none;
   background-image: -webkit-linear-gradient(#FAFAFA, #F4F4F4 40%, #E5E5E5);
   background-position: 97% center;
   background-repeat: no-repeat;
   border: 1px solid #AAA;
   color: #555;
   font-size: inherit;
   margin: 20px;
   overflow: hidden;
   padding: 5px 10px;
   text-overflow: ellipsis;
   white-space: nowrap;
   width: 300px;
}

table.adminTable {
	border-collapse: collapse;
    width: 100%;
}

table.adminTable th, td {
	padding: 8px;
    text-align: left;   
}

.btn-link {
	width: 50px;
	padding: 5px 15px;
	background-color: #ff3f3f;
	color:#FFF;
	cursor: pointer;
	display: block;
	margin: 0 auto;
}

li a.active {
	background-color:#ff3f3f;
}

div#shopMain {
	width: 100%;
}
div#shopMenu {
	
}

@media (max-width: 768px) {
	.tmstyle {
		letter-spacing: 4px;
	}
}

@media (min-width: 768px) {
	.tmstyle {
		letter-spacing: 8px;
	}
}

@media (min-width: 1200px) {
	.tmstyle {
		letter-spacing: 15px;
	}
}

.bannertop {	
	width: 70%;
	height: 52px;
	overflow: hidden;
}

.bannertop img {
	margin-right: 5px;
	box-shadow: 2px 2px 0 #000;
}


.tooltips {
    position: relative;
    display: inline-block;    
    cursor: pointer;
}


.tooltips .tooltipstext {
    visibility: hidden;    
    background-color: black;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;
    position: absolute;
    z-index: 1;
    min-width: 150px;
    top: 100%;
    left: 50px; 
    margin-left: -60px;
    font-family: Tahoma;
}

.tooltips:hover .tooltipstext {
    visibility: visible;
}

.code-item {
	text-transform: uppercase;
	width: 70px;
	display: inline-block;
	text-align: center;	
}

.codeitemcss {
	font-family: Tahoma;
}

.swap tr:nth-child(even) {background-color: gold}
.swap tr:nth-child(odd) {background-color: #FFF}

.white {color:#FFF;}
.red{color:red;}
.green{color:green;}
.lime{color:lime;}
.gold{color:gold;background-color: #000;padding:10px;width: 100%;}
.gray{color:#FFF;background-color: gray;padding:10px;width: 100%;}

.overflow-auto{
	overflow-x: auto;
}

.table-main {
	width: 1000px;
}

.table-head {
	background-image: url('../image/bg_01.png');
	background-repeat: no-repeat;
}

.table-tr {
	background-image: url('../image/bg_02.png');
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

.table-bottom {
	background-image: url('../image/bg_03.png');
	background-repeat: no-repeat;
}

.f-8,.f-8 * {
	font-size: 8px !important;
}
.f-9,.f-9 * {
	font-size: 9px !important;
}
.f-10,.f-10 * {
	font-size: 10px !important;
}
.f-11,.f-11 * {
	font-size: 11px !important;
}
.f-12,.f-12 * {
	font-size: 12px !important;
}
.f-13,.f-13 * {
	font-size: 13px !important;
}
.f-14,.f-14 * {
	font-size: 14px !important;
}
.f-16,.f-16 * {
	font-size: 16px !important;
}
.f-18,.f-18 * {
	font-size: 18px !important;
}
.f-20,.f-20 * {
	font-size: 20px !important;
}
.f-22,.f-22 * {
	font-size: 22px !important;
}
.f-24,.f-24 * {
	font-size: 24px !important;
}
.f-26,.f-26 * {
	font-size: 26px !important;
}
.f-28,.f-28 * {
	font-size: 28px !important;
}
.f-30,.f-30 * {
	font-size: 30px !important;
}