@font-face {
	font-family: 'Conv_supermarket';
	src: url('../fonts/supermarket.eot');
	src: local('โ˜บ'), url('../fonts/supermarket.woff') format('woff'), url('../fonts/supermarket.ttf') format('truetype'), url('fonts/supermarket.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
    font-family:Open Sans;
    src: url('../fonts/OpenSans-BoldItalic.eot'); /* IE9 Compatibility Modes */
    src: url('../fonts/OpenSans-BoldItalic.eot?') format('eot'),  /* IE6-IE8 */
    url('../fonts/OpenSans-BoldItalic.woff') format('woff'), /* Modern Browsers */
    url('../fonts/OpenSans-BoldItalic.ttf')  format('truetype'), /* Safari, Android, iOS */
    url('../fonts/OpenSans-BoldItalic.svg#svgOpenSans-BoldItalic') format('svg'); /* Legacy iOS */
}

.label-as-badge {
    border-radius: 1em;
}


body {
	font-family: 'Conv_supermarket';
	font-size:17px;
	background: url(../img/bg-body.jpg) repeat-x ;
	/*background: url(../img/bglogin.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;*/

	background-color: #e1e1e1  ;
	/*background-image: url(../img/bg.jpg);
	
  background-repeat: repeat;
  background-position: center top;
  background-attachment: fixed;*/
}

.top-topic{ background:#000; color:#FFF; width:100%; padding:10px;}
	.top-topic:before,.top-topic:after {content: " "; display: table;}
				.top-topic:after {clear: both;}
.head-topic{color:#0887fa; float:left;font-style: italic; font-size:26px; font-family:Open Sans; margin:0; margin-left: 10px;margin-top:5px;}
.des-topic{background:#0066Cb; padding:10px 0; padding-left:25px; color:#fff; min-height: 40px;}


.panel-body {
padding:30px 18px;
margin: 0px auto;

}

.drop-language{float:right;  font-family:Open Sans; right: 0;  border:1px solid #333;  background:#1B1E23; border-radius:5px;}
		.caret{border-top-color:#fff;}
		.drop-open {color:#fff; margin:10px; display:block;}
		.drop-open:hover , .drop-open:focus{color:#fff; text-decoration:none;}
		.drop-language01{ right:0; left:auto; border-radius:0; background:#1B1E23; border:1px solid #333;}
		.drop-language01>li>a{color:#fff;  }
		.drop-language01>li>a:hover, .drop-language01>li>a:focus{color:#0887fa; background:#000;}

.bg-content {
    background: #FFF;
    min-height: 420px;
    padding-bottom: 10px;
}

.h1-body {
font-size:20px;
padding:0px 20px;
margin: 0px auto;
padding-bottom: 1px;
padding-left: 0px;

}


.panel.panel-default {
margin: 0px 0px;


}


.avc-logo {
	width:40px;
	height: 40px;
	background: url('../img/avcicon.png') center;
	background-size: 40px 40px;
	background-repeat: no-repeat;
	
	position:absolute;
	top: 7px;
	left:auto;
}

.avc1-logo {
	width:60px;
	height: 60px;
	background: url('../img/signup.png') center;
	background-size: 50px 50px;
	background-repeat: no-repeat;
	
	position:absolute;
	top: 42px;
	left:auto;
}

.keys-icon {
	width:60px;
	height: 60px;
	background: url('../img/keys.png') center;
	background-size: 50px 50px;
	background-repeat: no-repeat;
	
	position:absolute;
	top: 75px;
	left:auto;
}

form.form-horizontal {
max-width: 700px;
margin: 20px auto;
font-size: 18px;
}


.yellow {
	display:inline;
	color:#3399FF ;
	font-size:16px;
}

.small-head { 
    font-color: #FFFFFF;
    font-size: 18px;
}

pre,.well{background:#FFFFFF;}
.syntax-container{background:#FCFCFC;-webkit-border-radius:7px;-webkit-background-clip:padding-box;-moz-border-radius:7px;-moz-background-clip:padding;border-radius:7px;background-clip:padding-box;border:1px solid #e3e3e3;margin-bottom:30px;padding-bottom:20px;}
.isloading-wrapper.isloading-right{margin-left:10px;}
.isloading-overlay{position:relative;text-align:center;}.isloading-overlay .isloading-wrapper{background:#FFFFFF;-webkit-border-radius:7px;-webkit-background-clip:padding-box;-moz-border-radius:7px;-moz-background-clip:padding;border-radius:7px;background-clip:padding-box;display:inline-block;margin:0 auto;padding:10px 20px;top:10%;z-index:9000;}


.glyphicon-refresh-animate {
    -animation: spin .7s infinite linear;
    -webkit-animation: spin2 .7s infinite linear;
}

@-webkit-keyframes spin2 {
    from { -webkit-transform: rotate(0deg);}
    to { -webkit-transform: rotate(360deg);}
}

@keyframes spin {
    from { transform: scale(1) rotate(0deg);}
    to { transform: scale(1) rotate(360deg);}
}

.form-signin
{
    max-width: 330px;
    padding: 15px;
    margin: 0 auto;
}
.form-signin .form-signin-heading, .form-signin .checkbox
{
    margin-bottom: 10px;
}
.form-signin .checkbox
{
    font-weight: normal;
    padding-left: 20;
}
.form-signin .form-control
{
    position: relative;
    font-size: 16px;
    height: auto;
    padding: 10px;

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.form-signin .form-control:focus
{
    z-index: 2;
}
.form-signin input[type="text"]
{
    margin-bottom: -1px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
.form-signin input[type="password"]
{
    margin-bottom: 10px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
.account-wall
{
    margin-top: 20px;
    padding: 40px 0px 20px 0px;
    background-color: #f7f7f7;
    -moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
}
.login-title
{
    color: #555;
    font-size: 22px;
    font-weight: 400;
    display: block;
}
.profile-img
{
    width: 96px;
    height: 96px;
    margin: 0 auto 10px;
    display: block;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
}
.need-help
{
    margin-top: 10px;
}
.new-account
{
    display: block;
    margin-top: 10px;
}

.alert {
    display:none;
    margin: auto;
    margin-top: 10px;

    width: 90%;

    
}

.header{
   height:50px;
   background-color: #2c3742;
}

.header .logo h1{
   font-size:30px;
   margin:0px;
   padding:10px 0px;
}

.header .logo h1 a{
   color:#fff;
  font-family: 'Conv_supermarket';
}

.header .logo h1 a:hover{
   color:#fff;
   text-decoration:none;
   border:0px;
}

@media (max-width: 450px) { 
	.head-topic{margin-left:0; width:100%; text-align:center;}
	.drop-language{right:auto; width:100%; text-align:center;}
	.drop-language01{ right:auto; width:100%;  text-align:left;}
	.des-topic{text-align:center; padding-left:10px; font-size:0.875em; }
}

.btn3d {
    transition: all .08s linear;
    position: relative;
    outline: medium none;
    -moz-outline-style: none;
    border: 0px;
    margin-top: 15px;
    top: 0;
}
.btn3d:focus {
    outline: medium none;
    -moz-outline-style: none;
}
.btn3d:active {
    top: 9px;
}
.btn3d.btn-default {
    box-shadow: 0 0 0 1px #ebebeb inset, 0 0 0 2px rgba(255, 255, 255, 0.15) inset, 0 8px 0 0 #adadad, 0 8px 0 1px rgba(0, 0, 0, 0.4), 0 8px 8px 1px rgba(0, 0, 0, 0.5);
}
.btn3d.btn-primary {
    box-shadow: 0 0 0 1px #428bca inset, 0 0 0 2px rgba(255, 255, 255, 0.15) inset, 0 8px 0 0 #357ebd, 0 8px 0 1px rgba(0, 0, 0, 0.4), 0 8px 8px 1px rgba(0, 0, 0, 0.5);
}
.btn3d.btn-success {
    box-shadow: 0 0 0 1px #5cb85c inset, 0 0 0 2px rgba(255, 255, 255, 0.15) inset, 0 8px 0 0 #4cae4c, 0 8px 0 1px rgba(0, 0, 0, 0.4), 0 8px 8px 1px rgba(0, 0, 0, 0.5);
}
.btn3d.btn-info {
    box-shadow: 0 0 0 1px #5bc0de inset, 0 0 0 2px rgba(255, 255, 255, 0.15) inset, 0 8px 0 0 #46b8da, 0 8px 0 1px rgba(0, 0, 0, 0.4), 0 8px 8px 1px rgba(0, 0, 0, 0.5);
}
.btn3d.btn-warning {
    box-shadow: 0 0 0 1px #f0ad4e inset, 0 0 0 2px rgba(255, 255, 255, 0.15) inset, 0 8px 0 0 #eea236, 0 8px 0 1px rgba(0, 0, 0, 0.4), 0 8px 8px 1px rgba(0, 0, 0, 0.5);
}
.btn3d.btn-danger {
    box-shadow: 0 0 0 1px #c63702 inset, 0 0 0 2px rgba(255, 255, 255, 0.15) inset, 0 8px 0 0 #c24032, 0 8px 0 1px rgba(0, 0, 0, 0.4), 0 8px 8px 1px rgba(0, 0, 0, 0.5);
}
.btn3d:active.btn-default {
    box-shadow: none;
}
.btn3d:active.btn-primary {
    box-shadow: none;
}
.btn3d:active.btn-success {
    box-shadow: none;
}
.btn3d:active.btn-info {
    box-shadow: none;
}
.btn3d:active.btn-warning {
    box-shadow: none;
}
.btn3d:active.btn-danger {
    box-shadow: none;
}


/*-------------------------ฟรอมล็อกอิน */
.login-form {
	margin: 100px auto;
	max-width: 400px;
}

form[role=login] {
	background: #fff;
	padding: 10px 0 0 0;
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
}
	form[role=login] h2 {
		font-size: 26px;
		color: #5d5c5c;
		margin-bottom: 1em;
	}
	form[role=login] input,
	form[role=login] button,
	form[role=login] a.btn {
		font-size: 16px;
	}
	form[role=login] > div {
		line-height: 3em;
		margin: 1.5em 0 0 0;
		padding: 0 26px;
		background: #f2f2f2;
		border-bottom-left-radius: 10px;
		border-bottom-right-radius: 10px;
		-webkit-border-bottom-left-radius: 10px;
        -moz-border-radius-bottomleft: 10px;
        -webkit-border-bottom-right-radius: 10px;
        -moz-border-radius-bottomright: 10px;
	}
	form[role=login] > section {
		padding: 0 26px;
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
		background: #fff;
	}