/*
loading_circle							96
ble_warning									96
snackbar										96
-------------------------------
thired_screen_dim						96
-------------------------------
nag_screen_container				95
notifications_container			95
installContainer						95
notification_alert					95
groups_container						94
text_editor_container				94
progress_bar_dimmer					93
alert buttons triangle			92
alert_container							93
nav app container						93
-------------------------------
device_settings_menu_outer  92
-------------------------------
second_screen_dim						91
-------------------------------
chat												91
shares_tip									91
admin_map_container					91
full_screen_container				90
text_editor									90
contacts_search_container		90
menu												89
opening_msg									88
search results							87
share												86
share_details_box						86
upgrade_icon								85
overlay_tip									85
device_overview_container		85
safari_install_instructions	85
safari_insta....screen_hide	84
camera_feed_outer						85
wizard_container						85
-------------------------------
screen_dim									80
hard_screen_dim							80
-------------------------------
sign_up_box									80
scan_button									75
overlay tip									75
problem_reminder						75
login_box										75
device_image								70
device_hamburger_icon				60
device_image_container			60
devices_outer								60
header_container						50
footer_container						20
page container							10

*/



/*		PAGE LEVEL		*/

:root {
  --max_width: 430px;
}

body {
  font-family: "Heebo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  overflow: hidden;
  height: 100%;
  margin: 0;
  overscroll-behavior: none;
  -webkit-overflow-scrolling: touch;
  touch-action: manipulation;
}

h4 {
  margin-bottom: 0;
}


@keyframes blinker {
  50% {
    opacity: 0;
  }
}

#page_container {
  position: static;
  width: 100%;
  max-width: var(--max_width);
  margin: 0 auto;
  overflow-x: hidden;
  height: 100vh;
}




#header_container {
  position: fixed;
  top: 0;
  width: 100%;
  height: 55px;
  background-color: #4AB4FE;
  z-index: 50;
  overflow: hidden;
  max-width: var(--max_width);
  display: flex;
  /* Add flexbox to control icon positions */
  justify-content: space-between;
  /* Space items evenly */
  align-items: center;
  /* Vertically align items */
}

#app_icon {
  position: absolute;
  display: none;
  left: calc(50% - 19px);
  background-image: url("images/logo-icon-100px.png");
  background-size: contain;
  width: 38px;
  height: 38px;
}

#upgrade_icon {
  position: fixed;
  display: none;
  top: 0px;
  right: 0px;
  height: 120px;
  width: 120px;
  background-image: url("images/upgrade_icon_heb.png");
  background-size: contain;
  z-index: 85;
}


#overlay_tip {
  position: fixed;
  /* display: none; // code is ver 282 changed 2025-08-11 */
  display: block;
  /* new code to fix overlay_tip_transition */
  top: 0px;
  left: 0px;
  width: 100%;
  /*height : to be caluculated by js */
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.9;
  z-index: 85;
  transition: transform 1s ease, opacity 1s ease;
  transform: translateY(-50%);
  will-change: transform, opacity;
  pointer-events: none;
}

#overlay_tip.overlay-visible {
  display: block;
  transform: translateY(0);
  opacity: 0.9;
  pointer-events: auto;
}


/* overlay tip */

#overlay_tip_button_outer {
  display: none;
  position: absolute;
  bottom: 15px;
  left: 15px;
  z-index: 75;
}

#overlay_tip_button {
  height: 73px;
  width: 73px;
  background-image: url("/client/images/overlay_button.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.2);
  /* border-radius: 50%; */
  cursor: pointer;
}


#notifications_icon {
  position: absolute;
  display: none;
  right: 10px;
  background-image: url("images/notifications_white.png");
  background-size: contain;
  width: 24px;
  height: 24px;
  cursor: pointer;
}

#refresh_icon {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 30px;
  height: 30px;
  background-image: url("/client/images/refresh-icon-100px.png");
  background-size: 24px 24px;
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  outline: none;
}

#refresh_icon:hover {
  transform: rotate(180deg);
  background: rgba(0, 0, 0, 0.05);
  border-radius: 50%;
}

#refresh_icon:focus {
  outline: none;
}

#refresh_icon:active {
  background: rgba(0, 0, 0, 0.1);
  border-radius: 50%;
}


#main_menu_hamburger_icon {
  position: absolute;
  display: none;
  left: 10px;
  font-size: 24px;
  filter: invert(1);
}


#footer_container {
  position: relative;
  bottom: -58px;
  height: 100%;
  width: 100%;
  z-index: 20;
  overflow: hidden;
}

#footer_image {
  width: 300px;
  height: 300px;
  background-image: url("images/backgrounds/background_logo.png");
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.1;
  position: fixed;
  right: 0;
  bottom: 0;
}

#hard_screen_dim_div,
#screen_dim_div {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  background: black;
  opacity: 0.5;
  z-index: 80;
  max-width: var(--max_width);
  /* outline: 10px solid rgb(255, 0, 128);
	outline-offset: -12px; */
}

#hard_screen_dim_div {
  max-width: 100%;
}

#second_screen_dim_div {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  background: gray;
  opacity: 0.2;
  z-index: 91;
  max-width: var(--max_width);
  /* outline: 10px solid rgb(0, 255, 26); */
  outline-offset: -12px;
}

#thired_screen_dim_div {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  background: gray;
  opacity: 0.2;
  z-index: 96;
  max-width: var(--max_width);
  outline: 10px solid rgb(0, 4, 255);
  outline-offset: -12px;
}

/*		DEVICES 			*/


#devices_outer {
  /*-webkit-overflow-scrolling: auto;*/
  position: fixed;
  top: 58px;
  width: 100%;
  height: 100%;
  z-index: 40;
  overflow-x: hidden;
  overflow-y: scroll;
  max-width: var(--max_width);
  background-color: #F3F4F3;
}

#devices_container {
  top: 0;
  position: relative;
  width: 100%;
  /* padding-bottom: 350px; */
  overflow: hidden;
  max-width: var(--max_width);
  background-color: F3F4F3
}

.device_frame {
  margin: 0px;
  transform: translateX(var(--d, 0px));
  height: 90px;
  max-height: 90px;
  font-size: 1em;
  margin-bottom: 8px;
  margin-left: 8px;
  margin-right: 8px;
  border-radius: 12px;
  background-color: white;
}

/*the following provide visual feedback when the user touches the device frame*/

/* touch feedback for device frames*/
.device_frame {
  position: relative;
  overflow: hidden;
}
.device_frame:active {
  background-color: #F3F4F3;
  border-bottom: 1px solid gray;
}
/* touch feedback for device image*/
.device_frame:active #device_image {
  filter: brightness(0.95);
}


.extended_device_frame {
  height: 110px !important;
  max-height: 110px !important;
}


#open_when_there_div {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 20px;
  color: white;
  background-color: #4ab4fe;
  border-radius: 0 0 12px 12px;
  text-align: center;
}


#open_when_app_starts_div {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 20px;
  color: white;
  background-color: #7cbd5d;
  border-radius: 0 0 12px 12px;
  text-align: center;
}


#large_display_area_div {
  position: absolute;
  bottom: 20px;
  left: 0;
  width: 100%;
  height: 40px;
  color: white;
  /* background-color: #4ab4fe; */
  /* border-radius: 0 0 12px 12px; */
  text-align: center;
}



#device_image_container {
  position: absolute;
  top: 21px;
  left: 17px;
  width: 49px;
  height: 49px;
  z-index: 60;
}


#device_image {
  position: absolute;
  width: 50px;
  height: 50px;
  z-index: 70;
}

.device_name_container {
  position: absolute;
  width: 100%;
  margin: 0;
  top: 50%;
  transform: translateY(-50%);
  text-align: center;
  font-size: 1.3em;
}


/* .special_purpose_switch {

} */

.panic_button_template {
  background: red;
  box-shadow: none;
}

#panic_button_name {
  color: white;
  font-size: 22px;
}


#panic_more_info_container {
  position: absolute;
  text-align: center;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
}


#more_info_textarea {
  color: black;
  width: 80%;
  height: 150px;
  font-size: 1.5em;
  FONT-FAMILY: system-ui;
}


#more_info_send_button {
  background: white;
  color: red;
  line-height: 50px;
  font-size: 1.5em;
  margin-top: 0;
  margin: 30px;
}


#panic_button_owner {
  position: absolute;
  right: 10px;
  bottom: 5px;
  font-size: 0.75em;
  color: white;
}

#set_location_note {
  color: white;
  font-size: 1.3em;
  padding: 20px;
}

#panic_button_note {
  color: white;
  margin: 10px;
  font-size: 1.5em;
}

.paddind_20px {
  padding: 20px;
}


#panic_button_opened_inner {
  padding: 20px;
  text-align: center;
}

.panic_button_opened {
  max-height: none;
  height: 420px;
  outline: 5px solid white;
  outline-offset: -10px;
  transition: all 1s ease;
}

