@media (max-width: 772px) {
  #record_search_keyword {
    padding: 20px 0px 10px 0px !important;
  }

  #record_search_keyword label {
    padding-right: 5px;
    padding-left: 0px;
  }
}

#record_reslist {
  padding-left: 30px;
  width: 95%;
}

.bootstrap-style input[type="checkbox"],
.bootstrap-style input[type="radio"] {
  width: 20px;
}

.bootstrap-style {
  padding-left: 30px;
  width: 95%;
}

.ui-dialog .ui-dialog-titlebar-close span {
  margin: -8px;
}

.ui-jqgrid tr.jqgrow td {
  white-space: normal !important;
}

th.ui-th-column div {
  white-space: normal !important;
  height: auto !important;
}

.ui-jqgrid .ui-jqgrid-view {
  font-size: 13px;
}

#record_reslist a,
#record_reslist a:link {
  color: blue !important;
}

#record_search_keyword {
  padding: 20px 20px 10px;
  margin-bottom: 0 !important;
  border-radius: 5px;
}

#advance_record_search_bar {
  margin-right: 5px;
  margin-left: -5px;
  height: 34px;
  cursor: pointer;
}

#form_buttons {
  height: 34px;
  display: inline-block;
  transition: color 0s ease-out, background 0s ease-in;
  padding-left: 20px;
}

#record_search_keyword input {
  font-size: 16px;
  height: 34px;
  width: 40%;
  border-radius: 5px 0 0 5px;
  padding-top: 0;
  /*for IE*/
  padding-top: initial;
}

/* For Rating star, ref: https://codepen.io/jamesbarnett/pen/vlpkh
//fieldset, label { margin: 0; padding: 0; }
*/

/****** Style Star Rating Widget *****/

.rating {
  border: none;
  float: left;
  padding-left: 10px;
}

.rating>input {
  display: none;
}

.rating>label:before {
  margin: 5px;
  font-size: 1.25em;
  font-family: FontAwesome;
  display: inline-block;
  content: "\f005";
}

.rating>label {
  color: #ddd;
  float: right;
}

/***** CSS Magic to Highlight Stars on Hover *****/

.rating>input:checked~label,
/* show gold star when clicked */
.rating:not(:checked)>label:hover,
/* hover current star */
.rating:not(:checked)>label:hover~label {
  color: #FFD700;
}

/* hover previous stars in list */

.rating>input:checked+label:hover,
/* hover current star when changing rating */
.rating>input:checked~label:hover,
.rating>label:hover~input:checked~label,
/* lighten current selection */
.rating>input:checked~label:hover~label {
  color: #FFED85;
}

/***** CSS Banner and Sub-menu *****/
/*
* RELOCATION IN BODY STYLE INTO CENTRAL CSS FILE
*/

/* donut chart row */
#myChart {
  width: 330px;
  height: 330px;
}

#block_container {
  height: fit-content;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  padding: 30px;
}

#bloc1 {
  position: relative;
  text-align: right;
  width: 300px;
}

.bloc3_book_counter_image {
  max-height: 180px;
  max-width: 180px;
}

.bloc1_image {
  margin-top: 15px;
  width: 210px;
}

.bloc1_image:hover {
  cursor: pointer;
}

/* book counter */
.bloc3_book_counter_container {
  position: relative;
  color: white;
  width: fit-content;
  block-size: fit-content;
  font-size: 17px;
  font-weight: bold;
  display: inline-block;
}

.bloc3_book_counter_1_digit {
  /* for 1 digit of number */
  position: absolute;
  top: 11.5%;
  /* 4.6%->11.6% */
  right: 20%;
  /* value is 1-digit: 28%->20.5% */
}

.bloc3_book_counter_2_digit {
  /* for 2 digits of number */
  position: absolute;
  top: 11.5%;
  right: 17%;
  /* value is 2-digits: 25.5%->17% */
}

.bloc3_book_counter_btntooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
  width: 300px;
}

.bloc3_book_counter_btntooltip .bloc3_book_counter_btntooltiptext {
  visibility: hidden;
  background-color: lightgrey;
  color: #000;
  border-radius: 10px;
  padding: 8px;
  text-align: left;
  width: 175px;
  height: 75px;

  /* Position the tooltip */
  position: absolute;
  z-index: 1;
  top: -50%;
  margin-left: -185px;
  /* Use half of the width (120/2 = 60), to center the tooltip */


  /*padding: 5px;*/
  /*top: 100%;*/
  /*left: 50%;*/
  /*margin-left: -60px; /* Use half of the width (120/2 = 60), to center the tooltip */
}

.bloc3_book_counter_btntooltip:hover .bloc3_book_counter_btntooltiptext {
  visibility: visible;
}

