@import url('https://fonts.googleapis.com/css?family=Open+Sans');

/* Tunables */
:root {
  --menu-collapsed: 62px;
  --menu-expanded: 200px;

  --wa-form-control-activated-color: var(--bc_light_blue);

  --wa-color-surface-border: var(--color-main-2);
  --wa-color-surface-default: var(--color-main-3);
  --wa-color-text-normal: var(--default-text-color);

  --wa-color-brand-fill-quiet: var(--color-main-4);
  --wa-color-brand-on-quiet: var(--bc_med_blue);

  --wa-color-brand-fill-loud: var(--color-main-2);
  --wa-color-brand-on-loud: var(--bc_light_blue);

  --wa-color-neutral-fill-normal: var(--color-main-2);
  --wa-color-neutral-on-normal: var(--bc_med_blue);

  --track-color: var(--color-main-3);
  --indicator-color: var(--bc_light_blue);
  --track-width: 2px;

  --wa-focus-ring: var(--bc_light_blue);

  --wa-color-surface-raised: var(--color-main-1);
  --wa-color-surface-default: var(--color-main-1);
}

.fa_primary_light_blue {
  --fa-primary-color: var(--bc_light_blue);
}

body {
  display: flex;
  /*align-items: center;*/
  justify-content: center;
  /*padding: 0 0 0 20px;*/
  background-color: var(--body-bg-color);
  color: var(--default-text-color);
  font-family: "Open Sans", Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
  overflow-x: hidden;
}

fieldset {
  position: relative;
  padding: 10px 10px;
  border: 1px solid var(--color-fs-border);
  border-radius: 9px;
  box-sizing: border-box;
  margin-block-end: 0;
  gap: 10px;
}

fieldset legend {
  font-weight: bold;
  padding-inline: 0;
  /*Overrides webawesome*/
}

.section_title {
  display: flex;
  flex: 1;
  font-size: 1.1em;
  font-weight: bold;
  color: var(--color-accent-5);
  margin: 20px 0 10px 0;
}

.section_title .title_text {
  width: 100%;
  margin-left: 6px;
  border-bottom: 1px solid var(--bc_light_blue);
}

.legend_right {
  position: absolute;
  right: 0px;
  top: -28px;
  color: var(--bc_light_blue);

  background-color: var(--color-main-1);
  padding: 1px 7px;
  border-radius: 11px;
  box-shadow: var(--box_shadow);
}

div.relative {
  position: relative;
}

.icon_button {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
}

.leaflet-pane img {
  border-radius: 0;
  border: none;
}

/* Blur and dim everything behind jQuery UI modal dialogs */
.ui-widget-overlay {
  backdrop-filter: blur(4px);
  /*opacity: 0;*/
  transition: opacity 0.2s ease;
}

.loading_text {
  color: var(--bc_light_blue);
  font-size: 1em;
}

.loading_map {
  z-index: 100;
}

.nopointerevents {
  pointer-events: all;
}

#global_content {
  align-self: center;
  min-height: 80vh;
  max-width: 1200px;
  margin-bottom: 20px;
}

footer #copyright_div {
  border-radius: 9px;
  text-align: center;
  padding: 10px;
  background-color: var(--color-main-5);
}

.content_and_chat_container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
}

.upload_box_container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}

.upload_box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;

  border: 2px dashed var(--color-main-3);
  border-radius: 8px;

  cursor: pointer;
  position: relative;
  overflow: hidden;
  background-color: var(--color-main-2);

  transition: border-color 0.3s ease;
}

.upload_box.hover {
  border-color: var(--bc_light_blue);
  background-color: #eef6ff;
}

.upload_box.upload_image {
  width: 200px;
  height: 200px;
}

.upload_box img.preview_img {
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
}

.stats_icons_group {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: .1em;
  padding: 0 5px;
}

.stats_icon_container {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 1.5em;
  height: 1.5em;

  border-radius: 20%;
  background-color: var(--color-main-3);

  overflow: hidden;
}

.impact_icon_container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.2em;
  height: 1.2em;
  border-radius: 20%;
  background-color: var(--color-main-3);
  overflow: hidden;
}

.menu_icon_container {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 30px;
  height: 30px;

  border-radius: 20%;
  /*border: 1px solid #aaa;*/

  color: var(--color-accent-2);
  background-color: var(--color-main-2);

  overflow: hidden;
}

.case_header_thumb_container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 20%;
  color: var(--color-accent-2);
  background-color: var(--color-main-2);
  box-shadow: var(--box_shadow);
  overflow: hidden;
}

.img_wrapper {
  /*position: relative;*/
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.upload_box input[type="file"] {
  display: none;
}

.img_wrapper .thumbnail {
  width: 64px;
  height: 64px;
  /*box-shadow: var(--box_shadow);*/
}

.img_wrapper .user_thumbnail,
.img_wrapper .org_thumbnail,
.img_wrapper .user_menu_thumbnail {
  box-shadow: var(--box_shadow);
}

.img_wrapper .placeholder {
  position: absolute;
  /*font-size: 48px;*/
  color: #999;
  transition: opacity 0.3s ease;
}

.img_wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.img_wrapper img.loaded {
  opacity: 1;
}

.flag_noti {
  display: flex;
  border: 1px solid var(--color-main-4);
  border-radius: 4px;
  /*padding: 2px;*/
  box-shadow: var(--box_shadow);
  background-color: var(--color-main-2);
}

.flag_noti img {
  border-radius: 4px;
}

.org_thumb_container .flag_noti {
  position: absolute;
  bottom: -5px;
  right: -10px;
}

.img_wrapper img.loaded+.placeholder {
  opacity: 0;
}

.ui-dialog-content {
  overflow-x: hidden !important;
  min-width: 200px !important;
  min-height: 100px !important;
}

::-webkit-scrollbar {
  width: 15px;

  scrollbar-gutter: stable both-edges;

  scrollbar-highlight-color: #b4c5d3;
}


.invisible {
  display: none !important;
}


.visible {
  visibility: visible !important;
}

.opacity_0,
.single_div {
  opacity: 0;
  transition: opacity 0.5s ease-in;
  pointer-events: none;
}

input:focus {
  border: 3px dashed var(--bc_light_blue) !important;
}

/* Fullscreen wrapper */
.element_max_z {
  display: flex;
  flex: 1;
  height: 100vh;
  width: 100vw;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  pointer-events: none;
  /* changed to none to avoid shadow bugs unless blocking input is needed */
}

/* Loader content box */
.loading,
.loading_div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;

  backdrop-filter: blur(6px);

  /*background-color: #313a46;*/
  opacity: 0.7;

  border-radius: 6px;
  /* ensure full mask */
  transition: opacity 0.5s ease-in-out;
  pointer-events: all;
}

#full_page_loader {
  position: fixed;
  /* fills the viewport */
  inset: 0;
  /* top:0 right:0 bottom:0 left:0 */
  width: 100vw;
  height: 100vh;
  z-index: 9999;
  /* above everything */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  backdrop-filter: blur(24px);

  background-color: #313a46;

  opacity: 0.7;

  border-radius: 0;
  /* ensure full mask */
  transition: opacity 0.5s ease-out;
  pointer-events: all;
}

/* Trigger fade out */
.element_fade .loading {
  opacity: 0;
}

/* Fully hide loader after fade completes */
#full_page_loader[hidden] {
  display: none;
}

.fetch_div {
  display: flex;
  flex: 1;
  flex-direction: column;
  position: relative;
  box-sizing: border-box;
}

.fetch_div.absolute {
  position: absolute !important;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

.rounded_border {
  padding: 6px;
  border: 1px solid var(--color-fs-border);
  border-radius: 8px;
  box-sizing: border-box;
}

.cute_icons {
  display: flex;
  padding: 5px 8px;
  border: 1px solid var(--color-main-3);
  border-radius: 11px;
  box-sizing: border-box;
  background-color: var(--color-main-1);
  width: 38px;
  height: 38px;
  align-items: center;
}

.cute_icons:hover {
  border-color: var(--color_main_2);
  box-shadow: var(--box_shadow_hover);
}

div.step_helper_buttons {
  display: flex;
  right: 0px;
  top: 0px;
  /*opacity: 0.7;*/
  position: absolute;
  justify-content: center;
  align-items: center;
  border: 1px solid var(--color-fs-border);
  border-radius: 8px;
  box-sizing: border-box;

  padding: 2px;

  gap: 5px;
}

div.case_list_helper_buttons {
  display: flex;
  left: 0px;
  top: 0px;
  position: absolute;
  justify-content: center;
  align-items: center;
}

div.opened_items {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

div.incident_item,
div .no_item {
  display: flex;
  flex: 1;
  flex-direction: column;

  min-width: 800px;
  max-height: 5000px;

  border-radius: 6px;
  background-color: var(--color-bg-item) !important;
  padding: 10px 10px 10px 15px;
  margin-bottom: 17px;
  box-shadow: var(--box_shadow);

  opacity: 1;
  transition: all 0.5s ease;
}

.incident_item:hover,
.incident_item fieldset:hover,
.fs_boards:hover,
.fs_settings_boards:hover,
.listing_column:hover {
  box-shadow: var(--box_shadow_hover);
  transition: none;
}

.incident_item,
.incident_item fieldset {
  box-shadow: var(--box_shadow);
}

.opened_items .filled {
  min-height: 300px;
  margin: 35px 0 15px 20px;
}

.closed_items .filled.expanded,
.snoozed_items .filled.expanded {
  min-height: 500px;
  margin: 35px 0 15px 20px;
}

.incident_item.focused {
  border: 2px dashed var(--bc_light_blue);
  box-shadow: var(--box_shadow_hover);
}

.incident_item.empty {
  min-height: 25px;
}

.incident_item.collapsing {
  /*for incident_item divs before removing them after answer */
  max-height: 0 !important;
  min-height: 0 !important;
  opacity: 0;
}

div.item_info_column {
  max-width: 200px;
}

.last_actions {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 400px;
  margin-top: 10px;
}

.blue_link {
  background-color: #333;
  font-weight: bold;
  color: var(--bc_light_blue);
  padding: 8px;
  margin-top: 25px;
  border-radius: 10px;
}

.ui-tabs .ui-tabs-panel {
  padding: 0;
}

.AOI_loading {
  display: flex;
  flex: 1;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  height: 100%;
  opacity: 0.8;
  position: absolute;
  /*z-index: 999;*/
  background-color: var(--bc_dark_blue);
  justify-content: center;
  align-items: center;
  transition: .5s ease;

  pointer-events: all;
}

.master_frame {
  display: flex;
  flex: 1;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: stretch;
  /*align-content: center;*/
}

.master_frame:has(timeline[type="timeline"]),
.master_frame:has(.case_summary) {
  max-width: 1000px;
  /*margin-top: 20px;*/
  min-width: 600px;
}

.same_display_style {
  display: inherit;
}

#main_content {
  display: flex;
  flex: 1 1 auto;
  position: relative;
  flex-direction: column;
  z-index: 1;
  height: 100%;
  min-width: 800px;
  justify-content: flex-start;
  align-items: stretch;
  margin: 10px 0 0 0;
  /*overflow-x: hidden !important;*/
}

#global_content:has(#left_sticky_rail) #main_content {
  margin-left: 70px;
}

div.item_main_content {
  margin-right: 10px;
}

.noti {
  z-index: 100;
  position: absolute;
  top: 18px;
  right: 10px;
  justify-content: center;
  align-items: center;
  font-size: 0.5em;
  box-shadow: var(--box_shadow);
}

.initial_hide {
  /* Initial state for fade-in effect */
  opacity: 0 !important;
  transition: opacity 2s ease;
}

.initial_hide_short {
  /* Initial state for fade-in effect */
  opacity: 0 !important;
  transition: opacity .5s ease;
}

.initial_hide.show_delayed,
.initial_hide_short.show_delayed {
  /* Delayed state for fade-in effect */
  opacity: 1 !important;
}

.noti_current_user {
  color: var(--color-main-2);
  transform: translate(0, -50%);
  background-color: var(--bc_med_blue);
}

.noti_other_users {
  /*color: var(--color-accent-2);*/
  color: #ddd;
  transform: translate(-17px, -50%);
  background-color: var(--bc_dark_blue);
}

