/* all screen */
    .submenu { height: 25px; font-size: 14px; border:none; float: none;  color: black;  text-decoration: none;   text-align: left!important; }
    .submenu:hover {  background-color: #ddd; }
    @keyframes blinker {  50% { opacity: 0; }  } /* ทำให้ตัวอักษรหายไปที่ 50% ของเวลา */
    @keyframes blinker2 {  20% { opacity: 0; }  }
    .blink-text {  animation: blinker 1s linear infinite; color: red; font-weight: bold; } /* ใช้ animation ชื่อ blinker นาน 1 วินาที ทำซ้ำเรื่อยๆ */
    .blink-box {  animation: blinker2 2s linear infinite; border-style: solid; border-width: 1px; border-color: red; font-weight: bold; }

/* opd_doctor */

    .main_opd_div { height: calc(100vh - 145px); top: 145px; width: 360px; border-width: 0px; border-style: solid; float: left; position: absolute; overflow-y: scroll; display: block; }
    .main_opd_div2 { height: calc(100vh - 135px); top: 135px; left: 360px; width: calc((100vw - 440px) * 3 / 9); border-width: 0px; border-style: solid; float: right; position: absolute; overflow-y: scroll; display: block;}
    .main_opd_div3 { height: calc(100vh - 135px); top: 135px; left: calc(((100vw - 320px) * 3 / 9) + 320px); width: calc((100vw - 320px) * 4 / 9); border-width: 0px; border-style: solid; float: right; position: absolute; overflow-y: scroll; display: block; background-color: lightyellow; }
    .main_opd_div4 { height: calc(100vh - 135px); top: 135px; left: calc((((100vw - 320px) * 7 / 9)) + 320px); width: calc((100vw - 320px) * 2 / 9); border-width: 0px; border-style: solid; float: right; position: absolute; overflow-y: scroll; display: block; background-color: lightblue; }
    .main_opd_div5 { height: 30px; top: 105px; left: 360px; width: calc(100vw - 360px); border-width: 0px; border-style: solid; float: right; position: absolute; overflow-y: none; display: block;}
    .main_opd_div6 { height: 30px; top: 75px; left: 0px; width: 360px; border-width: 0px; border-style: solid; float: right; position: absolute; overflow-y: none; display: block;}

    .dropdown_opd {  float: left;  overflow: hidden; }
    .no_drop_opd {   height: 25px; float: left;  overflow: hidden; }
    .dropdown_opd .dropbtn_opd { height: 25px;  font-size: 14px;  outline: none;  color: white;  padding: 1px 10px;  background-color: #333;  font-family: inherit; /* Important for vertical align on mobile phones */
        margin: 0; } /* Important for vertical align on mobile phones */
    .dropdown_opd:hover .dropbtn_opd {  background-color: red; }
    .dropdown_opd-content {  display: none;  position: absolute;  background-color: #f9f9f9;  min-width: 160px;  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);  z-index: 1; }
    [class*="subdrop"] {  width:100%; border:none; float: none;  color: black;  padding: 1px 10px;  text-decoration: none;  display: block;  text-align: left!important; }
    [class*="subdrop"]:hover {  background-color: #ddd; }
    .dropdown_opd:hover .dropdown_opd-content {  display: block; }

	td.doctor_vs { font-family: Arial; font-size:0.7em; white-space: nowrap; }
	.doctor_text { font-family: Arial; font-size:0.8em; }
	.hx_topic { font-family: Arial; font-size:0.8em; font-weight: bold;}
	.hx_detail { font-family: Arial; font-size:0.8em; }
	.drug_hidden { display:none; }
	.queue_r { padding-left: .3em; padding-right: .3em; }
	.cancel_btn { background-image: url(/img/cancel.jpg); height:35px; width: 90px; background-size:100%; border: 0px solid gray; padding: 0; background-repeat: no-repeat; vertical-align: top;}
	.cancel_btn:hover { cursor: pointer; }
	.save_btn { background-image: url(/img/save.png); height:35px; width: 90px; background-size:100%; border: 0px solid gray; padding: 0; background-repeat: no-repeat; vertical-align: top;}
	.save_btn:hover { cursor: pointer; }
	.close_btn { background-image: url(/img/close.png); height:35px; width: 90px; background-size:90%; border: 0px solid gray; padding: 0; background-repeat: no-repeat; vertical-align: top;}
	.close_btn:hover { cursor: pointer; }
	.print_btn { background-image: url(/img/print.jpg); height:35px; width: 90px; background-size:60%; border: 0px solid gray; padding: 0; background-position: center; background-repeat: no-repeat; vertical-align: top;}
	.print_btn:hover { cursor: pointer; }
    .ok_btn { background-image: url(/img/ok.jpg); height:35px; width: 90px; background-size:90%; border: 0px solid gray; padding: 0; background-position: center; background-repeat: no-repeat; vertical-align: top;}
    .ok_btn:hover { cursor: pointer; }
    .provider_btn { background-image: url(/img/providerlogin.jpg); height:40px; width: 100px; background-size:90%; border: 0px solid gray; padding: 0; background-position: center; background-repeat: no-repeat; vertical-align: top;}
    .provider_btn:hover { cursor: pointer; }
    .delete_btn { background-image: url(/img/delete.png); height:35px; width: 90px; background-size:50%; border: 0px solid gray; padding: 0; background-position: center; background-repeat: no-repeat; vertical-align: top;}
    .delete_btn:hover { cursor: pointer; }
    .back_btn { background-image: url(/img/back.jpg); height:35px; width: 90px; background-size:90%; border: 0px solid gray; padding: 0; background-position: center; background-repeat: no-repeat; vertical-align: top;}
    .back_btn:hover { cursor: pointer; }
    .finish_btn { background-image: url(/img/finish.png); height:35px; width: 90px; background-size:90%; border: 0px solid gray; padding: 0; background-position: center; background-repeat: no-repeat; vertical-align: top;}
    .finish_btn:hover { cursor: pointer; }

    .gen_btn { height:29px; width: 29px; background-size:100%; border: 0px solid gray; padding: 20; background-position: center; background-repeat: no-repeat; vertical-align: top;}
    .gen_btn:hover { cursor: pointer; }
    .wd1 { background-color: yellow; }
    .wd2 { background-color: pink; }
    .wd3 { background-color: lightgreen; }
    .wd4 { background-color: #ffd3a1; }
    .wd5 { background-color: lightblue; }

/* ipd */
	.custom_file { display: none; }
	.custom-file-upload { border: 1px solid #ccc; display: inline-block; padding: 6px 12px; cursor: pointer; }
	.upload_btn { background-image: url(/img/upload.png); height:100px; width: 100px; background-size:100%; border: 0px solid gray; padding: 0; background-position: center; background-repeat: no-repeat; vertical-align: top; }
    .upload_btn:hover { cursor: pointer; }
    .choose_btn { background-image: url(/img/choose.png); line-height:3.5em; height:100px; width: 100px; background-size:100%; border: 0px solid gray; padding: 0; background-position: center; background-repeat: no-repeat; vertical-align: top; display: inline-block;}
    .choose_btn:hover { cursor: pointer; }
    .refresh_btn { background-image: url(/img/refresh.png); line-height:3.5em; height:100px; width: 100px; background-size:100%; border: 0px solid gray; padding: 0; background-position: center; background-repeat: no-repeat; vertical-align: top; display: inline-block;}
    .refresh_btn:hover { cursor: pointer; }
	.opd_btn { background-image: url(/img/opd.png); height:20px; width: 30px; background-size:100%; border: 0px solid gray; padding: 0; background-position: center; background-repeat: no-repeat; vertical-align: top;}
    .opd_btn:hover { cursor: pointer; }
    .vital_btn { background-image: url(/img/vital_sign.png); height:20px; width: 30px; background-size:100%; border: 0px solid gray; padding: 0; background-position: center; background-repeat: no-repeat; vertical-align: top;}
    .vital_btn:hover { cursor: pointer; }
    .lab_btn { background-image: url(/img/lab.jpg); height:20px; width: 30px; background-size:100%; border: 0px solid gray; padding: 0; background-position: center; background-repeat: no-repeat; vertical-align: top;}
    .lab_btn:hover { cursor: pointer; }
    .cer_btn { background-image: url(/img/doc.png); height:20px; width: 30px; background-size:100%; border: 0px solid gray; padding: 0; background-position: center; background-repeat: no-repeat; vertical-align: top;}
    .cer_btn:hover { cursor: pointer; }
    .img_btn { background-image: url(/img/image.png); height:20px; width: 30px; background-size:100%; border: 0px solid gray; padding: 0; background-position: center; background-repeat: no-repeat; vertical-align: top;}
    .img_btn:hover { cursor: pointer; }
    .img2_btn { background-image: url(/img/image2.png); height:20px; width: 30px; background-size:100%; border: 0px solid gray; padding: 0; background-position: center; background-repeat: no-repeat; vertical-align: top;}
    .img2_btn:hover { cursor: pointer; }
	.hip_btn { background-image: url(/img/hip.png); height:20px; width: 30px; background-size:100%; border: 0px solid gray; padding: 0; background-position: center; background-repeat: no-repeat; vertical-align: top;}
    .hip_btn:hover { cursor: pointer; }
    .order_btn { background-image: url(/img/order4.png); height:15px; width: 40px; background-size:100%; border: 0px solid gray; padding: 0; background-position: center; background-repeat: no-repeat; vertical-align: top;}
    .order_btn:hover { cursor: pointer; }
    .order1_btn { background-image: url(/img/order4.png); height:20px; width: 40px; background-size:100%; border: 0px solid gray; padding: 0; background-position: center; background-repeat: no-repeat; vertical-align: top;}
    .order1_btn:hover { cursor: pointer; }
    .order2_btn { background-image: url(/img/order3.png); height:20px; width: 40px; background-size:100%; border: 0px solid gray; padding: 0; background-position: center; background-repeat: no-repeat; vertical-align: top;}
    .order2_btn:hover { cursor: pointer; }
.progress_btn { background-image: url(/img/progress.png); height:15px; width: 40px; background-size:100%; border: 0px solid gray; padding: 0; background-position: center; background-repeat: no-repeat; vertical-align: top;}
.progress_btn:hover { cursor: pointer; }
    .off1_btn { background-image: url(/img/off1.png); height:20px; width: 40px; background-size:100%; border: 0px solid gray; padding: 0; background-position: center; background-repeat: no-repeat; vertical-align: top;}
    .off1_btn:hover { cursor: pointer; }
    .off2_btn { background-image: url(/img/off2.png); height:20px; width: 40px; background-size:100%; border: 0px solid gray; padding: 0; background-position: center; background-repeat: no-repeat; vertical-align: top;}
    .off2_btn:hover { cursor: pointer; }
    .plus_btn { background-image: url(/img/plus.jpg); height:20px; width: 15px; background-size:100%; border: 0px solid gray; padding: 0; background-position: center; background-repeat: no-repeat; vertical-align: top;}
    .plus_btn:hover { cursor: pointer; }
    .dc_btn { background-image: url(/img/dc.jpg); height:15px; width: 20px; background-size:100%; border: 0px solid gray; padding: 0; background-position: center; background-repeat: no-repeat; vertical-align: top;}
    .dc_btn:hover { cursor: pointer; }

    .new_btn { background-image: url(/img/new.jpg); height:30px; width: 40px; background-size:100%; border: 0px solid gray; padding: 0; background-position: center; background-repeat: no-repeat; vertical-align: top;}
    .new_btn:hover { cursor: pointer; }

    .change2_btn { background-image: url(/img/change2.png); height:30px; width: 40px; background-size:100%; border: 0px solid gray; padding: 0; background-position: center; background-repeat: no-repeat; vertical-align: top;}
    .change2_btn:hover { cursor: pointer; }

    .drug_do_btn { background-image: url(/img/drug_do.png); height:30px; width: 40px; background-size:100%; border: 0px solid gray; padding: 0; background-position: center; background-repeat: no-repeat; vertical-align: top;}
    .drug_do_btn:hover { cursor: pointer; }

    .nurse_process_btn { background-image: url(/img/nurse_process.png); height:30px; width: 30px; background-size:100%; border: 0px solid gray; padding: 0; background-position: center; background-repeat: no-repeat; vertical-align: top;}
    .nurse_process_btn:hover { cursor: pointer; }

    .scan_view_menu { color: blue; font-family: Arial, Helvetica, sans-serif; font-size: 0.8em; font-weight: bold; }
    .scan_view_menu:hover { cursor: pointer; }

/* ipd_order */
.is-hidden { display: none !important;}
.button-close { display: inline-block; width: 16px; height: 16px; position: absolute; top: 10px; right: 10px; cursor: pointer; 
    background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAowAAAKMB8MeazgAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAB5SURBVDiNrZPRCcAwCEQfnUiySAZuF8kSWeH6Yz8KrQZMQAicJ+epAB0YwAmYJKIADLic0/GPPCbQAnLznCd/4NWUFfkgy1VjH8CryA95ApYltAiTRCZxpuoW+gz9WXE6NPeg+ra1UDIxGlWEObe4SGxY5fIxlc75Bkt9V4JS7KWJAAAAAElFTkSuQmCC59ef34356faa7edebc7ed5432ddb673d'); }
.overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; overflow-y: scroll; background: rgba(0,0,0,0.6); }
.modal-content { padding: 20px 30px; width: 1000px; position: relative; min-height: 300px; margin: 5% auto 0; background: #fff; }

/* OR  */
    
    .rotate_lt_btn { background-image: url(/img/rotate_lt.png); position: relative; z-index: 1; height:40px; width: 40px; background-size:100%; border: 0px solid gray; padding: 0; background-position: center; background-repeat: no-repeat; vertical-align: top;}
    .rotate_lt_btn:hover { cursor: pointer; }
    .rotate_rt_btn { background-image: url(/img/rotate_rt.png); position: relative; z-index: 2; height:40px; width: 40px; background-size:100%; border: 0px solid gray; padding: 0; background-position: center; background-repeat: no-repeat; vertical-align: top;}
    .rotate_rt_btn:hover { cursor: pointer; }

    .image_plus_btn { background-image: url(/img/plus.png); position: relative; z-index: 3; height:40px; width: 40px; background-size:100%; border: 0px solid gray; padding: 0; background-position: center; background-repeat: no-repeat; vertical-align: top;}
    .image_plus_btn:hover { cursor: pointer; }
    .image_minus_btn { background-image: url(/img/minus.png); position: relative; z-index: 4; height:40px; width: 40px; background-size:100%; border: 0px solid gray; padding: 0; background-position: center; background-repeat: no-repeat; vertical-align: top;}
    .image_minus_btn:hover { cursor: pointer; }

	.approved_btn { background-image: url(/img/approved.png); height:80px; width: 80px; background-size:100%; border: 0px solid gray; padding: 0; background-position: center; background-repeat: no-repeat; vertical-align: top;}
    .approved_btn:hover { cursor: pointer; }
    .approved_pass_btn { background-image: url(/img/approved_pass.png); height:15px; width: 20px; background-size:100%; border: 0px solid gray; padding: 0; background-position: center; background-repeat: no-repeat; vertical-align: top;}
    .approved_pass_btn:hover { cursor: pointer; }
    .approved_no_btn { background-image: url(/img/approved_no.png); height:15px; width: 20px; background-size:100%; border: 0px solid gray; padding: 0; background-position: center; background-repeat: no-repeat; vertical-align: top;}
    .approved_no_btn:hover { cursor: pointer; }

    .input-container { position: relative; margin: 50px auto; width: 250px; }

    .input-container input[type="text"] { font-size: 30px; width: 100%; border: none; border-bottom: 2px solid #ccc; padding: 5px 0; background-color: transparent; outline: none; }
    
    .input-container .label { position: absolute; top: 0; left: 0; color: #ccc; transition: all 0.3s ease; pointer-events: none; }

    .input-container input[type="text"]:focus ~ .label,
    .input-container input[type="text"]:valid ~ .label { left: -30px; top: -30px; font-size: 20px; color: blue; }

    .input-container .underline { position: absolute; bottom: 0; left: 0; height: 2px; width: 100%; background-color: #333; transform: scaleX(0); transition: all 0.3s ease; }

    .input-container input[type="text"]:focus ~ .underline,
    .input-container input[type="text"]:valid ~ .underline {
      transform: scaleX(1);
    }


    /*.hovers:hover:after { position: absolute; content: attr(title); display: inline-block; left: 0px; top: 0px; padding: 5px; background-color: black; color: white; cursor: pointer; }*/
    /*
    .hovers-content {  display: none;  position: absolute;  background-color: #f9f9f9;  min-width: 160px;  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);  z-index: 1; }
    [class*="hovers2"] {  width:100%; border:none; float: none;  color: black;  padding: 1px 10px;  text-decoration: none;  display: block;  text-align: left!important; }
    [class*="hovers"]:hover {  background-color: #ddd; cursor: pointer; }
    .hovers:hover .hovers-content {  display: block;  }
*/
.ipd1 {width: auto; white-space: nowrap; text-align: center; padding: .4em; color:gray; } /* No */
.ipd2 {width: auto; white-space: nowrap; text-align: center; padding: .4em; font-weight: bold; } /* Bed */
.ipd3 {width: auto; white-space: nowrap; text-align: center; padding: .4em; } /* HN */
.ipd4 {width: auto; white-space: nowrap; text-align: center; padding: .4em; } /* AN */
.ipd5 {width: 15%; white-space: pre-line; word-wrap:break-word; padding: .4em;} /* Ptname */
.ipd6 {width: auto; white-space: nowrap; text-align: center; padding: .4em; } /* age */
.ipd7 {width: auto; white-space: nowrap; text-align: center; padding: .4em; } /* button */
.ipd8 {width: 30%; white-space: pre-line; word-wrap:break-word; text-align: left; padding: .4em; } /* diag */
.ipd9 {width: auto; white-space: nowrap; text-align: center; padding: .4em; } /* button */
.ipd10 {width: auto; color:blue; white-space: pre-line; word-wrap:break-word; text-align: center; padding: .4em; } /* date */
.ipd11 {width: 20%; color:green; white-space: pre-line; word-wrap:break-word; text-align: center; padding: .4em; } /* dept */
.ipd12 {width: 10%; white-space: pre-line; word-wrap:break-word; text-align: center; padding: .4em; } /* สิทธิ์ */

/* p4p */
.p4p_1 {font-size: 0.8em; width: 10%; white-space: nowrap; text-align: center; padding: .4em;} /* No */
.p4p_2 {font-size: 0.8em; width: 10%; white-space: nowrap; word-wrap:break-word; text-align: center; padding: .4em;} /* Code */
.p4p_3 {font-size: 0.8em; width: auto; white-space: pre-line; word-wrap:break-word; text-align: left; padding: .4em; } /* รายการ */
.p4p_4 {font-size: 0.8em; width: 10%; white-space: nowrap; text-align: center; padding: .4em; } /* point */
.p4p_5 {font-size: 0.8em; width: 10%; white-space: nowrap; text-align: center; padding: .4em;} /* จำนวน */
.p4p_6 {font-size: 0.8em; width: 10%; white-space: nowrap; text-align: center; padding: .4em; } /* รวม */
.p4p_7 {font-size: 0.8em; width: 5%; white-space: nowrap; text-align: center; padding: .4em; } /* button */


/* General */
* { box-sizing: border-box;	}
.row::after {  content: "";  clear: both;  display: block; }
.center-screen {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    min-height: 100vh;
}

.menu_01 { display:inline; background-color: #33CCFF; font-family: Arial; }
.menu_02 { width:100%; display:inline-block; background-color: #b4b8b5; font-family: Arial; }
.navbar_btn {   height: 25px;  font-size: 14px;  background-color: #333; color: white;  text-align: center;  padding: 2px 10px;  text-decoration: none; }

.dropdown {  float: left;  overflow: hidden; }
.no_dropdown {  float: left;  overflow: hidden; }
.dropdown .dropbtn { height: 25px;  font-size: 14px;  outline: none;  color: white;  padding: 1px 10px;  background-color: #333;  font-family: inherit; margin: 0; } 

.navbar_btn:hover, .dropdown:hover .dropbtn {  background-color: red; }
.dropdown-content {  display: none;  position: absolute;  background-color: #f9f9f9;  min-width: 160px;  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);  z-index: 1; }
[class*="subdropbtn"] { font-size: 24px; width:100%; border:none; float: none;  color: black;  padding: 1px 10px;  text-decoration: none;  display: block;  text-align: left!important; }
[class*="subdropbtn"]:hover {  background-color: #ddd; }
.dropdown:hover .dropdown-content {  display: block; }

ul, #myUL, #moUL {  list-style-type: none; margin: 5px;  padding: 0; }

/* Remove margins and padding from the parent ul */
#myUL, #moUL {  margin: 0;  padding: 0; }

/* Style the caret/arrow */
.caret {  cursor: pointer;  user-select: none; }/* Prevent text selection */

/* Create the caret/arrow with a unicode, and style it */
.caret::before {  content: "\25B6";  color: black;  display: inline-block;  margin-right: 3px;}

/* Rotate the caret/arrow icon when clicked on (using JavaScript) */
.caret-down::before {  transform: rotate(90deg); }

.box {	cursor: pointer;
    -webkit-user-select: none; /* Safari 3.1+ */
    -moz-user-select: none; /* Firefox 2+ */
    -ms-user-select: none; /* IE 10+ */
    user-select: none; }

.box::before {  content: "\2610";  color: black;  display: inline-block;  margin-right: 3px; }

.check-box::before {  content: "\2611";   color: dodgerblue; }

/* Hide the nested list */
.nested {  display: none; }

/* Show the nested list when the user clicks on the caret/arrow (with JavaScript) */
.active {  display: block; }
/*html { overflow: hidden; border:0;  }*/
html, body {margin: 0; height: 100%; overflow: hidden}
[class*="col_"] { float: left;  padding: 15px; }
.col_01 {width: 40%;}
.col_02 {width: 60%;}
[class*="menu_"] { float: left;  padding: 1px; } 
#mainframe { display: block; width: 100%; flex-grow : 1; max-width: 100%; overflow-y: hidden; margin: 0; margin-top:0px; padding: 0; border: 0px solid ; box-sizing: border-box; border-style: ridge;	}
div.isubframe1 { display: block; width: 100%; position: absolute;  top: 100px;  bottom: 0; overflow-y: scroll; max-width: 100%; margin: 0; margin-top:6px; padding: 0; border: 2px solid ; box-sizing: border-box; border-style: ridge;	}
div.isubframe2 { display: block; width: 100%; position: absolute;  top: 150px;  bottom: 0; overflow-y: scroll; max-width: 100%; margin: 0; margin-top:6px; padding: 0; border: 2px solid ; box-sizing: border-box; border-style: ridge;	}
div.isubframe3 { display: block; width: 100%; height: calc(100vh - 100px); overflow-y: scroll; max-width: 100%; margin: 0; margin-top:6px; padding: 0; border: 2px solid ; box-sizing: border-box; border-style: ridge;	}
/*div#patient_ward { display: block; width: 100%; position: absolute;  top: 90px;  bottom: 0;overflow-y: scroll; max-width: 100%; margin: 0; margin-top:6px; padding: 0; border: 2px solid ; box-sizing: border-box; border-style: ridge;	}
*/
/*div#patient_ward { display: block; width: 100%; height: calc(100vh - 170px); overflow-y: scroll; max-width: 100%; margin: 0; margin-top:6px; padding: 0; border: 2px solid ; box-sizing: border-box; border-style: ridge;	}
/*.menu_01 {width: 100%; white-space: nowrap; display:inline-block; }*/
/*.menu_02 {width: 50%;display:inline; text-align: right;white-space: nowrap;}*/
.menu_02 {width: 100%;display:inline; text-align: right;white-space: nowrap;}
	.m_btn_selected {  background-color: green!important; color:white!important}
	.m_btn_non_selected {  background-color: #f0eeeb!important; color:black!important}
	/*input.menu_button {  font-size:0.7em; height: 22px; margin-right:5px; padding-left: 1em; padding-right: 1em; border-radius: 6px; display:inline; }*/
	[class*="menu_button"] { height:25px; font-size: 14px;  background-color: #333; color: white;  text-align: center;  padding: 2px 10px;  text-decoration: none; }
	[class*="menu_button"]:hover {  background-color: red; }
	
	.sub_button { height:25px; font-size: 14px;  text-align: center;  padding: 2px 10px;  text-decoration: none; }

	th.operative, td.operative {  border-bottom: 1px solid #ccc;  border-left: 0px solid #ddd;  border-right: 0px solid #ddd;}
	div.col_header1 {white-space: nowrap; margin-top:1px; padding: 0em;}
	div.col_header2 {white-space: nowrap; margin-top:1px; margin-bottom:1px; padding: 0em;}
	textarea.textarea_01 { font-family: Arial, Helvetica, sans-serif; width:98%; margin-left:12px; margin-bottom:12px; border-radius: 4px; padding: .4em; display:block; background-color:#c5f6fc;}
	textarea.textarea_02 { font-size:1em; width:100%; margin-bottom:6px; padding: .4em; display:inline; }

	input.text_01 { font-size:0.8em; width:100px; margin-bottom:1px; padding: .4em; display:inline; }
    input.text_01:focus {  font-size:1em; border-color: blue; border-radius: 10px; border:1px solid;}

	input.text_02 { font-size:0.8em; width:200px; margin-bottom:6px; border-radius: 4px; padding: .4em; background-color:#c5f6fc;}
    .setcase_td_header { width: 200px; text-align: right; }
	label.label_01 { font-size:0.8em; margin-bottom:12px; padding: .4em; display:inline; white-space: nowrap;}
	label.label_02 { margin-left:6px; padding: .2em; display:inline; }
	label.label_03 { margin-left:20px; padding: .2em; display:inline; color:darkblue;}
	input.text_login { width:200px; font-size:1.5em; text-align: center; margin-bottom:12px; border-radius: 4px; padding: .4em; background-color:#c5f6fc;}
	label.label_login { font-size:1.2em; text-align: center; margin-bottom:12px; padding: .4em; }
	input.button_login {  font-size:1.2em; height: 60px; width:150px; margin-bottom:6px; padding: .4em; border-radius: 8px;  display:inline; background-color: lightgray;}
	label.header1 { font-size:1.4em; text-align: center; color:blue; }
	label.header2 { font-size:0.7em; text-align: center;   }
    label.header3 { font-size:1.4em; text-align: center; color:green; }
    label.header4 { font-size:1.2em; text-align: center; color:blue; }
	label.menu1 { font-size:2.0em; text-align: center; margin-bottom:12px; padding: .4em;  }
	label.menu2 { font-size:1.0em; text-align: center; margin-bottom:12px; padding: .4em;  }

	select.select_01 { margin-top:2px; margin-bottom:2px; padding: .2em; border-radius: 4px; background-color: #a5e8a6;}
	input.date_01 { font-size:1.0em; width:100px; margin-bottom:6px; padding: .4em; display:inline;  background-color: #a5e8a6; }
	input.time_01 { height: 20px; width:30px; margin-bottom:0px; padding: .4em; display:inline; border:none; background-color: #a5e8a6;}

	input.number_01 {  font-size:0.8em; width:50px; margin-bottom:0px; padding: .4em; display:inline; background-color: #a5e8a6; border: 1px solid black;}
	input.number_02 { margin-bottom:12px; border-radius: 4px; border-style:inset; padding: .4em; background-color:#c5f6fc;}
	input.button_01 {  font-size:0.8em; height: 60px; width:200px; margin-bottom:6px; padding: .4em; display:inline; background-color: lightgray;}
	input.button_02 {  font-size:0.8em; height: 30px; width:80px; margin-bottom:6px; padding: .4em; display:inline; background-color: lightgray;}
	div.times { height: 25px; background-color: #a5e8a6;  display: inline-block; border: 1px solid black;} 
	div.boxed {border: 2px black; border-radius: 4px; padding: .4em; word-spacing: 30px; background-color: #a5e8a6;}
	td.boxed {font-family: Arial, Helvetica, sans-serif; font-size:0.8em; text-align: center; border: 0px solid black; border-radius: 0px; padding: .4em; word-spacing: 5px; background-color: #a5e8a6;}
	td.head_01 {font-family: Arial; font-size:0.8em; border: 1px solid black; border-radius: 4px; padding: .4em; white-space: nowrap; }
	th.th_01 { font-family: Arial, Helvetica, sans-serif; font-size:0.8em; padding: .4em; text-align: center;}
	td.gen_center { font-family: Arial, Helvetica, sans-serif; font-size:0.8em; padding: .4em; text-align: center;}
	td.gen_left { font-family: Arial, Helvetica, sans-serif; font-size:0.8em; padding: .4em; text-align: left;}
	th.ep1 { font-family: Arial, Helvetica, sans-serif; font-size:0.6em; padding: .2em; text-align: left;}
	td.ep1 { font-family: Arial, Helvetica, sans-serif; font-size:0.6em; padding: .2em; text-align: left;}
	td.ep2 { font-family: Arial, Helvetica, sans-serif; font-size:0.6em; padding: .2em; text-align: left;}
	input[type='radio'] {
		border-radius: 50%;
		&:after {
			  width: 19px;
			  height: 19px;
			  border-radius: 50%;
			  background: var(--active-inner);
			  opacity: 0;
			  transform: scale(var(--s, .7));
		}
		&:checked {    --s: .5;   }
	}
	input[type="submit"]  { font-size:0.8em; text-align: center; margin-bottom:12px; padding: .4em;  }

	#loading { display: flex; position: fixed; z-index: 100; width: 100%; height: 100%; background-color: white;  background-image: url("/img/preloader.gif"); background-repeat: no-repeat; background-position: center;}
	[class*="row"] { float: left;  padding: 0px; }
	.row1 {width: 50%; height: 100%; vertical-align:middle; overflow:hidden; display: inline-block;}
	.row2 {width: 50%; height: 100%; vertical-align:middle; overflow:hidden; display: inline-block;}
	.c1 {width: 5%; white-space: nowrap;}
	.c2 {width: 8%; white-space: nowrap;}
	.c3 {width: 5%; white-space: nowrap;}
	.c4 {width: 10%; white-space: nowrap;}
	.c5 {width: 24%; white-space: pre-line; word-wrap:break-word;}
	.c6 {width: 10%; white-space: nowrap;}
	.c7 {width: 13%; white-space: nowrap;}
	.c8 {width: 10%; white-space: nowrap;}
	.c9 {width: 10%; white-space: nowrap;}

	.c10 {width: 18%; color:blue; white-space: pre-line; word-wrap:break-word;}
	.c11 {width: 18%; color:green; white-space: pre-line; word-wrap:break-word;}
	.c12 {width: 10%; white-space: pre-line; word-wrap:break-word;}
	.c13 {width: 15%; white-space: pre-line; word-wrap:break-word;}
	.c14 {width: 16%; white-space: pre-line; word-wrap:break-word;}
	.c15 {width: 8%; white-space: nowrap;}
	.c16 {width: 5%; white-space: nowrap;}
	.c17 {width: 5%; white-space: nowrap; }
	.c18 {width: 5%; white-space: nowrap;}
	.c19 {width: 5%; white-space: nowrap;}
	.c20 {width: 5%; white-space: nowrap; }
	.c21 {width: 5%; white-space: nowrap;}
	.c22 {width: 5%; white-space: nowrap;}
	.c23 {width: 5%; white-space: nowrap; }
	.c24 {width: 5%; white-space: nowrap;}
	.c25 {width: 30%; white-space: nowrap;}
	.c26 {width: 75%; white-space: nowrap;}
	body, html {height:100%}
	.table_head1 { width: 100%; height: 100%; border-collapse: collapse;} 


    .main_opd_menu { height:30px; background-color:white; float: right; vertical-align: top; }

/* Phone 1 */
@media only screen and (max-width: 980px) {

    /* OPD */


    .main_opd_menu { line-height: 30px; height:60px; background-color:white; float: right; vertical-align: top; }
    .main_opd_div { height: calc(100vh - 160px); top: 300px; width: 360px; border-width: 0px; border-style: solid; float: left; position: absolute; overflow-y: scroll; display: block; }
    .main_opd_div2 { height: calc(100vh - 165px); top: 300px; left: 360px; width: calc((100vw - 440px) * 3 / 9); border-width: 0px; border-style: solid; float: right; position: absolute; overflow-y: scroll; display: block;}
	.main_opd_div3 { height: calc(100vh - 165px); top: 300px; left: calc(((100vw - 320px) * 3 / 9) + 320px); width: calc((100vw - 320px) * 4 / 9); border-width: 0px; border-style: solid; float: right; position: absolute; overflow-y: scroll; display: block; background-color: lightyellow; }
    .main_opd_div4 { height: calc(100vh - 165px); top: 300px; left: calc((((100vw - 320px) * 7 / 9)) + 320px); width: calc((100vw - 320px) * 2 / 9); border-width: 0px; border-style: solid; float: right; position: absolute; overflow-y: scroll; display: block; background-color: lightblue; }
    .main_opd_div5 { height: 30px; top: 230px; left: 360px; width: calc(100vw - 360px); border-width: 0px; border-style: solid; float: right; position: absolute; overflow-y: none; display: block;}
    .main_opd_div6 { height: 30px; top: 230px; left: 0px; width: 360px; border-width: 0px; border-style: solid; float: right; position: absolute; overflow-y: none; display: block;}

    .no_drop_opd {   height: 40px; float: left;  overflow: hidden; }


    .menu_01 { display:inline; background-color: #333; font-family: Arial; }
	.menu_02 {width: 100%;display:inline; text-align: right;white-space: nowrap;}
	.menu_button_ipd {  height: 40px; font-size: 24px;  background-color: #333; color: white;  text-align: center;  padding: 2px 10px;  text-decoration: none; vertical-align:button;}
	div#ipd_selector {width: 100%; text-align: center; white-space: nowrap; font-size: 20px; display: block; width: 100%; flex-grow : 1; max-width: 100%; overflow-x: hidden;}
	div#patient_ward { display: block; width: 100%; position: absolute;   bottom: 0;overflow-y: scroll; max-width: 100%; margin: 0; margin-top:34px; padding: 0; border: 2px solid ; box-sizing: border-box; border-style: ridge;	}

	[class*="col_"] { width: 100%; vertical-align:middle;}
    div.col_header1 {white-space: nowrap; margin-top:1px; padding: 0em;}
    div.col_header2 {white-space: nowrap; margin-top:1px; margin-bottom:1px; padding: 0em;}
    [class*="row"] { width: 100%; height: 50%;  }
    .c1 {width: 5%;}
    .c2 {width: 8%;}
    .c3 {width: 5%;}
    .c4 {width: 10%;}
    .c5 {width: 24%; white-space: pre-line; word-wrap:break-word;}
    .c6 {width: 10%;}
    .c7 {width: 13%;}
    .c8 {width: 10%;}
    .c9 {width: 10%;}

    .c10 {width: 18%; color:blue; white-space: pre-line; word-wrap:break-word;}
    .c11 {width: 18%; color:green; white-space: pre-line; word-wrap:break-word;}
    .c12 {width: 10%; white-space: pre-line; word-wrap:break-word;}
    .c13 {width: 15%; white-space: pre-line; word-wrap:break-word;}
    .c14 {width: 16%; white-space: pre-line; word-wrap:break-word;}
    .c15 {width: 8%; white-space: nowrap;}
    .c16 {width: 5%; white-space: nowrap;}
    .c17 {width: 5%; white-space: nowrap; }
    .c18 {width: 5%; white-space: nowrap;}
    [class*="menu_"] { float: left;  padding: 1px; }
    /* calc(100vh - 70px); */
    /*calc(100vh - 150px);*/
   /* #mainframe { display: block; width: 100%; height: calc(100vh - 190px); max-width: 100%; overflow-y: hidden; margin: 0px; margin-top:6px; padding: 0px; border: 2px solid ; box-sizing: border-box; border-style: ridge;	}
   */
    div.isubframe1 { display: block; width: 100%;  position: absolute;  top: 180px;  bottom: 0; overflow-y: scroll; max-width: 100%; margin: 0; margin-top:6px; padding: 0; border: 2px solid ; box-sizing: border-box; border-style: ridge;	}
    div.isubframe2 { display: block; width: 100%; height: calc(100vh - 350px); overflow-y: scroll; max-width: 100%; margin: 0; margin-top:6px; padding: 0; border: 2px solid ; box-sizing: border-box; border-style: ridge;	}
    .gen_btn { height:29px; width: 29px; background-size:100%; border: 0px solid gray; padding: 10; background-position: center; background-repeat: no-repeat; vertical-align: top;}


   /* .menu_01 { width:100%; display:inline-block; background-color: #333; font-family: Arial; }*/
    .m_btn_selected {  background-color: green!important; color:white!important}
    .m_btn_non_selected {  background-color: #f0eeeb!important; color:black!important}

    .navbar_btn {   height: 40px;  font-size: 24px;  background-color: #333; color: white;  text-align: center;  padding: 2px 10px;  text-decoration: none; }

    .dropdown .dropbtn {  height: 40px;  font-size: 24px;  outline: none;  color: white;  padding: 1px 10px;  background-color: #333;  font-family: inherit; margin: 0; }
    /*.subdropbtn {  font-size: 24px; width:100%; border:none; float: none;  color: black;  padding: 1px 10px;  text-decoration: none;  display: block;  text-align: left; }
    */
    .submenu { height: 40px; }

        [class*="subdropbtn"] {  font-size: 24px; width:100%; border:none; float: none;  color: black;  padding: 10px 10px;  text-decoration: none;  display: block;  text-align: left!important; }
    [class*="subdropbtn"]:hover {  background-color: #ddd; }
    /*.menu_01 {width: 100%; display:inline;white-space: nowrap; ;  }*/
    /*.menu_02 {width: 50%;display:inline; text-align: right;white-space: nowrap;}*/
    /*input.menu_button {  font-size:1.5em; height: 35px; margin-right:5px; padding-left: 1em; padding-right: 1em; border-radius: 6px; display:inline; background-color: #f0eeeb;}*/
    .menu_button {  height: 40px; font-size: 24px;  background-color: #333; color: white;  text-align: center;  padding: 2px 10px;  text-decoration: none; vertical-align:button;}
    .sub_button { height:40px; font-size: 14px;  text-align: center;  padding: 2px 10px;  text-decoration: none; }

    th.operative, td.operative {  border-bottom: 1px solid #ccc;  border-left: 0px solid #ddd;  border-right: 0px solid #ddd;}
    div.col_header1 {white-space: nowrap; margin-top:1px; padding: 0em;}
    div.col_header2 {white-space: nowrap; margin-top:1px; margin-bottom:1px; padding: 0em;}
    textarea.textarea_01 { width:98%; margin-left:12px; margin-bottom:12px; border-radius: 4px; padding: .4em; display:block; background-color:#c5f6fc;}
    textarea.textarea_02 { font-size:2em; width:100%; margin-bottom:6px; padding: .4em; display:inline; }

    input.text_01 { font-size:2em; width:250px; margin-bottom:6px; padding: .4em; display:inline; }
    input.text_01:focus {  font-size:2.5em; border-color: blue; border-radius: 10px; border:1px solid;}

    input.text_02 { font-size:2em; width:400px; margin-bottom:6px; border-radius: 4px; padding: .4em; background-color:#c5f6fc;}
    label.label_01 { font-size:2em; width:200px; margin-bottom:12px; padding: .4em; display:inline; white-space: nowrap;}
    label.label_02 { margin-left:6px; padding: .2em; display:inline; }
    label.label_03 { margin-left:20px; padding: .2em; display:inline; color:darkblue;}
    input.text_login { width:200px; font-size:2.5em; text-align: center; margin-bottom:12px; border-radius: 4px; padding: .4em; background-color:#c5f6fc;}
    label.label_login { font-size:2.5em; text-align: center; margin-bottom:12px; padding: .4em; }
    input.button_login {  font-size:2.5em; height: 100px; width:250px; margin-bottom:6px; padding: .4em; border-radius: 8px;  display:inline; background-color: lightgray;}
    label.header1 { font-size:1.2em; text-align: center; color:blue; }
    label.header2 { font-size:0.7em; text-align: center;   }
    label.menu1 { font-size:2.0em; text-align: center; margin-bottom:12px; padding: .4em;  }
    label.menu2 { font-size:1.0em; text-align: center; margin-bottom:12px; padding: .4em;  }

    select.select_01 { font-size:2em; margin-top:2px; margin-bottom:2px; padding: .2em; border-radius: 4px; background-color: #a5e8a6;}
    input.date_01 { margin-bottom:6px; padding: .4em; display:inline; background-color: #a5e8a6; }
    input.time_01 { font-size:2em; height: 40px; width:60px; margin-bottom:0px; padding: .4em; display:inline; border:none; background-color: #a5e8a6;}

    input.number_01 {  font-size:2em; width:50px; margin-bottom:0px; padding: .4em; display:inline; background-color: #a5e8a6; border: 1px solid black;}
    input.number_02 { margin-bottom:12px; border-radius: 4px; border-style:inset; padding: .4em; background-color:#c5f6fc;}
    input.button_01 {  font-size:2.5em; height: 100px; width:200px; margin-bottom:6px; padding: .4em; display:inline; background-color: lightgray;}
    input.button_02 {  font-size:2em; height: 80px; width:150px; margin-bottom:6px; padding: .4em; display:inline; background-color: lightgray;}
    div.times { height: 50px; background-color: #a5e8a6;  display: inline-block; border: 1px solid black;} 
    div.boxed {border: 2px black; border-radius: 4px; padding: .4em; word-spacing: 30px; background-color: #a5e8a6;}
    td.boxed {font-family: Arial, Helvetica, sans-serif; font-size:0.8em; text-align: center; border: 0px solid black; border-radius: 0px; padding: .4em; word-spacing: 5px; background-color: #a5e8a6;}
    td.head_01 {font-family: Arial; font-size:0.8em; border: 0px solid black; border-radius: 4px; padding: .4em; white-space: nowrap; }
    th.th_01 { font-size:0.8em; padding: .4em; text-align: center;}
    td.gen_center { font-family: Arial, Helvetica, sans-serif; font-size:0.8em; padding: .4em; text-align: center;}
    td.gen_left { font-family: Arial, Helvetica, sans-serif; font-size:0.8em; padding: .4em; text-align: left;}
    input[type='radio'] {
        border-radius: 50%;
        &:after {
            width: 19px;
            height: 19px;
            border-radius: 50%;
            background: var(--active-inner);
            opacity: 0;
            transform: scale(var(--s, .7));
        }
        &:checked {    --s: .5;   }
    }
    input[type="submit"]  { font-size:0.8em; text-align: center; margin-bottom:12px; padding: .4em;  }

    #loading { display: flex; position: fixed; z-index: 100; width: 100%; height: 100%; background-color: white;  background-image: url("/img/preloader.gif"); background-repeat: no-repeat; background-position: center;}
}