body {
  background-color: #5f645f;
  font-weight: 400;
  font-size: 25px;
  overflow-y: hidden;
  height: 100%;
  color: black;
}

#login {
  width: 30%;
  margin-top: 15%;
  padding: 20px;
  background-color: white;
}

#navi,
#top_bar {
  height: 10vh;
  margin-bottom: 0 !important;
  padding: 15px;
}

#navi div {
  margin-bottom: 0 !important;
}

#nav-main,
#title,
#staff_title,
#summary_title,
#click_more_cate,
#summary_filter {
  font-size: 3vh;
}

#summary_filter,
#summary_type {
  background-color: white;
  border-radius: 15px;
  height: 5vh;
  font-size: 3vh;
}

input.select-dropdown {
  border-bottom: none !important;
  /* font-size: 3vh !important; */
}

#all_content {
  background-color: #5f645f;
}

#print_logo {
  width: 100% !important;
}

#logo {
  position: fixed;
  left: 1vh;
  top: 1vh;
  width: auto;
  z-index: 9999;
  height: 10vh;
  -webkit-filter: drop-shadow(0px -1px 0 #89887C) drop-shadow(0px 1px 0 #89887C) drop-shadow(1px 0px 0 #89887C) drop-shadow(-1px 0px 0 #89887C);
  filter: drop-shadow(0px -1px 0 #89887C) drop-shadow(0px 1px 0 #89887C) drop-shadow(1px 0px 0 #89887C) drop-shadow(-1px 0px 0 #89887C);
}

#old_pass,
#new_pass,
#new_pass_again {
  text-align: center;
}

/* Main Page */

.code_field,
.rate_field {
  text-align: center !important;
}

/* Page Sale */

#sale_div {
  margin-bottom: 0;
}

#sale_panel {
  width: 100%;
  padding: 0;
  background-color: white;
  -webkit-box-shadow: 0 8px 17px 2px rgb(0 0 0 / 14%), 0 3px 14px 2px rgb(0 0 0 / 12%), 0 5px 5px -3px rgb(0 0 0 / 20%);
  box-shadow: 0 8px 17px 2px rgb(0 0 0 / 14%), 0 3px 14px 2px rgb(0 0 0 / 12%), 0 5px 5px -3px rgb(0 0 0 / 20%);
}

#sale_panel_box {
  padding-left: 30px;
}

#barcode_field {
  padding-left: 20px;
  padding-right: 20px;
  background-color: wheat;
  height: 6vh;
}

#customer_field {
  padding-left: 20px;
  padding-right: 20px;
  background-color: #A23BEC;
  height: 6vh;
}

#barcode_search,
#customer_phone {
  text-align: center;
  color: black;
  border-bottom: none;
  margin: 0;
  height: 6vh;
}

#customer_phone {
  color: white;
}

#barcode_search::placeholder,
#edit_qty_input::placeholder,
#customer_phone::placeholder {
  color: black;
  opacity: 0.5;
}

.customer_title_div {
  padding-left: 10px;
  padding-right: 10px;
  height: 6vh;
  position: relative;
  /* overflow-x: hidden;
  overflow-y: hidden; */
}

.customer_title_div div {
  padding-left: 10px;
  padding-right: 10px;
  width: 100%;
  overflow-wrap: break-word;
  color: white;
  cursor: pointer;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

#bill_list {
  height: 58vh;
  overflow-y: scroll;
  font-size: 18px;
  padding-top: 10px;
}

#bill_total {
  height: 6vh;
  padding-top: 5px;
  font-size: 30px;
  background-color: green;
  color: white;
}

.item_bill {
  cursor: pointer;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  line-height: 1;
}

.item_bill div {
  line-height: 1;
  overflow-wrap: break-word;
}

.change_sale_qty {
  width: 100% !important;
}

.instance_div {
  padding: 0 5px 0 5px !important;
}

.instance_selected {
  background-color: orange;
}

.instance_selector:hover,
.instance_selector:active,
.instance_selector:focus {
  background-color: orange;
}

#edit_price_input,
#edit_qty_input,
#current_price,
#current_qty,
#edit_price_admin_phone,
#edit_price_admin_pass {
  text-align: center;
}

#edit_price_input,
#edit_qty_input,
#current_price,
#current_qty {
  font-size: 3vh;
}

.top_category_title {
  height: 4vh;
  padding: 0 5px !important;
}

.top_category_title div {
  font-size: 2.4vh;
  line-height: normal !important;
  margin: auto;
  /* -ms-transform: translateY(10%);
  transform: translateY(10%); */
}

/* #print_bill_detail div.hr hr {
  margin: 0;
} */