.fieldset_icon {
  z-index: 5;
  /*Enough to put the loading div under*/
  position: absolute;
  top: -15px;
  left: -23px;
  width: 32px;
  height: 32px;
  color: #323232;
  border-radius: 8px;
  border: 1px solid var(--color-main-3);
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--color-accent-2);
  background-color: var(--color-main-2);
}

.formy .fieldset_icon {
  /*z-index: 100;*/
  position: absolute;
  top: -17px;
  left: -43px;
  width: 30px;
  height: 30px;
  color: #323232;
  border-radius: 22%;
  border: 1px solid #aaa;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--color-accent-2);
  background-color: var(--color-main-2);
}

.item_icon {
  /*z-index: 100;*/
  position: absolute;
  top: -35px;
  left: -30px;
  width: 50px;
  height: 50px;
  color: #323232;
  border-radius: 8px;
  border: 2px solid var(--color-main-1);
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--color-accent-2);
  background-color: var(--color-main-2);

  padding: 1px;

  overflow: hidden;
}

.section_title_icon {
  width: 32px;
  height: 32px;
  color: #323232;
  border-radius: 8px;
  border: 1px solid var(--color-main-3);
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--color-accent-2);
  background-color: var(--color-main-2);
}

.org_thumb_container {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;

  margin: 5px;

  border-radius: 12px;

  color: var(--color-accent-2);
  background-color: var(--color-main-2);

  box-shadow: var(--box_shadow);

  /*overflow: hidden;*/
}

.w64xh64 {
  width: 64px;
  height: 64px;
}

.w100xh100 {
  width: 100px;
  height: 100px;
}

.w150xh150 {
  width: 150px;
  height: 150px;
}

.fieldset_expand {
  display: flex;
  z-index: 100;
  position: absolute;
  top: -10px;
  left: 50%;
  width: 20px;
  height: 16px;
  justify-content: center;
  align-items: center;
  color: var(--default-text-color);
  background-color: var(--color-main-1);
  border-radius: 4px;
  padding: 2px;
}

.dialog_msg_box {
  display: flex;
  flex-direction: column;

  max-width: 100%;
  box-sizing: border-box;

  border-radius: 5px;
  padding: 25px;
  background-color: var(--color-main-1);
  color: var(--default-text-color);
  box-shadow: var(--box_shadow);

  word-wrap: break-word;
}

.dialog_msg_box:hover {
  box-shadow: var(--box_shadow_hover);
}

.user_card {
  display: flex;
  font-size: 0.9em;
  gap: 10px;
}

.opened_items:has(.incident_item) .no_item,
.opened_items:has(.incident_item, .no_item) .skeleton_tab {
  display: none !important;
}

.skeleton_tab_item {
  padding: 30px;
}

.skeleton_tab_item wa-skeleton {
  height: 25px;
}

.skeleton_tab_item .left_col wa-skeleton:first-child {
  height: 150px;
}

wa-skeleton::part(indicator) {
  border-radius: var(--wa-border-radius-m);
}

.form_cost_post,
.form_file_post,
.form_comment_post {
  gap: 10px;
}

.form_cost_post input:hover,
.form_file_post input:hover,
.form_comment_post input:hover,
.form_cost_post select:hover,
.form_file_post select:hover,
.form_comment_post select:hover {
  box-shadow: var(--box_shadow);
}

.form_comment_post wa-textarea {
  max-height: 400px;
}

.chat_window_container {
  display: flex;
  /*flex: 1;*/
}

.chat_window {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  height: calc(100vh - 80px);
  width: 0;
  min-width: 0;
  opacity: 0;
  overflow: visible;
  /* show content while animating closed */
  transition: width 0.5s ease, opacity 0.5s ease;
}

.chat_window_container:has(.chat_window.chat_expanded) {
  flex: 1;
}

.chat_window.animating {
  overflow: visible;
}

.chat_window.chat_expanded {
  flex: 1;
  opacity: 1;
  margin-left: 30px;
  min-width: 500px;
}

.single_chat {
  display: flex;
  flex-direction: column;
  position: relative;
  margin-top: 25px;
  color: var(--color-accent-2);
  background-color: var(--color-main-1);
  border-radius: 4px;

  flex: 1 1;
  min-height: 0;

  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
  /*overflow: hidden;*/
  transition:
    max-height 0.5s ease,
    opacity 0.5s ease,
    transform 0.5s ease;
}

.single_chat.chat_invisible {
  flex: 0 0 0;
  max-height: 0;
  min-height: 0;
  opacity: 0;
  transform: translateX(-30px);
  pointer-events: none;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}

.chat_window .single_chat .msg_thread {
  display: flex;
  flex-direction: column;
  flex: 1;
  position: relative;
  overflow-y: hidden;
  padding: 10px;
  margin-bottom: 10px;
  gap: 10px;

  opacity: 0;
  transition: opacity 0.5s ease-in;
  /*pointer-events: none;*/
}

.chat_window .single_chat input {
  width: 100%;
  margin: 0 5px 0 0;
}

.chat_window .single_chat .chat_title {
  display: flex;
  flex-direction: column;
  height: 35px;
  padding: 5px;
  font-weight: bold;
  margin: 10px;
  border-radius: 5px;
  background-color: var(--color-main-2);
  align-items: center;
  justify-content: center;
}

div.chat_helper_buttons {
  display: flex;
  flex: 1;
  right: 30px;
  opacity: 0.7;
  position: absolute;
  justify-content: center;
  align-items: center;
}

div.chat_thread_new_msg_noti_container {
  display: flex;
  position: absolute;
  left: 50px;
  justify-content: center;
  align-items: center;

  padding: 2px 6px;
  background-color: var(--color-main-1);
  border-radius: 6px;
}

.chat_window .single_chat .msg_thread .single_msg_div {
  display: flex;
  flex-direction: column;
}

.single_msg_div .user_time_div {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.single_msg_div .user_time_div .time_bubble {
  color: var(--color_main_2);
}

.single_msg_div .user_time_div .name_bubble {
  display: flex;
  align-items: center;
  justify-content: left;
  padding: 2px 4px;
  border-radius: 6px;
  background-color: var(--color-main-3);
  color: var(--default-text-color);
}

.single_msg_div .user_time_div .name_container {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
}

.single_msg_div .msg_text {
  text-wrap: wrap !important;
  word-wrap: break-word !important;
  overflow-wrap: anywhere !important;
  /*Aggressive long word break*/
  margin-top: 2px;
  padding: 2px;
}

.single_msg_div .msg_text.imp_normal {
  border-top: 1px solid var(--color-main-3);
}

.single_msg_div .msg_text.imp_high {
  border-top: 1px dashed rgb(222, 148, 11);
}

.single_msg_div .msg_text.imp_critical {
  border: 1px dashed #800505;
  border-radius: 4px;
}

.single_msg_div .msg_text.deleting_msg {
  opacity: 0.5;
  text-decoration: line-through;
}

.single_msg_div {
  padding: 5px;
}

.single_msg_div:hover {
  border-radius: 6px;
  background-color: var(--color-main-2);
}

.chat_input {
  flex: 1;
}

.msg_importance {
  flex: 0 0 180px;
}

.required_hide::part(form-control-label)::after {
  display: none !important;
}

.form_buttons {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 20px;
  margin-top: 30px;
}

.row_end {
  display: flex;
  flex: 1;
  flex-direction: row;
  justify-content: flex-end;
}

.chat_controls_container .single_chat_control {
  display: flex;
  flex-direction: column;
}

.chat_controls_container .single_chat_control .chat_notis_container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.chat_input_container select.msg_importance {
  width: 165px;
}

.rcbubble {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px 5px;
  border-radius: 5px;
  /*background-color: var(--color-main-1);*/
  color: var(--default-text-color);
}

pre {
  white-space: pre-wrap !important;
  word-wrap: break-word !important;
  overflow-x: auto;
  margin: 0;
  padding: 0;
}

.row_gap_10 {
  display: flex;
  flex-direction: row;
  /*gap: 10px;*/
  align-items: center;
  justify-content: space-around;
}

.flex_align_middle {
  display: flex !important;
  align-items: center;
  justify-content: center;
}

.version_string {
  display: flex;
  flex: 1;
  width: 100%;
  justify-content: right;
  align-items: center;
  font-size: 0.5em;
  color: var(--color-accent-3);
}

.sxs_div {
  display: flex;
  flex: 1;
  flex-wrap: nowrap;
  flex-direction: row;
  justify-content: space-between;
  align-items: first baseline;
  gap: 10px;
}

.sxs_div .item_text {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 600px;
  flex-wrap: wrap;
  text-wrap: wrap;
  align-items: baseline;
}

.sxs_div .nextup {
  display: flex;
  flex: 0;

  min-width: 200px;

  padding: 5px;

  flex-wrap: wrap;
  text-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;

  align-self: center;

  border: 1px solid #ccc;
}

.answers_div {
  display: flex;
  flex: 1;
  flex-wrap: nowrap;
  flex-direction: row;
  justify-content: space-evenly;
  gap: 10px;
}

.answer_but {
  min-width: 120px;
  background-color: var(--color-main-0);
  color: var(--color-accent-1);
  box-shadow: var(--box_shadow) !important;
}

.answer_but:hover {
  box-shadow: var(--box_shadow_hover) !important;
  background-color: var(--color-accent-0) !important;
  color: var(--color-main-1) !important;
  transition: none;
}

button:disabled,
button:disabled:hover,
button[disabled],
button[disabled]:hover {
  cursor: not-allowed;
  border: 1px solid #999999;
  background-color: #303030;
  color: #666666;
}

.white_text {
  color: white;
}

.ol_alpha li {
  list-style-type: lower-alpha !important;
  margin-bottom: 10px;
}

.ul_roman li {
  list-style-type: lower-roman !important;
  margin-bottom: 10px;
}

ul.normal_list li {
  list-style-type: circle !important;
  margin-bottom: 10px;
}

.ui-accordion .ui-accordion-content {
  padding: 1.5em 1em 1em 1em !important;
  border-top: 0;
  /*overflow: auto;*/
}

.font_color_sev_1 {
  color: red !important;
}

.font_color_sev_2 {
  color: orange !important;
}

.font_color_sev_3 {
  color: yellow !important;
}

.sev_0_marker {
  --fa-primary-color: #3c3c3c !important;
  --fa-secondary-color: #c2c1c1 !important;
  --fa-secondary-opacity: 0.7 !important;
}

.sev_1_marker {
  --fa-primary-color: var(--color-accent-5) !important;
  --fa-secondary-color: #de111b !important;
  --fa-secondary-opacity: 0.9 !important;
}

.sev_2_marker {
  --fa-primary-color: var(--color-accent-5) !important;
  --fa-secondary-color: #e7880d !important;
  --fa-secondary-opacity: 0.9 !important;
}

.sev_3_marker {
  --fa-primary-color: var(--color-accent-6) !important;
  --fa-secondary-color: #e8dd16 !important;
  --fa-secondary-opacity: 0.9 !important;
}

.bc_popup {
  cursor: pointer !important;
}

img.halo {
  display: block;
  margin: auto;
  border-radius: 50%;
  box-shadow: 0 0 30px 10px rgba(1, 77, 116, 0.5);
}

.case_legend {
  display: flex;
  /*flex: auto;*/
  justify-content: left;
  align-items: center;
  gap: 10px;
  margin: 10px 0 10px 0;
  font-size: 1.1em;
  font-weight: bold;
}

.case_legend img {
  /*filter: blur(1px);*/
  filter: drop-shadow();
  border: 2px solid var(--color-main-3);
  border-radius: 10px;
  width: 64px;
  height: 64px;
}

.page_header_tenant_heading {
  display: flex;
  font-size: 1em;
  max-width: 250px;
  max-height: 100%;
  text-overflow: ellipsis;
  overflow: hidden;
  align-content: center;
  align-items: center;
  gap: 10px;
}


.module_title,
.menu_title {
  font-size: 1.4em;
  font-weight: bold;
  text-transform: uppercase;
  color: var(--bc_light_blue);
  padding: 10px 0 10px 5px;
}



.bc_section_header {
  margin: 10px 0 10px 0;
  font-size: 1em;
  font-weight: bold;
}

.fc_inherit {
  display: inherit;
  align-items: inherit;
  justify-content: inherit;
}

.blue_but,
.ai_buttler_but {
  background-color: #1C2C3B !important;
  color: white;
  padding: 5px 5px;
  border: 1px white;
  border-radius: 8px;
  cursor: pointer;
}

.blue_but:hover,
.ai_buttler_but:hover {
  background-color: #1C2C3B;
}

.ai_buttler_but {
  border: dashed !important;
}

.timer {
  display: flex;
  flex: 1;
  position: relative;
  justify-content: center;
  align-items: center;
  min-width: 100px;
}

.timer .cancel_timer {
  display: flex;
  justify-content: center;
  align-items: center;
  visibility: hidden;
  padding: 5px;
  position: absolute;
  z-index: 5000;
  bottom: 0;
  left: calc(50% - 10px);
  opacity: 0;
  transition: opacity 0.4s;
}

.timer:hover .cancel_timer {
  visibility: visible;
  opacity: 1;
}

.timer:hover .timer_display {
  visibility: hidden;
  opacity: 0;
}


.neon_blue_bold {
  font-weight: bold;
  color: var(--bc_light_blue) !important;
}


#left_sticky_rail {
  display: flex;
  flex-direction: column;

  position: sticky;
  top: 100px;
  left: 0;

  height: calc(100vh - 100px);

  box-sizing: border-box;
  margin-right: 20px;

  transition: width .25s ease;
  will-change: width;

  z-index: 10;
}

