.op_note_container .opnote_tools{
	padding: 7px;
    position: fixed;
	height: 600px;
    bottom: 0.8rem;
    right: 0.8rem;
	display: flex;
	flex-direction: column;
	background: #f0f0f0;
	box-shadow: 0 0 10px -2px black;
	z-index: 0;
    min-width: 320px;
}

.op_note_container div.opnote_image_container button{
	font-size: 0.8em;
	font-weight: bold;
}

.op_note_container div.opnote_image_container svg#barcode_opnote{
    vertical-align: middle;
    margin-bottom: 3px;
}

.op_note_container .opnote_tools div.template_container{
	flex-grow: 1;
	margin-bottom: 8px;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.op_note_container .opnote_tools div.template_header{
	display: flex;
}

.op_note_container .opnote_tools div.template_header select{
	flex-grow: 1;
}

.op_note_container .opnote_tools div.template_list{
	flex-grow: 1;
	background: #999;
	overflow: auto;
	height: 100%;
}

.op_note_container .opnote_tools div.template_list .opnote_template_item {
    cursor: pointer;
    user-select: none;
	display: flex;
}

.op_note_container .opnote_tools div.template_list div.opnote_template_name{
    background: #fefefe;
	max-width: 300px;
	padding: 7px;
    margin: 2px 2px 0 2px;
	flex-grow: 1;
}

.op_note_container .opnote_tools div.template_list span.private{
    font-size: 0.7em;
    font-weight: bold;
    color: darkviolet;
}

.op_note_container .opnote_tools div.template_list div.opnote_template_edit{
    background: #fefefe;
	padding: 7px;
    margin: 2px 2px 0px 0px;
}

.op_note_container .opnote_tools div.template_list div.opnote_template_name:hover,
.op_note_container .opnote_tools div.template_list div.opnote_template_edit:hover
{
    background: #f0f0f0;
}

form.opnote_template{
	display: flex;
	height: 500px;
	flex-direction: column;
}

form.opnote_template div.template_header_container{
	display: flex;
	margin-bottom: 5px;
}

form.opnote_template div.template_footer_container{
	display: flex;
	padding-top: 5px;
}

form.opnote_template div.template_footer_container span{
	display: inline-block;
	line-height: 20px;
	font-size: 0.9em;
}

form.opnote_template div.template_footer_container span.olabel{
	margin-right: 5px;
}

form.opnote_template div.template_footer_container span.doctor{
	margin-right: 5px;
}

form.opnote_template div.template_footer_container span.spacer{
	width: 20px;
}

form.opnote_template div.template_footer_container span.update_datetime{
	flex-grow: 1;
}

form.opnote_template div.template_footer_container input[type='checkbox']{
	margin-right: 5px;
}

form.opnote_template div.template_footer_container label{
	font-weight: normal;
	line-height: 20px;
	font-size: 0.9em;
}

form.opnote_template input#template_name{
	margin-right: 5px;
	flex-grow: 1;
}

form.opnote_template select#template_type{
	margin-right: 5px;
}

form.opnote_template input,
form.opnote_template select{
	padding: 7px;
}

form.opnote_template textarea#template_content{
	padding: 5px;
	flex-grow: 1;
	resize: none;
	overflow-y: auto;
	overflow-x: hidden;
	font-size: 0.9em;
	font-family: ubuntu mono, monospace;
}

.op_note_container .opnote_tools div.print_container{
	display: flex;
}

.op_note_container .opnote_tools select#no{
	flex-grow: 1;
}

.op_note_container .opnote_tools div.line{
	height: 1px;
	background: #999;
	width: 100%;
	margin-top: 2px;
	margin-bottom: 7px;
}

.op_note_container .opnote_tools select{
    display: inline-block;
    padding: 5px;
    font-size: 1em;
    margin-bottom: 5px;
	margin-left: 2px;
	margin-right: 2px;
}

.op_note_container .opnote_tools button{
	margin-bottom: 3px;
	margin-left: 2px;
	margin-right: 2px;
	padding: 5px 7px;
}