@media (max-width: 749px) {

  /* refer to original hkreading city menu */
  #bloc1 {
    top: -23%;
    margin-right: 30px;
    width: 185px;
    /* orginal image width: 153px */
  }

  .bloc1_image {
    width: 185px;
    /* orginal image width: 153px */
    margin-top: 10px;
  }

  .bloc3_book_counter_image {
    max-height: 160px;
    max-width: 160px;
  }

  .bloc3_book_counter_container {
    font-size: 16px;
  }

  .bloc3_book_counter_1_digit {
    /* for 1 digit of number */
    top: 11.3%;
  }

  .bloc3_book_counter_2_digit {
    /* for 2 digit of number */
    top: 11.3%;
  }
}

@media (max-width: 620px) {
  #block_container {
    text-align: center;
    flex-direction: column;
  }

  #myChart {
    width: 250px;
    height: 250px;
  }

  #bloc1 {
    top: 0%;
    /* move 3 blocks to left */
    width: 330px;
  }

  .bloc1_image {
    width: 133px;
    margin-top: 5px;
  }
}

/* table header style */
.ui-th-column,
.ui-jqgrid .ui-jqgrid-htable th.ui-th-column {
  text-align: left;
  padding-left: 5px;
  font-size: 1.4em;
}

/* table body style */
.ui-jqgrid tr.jqgrow td {
  font-size: 1.2em;
  /*height: 225px;*/
}

/* table page controller style */
.ui-jqgrid .ui-jqgrid-pager {
  font-size: 0.9em;
}

.actionbtn {
  width: 30px !important;
  margin-top: 10px;
  margin-left: 15px;
}

@media (max-width: 800px) {

  /* table header style */
  .ui-th-column,
  .ui-jqgrid .ui-jqgrid-htable th.ui-th-column {
    text-align: left;
    padding-left: 5px;
    font-size: 1.2em;
  }

  /* table body style */
  .ui-jqgrid tr.jqgrow td {
    font-size: 1.2em;
  }

  /* table page controller style */
  .ui-jqgrid .ui-jqgrid-pager {
    font-size: 0.8em;
  }

  .actionbtn {
    width: 25px !important;
    margin-top: 10px;
    margin-left: 10px;
  }
}

@media (max-width: 600px) {

  /* table header style */
  .ui-th-column,
  .ui-jqgrid .ui-jqgrid-htable th.ui-th-column {
    text-align: left;
    padding-left: 5px;
    font-size: 1em;
  }

  /* table body style */
  .ui-jqgrid tr.jqgrow td {
    font-size: 1em;
  }

  /* table page controller style */
  .ui-jqgrid .ui-jqgrid-pager {
    font-size: 0.7em;
  }

  .actionbtn {
    width: 20px !important;
    margin-top: 5px;
    margin-left: 10px;
  }
}

/* book image badge */
.book_image_container {
  position: relative;
  width: fit-content;
  block-size: fit-content;
}

.book_image_badge {
  position: absolute;
  top: 0%;
  left: 0%;
}

.btnGridEdit:hover {
  cursor: pointer;
}

.btnGridDelete:hover {
  cursor: pointer;
}

.btnGridAttachcard:hover {
  cursor: pointer;
}

.btntooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.btntooltip .btntooltiptext {
  visibility: hidden;
  background-color: lightgrey;
  color: #000;
  border-radius: 6px;
  padding: 2px;
  text-align: center;
  width: 60px;

  /* Position the tooltip */
  position: absolute;
  z-index: 1;
  top: 110%;
  margin-left: -45px;
  /* Use half of the width (120/2 = 60), to center the tooltip */


  /*padding: 5px;*/
  /*top: 100%;*/
  /*left: 50%;*/
  /*margin-left: -60px; /* Use half of the width (120/2 = 60), to center the tooltip */
}

.btntooltip:hover .btntooltiptext {
  visibility: visible;
}

#dialog-confirm-remove-message {
  padding-left: 20px;
}

#dialog-confirm-submit-message {
  padding-left: 20px;
}

.main-section-btn {
  flex: 1 1 auto;
  margin: 10px;
  padding: 15px;
  text-align: center;
  text-transform: uppercase;
  transition: 0.5s;
  background-size: 200% auto;
  color: #454545;
  /* text-shadow: 0px 0px 10px rgba(0,0,0,0.2);*/
  /* box-shadow: 0 0 20px #baabab; */
  border-radius: 10px;
  display: block;
  cursor: pointer;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  height: 54px;
  width: 235px;
}

.form-check {
  display: flex;
}

.form-check label {
  width: 100% !important;
  text-align: left !important;
}