#panic_set_location_outer {
  width: 100%;
  height: 100%;
  text-align: center;
  position: absolute;
  transition: all 2s ease;
}


#panic_set_location_button_container {
  width: 100%;
  text-align: center;
  position: absolute;
  bottom: 40px;
}

#panic_buttons_container {
  width: 100%;
  bottom: 20px;
  position: absolute;
  cursor: pointer;
  transition: all 1s ease;
  left: 50%;
  transform: translateX(-50%);
}


#panic_button_reload {
  display: inline-block;
  width: 150px;
  height: 50px;
  background: white;
  color: red;
  line-height: 50px;
  font-size: 1.5em;
  transition: all 2s ease;
}

#panic_button_send {
  display: inline-block;
  width: 150px;
  height: 50px;
  background: white;
  outline: 3px solid white;
  outline-offset: -5px;
  color: red;
  margin-right: 7px;
  margin-left: 7px;
  line-height: 50px;
  font-size: 1.5em;
  font-weight: bold;
  z-index: 100;
}

#panic_button_cancel {
  display: inline-block;
  width: 150px;
  height: 50px;
  background: red;
  outline: 3px solid white;
  outline-offset: -3px;
  color: white;
  margin-right: 7px;
  margin-left: 7px;
  line-height: 50px;
  font-size: 1.5em;
  z-index: 100;
}


#panic_call_services_outer {
  position: relative;
  bottom: 20px;
  width: 100%;
  text-align: center;
  height: 100%;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
}


#out_of_range_note {
  position: relative;
  top: 10px;
  color: white;
  font-size: 1.5em;
  margin: 20px;
}

.call_buttton {
  width: 200px;
  height: 50px;
  background: white;
  color: red;
  margin: 10px;
  line-height: 50px;
  font-size: 1.5em;
}

.smaller_device_name_font {
  font-size: 0.8em !important;
}

.device_qr_code_container {
  position: absolute;
  display: none;
  top: 5px;
  left: 5px;
  z-index: 60;
}

.device_qr_code_image {
  width: 19px;
  height: 18px;
}

.location_services_container {
  position: absolute;
  display: none;
  right: 0px;
  top: 50%;
  transform: translateY(-50%);
  width: 100px;
  margin: 0;
  z-index: 60;
  text-align: center;
  display: none;
  /* when needed will be changed by code to flex */
  align-items: center;
  flex-direction: column;
}


.location_services_icon_image {
  width: 20px;
  height: 22px;
  background-image: url("/client/images/location_services_icon_image.png");
  background-size: contain;
  margin-bottom: 5px;
}

.distance {
  font-size: 0.8em;
  color: #11517E;
  /* dark blue */
}

#device_name {
  line-height: 22px;
  font-size: 1em;
  margin-bottom: 5px;
  font-weight: 400 !important;
  color: black;
}

#device_description {
  font-size: 1em;
  color: gray;
}

/*
#device_trailing_color {
display:none;
	position: absolute;
	top: 9px;
	left: 10px;
	width: 0;
	height: 72px;
	z-index: 40;
}
*/

#device_hamburger_icon {
  position: absolute;
  display: none;
  top: 35px;
  right: 20px;
  width: 20px;
  height: 20px;
  z-index: 40;
  background-image: url("images/menu_icon_gray.png");
  background-size: contain;
}


#gago_state_led {
  position: absolute;
  top: 8px;
  left: 8px;
  height: 12px;
  width: 12px;
  background-size: contain;
  display: none;
}


#open_door_graphics {
  position: absolute;
  top: 8px;
  left: 63px;
  height: 24px;
  width: 24px;
  display: none;
}

#ble_logo {
  position: absolute;
  bottom: 8px;
  left: 7px;
  height: 17px;
  width: 17px;
  background-image: url("images/ble_logo_blue.png");
  background-repeat: no-repeat;
  background-size: contain;
  z-index: 71;
}

.extended_ble_logo {
  bottom: 23px !important;
}

#approval_icon {
  position: absolute;
  bottom: 8px;
  left: 73px;
  font-size: 20px;
  z-index: 71;
  color: red;
}

.red_led {
  background-image: url("images/gago_state_led_red.png");
}

.green_led {
  background-image: url("images/gago_state_led_green.png");
}

.yellow_led {
  background-image: url("images/gago_state_led_yellow.png");
}

.blue_led {
  background-image: url("images/gago_state_led_blue.png");
}

/*		DEVICE OPTIONS BOX  */

#device_overview_container {
  position: absolute;
  top: 0;
  width: 100%;
  /* height: calc(100% - 58px); */
  height: 100%;
  max-height: 100%;
  /* bottom: -1950px; */
  background: white;
  /* transition: bottom 0.5s; */
  z-index: 85;
  max-width: var(--max_width);
  margin-left: auto;
  margin-right: auto;
  /* padding-top: 58px; */
  /* background: red;
	outline: 10px solid green; */
  /* outline-offset: -12px; */
}


#device_overview_back_arrow {
  position: absolute;
  margin-top: 15px;
  margin-left: 20px;
  font-size: 2em;
  /* display: inline-block; */
}


#device_overview_name {
  font-size: 1.3em;
  color: #0E9CFA;
  /*blue */
}

#device_overview_description {
  font-size: 1em;
  color: gray;
}


#device_settings_name {
  font-size: 1.3em;
  color: #0E9CFA;
  /*blue */
}

#device_settings_description {
  font-size: 1em;
  color: gray;
}

.device_overview_icon {
  position: absolute;
  display: none;
  top: 30px;
  left: 110px;
  width: 40px;
  height: 50px;
  background-color: white;
  background-size: contain;
}

#entry_icon {
  background-image: url("images/entry_icon.png");
  display: block !important;
}

#add_share_icon {
  width: 50px;
  height: 50px;
  position: absolute;
  right: 30px;
  bottom: 80px;
  /* background-image: url("images/grant_access_icon_improved.svg");  */
  background-image: url("images/grant_access_icon.png");
  background-size: contain;
}


#open_using_ble_icon {
  width: 37px;
  height: 50px;
  position: absolute;
  left: 40px;
  bottom: 80px;
  background-image: url("images/ble_logo_blue.png");
  background-size: contain;
}


#device_overview_trashcan {
  background-image: url("images/trashcan.png");
  background-size: contain;
}


#device_overview_text_outer {
  width: 100%;
  text-align: center;
  margin-top: 75px;
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
}

#device_settings_text_outer {
  width: 100%;
  text-align: center;
  margin-top: 75px;
  /* margin-bottom: 10px; */
  display: flex;
  flex-direction: column;
}

#device_overview_shares_outer {
  /* position: absolute; */
  /* top: 120px; */
  /* width: 100%; 283 removed to add a frame and imrove the bottom buttons visibility*/
  height: calc(100% - 310px); /*283 changed from 270px*/
  max-height: calc(100% - 310px); /*283 changed from 270px*/
  text-align: left;
  overflow-x: hidden;
  overflow-y: scroll;
  background: white;
  /* below added 283 */
  border: 2px solid lightgray;
  border-radius: 25px;
  margin: 10px;

}

#device_settings_menu_outer {
  position: absolute;
  display: none;
  top: 0px;
  left: 0%;
  width: 100%;
  height: 100%;
  max-width: var(--max_width);
  background: white;
  z-index: 92;
}

#device_settings_menu {
  /* padding-top: 115px; */

  width: 100%;
  position: absolute;
  /* top: 121px; */
  background: white;
  height: calc(100% - 200px);

}

#device_settings_notes {
  margin: 10px;
  font-size: 1.2em;
  line-height: 1.2em;
  background-color: orange;
  color: white;
  padding: 10px;
  border-radius: 10px;
}


.device_settings_item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* color: rgb(45, 45, 45); */
  margin-top: 12px;
  margin-bottom: 12px;
  font-size: 1em;
  /* background-color: #e4e2dd; */
  border: 1px solid lightgray;
  color: white;
  padding: 10px;
  border-radius: 10px;
}

.device_settings_item>div {
  display: flex;
  align-items: center;
}

#device_settings_items {
  /* border: 1px solid red; */
  height: 100%;
  overflow-x: scroll;
  padding: 15px;
  font-size: 1.3em !important;
}


/* share_details_BOX */

#share_details_box {
  position: absolute;
  width: 100%;
  top: 0;
  height: 100%;
  background: white;
  /* transition: bottom 0.5s; */
  max-width: var(--max_width);
  z-index: 86;
}

.standard_font {
  font-size: 1.2em !important;
  color: darkgray !important;
}


#user_details_text_outer {
  font-size: 1.2em !important;
  width: 100%;
  text-align: center;
  margin-top: 5px;
  margin-bottom: 5px;
  /* border: 1px solid red; */
}

.share_details_user_details {
  margin: 5px;
}

#delete_entry_toggle_switch_outer,
#approval_required_toggle_switch_outer,
#proximity_toggle_switch_outer {
  /* width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 30px;
  margin-bottom: 30px; */


}