#final_button,
#final_button_confirmation,
#payment_button {
  height: 6vh;
  margin: 0;
  padding: 0;
}

#payment_button {
  background-color: yellow;
}

#final_button {
  background-color: white;
}

.final_btn,
.final_confirmation_btn {
  width: 100%;
  border-radius: 15px;
}

#onepay_modal {
  width: 300px;
  height: 500px;
  text-align: center;
  top: 20% !important;
}

#onepay_modal_content {
  height: 400px;
}

#cash_modal {
  width: 300px;
  height: 300px;
  text-align: center;
  top: 20% !important;
}

#cash_modal_content {
  height: 200px;
}

#bank_ref,
#cash_input {
  text-align: center;
  font-size: 25px;
}

.button_box {
  height: 6vh;
  padding: 10px !important;
}

#tool_tab {
  background-color: green;
  height: 12vh;
}

#sale_item_panel {
  padding: 0;
  margin-right: 0;
  margin-left: 0;
  -webkit-box-shadow: 0 8px 17px 2px rgb(0 0 0 / 14%), 0 3px 14px 2px rgb(0 0 0 / 12%), 0 5px 5px -3px rgb(0 0 0 / 20%);
  box-shadow: 0 8px 17px 2px rgb(0 0 0 / 14%), 0 3px 14px 2px rgb(0 0 0 / 12%), 0 5px 5px -3px rgb(0 0 0 / 20%);
}

#sale_item_search_panel {
  line-height: 1 !important;
  min-height: 6vh;
  padding: 0;
}

#sale_item_search {
  padding: 0;
  background-color: green;
  color: white;
  height: 12vh;
  text-align: center;
}

#click_more_cate {
  min-height: 12vh;
  border-radius: 20px;
  margin-left: -20px;
  margin-right: 20px;
}

#sale_category_panel {
  min-height: 12vh;
  padding: 0;
  background-color: wheat;
}

#sale_all_items {
  background-color: white;
}

#sale_all_items_content {
  padding: 0;
  margin: 0;
  height: 70vh;
  width: 100%;
  overflow-y: scroll;
}

.top_category {
  padding: 10px 5px 0px 5px !important;
  font-size: 18px;
}

.top_category div {
  cursor: pointer;
  width: 100%;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.click_to_enlarge_xs {
  cursor: pointer;
  max-width: 100%;
  height: 30px;
}

.click_to_enlarge {
  max-width: 100%;
  height: 12vh;
}

#sale_all_category_modal {
  min-height: 40%;
  padding: 10px;
  width: 25%;
  left: 75%;
}

#edit_item_bill_modal {
  top: 30% !important;
  width: 40%;
}

#edit_qty_input {
  text-align: center;
}

.each_sale_item {
  cursor: pointer;
  height: 24vh;
  padding: 20px !important;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.each_sale_item .border_table {
  height: 22vh;
}

.img_div {
  height: 12vh;
}

.title_div {
  padding-left: 10px;
  padding-right: 10px;
  height: 6vh;
  position: relative;
  background-color: wheat;
  /* overflow-x: hidden;
  overflow-y: hidden; */
}

.title_div div {
  padding-left: 10px;
  padding-right: 10px;
  width: 100%;
  overflow-wrap: break-word;
}

.price_div {
  height: 4vh;
}

.each_sale_item:active,
.item_bill:active {
  transform: translateY(4px);
  -webkit-transform: translateY(4px);
}

/* Page Staff */

#staff_table {
  background-color: white;
}

#delete_staff_modal {
  width: 40%;
}

/* Page Summary */

#swap_summary {
  width: 100%;
  font-size: 25px;
  height: 5vh;
  border-radius: 15px;
}

#bill_date {
  height: 5vh;
  text-align: center;
  color: blue;
  cursor: pointer;
  font-size: 3vh;
  background-color: white;
  /* border: solid 2px black; */
  border-radius: 15px;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

#all_bill {
  background-color: white;
}

#total_bill {
  font-size: 30px;
  text-align: center;
  cursor: pointer;
  background-color: white;
  /* border: solid 2px black; */
  border-radius: 15px;
}

#item_history_content table.dataTable {
  width: 100% !important
}

#item_history_table {
  width: 100%;
}

#item_history_modal {
  height: 100vh;
  width: 80%;
  overflow-y: hidden;
}

#item_history_modal .modal-content {
  height: 90%;
}

.summary_panel {
  height: 5vh;
}

.summary_panel div {
  font-size: 3vh;
  line-height: normal !important;
  margin: auto;
  /* -ms-transform: translateY(10%);
  transform: translateY(10%); */
}

