@charset "utf-8";
/* CSS Document */
@font-face {
    font-family: 'krungsri_condensedbold';
    src: url('../../../font/krungsri_con_bol-webfont-webfont.eot');
    src: url('../../../font/krungsri_con_bol-webfont-webfont.eot?#iefix') format('embedded-opentype'),
         url('../../../font/krungsri_con_bol-webfont-webfont.woff2') format('woff2'),
         url('../../../font/krungsri_con_bol-webfont-webfont.woff') format('woff'),
         url('../../../font/krungsri_con_bol-webfont-webfont.ttf') format('truetype'),
         url('../../../font/krungsri_con_bol-webfont-webfont.svg#krungsri_condensedbold') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'krungsri_condensedmedium';
    src: url('../../../font/krungsri_con_med-webfont-webfont.eot');
    src: url('../../../font/krungsri_con_med-webfont-webfont.eot?#iefix') format('embedded-opentype'),
         url('../../../font/krungsri_con_med-webfont-webfont.woff2') format('woff2'),
         url('../../../font/krungsri_con_med-webfont-webfont.woff') format('woff'),
         url('../../../font/krungsri_con_med-webfont-webfont.ttf') format('truetype'),
         url('../../../font/krungsri_con_med-webfont-webfont.svg#krungsri_condensedmedium') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'krungsri_condensedregular';
    src: url('../../../font/krungsri_con-webfont-webfont.eot');
    src: url('../../../font/krungsri_con-webfont-webfont.eot?#iefix') format('embedded-opentype'),
         url('../../../font/krungsri_con-webfont-webfont.woff2') format('woff2'),
         url('../../../font/krungsri_con-webfont-webfont.woff') format('woff'),
         url('../../../font/krungsri_con-webfont-webfont.ttf') format('truetype'),
         url('../../../font/krungsri_con-webfont-webfont.svg#krungsri_condensedregular') format('svg');
    font-weight: normal;
    font-style: normal;
	
}
 
body{
font-family: 'krungsri_condensedregular' !important;
font-size: 13px;
margin:0;
background-color: #ffffff;
}
#header h1{
   text-align: left;
}
.col-25 .col-75{
 font-size: 100%;
 }

.head-sign-in-box { 
	margin:auto;
    padding: 20px;
} 

label {
    /*padding: 12px 12px 12px 0;*/
	padding:10px 12px 2px 0;
    display: inline-block;
	font-family: 'krungsri_condensedregular' !important;
}
.red {color:#f76f00;}
.col-25 {
    float: left;
    width: 30%;
    margin-top: 6px;
    font-weight: bold;
	 font-size: 100%;
}
.col-75 {
    float: left;
    width: 70%;
    margin-top: 6px;
	 font-size: 100%;
}
.col-50	
{
   float: left;
    width: 46%;
    margin: 1% 3% 0px 0px;
    font-size: 100%;
	font-family: 'krungsri_condensedregular' !important;
}
/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
	 font-size: 100%;
}
span.head_txt {
    font-size: 13px;
    font-weight: 900;
    width: 100%;
    
    color: #222222;
	font-family: 'krungsri_condensedregular' !important;
}
.head-detail-box { margin: 0 auto;}	
@media (max-width: 600px) { 
	.section{ padding: 20px !important;}
	.col-25, .col-75, input[type=submit] {
			width: 100%;
			margin-top: 0;	
	 }
	.img {width: 100%;} 
	.col-50 { width: 100%; }
	.detail_box_right { border-right: 0px !important; } 
} 
@media   (min-width: 768px) {
	.section-form	 { width: 750px;}
	.head-detail-box{ width: 750px;}
	 }
@media (min-width: 992px) {
	.section-form	 { width: 970px;}
	.head-detail-box { width: 970px;}
}
@media (min-width: 1200px) {
	.section-form	{ width: 1170px;}
	 .head-detail-box { width: 1170px;}
} 
hr {
    display: block;
    height: 3px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 3em 0;
    padding: 0;
    background-color: #dedede;
}
.detail_box {
	  background-color: #ffffffad;
      padding: 10px;
      border-radius: 6px;
      border: 1px solid #cccbcb;
}

	.section h1,h2{
    color: #222222;
    font-size: 1.5em;
    margin: 0; 
	font-family: 'krungsri_condensedmedium';	
}
.section p {
    color: #475965; 
}
.section {
    background: transparent url(../../images/e_learning/bghome.png) center top repeat-x;
    line-height: 20px;
    text-align: left;
    padding: 30px 40px;
}
.section-form { 
/* margin: 2.5em 0;  width:600px;*/
	margin:auto;
	border-radius: 5px;
    background-color: #f2f2f2;
    padding: 20px;
	margin-top: 20px;
}
 input[type=submit] {
    color: #554242;
    background-color: #ffd400;
    border: solid 0px #e8e8e8 !important;
    border-radius: 5px;
    padding: 5px;
    width:100px;
    font-family: 'krungsri_condensedmedium';
    transition-duration: 0.4s;
    cursor: pointer;
    
  }
  
  input[type=submit]:hover {
    background-color: #ffc800;
    box-shadow: 0 5px 10px 0 rgba(63,63,63,0.24), 0 3px 3px 0 rgba(63, 63, 63, 0.19);
  }

  input[type=button] {
    color: #ffd400;
    background-color: #554242;
    border: solid 0px #e8e8e8 !important;
    border-radius: 5px;
    padding: 5px;
    width:100px;
    font-family: 'krungsri_condensedmedium';
    transition-duration: 0.4s;
    cursor: pointer;
    
  }
  
  input[type=button]:hover {
    background-color: #554242;
    box-shadow: 0 5px 10px 0 rgba(63,63,63,0.24), 0 3px 3px 0 rgba(63, 63, 63, 0.19);
  }


  input[type=reset] {
    color: #554242;
    background-color: #bebebe;
    border: solid 0px #e8e8e8 !important;
    border-radius: 5px;
    padding: 5px;
    width:100px;
    font-family: 'krungsri_condensedmedium';
    transition-duration: 0.4s;
    cursor: pointer;

  }
  
  input[type=reset]:hover {
    background-color: #b6b5b3;
    box-shadow: 0 5px 10px 0 rgba(63,63,63,0.24), 0 3px 3px 0 rgba(63,63,63,0.19);
  }
  
.section-form input[type=text], input[type=password], select, textarea {
    width: 100%;
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    resize: vertical;
}