/* .options_text_outer_in_share_details_box {
	top:140px!important;
} */

#from_date_div {
  width: 100%;
  text-align: center;
  margin-top: 30px;
  margin-bottom: 10px;
}

#from_date_title {
  margin: 10px;
}

#from_date_input {
  border: 0;
  border-bottom: 1px solid lightgray;
}

#to_date_div {
  width: 100%;
  text-align: center;
  margin-top: 0px;
  margin-bottom: 10px;
}

#to_date_title {
  margin: 10px;
}

#to_date_input {
  border: 0;
  border-bottom: 1px solid lightgray;
}


/*	SHARES TABLE */

.shares_container {
  display: table;
  direction: LTR;
  width: 100%;
  /* max-height:100px; */
}

.share_row {
  font-size: 1.1em;
  background-color: white;
  /* border: 1px solid #e9ecef; */
  color: white;
  padding: 10px;
  border-radius: 10px;
  /* margin: 10px; 283*/ 
  /* max-height: 100px; */
  border-bottom: 1px solid lightgray;
}

.share_cell {
  display: table-cell;
  font-size: 1em;
  height: 45px;
  color: gray;
  width: 50%;
  padding-left: 15px;
  vertical-align: middle;
}

#share_kebab_menu {
  display: table-cell;
  vertical-align: middle;
  padding-right: 10px;
  padding-left: 10px;
  color: darkgray;
}


/*		ALERT BOX					*/

#alert_container {
  position: fixed;
  text-align: center;
  bottom: -250px;
  width: 100%;
  height: 190px;
  background: white;
  z-index: 93;
  font-size: 1.2em;
  transition: bottom 0.5s;
  max-width: var(--max_width);
  border-radius: 20px 20px 0 0;
  border: 1px solid gray;
}

#alert_content_text_outer {
  position: absolute;
  top: 20px;
  left: 119px;
  width: 60%;
}

#alert_icon {
  position: absolute;
  top: 35px;
  left: 38px;
  width: 50px;
  height: 50px;
}

#alert_title {
  font-size: 20px;
  color: gray;
}

#alert_text {
  font-size: 20px;
  color: #0E9CFA;
  /*blue */
}


/*   buttons common   */

.buttons_outer {
  position: absolute;
  height: 38px;
  width: 100%;
  bottom: 24px;
  background: white;
}

.button {
  position: absolute;
  display: inline-block;
  height: 100%;
  width: 50%;
  text-align: center;
  line-height: 25px;
  font-size: 25px;
  padding-top: 14px;
  cursor: pointer;
}

.buttons_triangle {
  position: absolute;
  right: 50%;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 50px 0 0px 34px;
  border-color: #4AB4FE transparent transparent transparent;
  z-index: 92;
}

.wizard_buttons_triangle {
  position: absolute;
  right: 50%;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 50px 0 0px 34px;
  border-color: #4AB4FE transparent transparent transparent;
  z-index: 92;
}

/* #wizard_confirm_button {
	position: absolute;
	top: 16px;
	right: 10px;
	width: 50px;
	height: 30px;
	color: #ffffff;
	font-size: 1.5em;
	font-weight: bold;
	z-index: 51;
	padding: 0;
} */


#wizard_cancel_button {
  left: 0;
  background: lightgray;
  color: black;
  z-index: 91;
}

#confirm_button {
  left: 50%;
  background: #4AB4FE;
  /* gg blue */
  /* #83CE48; green */
  color: white;
}

#cancel_button {
  left: 0;
  background: lightgray;
  color: black;
  z-index: 91;
}

#delete_button {
  left: 0;
  width: 100%;
  background: red;
  color: white;
  z-index: 91;
}

#close_button {
  left: 0;
  width: 100%;
  background: #83CE48;
  color: white;
  z-index: 91;
}



/*	LOGIN BOX		*/

#login_box {
  position: fixed;
  direction: ltr;
  left: 50%;
  top: 50%;
  width: 80%;
  max-width: calc(var(--max_width) - 50px);
  height: 300px;
  margin: 0;
  transform: translate(-50%, -50%);
  text-align: center;
  border: 1px solid gray;
  background: white;
  padding: 20px;
  z-index: 75;
}

#contact_info_outer {
  margin: 10px;
}

#contact_input_title {
  margin: 10px;
  font-size: 1.2em;
  color: gray;
}

#contact_input_div {
  position: absolute;
  width: max-content;
  border: 1px solid red;
  display: contents;
}

#contact_input {
  font-size: 1.5em;
  width: 90%;
  border: 1px solid gray;
  line-height: 1.6em;
  margin-top: 20px;
}

#pin_code_outer {
  margin: 10px;
}

#pin_code_title {
  font-size: 1.2em;
  margin: 10px;
  color: gray;
}

/* #pin_code_div {
} */

#pin_code_input {
  position: absolute;
  font-size: 1.5em;
  width: 100px;
  border: 1px solid gray;
  margin: 0;
  top: 180px;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

#login_submit_button {
  position: absolute;
  height: 38px;
  width: 100%;
  bottom: 0;
  left: 0;
  background: #83CE48;
  color: white;
  z-index: 10;
  cursor: pointer;
}

#phone_number_format_note {
  position: absolute;
  font-size: 1em;
  width: 100%;
  top: -100px;
  left: 0;
  z-index: 10;
}

#we_are_on_whatsapp {
  position: absolute;
  width: 100%;
  bottom: -100px;
  left: 0;
  color: blue;
  text-decoration: underline;
  z-index: 10;
  cursor: pointer;
}


/* sign up form */

#sign_up_box {
  position: fixed;
  direction: ltr;
  left: 50%;
  top: 50%;
  width: 80%;
  max-width: calc(var(--max_width) - 50px);
  height: 350px;
  margin: 0;
  transform: translate(-50%, -50%);
  text-align: center;
  border: 1px solid gray;
  background: white;
  padding: 20px;
  z-index: 80;
}

#sign_up_text_outer {
  margin: 20px;
}

#sign_in_banner {
  font-size: 1.5em;
}

#sign_up_banner {
  font-size: 1.5em;
}

#sign_up_explain {
  font-size: 1em;
}

.sign_up_input {
  font-size: 1.3em;
  width: 100%;
  border: 1px solid gray;
  line-height: 1.6em;
  margin-top: 20px;
  text-align: center;
}

#sign_up_name_input {
  top: 120px;
}

#sign_up_phone_number_input {
  top: 190px;
}

#sign_up_email_input_address {
  top: 260px;
}

.sign_up_buttons_outer {
  left: 0;
  bottom: 0;
}


/*	ADD NEW SHARE		*/

#share_container {
  position: fixed;
  display: none;
  left: 0;
  /* top: 58px; */
  top: 0px;
  width: 100%;
  max-width: var(--max_width);
  height: calc(100% - 58px);
  transition: all 1s;
  background: white;
  z-index: 86;
}

/* #share_container_back_arrow {
	position: absolute;
	top: 15px;
	left: 20px;
	font-size: 2em;
} */


#share_confirm_button {
  position: absolute;
  top: 16px;
  right: 10px;
  width: 50px;
  height: 30px;
  color: #ffffff;
  font-size: 1.5em;
  font-weight: bold;
  z-index: 51;
  padding: 0;
}



#share_details_confirm_button {
  position: absolute;
  top: 16px;
  right: 10px;
  width: 50px;
  height: 30px;
  color: #ffffff;
  font-size: 1.5em;
  font-weight: bold;
  z-index: 51;
  padding: 0;
}

#share_header_outer {
  position: relative;
  text-align: center;
  top: 75px;
}

#contacts_button_outer {
  display: none;
  position: relative;
  margin: 20px;
  /* display: flex; */
  justify-content: center;
}

#contacts_button {
  width: 60px;
  height: 60px;
  text-align: center;
  background-color: white;
  background-image: url("images/contacts_button.png");
  background-size: contain;
  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.2);
  border-radius: 50%;
  cursor: pointer;
}

#share_title {
  font-size: 1em;
  color: gray;
}

#data_entry_outer {
  position: absolute;
  /* margin:20px; */
  top: 175px;
  text-align: center;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
}

.share_input_field_div {
  margin: 20px;
}

#share_name_input {
  font-size: 1.3em;
  width: 200px;
  border: 0;
  border-bottom: 1px solid lightgray;
  border-radius: 4px;
  transition: all 1s ease;
}

#share_phone_number_input {
  font-size: 1.3em;
  width: 200px;
  border: 0;
  border-bottom: 1px solid lightgray;
  border-radius: 4px;
  text-align: left;
  transition: all 1s ease;
}

.share_input_fields_clean_img {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-color: white;
  background-image: url("images/cancel_icon.png");
  background-size: contain;
  margin-left: 10px;
  margin-right: 10px;
}

