.bus_school_map_root {
  --bus_school_map_orange: #bf5700;
  --bus_school_map_turquoise: #7dcdcd;
  --bus_school_map_ink: #193341;
  position: relative;
  width: 100%;
  color: var(--bus_school_map_ink);
  background: #fbfaf7;
  padding: clamp(16px, 3vw, 36px);
  box-sizing: border-box;
  line-height: 1.55;
}
.bus_school_map_root *, .bus_school_map_root *::before, .bus_school_map_root *::after { box-sizing: border-box; }
.bus_school_map_root [hidden] { display: none !important; }
.bus_school_map_root .bus_school_map_title, .bus_school_map_directory h3 { color: var(--bus_school_map_orange); margin: 0 0 .6em; }
.bus_school_map_intro { margin: 0 0 .5em; }
.bus_school_map_skip { color: var(--bus_school_map_ink); text-decoration: underline; }
.bus_school_map_canvas { position: relative; max-width: 650px; margin: 28px auto; isolation: isolate; }
.bus_school_map_root .bus_school_map_image { display: block; width: 100%; height: auto; margin: 0; }
.bus_school_map_root .bus_school_map_marker {
  position: absolute; transform: translate(-50%, -100%); width: 44px; height: 44px;
  padding: 0; border: 0; border-radius: 8px; background: transparent; box-shadow: none;
  cursor: pointer; display: grid; place-items: center; color: var(--bus_school_map_ink); z-index: 1;
}
.bus_school_map_pin {
  display: grid; place-items: center; width: 30px; height: 30px;
  background: var(--bus_school_map_turquoise); border: 2px solid #193341;
  border-radius: 50% 50% 50% 0; transform: rotate(-45deg);
  box-shadow: 0 2px 3px #19334130;
}
.bus_school_map_pin_text { display: block; transform: rotate(45deg); font: 700 12px/1 system-ui, sans-serif; }
.bus_school_map_marker:hover, .bus_school_map_marker:focus-visible, .bus_school_map_marker[aria-expanded="true"] { z-index: 3; }
.bus_school_map_marker:hover .bus_school_map_pin { background: #aee2e0; border-width: 3px; }
.bus_school_map_marker[aria-expanded="true"] .bus_school_map_pin { background: #f49935; border-width: 3px; }
.bus_school_map_root :focus-visible { outline: 3px solid #193341; outline-offset: 4px; }
.bus_school_map_root .bus_school_map_popup {
  position: absolute; z-index: 5; width: min(320px, 100%); max-height: 340px; overflow: auto;
  background: #fff; border: 2px solid #193341; border-top: 5px solid #f49935;
  padding: 14px 18px; box-shadow: 0 6px 18px #19334122; overflow-wrap: anywhere;
}
.bus_school_map_popup ul { margin: 10px 0 0; padding: 0 0 0 1.2em; }
.bus_school_map_popup li + li { margin-top: .6em; }
.bus_school_map_root .bus_school_map_close { display: block; margin-left: auto; background: #e0efef; color: #193341; border: 1px solid #193341; border-radius: 0; padding: 8px 12px; min-height: 44px; font: inherit; cursor: pointer; }
.bus_school_map_directory { border-top: 2px solid #f49935; padding-top: 24px; margin-top: 24px; }
.bus_school_map_directory ul { list-style: none; padding: 0; margin: 0; columns: 2 260px; column-gap: 32px; }
.bus_school_map_directory li { break-inside: avoid; border-bottom: 1px solid #19334125; padding: 10px 0; overflow-wrap: anywhere; }
.bus_school_map_directory li span { display: block; }
.bus_school_map_empty { padding: 16px 0; font-weight: 600; }
@media (max-width: 480px) { .bus_school_map_pin { width: 27px; height: 27px; } .bus_school_map_pin_text { font-size: 11px; } }
@media (forced-colors: active) { .bus_school_map_pin { background: ButtonFace; color: ButtonText; border-color: ButtonText; } }