.menu_groups {
  position: absolute;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.menu_group:hover {
  width: var(--menu-expanded);

  border: 2px solid var(--bc_light_blue);

  background-color: var(--color_bg_menu);

  box-shadow: var(--box_shadow);

  margin-left: 16px;
}

.menu_group.bottom {
  margin-top: auto;
  margin-bottom: 10px;
}

.menu_group hr {
  color: var(--color-main-5);
  border: none;
  margin: 10px 0;
}

.menu_group {
  display: flex;
  flex-direction: column;

  width: var(--menu-collapsed);

  padding: 10px;
  border: 2px solid var(--color-main-3);
  border-radius: 9px;

  background-color: var(--color-main-1);
  box-shadow: var(--box_shadow);

  transition: all 0.25s ease;
}

.menu_group:hover .menu_text {
  opacity: 1;
  max-width: calc(var(--menu-expanded) - var(--menu-collapsed));
  transform: translateX(0);
  margin-left: 6px;
  transition: opacity 0.5s ease;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  text-overflow: ellipsis;
  overflow: hidden;
}

.menu_line {
  display: flex;
  color: var(--default-text-color);
  /*padding: 2px 2px;*/
  box-sizing: border-box;
}

.magicmenu {
  position: relative;
  display: flex;
  flex: 1;
  align-items: center;
  padding: 2px;
  cursor: pointer;
  height: 38px;
}

.magicmenu::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 100%;
  width: 16px;
  /* bridge width (gap) */
}

.magicmenu_header {
  display: flex;
  align-items: center;

  padding: 4px;
  margin-top: 5px;

  font-size: 1.1em;
  font-weight: bold;
  /*border-bottom: 1px solid var(--bc_med_blue);*/

  background-color: var(--color-main-3);
  color: var(--color-accent-1);
  border-radius: 6px;
  width: 100%;
  height: 40px;

  overflow: hidden !important;
  white-space: nowrap;
  text-overflow: ellipsis !important;
}

.magicmenu .menu_text,
.magicmenu_header .menu_text {
  white-space: wrap;
  opacity: 0;
  max-width: 0;
  transform: translateX(-4px);

  transition: none;
}

.magicmenu .menu_text {
  color: var(--default-text-color);
  pointer-events: none;
}

.magicmenu:hover {
  font-weight: bold;
  background-color: var(--color-accent-3);
  color: var(--color-main-1);
  box-shadow: var(--box_shadow_hover);
  border-radius: 4px;
}

.magicmenu:hover>.menu_text {
  color: var(--color-main-1);
}

.magicmenu .menu_icon_container,
.magicmenu .menu_icon_container * {
  pointer-events: none;
  transition: none;
}

.magicmenu .submenu {
  position: absolute;
  visibility: hidden;
  min-width: 200px;
  width: max-content;
  max-width: 275px;
  background-color: var(--color-main-1);
  font-size: 1em;
  text-align: left;
  border-radius: 6px;
  border: 1px solid var(--bc_light_blue);
  padding: 5px 10px;
  z-index: 10000;
  left: calc(100% + 14px);
  bottom: 0px;
  /*transform: translate(0, calc(-33%));*/
  opacity: 1;
  box-shadow: var(--box_shadow);
  transition: opacity 0.3s;
}

/* Critical: make submenu items' .magicmenu a real box */
.magicmenu .submenu .magicmenu {
  display: flex;
  /* overrides inline <span> behavior */
  width: 100%;
  flex: 1;

  padding: 3px 4px;

  overflow: visible !important;
}

.magicmenu:hover .submenu,
.magicmenu .submenu:hover {
  visibility: visible;
  opacity: 1;
}

.magicmenu .submenu .menu_line {
  width: 100%;
}


.magicmenu .submenu .menu_title {
  font-weight: bold;
  font-size: 1.1em;
}

.magicmenu .submenu li {
  padding: 3px;
  margin-bottom: .5em;
  margin-inline-start: 0;
}

.magicmenu:hover .submenu {
  visibility: visible;
  opacity: 1;
}

.magicmenu a {
  color: var(--color-accent-3);
  cursor: pointer;
}

.magicmenu a:hover {
  font-weight: bold;
  color: #02b2e3 !important;
}

a {
  text-decoration: none;
  color: var(--a-color);
  cursor: pointer !important;
}

a:hover {
  font-weight: bold;
  color: var(--a-hover-color);
  opacity: 1;
}

a:hover i {
  font-weight: normal;
  color: var(--a-color);
}

bc_popup:hover {
  color: #02b2e3 !important;
}




.pm_div {
  padding: 5px;
  border: 1px solid var(--color-main-3);
}

.no_button_answer {
  padding: 10px;
  border: 1px solid var(--color-accent-3);
  border-radius: 6px;
}

.align_left {
  display: flex;
  justify-content: left !important;
}

.flex_row_align_top {
  align-content: flex-start;
  align-items: flex-start;
}

.allpad20 {
  padding: 20px;
}

.topmarg5 {
  margin-top: 5px;
}

.topmarg,
.topmarg10 {
  margin-top: 10px;
}

.topmarg30 {
  margin-top: 30px !important;
}

.topmarg20 {
  margin-top: 20px !important;
}

.topmarg40 {
  margin-top: 40px !important;
}

.toppad10 {
  padding-top: 10px;
}

.toppad20 {
  padding-top: 20px !important;
}

.toppad50 {
  padding-top: 50px !important;
}

.topmarg50 {
  margin-top: 50px !important;
}

.botmarg20 {
  margin-bottom: 20px !important;
}

.botmarg30 {
  margin-bottom: 30px !important;
}

.botmarg10 {
  margin-bottom: 10px !important;
}

.botpad10 {
  padding-bottom: 10px;
}

.botpad20 {
  padding-bottom: 20px;
}

.rightmarg10 {
  margin-right: 10px;
}

.right20 {
  padding-right: 20px;
}

.rightpad20 {
  padding-right: 20px;
}

.leftmarg5 {
  margin-left: 5px;
}

.leftmarg10 {
  margin-left: 10px;
}

.leftmarg20 {
  margin-left: 20px;
}

.rightpad10 {
  padding-right: 10px;
}

.allpad5 {
  padding: 5px;
}

.allpad10 {
  padding: 10px;
}

.allmarg20 {
  margin: 20px;
}

.botborder {
  border-bottom: 1px solid var(--color-main-2);
  padding-bottom: 10px;
}

.raise7 {
  transform: translateY(-7px);
}

a.normal_link {
  text-decoration: underline !important;
  color: var(--a-color);
  cursor: pointer;
}

.bshadow {
  box-shadow: 0px 0px 5px #888888;
}

.orange_font {
  color: rgb(221, 145, 2);
}

.red_font {
  color: red;
}

.green_font {
  color: green !important;
}

.stats_box {
  display: flex;
  min-width: 32px;
  max-width: 48px;
  margin: 1px;
  padding: 1px;
  border: 1px solid #cccccc;
  border-radius: 8px;
  justify-content: center;
  gap: 3px;
  color: #ddd !important;
  text-shadow: 1px 1px 2px #555;
  background-color: #666;
}

.stats_box.red_div:hover {
  background-color: red;
}

.stats_box.orange_div:hover {
  background-color: orange;
}

.stats_box.yellow_div:hover {
  background-color: yellow;
}


.gv_div:hover {
  background-color: var(--gv_color);
}

.id_div:hover {
  background-color: var(--id_color);

}

.pr_div:hover {
  background-color: var(--pr_color);
}

.de_div:hover {
  background-color: var(--de_color);
}

.rs_div:hover {
  background-color: var(--rs_color);
}

.re_div:hover {
  background-color: var(--re_color);
}

.stats_code {
  display: flex;
  flex: 1;
  font-size: 0.6em;
  color: var(--color_main_3) !important;
  justify-content: center;
}

.w50 {
  width: 50px;
}

.w150 {
  width: 150px;
}

.td_pad_sides {
  text-align: center;
  padding-left: 4px;
  padding-right: 4px;
}

.subtle_text {
  color: var(--color-accent-4) !important;
}

.dashed {
  border-style: dashed !important;
}

.border_id {
  border: 1px #cccccc solid;
  border-radius: 5px;
}

.botbordergrey td {
  border-bottom: 1px solid #555;
}

.botborderwhite td {
  border-bottom: 1px solid #eee;
}

.if_border {
  border: 2px solid;
  box-shadow: 0 0 15px rgba(142, 142, 142, 0.6);

  border-radius: 5px;
  padding: 10px;
}


.if_text a,
.if_text,
.if_text_hover:hover {
  color: var(--if_color) !important;
}

.gv_text a,
.gv_text,
.gv_text_hover:hover {
  color: var(--gv_color) !important;
}


.gv_border {
  border: 2px solid var(--gv_color);
}

.id_text a,
.id_text,
.id_text_hover:hover {
  color: var(--id_color) !important;
}

.id_border {
  border: 2px solid var(--id_color);
}

.pr_border {
  border: 2px solid #805493;
}

.pr_text a,
.pr_text,
.pr_text_hover:hover {
  color: var(--pr_color) !important;
}

.de_border {
  border: 2px solid #EF9B2E;
}

.de_text a,
.de_text,
.de_text_hover:hover {
  color: var(--de_color) !important;
}

.rs_border {
  border: 2px solid #E03E47;
}

.rs_text a,
.rs_text,
.rs_text_hover:hover {
  color: var(--rs_color) !important;
}

.re_border {
  border: 2px solid #4EB14F;
}

.re_text a,
.re_text,
.re_text_hover:hover {
  color: var(--re_color) !important;
}

.top_menu {
  padding: 10px;
}


.formy fieldset>legend>.legend_text {
  display: flex;
  position: absolute;
  top: -22px;
  left: 0;
  font-size: 0.8em;
  text-transform: uppercase;
}

fieldset>legend>.legend_text,
fieldset.supp_content>.legend_text {
  display: flex;
  position: absolute;
  top: -22px;
  left: 20px;
  font-size: 0.8em;
  text-transform: uppercase;
}

.uppercase {
  text-transform: uppercase;
}

.lowercase {
  text-transform: lowercase;
}

.supercase {
  text-transform: supercase;
}

.pbitem_div>legend>.legend_text {
  position: absolute;
  top: -32px;
  left: 25px;
  font-size: 0.8em;
}


.fs_legend {
  padding: 5px 10px;
  border: 2px solid var(--color-accent-4);
  font-weight: bold;
  background-color: var(--color-main-0);
  max-width: 80%;
  border-radius: 9px;
}

.fs_legend_big {
  font-size: 24px;
}

.fs_activity {
  padding: 20px;
  min-width: 300px;
}

.item_phrase {
  font-weight: bold;
  font-size: 1.3em;
}

.fs_detect {
  border-color: #EF9B2E !important;
}

.bg_colored_text {
  background-color: var(--color-main-3);
}

label {
  display: block;
  margin: 0;
  color: inherit;
}

.overflow {
  height: 200px;
}

.bold {
  font-weight: bold;
}

.tshadow {
  text-shadow: 1px 1px 2px #555;
}

li.footer {
  font-size: 12px;
}