#search_results_container {
  position: absolute;
  top: 220px;
  overflow-y: scroll;
  text-align: left;
  width: 100%;
  height: 100%;
  margin-bottom: 20px;
}

/* Improved search result styling */
.modern_search_result {
  border: 1px solid #abcdee;
  background: #fafafa;
  transition: all 0.2s ease;
  cursor: pointer;
}

.modern_search_result:hover {
  background: white;
  border-color: #4AB4FE;
  box-shadow: 0 2px 8px rgba(74, 180, 254, 0.1);
}

.modern_name {
  font-size: 1.2em !important;
  font-weight: 500;
  color: #2c3e50 !important;
}

.modern_phone {
  font-size: 1.1em !important;
  color: #6c757d !important;
}

/* Simple font improvements for device shares */
.better_share_name {
  font-size: 1.2em !important;
  font-weight: 500;
  color: #2c3e50 !important;
}

.better_share_phone {
  font-size: 1.1em !important;
  color: #6c757d !important;
}

.search_result_template {
  width: 100%;
  display: table;
}


.padding15px {
  padding-left: 15px !important;
  padding-right: 15px !important;
}


#share_device_name {
  font-size: 1.3em;
  color: #4AB4FE;
  /* gg blue */
  ;
}


/*		OTHER 			*/


.invisible {
  visibility: none;
}

.hidden {
  display: none;
}

.invisible {
  visibility: hidden;
}

#settings_button {
  position: absolute;
  top: 14px;
  right: 70px;
  width: 30px;
  height: 30px;
  xbackground-color: white;
  background-image: url("images/settings_icon_white.png");
  background-size: contain;
  cursor: pointer;
  z-index: 51;
}

#edit_button {
  position: absolute;
  top: 14px;
  right: 20px;
  width: 30px;
  height: 30px;
  xbackground-color: white;
  background-image: url("images/edit_icon_white.png");
  background-size: contain;
  cursor: pointer;
  z-index: 51;
}


/*    PWA   Android/Windows   */

#installContainer {
  position: relative;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 55px;
  z-index: 95;
  cursor: pointer;
}

#installContainer button {
  background-color: #83CE48;
  border: 0;
  color: white;
  font-size: 20px;
  text-align: center;
  padding: 10px;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

#install_icon {
  position: absolute;
  top: 8px;
  left: 16px;
  width: 40px;
  height: 40px;
  background-image: url("images/install_icon.png");
  background-size: contain;
  cursor: pointer;
}


/*    PWA   safari   */


#safari_install_instructions_screen_hide {
  position: fixed;
  background-color: white;
  top: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  z-index: 84;
  max-width: var(--max_width);
}

#safari_install_instructions_screen_hide_text {
  color: #83CE48;
  ;
  font-size: 24px;
  padding: 20px;
}

#safari_install_instructions {
  position: fixed;
  background-color: #83CE48;
  bottom: 0;
  width: 100%;
  height: 120px;
  text-align: center;
  z-index: 85;
  max-width: var(--max_width);
}

#safari_install_instructions_txt {
  color: white;
  font-size: 16px;
  padding-top: 17px;
  padding-left: 30px;
}

#safari_install_icon {
  position: absolute;
  top: 8px;
  left: 10px;
  width: 35px;
  height: 35px;
  background-image: url("images/safari_install_icon.png");
  background-size: contain;
}

#install_triangle_bg {
  position: absolute;
  top: 55px;
  background: white;
  width: 100%;
  height: 65px;
}

#install_triangle {
  position: absolute;
  top: 0;
  background-image: url("images/install_triangle.png");
  background-size: contain;
  width: 50px;
  height: 50px;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
}


/*		OTHER		*/

#dev_msg {
  position: absolute;
  top: 50px;
  left: 10px;
  background: lightyellow;
  z-index: 100;
  font-size: 1em;
}



.noselect {
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Safari */
  -khtml-user-select: none;
  /* Konqueror HTML */
  -moz-user-select: none;
  /* Old versions of Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  user-select: none;
  /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}





/*   misc   */

.left {
  direction: ltr;
}

.right {
  direction: rtl;
}

.full_width {
  width: 100%;
}

.allign_right {
  text-align: right;
}

.allign_left {
  text-align: left;
}

/* device edit 

#device_overview_edit_outer {
	position: absolute;
	xborder-top: 1px solid gray;
	top: 90px;
	width: 100%;
	overflow: hidden;
	background: white;
  text-align: center;
}

#device_overview_name_edit {
	margin:20px;
}

#device_name_input,
#device_name_description {
	margin-top: 25px;
	font-size: 1.5em;
	width: 200px;
	border: 1px solid gray;
	border-radius: 4px;
}


#large_button_caption {
	display: inline-block;
	font-size: 0.8em;
	color: gray;
	margin-top: 75px;
}


#delete_device_caption {
	display: inline-block;
	font-size: 0.8em;
	color: gray;
	margin-top: 20px;
}
*/




/*  FULL_SCREEN_CONTAINER */



#full_screen_container {
  position: fixed;
  overflow: hidden;
  top: 58px;
  height: calc(100% - 58px);
  width: 100%;
  max-width: calc(var(--max_width));
  background: white;
  z-index: 90;
}

#full_screen_content {
  font-size: 0.8em;
}


#full_screen_content_outer {
  position: absolute;
  top: 0;
  left: 0;
  width: 87%;
  height: calc(100% - 110px);
  overflow-X: hidden;
  overflow-Y: scroll;
  padding: 20px;
}

/* .full_screen_buttons_outer {
	bottom: 0;
	height: 100px;
	background: white;
}
 */




/*	opening msg */

#opening_msg {
  position: fixed;
  bottom: -100px;
  width: 100%;
  height: 70px;
  background: #83CE48;
  z-index: 88;
  transition: all 1s;
  text-align: center;
  max-width: var(--max_width);
}

#opening_msg_text {
  color: white;
  font-size: 1.5em;
  margin-top: 20px;
}


#qr_outer {
  position: relative;
  display: none;
  height: 400px;
  border: 4px solid lightblue;
  margin: 25px;
  text-align: center;
}

#qr {
  height: 300px;
  background-size: 250px 250px;
  background-image: url("images/default_qr.png");
  background-repeat: no-repeat;
  background-position: center;
}

#qr_hello {
  font-size: 2em;
}





/* large button*/

#large_buttons_container {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(48%, 1fr));
  gap: 10px;
  min-height: 50px;
  padding: 3px;
}

.large_button_frame {
  position: relative;
  height: calc((var(--max_width) / 2.2));
  text-align: center;
  box-sizing: border-box;
  margin-bottom: 4px;
  margin-left: 4px;
  margin-right: 4px;
  border-radius: 12px;
  box-shadow: inset 0 0 0 3px #4AB4FE;
  justify-content: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  background-color: white;
}

.large_button_frame:last-child:nth-child(odd) {
  grid-column-end: span 2;
  height: calc((var(--max_width) / 3));
}

#large_button_image_container {
  width: 65px;
  height: 65px;
  display: flex;
  justify-content: center;
  align-items: center;
}

#large_button_image {
  width: 65px;
  height: 65px;
}

.large_button_name_container {
  margin-top: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}

#large_button_name {
  font-size: 1.5em;
  color: gray;
}


#scan_button_outer {
  display: none;
  position: absolute;
  bottom: 15px;
  right: 15px;
  z-index: 75;
}


#scan_button {
  height: 70px;
  width: 70px;
  background-image: url("/client/images/scan_button.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.2);
  border-radius: 50%;
  cursor: pointer;
}


#camera_feed_outer {
  position: absolute;
  display: none;
  top: 58px;
  left: 0;
  width: 100%;
  z-index: 86;
}



#camera_feed_outer_for_iphone {
  position: absolute;
  display: none;
  top: 58px;
  left: 0;
  width: 100%;
  z-index: 86;
}

/* for iphone only */
video,
canvas {
  position: absolute;
  width: 100%;
  /* Makes video and canvas stretch to container width */
  height: auto;
  /* Maintains aspect ratio */
}

#scan_animation {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 87;
}

#scan_animation::before {
  content: "";
  position: absolute;
  top: 25%;
  left: 0;
  width: 100%;
  /* Width of the "scanner" line */
  height: 1px;
  /* Height of the container */
  background-color: #00aaff;
  /* Color of the "scanner" line */
  animation: scanner 2s linear infinite;
}

@keyframes scanner {
  0% {
    transform: translate(0, 1px);
  }

  50% {
    transform: translate(0, 200px);
  }

  100% {
    transform: translate(0, 1px);
  }
}

#camera_feed {
  position: relative;
  outline: 11px solid gray;
  width: 100%;
  height: 100%;
}

.date_in_activity_log {
  margin-top: 20px;
  margin-bottom: 10px;
  font-weight: bold;
  font-size: 1.5em;
}


.admin_buttons_div {
  display: none;
  position: fixed;
  text-align: center;
  z-index: 89;
  left: 0px;
  bottom: 0px;
}