.op_note_container .opnote_tools .btn_container,
.op_note_container .opnote_tools .input_container{
	display: flex;
}

.op_note_container .opnote_tools input{
	width: 80px;
	padding: 3px 5px;
	flex-grow: 1;
	margin-bottom: 3px;
	margin-left: 2px;
	margin-right: 2px;
}

.op_note_container .opnote_tools .btn_container button{
	flex-grow: 1;
}

.op_note{
	box-shadow: 0 0 8px 0px black;
	padding: 5.5mm;
	flex-direction: column;
	background: #ffffff;
	display: flex;
	width: 210mm;
    top: 0;
    left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	position: relative;
	z-index: 1;
	overflow-x: auto;
}

.op_note .logo_container{
	display: inline-block;
	font-family: THSarabun;
	line-height: 4.5mm;
    color: black;
	width: 76mm;
}

.op_note .page_container{
	display: inline-block;
	font-size: 0.8em;
	line-height: 11mm;
    width: 76mm;
    text-align: right;
}

.op_note .header{
	display: inline-block;
	text-align: center;
	font-size: 1.5em;
	line-height: 10mm;
}

.op_note .header
,.op_note .logo_container
,.op_note .page_container
{
	height: 11.5mm;
	vertical-align: bottom;
}

.op_note .logo_container img{
	width: 10mm;
	vertical-align: bottom;
	margin-right: 2mm;
}

.op_note .logo_container span.hos_container{
	display: inline-block;
}

.op_note .logo_container div.hos{
	font-size: 5mm;
	border-bottom: 1px solid #999;
}

.op_note .logo_container div.address{
	font-size: 4mm;
}

.op_note .header_container{
	padding: 10px 10px 10px 15px;
	border-top: 1px solid #505050;
	border-left: 1px solid #505050;
	border-right: 1px solid #505050;
    border-bottom: 1px solid #505050;
	width: 199mm;
}

.op_note .header_container .header_row{
	padding: 4px 0px;
	height: 7mm;
}

.op_note .header_container .mlabel{
	display: inline-block;
	user-select: none;
	font-size: 0.8em;
}

.op_note .header_container .value{
	display: inline-block;
	padding: 0px 20px;
	border-bottom: dotted 1px black;
	margin-left: 5px;
	margin-right: 15px;
	min-width: 80px;
	font-weight: bold;
	font-size: 0.9em;
}

.op_note .header_container .operation_date{
	border-top: none;
    border-left: none;
    border-right: none;
    width: 5cm;
    text-align: center;
	outline: none;
	color: black;
	background: white;
	user-select: none;
}

.op_note .header_container .value_container{
	display: inline;
	min-width: 40px;
	padding-left: 20px;
	padding-right: 20px;
	border-bottom: 1px dotted;
	margin-left: 5px;
	margin-right: 15px;
	font-weight: bold;
	font-size: 0.9em;
}

.op_note .header_container #time_begin,
.op_note .header_container #time_end{
	min-width: 25mm;
}

.op_note .header_container #time_begin:empty:before,
.op_note .header_container #time_end:empty:before,
.op_note .header_container #anes_type:empty:before,
.op_note .header_container #anes_begin:empty:before,
.op_note .header_container #anes_end:empty:before,
.op_note .header_container .value_container.nurse:empty:before{
	content: attr(placeholder);
	font-weight: normal;
    cursor: text;
	min-width: 20mm;
}

.op_note .header_container #time_begin:focus:empty:before,
.op_note .header_container #time_end:focus:empty:before,
.op_note .header_container #anes_type:focus:empty:before,
.op_note .header_container #anes_begin:focus:empty:before,
.op_note .header_container #anes_end:focus:empty:before,
.op_note .header_container .value_container.nurse:focus:empty:before{
	content: attr(placeholder);
	font-weight: normal;
    cursor: text;
	display: none;
}

.op_note #anes_begin,
.op_note #anes_end,
.op_note #anes_begin_label,
.op_note #anes_end_label{
	display: none;
}