#edit_pass_admin_pass,
#edit_pass_password,
#delete_staff_admin_pass {
  text-align: center;
}

/* #summary_table {
  height: 70vh;
  overflow-y: scroll;
} */

#delete_bill_modal {
  width: 40%;
}

.detail_modal_content {
  background-color: grey !important;
}

#bill_detail_table {
  background-color: white;
}

/* Page Item */

#item_category_search_tab,
#item_div_tool_bar,
#category_item_title,
#item_category_search_bar,
#search_item_in_category {
  height: 6vh;
  padding: 0;
  margin: 0;
}

#item_category_div {
  padding: 0;
  background-color: white;
  -webkit-box-shadow: 0 8px 17px 2px rgb(0 0 0 / 14%), 0 3px 14px 2px rgb(0 0 0 / 12%), 0 5px 5px -3px rgb(0 0 0 / 20%);
  box-shadow: 0 8px 17px 2px rgb(0 0 0 / 14%), 0 3px 14px 2px rgb(0 0 0 / 12%), 0 5px 5px -3px rgb(0 0 0 / 20%);
}

#item_category_search_tab {
  background-color: wheat;
}

#add_cate_modal_content,
#edit_cate_modal_content {
  height: 550px;
}

#item_category_search_bar,
#search_item_in_category {
  padding: 0;
  margin: 0;
  background-color: wheat;
  color: black;
  text-align: center;
  border-bottom: none;
}

#item_category_search_bar::placeholder,
#search_item_in_category::placeholder {
  color: black;
  opacity: 0.5;
}

#item_div_parent {
  padding-left: 30px;
}

#item_div {
  height: 82vh;
  padding: 0;
  margin: 0;
  background-color: white;
  -webkit-box-shadow: 0 8px 17px 2px rgb(0 0 0 / 14%), 0 3px 14px 2px rgb(0 0 0 / 12%), 0 5px 5px -3px rgb(0 0 0 / 20%);
  box-shadow: 0 8px 17px 2px rgb(0 0 0 / 14%), 0 3px 14px 2px rgb(0 0 0 / 12%), 0 5px 5px -3px rgb(0 0 0 / 20%);
}

#category_item_title {
  padding-top: 10px;
}

#category_item_list,
#item_all_items_grid {
  height: 76vh;
  overflow-y: auto;
  padding: 10px;
  margin: 0;
  background-color: white;
}

#category_item_list {
  text-align: left;
}

#category_item_button {
  margin-bottom: 0;
}

.each_category {
  padding-left: 10px !important;
  margin-bottom: 0;
  cursor: pointer;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.clicked_this_cate {
  background-color: yellow;
}

.cate_search {
  cursor: pointer;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

#item_enlarge_modal {
  width: 80%;
  /* height: 700px; */
}

#item_enlarge_modal_xs {
  width: 40%;
  /* height: 700px; */
}

#delete_cate_modal {
  width: 40%;
}

#delete_cate_admin_pass,
#delete_item_admin_pass {
  text-align: center;
}

.each_item {
  cursor: pointer;
  padding: 20px !important;
}

#stock_expiry {
  cursor: pointer;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.stock_change {
  text-align: center;
}

.stock_change::placeholder {
  color: black;
  opacity: 0.7;
}

#stock_list {
  min-height: 20vh;
  max-height: 35vh;
  overflow-y: scroll;
}

#stock_table {
  width: 100%;
  cursor: pointer;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

#stock_table tr.selected_stock {
  border: solid 2px red;
}

#item_div_tool_bar {
  padding: 0;
  margin: 0;
  background-color: wheat;
}

.print_content {
  text-align: center !important;
  padding: 0 !important;
}

#print_bill_total {
  padding-right: 15px;
}

.sidenav {
  z-index: 99999;
}

.disable_category_touch {
  pointer-events: none;
  opacity: 0.5;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Printing Assets */

#print_staff {
  font-size: 18px;
}

div.ranges li {
  font-size: 18px !important;
  padding-bottom: 25px !important;
}

#navi_div {
  height: 6vh;
  width: 100%;
  margin-bottom: 0 !important;
}

#main_div {
  /*background-color: #FFFCD6 !important;*/
  background-color: rgb(190, 190, 190) !important;
  height: 88vh;
  width: 100%;
  margin-bottom: 0 !important;
  padding: 30px;
}

#status_div {
  position: absolute;
  padding-top: 10px;
  height: 6vh;
  width: 100%;
  z-index: 9999999999999;
  margin-bottom: 0 !important;
}

#title {
  text-align: left !important;
  padding-top: 10px;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Promotion Page */