.admin_button {
  border: 1;
  background: white;
  cursor: pointer;
}



/********   NEW ENTRY ***********/


#wizard_container {
  position: absolute;
  display: block;
  top: 0;
  width: 100%;
  max-width: var(--max_width);
  height: 100%;
  margin: 0 auto;
  overflow-x: hidden;
  background: white;
  z-index: 85;
}

#entry_wizard_content_outer {
  position: absolute;
  top: 110px;
  xheight: calc(100% - 58px);
  width: 100%;
  overflow-X: hidden;
  overflow-Y: scroll;
}

.transition_all_slow {
  transition: all 0.5s;
}

.wizard_step_box {
  position: relative;
  display: none;
  border: 0px solid red;
  text-align: center;
  padding: 20px;
}


#wizard_buttons_outer {
  position: absolute;
  top: 75px;
  width: 100%;
  height: 25px;
}

.wizard_button {
  position: absolute;
  display: inline-block;
  height: 100%;
  text-align: center;
  line-height: 25px;
  font-size: 25px;
  padding: 8px;
  cursor: pointer;
  background-color: #4AB4FE;
  width: 80px;
  color: white;
  cursor: pointer;
}

#wizard_next_button {
  right: 5%;
  border-top-right-radius: 30px;
  border-bottom-right-radius: 30px;
}

#wizard_back_button {
  left: 5%;
  border-top-left-radius: 30px;
  border-bottom-left-radius: 30px;
}

.disabled_button {
  opacity: 0.5;
  /* Dim the div */
  pointer-events: none;
  /* Make it unclickable */
}

.opacity_half_triangle_border {
  border-color: #a6d9fc transparent transparent transparent;
}

.new_entry_titles {
  font-size: 2em;
  text-align: center;
  color: gray;
  margin-top: 10px;
  margin-bottom: 20px;
}

#entry_value_div {
  text-align: center;
}

/*type of entry selector*/

#type_of_entry_selector_div {}

#select_type_of_entry {
  font-size: 2em;
  color: gray;
}

.type_of_entry_selector_image {
  display: inline-block;
  width: 50px;
  height: 50px;
  xmargin: 10px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  border-radius: 20px;
  border: 8px solid white;
  ;
}

.type_of_entry_selector_image_selected {
  border-radius: 20px;
  border: 8px solid #4AB4FE;
  ;
}

#gago_controller_image {
  background-image: url("/client/images/gago box_flat.png");
}

#dial_controller_image {
  background-image: url("/client/images/dial_opener_flat.png");
}

#entry_value_input {
  display: inline-block;
  vertical-align: middle;
  font-size: 1.2em;
  line-height: 35px;
  color: gray;
  width: 80%;
  border: 0;
  border-bottom: 1px solid lightgray;
}

#gago_id_scan_button {
  display: inline-block;
  vertical-align: middle;
  height: 35px;
  width: 35px;
  background-image: url("/client/images/scan_button.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
}


#test_open_div {
  margin-top: 4px;
  text-align: center;

}

#test_open_button {
  font-size: 19px;
  padding: 8px;
  background-color: #4AB4FE;
  width: 50%;
  color: white;
  border: 0;
  cursor: pointer;
}


#wizard_contacts_search_div {
  margin-top: 4px;
  text-align: center;

}

#wizard_contacts_search_button {
  font-size: 19px;
  padding: 8px;
  background-color: #4AB4FE;
  width: 50%;
  color: white;
  border: 0;
  cursor: pointer;
}

/* #test_open_result_div {
    width: 141px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

#test_open_result_msg {
    margin: 10px 0;
    color: white;
    background-color: green;
    height: 20px;
    font-size: 19px;
}
 */


#selected_controller_title {
  margin-top: 10px;
  margin-bottom: 20px;
  font-size: 1.2em;
  color: gray;
}

#entry_name,
#entry_description {
  margin-top: 50px;
  font-size: 1.2em;
  border: 0;
  border-bottom: 1px solid lightgray;
}



/*icons panel*/

#device_icons_panel_outer {
  position: relative;
  max-width: 90%;
  height: 150px;
  margin-top: 40px;
  margin-bottom: 40px;
  margin-left: auto;
  margin-right: auto;
}

#device_icons_panel {
  width: 100%;
  height: 100%;
  overflow: scroll;
}

.clickable-image {
  width: 30px;
  height: 30px;
  border: 0px solid white;
  padding: 5px;
  filter: invert(0.75);
  /* change white to black*/
}

/*colors panel*/

#device_icons_colors_outer {
  position: relative;
  margin-top: 40px;
  margin-bottom: 40px;
  max-width: 90%;
  margin-left: auto;
  margin-right: auto;
}


#device_icons_colors {
  height: 50px;
  width: 90%;
}

/*sample icon*/

#new_entry_device_image_container {
  position: relative;
  height: 69px;
  width: 69px;
  background: #4AB4FE;
  border: 0px solid gray;
  border-radius: 12px 12px 12px 12px;
  margin-top: 40px;
  margin-bottom: 40px;
  margin-left: auto;
  margin-right: auto;
}

#new_entry_device_image {
  width: 69px;
  height: 69px;
  background-image: url("/client/images/device_icons_inverted/light_barrier.png");
  background-repeat: no-repeat;
  background-position: center;
}


/*map*/
#new_entry_map_outer {
  position: relative;
  width: 100%;
  height: 500px;
}

#new_entry_map {
  height: 400px;
  width: 100%;
}

#address_search_input {
  width: 70%;
  padding: 10px;
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1;
}





/* -----MAIN MENU------ */


#menu_outer {
  position: fixed;
  overflow-y: auto;
  direction: ltr;
  top: 0;
  left: calc(50% - var(--max_width) / 2);
  min-height: 100%;
  width: 100%;
  max-width: var(--max_width);
  background: #f8f9fa;
  z-index: 89;
  padding: 0;
  height: 100%;
  box-shadow: none;
  display: none;
}

#menu_inner {
  overflow-y: auto;
  height: 100%;
  padding: 20px;
}

/* RTL direction for Hebrew language */
html[lang="he"] #menu_inner,
html[dir="rtl"] #menu_inner,
:lang(he) #menu_inner {
  direction: rtl;
}

/*
.gg_icon_on_main_menu {
	position: relative;
  top: 20px!important; 
  right: 20px!important;
	background-image: url("images/logo-icon-blue-100px.png");
}

#app_icon_on_menu {
	position: absolute;
  top: 10px; 
	right: 20px);
	background-image: url("images/logo-icon-100px.png");
	background-size: contain;
	width: 38px;
	height: 38px;
}
*/

#menu_bottom_spacer {
  height: 100px;
}

/* Responsive adjustments for menu */
@media (max-width: 768px) {
  #menu_outer {
    width: 100%;
    left: 0;
  }

  #menu_user_details_outer {
    flex-direction: column;
    text-align: center;
    gap: 12px;
  }

  #menu_user_details_outer::before {
    width: 48px;
    height: 48px;
    background-size: 28px 28px;
  }

  .mi_row {
    padding: 18px;
  }

  .mi_icon {
    width: 58px;
    height: 58px;
  }

  .mi_icon img {
    width: 34px !important;
    height: 34px !important;
  }
}

#menu_user_details_outer {
  padding: 24px;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  position: relative;
  direction: ltr;
}

#menu_close_arrow {
  width: 30px;
  height: 30px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.2s ease;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  outline: none;
}

#menu_close_arrow:hover {
  background: rgba(0, 0, 0, 0.05);
  border-radius: 50%;
}

#menu_close_arrow:focus {
  outline: none;
}

#menu_close_arrow:active {
  background: rgba(0, 0, 0, 0.1);
  border-radius: 50%;
}

#menu_close_arrow svg {
  width: 24px;
  height: 24px;
  fill: #666;
}

#menu_user_info {
  flex: 1;
}

/* refresh_icon moved to header_container */

#main_menu_title {
  color: #1a1a1a;
  font-size: 1.4em;
  font-weight: 600;
  margin: 0;
  line-height: 1.2;
}

#user_name_on_main_menu {
  margin-top: 4px;
  color: #666;
  font-size: 0.9em;
  font-weight: 500;
  text-transform: none;
}

#user_phone_number_on_main_menu {
  margin-top: 2px;
  color: #888;
  font-size: 0.85em;
}

#user_email_on_main_menu {
  margin-top: 2px;
  color: #888;
  font-size: 0.85em;
  text-transform: none;
}

/* menu items container */

#menu_items_container {
  margin-top: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* menu item */

.mi_row {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  gap: 20px;
  transition: all 0.2s ease;
  cursor: pointer;
  margin-bottom: 2px;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  outline: none;
}

.mi_row:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.mi_row:focus {
  outline: none;
}

.mi_row:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.device_menu_icon {
  /* grid-area: 1 / 1 / 2 / 1; */
  width: 30px;
  height: 30px;
  /* background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  padding-top: 5px;
  opacity: 0.5; */
  margin: 10px;
}

