html {scroll-behavior: smooth;}
/*body {background-color:#c1f0c8;background-image: linear-gradient(#c1f0c8, #90c095);background-attachment:fixed; font-family:Sarabun; margin:0px 0px}*/
body {background-color:#c1f0c8; font-family:Sarabun; margin:0px 0px}
h1 {font-size:36px}
table {background-color:#ffffff}
tr {transition:0.3s}
tr:hover {background-color:#FDB}
.headtable {display:block; width:1px; background-color:#404660}
.headtablei2 {display:block; width:1px; background-color:#404660; top:58px}
.headtablei1 {border-collapse:collapse; position:sticky; top:60px}

.i2_link {text-decoration:none; font-size:12px; color:#fff; background-color:#333; padding:5px 8px; border-radius:6px; transition:0.3s}
.i2_link:hover {background-color:#0A0;}

.tablei1 {background-color:rgba(193,240,200,0.85); backdrop-filter: blur(4px); width:100%; position:fixed; top:60px}
.tablei1_detail {width:400px; height:118px; border-collapse:collapse}

.tablei2 {border-collapse:collapse; float:left}

.patientlink {text-decoration:none; font-weight:bold; color:#050; transition:0.3s}
.patientlink:hover {text-decoration:none; font-weight:bold; color:#090}

.headtitle {text-align:center; padding:50px 0px 0px 10px}
.homeicon {text-decoration:none; color:#000; transition:0.3s}
.homeicon:hover {text-decoration:underline; color:#084}
.addicon {text-decoration:none; color:#000; transition:0.3s}
.addicon:hover {text-decoration:underline; color:#084}

.icon_area {width:100%; float:left}
.icon {width:310px; height:450px; margin-left:auto; margin-right:auto; border:0px solid #000}

.btn_space{padding:10px; float:left}
.topbar {padding:0px 10px; position:fixed; background-color:rgba(193,240,200,0.85); backdrop-filter: blur(4px); width:100%; height:60px; z-index:999}
.topbari2 {padding:0px 10px; position:fixed; background-color:rgba(193,240,200,0.85); backdrop-filter: blur(4px); width:100%; height:60px; z-index:999}
.spacei2 {padding-top:60px}
.spacei1 {padding:60px 0px 0px 10px}

.indiv_tablehead {width:1010px;}

.bottom_area {display:block; width:100%; position:fixed; bottom:0px; z-index:9}
.bottom_area_sp {display:none;}
.bottom_menu {float:right; border:1px solid #333; padding:7px 0px; transition:0.3s; background-color:#404660; z-index:9}
.bottom_menu:hover {float:right; border:1px solid #333; background-color:#b0d0b7; color:#fff; padding:7px 0px; background-color:#d2f1d9; z-index:9}
.bottom_menu a{font-size:14px; font-weight:bold; text-decoration:none; color:#fff; background-color:#404660; padding:7px; transition:0.3s; z-index:9}
.bottom_menu a:hover{font-size:16px; color:#333; background-color:#b0d0b7; padding:7px 20px; z-index:9}

.bottom_menu_active {float:right; border:1px solid #333; background-color:#b0d0b7; color:#fff; padding:7px 10px; background-color:#d2f1d9; z-index:9}
.bottom_menu_a_active{color:#333; background-color:#b0d0b7; padding:7px 10px; z-index:9}

.tablerow {font-size:14px}

.linkbtnarea {padding:2.5px; float:left}
.linkbtn {text-decoration:none; font-size:12px; font-weight:bold; color:#fff; background-color:#333; padding:5px 8px; border-radius:6px; transition:0.3s}
.linkbtn:hover{color:#fff; background-color:#080;}

.chartarea {float:left; padding:5px 10px 5px 0px}
.chartsize {width:350px; height:270px; background-color:#fff; padding:5px; border:1px solid #AAA; float:left}
.chartspace {width:20px; height:270px; float:left}

.submitbtn {appearance: none;background-color: #333;border-radius: 6px;color:rgb(255, 255, 255);cursor: pointer;display: inline-block;font-family: Sarabun;font-size: 12px;font-weight: bold;padding: 4px 9px 2px 9px;position: relative;user-select: none;-webkit-user-select: none;touch-action: manipulation;vertical-align: middle;}

@media screen and (max-width: 1505px) {
	.chartsize {width:285px; height:210px}
}

@media screen and (max-width: 800px) {
	h1 {font-size:28px}
	.headtable {display:block}
	.bottom_area {display:none;}
	.homeicon {display:none}
	.bottom_area_sp {display:block; width:100%; position:fixed; bottom:0px; z-index:9; text-align:center; background-color:#404660}
	.bottom_menu_sp {width:16.29%; float:left; padding:7px 0px; transition:0.3s; background-color:#404660; z-index:9}
	.bottom_menu_sp:hover {float:left; background-color:#d2f1d9; color:#fff; padding:7px 0px; background-color:#d2f1d9; z-index:9}
	.bottom_area_sp a{font-size:10px; font-weight:bold; text-decoration:none; color:#fff; background-color:#404660; padding:7px 0px; transition:0.3s; z-index:9}
	.bottom_area_sp a:hover{color:#333; background-color:#d2f1d9; padding:7px 0px; z-index:9}
	.headtitle {text-align:center; padding:100px 0px 0px 0px}
	.chartsize {width:350px; height:270px}
}

@media screen and (max-width: 450px) {
	.bottom_menu_sp {width:16.2%;}
	.topbari2 {height:140px}
	.spacei2 {padding-top:120px}
	.headtablei2 {top:140px}
	.indiv_tablehead {width:100%;}
	.sp_table {display:none}
	.tablei1 {top:115px}
	.tablei2 {padding:15px 0px 0px 0px}
	.spacei1 {padding:135px 0px 0px 10px}
	.headtablei1 {top:140px}
	.tablei1_detail {width:98%}
	.chartsize {width:97%; height:300px}
	.chartarea {float:left; padding:5px 10px 5px 0px; width:100%}
	.chartspace {width:100%; height:30px;}
}

@media screen and (max-width: 390px) {
	.bottom_menu_sp {width:16.1%;}
	.topbari2 {height:140px}
	.spacei2 {padding-top:120px}
	.headtablei2 {top:120px}
	.indiv_tablehead {width:100%;}
	.tablei1 {top:115px}
	.tablei2 {padding:15px 0px 0px 0px}
	.spacei1 {padding:135px 0px 0px 10px}
	.headtablei1 {top:140px}
	.tablei1_detail {width:98%}
	.chartsize {width:97%; height:280px}
	.chartarea {float:left; padding:5px 10px 5px 0px; width:100%}
	.chartspace {width:100%; height:15px;}
}