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

}
@font-face {
    font-family: 'THSarabunNew';
    src: url('../Font/thsarabunnew_bolditalic-webfont.eot');
    src: url('../Font/thsarabunnew_bolditalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('../Font/thsarabunnew_bolditalic-webfont.woff') format('woff'),
         url('../Font/thsarabunnew_bolditalic-webfont.ttf') format('truetype');
    font-weight: bold;
    font-style: italic;

}
@font-face {
    font-family: 'THSarabunNew';
    src: url('../Font/thsarabunnew_italic-webfont.eot');
    src: url('../Font/thsarabunnew_italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('../Font/thsarabunnew_italic-webfont.woff') format('woff'),
         url('../Font/thsarabunnew_italic-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;

}
@font-face {
    font-family: 'THSarabunNew';
    src: url('../Font/thsarabunnew_bold-webfont.eot');
    src: url('../Font/thsarabunnew_bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../Font/thsarabunnew_bold-webfont.woff') format('woff'),
         url('../Font/thsarabunnew_bold-webfont.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

html,body{
	font-family: 'THSarabunNew';
	font-size : 15px;
	cursor: default;
}

.body-iframe{
	background-color: #fff0;
}

.wrapper-slides {
	width: 1200px;
	height: 500px;
}

.footer{
	margin: .5em 0 .5em 0;
}
/* Font */
.font-bold{
	font-weight : bold;
}
.font-dotted{
	cursor: default;
	border-bottom: black 1px dotted;
	/* letter-spacing: 0.2cm;
	word-spacing: 0.2cm; */
	padding-left: 1.8em;
	padding-right: 1.8em;
}
.font-dotted2{
	cursor: default;
	border-bottom: black 1px dotted;
	/* letter-spacing: 0.2cm;
	word-spacing: 0.2cm; */
	padding-left: 1em;
	padding-right: 1em;
}
.bordermap{
	border-width: 1px;
	border-color: black;
	border-style: solid;
}

/*เอาเส้นใต้ออก*/
A:link{
	text-decoration:none;
}
A:visited{
	text-decoration:none;
}
.a-white {
	color: white;
}
a:focus, a:hover{
	color: black;
}

/* Form pointer */
select, option{
	font-size : 15px;
	cursor: pointer;
}
.cursor_default{
	cursor: default;
}
.cursorpointer{
	cursor: pointer;
}
hr{
	margin-top: 16px;
	margin-bottom: 16px;
	border-top: 1px solid #020202;
}
/*------------------- Table ----------------*/
th{
	text-align: center;
}
thead{
	border: 1px solid #ddd;
}
.table > tbody > tr > td, .table > tbody > tr > th, .table > tfoot > tr > td, .table > tfoot > tr > th, .table > thead > tr > td, .table > thead > tr > th{
	vertical-align: inherit;
	padding: 5px;
	line-height: 1.42857143;
	border-top: 1px solid #ddd;
}
table{
	border: 2px solid #ddd;
}

.table-de{
	border: 0;
}

.table_status{
	border-top: 0;
}

/*-------------------- Form -------------------*/
.form-select {
	width: 100%;
	overflow: visible;
	margin: 0 1em 1em 0;
	font-size: 1em;
	height: auto;
	padding-left: .5em;
	padding-top: .5em;
	border-top: none;
	border-left: none;
	border-right: none;
	border-bottom: ridge whitesmoke;
	background-color: transparent;
}

.form-control{
	width: 90%;
	font-size: 1em;
	height: auto;
}
.form-control2{
	font-size: 1em;
	height: auto;
}


input {
	overflow: visible;
	margin: 0 1em 1em 0;
	font-size: 1em;
	height: auto;
	padding-left: .5em;
	padding-top: .5em;
	border-top: none;
	border-left: none;
	border-right: none;
	border-bottom: ridge whitesmoke;
	background-color: transparent;
}

/*ตัวใหม่
input {
	overflow: visible;
	margin: .3em;
	padding-left: .2em;
	padding-right: .2em;
	font-size: 1em;
	height: 2em;
}
*/
input[type="radio"]{
	width: auto;
	overflow: visible;
	margin: 0 1em 0 1em;
	/*font-family: rsu_light;*/
	font-size: 1em;
	/*height: 2.5em;*/
	height: auto;
	padding: 0;
	border: none;
	background-color: transparent;
	cursor: pointer;
}
input[type="file"]{
	cursor: pointer;
}
.input_buttom {
	width: 100%;
	padding: 1em 0 0 0;
	margin: 0px;
	overflow: visible;
	font-family: rsu_light;
	font-size: 1em;
	height: auto;
	border: none;
	background-color: transparent;
}

.input_20 {
	width: 20%;
}.input_50 {
	width: 50%;
}
.input_200px {
	width: 200px;
}

.select_nobox {
	width: 100%;
	overflow: visible;
	margin: 0 1em 1em 0;
	font-family: rsu_light;
	font-size: 1em;
	/*height: 2.5em;*/
	height: auto;
	padding-left: .5em;
	padding-top: .5em;
	border-top: none;
	border-left: none;
	border-right: none;
	border-bottom: ridge whitesmoke;
	background-color: transparent;
}

/*-----------------	button	-------------------*/
bottom{
	background-color: darkgreen;
	color: white;
	border: darkgreen;
}

.button_form {
	border: 1px solid black;
	background-color: #ddd;
	height: 2em;
	font-size: 1em;
	color: #000;
}

.buttom-edit-status {
	width: auto;
	padding: 0;
	margin: 0;
	overflow: visible;
	font-family: rsu_light;
	font-size: 1em;
	height: auto;
	border: none;
	background-color: transparent;
}
.button_full{
	width: 100%;
	border: aliceblue;
	background-color: #007bff;
	height: 4vw;
	font-size: 1.3em;
	min-height: 35px;
	color: white;
}
.button-map{
	width: 30%;
	max-width : 200px;
	height: 35px;
	background-color: darkgreen;
	color: white;
	border: darkgreen;
	border-radius: 3px;
}
.button_login{
	width: 100%;
	border: aliceblue;
	background-color: gray;
	height: 2.5em;
	font-size : 1em;
	color: #000;
	border-radius: 3px;
}
.button45{
	width: 45%;
	border: aliceblue;
	background-color: #007bff;
	height: 2.5em;
	font-size : 1.3em;
	color: white;
}
.button_submit{
	border: aliceblue;
	background-color: #007bff;
	height: 2.5em;
	font-size : 1.3em;
	color: white;
	border-radius: 5px;
}
.button15{
	width: 15%;
	border: aliceblue;
	background-color: #007bff;
	height: 2em;
	font-size: 1.3em;
	color: white;
}
.button20{
	width: 20%;
	border: aliceblue;
	background-color: #007bff;
	height: 2em;
	font-size: 1.3em;
	color: white;
}
.button_edit{
	width: 100%;
	border: aliceblue;
	background-color: #0000;
	color: #0e06fb;
}
.button_edit2{
	border: aliceblue;
	background-color: #0000;
	color: #0e06fb;
}
.button_showdata{
	width: 100%;
	border: aliceblue;
	background-color: #0000;
	color: #0e06fb;
}

.button_graph{
	background-color: darkgray;
	border-radius: 5px;
	
	border: none;
	padding: 8px 16px;
	vertical-align: middle;
	overflow: hidden;
	text-decoration: none;
	text-align: center;
	white-space: nowrap;
	
	display: block;
	user-select: none;
}
.graph-button:hover{
	color:#fff !important;
	background-color:#0004ffc2 !important
}

p.thick {
  font-weight: bold;
}

/*-----------------	Text Size	-------------------*/
.text-05em {
	font-size : .5em;
}
.text-07em {
	font-size : .7em;
}
.text-1em {
	font-size : 1em;
}
.text-1-1em {
	font-size : 1.1em;
}
.text-1-2em {
	font-size : 1.2em;
}
.text-1-3em {
	font-size : 1.3em;
}
.text-1-5em {
	font-size : 1.5em;
}
.text-1-7em {
	font-size : 1.7em;
}
.text-2em {
	font-size : 2em;
}
.text-2-3em {
	font-size : 2.3em;
}
.text-2-5em {
	font-size : 2.5em;
}
.text-3em {
	font-size : 3em;
}
.text-red {
	cursor: default;
	color : red;
}
.text-blue {
	color : blue;
}
.red{
	color : red;
}
.text-orange {
	color : #ff7800;
}

.width_50 {
	width: 50%;
}
.width_20 {
	width: 20%;
}

/* ----------- margin ----------- */
.margin-left-1-8 {
	margin-left: 1.8em;
}

.margin0 {
	margin: 0;
}
.margintop_2 {
	margin-top: 2em;
}

.logo-datastudent {
	width: 10vw;
	min-width: 2em;
	float: center;
	margin-right: -9vw;
}
.photo-student {
	width: 8vw;
	margin: 1em;
	float: right;
	border: solid 1px black;
}
.block-center {
	float: center;
}

.pad_mar_0 {
	padding: 0px;
	margin: 0px;
}

/* ----------- about ------------*/
.img-about{
	width: 70%;
	min-width: 400px;
	height: 420px;
}
.img-de{
	width: 10vw;
	min-width: 80px;
	border: 1px solid #f0f0f0 !important;
}

.text-indent{
	text-indent: 2.5em;
}
.title{
	font-weight: bold;
}
.bold{
	font-weight: bold;
}

/* ---------------------- */
.text-pdl16{
	padding-left: 16px;
	cursor: default;
}
.text-pdlr6{
	padding-right: 16px;
	cursor: default;
}
.radioleft1em{
	margin-left : 1em;
}

.logouru{
	height: 5vw;
	width: 5vw
	min-width: 150px;
	min-height: 150px;
}

.bg-darkcyan{
	background-color: darkcyan;
}
.white{
	color: white;
}

.banner-home{
	width: 100%;
	height: 40vw;
	min-height: 200px;
}

.is_elder_title {
	height: 2.5em;
	background-color: #d7d7d7;
	margin: 1em 0;
	padding: .5em 0 0 .5em;
}

/*============= width =============*/
.width-50{
	width: 50%;
}
.width-100{
	width: 100%;
}
.width-auto{
	width: auto;
}

/*============= Mm_elder =============*/
.btn {
	display: inline-block;
	font-weight: 400;
	color: #212529;
	text-align: center;
	vertical-align: middle;
	cursor: pointer;
	user-select: none;
	background-color: transparent;
	border: 1px solid black;
	padding: .375rem .75rem;
	font-size: 1rem;
	line-height: 1.5;
	border-radius: .25rem;
	transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}