.mi_icon {
  width: 67px;
  height: 67px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  opacity: 1;
}

/* Icon styling handled directly via JavaScript */
.mi_icon img {
  filter: brightness(0) saturate(100%) invert(70%) sepia(63%) saturate(2878%) hue-rotate(178deg) brightness(103%) contrast(101%);
}

/* .device_menu_icon {
  margin: 0;
} */

.device_menu_value_img {
  margin-left: 10px;
  margin-right: 10px;
  height: 24px;
}

.mi_content {
  flex: 1;
  min-width: 0;
}

.mi_title {
  font-size: 1.3em;
  font-weight: 600;
  color: #1a1a1a;
  margin: 0;
  line-height: 1.3;
}

.mi_subtitle {
  font-size: 1.0em;
  color: #666;
  margin-top: 4px;
  line-height: 1.4;
}

.toggle_switch {
  width: 67px;
  height: 67px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  opacity: 1;
  padding: 0;
}

.toggle_switch_body {
  position: relative;
  height: 20px;
  width: 40px;
  border: 2px solid #E0E0E0;
  border-radius: 28px;
  background-color: #E0E0E0;
  transition: all 0.3s ease;
  cursor: pointer;
}

.toggle_switch_body:hover {
  border-color: #BDBDBD;
}

.toggle_switch_button {
  position: absolute;
  top: 2px;
  left: 2px;
  height: 15px;
  width: 15px;
  background: white;
  border-radius: 20px;
  transition: all 0.3s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}


/* sub menu */

#submenu_back_arrow_outer {
  padding: 24px;
  margin-bottom: 24px;
  align-items: center;
  justify-content: space-between;
  direction: ltr;
}

#submenu_back_arrow_outer[style*="display: block"] {
  display: flex !important;
}

#submenu_back_arrow {
  width: 30px;
  height: 30px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.2s ease;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  outline: none;
}

#submenu_back_arrow:hover {
  background: rgba(0, 0, 0, 0.05);
  border-radius: 50%;
}

#submenu_back_arrow:focus {
  outline: none;
}

#submenu_back_arrow:active {
  background: rgba(0, 0, 0, 0.1);
  border-radius: 50%;
}

#submenu_back_arrow svg {
  width: 24px;
  height: 24px;
  fill: #666;
}

#submenu_name_title {
  font-size: 1.3em;
  font-weight: 600;
  color: #1a1a1a;
  margin: 0;
}


/*  menu's bottom items */

#version {
  margin-top: 20px;
  color: gray;
  font-size: 0.8em;
}

#links_outer {
  margin-top: 20px;
}

#link {
  color: gray;
  font-size: 0.9em;
  margin-top: 7px;
}


/* misc */

.small_text {
  font-size: 12px;
  color: black;
}



/* text editor */



#text_editor_container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  max-width: 80%;
  background: white;
  border-radius: 16px 16px 0 0;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15), 0 4px 20px rgba(0, 0, 0, 0.1);
  z-index: 94;
  padding: 32px 24px 24px 24px;
  overflow: hidden;
}

#text_editor_inner {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 24px;
}

#text_editor_title {
  margin: 0;
  font-size: 1.4em;
  font-weight: 600;
  color: #2c3e50;
  text-align: center;
  line-height: 1.3;
}

#text_editor_input_div {
  margin: 0;
  width: 100%;
}

#text_editor_input {
  width: 100%;
  height: 48px;
  font-size: 1.1em;
  padding: 12px 16px;
  border: 2px solid #e8e8e8;
  border-radius: 12px;
  background-color: #fafafa;
  transition: all 0.2s ease;
  outline: none;
  box-sizing: border-box;
}

#text_editor_input:focus {
  border-color: #4AB4FE;
  background-color: white;
  box-shadow: 0 0 0 3px rgba(74, 180, 254, 0.1);
}

#text_editor_buttons_div {
  display: flex;
  gap: 12px;
  margin: 0;
  align-items: center;
  justify-content: flex-end;
}

#text_editor_cancel_button,
#text_editor_confirm_button {
  position: static;
  min-width: 100px;
  border: none;
  font-size: 1.1em;
  font-weight: 500;
  padding: 12px 20px;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
  outline: none;
  box-sizing: border-box;
}

#text_editor_cancel_button {
  color: #6c757d;
  background: #f8f9fa;
  border: 2px solid #e9ecef;
}

#text_editor_cancel_button:hover {
  background: #e9ecef;
  border-color: #dee2e6;
  color: #495057;
}

#text_editor_confirm_button {
  color: white;
  background: #4AB4FE;
  border: 2px solid #4AB4FE;
}

#text_editor_confirm_button:hover {
  background: #3a9ce8;
  border-color: #3a9ce8;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(74, 180, 254, 0.3);
}

#text_editor_note {
  padding: 0;
  margin: 0;
  color: #6c757d;
  font-size: 0.95em;
  line-height: 1.5;
  text-align: center;
}

/* Responsive adjustments for text editor */
/* @media (max-width: 480px) {
  #text_editor_container {
    width: 90%;
    padding: 24px 20px 20px 20px;
    margin: 20px;
    border: 1px solid red;
  }
  
  #text_editor_inner {
    gap: 20px;
  }
  
  #text_editor_title {
    font-size: 1.3em;
  }
  
  #text_editor_input {
    height: 44px;
    font-size: 1em;
    padding: 10px 14px;
  }
  
  #text_editor_buttons_div {
    flex-direction: row;
    gap: 10px;
  }
  
  #text_editor_cancel_button,
  #text_editor_confirm_button {
    width: 100%;
    min-width: auto;
  }
} */

/* admin map */

#admin_map_container {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 91;
}

#admin_map_inner {
  position: absolute;
  top: 58px;
  left: 0;
  width: 100%;
  height: calc(100% - 58px);
}

/*
#admin_address_input {
	position: absolute;
	top: 15px;
	left: 15%;
	width: 70%;
	height: 30px;
	z-index: 100;
}
*/

#center_admin_map_button {
  position: absolute;
  top: 120px;
  left: 15px;
  width: 80px;
  height: 30px;
  z-index: 100;
  border: 0;
  color: white;
  background: #4AB4FE;
  /* gg blue */
}

#radius_slider {
  position: absolute;
  bottom: 60px;
  left: 15px;
  width: 200px;
  z-index: 100;
}


#close_admin_map_button {
  position: absolute;
  bottom: 15px;
  left: 15px;
  width: 80px;
  height: 30px;
  z-index: 100;
  border: 0;
  color: white;
  background: gray;
  cursor: pointer;
}

#admin_map_openers_content {
  position: fixed;
  bottom: 150px;
  left: 10px;
  background: white;
  border: 1px solid black;
  padding: 10px;
}


#admin_map_openers_closing_button {
  position: fixed;
  bottom: 130px;
  width: 30px;
  color: black;
  background: white;
  border: 1px solid black;
  left: 10px;
  text-align: center;
}



/* integrations*/

.integration_text {
  font-size: 1.25em;
}


.integration_image {
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 20px;
  margin-bottom: 20px;
  display: block;
}

#integration_button {
  font-size: 1.5em;
  margin-left: auto;
  margin-right: auto;
  margin-top: 40px;
  display: block;
  cursor: pointer;
}




#device_settings_menu_progress_bar_container {
  display: none;
  position: absolute;
  width: 89%;
  left: 0;
  bottom: 15px;
  color: gray;
  padding: 15px;
}

#device_settings_menu_progress_bar_text {
  text-align: center;
  font-size: 1.25em;
}


#device_settings_menu_progress_bar {
  /* position: absolute;
	top: 22px; */
  height: 12px;
  background-color: #4CAF50;
  animation: progress 80s linear;
}

#device_settings_menu_progress_bar_dimmer {
  display: none;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-color: gray;
  opacity: 0.1;
  z-index: 93;
}

@keyframes progress {
  0% {
    width: 100%;
  }

  100% {
    width: 0;
  }
}

.heartbeat-animation {
  box-shadow: inset 0 0 0 1px #4AB4FE;
  animation: heartbeat 1s infinite;
}


.click-open-animation {
  animation: heartbeat 0.75s infinite;
}

@keyframes heartbeat {
  0% {
    box-shadow: inset 0 0 0 1px #4AB4FE, 0 0 0 0 transparent;
  }

  50% {
    box-shadow: inset 0 0 0 1px #4AB4FE, 0 0 10px 5px #4AB4FE;
  }

  100% {
    box-shadow: inset 0 0 0 1px #4AB4FE, 0 0 0 0 transparent;
  }
}




#notifications_container {
  position: fixed;
  top: -400px;
  max-height: 400px;
  overflow-x: hidden;
  overflow-y: scroll;
  width: 100%;
  padding-top: 28px;
  max-width: var(--max_width);
  background: #e8e8e8;
  z-index: 95;
  transition: all 1s ease-in-out;
}

