:root {
  --header-height: 30px;
  --header-padding: 5px;
  --body-height: 400px;
  --footer-height: 28px;

  --border-radius: 4px;

  --red-color:  hsl(358 100% 49%);
  --blue-color: hsl(238 100% 49%);
  --light-blue: hsl(238 50% 60%);
  font-size: 18px !important;
}

html:not([loaded]), html:not([loaded]) body {
  height: 0 !important;
  overflow: hidden;
}

body {
  margin: auto;
  font-size: 1rem !important;
}

html[dark_mode='true'] {
  --body-color: #B9B9B9;
  --body-background-color: #393939;
  --label-color: #E9E9E9;
  --box-shadow-color: rgba(127, 127, 127, 0.90);
  --blue-color: hsl(238 80% 70%);
  --light-blue: hsl(238 50% 70%);
}

html[dark_mode='false'], html:not([dark_mode]) {
  --body-color: #303030;
  --body-background-color: #FFFFFF;
  --label-color: #101010;
  --box-shadow-color: rgba(0, 0, 0, 0.30);
}

html[global_enable="false"] #timer_container,
html[global_enable="true"][menu_timer="false"] #timer_container,
html[global_enable="true"][menu_timer="true"]:not([menu_timer_counting_down]) #timer_container,
html[global_enable="false"] #lock_code_container,
html[global_enable="true"][lock_code="false"] #lock_code_container,
html[global_enable="true"][lock_code="true"]:not([entering_lock_code]) #lock_code_container,
html[global_enable="true"] #disabled_message_container,
html[global_enable="false"] #main_container {
  display: none;
}
html[global_enable="false"] #search_bar {
  visibility: hidden;
}

body {
  background-color: var(--body-background-color);
}
body * {
  color: var(--body-color);
}

*[hidden] {
  display: none !important;
}

a {
  color: var(--body-color);
}

body {
  width: 600px;
  height: fit-content;
  padding: 1px;
}

body, body * {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
}

.hidden {
  visibility: hidden;
}
.removed {
  display: none !important;
}

input {
  background-color: var(--body-background-color);

  border: none;
  border-radius: var(--border-radius);
  box-shadow: 0px 0px 1px 0.5px var(--box-shadow-color);
}
input:focus {
  box-shadow: 0px 0px 2px 0.5px var(--box-shadow-color);
  outline: none;
}

/* Chrome on Windows scrollbar styling */
::-webkit-scrollbar {
  width: 5px;
}
::-webkit-scrollbar-thumb {
  background: var(--body-color);
}

/* Announcement Banner */
.rys_announcement_banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  margin: 8px;
  background: var(--blue-color);
  border-radius: var(--border-radius);
  font-size: 13px;
}

.rys_announcement_banner * {
  color: #fff;
}

.rys_banner_logo {
  width: 20px;
  height: 20px;
}

.rys_banner_brand {
  font-weight: 600;
  margin-right: 8px;
  padding-right: 12px;
  border-right: 1px solid rgba(255, 255, 255, 0.4);
}

.rys_banner_message {
  flex: 1;
}

.rys_banner_link {
  text-decoration: underline;
  opacity: 0.9;
}

.rys_banner_link:hover {
  opacity: 1;
}

.rys_banner_dismiss {
  cursor: pointer;
  opacity: 0.7;
  font-size: 12px;
  white-space: nowrap;
  text-decoration: underline;
}

.rys_banner_dismiss:hover {
  opacity: 1;
}

.rys_banner_close {
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  padding: 0 4px;
  opacity: 0.7;
  line-height: 1;
}

.rys_banner_close:hover {
  opacity: 1;
}