li.pbitem {
  /*font-size: 0.7em;*/
  text-align: justify;
}

ul li,
ol li {
  display: flex;
  list-style: none;
  position: relative;
  line-height: 1.4em;
}

ul.chevron,
.case_summary_text ul {
  display: flex;
  flex-direction: column;
}

ul li span span:first-of-type,
ul.ellipsis li span span:first-of-type,
ul.chevron li span span:first-of-type,
.line_item span span:first-of-type {
  font-weight: bold;
  margin-right: 5px;
}

fieldset li,
ul.chevron li,
.case_summary_text li {
  position: relative;
  list-style: none;
  margin: 2px 0 8px 0;
  /*line-height: 1.4;*/

  display: inline-flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 0.3em;
}

ul.chevron_tight li {
  margin: 0 0 0 5px;
}

fieldset li::before,
ul.chevron li::before,
.case_summary_text li::before {
  /*
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  */
  font-family: 'FontAwesome';
  content: '\f054';
  font-size: 0.7em;
  line-height: 1;
  color: var(--bc_light_blue);
  opacity: 0.8;

  transform: translateY(0.6em);
}

.grid_cell_no_wrap {
  width: max-content;
  /* or: min-width: max-content; */
}

.wa-stack.grid_cell_no_wrap {
  width: max-content;
  max-width: 100%;
  /* optional: prevents blowing past viewport */
}

.line_item {
  display: flex;
  margin-left: 10px;
}

/* bullet icon */
.line_item::before {
  font-family: 'FontAwesome';
  content: '\f054';
  font-size: 0.7em;
  color: var(--bc_light_blue);
  opacity: 0.8;
  margin-right: 0.35em;
  margin-top: 0.5em;
  line-height: 1.4;
}

fieldset.fs_activity legend {
  max-width: 90%;
  line-height: 0.9em;
  word-break: keep-all;
}

.ui-button-icon-only.demo-splitbutton-select {
  width: 1em;
}

.smaller-ui-button {
  padding: 3px 5px 3px 5px !important;
}