#notifications_header {
  position: absolute;
  right: 5px;
  top: 8px;
  width: 20px;
  height: 20px;
}

#delete_all_push_notifications_button {
  background-image: url("images/cancel_icon.png");
  background-size: contain;
  background-repeat: no-repeat;
  height: 20px;
  cursor: pointer;
}

.notification {
  margin: 8px;
  padding: 8px;
  background: white;
  border-radius: 12px;
}

.notification>#header {
  display: flex;
  align-items: center;
  margin-top: 7px;
  margin-bottom: 9px;
  font-size: 0.8em;
}

.notification>#header>#icon {
  display: inline-block;
  background-size: contain;
  background-repeat: no-repeat;
  height: 20px;
  width: 20px;
}

.notification>#header>#title {
  display: inline-block;
  color: gray;
  padding-right: 5px;
  padding-left: 5px;
}

.notification>#header>#timestamp {
  xleft: 154px;
  xposition: absolute;
  display: inline-block;
  color: gray;
  padding-right: 5px;
  padding-left: 5px;
}

.notification>#header>#duplicated {
  xright: 54px;
  xposition: absolute;
  display: inline-block;
  color: gray;
  padding-right: 5px;
  padding-left: 5px;
}

.notification>#header>#remove {
  right: 22px;
  position: absolute;
  background-image: url("images/cancel_icon.png");
  display: inline-block;
  background-size: contain;
  background-repeat: no-repeat;
  height: 20px;
  width: 20px;
  cursor: pointer;
}

.notification>#body {
  text-align: center;
}

.notification>#body>#text_headline {
  font-weight: bold;
  color: black;
}

.notification>#body>#text {
  color: gray;
}

.notification>#buttons_outer {
  text-align: center;
  margin-top: 15px;
}

.notification_button {
  display: inline-block;
  width: 25%;
  margin: 5px;
  background-color: #4AB4FE;
  color: white;
  padding: 4px;
  border-radius: 4px;
}

/*

.notification > #buttons_outer > #confirm {
}

.notification > #buttons_outer > #cancel {
}

*/



/*** nag screen ***/

#nag_screen_container {
  position: absolute;
  bottom: -400px;
  width: 100%;
  max-width: var(--max_width);
  padding-top: 20px;
  padding-bottom: 20px;
  color: white;
  z-index: 95;
  text-align: center;
  transition: all 1s ease-in-out;
  outline: white 5px solid;
  outline-offset: -10px;
  border-radius: 50px;
}

#nag_screen_container>#title {
  font-size: 2.5em;
  margin: 25px;
}

#nag_screen_container>#text {
  font-size: 1.5em;
  margin: 25px;
}

#nag_screen_container>#buttons_outer {
  text-align: center;
  margin-top: 25px;
  margin-bottom: 25px;
}


.nag_screen_button {
  display: inline-block;
  width: 33%;
  margin: 5px;
  background-color: #FFFF00;
  /* bright yellow */
  color: #006400;
  /* Dark Green */
  padding: 4px;
  border-radius: 4px;
  box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
  font-size: 1.25em;
  cursor: pointer;
}

#nag_screen_container>#buttons_outer>#cancel {
  color: gray;
}

#countdown_outer {
  overflow: hidden;
  margin-right: 40px;
  margin-left: 40px;
}

#countdown_left,
#countdown_right {
  display: inline-block;
  width: 40%;
  height: 5px;
  background: #FFFF00;
  /* bright yellow */
  xbox-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
  /* not working*/
}


/* ACCOUNT */

.sub_caption {
  font-size: 1.5em;
  margin-top: 20px;
  margin-bottom: 10px;
  color: gray;
}

/* .data_table {
	xwidth: 100%;
}

.data_table_row {
	xwidth: 50%;
} */

td {
  padding: 6px;
}

/* .light_frame {
	xborder: 1px solid lightgray;
} */

.bold {
  font-weight: bold;
}

.renew_submit_button {
  position: relative;
  height: 32px;
  width: 150px;
  margin-top: 20px;
  border-radius: 30px;
  background: #4AB4FE;
  color: white;
  text-align: center;
  cursor: pointer;
  font-size: 22px;
  line-height: 32px;
}


.sub_frame {
  text-align: center;
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px #4AB4FE;
  margin-bottom: 30px;
  padding: 10px;
}

.auto_renewal_note {
  text-align: center;
}

.sub_price {
  font-size: 18px;
}

/* .vat_included {
} */

.sub_price_note {
  margin: 12px;
}

.sub_price_title {
  font-size: 30px;
  color: "#bfc1c2";
  /* silver */
  margin: 12px;
}

.btn-order-large {
  font-size: 16px;
  padding: 10px 30px;
  border-radius: 5px;
  color: #fff !important;
  background: #4AB4FE;
  /* gg blue */
  margin: 15px;
  border-radius: 20px;
}


.platform_logo_container {
  padding: 20px;
}

.platform_logo {
  width: 100%;
}

.sub_sub_description {
  margin: 15px;
}

table {
  border-spacing: 0;
}

th {
  text-align: unset;
}


/* loading circle */

#loading_circle {
  position: absolute;
  top: calc(50% - 20px);
  left: calc(50% - 20px);
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  border: 4px solid #3498db;
  /* Circle border color */
  border-top: 4px solid transparent;
  /* Transparent top border to create the animation */
  border-radius: 50%;
  /* Make it a circle */
  animation: spin 1s linear infinite;
  /* Apply the rotation animation */
  z-index: 96;
}

/* Define the rotation animation */
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}


#p {
  position: absolute;
  top: 6px;
  left: 60px;
  z-index: 100;
}


.admin_map_open_button {
  padding-top: 12px;
}


/* groups */

#groups_container {
  position: fixed;
  top: 55px;
  width: 100%;
  height: 55px;
  background-color: darkslategray;
  z-index: 94;
  overflow: hidden;
  max-width: var(--max_width);
}


#selected_group_container {
  position: fixed;
  top: 55px;
  width: 100%;
  height: 55px;
  background-color: darkslategray;
  z-index: 94;
  overflow: hidden;
  max-width: var(--max_width);
}


.group_name {
  color: white;
  font-size: 1.6em;
  line-height: 47px;
  position: relative;
  width: 100%;
  margin: 0;
  top: 27px;
  transform: translateY(-50%);
  text-align: center;
  border-bottom: 1px solid gray;
}




/* Snackbar styling */
#snackbar {
  visibility: hidden;
  position: fixed;
  bottom: 187px;
  width: 100%;
  max-width: var(--max_width);
  background-color: #333;
  color: #fff;
  text-align: center;
  border-radius: 2px;
  padding-top: 16px;
  padding-bottom: 16px;
  font-size: 17px;
  box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.2);
  z-index: 96;
}

/* Show the snackbar. This class is added to snackbar using JavaScript */
#snackbar.show {
  visibility: visible;
  /* Make the snackbar visible */
  -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
  animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

/* Animations to fade the snackbar in and out */
@-webkit-keyframes fadein {
  from {
    bottom: 0;
    opacity: 0;
  }

  to {
    bottom: 30px;
    opacity: 1;
  }
}

@keyframes fadein {
  from {
    bottom: 0;
    opacity: 0;
  }

  to {
    bottom: 30px;
    opacity: 1;
  }
}

@-webkit-keyframes fadeout {
  from {
    bottom: 30px;
    opacity: 1;
  }

  to {
    bottom: 0;
    opacity: 0;
  }
}


/* NOTIFICATION ALERT*/

.notification_alert_container {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #333;
  color: #fff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  width: 80%;
  max-width: 300px;
  text-align: center;
  border: 1px solid white;
  z-index: 96;
}

.notification_alert_headline {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}

.notification_alert_text {
  font-size: 14px;
  margin-bottom: 20px;
}

.notification_alert_close_button {
  background-color: #ff5c5c;
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: 10px 15px;
  cursor: pointer;
  font-size: 14px;
  text-align: center;
  display: inline-block;
}



/* ble warning */

#ble_warning_container {
  display: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  margin: 10px;
  background-color: white;
  border-radius: 20px;
  z-index: 96;
}

#ble_warning_body {
  padding: 20px;
}

#ble_warning_buttons_div {
  display: flex;
  justify-content: center;
  width: 100%;
}

#ble_warning_ok_button {
  flex: 3;
  background-color: rgb(142, 135, 135);
  color: white;
  padding: 5px;
  text-align: center;
  margin-right: 5px;
  border-radius: 10px;
}

#ble_warning_cancel_button {
  flex: 1;
  background-color: darkgray;
  color: white;
  padding: 5px;
  text-align: center;
  border-radius: 10px;
}


#ble_warning_image_container {
  position: relative;
  width: 100%;
  height: 220px;
  display: inline-block;
}

#ble_warning_image {
  position: absolute;
  background-image: url("/client/images/screenshots/ble_warning_android_en.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  width: 100%;
  height: 100%;
}

