.extsrv_font{
  font-family: 'Open Sans', sans-serif;
}
.leftcol{
  float: left;
}
.rightcol{
  float: right;
}
.extra_srv{
  border: 1px solid lightgray;
}
.all_srv .srv-row-item{
  padding-left: 15px;
  max-height: 45vh;
  overflow-y: scroll;
  overflow-x: hidden;
}
/* Add a black background color to the top navigation */
.topnav {
    /*background-color: lightgray;*/
    border-bottom: 1px solid lightgray;
    overflow: hidden;
}

/* Style the links inside the navigation bar */
.topnav a {
  width: 20%;
  float: left;
  display: inline-block;
  /*color: gray;*/
  text-align: center;
  padding: 0.75em 0.25em;
  text-decoration: none;
  font-size: 1em;
  border-bottom: 1px solid lightgray;
}
.topnav a:hover {
  background-color: lightgray;
  color: black;
  cursor: pointer;
}

/* Add an active class to highlight the current page */
.topnav a.active {
  /*color: #5a3914;*/
  /*border-bottom: 0.35em solid #5a3914;*/
  padding: 0.75em 0.75em 0.4em 1em;
  border-bottom: 0.35em solid;
  background-color: white;
}
.srv-box-item{
  /*padding-bottom: 0;*/
  border-bottom: 1px solid lightgray;
  margin-left: 0.5em;
  box-shadow: 1px 3px 5px 2px #eee;
  padding: 1em 0;
  position: static;
  clear:both;
  overflow:hidden;
}
.allbtn,
.all_srv_info,
.modal_h{
  overflow: auto;
}
.warning_txt p{
  white-space: pre-wrap;
  color:#ee6d74;
}
.modal_h p{
  white-space: pre-wrap;
  /*color:#e16223; */
}
.srv_modal{
  background-color: rgba(199, 199, 199, 0.75);
}
.srv_modal_cont{
  padding: 1em;
  background-color: rgba(253, 248, 240);
}
.srv_img img{
  width: 100%;
  padding: 0.7em;
}
.img_container{
}
.srv_name{
  color: #5a3914;
  font-weight: bold;
}
[name=total_srv_price] h4{
  color : black;
  float : right;
}
[name=total_srv_price] h4 label{
  /*color : #0e3b5f;*/
  font-weight: bold;
}
.srv_price{
  color: black;
}

button {
  float: right !important;
  /*background-color: #5a3914;  Brown */
  /*border: 2px solid #5a3914;*/
  /* color: #fadaab; Cream */
  border: 2px solid;
  padding: 0.5em 1em;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 1em;
  font-weight: bold;
  margin-right: 0.75em;
  margin-bottom: 0.5em;
}
button.srv-cls-btn,
button.srv-cls-btn:hover {
  border: 2px solid ;
  /*background-color: white; 
  color: #5a3914; 
  border: 2px solid #5a3914;*/
}
/*button.srv-cls-btn:hover {
  border: 2px solid ;*/
  /*background-color: #5a3914; 
  color: #fadaab; 
  border: 2px solid #5a3914;*/
/*}*/
.srv_info div{
  font-size: 1em;
  margin-top: 0.5em;
  /*display: block;*/
}
.hidecontent div{
  margin-top: 0em;
}
.ui-datepicker-header{
  background-color: white;
}
.srv-row-item,
.srv_box,
.srvbkdate,
div.srv_name,
div.srv_desc,
div.srv_desc_full,
div.warning_txt,
div.dialog,
div.hidecontent,
div.ckpick_remark,
div.ckdrop_remark,
button.srv-sel-btn,
button.srv-add-btn,
button.srv-cls-btn,
.sepsrv{
  display: none;
}
.srv-row-item.active,
.srv_box.active,
.srvbkdate.active,
div.srv_name.active,
div.srv_desc.active,
div.srv_desc_full.active,
div.warning_txt.active,
div.hidecontent.active,
div.ckpick_remark.active,
div.ckdrop_remark.active,
button.srv-sel-btn.active,
button.srv-add-btn.active,
button.srv-cls-btn.active,
a.srv-sel-btn.active,
a.srv-add-btn.active,
a.srv-cls-btn.active,
.sepsrv.active{
  display: block;
}

div.srv_price{
  margin-top: 1em;
}

.srv_box{
  padding-left: 2em;
  padding-right: 2em;
}
.srv_box h5{
  font-weight: bold;
}
.add_srv{
  margin-top: 1em;
  padding-bottom: 0.5em;
  border-bottom: 1px solid lightgray;
}
.sethead{
  padding-top: 0.5em;
}
.del_srv:hover,
.plus_numb:hover,
.minus_numb:hover{
  cursor: pointer;
}
.numb_val:hover{
  cursor: context-menu;
}

/*.qicon{
  color:#0e3b5f;
}*/
.qicon + .tooltip > .tooltip-inner {
  max-width: 100%;
  width: 100%;
  /*background-color: #0e3b5f;*/
  border-radius: 5px;
  font-size: 0.9em;
  padding-top: 1em;
  padding-bottom: 0.5em;
}
.qicon + .tooltip > .tooltip-arrow {
  /*border-top-color:#0e3b5f;*/
}
.srv_wrapper2 {
  display: flex;
  flex-wrap: wrap;
}
.srv_wrapper2>div {
  flex: 1 1 200px;
}
.srv_wrapper{
  display: grid;
  grid-template-columns: repeat(2, 2fr);
  grid-gap:0;
  /*grid-auto-rows: minmax(100%, auto);*/
}
.srv_wrapper>div{
  max-width:100%;
  padding-top: 0.25em;
}
  /*position:static;*/

div .srv_count {
  text-transform: capitalize;
}
.srv_special_request{
  padding-top: 0.5em;
}
.srv_special_request textarea{
  resize:none;
}

.sel_time{
  max-width: 5%;
}

.all_sepsrv{
  overflow: hidden;
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 990px) {
  .topnav {
    position: relative;
    padding-top: 15px;
  }
  .srv-box-item{
    padding-top: 1em;
    padding-bottom: 1em;
  }
  .srv_wrapper{
    grid-template-columns: repeat(1, 1fr);
  }
}

/*@media screen and (max-width: 650px) {
  .topnav {position: relative;}
}*/

.servicetime{
  padding-top: 7px;
}
.spanservice{
  margin-left: 15px;
  font-weight: bold;
}
.hide_cus_out{
  display: none;
}