button,
.tab {
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

button:not([disabled]),
button:not([disabled]) {
  box-shadow: var(--box_shadow);
  border: 1px solid #323232;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

button:not([disabled]):hover,
button:not([disabled]):focus,
.tab:hover {
  background: var(--bc_light_blue);
  /*font-weight: bold;*/
  /*color: #303030;*/
  box-shadow: var(--box_shadow_hover);
  border: 1px solid #323232;
}

.grow_hover:hover {
  scale: 1.1;
  transition: all 0.15s;
}

.header_toggle_control_div {
  display: flex !important;
  justify-content: center;
  /*background-color: var(--color-main-4);*/
  border-top: 2px solid var(--color-main-3);
  padding: 2px;
  box-sizing: border-box;
}

.header_toggle_control_div:hover {
  border-top: 2px solid var(--color-main-1);
  box-sizing: border-box;
}

.border_hover {
  border: 2px solid transparent !important;
  border-radius: 4px;
  margin: 1px;
  box-sizing: border-box;
}

.border_hover:hover {
  border: 2px solid var(--color-main-3) !important;
  box-sizing: border-box;
}

.rounded_highlight {
  background-color: #444;
  padding: 4px;
  border-radius: 4px;
}

.AOI_buttons {
  width: 100px;
  margin-right: 10px !important;
}

.bg_green {
  background-color: #BEEDBD;
}

.aright {
  display: flex;
  position: relative;
  justify-content: right;
}

div.aleft {
  display: flex;
  position: relative;
  justify-content: left;
}

.absolute_noopacity {
  position: absolute !important;
  opacity: 0;
}

.width60 {
  width: 60%;
}

.font_subtle {
  color: var(--color-main-4) !important;
}

.font09xem {
  font-size: 0.9em !important;
}

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

.font06xem {
  font-size: 0.6em !important;
}

.font05xem {
  font-size: 0.5em !important;
}

.ui-tabs-nav {
  font-size: 0.9em;
  border-bottom: 1px solid var(--color-main-2);
  border-radius: 0 !important;
}

.ui-tabs .ui-tabs-nav li {
  margin: 0 !important;
  min-width: 140px;
}

.ui-tabs .ui-tabs-nav li:not(:last-child) {
  margin: 1px 0.3em 0 0 !important;
}

ul {
  padding-left: 8px;
  margin-top: 0px;
  display: block;
  list-style-type: disc;
  margin-block-start: .3em;
  margin-block-end: .1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}

.wrap {
  text-wrap: wrap !important;
}

.field_set_activity {
  border: 2px solid var(--color-accent-1);
}

.nowraptext {
  white-space: nowrap;
}

h1,
h2,
h3,
h4.lessmargin {
  margin-top: 2px;
  margin-bottom: 2px;
}

h3.underline {
  text-decoration: underline;
}

.margleft10 {
  margin-left: 10px;
}

.margleft20 {
  margin-left: 20px;
}

.padleft,
.padleft20 {
  padding-left: 20px;
}

.padright50 {
  padding-right: 50px;
}


.right_arrow {
  display: flex;
  font-size: 26px;
  color: #888;
}

.notbold {
  font-weight: normal !important;
}


.item_tab {
  display: flex;
  position: relative !important;
  background-color: var(--color-main-6) !important;
}

.flex_row_wrap_sb {
  display: flex;
  flex-direction: row !important;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 5px 10px;
}

.flex_container {
  display: flex;
  position: relative;
  min-width: 0;
}

.flex_container_grow {
  display: flex;
  flex: 1;
  justify-content: center;
  position: relative !important;
  width: 100%;
}

.flex_container_grow_column {
  display: flex;
  flex: 1;
  justify-content: flex-start;
  position: relative !important;
  width: 100%;
  flex-direction: column;
}

.fc_columned {
  display: flex;
  position: relative;
  flex-direction: column;
}

.fc_wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  white-space: wrap;
}

.textwrap {
  width: 100%;
  text-wrap: wrap;
}

.flex-child,
.flex_child {
  flex: 1;
}

.flex-child-shrink {
  flex-shrink: 1;
}

.flex-grow-item {
  display: flex;
  flex-grow: 1;
}

.aleft {
  display: flex;
  justify-content: left;
}

.just_left {
  display: flex;
  justify-content: left;
}

.just_right {
  display: flex;
  justify-content: right;
}

.just_center {
  display: flex;
  justify-content: center;
}

.flex-supertight {
  display: flex;
  flex: 0;
}

.flex_supertight {
  display: flex;
  flex: 0;
}

.f_basis_content {
  display: flex;
  flex: 0 1 content;
}

.amiddle-stretch {
  display: flex;
  flex-direction: column;
  align-items: auto;
  justify-content: stretch;
}

.fc_columneded {
  display: flex;
  flex: 0;
  position: relative !important;
  flex-flow: column;
  justify-content: center;
  align-content: center;
  align-items: center;
}

.flex1_columned {
  display: flex;
  flex: 1;
  position: relative !important;
  width: 100%;
  flex-flow: column;
  align-content: center;
  align-items: stretch;
}

.fc_columneded_stretch {
  display: flex;
  flex: 0;
  flex-flow: column;
  justify-content: center;
  align-content: center;
}


.fc_acenter {
  display: flex;
  align-items: center;
}

.acou {
  display: flex;
  flex: 1;
  justify-content: center;
  align-content: center;
  flex-wrap: wrap;
  text-align: center;
  align-items: center;
}

.screen_center {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.screen_bottom {
  display: flex;
  flex: 1;
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  align-items: center;
  justify-content: center;
}

.staff_card {
  display: flex;
  flex: 1;
  justify-content: center;
  flex-wrap: wrap;
  text-align: center;
  align-content: center;
  align-items: center;
}

.staff_card.card_title {
  font-weight: bold;
  padding: 5px;
}

.roles_cards_container {
  display: flex;
  flex: 1;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  align-content: center;
  column-gap: 10px;
}

.roles_cards_container>div {
  display: flex;
  flex: 1;
  min-width: 125px;
  max-width: 175px;
  flex-flow: column;
  gap: 5px;
  justify-content: center;
  align-content: center;
  flex-wrap: wrap;
  text-align: center;
  align-items: center;
}

.timers_container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.fc_just_center {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.fc_just_around {
  display: flex;
  justify-content: space-around;
}

.fc_just_even {
  display: flex;
  justify-content: space-evenly;
}

.fc_just_sb {
  display: flex;
  justify-content: space-between;
}

.fc_stretch {
  display: flex;
  align-items: stretch;
}

.border2px {
  border-width: 2px;
}

.width_200 {
  width: 200px;
}

.min_width100 {
  min-width: 100px;
}

.min_width125 {
  min-width: 125px;
}

.min_width200 {
  min-width: 200px;
}

.min_width250 {
  min-width: 250px;
}

.max_width125 {
  max-width: 125px;
}

.max_width140 {
  max-width: 140px;
}

.max_width200 {
  max-width: 200px;
}

.max_width300 {
  max-width: 300px;
}

.max_width400 {
  max-width: 400px;
}

.max_width600 {
  max-width: 600px;
}

.max_width700 {
  max-width: 700px;
}

.max_width50pct {
  max-width: 50%;
}

.section_header {
  display: block;
  margin-bottom: 15px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent-3);
  border-bottom: 1px solid var(--bc_light_blue);
  opacity: 0.8;
}


.butt {
  appearance: button;
}

.edit_case_div {
  display: flex;
}


.case_list_vert_scroll {
  display: flex;
  flex: 1;
  flex-direction: column;
  /*overflow-y: auto;*/
}



.noborder {
  border: none !important;
  border-spacing: 0;
}

.flex_nowrap {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
}

.go_button {
  flex: none;
  font-family: "FontAwesome";
  background: #1C2C3B;
  color: #ddd;
  border: none;
  cursor: pointer;
}

.search_box {
  display: flex;
  /* Aligns the input and button side by side */
  flex-wrap: nowrap;
  border-radius: 5px;
}

.little_note {
  display: flex;
  font-size: 0.7em;
  opacity: 0.8;
}

.tab_title {
  position: relative;
  font-size: 1.2em;
  font-weight: bold;
  padding: 5px 10px;
}

.report_title {
  min-width: 150px;
}

.comment_info {
  font-size: 0.8em;
  color: var(--color-accent-3);
  border: 1px dashed var(--color-main-4);
  border-radius: 6px;
  padding: 5px;
}

.comment_info .tooltip,
.dashed_under {
  text-decoration: underline dashed;
  text-underline-offset: 4px;
}

.search_box input[type="search"] {
  min-width: 0;
  border: none;
  outline: none;
  flex: 1;
  font-size: 16px;
}

.search_box button {
  flex: none;
  font-family: "FontAwesome";
  background: var(--color-main-2);
  cursor: pointer;
  color: var(--bc_light_blue);
}

.search_box button:hover {
  background: var(--color-accent-3);
}

.cc select {
  width: 300px;
}


#incidenttabs {
  margin: 20px 0px 0px 0px;
  min-width: 300px;
}

div.item_left_column {
  display: flex;
  flex-direction: column;
  min-width: 150px;
  margin-top: 15px;
}

.page_header {
  display: flex;
  /*flex:1;*/
  height: 80px;
  position: relative;
  justify-content: space-between;
  align-items: center;
  border: var(--color-fs-border);
  border-radius: 8px;
  box-shadow: var(--box_shadow);
  padding: 3px;
}

.page_header_logo_container {
  display: flex;
  justify-content: center;
  gap: 8px;
}

.page_header_logo_container_admin {
  display: flex;
  width: 170px;
  justify-content: center;
  background-color: #023661;
}

.page_header_logo {
  display: flex;
  height: 60px;
  width: 60px;
  min-width: 60px;
}

.page_header_brand {
  display: flex;
  height: 60px;
  min-width: 200px;
}

.page_header_gradient {
  display: flex;
  flex: 1;
  position: relative !important;
  /*background: linear-gradient(to right, #061725 0%, #065c91 100%);*/
  border-radius: 6px;
  /*box-shadow: var(--box_shadow);*/
}

.page_header_gradient_admin {
  display: flex;
  flex: 1;
  height: 100%;
  position: relative !important;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  font-weight: bold;
  color: #ccc;
  background: linear-gradient(to right, #023661 0%, #217b8b 100%);
}

.top_stats_container {
  display: flex;
  flex: 1;
  justify-content: flex-end;
}

.form_no_marg {
  margin: 0 !important;
}

form {
  margin-block-end: 0 !important;
}

.cursor_finger {
  cursor: pointer;
}

wa-divider.tight {
  margin: 5px 0 !important;
}

footer {
  display: flex;
  flex-direction: column;
  align-self: center;
  align-items: center;
  justify-content: space-evenly;

  max-width: 60vw;

  margin-top: 50px;
  border-radius: 6px;
  background: var(--color-main-3);
  color: var(--color-accent-1);
  padding: 10px;
}

.tab_content {
  min-height: 200px;
  padding: 10px 5px 10px 5px !important;
  margin-top: 10px;
}

.login_form {
  width: 400px;
}

.login_form button {
  background-color: var(--bc_med_blue);
  color: white;
  padding: 10px;
  margin-top: 20px;
  border: none !important;
  border-radius: 5px;
  cursor: pointer;
  font-size: 1.2em !important;
  width: 100%;
}

.login_form .frame {
  display: flex;
  flex-direction: column;
  border: var(--bc_light_blue) 2px solid;
  border-radius: 10px;
  padding: 25px;
  /*background-color: var(--color-main-2);*/
}

.login_form button:hover {
  color: white !important;
}

.login_form input {
  font-size: 1.2em !important;
  font-weight: bold !important;
}

.login_form input:focus {
  border: 2px solid #05416c !important;
  outline: none;
  /* removes default browser outline */
  box-shadow: 0 0 6px rgba(5, 65, 108, 0.5);
  /* nice glow */
  background-color: var(--color-accent-3);
  /* subtle highlight */
  transition: all 0.2s ease;
  /* smooth animation */
  color: var(--color-main-4);
}

.animated_div {
  transition: transform .75s ease, opacity 1s ease, width .75s ease, height .75s ease, margin .5s ease, padding .5s ease;
  transform: scale(1);
  opacity: 1;
  width: 100%;
}

.non_animated_div {
  transform: scale(1);
  opacity: 1;
  width: 100%;
}


.scale_out {
  transform: scale(0);
  opacity: 0;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
}

.scale_away {
  transform: scale(1.2) translateY(-200px);
  opacity: 0;
  transition: all 0.5s ease;
}

.noti_num {
  display: inline-block;
  transition: transform .5s ease, opacity .5s ease;
}

.noti_out {
  transform: translateY(25px);
  opacity: 0;
}

.noti_in {
  transform: translateY(-25px);
  opacity: 0;
  animation: drop-in 1s ease forwards;
}

/* Keyframes for dropping new number into place */
@keyframes drop-in {
  from {
    transform: translateY(-25px);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.fade_in {
  opacity: 0;
  animation: fadeIn 0.5s ease-in forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.collapsible_div {
  display: flex;
  flex-direction: column;
  position: relative;
  /*overflow: hidden;*/
  transition: all 0.5s ease;
  box-sizing: border-box;
}

.collapsible_div.expanded {
  max-height: 5000px;
  /* A big enough number to fit content */
  min-height: 40px;
  opacity: 1;
  visibility: visible;
}

.collapsible_div.collapsed {
  max-height: 0;
  padding: 0;
  /* Ensures no extra spacing is left */
  margin: 0;
  /* Optional: prevents margin gaps when shrinking */
  opacity: 0;
  visibility: hidden;
}

.ui-accordion .ui-accordion-content {
  transition: all 0.5s ease;
}

label {
  position: relative;
  display: block;
}

legend:has(.fieldset_icon) {
  padding-inline: initial;
}

.playbook_grid {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  padding: 20px 10px;
  margin-top: 40px;
  gap: 20px;
  justify-content: center;
  /*overflow-x: hidden !important;*/
}

.playbook_box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 5px;
  text-align: center;
  border-radius: 5px;
  /*border: 1px solid var(--color-main-5);*/
  min-width: 200px;
  flex: 0;
  /*box-sizing: border-box;*/
  box-shadow: var(--box_shadow);
}

.playbook_icons_line {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.settings_box {
  position: relative;
  padding: 5px;
  text-align: left;
  border-radius: 5px;
  min-width: 200px;
  flex: 0;
  /*box-sizing: border-box;*/
  box-shadow: var(--box_shadow);
}

.playbook_box:hover,
.settings_box:hover {
  box-shadow: var(--box_shadow_hover);
}

.playbook_icon {
  display: flex;
  padding: 10px;
  border: 1px solid var(--color-main-3);
  border-radius: 11px;
  box-sizing: border-box;
  background-color: var(--color-main-1);
  align-items: center;
}

.flex1_col {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
}

.buttler_icon {
  display: flex;
  width: 75px;
  border-right: 1px solid var(--bc_light_blue);
  padding-right: 10px;
  flex-direction: column;
  justify-content: top;
}

.flex1 {
  display: flex;
  flex: 1;
}

.flex0 {
  display: flex;
  flex: 0;
}

timeline,
.case_summary {
  display: flex;
  flex: 1;
  min-height: 400px;
  min-width: 800px;
  flex-direction: column;
  position: relative;
  /*max-width: 900px;*/
  align-self: center;
}

.case_summary_text {
  /* Container for markdown-rendered summaries */
  font-family: "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif;
  color: var(--default-text-color);
  line-height: 1.65;
  text-align: justify;
  text-justify: inter-word;
  max-width: 900px;
  margin: 0 auto;
  padding: 1rem 1.5rem;
}

/* Headings */
.case_summary_text h2 {
  color: var(--bc_light_blue);
  font-size: 1.4rem;
  font-weight: 600;
  border-bottom: 1px solid var(--bc_med_blue);
  padding-bottom: 0.3rem;
}

/* Paragraphs */
.case_summary_text p {
  margin-bottom: 1rem;
  text-align: justify;
  text-justify: inter-word;
}

/* Emphasis */
.case_summary_text strong {
  color: var(--default-text-color);
}

popup_content {
  display: flex;
  flex: 1;
  flex-direction: column;
  position: relative;
  margin-top: 20px;
}

.timeline {
  overflow: hidden;
}

.timeline_header {
  display: flex;
  flex: 0;
  flex-direction: column;
  color: var(--color-accent-0);
  background-color: var(--color-main-1);
  border-radius: 6px;
  padding: 5px 10px 10px 25px;
  gap: 10px;
  z-index: 1;
}

.tl_score_label {
  display: flex;
  flex-direction: column;
  flex: 1;
  font-size: 48px;
  align-items: center;
  justify-content: center;
  align-content: center;
  flex-wrap: wrap;
}

.top_right_container {
  position: absolute !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 6px;
  z-index: 10;
  top: 10px;
  right: 10px;
  gap: 12px;
  justify-content: center;
  align-items: center;
  /*border: 1px solid var(--color-fs-border);*/
  /*border-radius: 8px;*/
  box-sizing: border-box;
}

.top_right_container.flush_corner {
  padding: 0;
  top: 0px;
  right: 0px;
}

.buttons_row {
  display: flex;
  flex-direction: row;
  align-content: center;
  align-items: center;
  gap: 10px;
}

.info_icon {
  position: absolute;
  top: 5;
  right: 5;
  transform: translate(-50%, 50%);
}

.list_items_fieldsets {
  display: flex;
  flex-direction: row;
  gap: 25px;
  flex-wrap: nowrap;
  /* Keep all fieldsets in a single row */
  justify-content: space-between;
}

.list_items_fieldsets fieldset {
  flex: 1;
  box-sizing: border-box;
  align-items: center;
  margin-top: 10px;
  position: relative;
  margin-block-end: revert;
}

fieldset ul,
fieldset ol {
  display: flex;
  margin: 0;
  padding: 0;
  flex-direction: column;
}

.list_items_fieldsets .name_div {
  display: flex;
  flex: 1;
  position: relative;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.list_items_fieldsets .stats_div {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 15px;
}

.stats_div fieldset {
  display: flex;
  flex: 1;
  width: 100%;
  align-items: center;
  justify-content: center;
}

.name_div .legend_text {
  margin-top: 5px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.fs_tl_boards {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  position: relative;
  flex: 1 1 29%;
  min-width: 20%;
  margin-top: 30px;
  box-shadow: var(--box_shadow);
}

.case_list_entry {
  margin-top: 5px;
  position: relative;
  padding: 20px 10px 10px 10px;
  border-radius: 8px;
}

ul.ellipsis {
  display: block;
  position: relative;
}

ul.ellipsis>li {
  display: flex;
  position: relative;
  white-space: nowrap;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  /* Ensure the li takes the full width of its container */
}

ul.ellipsis>li>span:first-of-type {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 98%;
  vertical-align: middle;
  position: relative;
  /* Ensure the ::after tooltip is positioned relative to this */
}

ul.ellipsis a {
  display: inline;
  white-space: inherit;
}

.pop_full_text {
  position: relative;
  /* Needed for tooltip positioning */
}

.pop_full_text:hover::after {
  content: attr(full_text);
  /* Shows full text */
  position: absolute;
  left: 0;
  top: 100%;
  /* Position below the text */
  background: rgba(44, 44, 44, 0.8);
  color: var(--bc_light_blue);
  padding: 5px;
  border-radius: 2px;
  white-space: nowrap;
  z-index: 1000;
  display: block;
  min-width: max-content;
  /* Ensure it fits the text */
}

.tooltip {
  position: relative;
  cursor: help;
}

.tooltip .tooltiptext {
  display: none;
  text-wrap: wrap;
  position: absolute;
  width: max-content;
  max-width: 275px;
  background-color: var(--color-main-1);
  color: var(--color-accent-1);
  font-size: 12px;
  text-align: left;
  border-radius: 6px;
  border: 1px solid var(--bc_light_blue);
  padding: 5px 15px;
  left: 0;
  bottom: 0;
  z-index: 10;
  opacity: 0;
  box-shadow: var(--box_shadow);
  transition: transform 2s cubic-bezier(.02, 1.23, .79, 1.08);
  transition: opacity 0.4s;
}

.toast {
  position: fixed;
  font-family: "Open Sans" !important;
  text-wrap: wrap;
  background-color: rgba(29, 29, 29, 0.9);
  color: #03c3f8;
  text-align: center;
  border-radius: 8px;
  border: 1px solid #03c3f8;
  padding: 5px;
  z-index: 9999;
  box-shadow: var(--box_shadow);
  font-size: 0.7rem;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.3s ease, transform 0.3s cubic-bezier(.02, 1.23, .79, 1.08);
  pointer-events: none;
}


.toast.show {
  opacity: 1;
  transform: translateY(0);
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: var(--tooltip_anchor_x, 50px);
  margin-left: -7px;
  border-width: 7px;
  border-style: solid;
  border-color: var(--bc_light_blue) transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
  opacity: 1 !important;
  display: block;
}

.list_items_separator {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 15px;
}


legend .legend_text {
  text-wrap: nowrap;
}

span.ellipsis {
  flex: 1 1 auto;
  min-width: 0;
}

/* Multiline ellipsis */
span.ellipsis a {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  /* number of visible lines */
  overflow: hidden;
}

.ellipsis_95pct {
  display: inline-block;
  position: relative;
  width: 95%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

span.ellipsis_150 {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  width: 175px;
  max-width: 175px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.content_disabled {
  opacity: 0.5;
  filter: grayscale(100%);
  pointer-events: none;
  /* disables clicks, hovers, etc. */
  cursor: not-allowed;
}

.fs_timeline_header {
  display: flex;
  flex: 1;
  flex-direction: row;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  border: none;
  width: 100%;
  box-sizing: border-box;
}

.fs_graphs_header {
  display: flex;
  flex: 1;
  flex-direction: row;
  justify-content: space-between;
  padding: 5px;
  margin: 20px 0 10px 0;
  flex-wrap: wrap;
}

.fs_timeline_header>legend {
  font-size: 1.2em;
}

.go_back_case {
  display: flex;
  flex: 1;
  flex-direction: row;
  justify-content: flex-end;
  padding: 5px;
}

.gap10 {
  gap: 10px !important;
}

.gap20 {
  gap: 20px;
}

.icons_grid {
  display: flex;
  flex: 1;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 20px;
}

.panel {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 1rem;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
}

.flex_end {
  display: flex;
  align-items: flex-end;
}

.fa_pad_sides {
  margin-left: 10px;
  margin-right: 10px;
}

.drop_shadow {
  box-shadow: var(--box_shadow);
  /*border: none;*/
}

.drop_shadow_hover:hover {
  box-shadow: var(--box_shadow_hover);
}


.fs {
  display: flex;
  position: relative !important;
  flex-direction: row;
  column-gap: 15px;
  flex-wrap: wrap;
}

.fs_ai_conversation {
  display: flex;
  position: relative !important;
  flex-direction: column;
  column-gap: 15px;
  flex-wrap: wrap;
  box-shadow: var(--box_shadow);
}

.fs_map {
  display: flex;
  flex: 1 1 100%;
  position: relative !important;
  flex-direction: column;
  justify-content: space-evenly;
  gap: 10px;
  flex-wrap: wrap;
  box-shadow: var(--box_shadow);
  border: none;
  padding: 20px 10px 10px 10px
}

.fs_map:hover {
  box-shadow: var(--box_shadow_hover);
}


.fs_inputs {
  display: flex;
  position: relative !important;
  flex: 1;
  /*width:100%;*/
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  margin: 30px 10px 0 0;
  padding: 5px 10px;
  gap: 5px;
  flex-wrap: wrap;
}

.impacts_map {
  display: flex;
  position: relative !important;
  min-height: 400px;
  height: 550px;
  border-radius: 10px;
}

.marker_icon {
  text-align: center;
  line-height: 20px;
}

.fs_space_even {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  padding: 5px 5px 5px 5px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.timeline_footer {
  display: flex;
  padding: 5px;
  justify-content: stretch;
  margin-top: 50px;
  margin-bottom: 20px;
  color: var(--color-accent-1);
  font-size: 0.8em;
  background-color: var(--color-main-4);
  border-radius: 6px;
  flex-direction: column;
}

.fs_boards {
  display: flex;
  flex-direction: column;
  position: relative;
  font-size: 0.9em;
  gap: 10px;
  background-color: var(--color-main-1);
  box-shadow: var(--box_shadow);
  padding-top: 20px;
  min-width: 150px;
  max-width: 300px;
  margin-block-end: 0;
  margin: 15px 0 0 15px;
}

.fs_boards.tight {
  min-width: 75px;
  max-width: 150px;
}

.fs_boards.large {
  min-width: 400px;
  max-width: none;
}

.fs_boards.full_width {
  flex: 1;
  max-width: none;
  width: 100%;
}

.fs_impacts_boards {
  display: flex;
  position: relative;
  flex: 1 0 33%;
  min-width: 25%;
  max-width: 400px;
  align-items: center;
  gap: 10px;
  background-color: var(--color-main-1);
  box-shadow: var(--box_shadow);
  border: none !important;
  margin-top: 30px;
}

.fs_settings_boards {
  display: flex;
  flex-direction: column;
  position: relative;
  flex: 1 0 30%;
  max-width: 400px;
  align-items: flex-start;
  padding: 20px 10px 10px 10px;

  background-color: var(--color-main-1);
  box-shadow: var(--box_shadow);
  gap: 10px;

  font-size: 0.9em;
}

.fs_stats_boards {
  display: flex;
  position: relative;
  flex: 1 0 45%;
  min-width: 45%;
  flex-basis: content;
  align-items: center;
  gap: 10px;
  padding-top: 20px;
  margin: 20px 0 0 10px;
  background-color: var(--color-main-1);
}

.fs_list_boards {
  display: flex;
  flex: 1 1 40%;
  margin: 5px;
  align-items: center;
  background-color: var(--color-main-1);
}

.container {
  display: flex;
  position: relative;
  flex-wrap: wrap;
  gap: 10px;
  width: 100%;
}

.tenant_stats {
  display: flex;
  flex: 1;
  position: relative;
  min-height: 100px;
  /*margin-bottom: 20px;*/
}

.flex_end {
  display: flex;
  align-items: flex-end !important;
}

.justify_around {
  display: flex;
  justify-content: space-around;
}

.fs_tl_boards>legend,
.fs>legend,
.fs_space_even>legend,
.fs_activity>legend {
  color: var(--color-accent-4);
}

.fs_container {
  display: flex;
  flex-wrap: wrap;
  height: 100%;
  font-size: 0.9em;
  gap: 20px;
  justify-content: center;
  box-sizing: border-box;
}

.fs_container fieldset {
  min-height: 100px;
  border: none;
  box-shadow: var(--box_shadow);
  margin-left: 10px
}

.fs_container fieldset:hover {
  box-shadow: var(--box_shadow_hover);
}

.fs_container fieldset.fs_dashboard_half {
  display: flex;
  height: 425px;
  min-width: 425px;
  flex: 1 1 45%;
  box-sizing: border-box;
  background-color: var(--color-main-1);
}

.fs_container fieldset.fs_dashboard_full {
  display: flex;
  flex: 1 1 100%;
  width: 100%;
  min-width: 600px;
  height: 400px;
  background-color: var(--color-main-1);
}

.target_div {
  display: flex;
  flex-direction: column;
  min-height: inherit;
  opacity: 0;
  /*For fade-in effect */
  transition: all 0.5s ease-in-out;
}

.dash_chart {
  display: flex;
  flex: 1 1 100%;
  position: relative;
  padding: 0px 0px 20px 0px;
  justify-content: center;
  align-items: center;
  min-height: inherit;
  min-width: inherit;
}

.fs_tight {
  display: flex;
  flex: 0;
  justify-content: center;
  position: relative;
  margin: 5px;
  padding: 0 5px 0 5px;
  align-items: center;
  gap: 3px;
}

/* The actual timeline (the vertical ruler) */
.timeline_container::before {
  content: '';
  position: absolute;
  height: 100%;
  width: 2px;
  background-color: var(--bc_light_blue);
  box-shadow: 0 0 5px #1C2C3B;
  top: 0;
  bottom: 0;
  left: 50%;
  margin-left: -1px;
  z-index: -1;
}

.timeline_container {
  position: relative;
  display: flex;
  /*flex: 0;*/
  flex-wrap: nowrap;
  flex-direction: column;
  align-items: stretch;
  gap: 20px;
  overflow: hidden;
}

.audit_item_comment {
  display: flex;
  flex: 1;
  flex-direction: column;
  height: 100%;
}


.tl_item_sides {
  display: flex;
  flex: 1;
}

.color_id {
  color: #5CA6DA;
}

.color_pr {
  color: #805493;
}

.color_de {
  color: #EF9B2E;
}

.color_rs {
  color: #E03E47;
}

.color_re {
  color: #4EB14F;
}

.color_gv {
  color: #F9F49E;
}

.cont_id {
  width: 50px;
  background-color: #5CA6DA;
}

.cont_pr {
  width: 50px;
  background-color: #805493;
}

.cont_de {
  width: 50px;
  background-color: #EF9B2E;
}

.cont_rs {
  width: 50px;
  background-color: #E03E47;
}

.cont_re {
  width: 50px;
  background-color: #4EB14F;
}



.tl_item_content.audit {
  flex: 1;
}

.tl_item_lines {
  display: flex;
  flex: 1;
  flex-direction: row;
  align-items: center;
  align-content: center;
  justify-content: flex-start;
  white-space: wrap;
  text-overflow: ellipsis !important;
  max-width: 100%;
  margin-bottom: 20px;
}

.tl_item_lines div {
  overflow-wrap: break-word;
  word-break: break-word;
}

.tl_date_content {
  display: flex;
  flex: 0 1 auto;
  justify-content: center;
  align-items: center;
  align-self: center;
  padding: 10px;
  background-color: var(--color-main-2);
  border: 2px solid var(--color-accent-3);
  border-radius: 6px;
  color: var(--default-text-color);
  font-size: 1.5em;
  text-wrap-mode: nowrap;

}

.tl_day_content_audit {
  display: flex;
  flex: 0 1 auto;
  width: 400px;
  justify-content: center;
  align-items: center;
  padding: 5px;
  background-color: var(--color-main-2);
  border: 1px solid var(--color-accent-3);
  border-radius: 6px;
  color: var(--default-text-color);
  font-size: 18px;
  box-sizing: border-box;
}

.tl_item_time {
  display: flex;
  flex: 0;
  min-height: 26px;
  justify-content: center;
  color: var(--default-text-color);
  font-size: 0.8em;
}

.tl_title {
  display: flex;
  align-self: center;

  width: 35%;
  text-wrap-mode: nowrap;
  min-width: 330px;

  background-color: var(--color-main-2);
  /*margin-top: 20px;*/
  padding: 10px;
  justify-content: center;
  justify-items: center;
  font-size: 2em;
  color: var(--default-text-color);

  border: 2px solid var(--color-accent-3);
  border-radius: 6px;
}

.tl_title_audit {
  display: flex;
  align-self: center;
  width: 400px;
  background-color: var(--color-main-2);
  margin-top: 20px;
  padding: 10px;
  justify-content: center;
  justify-items: center;
  font-size: 2em;
  color: var(--default-text-color);
  border: 2px solid var(--color-accent-3);
  border-radius: 6px;
  box-sizing: border-box;
}

.tl_end {
  display: flex;
  flex: 0;
  background-color: var(--color-main-2);
  padding: 10px;
  justify-content: center;
  justify-items: center;
  font-size: 2em;
  color: var(--default-text-color);
  border: 2px solid var(--color-accent-3);
}

/* Groups of timeline items */
.tl_item_group_container {
  position: relative;
  display: flex;
  flex-direction: column;
  row-gap: 20px;
}

/* Each timeline item row */
.tl_item_div_audit {
  display: flex;
  align-items: stretch;
  width: 100%;
}

.tl_column {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  /* center on both axes */
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
}

/* Left and right "sides" of the timeline row */
.tl_side {
  flex: 1 1 50%;
  /* each side takes half of the width, but can flex */
  display: flex;
  align-items: center;
  padding: 0 15px;
  box-sizing: border-box;
}

/* Fieldset should fill the available width on its side */
.tl_item_content {
  flex: 1 1 0;
  min-width: 0;
  margin-top: 30px;
  padding-top: 20px;
  overflow-wrap: break-word;
  word-break: break-word;
  white-space: normal;
  margin-block-end: 0;
}

/* Optional: stats block aligned away from center */
.tl_right_item_stats {
  margin-left: auto;
  padding: 15px;
  border-radius: 9px;
}

/* Branch column between fieldset and center */
.tl_branch_column {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  flex: 0 0 80px;
  /* adjust width as needed */
  padding: 0 5px;
  /*gap: 5px;*/
}

/* Horizontal dotted branch line */
.tl_branch {
  width: 100%;
  border: 0;
  border-top: 2px dotted var(--color-main-2);
  margin: 0;
}

.tl_step_title {
  display: flex;
  flex: 0;
  border: 2px solid var(--color-main-2);
  border-radius: 6px;
  padding: 5px;
  margin: 10px 0 10px 0;
}

/*---------------------------------*/
/* ALTERNATION LEFT / RIGHT */
/*---------------------------------*/

/* Default / odd groups:
   content on the LEFT of center.
   .tl_side.left is on the left, with [fieldset][branch] nearest the center.
*/
timeline[type=timeline] .tl_item_group_container .tl_side.left,
timeline[type=manage] .tl_item_group_container .tl_side.left {
  justify-content: flex-end;
  /* pack toward center */
  flex-direction: row;
  /* [fieldset][branch] near center */
}

timeline[type=timeline] .tl_item_group_container .tl_side.right,
timeline[type=manage] .tl_item_group_container .tl_side.right {
  justify-content: flex-start;
  /* stats go away from center by default */
}

/* Even groups:
   Put content on the RIGHT of center by reordering sides.
   .tl_side.left still contains fieldset+branch in HTML,
   but visually appears on the right. */
timeline[type=timeline] .tl_item_group_container:nth-child(even) .tl_side.left,
timeline[type=manage] .tl_item_group_container:nth-child(even) .tl_side.left {
  order: 2;
  /* move to the right side */
  justify-content: flex-start;
  /* pack toward center */
  flex-direction: row-reverse;
  /* [branch][fieldset] near center */
}

timeline[type=timeline] .tl_item_group_container:nth-child(even) .tl_side.right,
timeline[type=manage] .tl_item_group_container:nth-child(even) .tl_side.right {
  order: 1;
  /* move stats side to the left */
  justify-content: flex-end;
  /* if you ever add stats, they sit away from center */
}


.audit_item_rating {
  display: flex;
  justify-content: space-between;
  flex-wrap: nowrap;
  border: 1px solid var(--color-accent-3);
  border-radius: 6px;
  padding: 5px;
  box-sizing: border-box;
  gap: 10px;
}

.audit_item_comment textarea {
  min-height: 100px;
  max-height: 300px;
  padding: 10px;
  box-sizing: border-box;
  border-radius: 6px;
  font-size: 16px;
  resize: vertical;
  /* Allow resizing only in the vertical direction */
}

.audit_item_answers {
  display: flex;
  flex-direction: column;
  flex: 1;
  justify-content: center;
  min-width: 400px;
  box-sizing: border-box;
}

.comment_sample {
  padding: 20px;
  margin: 40px 30px 20px 30px;

  font-family: 'Courier New', Courier, monospace;
  color: var(--color-accent-2);
  background-color: var(--color-main-2);

  border-radius: 6px;
}

.error {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  justify-content: center;
  padding: 20px;
  font-size: 0.8em;
  color: var(--error_color);
  background-color: var(--error_bg);

  border-radius: 6px;
}


.formy {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 10px;
}

.formy_horiz {
  display: flex;
  flex-direction: row;
  gap: 10px;
}


.formy fieldset {
  display: flex;
  flex-direction: column;
  position: relative;
  justify-content: space-between;
  padding: 25px 30px;
  flex-wrap: wrap;
  border: 1px solid var(--color-main-3);
  margin: 30px 0 10px 0;
  min-width: 0;
  box-shadow: var(--box_shadow);
}

.center_column {
  display: flex;
  flex-direction: column;
  justify-content: stretch;
  align-self: center;
}

.staff_div {
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  /*overflow: hidden;*/
}

.comment_but {
  height: fit-content;
  width: 100px;
}

.red_bg {
  background-color: var(--red_bg);
}

.red_bg .formy {
  color: #FFF;
}

input[type=radio] {
  transform: scale(1.15);
  margin: 10px;
}

input[type=radio]:checked:disabled::before {
  content: "";
  display: inline-block;
  width: 75%;
  height: 75%;
  background-color: var(--bc_med_blue);
  /* Change this to your desired color */
  border-radius: 50%;
  position: absolute;
  top: 12.5%;
  left: 12.5%;
}


input[type=text],
input[type=number],
input[type=search],
input[type=text-area],
input[type=email],
input[type=password],
input[type=file],
input[type=date],
input[type=datetime-local],
select {
  font-family: "Open Sans";
  font-size: 1em;
  background-color: var(--color-select-bg);
  color: var(--color-accent-3);
  /*margin-left: 5px;*/
  border: none;
  outline: none;
  padding-left: 5px;
  box-sizing: border-box;
}

input[type=text]::placeholder,
input[type=search]::placeholder,
input[type=text-area]::placeholder,
input[type=email]::placeholder,
input[type=password]::placeholder,
input[type=file]::placeholder,
input[type=date]::placeholder,
input[type=datetime-local]::placeholder,
select::placeholder {
  opacity: 0.5 !important;
}

input[type="file"]::file-selector-button {
  padding: 0 4px 0 0 !important;
  height: 100%;
  cursor: pointer;
  background-color: var(--color-main-5);
  color: var(--color-main-3);
  border: 1px solid rgba(0, 0, 0, 0.16);
  box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.05);
  margin-right: 16px;
  transition: background-color 200ms;
}

/* file upload button hover state */
input[type="file"]::file-selector-button:hover {
  background-color: #1C2C3B;
  color: var(--color-accent-3);
}

.formy input:disabled {
  /*.formy input:read-only {*/
  background-color: #444;
  color: #eee;
}

.formy input:disabled {
  cursor: not-allowed;
}

.formy input:hover,
.formy select:hover,
.formy input:focus,
.formy select:focus {
  box-shadow: var(--box_shadow_hover);
}

.formy select.options_select {
  padding: 5px;
  border-radius: 9px;
}

/* file upload button active state */
input[type="file"]::file-selector-button:active {
  background-color: #1C2C3B;
}

.maxwidth250 {
  max-width: 250px !important;
}

option {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.rolename {
  margin-bottom: 6px;
}

.formy_horiz fieldset {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 5px 10px 5px 10px;
  flex-wrap: wrap;
  border: 1px solid #888;
  margin-bottom: 20px;
}


.formy select,
.formy input[type=text],
.formy input[type=search],
.formy input[type=text-area],
.formy input[type=email],
.formy input[type=password],
.formy input[type=date],
.formy input[type=datetime-local],
.formy input[type=file] {

  position: relative;

  width: 100%;
  box-sizing: border-box;

  padding: 5px !important;
  margin-top: 5px !important;
  margin-bottom: 10px !important;
  border-radius: 6px !important;

  box-shadow: var(--box_shadow);
}

.formy_horiz fieldset select .formy_horiz fieldset input[type=text] .formy_horiz fieldset input[type=password] .formy_horiz fieldset input[type=date] .formy_horiz fieldset input[type=datetime-local] .formy_horiz fieldset input[type=file] {

  padding: 5px !important;
  margin-top: 5px !important;
  margin-bottom: 10px !important;
  border-radius: 6px !important;
}

.single_chat_control input[type=checkbox] {
  margin-top: 6px;
}

.formy label {
  display: flex;
  align-items: center;
  opacity: 0.9;
}

.formy .audit_item_rating label {
  text-align: center;
  display: flex;
  flex: 1;
  flex-direction: column !important;
  align-items: center;
  font-size: 0.7em;
}

.formy_horiz input[type=checkbox] {
  height: 20px;
  width: 20px;
  margin-right: 10px;
}

input[type="date" i],
input[type=datetime-local i] {
  font-family: "Open Sans";
}

.timer_display {
  pointer-events: none;
  /* Pass the click to parent */
}


.trash_file:hover,
.trash_comment:hover,
.trash_can:hover {
  color: red !important;
  scale: 1.25 !important;
}

/*
.fs_dashboards svg g:first-of-type path {
  fill: var(--default-text-color) !important;
}
*/

#progress_div g circle:first-of-type {
  fill: var(--color_around_gauge);
}

/* Background gauge */
#progress_div g circle:nth-of-type(2) {
  fill: var(--color_inside_gauge);
}

#progress_div g text:first-of-type {
  fill: var(--color-accent-3);
  font-size: 12px;
  font-weight: bold;
}

#progress_div g text:nth-of-type(2) {
  fill: #999;
  font-size: 10px;
}

#progress_div g text:nth-of-type(3) {
  fill: #999;
  font-size: 10px;
}

.blink {
  animation: blinker 1.2s linear;
  animation-iteration-count: 3;
}

.blink_slow {
  animation: blinker 2s linear;
  animation-iteration-count: infinite;
}

.blink_fast {
  animation: blinker .33s linear;
  animation-iteration-count: 6;
}

.supp_content {
  display: flex;
  flex: 1;
  justify-content: center;
  align-items: flex-start;
  padding: 15px 10px 10px 10px;
  margin: 10px;
  border-radius: 8px;
  flex-direction: column;
}

.answer_but.progress_low {
  cursor: not-allowed;
  border: 1px solid #999999;
  background-color: #303030;
  color: #666666;
}

div.playbook_name {
  display: flex;
  align-items: center;
  justify-content: center;
  /*
  padding: 10px;
  min-height: 80px;
  */
}

select[aria-disabled="true"] {
  pointer-events: none;
  /* Prevent interaction */
  cursor: not-allowed;
  background-color: var(--color-main-4);
}

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

.autocomplete-container {
  /*the container must be positioned relative:*/
  position: relative;
}

.autocomplete-container input {
  width: 100%;
}

.autocomplete-items {
  position: absolute;
  border: 2px solid rgba(0, 0, 0, 0.8);
  box-shadow: 0px 2px 10px 2px rgba(0, 0, 0, 0.1);
  border-top: none;
  z-index: 99;
  /*position the autocomplete items to be the same width as the container:*/
  top: calc(100% + 2px);
  left: 0;
  right: 0;

  background-color: rgba(24, 24, 24, 0.99);
  color: #ddd;
}

.autocomplete-items div {
  padding: 10px;
  cursor: pointer;
}

.autocomplete-items div:hover {
  /*when hovering an item:*/
  color: #074d60;
  background-color: rgba(255, 255, 255, 0.99);
}

.autocomplete-items .autocomplete-active {
  /*when navigating through the items using the arrow keys:*/
  background-color: rgba(0, 0, 0, 0.1);
}

.clear-button {
  color: #E03E47;
  cursor: pointer;

  position: absolute;
  right: 5px;
  top: 0;

  height: 100%;
  display: none;
  align-items: center;
}

.clear-button.visible {
  display: flex;
}

.clear-button:hover {
  color: rgba(0, 0, 0, 0.6);
}

.justify {
  word-break: break-word;
  overflow-wrap: break-word;
  word-wrap: break-word;

  text-align: justify;
}

.comment_div {
  display: flex;
  flex: 1;
  justify-content: space-between;
  margin: 10px 0 0 5px;
  gap: 7px;
}

.comment_div .comment_text {
  display: flex;
  flex: 1;
  min-width: 125px;
  margin: 5px;

  word-break: break-word;
  overflow-wrap: break-word;
  word-wrap: break-word;

  text-align: justify;
}

.columns_container {
  display: flex;
  flex: 1;
  justify-content: flex-start;
  align-items: stretch;
  gap: 5px;
  flex-wrap: nowrap;
}

.listing_column {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 5px;
}

.listing_column>div {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  padding: 3px 5px 2px 5px;
  gap: 7px;
  font-size: 0.8em;
  height: 40px;
}

.listing_column>div:first-of-type {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  padding: 3px 5px 2px 5px;
  gap: 7px;
  font-size: 1em;
  color: var(--bc_light_blue);
  text-wrap-mode: nowrap;
  border-bottom: 1px solid var(--color-main-2);
  max-height: max-content;
}

.listing_column:last-of-type {
  display: flex;
  flex: 0;
  flex-direction: column;
  gap: 5px;
  align-items: center;
  justify-content: center;
}

.listing_column:not(:last-of-type) {
  border-right: 1px solid var(--color-main-2);
}



#AOI_results {
  position: relative !important;
  display: flex;
  flex-direction: column;
  flex: 1;
  justify-content: center;
  padding: 5px 10px 5px 10px;
  flex-wrap: nowrap;
  min-height: 200px;
}

.width_50 {
  width: 50px !important;
}

.width_100 {
  width: 100px !important;
}

.width_150,
.mfa_totp_sign {
  width: 150px !important;
}

.width_200 {
  width: 200px !important;
}

.width_400 {
  width: 400px !important;
}

.width_100pct {
  width: 100%;
}

.width_1100 {
  width: 1100px;
}

.aoi_msg_line {
  display: flex;
  flex: 1;
  position: relative;
  margin-bottom: 10px;
}

.aoi_msg_line li {
  margin-bottom: 10px;
}

.aoi_msg_line li p {
  margin-top: 0 !important;
}

.aoi_msg_line hr {
  align-self: left;
  width: 60%;
  margin: 10px 0 10px 10px;
}

hr.incident_item {
  width: 60%;
  height: 1px;
  border: none !important;
  margin: 10px 0 10px 10px;
}

.tubular_border {
  border: 2px solid #aaa;
  border-radius: 10px;
  box-shadow:
    inset 0 0 6px rgba(255, 255, 255, 0.5),
    inset 0 0 6px rgba(0, 0, 0, 0.2),
    0 0 8px rgba(0, 0, 0, 0.4);
}

.item_buttons {
  display: flex;
  justify-content: flex-start;
}

.vert_scroll_100 {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  max-height: 200px;
  padding-right: 5px;
  margin: 10px 0 10px 10px;
  overflow-y: auto;
  overflow-x: hidden;
}

.vert_scroll_1000 {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  max-height: 1000px;
  padding-right: 5px;
  margin: 10px 0 10px 10px;
  overflow-y: auto;
  overflow-x: hidden;
}

.position_relative {
  position: relative;
}

.overflow_x_hidden {
  overflow-x: hidden;
}

.brand_highlight {
  color: var(--bc_light_blue);
}

wa-tab {
  position: relative;
}

wa-tab[active] .tab_title {
  background-color: var(--color-main-1);
  border-radius: 9px;
  border: none;
  box-shadow: var(--box_shadow);
}

fieldset.fs_boards.options label {
  font-size: 0.9em;
}

.option_result {
  display: flex;
  flex: 1;
  justify-content: center;
  align-content: center;
  flex-wrap: wrap;
  text-align: center;
  align-items: center;
  width: 40px;
}

.message_banner {
  display: flex;
  flex-direction: column;
  font-weight: bold;
  justify-content: left;
  color: var(--color-accent-1);
  padding: 10px;
  /*margin: 10px 0 10px 0;*/
  position: relative;
  border: 1px dotted var(--color-accent-5);
  border-radius: 9px;
  box-shadow: var(--box_shadow);
  gap: 10px;
}

/*
.message_banner.status {
  background-color: var(--bc_dark_blue);
}
*/

.message_banner.warning {
  background-color: #a25e06;
}

select.warning {
  background-color: #a25e06;
}


.message_banner.nonprod {
  background-color: #4e16daee;
  color: #fff;
}

.message_banner.ttx {
  background-color: #303030;
  color: #dbb406;
}

.message_banner.legal_hold {
  background-color: var(--color-main-1);
  color: #fe0856;
}

.element_scale_up {
  transform: scale(1.5);
  /* Scale the marker 1.5x */
  transition: all 0.3s ease-in-out;
  /* Smooth transition */
}

.reveal {
  display: inline-block;
  opacity: 0;
  transition: opacity 0.5s ease-in;
  /* Add transition for the reveal effect */
}

.reveal.visible,
.reveal_container span.visible,
.opac1 {
  opacity: 1 !important;
  /* Make the text visible */
}

.reveal_container {
  display: inline-flex;
  /* Use inline-flex for flexbox layout */
  flex-direction: row;
  /* Set the desired flex direction */
}

.reveal_container span {
  display: inline-block;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.fa_icon {
  padding: 5px;
}

fieldset.modules label {
  border: #03c3f8 1px solid;
  border-radius: 5px;
  padding: 2px 6px;
  margin: 2px;
}

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

.polyline_weight_up {
  stroke-width: 5;
  transition: all 0.3s ease-in-out;
  opacity: 1;
}

/* Base pane for the entire map */
.leaflet-pane {
  z-index: 50 !important;
}

/* Tile layer pane (for map tiles) */
.leaflet-tile-pane {
  z-index: 51 !important;
}

/* Overlay layer pane (e.g., polygons, polylines) */
.leaflet-overlay-pane {
  z-index: 52 !important;
}

/* Shadow pane (for marker shadows, if any) */
.leaflet-shadow-pane {
  z-index: 53 !important;
}

/* Marker pane (for markers) */
.leaflet-marker-pane {
  z-index: 54 !important;
}

/* Tooltip pane (for tooltips) */
.leaflet-tooltip-pane {
  z-index: 55 !important;
}

/* Popup pane (for popups) */
.leaflet-popup-pane {
  z-index: 56 !important;
}

.leaflet-popup-pane li::before {
  top: inherit;
}

.leaflet-left,
.leaflet-right {
  z-index: 57 !important;
}

.leaflet-control {
  z-index: 57 !important;
}

.leaflet-tile {
  outline: 1px solid transparent;

  /*Forces GPU*/
  transform: translateZ(0);
  will-change: transform;
}

.leaflet-container img.leaflet-tile {
  /* See: https://bugs.chromium.org/p/chromium/issues/detail?id=600120 */
  mix-blend-mode: normal;
  /*leaflet.css had it to lighten-plus*/
}


.timeline_center_lane {
  min-width: 48px;
}

.secret_div {
  display: flex;
  flex-direction: row;
  padding: 2px 5px;
}

.secret_icons {
  cursor: pointer;
  margin-left: 5px;
}

.float_just_above {
  position: absolute;
  top: -21px;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 500;
  pointer-events: none;
}


@keyframes spotlight {
  0% {
    left: -50%;
  }

  100% {
    left: 100%;
  }
}

@keyframes beat {

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

  95% {
    transform: scale(1.05);
  }
}

.beat_effect {
  display: inline-block;
  animation: beat .5s ease-in-out;
  /* Adjust the duration as needed */
}

.fs_comments table,
th,
td {
  border: 1px solid #ddd;
  border-collapse: collapse;
}

.opensans {
  font-family: "Open Sans", sans-serif;
}

html {
  scroll-behavior: smooth;
}

.bc_user_option,
.bc_tenant_option {
  margin: 10px 10px 10px 0px;
}

.leaflet-control-attribution {
  background-color: var(--color-accent-5) !important;
  color: var(--color-main-2) !important;
}

.leaflet-control-attribution>a>.leaflet-attribution-flag {
  display: none !important;
}

.mermaid_container {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: calc(70vh);
  overflow: auto;
  padding: 1rem 0;
}

.mermaid_container .mermaid {
  display: block;
  /* critical: allows content width to define size */
}

.mermaid_container .mermaid svg {
  transition: width 1s ease;
}

.graph_goto_link {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 5px 10px;
  cursor: pointer;
}

#toc {
  padding: 15px;
  margin-bottom: 20px;
  float: left;
}

#toc p {
  text-align: justify;
}

#toc h2.toc {
  margin-top: 0;
}

#toc ul.toc {
  list-style: none;
  padding-left: 0;
}

#toc li.toc {
  margin: 10px 0;
}