.black {
  color: black;
}


#purpole_box {
  position: absolute;
  display: none;
  bottom: 100px;
  z-index: 100;
  background: navy;
  color: white;
  padding: 4px;
  opacity: 0.5;
  transform-origin: top left;
  transform: rotate(270deg);

}


/* problem_reminder */

#problem_reminder_outer {
  display: none;
  position: absolute;
  bottom: 30px;
  left: 30px;
  z-index: 75;
}

#problem_reminder_button {
  height: 36px;
  width: 36px;
  background-image: url("/client/images/problem_button.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.2);
  border-radius: 50%;
  cursor: pointer;
}


/* console */

#console {
  position: fixed;
  left: 0;
  width: 1000%;
  height: 100%;
  background: white;
  z-index: 100;
  overflow-y: auto;
}

#console-content {
  word-wrap: break-word;
  overflow-y: auto;
  overflow-wrap: break-word;
}

#console.open {
  top: 0;
}

#toggle-button {
  position: fixed;
  bottom: 0;
  left: 50%;
  width: 50%;
  height: 25px;
  background: gray;
  transform: translateX(-50%);
  z-index: 200;
  border-radius: 12px 12px 0 0;
}


#console.open #close-button {
  display: block;
}

#console-content {
  padding: 20px;
}


/*    sub pages header       */

#inner_page_header {
  position: fixed;
  top: 0;
  width: 100%;
  height: 55px;
  background-color: #4AB4FE;
  z-index: 50;
  overflow: hidden;
  max-width: var(--max_width);
  display: flex;
  /* Add flexbox to control icon positions */
  justify-content: space-between;
  /* Space items evenly */
  align-items: center;
  /* Vertically align items */
}

#back_arrow {
  position: absolute;
  /* xcolor: white; */
  top: 15px;
  left: 20px;
  font-size: 2em;
}


#action_confirm_button {
  position: absolute;
  top: 2px;
  right: 10px;
  width: 85px;
  height: 50px;
  color: #ffffff;
  font-size: 1.5em;
  font-weight: bold;
}


/* nav_app_container */

#nav_app_container {
  position: absolute;
  background-color: white;
  padding: 0;
  border-radius: 20px;
  align-items: center;
  width: 50%;
  top: 50%;
  left: 50%;
  width: 85%;
  transform: translate(-50%, -50%);
  z-index: 93;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15), 0 8px 32px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}


#nav_app_text_container {
  background: linear-gradient(135deg, #4AB4FE 0%, #3a9ce8 100%);
  border-radius: 20px 20px 0 0;
  text-align: center;
  min-height: 85px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}


#nav_app_text {
  color: white;
  font-size: 1.5em;
  font-weight: 600;
  padding: 0;
  margin: 0;

}

#nav_app_buttons_container {
  width: 100%;
  background: white;
  padding: 8px 0 0 0;
}

#nav_app_container button {
  background: white;
  border: none;
  color: #2c3e50;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: row;
  font-size: 1.1em;
  font-weight: 500;
  width: 100%;
  border-bottom: 1px solid #e9ecef;
  padding: 16px 24px;
  transition: all 0.2s ease;
  cursor: pointer;
  min-height: 60px;
}

#nav_app_container button:hover {
  background: #f8f9fa;
  transform: translateX(4px);
}

#nav_app_container button:active {
  background: #e9ecef;
  transform: translateX(2px);
}

#nav_app_container button:last-child {
  border-bottom: none;
}

#nav_app_container button img {
  width: 32px;
  height: 32px;
  margin: 0 16px 0 0;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

#nav_app_checkbox_container {
  background: linear-gradient(135deg, rgba(74, 180, 254, 0.1) 0%, rgba(58, 156, 232, 0.1) 100%);
  border-radius: 0 0 20px 20px;
  text-align: center;
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border-top: 1px solid #e9ecef;
}

.nav_app_checkbox {
  width: 20px;
  height: 20px;
  margin: 0;
  cursor: pointer;
  accent-color: #4AB4FE;
}

.nav_app_checkbox_text {
  color: #6c757d;
  font-size: 1em;
  font-weight: 500;
  margin: 0;
  cursor: pointer;
  user-select: none;
}

#shares_tip {
  /* position: fixed; */
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 91;
}

#tip_gate_overview_buttons {
  width: 100%;
  height: 100%;
  object-fit: contain;
  z-index: 91;
}

#tip_gate_overview_shares {
  width: 100%;
  height: 100%;
  object-fit: contain;
  z-index: 91;
}

#tip_gate_overview_no_shares_div {
  position: absolute;
  display: none;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 191;
  color: gray;
  text-align: center;
  font-size: 1em;
  padding: 10px;
  direction: rtl;
}

/* #tip_gate_overview_buttons_div {
	background-color: green;	
}
#tip_gate_overview_shares_div {
	background-color: red;	
} */

.admin_map_popup {
  font-size: 1.5em;
}


/*	payments */

.test_button {
  background: #C0C0C0;
  ;
  color: rgb(0, 0, 0);
  border: 2px solid #FFFFFF;
  border-top-color: #F0F0F0;
  border-left-color: #F0F0F0;
  border-bottom-color: #808080;
  border-right-color: #808080;
  padding: 5px 10px;
}



/* contacts search */

#contacts_search_container {
  position: absolute;
  display: none;
  top: 0;
  width: 100%;
  max-width: var(--max_width);
  height: 100%;
  /* margin: 0 auto; */
  overflow-x: hidden;
  background: white;
  z-index: 90;
}

#contacts_search_inner {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  top: 100px;
  width: 100%;
  max-width: var(--max_width);
  height: 100%;
  overflow-x: hidden;
}


#contacts_search_title {
  margin: 20px;
  font-size: 20px;
  color: #0E9CFA;
}

/* #contacts_search_input_field_div {
	/* width: 100%; */
/* border: 1px solid red; */
}

*/ #contacts_search_input {
  font-size: 1.2em;
  line-height: 1.2em;
}


/* large device */

.large_device_item {
  display: inline-block;
  /* border:1px solid red; */
  /* background-image: url("images/grant_access_icon.png"); */
  background-size: contain;
  width: 30px;
  height: 30px;
  margin-left: 20px;
  margin-right: 20px;
}


/* chat */

#chat_container {
  position: fixed;
  top: 58px;
  width: 100%;
  height: 100%;
  z-index: 91;
  overflow-x: hidden;
  overflow-y: scroll;
  max-width: var(--max_width);
  background-color: white;
}

#chat_header {
  position: fixed;
  top: 55px;
  min-height: 20px;
  max-width: var(--max_width);
  height: 100px;
  z-index: 93;
  font-size: 1.25em;
  text-align: center;
  margin: 20px;
}

#chat_inner {
  position: fixed;
  width: 100%;
  max-width: var(--max_width);
  height: 100%;
}


/* sim_expired */

#sim_expired_container {
  position: absolute;
  top: 12px;
  right: 15px;
  width: 56px;
  height: 60px;
  z-index: 91;
}

#sim_expired_icon {
  background-image: url(images/sim_expired_icon.png);
  width: 100%;
  height: 100%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: right;
}


/* 3g network closing */

#network_3g_closing_container {
  position: absolute;
  top: 12px;
  right: 15px;
  width: 56px;
  height: 60px;
  z-index: 91;
}

#network_3g_closing_icon {
  background-image: url(images/3g_closing_icon.png);
  width: 100%;
  height: 100%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: right;
}



/* swipe left animation */

/* #swipe_left_animation_inner {
  position: absolute;
  margin-top: 20px;
  margin-left: 75%;
  animation: fadeSlide 1.5s ease-in-out infinite;
}

@keyframes fadeSlide {
  0% {
    opacity: 0;
    transform: translateX(10px);
  }

  50% {
    opacity: 1;
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    transform: translateX(-10px);
  }
} */


/* by_signing_in_you_agree */

#by_signing_in_you_agree,
#by_signing_up_you_agree {
  font-size: 1em;
  color: gray;
  margin: 25px;
  padding: 10px;
  border-radius: 5px;
  transition: border 0.5s ease-in-out;
}

.blue_link {
  color: gray;
  text-decoration: underline;
  cursor: pointer;
}

#by_signing_in_you_agree_checkbox {
  width: 20px;
  height: 20px;
  vertical-align: middle;
  margin-right: 10px;
  /* margin-top: -10px; */
}


/* general_toggle_switch_template */

#general_toggle_switch_template {
  display: none;
}

.gts_row {
  display: flex;
}

.gts_content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.gts_title {
  font-size: 1em;
  color: gray;
}

.gts_subtitle {
  font-size: 0.8em;
  color: gray;
  text-align: center;
  margin-top: -10px;
}


.user_details_new_outer {
  padding: 10px;
  margin: 10px;
  border-radius: 10px;
  max-width: 90%;
  border: 1px solid #8d8d8d;
}