/*==============================
	Define Style
	Update: 24/03/2022
  ==============================*/
  *{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
  img {vertical-align:middle}
  .body_content{
	  width: 100%;
	  min-width:350px; max-width:1442px;
	  margin:0 auto;
	  padding: 0 0.4em;
  }
  @media (max-width: 52.375em) {
	  .body_content{
		  width: 100%;
		  min-width:100%; max-width:100%;
	  }
  }
  
  .content{
	  flex: 1 1 auto;
  }
  .layout{
	  display: flex; 
	  flex-flow: column; 
	  min-height: calc(100vh - 75px);
  }
  .footer{
	  color: #666;
	  font-size: 0.89em;
	  background-color: #f2f2f2;
	  padding: 25px 40px;
	  width: 100%;
  }
  .footer div{
	  color: #666;
  }
  
  .fl{float:left;}
  .fr{float:right;}
  .fc{clear:both;}
  
  /*flexbox CSS3*/
  .fcol{
	  display: flex;
	  flex-direction: column;
  }
  .frow{
	  display: flex;
	  flex-direction: row;
  }
  .fwr{ flex-wrap: wrap; }
  .fcc{ justify-content: center; align-items: center; }
  .fg0{ flex-grow: 0; }
  .fg1{ flex-grow: 1; }
  .fg2{ flex-grow: 2; }
  .fg3{ flex-grow: 3; }
  .fg4{ flex-grow: 4; }
  .fg5{ flex-grow: 5; }
  .fg6{ flex-grow: 6; }
  .fg7{ flex-grow: 7; }
  .fg8{ flex-grow: 8; }
  .fg9{ flex-grow: 9; }
  .fg10{ flex-grow: 10; }
  
  .tl{text-align: left;}
  .tr{text-align: right;}
  .tc{text-align: center;}
  .va{ vertical-align: middle; }
  
  .p0{ padding:0; }
  .p1{ padding:3px; }
  .p2{ padding:5px; }
  .p3{ padding:8px; }
  .p4{ padding:10px; }
  .p5{ padding:15px; }
  .p6{ padding:20px; }
  
  .pt0{ padding-top:0; }
  .pt1{ padding-top:3px; }
  .pt2{ padding-top:5px; }
  .pt3{ padding-top:8px; }
  .pt4{ padding-top:10px; }
  .pt5{ padding-top:15px; }
  .pt6{ padding-top:20px; }
  
  .pb0{ padding-bottom:0; }
  .pb1{ padding-bottom:3px; }
  .pb2{ padding-bottom:5px; }
  .pb3{ padding-bottom:8px; }
  .pb4{ padding-bottom:10px; }
  .pb5{ padding-bottom:15px; }
  .pb6{ padding-bottom:20px; }
  
  .ptb0{ padding-top:0; padding-bottom:0; }
  .ptb1{ padding:3px 0; }
  .ptb2{ padding:5px 0; }
  .ptb3{ padding:8px 0; }
  .ptb4{ padding:10px 0; }
  .ptb5{ padding:15px 0; }
  .ptb6{ padding:20px 0; }
  
  .m0a{ margin:0 auto; }
  .m0{ margin:0; }
  .m1{ margin:3px; }
  .m2{ margin:5px; }
  .m3{ margin:8px; }
  .m4{ margin:10px; }
  .m5{ margin:15px; }
  .m6{ margin:20px; }
  
  .mt0{ margin-top:0; }
  .mt1{ margin-top:3px; }
  .mt2{ margin-top:5px; }
  .mt3{ margin-top:8px; }
  .mt4{ margin-top:10px; }
  .mt5{ margin-top:15px; }
  .mt6{ margin-top:20px; }
  
  .mb0{ margin-bottom:0; }
  .mb1{ margin-bottom:3px; }
  .mb2{ margin-bottom:5px; }
  .mb3{ margin-bottom:8px; }
  .mb4{ margin-bottom:10px; }
  .mb5{ margin-bottom:15px; }
  .mb6{ margin-bottom:20px; }
  
  .mtb0{ margin-bottom:0; margin-top:0; }
  .mtb1{ margin:3px 0; }
  .mtb2{ margin:5px 0; }
  .mtb3{ margin:8px 0; }
  .mtb4{ margin:10px 0; }
  .mtb5{ margin:15px 0; }
  .mtb6{ margin:20px 0; }
  
  .w1{ 	width:10%; 	}
  .w2{ 	width:20%; 	}
  .w3{ 	width:30%; 	}
  .w4{ 	width:40%; 	}
  .w5{ 	width:50%; 	}
  .w6{ 	width:60%; 	}
  .w7{ 	width:70%; 	}
  .w8{ 	width:80%; 	}
  .w9{ 	width:90%; 	}
  .w10{ 	width:100%; }
  .w1_{ 	width:15%; 	}
  .w2_{ 	width:25%; 	}
  .w3_{ 	width:35%; 	}
  .w4_{ 	width:45%; 	}
  .w5_{ 	width:55%; 	}
  .w6_{ 	width:65%; 	}
  .w7_{ 	width:75%; 	}
  .w8_{ 	width:85%; 	}
  .w9_{ 	width:95%; 	}
  
  .row::after {
	  content: "";
	  clear: both;
	  display: table;
  }
  
  .r1{	-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;	}
  .r2{	-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;	}
  .r3{	-moz-border-radius:8px;-webkit-border-radius:8px;border-radius:8px;	}
  .r4{	-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;	}
  .r5{	-moz-border-radius:15px;-webkit-border-radius:15px;border-radius:15px;	}
  .r6{	-moz-border-radius:20px;-webkit-border-radius:20px;border-radius:20px;	}
  .r{	-moz-border-radius:100%;-webkit-border-radius:100%;border-radius:100%;	}
  
  .rt0{
	  -webkit-border-top-left-radius: 0;
	  -webkit-border-top-right-radius: 0;
	  -moz-border-radius-topleft: 0;
	  -moz-border-radius-topright: 0;
	  border-top-left-radius: 0;
	  border-top-right-radius: 0;
  }
  .rb0{
	  -webkit-border-bottom-right-radius: 0;
	  -webkit-border-bottom-left-radius: 0;
	  -moz-border-radius-bottomright: 0;
	  -moz-border-radius-bottomleft: 0;
	  border-bottom-right-radius: 0;
	  border-bottom-left-radius: 0;
  }
  
  .s1{	-webkit-box-shadow:0px 0px 3px #A3A3A3;-moz-box-shadow:0px 0px 3px #A3A3A3;box-shadow:0px 0px 3px #A3A3A3;	}
  .s2{	-webkit-box-shadow:0px 0px 5px #A3A3A3;-moz-box-shadow:0px 0px 5px #A3A3A3;box-shadow:0px 0px 5px #A3A3A3;	}
  .s3{	-webkit-box-shadow:0px 0px 8px #A3A3A3;-moz-box-shadow:0px 0px 8px #A3A3A3;box-shadow:0px 0px 8px #A3A3A3;	}
  .s4{	-webkit-box-shadow:0px 0px 10px #A3A3A3;-moz-box-shadow:0px 0px 10px #A3A3A3;box-shadow:0px 0px 10px #A3A3A3;	}
  .s5{	-webkit-box-shadow:0px 0px 15px #A3A3A3;-moz-box-shadow:0px 0px 15px #A3A3A3;box-shadow:0px 0px 15px #A3A3A3;	}
  .s6{	-webkit-box-shadow:0px 0px 20px #A3A3A3;-moz-box-shadow:0px 0px 20px #A3A3A3;box-shadow:0px 0px 20px #A3A3A3;	}
  
  .tra0{	-moz-transition:all 100ms ease-in;	-webkit-transition:all 100ms ease-in;	-o-transition:all 100ms ease-in;	transition:all 100ms ease-in;	}
  .tra1{	-moz-transition:all 200ms ease-in;	-webkit-transition:all 200ms ease-in;	-o-transition:all 200ms ease-in;	transition:all 200ms ease-in;	}
  .tra2{	-moz-transition:all 400ms ease-in;	-webkit-transition:all 400ms ease-in;	-o-transition:all 400ms ease-in;	transition:all 400ms ease-in;	}
  .tra3{	-moz-transition:all 600ms ease-in;	-webkit-transition:all 600ms ease-in;	-o-transition:all 600ms ease-in;	transition:all 600ms ease-in;	}
  .tra4{	-moz-transition:all 800ms ease-in;	-webkit-transition:all 800ms ease-in;	-o-transition:all 800ms ease-in;	transition:all 800ms ease-in;	}
  .tra5{	-moz-transition:all 1000ms ease-in;	-webkit-transition:all 1000ms ease-in;	-o-transition:all 1000ms ease-in;	transition:all 1000ms ease-in;	}
  
  
  .badge{
	  float: right;
	  margin-top: -10%;
	  padding: 0.05em;
	  min-width: 1.9em;
	  min-height: 1.9em;
	  font-size: 1em;
  }
  
  .badge_abs{
	  position: absolute;
	  float: right;
	  margin-top: -15px;
	  margin-left: -15px;
	  padding: 0.05em;
	  min-width: 1.9em;
	  min-height: 1.9em;
	  font-size: 1em;
  }
  
  .badge_point{
	  float: right;
	  margin-top: -5px;
	  margin-left: -5px;
	  padding: 0.05em;
	  min-width: 1.5em;
	  min-height: 1.5em;
  }
  
  .badge_dot{
	  position: absolute;
	  float: right;
	  margin-top: -5px;
	  padding: 0.05em;
	  min-width: 0.5em;
	  min-height: 0.5em;
  }
  
  .badge, .badge_abs, .badge_point, .badge_dot{
	  -moz-border-radius:100%;-webkit-border-radius:100%;border-radius:100%;
	  background: #d3071c;
	  text-align: center;
	  color: #FFF;
  }
  
  .sticky{
	  position: -webkit-sticky;
	  position: sticky;
	  top: 0;
	  z-index: 998;
  }
  
  .bold{
	  font-size: 1.5em;
  }
  .subtitle, .subtext{
	  font-size: 0.88em;
  }
  .subtitle{
	  line-height: 20px;
	  color: #999999;
  }
  .text-dot, .text-dot div{
	  text-overflow: ellipsis;
	  overflow: hidden;
	  white-space: nowrap;
  }
  
  /*==============================
	  Responsive Hide
	  xs	Extra small devices		Phones (768px)
	  sm 	Small devices			Tablets (768px)
	  md 	Medium devices			Desktops (992px)
	  lg 	Large devices			Desktops (1200px)
  ==============================*/
  @-ms-viewport {
  width: device-width;
  }
  .hidden{
  display: none !important;
  }
  .visible-xs,.visible-sm,.visible-md,.visible-lg {
  display: none !important;
  }
  @media (max-width: 767px) {
  .visible-xs {
	  display: block !important;
  }
  .hidden-xs{
	  display: none !important;
  }
  .w10-xs{
	  width:100%;
  }
  .tc-xs{
	  text-align: center;
  }
  }
  @media (min-width: 768px) and (max-width: 991px) {
  .visible-sm {
	  display: block !important;
  }
  .hidden-sm{
	  display: none !important;
  }
  .w10-sm{
	  width:100%;
  }
  .tc-sm{
	  text-align: center;
  }
  }
  @media (min-width: 992px) and (max-width: 1199px) {
  .visible-md {
	  display: block !important;
  }
  .hidden-md{
	  display: none !important;
  }
  .w10-md{
	  width:100%;
  }
  .tc-md{
	  text-align: center;
  }
  }
  @media (min-width: 1200px) {
  .visible-lg {
	  display: block !important;
  }
  .hidden-lg{
	  display: none !important;
  }
  .w10-lg{
	  width:100%;
  }
  .tc-lg{
	  text-align: center;
  }
  }
  
  /*==============================
	  Print
  ==============================*/
  @media print {
  body * {
	  visibility: hidden;
  }
  .see2print, .see2print * {
	  visibility: visible;
  }
  .see2print {
	  position: absolute;
	  left: 0;
	  top: 0;
  }
  }
  
  /*==========================================
	  Base
  ==========================================*/
  body{
	  padding:0;
	  margin:0;
	  background:#FFFFFF;
	  /*background:#F5F5F7;*/
  }
  body, a, table, div{
  color: #1d1d1f;
  font-size:1em;
  line-height:1.8em;
  }
  a, .link{
	color:#0070c9 !important;
	text-decoration:none !important;
  }
  .link{
	  cursor: pointer;
  }
  hr, .hr{
	  border:0;
	  margin-top:0.5em;
	  margin-bottom:0.5em;
	  height: 1px;
	  background:#E5E5E5;
  }
  hr{
	  background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.30), rgba(0,0,0,0));
	  background-image:    -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.30), rgba(0,0,0,0));
	  background-image:     -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.30), rgba(0,0,0,0));
	  background-image:      -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.30), rgba(0,0,0,0));
  }
  .text, .text-indent{
	  white-space: normal;
	  overflow: hidden;
	  text-overflow: ellipsis;
	  line-height: 1.8em;
  }
  .text-indent{
	  text-indent: 1.8em;
  }
  .cut-text{ 
  text-overflow: ellipsis;
  overflow: hidden; 
  white-space: nowrap;
  }
  #alert_line, .alert_line{
  position: fixed;
  padding:10px 15px;
  top: 5vh;
  left: 50%;
  transform: translate(-50%, 0%);
  min-width: 20vw;
  z-index: 9999;
  text-align:center;
  background:#FFFBE8;
  border:0.5px solid #CCC;
  -moz-border-radius:8px;-webkit-border-radius:8px;border-radius:8px;
  
	  /*padding:10px;
	  position: fixed;
	  width: 100%;
	  top:0;
	  left:0;
	  -webkit-box-shadow: 0px 1px 8px 0px rgba(50, 50, 50, 0.2);
	  -moz-box-shadow:    0px 1px 8px 0px rgba(50, 50, 50, 0.2);
	  box-shadow:         0px 1px 8px 0px rgba(50, 50, 50, 0.2);
	  z-index: 9999;
	  text-align:center;
	  background:#FFFBE8;
	  border-bottom:0.5px solid #CCC;*/
  }
  #alert, .alert{
	  padding:10px;
	  webkit-border-radius: 5px;
	  -moz-border-radius: 5px;
	  border-radius: 5px;
	  z-index: 9999;
	  text-align:center;
	  background:#FFFBE8;
	  border:0.5px solid #CCC;
  }
  .info_line{
  padding:10px 8px;
  background:#F2F9FF;
  border:0.5px solid #C1E3FE;
  -moz-border-radius:8px;-webkit-border-radius:8px;border-radius:8px;
  }
  .page_content{
	  display: none;
	  position: relative;
	  -webkit-animation-duration: 3s;
	  animation-duration: 3s;
  }
  .progressbar {
	  margin: 0;
	  background-color: #f3f3f3;
  }
  .progressbar > div {
	  height: 5px;
	  margin: 0;
	  background-color: #59ACFF;
	  background-image: -webkit-gradient(linear, 0 0, 100% 100%,
						  color-stop(.25, rgba(255, 255, 255, .2)), color-stop(.25, transparent),
						  color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .2)),
						  color-stop(.75, rgba(255, 255, 255, .2)), color-stop(.75, transparent),
						  to(transparent));
	  background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
						  transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
						  transparent 75%, transparent);
	  background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
						  transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
						  transparent 75%, transparent);
	  background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
						  transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
						  transparent 75%, transparent);
	  background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
						  transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
						  transparent 75%, transparent);
	  background-image: linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
						  transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
						  transparent 75%, transparent);
  }
  
  #mask {
	  display: none;
	  position: fixed; left: 0; top: 0; 
	  z-index: 10;
	  width: 100%; height: 100%;
	  z-index: 888;
	  backdrop-filter: blur(15px) contrast(80%);
	  -webkit-backdrop-filter: blur(15px) contrast(80%);
  }
  .box_popup{
	  display:none;
	  background: #FFF;
	  padding: 8px; 	
	  padding-top: 35px;
	  float: left;
	  position: fixed;
	  top: 50%; left: 50%;
	  z-index: 889;
	  border-radius:10px 10px 10px 10px;
	  -moz-border-radius: 10px; /* Firefox */
	  -webkit-border-radius: 10px; /* Safari, Chrome */
	  -webkit-box-shadow:0px 10px 20px -13px #686868;-moz-box-shadow:0px 10px 20px -13px #686868;box-shadow:0px 10px 20px -13px #686868;
  }
  .popup_close{
	  position: absolute;
	  top: 10;
	  right: 10;
	  background:url(https://ecmo.medicine.psu.ac.th/themes/images/x.png) no-repeat;
	  background-size: 20px 20px;
	  width:20px;
	  height:20px;
  }
  .previous_popup{
	position: absolute;
	top: 8;
	left: 10;
	cursor: pointer;
	z-index: 888;
  }
  
  .popup_data{
	  padding: 0px 0.8em;
	  width:50vw;
	  height:80vh;
	  overflow: auto;
  }
  .popup_data_mini{
	  padding: 0px 0.8em;
	  width:30vw;
	  height:30vh;
	  overflow: auto;
  }
  .popup_data_max{
	  padding: 0px 0.8em;
	  width:80vw;
	  height:80vh;
	  overflow: auto;
  }
  @media screen and (max-width: 52.375em) {
	  .popup_data, .popup_data_mini, .popup_data_max{
		width:99vw;
		height:96vh;
	  }
	  .popup_close{
		top: 10vh;
	  }
	  #alert_line{
	  	min-width: 95vw;
	  }
  }
  /*==============================
	  Input
  ==============================*/ 
  
  .label-input{
	  /*font-size: 0.87em;*/
  }
  
  input, textarea, select{
	border: 0.5px solid #d6d6d6;
	font-size: 1.1em;
	font-weight: 400;
	color: #000;
	background:#FFF;
	padding: 7px 8px 7px 10px;
	width: auto;
	-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;
	margin: 0 0 27px;
	margin-bottom: 10px;
	transition: all 0.3s ease-in-out;
}
input:disabled, textarea:disabled, select:disabled, input:disabled {
	background: #F5F5F5;
}
input[type="date"]{
	font-size:1.1em;
}
textarea{
	font-size:16px;
	width: 100%;
}
input:focus , textarea:focus , select:focus {
  border: 1px solid #0070c9;
  box-shadow: 0 0 0 3px rgba(0,112,201,.2);
  outline: none; 
  /*-moz-box-shadow: 0px 0px 8px 2px rgba(23,147,255,0.41); 
  -webkit-box-shadow: 0px 0px 8px 2px rgba(23,147,255,0.41); 
  box-shadow: 0px 0px 8px 2px rgba(23,147,255,0.41);
  box-shadow: 0px 10px 20px -13px rgba(32, 56, 117, 0.35);*/
}
  /*<input type="checkbox" id="" class="checkbox" /><label for=""></label>*/
  .checkbox {
	  display: none;
  }
  .checkbox + label {
	  cursor: pointer;
	  background-color: #fafafa;
	  border: 1px solid #cacece;
	  box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05);
	  padding: 0.6em;
	  border-radius: 3px;
	  display: inline-block;
	  position: relative;
  }
  .checkbox + label:active, .checkbox:checked + label:active {
	  box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);
  }
  .checkbox:checked + label {
	  background-color: #e9ecee;
	  color: #99a1a7;
	  border: 1px solid #adb8c0;
	  box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05), inset 15px 10px -12px rgba(255,255,255,0.1);
  }
  .checkbox:checked + label:after {
	  content: '\2714';
	  position: absolute;
	  top: -5px;
	  left: 3px;
  }
  .radio {
	  display: none;
  }
  .radio + label {
	  cursor: pointer;
	  -webkit-appearance: none;
	  background-color: #fafafa;
	  border: 1px solid #cacece;
	  box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05);
	  padding: 9px;
	  border-radius: 50px;
	  display: inline-block;
	  position: relative;
  }
  .radio:checked + label:after {
	  content: ' ';
	  width: 12px;
	  height: 12px;
	  border-radius: 50px;
	  position: absolute;
	  top: 3px;
	  background: #99a1a7;
	  box-shadow: inset 0px 0px 10px rgba(0,0,0,0.3);
	  text-shadow: 0px;
	  left: 3px;
	  font-size: 32px;
  }
  .radio:checked + label {
	  background-color: #e9ecee;
	  color: #99a1a7;
	  border: 1px solid #adb8c0;
	  box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05), inset 15px 10px -12px rgba(255,255,255,0.1), inset 0px 0px 10px rgba(0,0,0,0.1);
  }
  .radio + label:active, .radio:checked + label:active {
	  box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);
  }
  .label-view{
	  opacity: 0.8;
	  margin-top: 1.3em;
  }
  .data-view{
	  font-size: 120%;
  }
  .otp-input{
	  margin: 10px;
  }
  .otp-input input{
	border-radius: 0.25rem !important;
	min-width: auto !important;
	width: 3rem !important;
	height: 3rem !important;
	margin: 0.5rem;
	text-align: center;
	text-shadow: grey 0px 0px 0px;
    outline: 2px solid transparent;
    outline-offset: 2px;
  }
  /*==============================
	  search input
  ==============================*/
  .search_input{
	  background-image: url(images/search.png);
	  background-size: 20px 20px;
	  background-repeat: no-repeat;
	  background-position: 10px 8px; 
	  padding-left: 40px;
  }
  .search_but{
	  width: 30px;
	  height: 30px;
	  background-image: url(images/drop-down-arrow.png);
	  background-size: 10px 10px;
	  background-repeat: no-repeat;
	  background-position: 10px 10px; 
	  position: absolute;
	  margin-left: -35px;
	  margin-top: 5px;
	  cursor: pointer;
  }
  .search_but:hover{
	  background-color: #eee; 
	  -moz-border-radius:100%;-webkit-border-radius:100%;border-radius:100%;
  }
  @media screen and (max-width: 52.375em) {
	  .search_input, select, textarea, 
		  input[type="text"], input[type="password"], 
		  input[type="date"], input[type="datetime"], input[type="datetime-local"], 
		  input[type="file"]{
		  width: 100%;
	  }
  }
  @media (min-width: 600px) {
	  .search_input, select, input[type="text"], input[type="password"]{
		  min-width:350px;
	  }
  }
  /*==============================
	  Box
  ==============================*/
  .wintitle{
	  padding:8px 10px;
	  font-weight:bold;
	  text-align:center;
	  color:#000;
	  text-shadow:0px 0.5px 0px #ffffff;
  }
  .winbody{
	  background:#FFF;
  }
  .pab{
	  position: absolute;
  }
  .help{
	  display: none;
	  margin-left: 5px;
	  position: absolute;
	  z-index: 9999;
  }
  .curpoint{
	  cursor: pointer;
  }
  .noselect{
	  -webkit-touch-callout: none;
	  -webkit-user-select: none;
	  -khtml-user-select: none;
	  -moz-user-select: none; 
	  -ms-user-select: none;
	  user-select: none; 
  }
  
  @keyframes preloader {
  from {
	  transform: rotate(0deg);
  }
  to {
	  transform: rotate(360deg);
  }
  }
  .preloader {
  	position: relative;
  }
  .preloader:before {
	z-index: 1;
	content: '';
	position: absolute;
	top: 0px;
	right: 0px;
	bottom: 0px;
	left: 0px;
  }
  .preloader_transparent:before {
  	background: transparent;
  }
  .preloader:after {
	z-index: 2;
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -9px 0px 0px -9px;
	padding: 6px;
	border-width: 3px;
	border-style: solid;
	border-color: rgba(0, 0, 0, 0.3) rgba(0, 0, 0, 0.3) transparent;
	border-radius: 100%;
	animation-name: preloader;
	animation-duration: 1.5s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
  }
  
  /*table*/
  .tableflow table{
	width: 100%;
	border-collapse:collapse;
  }
  .tableflow table td, th{
  	padding:5px;
  	border-bottom: 0.5px solid #ced6e0;
  }
  .tableflow table tr{
	  background-color: #fff;
  }
  .tableflow table th{
	  font-weight: normal;
	  cursor: pointer;
	  position: relative;
  }
  .tableflow table th img{
	  opacity: 0;
  }
  .tableflow table th:hover img{
     opacity: 1;
  }
  .tableflow table th:hover{
	  color: #0070c9;
  }
  .tableflow .resizer {
    position: absolute;
    top: 0;
    right: -0.5em;
    width: 1em;
    cursor: e-resize;
    user-select: none;
  }
  .tableflow table th:hover{
	border-right: 0.5px solid #ced6e0;
  }
  /*table tr:nth-child(odd) {
	  background-color: #fafafa;
  }
  table tr:nth-child(even) {
	  background-color: #efefef;
  }
  .tableflow table tr:last-child {
	  border-bottom: solid 1px #404040;
  }*/
  .tableflow table th a{
	  color: #47515c;
	  text-decoration:none;
  }
  .tableflow table tr:hover{
  background-color: #efefef;
  }
  .tableflow table tr:first-child {
	  background:0;
  }
  .tableflow table tr:first-child:hover{
	  background:0;
  }
  .tableflow .remove{
	  cursor: pointer;
	  width: 20px;
	  height: 20px;
	  margin: 3px;
	  background-image: url(https://ecmo.medicine.psu.ac.th/themes/images/remove.png);
	  background-repeat: no-repeat;
	  background-size: 100%;
	  background-position: 50% 50%;
	  opacity: 0;
  }
  .tableflow .remove:hover{
	  filter: brightness(80%);
  }
  .tableflow table tr:hover .remove{
  	opacity: 1.0;
  }
  .tableflow .swipe{
	  display: none;
  }
  
  @media screen and (max-width: 52.375em) {
	  .tableflow table {
		  border: 0;
		  table-layout: fixed;
	  }
	  .tableflow tr:first-child {
		  border: none;
		  clip: rect(0 0 0 0);
		  height: 1px;
		  margin: -1px;
		  overflow: hidden;
		  padding: 0;
		  position: absolute;
		  width: 1px;
	  }
		.tableflow table tr {
			border-top: 1px solid #c7c7cc;
			display: flex;
			flex-direction: column;
			text-overflow: ellipsis;
			overflow: hidden;
			overflow-x: auto;
			white-space: nowrap;
		}
	  .tableflow table tr:last-child {
		  border-bottom: 1px solid #c7c7cc;
	  }
	  .tableflow .loader_mobile{
		  position: absolute;
		  margin-top: 10px;
		  right: 0;
	  }
	  
	  .tableflow table td {
		  width: 100%;
		  font-size: 1em;
		  flex-grow: 0;
		  text-align: left;
		  border-bottom:0;
		  position: relative;
		  padding-left: 35%;
	  }
	  
	  .tableflow table td::before {
		  font-size: 0.97em;
		  content: attr(label);
		  position: absolute;
		  left: 6px;
		  width: 45%;
	  }


	.tableflow .cell {
		display: flex;
		flex-direction: row;
		width: 100%;
		padding-left: 0px !important;
	}
	.tableflow .cell::before {
		left: 0px !important;
		width: 0% !important;
	}

	.tableflow .cell > div {
		padding: 10px;
		flex-grow: 1;
	}

	.tableflow .cell .swipe {
		position: absolute;
		width: 80px;
		height: 100%;
		top: 0;
		border: 0;
		outline: none;
		text-align: center;
		padding-top: 20px;
	}

	.tableflow .cell .swipe:first-child::before, .tableflow .cell .swipe:last-child::before {
		top: 0;
		content: '';
		width: 2000px;
		height: 100%;
	}

	/*.tableflow .cell .swipe:first-child { left: -80px; }

	.tableflow .cell .swipe:first-child::before { right: 80px; }*/

	.tableflow .cell .swipe:last-child { right: -80px; }

	.tableflow .cell .swipe:last-child::before { left: 80px; }

	.tableflow .cell .swipe, .swipe::before {
		color: #FFF;
		background: #E74C3C;
	}

	  .tableflow table td:last-child {
		  border-bottom: 0;
	  }
  
	  .checkbox + label {
		  padding: 0.9em;
	  }
	  .checkbox:checked + label:after {
		  font-size: 2em;
	  }
  
  }
  
  /*draggable*/
  [draggable] {
	  -moz-user-select: none;
	  -khtml-user-select: none;
	  -webkit-user-select: none;
	  user-select: none;
	  -khtml-user-drag: element;
	  -webkit-user-drag: element;
  }
  .draggable, .thisDraggable{
	  cursor: move;
  }
  .draggable_over{
  background-color: #DAF6FF;
  /*border-bottom: 3px solid #96e5ff;*/
  -moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;
  }
  
  /*range*/
  input[type="range"]{
	  border: 0;
	  padding: 0;
	  margin: 1.5em 0;
	  -webkit-appearance: none;
	  width: 100%;
	  height: 4px;
	  border-radius: 5px;   
	  background: #b6b6b6;/*#017aff*/
	  outline: none;
	  -webkit-transition: .2s;
	  transition: opacity .2s;
  }
  
  
  input[type="range"]:focus {
	  outline: none; 
	  -moz-box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.0); 
	  -webkit-box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.0); 
	  box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.0);
  }
  
  input[type="range"]::-webkit-slider-thumb{
	  -webkit-appearance: none;
	  appearance: none;
	  width: 2em;
	  height: 2em;
	  border-radius: 100%; 
	  background: #FFF;
	  cursor: pointer;
	  -webkit-box-shadow:0px 0px 10px #A3A3A3;-moz-box-shadow:0px 0px 10px #A3A3A3;box-shadow:0px 0px 10px #A3A3A3;
	  border: 0;
  }
  
  input[type="range"]::-moz-range-thumb{
	  width: 2em;
	  height: 2em;
	  border-radius: 100%;
	  background: #FFF;
	  cursor: pointer;
	  -webkit-box-shadow:0px 0px 10px #A3A3A3;-moz-box-shadow:0px 0px 10px #A3A3A3;box-shadow:0px 0px 10px #A3A3A3;
	  border: 0;
  }

	.tags_input input{
		flex: 1;
		border: none;
		outline: none;
		width: auto;
		margin-bottom: 0px;
		padding: 2px;
		transition: none;
		box-shadow: none;
	}
	.tags_input input:focus {
		border: none; 
		outline: none; 
		box-shadow: none;
	}
	.tags_input{
		display: flex;
		flex-wrap: wrap;
		border: 0.5px solid #ced6e0;
		background: #FFF;
		padding: 5px 4px;
		width: auto;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
		border-radius: 5px;
		margin-top: 0px;
		margin-bottom: 15px;
	}
	.tags_input li, .tags_input span{
		display: flex;
    	align-items: center;
	}
	.tags_input li span{
		height: 20px;
		width: 20px;
		margin-left: 8px;
		padding-bottom: 5px;
		cursor: pointer;
		border-radius: 50%;
		background: #dfdfdf;
		background-image: url('https://ecmo.medicine.psu.ac.th/themes/css/images/x.png');
		background-size: 50%;
		background-repeat: no-repeat;
		background-position: 50%;
		justify-content: center;

	}

	@media (min-width: 600px){
		.tags_input {
			min-width: 350px;
		}
	}
	.tags_input li {
		list-style: none;
		border-radius: 5px;
		background: #F2F2F2;
		margin: 5px;
		padding: 0px 7px;
		border: 1px solid #e3e1e1;
	}
  
  .drag-icon, .drag-icon-l{
	  background: url('themes/images/drag-icon.png') no-repeat;
	  background-size: 100%;
	  width: 1em;
	  height: 1em;
  }
  .drag-icon-l{
	  width: 1em;
	  height: 1em;
	  transform: rotate(90deg);
  }
  
  /* mobile */
  .bg, .bgb, .bgg{
	  background: #FFF;
	  padding: 15px 10px;
  }
  .lt{
	  border-top: 0.5px solid #c7c7cc;
  }
  .l0{
	  border: 0;
  }
  .lb{
	  border-bottom: 0.5px solid #c7c7cc;
  }
  .lb-icon{
  border-bottom: 0.5px solid #c7c7cc;
  margin-left: 50px;
  }
  .ltb{
	  border-top: 0.5px solid #c7c7cc;
	  border-bottom: 0.5px solid #c7c7cc;
  }
  .item, .items{
	  padding: 10px 10px;
  }
  .items{
	  background: #FFF url("https://ecmo.medicine.psu.ac.th/themes/images/go.png") 97% no-repeat;
	  background-position: 97%;
	  background-repeat: no-repeat;
	  background-size: 15px 15px;
  }
  .item img, .items  img, .iconw{
	  margin-right: 10px;
	  width: 40%;
	  max-width: 30px;
  }
  .item .badge, .items .badge{
	  margin-top: 0%;
	  margin-right: 8%;
  }
  .item .item-badge, .items .item-badge{
  float: right;
  padding: 0.05em;
  min-width: 1.9em;
  min-height: 1.9em;
  font-size: 1em;
  -moz-border-radius: 100%;
  -webkit-border-radius: 100%;
  border-radius: 100%;
  background: #d3071c;
  text-align: center;
  color: #FFF;
  }
  .navi_img{
	  width: 100%;
	  height: 100%;
	  max-width: 25px;
	  max-height: 25px;
  }
  .bgb{
	  background:0;
	  font-size: 0.90em;
	  color: #6d6d72;
	  padding-bottom: 5px;
  }
  .bgg, .bggr{
  padding: 0.5px 0;
  padding-left:10px;
  }
  .bggr{
  margin: 0 10px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  }
  
  .item-check{
  background-image: url("https://ecmo.medicine.psu.ac.th/images/checked.png");
  background-position: 95%;
  background-repeat: no-repeat;
  background-size: 20px 20px;
  }
  .sp1{ margin-top: 5%;   }
  .sp2{ margin-top: 10%;   }
  .sp3{ margin-top: 15%;   }
  .sp4{ margin-top: 20%;   }
  .sp5{ margin-top: 25%;   }
  
  .icon{
	  width: 110px;
	  margin: 1.4em;
  }
  
  .icon_img{
	transition: all 0.3s ease-in-out;
	box-shadow: 0px 10px 20px -13px rgba(32, 56, 117, 0.30);
  }
  .icon_img:hover{
	outline: none; 
	box-shadow: 0px 20px 30px -13px rgba(32, 56, 117, 0.25);
  }
  .icon_img{
	  height: 110px;
	  background:#FFF; 
	  -moz-border-radius:20px;-webkit-border-radius:20px;border-radius:20px;
	  border: 0.5px solid #F0F0F0;
  }
  .icon_label{
	  padding-top: 10px;
	  text-align: center;
  }
  
  @-webkit-keyframes rotating /* Safari and Chrome */ {
	  from {
		  -webkit-transform: rotate(0deg);
		  -o-transform: rotate(0deg);
		  transform: rotate(0deg);
	  }
	  to {
		  -webkit-transform: rotate(360deg);
		  -o-transform: rotate(360deg);
		  transform: rotate(360deg);
	  }
  }
  @keyframes rotating {
	  from {
		  -ms-transform: rotate(0deg);
		  -moz-transform: rotate(0deg);
		  -webkit-transform: rotate(0deg);
		  -o-transform: rotate(0deg);
		  transform: rotate(0deg);
	  }
	  to {
		  -ms-transform: rotate(360deg);
		  -moz-transform: rotate(360deg);
		  -webkit-transform: rotate(360deg);
		  -o-transform: rotate(360deg);
		  transform: rotate(360deg);
	  }
  }
  .rotating {
	  -webkit-animation: rotating 2s linear infinite;
	  -moz-animation: rotating 2s linear infinite;
	  -ms-animation: rotating 2s linear infinite;
	  -o-animation: rotating 2s linear infinite;
	  animation: rotating 2s linear infinite;
  }


.tablink, .tablinkActive{
	cursor: pointer;
	padding: 0.9em 1.8em;
	border: 0.5px solid #fff;
	border-top: 2px solid #fff;
	border-bottom: 0.5px solid #ddd;
}
.tablinkActive{
	border: 0.5px solid #ddd;
	border-top: 2px solid orange;
	border-bottom: none;
}
@media screen and (max-width: 52.375em){
	.tablink span {
		display: none;
	}
}