#new_promotion_items {
  height: 20vh;
  border: solid 1px #000;
  padding: 10px;
  margin-bottom: 30px;
  overflow-y: auto;
}

#add_promotion_item {
  max-height: 82vh;
  height: 82vh;
}

#add_new_promotion_modal {
  min-height: 75%;
}

#add_promotion_item_content {
  height: 70vh;
}

#selected_pro_items {
  height: 20vh;
  overflow-y: auto;
  margin-bottom: 0;
  border: solid 1px #000;
}

#selection_pro_items {
  /* height: 60%; */
  overflow-y: auto;
  margin-bottom: 0;
  padding: 0;
}

#selection_search_div {
  height: 5vh;
  padding: 0 !important;
}

#selection_search {
  border: none;
  background-color: orange;
  text-align: center !important;
}

#selection_search::placeholder {
  color: black;
}

#selection_cate {
  height: 45vh;
  padding: 10px 5px 0 5px;
  overflow-y: auto;
  margin-bottom: 0;
  border: solid 1px #000;
}

#selection_item {
  height: 50vh;
  padding: 10px 5px 0 5px;
  overflow-y: auto;
  margin-bottom: 0;
  border: solid 1px #000;
}

.each_pro_item {
  padding: 10px;
  height: 6vh;
  position: relative;
  cursor: pointer;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

#new_promotion_sd,
#new_promotion_ed {
  cursor: pointer;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.empty_selection {
  background-color: red;
}

#promotion_item_content {
  height: 60vh;
  overflow-y: auto;
}

#promotion_bill_modal {
  width: 90%;
}

#promotion_bill_content {
  height: 60vh;
  overflow-y: auto;
}

.each_pro_item_s,
.each_pro_item_title,
.click_to_remove_pro_item {
  padding-left: 10px;
  padding-right: 10px;
  height: 6vh !important;
  position: relative;
  background-color: wheat;
  cursor: pointer;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.each_pro_item {
  min-height: 24vh !important;
  padding: 10px !important;
}

.each_pro_item_img {
  height: 12vh !important;
  max-width: 100%;
}

.each_pro_item_price {
  color: white;
  background-color: blue;
  margin-bottom: 0 !important;
}

/* Notification Page */
.click_to_filter {
  cursor: pointer;
}

#version_timer {
  cursor: pointer;
}

/* Mobile Item Page */

.flip {
  transform: scaleX(-1) !important;
}

#stock_check_container {
  padding: 10px !important;
}

#scanner {
  position: relative;
  width: 100%;
  height: 300px;
  /* Adjust as needed */
  border: 2px dashed red;
  /* 👈 This creates a guiding box */
}

#scanner video {
  width: 100%;
  height: auto;
  max-height: 60vh;
}

#scanner canvas {
  display: none;
}

#stock_scan_modal {
  max-height: 70vh;
}

#stock_check_modal {
  max-height: 90vh;
}

#separate_stack_modal {
  width: 40%;
}

#scan_footer {
  height: 10vh;
}

#stock_list_check td,
#stock_item_mobile_modal td {
  font-size: 10px !important;
}

#price_tag_title {
  max-height: 60px;
  overflow-y: hidden;
}

.turnDeviceNotification {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 99999999999999999999;
  display: none;
}

.turnDeviceNotification {
  background-image: url('./portrait_only.png');
  background-size: cover;
}

#bill_detail_modal {
  width: 90%;
}

#edit_item_category_wrapper ul.select-dropdown {
  height: 15vh;
  overflow-y: scroll;
}

#refresh_button {
  background-color: #5f645f;
}

.each_cate_group {
  padding: 15px !important;
}

#mobile_navi_div {
  height: 8vh;
  width: 100%;
  margin-bottom: 0 !important;
}

#mobile_title {
  padding-top: 10px;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

#item_mobile_items_grid {
  height: 100%;
  overflow-y: auto;
  padding: 10px;
  margin: 0;
  background-color: white;
}

#mobile_status_div {
  position: absolute;
  padding-top: 10px;
  height: 8vh;
  width: 100%;
  margin-bottom: 0 !important;
}

/* @supports (-webkit-touch-callout: none) {
  #mobile_main_div {
    height: 80vh;
  }
}

@media screen and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) {
  #mobile_main_div {
    height: 80vh;
  }
} */

#mobile_main_div {
  background-color: rgb(190, 190, 190) !important;
  height: 80vh;
  width: 100%;
  margin-bottom: 0 !important;
  padding: 10px;
}

each_mobile_stock_item .each_mobile_item {
  padding: 10px !important;
}