#toc a.toc {
  text-decoration: none;
  color: var(--color-accent-3);
}

#toc a.toc:hover {
  text-decoration: underline;
}

#toc a.toc.open {
  color: var(--bc_light_blue);
}

#toc .toc_collapsible {
  cursor: pointer;
  font-weight: bold;
  color: var(--color-accent-3);
  margin: 10px 0;
  transition: color 0.3s ease;
}

#toc .toc_collapsible.open {
  color: var(--bc_light_blue);
}

#toc .toc_collapsible.toc_search-match .toc_content {
  display: block !important;
}


#toc ul.open>li.toc {
  display: block !important;
}

#toc .toc_nested {
  display: none;
  margin-left: 20px;
  transition: max-height 0.5s ease, opacity 0.3s ease;
  max-height: 0;
  opacity: 0;
  overflow-y: auto;
}

#toc .toc_nested.open {
  display: block;
  max-height: 2000px;
  opacity: 1;
  border-top: 1px dotted var(--color-accent-1);
}

#toc a.internal.open {
  color: var(--bc_light_blue);
}

#toc .toc_first-level {
  display: block;
  /* Ensure the first-level items are always displayed */
}

#toc .toc_toggle-icon {
  margin-right: 5px;
  font-weight: bold;
  color: var(--color-accent-3);
}

