html{font-family: arial, sans-serif;}

/*=== Color and Background Color ===*/
.bgc-red{background-color: #ff0000;}
.bgc-red-light{background-color: #ff6666;}
.bgc-red-dark{background-color: #b80000;}

.bgc-orange{background-color: #ff781f;}
.bgc-orange-light{background-color: #ffaf7a;}
.bgc-orange-dark{background-color: #ff6600;}

.bgc-yellow{background-color: #ffd12b;}
.bgc-yellow-light{background-color: #ffeca8;}
.bgc-yellow-dark{background-color: #e8b602;}

.bgc-purple{background-color: #be03fc;}
.bgc-purple-light{background-color: #e699ff;}
.bgc-purple-dark{background-color: #9002bf;}

.bgc-green{background-color: #60b922;}
.bgc-green-light{background-color: #d0eda1;}
.bgc-green-dark{background-color: #00723a;}

.bgc-brown{background-color: #eeeeee;}
.bgc-brown-light{background-color: #f8f8f8;}
.bgc-brown-dark{background-color: #c7c7c7;}

.cl-red{color: #FF0000;}
.cl-red-light{color: #ff6666;}
.cl-red-dark{color: #b80000;}

.cl-green{color: #60b922;}
.cl-green-light{color: #d0eda1;}
.cl-green-dark{color: #00723a;}

.cl-brown{color: #eeeeee;}
.cl-brown-light{color: #f5f5f5;}
.cl-brown-dark{color: #c7c7c7;}

/*=== END Color and Background Color ===*/

.scrollbar::-webkit-scrollbar-track{-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);background-color: #F5F5F5;}
.scrollbar::-webkit-scrollbar{width: 8px;height:8px;background-color: #F5F5F5;}
.scrollbar::-webkit-scrollbar-thumb{background-color: #c8c8c8;}
.scrollbar::-webkit-scrollbar-thumb:hover{background-color: #00723a;}

a{text-decoration: none;}
input{border: 1px solid #a7a7a7;border-radius: 3px;}
body{
    margin: 0;
	padding: 0;
	height: 100%;
	background: #d1d1d1 url("../../resources/images/background.png") repeat;
	font-family: Lucida Grande, Verdana, Lucida Sans Regular, Lucida Sans Unicode, Arial, sans-serif;
	font-size: 11px;}
.message{color:#d40505;margin: 20px auto;font:15px/20px arial, sans-serif;text-align: center;}
table{border-collapse: collapse;}
table th{background: silver;border: 1px solid #a7a7a7;padding: 5px;font: 13px/18px arial, sans-serif;color: #555555;}
#order_list td{border: 1px solid #a7a7a7;padding: 5px;font: 13px/18px arial, sans-serif;color: #555555;}
    
#popup{background-color:#FFFFFF;padding: 15px;margin: auto;width:760px;}
.header{display: inline-block;width: 100%;padding-bottom: 6px;border-bottom: 1px solid #a7a7a7;margin-bottom: 1px;}
.header h2{float:left;font: 18px/24px Arial;color: #555555;background: url("../../resources/images/icons_v2/icons-24_quick-edit-booking.png") no-repeat 0 0;padding-left:26px;}
.device{width:24px;height:24px;}
.header a{float:right;margin-left:10px;color: #0398bd;font: 13px/24px arial, sans-serif;}
.contact-his{display: block;height: 46px;padding: 6px 0;background-color: #f9f9f9;margin-bottom: 1px;}
.one-ch{display: inline-block;width:146px;height:32px;margin:0 3px;float:left;position: relative;}
.one-ch a img{display: inline;float: left;}
.one-ch a span{color: #555555;font:13px/32px arial, sans-serif;float: left;padding-left: 3px;}
.call-his-box{position: absolute;left: 32px;top:30px;padding: 6px;border: 1px solid #a7a7a7;width:108px;background: #ffffff;}
.call-his-box span{color: #555555;font:13px/22px arial, sans-serif;width: 100%;overflow: hidden;display: block;}
#schedule-ac-show{position: absolute;left: 32px;top:30px;padding: 15px;border: 1px solid #a7a7a7;width:320px;background: #ffffff;z-index: 9999;}
#ac-schedule-ac-show input{height: 20px;}
#hour-schedule,#minute-schedule{width: 50px;display: inline;margin-right: 10px;}
#date-schedule{display: inline;}
#time-schedule{display: block;width: 100%; text-align: center;margin: 15px 0;}
#cfm-schedule-btn, a#cfm-valid-btn{float: right;height: 16px;padding: 10px 15px;border-radius: 5px;font: 14px/16px arial, sans-serif;margin: 20px 0 0 0;background: #0398bd;color: #ffffff;}
#close-schedule-show{position: absolute;top:0px;width:16px;height: 16px;font: 12px/16px arial, sans-serif; text-align: center; color: #ffffff;background-color: #d40505;margin: 2px;z-index: 99999;}
#call_message{float:left;width: 98%;height: 24px;padding: 0 1%;font: italic 12px/18px arial, sans-serif;color: #377501;text-align: center;}

#duration-ac-show{position: relative;left: 32px;top:30px;padding: 8px 15px;border: 1px solid #a7a7a7;width:250px;height:68px;background: #ffffff;z-index: 9999;}
#close-duration-ac-show{position:absolute;right: 5px;top: 5px;width:16px;height: 16px;text-align: center;}
#duration-ac-show span{color: #555555;font:13px/18px arial, sans-serif;position: absolute;left:0px;width:100%;text-align: center;margin-bottom: 10px;}
#duration-ac-show div{float: left;width: 100%;}
#duration-ac-show div input{margin-top: 6px; padding: 3px 6px;width: 80px}
#duration-ac-show div a{margin: 0;}


.caption{display: block;height: 20px;padding: 5px 0;background-color: #f6f7f9;margin-bottom: 5px;}
.caption a{font:15px/20px arial, sans-serif; color: #4b4f56;padding: 0 2%;}
#form-submit-cap, #process-his-cap{border-right: 1px solid #4b4f56;}

#form-submit{width:100%;display: block;height: 300px;overflow: hidden;}
#order-his, #process-his{width:100%;display: block;height: 300px;overflow: scroll;overflow-x: hidden;}
#order-his table, #process-his table{border-collapse: collapse;}
#order-his td, #process-his td{border: 1px solid #a7a7a7;padding: 5px;font: 13px/18px arial, sans-serif;color: #555555;width: inherit;}
#order-his .head-tbl td, #process-his .head-tbl td{background-color: silver;}

.body tbody{width: 100%;}
.content-box tbody td{width: 25%;}
.title h4{color: #555555;font:15px/30px arial, sans-serif;}
.files{height: 36px;}
.files input{height: 20px;padding:3px 3%;border:1px solid #a7a7a7;border-radius: 3px;color:  #333333;font: italic 13px/20px arial, sans-serif;}
.files .in-col1{width: 83%;}
.files .in-col2{width: 93%;}
.files select{height: 29px;padding: 0 3%; border:1px solid #a7a7a7;border-radius: 3px;font: italic 13px/20px arial, sans-serif;}
.files .se-col1{width:90%;}
.files .se-col2{width: 98%;}

.bill-order{display: inline-block;width: 100%;margin: 10px 0px;}
.products{display: inline-block;width: 73%;margin-right: 2%;height: 100px;overflow: scroll;overflow-x: hidden;}
.one-pro{display: inline-block;width:100%;height: 31px;background-color: #f9f9f9;margin-bottom: 1px;}
.one-pro div{float:left;height: 26px;margin-top: 3px;}
.one-pro .code-pro{width:15%;margin-left: 1%;}
.code-pro span{font: bold 14px/26px arial, sans-serif;color: #0398bd;}
.one-pro .name-pro{width:46%;padding: 0 1%;}
.name-pro a{font: 13px/26px arial, sans-serif; color: #0398bd;display: inline-block;height: 26px;overflow: hidden;}
.quantity-pro{width:4%;margin: 0 1%;}
.quantity-pro input{display:inline-block;width:95%;height:16px;padding: 3px 1%;border: 1px solid #a7a7a7;text-align: center;}
.price-pro{width:16%;margin: 0 1%;}
.price-pro input{display:inline-block;width:95%;height:16px;padding: 3px 4%;border: 1px solid #a7a7a7;}
.one-pro .del-pro{width:10%;float:right;}
.del-pro a{color: #d40505;font: 12px/26px arial, sans-serif;}
.del-pro a:hover{text-decoration: underline;font-style: italic;}

.accounting{display: inline-block;width: 24%;}
.one-acc{display: inline-block;width:100%;height: 26px; padding: 3px 0;}
.one-acc span{float: left;width: 30%;font: 15px/24px arial, sans-serif;color: #555555;}
.one-acc p{float: right;width: 66%;font: bold 15px/24px arial, sans-serif;color: #555555;text-align: right;}
.one-acc input{float: right;width: 60%;height: 16px;padding: 3px 3%;border: 1px solid #a7a7a7;font: 15px/16px arial, sans-serif;color: #333333;text-align: right;}

.note{display: inline-block;width:100%;margin-bottom: 20px;}
.note a{float:left;width:9%;color: #555555;font:16px/32px arial, sans-serif;}
.note input[type="button"]{float: left;width: 7%;margin-right: 1%;font:15px/32px arial, sans-serif;}
.note p{float:left;width:80%;color: #e20707;font:italic 14px/36px arial, sans-serif;}
#note{float: right;width: 80%;height: 30px;padding: 3px 1%;font:italic 13px/20px arial, sans-serif;color: #d40505;}
#sale_note{position: relative;}
#note_list{position: absolute;left: 60px;bottom: 38px;padding: 10px;border: solid 1px #e20707;background-color: #FFFFFF;}
#note_list a{position: absolute; right: 0; top: 0; width: 18px; height: 18px; line-height: 18px; background-color: #e20707; text-align: center; color: #FFFFFF;}
.content-box div#note_list tbody td{padding: 8px; width: auto;}
.content-box div#note_list tbody tr:nth-child(even){background-color: #f9f9f9;}

.actions{display: inline-block;width: 100%;height: 36px;margin: 10px 0;}
.actions a{float: right;height: 20px;padding: 10px 12px;border-radius: 5px;font: 15px/20px arial, sans-serif;margin-left: 20px;}
#accept-act{background: #0398bd;color: #ffffff;}
#accept-act:hover{background-color: #03afda;text-decoration: underline;}
#save-act{background-color: #eaeaea;color: #656565;}
#save-act:hover{background-color: #d6d6d6;text-decoration: underline;}
/*#reasson-cancel{float:left;width:36%;height: 30px;padding: 3px 1%;font:italic 12px/18px arial, sans-serif;color: #555555;}*/
#block-act{background-color: #ff6600;color: #ffffff;float:left;}
#block-act:hover{background-color: #e65c00;text-decoration: underline;}
#cancel-act{background-color: #d40505;color: #ffffff;float:left;}
#cancel-act:hover{background-color: #e20707;text-decoration: underline;}

#wrong-number-act{background-color: #ecdb08;color: #656565;}
#wrong-number-act:hover{background-color: #fbe908;text-decoration: underline;}

.product_suggestion { position: absolute; width: 100%; max-width: 500px; top: 30px; background-color: #fff; border: 1px solid #ddd;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1); font-family: Arial, sans-serif; z-index: 1000; overflow-y: auto; max-height: 460px; display: none;}
.product_suggestion .head-sug { display: flex; align-items: center; justify-content: space-between; padding: 5px 10px; background-color: #00723a;
    border-bottom: 1px solid #ddd; cursor: pointer; }
.product_suggestion .head-sug img { cursor: pointer; margin-right: 10px; }
.product_suggestion .head-sug strong { font-size: 16px; color: #ffffff; flex-grow: 1; }
.product_suggestion .one-sug { display: flex; align-items: center; padding: 4px 8px; cursor: pointer; transition: background-color 0.2s ease-in-out; }
.product_suggestion .one-sug:hover { background-color: #f0f9ff; }
.product_suggestion .one-sug strong { width: 90px; font-weight: bold; font-size: 12px; flex-shrink: 0;}
#content div.box .product_suggestion .one-sug p { flex: 1; margin: 0 5px; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.product_suggestion .one-sug span { width: 80px; text-align: right; font-weight: bold; font-size: 12px; flex-shrink: 0;}
.product_suggestion .one-sug:nth-of-type(old) { background-color: #f1f1f1; }

.total-row-table td{background: #eeeeee;font-weight: bold;}

/*== Rating ==*/
.fa-rating{display: block;}
.fa-rating span, .fa-rating a{font-size: 24px;color: #cccccc;padding: 5px 3px;}
.fa-rating span.checked, .fa-rating a.checked{color:#f0d400}

/*=== V3.2021 OHAPPY ===*/
.rpform .date{float:left;width:93%}
.rpform input[type="text"], .rpform input[type="number"], .rpform input[type="password"], .rpform input[type="email"], .rpform textarea, .rpform select {
    background: #ffffff none repeat scroll 0 0;
    border: 1px solid #ebebeb;
    border-radius: 0;
    -webkit-box-shadow: 0 0px 2px rgba(0, 0, 0, 0.075);
    box-shadow: 0 0px 2px rgba(0, 0, 0, 0.075);
}
.rpform input[type="text"], .rpform input[type="number"], .rpform input[type="password"], .rpform input[type="email"] {
    padding: 6px 1.45%;
    width: 94%;
    display: block;
}
.rpform select {
    padding: 5px 1.45%;
    width: 97%;
    display: block;
}
.rpform input[disabled="true"]{background-color: #FFFFCC;}
.rpform textarea{
    padding: 10px 1.45%;
    width: 94%;
}

.rpform .table input[type="text"], .rpform .table input[type="number"], .rpform .table input[type="password"], .rpform .table input[type="email"] {
    padding: 3px 5px;
}
@media (max-width:420px){
    .rpform input[type="text"], .rpform input[type="password"], .rpform input[type="email"], select {
        padding: 8px 2%;
        width: 95%;
    }
    .rpform textarea{
        padding: 8px 2%;
        margin-right: 0;
        width: 95%;
    }
    
    .rpform select{
        padding: 8px 2%;
        margin-right: 0;
        width: 100%;
    }
    #content div.box table.progress-bar tbody td span{display: none;}
}
.rpform label{font: 13px/30px Tahoma;padding-left: 5px;color: #333333;}
#content div.rpform h1, #content div.rpform h2,#content div.rpform h3, #content div.rpform h4, #content div.rpform h5{
    background-color: #00944c; border: 1px solid #00944c; display: block; padding: 8px 1.45%;margin: 0;color: #FFFFFF;
}
#content div.rpform h5.title{
    background-color: #eaeaea; border: 1px solid #e5e3e3; color: #333333;
}
#content div.rpform h5 a{
    float: right;color: #FFFFFF;font-weight: normal;font-size: 12px;
}
.rpform .note{font: 12px/20px Arial;color: red;}
#content div.box div.message div.text{padding: 6px 6px 6px 6px;}
#content div.message div.text h6{font-size: 13px;}
#content div.box .message div.text span{font-size: 12px;padding-top: 0px;}
#content div.box label.header{display: block; width: 98%;border-bottom: 1px solid silver;}

#content div.box table.progress-bar{margin: 20px auto;height: 30px; background-color: #eeeeee; border: none;}
#content div.box table.progress-bar tbody td{border: none;padding: 5px;cursor: pointer;}
#content div.box table.progress-bar tbody td.active{background-color: #00944c;}
#content div.box table.progress-bar tbody td i{float: left; width: 30px; height: 30px; border-radius: 15px; line-height: 30px; 
    background-color: #ffffff;font-size: 18px; text-align: center;}
#content div.box table.progress-bar tbody td.active i{}
#content div.box table.progress-bar tbody td span{float: left; margin-left: 10px; font: 15px/30px arial, sans-serif;}
#content div.box table.progress-bar tbody td.active span{color: #FFFFFF;font-weight: bold;}

#content div.box table.mini-progress-bar{margin: 20px auto;height: 30px; background-color: #eeeeee; border: none;}
#content div.box table.mini-progress-bar tbody td{border: none;padding: 5px;cursor: pointer;}
#content div.box table.mini-progress-bar tbody td.active{background-color: #00944c;}
#content div.box table.mini-progress-bar tbody td i{float: left; width: 20px; height: 20px; border-radius: 10px; line-height: 20px; 
    background-color: #ffffff;font-size: 13px; text-align: center;}
#content div.box table.mini-progress-bar tbody td.active i{}
#content div.box table.mini-progress-bar tbody td span{float: left; margin-left: 6px; font: 12px/20px arial, sans-serif;}
#content div.box table.mini-progress-bar tbody td.active span{color: #FFFFFF;font-weight: bold;}

#content div.box div.bg-box .table{background-color: #FFFFFF;}
#content div.box table td{padding: 10px 5px;font-size: 12px;}
@media (max-width: 767px){#content div.box table td{padding: 5px 5px}}

/*== View ==*/
#content div.box div.view{color: #333333}
#content div.box div.view div.col-md-12{}
#content div.box div.view label{font: 14px/36px Tahoma, Arial;}
#content div.view h1, #content div.view h2,#content div.view h3, #content div.view h4, #content div.view h5{
    background-color: #00944c; border: 1px solid #00944c; display: block; padding: 10px 1.45%;margin: 0;color: #FFFFFF;
}
#content div.view h6{border-bottom: 1px solid #cdcdcd;display: block; padding: 10px 0;margin: 0;color: #333333;font-size: 15px;}
#content div.box div.view .value{font-size: 13px;line-height: 36px;font-weight: 600;color: #454545;}
#content div.box div.view p{display: block;margin: 0;}
#content div.box div.view p.title{color: #333333;font-weight: 600;}
#content div.box div.view div.text-info div.col-md-12{border-bottom: none;}
#content div.box div.view div{}
#content div.box div.view div p, #content div.box div.view div span, #content div.box div.view div strong{font-size: 13px;line-height: 25px;font-weight: normal;border: none;} 

#right-nav{position: fixed;right: 0px;top: 200px;width: 30px;background-color: white;border-radius: 5px 0 0 5px;padding: 10px;}
#right-nav a{width:30px;margin: 5px 0;}

#content div.bg-box h1,
#content div.bg-box h2,
#content div.bg-box h3,
#content div.bg-box h4,
#content div.bg-box h5,
#content div.bg-box h6
{
	margin: 0;
}


.cform input[type="text"], .cform input[type="password"], .cform input[type="email"], .cform textarea, .cform select {
    background: #ffffff none repeat scroll 0 0;border: 1px solid #ebebeb;border-radius: 0;-webkit-box-shadow: 0 0px 2px rgba(0, 0, 0, 0.075);box-shadow: 0 0px 2px rgba(0, 0, 0, 0.075);}
.cform input.mg-0 {
    margin: 0;
}
.cform input[type="text"], .cform input[type="password"], .cform input[type="email"] {padding: 5px 1.45%;width: 94%;display: block;}
.cform select {padding: 4px 1.45%;width: 97%;display: block;}
.cform input[disabled="true"]{background-color: #FFFFCC;}
.cform textarea{padding: 10px 1.45%;width: 94%;}

@media (max-width:420px){
    .cform input[type="text"], .cform input[type="password"], .cform input[type="email"], select {
        padding: 8px 2%;width: 95%;
    }
    .cform textarea{padding: 8px 2%;margin-right: 0;width: 95%;}
    .cform select{padding: 8px 2%;margin-right: 0;width: 100%;}
    #content div.box table.progress-bar tbody td span{display: none;}
}
.cform label{font: 13px/30px Tahoma;padding-left: 5px;color: #333333;}
#content div.cform h1, #content div.cform h2,#content div.cform h3, #content div.cform h4, #content div.cform h5{
    background-color:#eeeeee;display: block; padding: 10px 1.45%;margin: 0 0 10px 0;border: none;}
#content div.cform h5.underline{border-bottom: 1px solid #eeeeee;background-color: transparent}
#content div.cform h5 a{float: right;font-weight: normal;font-size: 12px;}
.cform .note{font: 12px/20px Arial;color: red;}

/*=== BEGIN BUTTONS ===*/

.save-btn-24{float:right;display:block;min-width:60px;height:24px;border:1px solid #FFFFFF;padding:2px 6px;margin-right:10px;
background:url('../images/icon_bg.gif');border:1px solid #C0C0C0;}
.save-btn-24 img{float: left;margin-right: 5px;width: 24px;height: 24px;}
.save-btn-24 span{float: left;line-height: 24px;text-align: center;}
.save-btn-24:hover{background:#f9faf7;}

.btn-green, .btn-green-32,
.btn-red, .btn-red-32{float:right;display: block;min-width: 60px;padding: 5px 10px;color: #FFFFFF;}
.btn-green, .btn-green-32{background-color: #018027;}
.btn-red, .btn-red-32{background-color: #FF0000;}
.btn-green:hover, .btn-green-32:hover, .btn-red:hover, .btn-red-32:hover{box-shadow: rgba(60, 64, 67, 0.3) 0px 2px 4px 0px, rgba(60, 64, 67, 0.15) 0px 4px 8px 4px;}
.btn-green, .btn-red{height: 24px;}
.btn-green-32, .btn-red-32{height: 32px;}
.btn-green img, .btn-green-32 img, .btn-red img, .btn-red-32 img{float: left;margin-right: 5px;}
.btn-green img, .btn-red img{width: 24px; height: 24px;}
.btn-green-32 img, .btn-red-32 img{width: 24px; height: 24px;}
.btn-green span, .btn-green-32 span, .btn-red span, .btn-red-32 span{float: left;text-align: center;}
.btn-green:hover span, .btn-green-32:hover span, .btn-red:hover span, .btn-red-32:hover span{color: #FFFFFF;text-decoration: underline;}
.btn-green span, .btn-red span{line-height: 24px;}
.btn-green-32 span, .btn-red-32 span{line-height: 32px;}

#content div.box .color_btn{display: inline-block;height: 24px;border-radius:  16px;padding: 5px 12px;}
#content div.box .color_btn img{float: left;width: 24px; height: 24px;margin-right: 8px;}
#content div.box .color_btn span{float:left;line-height: 24px;font-size: 13px;}

/*=== Increase/Decrease Input ===*/
form {
  margin: 0 auto;
  text-align: center;
}

.value-button {
  display: inline-block;
  border: 1px solid #ddd;
  margin: -3px 0 0 0;
  width: 19px;
  height: 19px;
  text-align: center;
  vertical-align: middle;
  padding: 1px 0;
  background: #eee;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.value-button:hover {
  cursor: pointer;
}

form .decrease {
  
}

form .increase {
  
}

form #input-wrap {
  margin: 0px;
  padding: 0px;
}

form input.number {
  text-align: center;
  border: none;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  margin: 0px;
  width: 40px;
  height: 40px;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}