.each_mobile_item .tool_div {
  padding: 0 5px 0 5px !important;
  margin-bottom: 0 !important;
}

.each_mobile_stock_item {
  padding: 10px !important;
}

.each_mobile_stock_item .tool_div {
  padding: 0 5px 0 5px !important;
  margin-bottom: 0 !important;
}

.mobile_item_button_div {
  padding: 5px !important;
}

.mobile_item_button {
  height: 30px !important;
  width: 30px !important;
}

.mobile_item_button i {
  font-size: 1.4rem !important;
  line-height: 1 !important;
}

.click_to_enlarge_mobile {
  max-width: 100%;
  height: 12vh;
}

#mobile_item_enlarge_modal {
  width: 80%;
  max-height: 80%;
}

#edit_mobile_item_img_preview img {
  width: 70vw;
  max-height: 50vh;
}

/* End Mobile Item Page*/

/* Start Stock Checker Page */
#stock_container {
  /* padding: 20px; */
}

.stock_check_container {
  padding-left: 80px !important;
  padding-right: 80px !important;
  width: 100%;
  position: absolute;
}

#stock_check_table_div {
  left: 0;
}

#stock_checker_detail {
  left: 100%;
}

/* End Stock Checker Page */

#staff_table {
  width: 100% !important;
}

#fake_barcode_panel {
  height: 80vh;
  overflow-y: scroll;
}

.sidenav_trigger {
  padding-top: 10px !important;
}

.sidenav_item {
  color: black !important;
  font-size: 25px !important;
  padding: 30px 0 0 0 !important;
  height: auto !important;
}

.navi_link {
  color: white !important;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.current_link,
.navi_link:hover {
  color: yellow !important;
}

#nav-mobile .navi_link {
  color: black !important;
}

#nav-mobile .current_link,
#nav-mobile .navi_link:hover {
  color: blue !important;
}

hr {
  border-color: black;
}

.hr_div {
  padding-top: 40px !important;
  padding-bottom: 40px !important;
}

.hr_div hr {
  display: none;
}

tr td {
  text-align: center;
}

.cal_day {
  float: left;
  width: 14.25%;
  border: 1px solid black;
  cursor: pointer;
}

.cal_day:hover {
  background-color: orange;
}

#att_calendar_div {
  font-size: 15px;
}

#calendar_rate {
  font-size: 25px;
  color: red;
}

tbody td {
  font-size: 18px !important;
}

#staff_table {
  width: 100% !important;
}

#add_date {
  cursor: pointer;
}

#add_date:hover {
  color: red;
}

#add_content {
  height: 500px;
}

.each_month {
  height: 200px;
  padding: 20px;
  margin-bottom: 0 !important;
}

.empty_day {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

#title_click {
  color: white;
}

#add_sdate,
#change_val_d,
#date_select,
#title_click {
  cursor: pointer;
}

#date_select {
  text-align: center;
  font-size: 30px;
  border: solid purple 5px;
  border-radius: 10px;
  background-color: purple;
  color: white;
  transition: all .2s ease-in-out;
}

#change_pass_modal {
  width: 25%;
  height: 400px;
}

#each_detail {
  pointer-events: none;
}

input.select-dropdown,
ul.dropdown-content li span {
  text-align: center !important;
}

.select_type,
.cal_day {
  cursor: pointer;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.att_frame {
  padding: 0 !important;
  color: white;
  cursor: pointer;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  transition: all .2s ease-in-out;
}

.att_frame:active,
#date_select:active {
  transform: scale(0.8, 0.8);
  -webkit-transform: scale(0.8, 0.8);
}

@media only screen and (max-width: 768px) {
  #login {
    width: 80%;
  }

  tbody td {
    font-size: 17px !important;
  }

  tbody .btn-floating {
    height: 25px !important;
    width: 25px !important;
  }

  body a.btn {
    height: 30px !important;
    width: 30px !important;
  }

  tbody .btn-floating i {
    font-size: 14px;
    line-height: 0px;
    position: relative;
    top: -5px;
  }

  tbody .btn-floating span {
    /* font-size: 14px; */
    line-height: 0px;
    position: relative;
    top: -5px;
  }

  .hr_div {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }

  .hr_div hr {
    display: block;
  }

  .spaces {
    height: 220px;
  }

  .about_item,
  .about_item_each {
    height: auto;
    width: 100%;
    background-color: white;
    padding: 0 !important;
  }

  #main_div {
    padding: 10px;
  }

  #pic_modal,
  #cal_pic_modal {
    width: 90%;
  }

  #change_pass_modal {
    width: 60%;
    height: 500px;
  }

}