#toc .toc_content {
  background: var(--color-main-1);
  padding: 5px 20px;
  border: 1px solid var(--bc_light_blue);
  border-radius: 8px;
  margin: 10px 10px 10px 0;
  display: none;
  /* Hidden by default */
}

#toc .toc_content.open {
  display: block;
  /* Shown when matched */
}

#toc-no-results {
  display: none;
  color: red;
  font-weight: bold;
  margin-top: 10px;
}

.toc_search-match {
  border-left: 3px solid orange !important;
  border-right: 3px solid orange !important;
  padding: 5px;
}

.doc_inside_container h1,
h2 {
  color: var(--color-accent-1);
}

.doc_inside_container code {
  background-color: var(--color-main-5);
  padding: 2px 5px;
  border-radius: 5px;
  color: var(--bc_light_blue);
}

.doc_inside_container table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
}

.doc_inside_container th,
td {
  border: 1px solid var(--color-main-3);
  padding: 8px;
  text-align: left;
}

.doc_inside_container th {
  background-color: var(--color-main-3);
}

.doc_inside_container {
  padding: 10px;
  background: var(--color-main-2);
  border-radius: 10px;
  line-height: 1.6;
}

.audit_logs {
  display: flex;
  flex: 1;
}

.audit_logs td {
  max-width: 100px;
  text-align: center;
  border-collapse: collapse;
  word-wrap: break-word;
  /* Ensure the content wraps within the cell */
  white-space: normal;
  /* Allow the content to wrap */
}