.op_note div#opnote_detail_container{
    border-left: 1px solid #505050;
    border-right: 1px solid #505050;
	border-bottom: none;
	padding: 10px 15px;
	font-size: 0.9em;
	outline: none;
	display: flex;
	flex-direction: column;
	min-height: 203mm;
	width: 199mm;
}

.op_note .opnote_image_container2 {
    width: 194mm;
	text-align: center;
}

.op_note .opnote_image_container2 .opnote_image_item_container{
	display: inline-block;
	text-align: center;
	margin-right: 1mm;
	cursor: zoom-in;
}

.op_note div#opnote_detail_container img{
	max-width: 188mm !important;
}

.op_note .opnote_image_container2 .opnote_image_item_container img.width1{
	max-width: 47mm !important;
	max-height: 47mm;
}

.op_note .opnote_image_container2 .opnote_image_item_container img.width2{
	max-width: 55mm !important;
	max-height: 55mm;
}

.op_note .opnote_image_container2 .opnote_image_item_container .opnote_image_note{
	text-align: center;
	font-size: 0.9em;
}

div#opnote_detail_container [contenteditable=true]{
	font-weight: bold;
    border: 1px solid #999;
    display: inline-block;
	min-width: 3cm;
}

div#opnote_detail_container span{
	vertical-align: top;
}

div#opnote_detail_container .op_note_detail div{
	padding-bottom: 0mm;
}

div#opnote_detail_container .op_note_detail.textarea div{
	padding-bottom: 0mm;
}

div#opnote_detail_container div[contenteditable="true"]{
	padding: 1mm;
}

div#opnote_detail_container input
,div#opnote_detail_container select{
	font-weight: bold;
}

div#opnote_detail_container select{
	color: black;
	background: white;
}

div#opnote_detail_container textarea{
	resize: none;
	overflow: hidden;
	width: 80mm;
	min-height: 7mm;
	font-weight: bold;
}

#opnote_detail_container #opnote{
	white-space: pre-wrap;
	border: none !important;
	font-weight: normal !important;
	min-height: 100mm;
}

div#opnote_detail_container li{
	vertical-align: top;
	margin-bottom: 3mm;
}

div#opnote_detail_container input[type='checkbox']{
	vertical-align: middle;
	margin: 0px;
}

div#opnote_detail_container input[type='checkbox']:checked + label{
	font-weight: bold;
}

div#opnote_detail_container table label{
	margin-left: 1mm;
}

div#opnote_detail_container label{
	font-weight: normal;
	user-select: none;
	cursor: pointer;
	margin-bottom: 0;
	margin-right: 2mm;
	vertical-align: middle;
}

div#opnote_detail_container label:hover{
	font-weight: bold;
}

div#opnote_detail_container td{
	vertical-align: top;
}

.op_note textarea#opnote{
	flex-grow: 1;
	outline: none;
	border: none;
	overflow: hidden;
	resize: none;
	line-height: 7mm;
}

.op_note div.signed_info{
    border-left: 1px solid #505050;
    border-right: 1px solid #505050;
	text-align: right;
	padding-right: 3mm;
	font-size: 0.9em;
	font-weight: bold;
	width: 199mm;
}

.op_note div.op_note_footer_container {
	padding: 2mm 0mm 2mm 4mm;
    border-top: 1px solid #505050;
    border-left: 1px solid #505050;
    border-right: 1px solid #505050;
    border-bottom: 1px solid #505050;
	display: flex;
	width: 199mm;
}

.op_note div.op_note_footer_container .pat_label{
	display: inline-block;
	font-size: 0.9em;
}

.op_note div.op_note_footer_container .pat_data{
	display: inline-block;
	padding: 0px 15px;
    border-bottom: 1px dotted;
	margin: 0px 15px 0px 10px;
    font-weight: bold;
	font-size: 0.9em;
}

.op_note div.op_note_footer_container .pat_data.pat_name{
	flex-grow: 1;
	text-align: center;
}

.op_note_container .opnote_mou_sss{
    max-width: 20rem;
    padding: 0.8rem;
    text-align: center;
    margin-bottom: 7px;
    background: yellow;
    border: 2px dashed #a5a500;
    border-radius: 10px;
}