.audit_logs tr:hover {
  background-color: var(--color-main-2);
}

.brand_border {
  border-color: var(--bc_light_blue);
}

i[class] {
  pointer-events: auto;
}

.pdf_table {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 2px;
  margin: 0px;
  font-size: 8px;
}


.ajax_btn {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: background 0.2s ease;
}

/* disabled or loading state */
.ajax_btn.loading,
.ajax_btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

/* spinner element */
.ajax_btn .spinner {
  box-sizing: border-box;
  display: inline-block;
  width: 1em;
  height: 1em;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  vertical-align: middle;
  margin-left: 0.5em;
  animation: spin 0.6s linear infinite;
}

.copyable_container {
  display: flex;
  flex-direction: row;
  align-items: center;
  position: relative;
  width: 100%;
  /*padding: 5px;*/
  gap: 10px;
}

.copyable_container i.copy_link {
  flex-shrink: 0;
  flex-grow: 0;
  width: auto;
  /* or a fixed width like 1.5em */
  display: inline-flex;
  /* ensures proper alignment in flex context */
  align-items: center;
  justify-content: center;
}

p_middle {
  display: flex;
  align-items: center;
  gap: 10px;
}

.signed canvas {
  display: block;
  width: 100%;
  /* scale to parent width */
  height: 100px;
  /* keep aspect ratio from canvas width/height attributes */
  max-width: 100%;
}

wa-scroller[orientation='vertical'] {
  /*height: auto;*/
  /*flex: 0;*/
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}


@media (max-width: 768px) {
  #toc {
    float: none;
    width: 100%;
  }

  .toc_nested {
    margin-left: 10px;
  }
}

.fancy-fire {
  --fa-primary-color: #ff5500;
  --fa-secondary-color: #ffcc00;
  --fa-secondary-opacity: 0.8;
  filter: drop-shadow(0 0 2px #ff6600);
  transition: all 0.3s ease-in-out;
}

.fancy-meteor {
  --fa-primary-color: #3e2768;
  --fa-secondary-color: #4dd0ff;
  --fa-secondary-opacity: 0.8;
  filter: drop-shadow(0 0 2px #145871);
  transition: all 0.3s ease-in-out;
}

.pulse_hover {
  transition: transform 0.3s ease-in-out;
  display: inline-block;
  /* ensures transform behaves predictably */
}

.pulse_hover:hover {
  transform: scale(1.15);
}

[attention='pulse'] {
  animation: pulse 1.5s 10s 3;
}

wa-details::part(base) {
  background-color: var(--color-main-1);
}

.timeline_header wa-details::part(summary) {
  color: var(--bc_light_blue);
  font-weight: bold;
  font-size: 1.1em;
}

wa-details::part(summary),
wa-details::part(content) {
  color: var(--color-accent-2);
}

wa-details.thinner::part(header) {
  padding: 6px;
}

.formy wa-details::part(header) {
  background-color: var(--color-select-bg);
}

details {
  border-color: var(--color-accent-4);
}

.list_case_name_div {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding: 5px;
  width: 200px;
}

.list_case_name_text {
  white-space: nowrap;
  text-overflow: ellipsis;
  /*width: 200px;*/
  overflow: hidden;
}

::-webkit-scrollbar {
  width: 20px;
  /* vertical scrollbar */
  height: 20px;
  /* horizontal scrollbar */
}

.pretty_json {
  white-space: pre;
  /* or pre-wrap */
  white-space: pre-wrap;
  /* keeps indentation, wraps long lines */
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  overflow-x: auto;
  margin: 0;
}

#freshworks-container iframe {
  border: 1px solid var(--color-main-3);
  border-radius: 9px;
}

input[type="checkbox"] {

  &:checked,
  &:indeterminate {
    color: var(--bc_light_blue);
    background-color: var(--color-main-3);
  }
}

@media print {

  @page {
    size: auto;
    margin: 10mm;
  }

  body {
    margin: 0;
    font-family: system-ui, sans-serif;
  }

  .printable_area {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* Hide UI-only elements */
  .no_print,
  .no_print * {
    display: none !important;
  }
}

/*MAke .hide_narrow_screen hide on narrow screens*/
@media (max-width: 600px) {
  .hide_narrow_screen {
    display: none !important;
  }
}

@media (max-height: 800px) {
  .hide_short_screen {
    display: none !important;
  }
}