/*$colors_themes_light-background: $colors_ui_06 !default;
$colors_themes_light-text: $typeface_colors_default !default;
$colors_themes_light-border: $colors_lines_border !default;
    // divider
    // button colors

$colors_themes_light-background: $typeface_colors_default !default;
$colors_themes_light-text: $colors_ui_06 !default;
$colors_themes_light-border: $typeface_colors_default !default;
*/
/*
    themes

    light 
        light background, dark text

    dark
        dark background, light text

    alternate
        brand background, light(?) text

*/
button .icon:before {
  filter: brightness(0) saturate(100%) invert(32%) sepia(94%) saturate(1501%) hue-rotate(333deg) brightness(91%) contrast(106%);
  opacity: 0.66;
}

button.button-primary {
  font-weight: 400;
}

button.button-primary .icon:before {
  filter: brightness(100);
  opacity: 0.66;
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Roboto;
  font-weight: 300;
  font-size: 14px;
  user-select: none;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  border: unset;
  color: inherit;
  display: inline-flex;
  text-align: center;
  align-items: center;
  cursor: default;
  background-color: unset;
  padding-block: unset;
  padding-inline: unset;
  border-width: unset;
  border-style: unset;
  border-color: unset;
  border-image: initial;
  padding: 0.5rem;
  min-width: 9rem;
  font-family: inherit;
  font-size: inherit;
}

/*$colors_themes_light-background: $colors_ui_06 !default;
$colors_themes_light-text: $typeface_colors_default !default;
$colors_themes_light-border: $colors_lines_border !default;
    // divider
    // button colors

$colors_themes_light-background: $typeface_colors_default !default;
$colors_themes_light-text: $colors_ui_06 !default;
$colors_themes_light-border: $typeface_colors_default !default;
*/
/*
    themes

    light 
        light background, dark text

    dark
        dark background, light text

    alternate
        brand background, light(?) text

*/
h1, .heading1 {
  font-size: 2rem;
  font-weight: 400;
  color: #83292A;
}

h2, .heading2 {
  font-size: 1.75rem;
  font-weight: 600;
  color: #F33D3E;
}

h3, .heading3 {
  font-size: 1.5rem;
  font-weight: 400;
  color: #83292A;
}

h4, .heading4 {
  font-size: 1.25rem;
  font-weight: 600;
  color: #F33D3E;
}

h5, .heading5 {
  font-size: 1rem;
  font-weight: 400;
  color: #83292A;
}

h6, .heading6 {
  font-size: 0.8rem;
  font-weight: 600;
  color: #F33D3E;
}

body {
  font-family: Segoe UI, Tahoma, Geneva, Verdana, sans-serif;
  font-size: 1rem;
  font-weight: 400;
  color: #333;
}

.body1 {
  font-size: 1rem;
  font-weight: 400;
  color: #333;
}

.body2 {
  font-size: 0.8rem;
  font-weight: 400;
  color: #333;
}

caption, .caption {
  font-size: 0.8rem;
  font-weight: 400;
  color: #333;
}

/*$colors_themes_light-background: $colors_ui_06 !default;
$colors_themes_light-text: $typeface_colors_default !default;
$colors_themes_light-border: $colors_lines_border !default;
    // divider
    // button colors

$colors_themes_light-background: $typeface_colors_default !default;
$colors_themes_light-text: $colors_ui_06 !default;
$colors_themes_light-border: $typeface_colors_default !default;
*/
/*
    themes

    light 
        light background, dark text

    dark
        dark background, light text

    alternate
        brand background, light(?) text

*/
.textInput {
  min-width: 16rem;
  gap: 0.25rem;
  display: flex;
  flex-direction: column;
}
.textInput .inputContainer {
  height: 2.5rem;
  background: #FFF;
  border-width: 1px;
  border-style: solid;
  border-color: #7D7D7D;
  border-radius: 0.2rem;
  display: flex;
  justify-content: space-between;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  gap: 0.5rem;
}
.textInput .inputContainer input {
  border: none;
  background: none;
  outline: none;
  flex-grow: 1;
}
/*$colors_themes_light-background: $colors_ui_06 !default;
$colors_themes_light-text: $typeface_colors_default !default;
$colors_themes_light-border: $colors_lines_border !default;
    // divider
    // button colors

$colors_themes_light-background: $typeface_colors_default !default;
$colors_themes_light-text: $colors_ui_06 !default;
$colors_themes_light-border: $typeface_colors_default !default;
*/
/*
    themes

    light 
        light background, dark text

    dark
        dark background, light text

    alternate
        brand background, light(?) text

*/
button {
  border-radius: 0.2rem;
  display: inline-flex;
  justify-content: center;
  gap: 0.25rem;
  font-weight: 500;
  color: #83292A;
  min-width: 7rem;
  height: 2.5rem;
}
button.button-iconOnly {
  min-width: 2.5rem;
}
button.button-primary {
  color: #eee;
  background: #83292A;
  cursor: pointer;
}
button.button-primary.button-s {
  height: 2rem;
}
button.button-primary.button-m {
  min-width: 7rem;
  height: 2.5rem;
}
button.button-primary.button-l {
  min-width: 10rem;
  height: 4rem;
}
button.button-primary.button-hover, button.button-primary:hover {
  background: rgb(189.2645348837, 59.2354651163, 60.6802325581);
}
button.button-primary.button-disabled, button.button-primary[disabled=true], button.button-primary[disabled]:not([disabled=false]) {
  opacity: 0.5 !important;
  pointer-events: none;
  cursor: default;
}
button.button-primary.button-focus, button.button-primary:focus, button.button-primary[focus=true], button.button-primary[focus]:not([focus=false]) {
  outline: 4px rgba(243, 61, 62, 0.2) solid;
}
button.button-secondary {
  color: #83292A;
  border-width: 2px;
  border-style: solid;
  border-color: #83292A;
  border-radius: 0.2rem;
  cursor: pointer;
}
button.button-secondary.button-s {
  height: 2rem;
}
button.button-secondary.button-m {
  min-width: 7rem;
  height: 2.5rem;
}
button.button-secondary.button-l {
  min-width: 10rem;
  height: 4rem;
}
button.button-secondary.button-hover, button.button-secondary:hover {
  background: hsla(0, 0%, 0%, 0.05);
}
button.button-secondary.button-disabled, button.button-secondary[disabled=true], button.button-secondary[disabled]:not([disabled=false]) {
  opacity: 0.5 !important;
  pointer-events: none;
  cursor: default;
}
button.button-secondary.button-focus, button.button-secondary:focus, button.button-secondary[focus=true], button.button-secondary[focus]:not([focus=false]) {
  outline: 4px rgba(243, 61, 62, 0.2) solid;
}
button.button-tertiary {
  color: #83292A;
  cursor: pointer;
}
button.button-tertiary.button-s {
  height: 2rem;
}
button.button-tertiary.button-m {
  min-width: 7rem;
  height: 2.5rem;
}
button.button-tertiary.button-l {
  min-width: 10rem;
  height: 4rem;
}
button.button-tertiary.button-hover, button.button-tertiary:hover {
  background: hsla(0, 0%, 0%, 0.05);
}
button.button-tertiary.button-disabled, button.button-tertiary[disabled=true], button.button-tertiary[disabled]:not([disabled=false]) {
  opacity: 0.5 !important;
  pointer-events: none;
  cursor: default;
}
button.button-tertiary.button-focus, button.button-tertiary:focus, button.button-tertiary[focus=true], button.button-tertiary[focus]:not([focus=false]) {
  outline: 4px rgba(243, 61, 62, 0.2) solid;
}
button.button-s.button-iconOnly {
  min-width: 2rem;
}
button.button-m.button-iconOnly {
  min-width: 2.5rem;
}
button.button-l.button-iconOnly {
  min-width: 4rem;
}

/*$colors_themes_light-background: $colors_ui_06 !default;
$colors_themes_light-text: $typeface_colors_default !default;
$colors_themes_light-border: $colors_lines_border !default;
    // divider
    // button colors

$colors_themes_light-background: $typeface_colors_default !default;
$colors_themes_light-text: $colors_ui_06 !default;
$colors_themes_light-border: $typeface_colors_default !default;
*/
/*
    themes

    light 
        light background, dark text

    dark
        dark background, light text

    alternate
        brand background, light(?) text

*/
.entity {
  display: inline-block;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.25rem;
  font-size: 1rem;
}
.entity .icon {
  display: inline-flex;
  height: 1.25rem;
  width: 1.25rem;
}
.entity .icon:before {
  background: url("../img/Icons/Shared/Error.svg");
  background-size: contain;
  content: "";
  height: 1.25rem;
  width: 1.25rem;
  display: block;
}
.entity.entity-xs {
  font-size: 0.8rem;
}
.entity.entity-xs .icon, .entity.entity-xs .icon:before {
  height: 1rem;
  width: 1rem;
}
.entity.entity-s {
  font-size: 0.8rem;
}
.entity.entity-s .icon, .entity.entity-s .icon:before {
  height: 1rem;
  width: 1rem;
}
.entity.entity-l {
  font-size: 1.25rem;
}
.entity.entity-l .icon, .entity.entity-l .icon:before {
  height: 1.5625rem;
  width: 1.5625rem;
}
.entity.entity-xl {
  font-size: 1.5rem;
}
.entity.entity-xl .icon, .entity.entity-xl .icon:before {
  height: 1.875rem;
  width: 1.875rem;
}

.sharedIcon .icon.icon-muted:before {
  filter: brightness(0.9) saturate(100%);
}
.sharedIcon.sharedIcon-Cross .icon:before {
  background-image: url("../img/Icons/Shared/Mono/Cross.svg");
}
.sharedIcon.sharedIcon-Filter .icon:before {
  background-image: url("../img/Icons/Shared/Mono/Filter.svg");
}
.sharedIcon.sharedIcon-Identity .icon:before {
  background-image: url("../img/Icons/Shared/Mono/Identity.svg");
}
.sharedIcon.sharedIcon-Location .icon:before {
  background-image: url("../img/Icons/Shared/Mono/Location.svg");
}
.sharedIcon.sharedIcon-Next .icon:before {
  background-image: url("../img/Icons/Shared/Mono/Next.svg");
}
.sharedIcon.sharedIcon-Previous .icon:before {
  background-image: url("../img/Icons/Shared/Mono/Previous.svg");
}
.sharedIcon.sharedIcon-Print .icon:before {
  background-image: url("../img/Icons/Shared/Mono/Print.svg");
}
.sharedIcon.sharedIcon-Refresh .icon:before {
  background-image: url("../img/Icons/Shared/Mono/Refresh.svg");
}
.sharedIcon.sharedIcon-Search .icon:before {
  background-image: url("../img/Icons/Shared/Mono/Search.svg");
}
.sharedIcon.sharedIcon-Tick .icon:before {
  background-image: url("../img/Icons/Shared/Mono/Tick.svg");
}
.sharedIcon.sharedIcon-Twx .icon:before {
  background-image: url("../img/Icons/Shared/Mono/Twx.svg");
}
.sharedIcon.sharedIcon-Twx .icon.icon-muted:before {
  background-image: url("../img/Icons/Shared/Muted/Twx.svg");
}
.sharedIcon.sharedIcon-User .icon:before {
  background-image: url("../img/Icons/Shared/Mono/User.svg");
}
.sharedIcon.sharedIcon-User .icon.icon-muted:before {
  background-image: url("../img/Icons/Shared/Muted/User.svg");
}
.sharedIcon.sharedIcon-MapKey .icon:before {
  background-image: url("../img/Icons/Shared/Mono/MapKey.svg");
}
.sharedIcon.sharedIcon-MapKey .icon.icon-muted:before {
  background-image: url("../img/Icons/Shared/Muted/MapKey.svg");
}
.sharedIcon.sharedIcon-Phone .icon:before {
  background-image: url("../img/Icons/Shared/Mono/Phone.svg");
}
.sharedIcon.sharedIcon-Email .icon:before {
  background-image: url("../img/Icons/Shared/Mono/Email.svg");
}

.actionGroup.actionGroup-GoJ .icon:before {
  background-image: url("../img/Icons/ActionGroups/GoJ.svg");
}
.actionGroup.actionGroup-CivilWorks .icon:before {
  background-image: url("../img/Icons/ActionGroups/CivilWorks.svg");
}
.actionGroup.actionGroup-Cleaning .icon:before {
  background-image: url("../img/Icons/ActionGroups/Cleaning.svg");
}
.actionGroup.actionGroup-Drainage .icon:before {
  background-image: url("../img/Icons/ActionGroups/Drainage.svg");
}
.actionGroup.actionGroup-DutyOfficer .icon:before {
  background-image: url("../img/Icons/ActionGroups/DutyOfficer.svg");
}
.actionGroup.actionGroup-Engineering .icon:before {
  background-image: url("../img/Icons/ActionGroups/Engineering.svg");
}
.actionGroup.actionGroup-Error .icon:before {
  background-image: url("../img/Icons/Shared/Error.svg");
}
.actionGroup.actionGroup-Forestry .icon:before {
  background-image: url("../img/Icons/ActionGroups/Forestry.svg");
}
.actionGroup.actionGroup-Highways .icon:before {
  background-image: url("../img/Icons/ActionGroups/Highways.svg");
}
.actionGroup.actionGroup-Parish .icon:before {
  background-image: url("../img/Icons/ActionGroups/Parish.svg");
}
.actionGroup.actionGroup-Traffic .icon:before {
  background-image: url("../img/Icons/ActionGroups/Traffic.svg");
}
.actionGroup.actionGroup-Unassigned .icon:before {
  background-image: url("../img/Icons/ActionGroups/Unassigned.svg");
}
.actionGroup.actionGroup-Grouville .icon:before {
  background-image: url("../img/Icons/ActionGroups/Parishes/Mono/Grouville.svg");
}
.actionGroup.actionGroup-StBrelade .icon:before {
  background-image: url("../img/Icons/ActionGroups/Parishes/Mono/StBrelade.svg");
}
.actionGroup.actionGroup-StClement .icon:before {
  background-image: url("../img/Icons/ActionGroups/Parishes/Mono/StClement.svg");
}
.actionGroup.actionGroup-StHelier .icon:before {
  background-image: url("../img/Icons/ActionGroups/Parishes/Mono/StHelier.svg");
}
.actionGroup.actionGroup-StJohn .icon:before {
  background-image: url("../img/Icons/ActionGroups/Parishes/Mono/StJohn.svg");
}
.actionGroup.actionGroup-StLawrence .icon:before {
  background-image: url("../img/Icons/ActionGroups/Parishes/Mono/StLawrence.svg");
}
.actionGroup.actionGroup-StMartin .icon:before {
  background-image: url("../img/Icons/ActionGroups/Parishes/Mono/StMartin.svg");
}
.actionGroup.actionGroup-StMary .icon:before {
  background-image: url("../img/Icons/ActionGroups/Parishes/Mono/StMary.svg");
}
.actionGroup.actionGroup-StOuen .icon:before {
  background-image: url("../img/Icons/ActionGroups/Parishes/Mono/StOuen.svg");
}
.actionGroup.actionGroup-StPeter .icon:before {
  background-image: url("../img/Icons/ActionGroups/Parishes/Mono/StPeter.svg");
}
.actionGroup.actionGroup-StSaviour .icon:before {
  background-image: url("../img/Icons/ActionGroups/Parishes/Mono/StSaviour.svg");
}
.actionGroup.actionGroup-Trinity .icon:before {
  background-image: url("../img/Icons/ActionGroups/Parishes/Mono/Trinity.svg");
}
.actionGroup.actionGroup-Grouville .icon.icon-colour:before {
  background-image: url("../img/Icons/ActionGroups/Parishes/Colour/Grouville.svg");
}
.actionGroup.actionGroup-StBrelade .icon.icon-colour:before {
  background-image: url("../img/Icons/ActionGroups/Parishes/Colour/StBrelade.svg");
}
.actionGroup.actionGroup-StClement .icon.icon-colour:before {
  background-image: url("../img/Icons/ActionGroups/Parishes/Colour/StClement.svg");
}
.actionGroup.actionGroup-StHelier .icon.icon-colour:before {
  background-image: url("../img/Icons/ActionGroups/Parishes/Colour/StHelier.svg");
}
.actionGroup.actionGroup-StJohn .icon.icon-colour:before {
  background-image: url("../img/Icons/ActionGroups/Parishes/Colour/StJohn.svg");
}
.actionGroup.actionGroup-StLawrence .icon.icon-colour:before {
  background-image: url("../img/Icons/ActionGroups/Parishes/Colour/StLawrence.svg");
}
.actionGroup.actionGroup-StMartin .icon.icon-colour:before {
  background-image: url("../img/Icons/ActionGroups/Parishes/Colour/StMartin.svg");
}
.actionGroup.actionGroup-StMary .icon.icon-colour:before {
  background-image: url("../img/Icons/ActionGroups/Parishes/Colour/StMary.svg");
}
.actionGroup.actionGroup-StOuen .icon.icon-colour:before {
  background-image: url("../img/Icons/ActionGroups/Parishes/Colour/StOuen.svg");
}
.actionGroup.actionGroup-StPeter .icon.icon-colour:before {
  background-image: url("../img/Icons/ActionGroups/Parishes/Colour/StPeter.svg");
}
.actionGroup.actionGroup-StSaviour .icon.icon-colour:before {
  background-image: url("../img/Icons/ActionGroups/Parishes/Colour/StSaviour.svg");
}
.actionGroup.actionGroup-Trinity .icon.icon-colour:before {
  background-image: url("../img/Icons/ActionGroups/Parishes/Colour/Trinity.svg");
}

.incidentSeverity.incidentSeverity-Low .icon:before {
  background-image: url("../img/Icons/IncidentSeverities/Mono/Low.svg");
}
.incidentSeverity.incidentSeverity-Low .icon.icon-colour:before {
  background-image: url("../img/Icons/IncidentSeverities/Colour/Low.svg");
}
.incidentSeverity.incidentSeverity-Low .icon.icon-simple:before {
  background-image: url("../img/Icons/IncidentSeverities/Simple/Low.svg");
}
.incidentSeverity.incidentSeverity-Low .icon.icon-outline:before {
  background-image: url("../img/Icons/IncidentSeverities/SimpleOutline/Low.svg");
}
.incidentSeverity.incidentSeverity-Medium .icon:before {
  background-image: url("../img/Icons/IncidentSeverities/Mono/Medium.svg");
}
.incidentSeverity.incidentSeverity-Medium .icon.icon-colour:before {
  background-image: url("../img/Icons/IncidentSeverities/Colour/Medium.svg");
}
.incidentSeverity.incidentSeverity-Medium .icon.icon-simple:before {
  background-image: url("../img/Icons/IncidentSeverities/Simple/Medium.svg");
}
.incidentSeverity.incidentSeverity-Medium .icon.icon-outline:before {
  background-image: url("../img/Icons/IncidentSeverities/SimpleOutline/Medium.svg");
}
.incidentSeverity.incidentSeverity-Severe .icon:before {
  background-image: url("../img/Icons/IncidentSeverities/Mono/Severe.svg");
}
.incidentSeverity.incidentSeverity-Severe .icon.icon-colour:before {
  background-image: url("../img/Icons/IncidentSeverities/Colour/Severe.svg");
}
.incidentSeverity.incidentSeverity-Severe .icon.icon-simple:before {
  background-image: url("../img/Icons/IncidentSeverities/Simple/Severe.svg");
}
.incidentSeverity.incidentSeverity-Severe .icon.icon-outline:before {
  background-image: url("../img/Icons/IncidentSeverities/SimpleOutline/Severe.svg");
}

.incidentType.incidentType-BuildingDamage .icon:before {
  background-image: url("../img/Icons/IncidentTypes/Colour/BuildingDamage.svg");
}
.incidentType.incidentType-Debris .icon:before {
  background-image: url("../img/Icons/IncidentTypes/Colour/Debris.svg");
}
.incidentType.incidentType-Ice .icon:before {
  background-image: url("../img/Icons/IncidentTypes/Colour/Ice.svg");
}
.incidentType.incidentType-InfrastructureDamage .icon:before {
  background-image: url("../img/Icons/IncidentTypes/Colour/InfrastructureDamage.svg");
}
.incidentType.incidentType-Other .icon:before {
  background-image: url("../img/Icons/IncidentTypes/Colour/Other.svg");
}
.incidentType.incidentType-Error .icon:before {
  background-image: url("../img/Icons/Shared/Error.svg");
}
.incidentType.incidentType-Seawater .icon:before {
  background-image: url("../img/Icons/IncidentTypes/Colour/Seawater.svg");
}
.incidentType.incidentType-Snow .icon:before {
  background-image: url("../img/Icons/IncidentTypes/Colour/Snow.svg");
}
.incidentType.incidentType-Trees .icon:before {
  background-image: url("../img/Icons/IncidentTypes/Colour/Trees.svg");
}
.incidentType.incidentType-Water .icon:before {
  background-image: url("../img/Icons/IncidentTypes/Colour/Water.svg");
}
.incidentType.incidentType-BuildingDamage .icon.icon-mono:before {
  background-image: url("../img/Icons/IncidentTypes/Mono/BuildingDamage.svg");
}
.incidentType.incidentType-Debris .icon.icon-mono:before {
  background-image: url("../img/Icons/IncidentTypes/Mono/Debris.svg");
}
.incidentType.incidentType-Ice .icon.icon-mono:before {
  background-image: url("../img/Icons/IncidentTypes/Mono/Ice.svg");
}
.incidentType.incidentType-InfrastructureDamage .icon.icon-mono:before {
  background-image: url("../img/Icons/IncidentTypes/Mono/InfrastructureDamage.svg");
}
.incidentType.incidentType-Other .icon.icon-mono:before {
  background-image: url("../img/Icons/IncidentTypes/Mono/Other.svg");
}
.incidentType.incidentType-Seawater .icon.icon-mono:before {
  background-image: url("../img/Icons/IncidentTypes/Mono/Seawater.svg");
}
.incidentType.incidentType-Snow .icon.icon-mono:before {
  background-image: url("../img/Icons/IncidentTypes/Mono/Snow.svg");
}
.incidentType.incidentType-Trees .icon.icon-mono:before {
  background-image: url("../img/Icons/IncidentTypes/Mono/Trees.svg");
}
.incidentType.incidentType-Water .icon.icon-mono:before {
  background-image: url("../img/Icons/IncidentTypes/Mono/Water.svg");
}
.incidentType.incidentType-BuildingDamage .icon.icon-outline:before {
  background-image: url("../img/Icons/IncidentTypes/Outline/BuildingDamage.svg");
}
.incidentType.incidentType-Debris .icon.icon-outline:before {
  background-image: url("../img/Icons/IncidentTypes/Outline/Debris.svg");
}
.incidentType.incidentType-Ice .icon.icon-outline:before {
  background-image: url("../img/Icons/IncidentTypes/Outline/Ice.svg");
}
.incidentType.incidentType-InfrastructureDamage .icon.icon-outline:before {
  background-image: url("../img/Icons/IncidentTypes/Outline/InfrastructureDamage.svg");
}
.incidentType.incidentType-Other .icon.icon-outline:before {
  background-image: url("../img/Icons/IncidentTypes/Outline/Other.svg");
}
.incidentType.incidentType-Seawater .icon.icon-outline:before {
  background-image: url("../img/Icons/IncidentTypes/Outline/Seawater.svg");
}
.incidentType.incidentType-Snow .icon.icon-outline:before {
  background-image: url("../img/Icons/IncidentTypes/Outline/Snow.svg");
}
.incidentType.incidentType-Trees .icon.icon-outline:before {
  background-image: url("../img/Icons/IncidentTypes/Outline/Trees.svg");
}
.incidentType.incidentType-Water .icon.icon-outline:before {
  background-image: url("../img/Icons/IncidentTypes/Outline/Water.svg");
}

.remediationPriority.remediationPriority-Low .icon:before {
  background-image: url("../img/Icons/RemediationPriority/Mono/Low.svg");
}
.remediationPriority.remediationPriority-Low .icon.icon-colour:before {
  background-image: url("../img/Icons/RemediationPriority/Colour/Low.svg");
}
.remediationPriority.remediationPriority-Medium .icon:before {
  background-image: url("../img/Icons/RemediationPriority/Mono/Medium.svg");
}
.remediationPriority.remediationPriority-Medium .icon.icon-colour:before {
  background-image: url("../img/Icons/RemediationPriority/Colour/Medium.svg");
}
.remediationPriority.remediationPriority-High .icon:before {
  background-image: url("../img/Icons/RemediationPriority/Mono/High.svg");
}
.remediationPriority.remediationPriority-High .icon.icon-colour:before {
  background-image: url("../img/Icons/RemediationPriority/Colour/High.svg");
}

.event.event .icon:before {
  background-image: url("../img/Icons/Events/Event.svg");
}
.event.event-Ongoing .icon:before {
  background-image: url("../img/Icons/Events/EventCurrent.svg");
}
.event.event-Finished .icon:before {
  background-image: url("../img/Icons/Events/EventPast.svg");
}

.status.status-Ongoing .icon:before {
  background-image: url("../img/Icons/Statuses/Colour/Ongoing.svg");
}
.status.status-Ongoing .icon.icon-mono:before {
  background-image: url("../img/Icons/Statuses/Mono/Ongoing.svg");
}
.status.status-Ongoing .icon.icon-outline:before {
  background-image: url("../img/Icons/Statuses/Outline/Ongoing.svg");
}
.status.status-InProgress .icon:before {
  background-image: url("../img/Icons/Statuses/Colour/In-Progress.svg");
}
.status.status-InProgress .icon.icon-mono:before {
  background-image: url("../img/Icons/Statuses/Mono/In-Progress.svg");
}
.status.status-InProgress .icon.icon-outline:before {
  background-image: url("../img/Icons/Statuses/Outline/In-Progress.svg");
}
.status.status-Resolved .icon:before {
  background-image: url("../img/Icons/Statuses/Colour/Resolved.svg");
}
.status.status-Resolved .icon.icon-mono:before {
  background-image: url("../img/Icons/Statuses/Mono/Resolved.svg");
}
.status.status-Resolved .icon.icon-outline:before {
  background-image: url("../img/Icons/Statuses/Outline/Resolved.svg");
}

.mapViewMode.mapViewMode-Island .icon:before {
  background-image: url("../img/Icons/MapViewModes/Mono/Island.svg");
}
.mapViewMode.mapViewMode-Active .icon:before {
  background-image: url("../img/Icons/MapViewModes/Mono/Active.svg");
}
.mapViewMode.mapViewMode-Extent .icon:before {
  background-image: url("../img/Icons/MapViewModes/Mono/Extent.svg");
}
.mapViewMode.mapViewMode-Free .icon:before {
  background-image: url("../img/Icons/MapViewModes/Mono/Free.svg");
}

/*$colors_themes_light-background: $colors_ui_06 !default;
$colors_themes_light-text: $typeface_colors_default !default;
$colors_themes_light-border: $colors_lines_border !default;
    // divider
    // button colors

$colors_themes_light-background: $typeface_colors_default !default;
$colors_themes_light-text: $colors_ui_06 !default;
$colors_themes_light-border: $typeface_colors_default !default;
*/
/*
    themes

    light 
        light background, dark text

    dark
        dark background, light text

    alternate
        brand background, light(?) text

*/
header {
  background: #B60011;
  display: flex;
  justify-content: space-between;
  padding: 0.25rem 0.5rem;
}
header img.emergencyworx_logo {
  content: url("../img/Logos/Emergencyworx/Emergencyworx_Logo_Light.svg");
}
header img.goj_logo {
  content: url("../img/Logos/GoJ/Goj_Logo_Light.svg");
}

/*$colors_themes_light-background: $colors_ui_06 !default;
$colors_themes_light-text: $typeface_colors_default !default;
$colors_themes_light-border: $colors_lines_border !default;
    // divider
    // button colors

$colors_themes_light-background: $typeface_colors_default !default;
$colors_themes_light-text: $colors_ui_06 !default;
$colors_themes_light-border: $typeface_colors_default !default;
*/
/*
    themes

    light 
        light background, dark text

    dark
        dark background, light text

    alternate
        brand background, light(?) text

*/
.mapActionBar {
  min-height: 2rem;
  display: flex;
  background: white;
  border: solid 1px #7D7D7D;
  border-radius: 0.2rem;
  pointer-events: all;
}

/*@use 'sass:list';
@use 'sass:map';

@use "../../../css/EwxBootskine/Colors/_Colors.variables.scss" as colorVariables;
@use "../../../css/EwxBootskine/Borders/_Borders.variables.scss" as borderVariables;
@use "../../../css/EwxBootskine/Borders/_Borders.functions.scss" as borderFunctions;
*/
.mapOverlay {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1rem 1rem 2rem 1rem;
  z-index: 1;
  pointer-events: none;
}
.mapOverlay .top {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
}
.mapOverlay .bottom {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-end;
  width: 100%;
}

/*$colors_themes_light-background: $colors_ui_06 !default;
$colors_themes_light-text: $typeface_colors_default !default;
$colors_themes_light-border: $colors_lines_border !default;
    // divider
    // button colors

$colors_themes_light-background: $typeface_colors_default !default;
$colors_themes_light-text: $colors_ui_06 !default;
$colors_themes_light-border: $typeface_colors_default !default;
*/
/*
    themes

    light 
        light background, dark text

    dark
        dark background, light text

    alternate
        brand background, light(?) text

*/
.imageCarousel {
  position: relative;
}
.imageCarousel > div {
  height: 12rem;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.imageCarousel .carouselPositionIndicator {
  display: flex;
  justify-content: stretch;
  justify-items: stretch;
  gap: 0.25rem;
  width: 100%;
  height: 0.25rem;
  padding: 0.5rem;
  position: absolute;
  z-index: 2;
  box-sizing: content-box;
  bottom: 7px;
  position: absolute;
  bottom: 0;
}
.imageCarousel .carouselPositionIndicator .imageIndicator {
  max-width: 1rem;
  background: white;
  opacity: 0.25;
  height: 100%;
  flex-grow: 1;
  border-radius: 2px;
}
.imageCarousel .carouselPositionIndicator .imageIndicator.imageIndicator-active {
  background: #F33D3E;
  opacity: 1;
}
.imageCarousel .textInput-iconLeft, .imageCarousel .textInput-iconRight {
  position: absolute;
  z-index: 99;
  filter: drop-shadow(1px 0px 1px #fff);
  cursor: pointer;
}
.imageCarousel .textInput-iconLeft:hover, .imageCarousel .textInput-iconRight:hover {
  background: rgba(255, 255, 255, 0.1254901961);
}
.imageCarousel .textInput-iconRight {
  right: 14px;
}
.imageCarousel .imagesContainer {
  flex-grow: 1;
  overflow: hidden;
  height: 100%;
}
.imageCarousel .imagesContainer .imagesRow {
  position: relative;
  display: flex;
  height: 100%;
  transition: left 0.2s ease-in-out;
}
.imageCarousel .imagesContainer .imagesRow .imageContainer {
  left: 0;
  top: 0;
  height: 100%;
  position: relative;
  min-width: 100%;
}
.imageCarousel .imagesContainer .imagesRow .imageContainer .spinnerContainer {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  z-index: -1;
}
.imageCarousel .imagesContainer .imagesRow .imageContainer .image {
  z-index: 1;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: absolute;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.loadingSpinner {
  position: relative;
  display: inline-flex;
}
.loadingSpinner .ring, .loadingSpinner .arrows {
  animation-duration: 1.5s;
}
.loadingSpinner .ring {
  /*animation-name: rotate360;
  animation-iteration-count: infinite;
  animation-direction: normal;*/
  content: url("../img/Loading/loading_ringSolid.png");
}
.loadingSpinner .arrows {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  animation: rotate360 1.5s steps(4) infinite;
  content: url("../img/Loading/loading_arrows.png");
}
.loadingSpinner .arrows2 {
  opacity: 0.5;
  animation-delay: 0.075s;
}
.loadingSpinner .arrows3 {
  opacity: 0.25;
  animation-delay: 0.15s;
}

@keyframes rotate360 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes rotate90x4 {
  /*    0% {
          transform: rotate(90deg);
      }

      25% {
          transform: rotate(180deg);
      }
      50% {
          transform: rotate(270deg);
      }
      75% {
          transform: rotate(360deg);
      }
      100% {
          transform: rotate(430deg);
      }*/
  from {
    transform: rotate(90deg);
  }
  to {
    transform: rotate(450deg);
  }
}
/*

@keyframes rotate90x4 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

     100% {
        -webkit-transform: rotate(1turn);
        transform: rotate(1turn);
    }
     }*/
/*@keyframes rotate360 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(1turn);
        transform: rotate(1turn);
    }
}*/
/*$colors_themes_light-background: $colors_ui_06 !default;
$colors_themes_light-text: $typeface_colors_default !default;
$colors_themes_light-border: $colors_lines_border !default;
    // divider
    // button colors

$colors_themes_light-background: $typeface_colors_default !default;
$colors_themes_light-text: $colors_ui_06 !default;
$colors_themes_light-border: $typeface_colors_default !default;
*/
/*
    themes

    light 
        light background, dark text

    dark
        dark background, light text

    alternate
        brand background, light(?) text

*/
.checkbox {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  cursor: pointer;
}
.checkbox input {
  border: solid 1px #7D7D7D;
  border-radius: 0.2rem;
}
.checkbox .checkboxxInputContainer {
  width: 1rem;
  height: 1rem;
  position: relative;
}
.checkbox .checkboxxInputContainer input {
  width: 100%;
  height: 100%;
  border-radius: 0.2rem;
  display: block;
}
.checkbox .checkboxxInputContainer .checkboxFillGraphicContainer {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}
.checkbox .checkboxxInputContainer .checkboxFillGraphicContainer .check {
  width: 100%;
  height: 100%;
  background: #83292A;
  border-radius: 0.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.checkbox .checkboxxInputContainer .checkboxFillGraphicContainer .check .sharedIcon.sharedIcon-Tick .icon:before {
  filter: brightness(0) saturate(100%) invert(100%);
}

section {
  padding: 1rem;
}

body {
  box-sizing: border-box;
}

#app {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

#publicMap {
  /*$colors_themes_light-background: $colors_ui_06 !default;
  $colors_themes_light-text: $typeface_colors_default !default;
  $colors_themes_light-border: $colors_lines_border !default;
      // divider
      // button colors

  $colors_themes_light-background: $typeface_colors_default !default;
  $colors_themes_light-text: $colors_ui_06 !default;
  $colors_themes_light-border: $typeface_colors_default !default;
  */
  /*
      themes

      light 
          light background, dark text

      dark
          dark background, light text

      alternate
          brand background, light(?) text

  */
  /*$colors_themes_light-background: $colors_ui_06 !default;
  $colors_themes_light-text: $typeface_colors_default !default;
  $colors_themes_light-border: $colors_lines_border !default;
      // divider
      // button colors

  $colors_themes_light-background: $typeface_colors_default !default;
  $colors_themes_light-text: $colors_ui_06 !default;
  $colors_themes_light-border: $typeface_colors_default !default;
  */
  /*
      themes

      light 
          light background, dark text

      dark
          dark background, light text

      alternate
          brand background, light(?) text

  */
  /*$colors_themes_light-background: $colors_ui_06 !default;
  $colors_themes_light-text: $typeface_colors_default !default;
  $colors_themes_light-border: $colors_lines_border !default;
      // divider
      // button colors

  $colors_themes_light-background: $typeface_colors_default !default;
  $colors_themes_light-text: $colors_ui_06 !default;
  $colors_themes_light-border: $typeface_colors_default !default;
  */
  /*
      themes

      light 
          light background, dark text

      dark
          dark background, light text

      alternate
          brand background, light(?) text

  */
  /*$colors_themes_light-background: $colors_ui_06 !default;
  $colors_themes_light-text: $typeface_colors_default !default;
  $colors_themes_light-border: $colors_lines_border !default;
      // divider
      // button colors

  $colors_themes_light-background: $typeface_colors_default !default;
  $colors_themes_light-text: $colors_ui_06 !default;
  $colors_themes_light-border: $typeface_colors_default !default;
  */
  /*
      themes

      light 
          light background, dark text

      dark
          dark background, light text

      alternate
          brand background, light(?) text

  */
  display: flex;
  flex-grow: 1;
  min-height: 0;
}
#publicMap .incidentList {
  /*$colors_themes_light-background: $colors_ui_06 !default;
  $colors_themes_light-text: $typeface_colors_default !default;
  $colors_themes_light-border: $colors_lines_border !default;
      // divider
      // button colors

  $colors_themes_light-background: $typeface_colors_default !default;
  $colors_themes_light-text: $colors_ui_06 !default;
  $colors_themes_light-border: $typeface_colors_default !default;
  */
  /*
      themes

      light 
          light background, dark text

      dark
          dark background, light text

      alternate
          brand background, light(?) text

  */
  /*$colors_themes_light-background: $colors_ui_06 !default;
  $colors_themes_light-text: $typeface_colors_default !default;
  $colors_themes_light-border: $colors_lines_border !default;
      // divider
      // button colors

  $colors_themes_light-background: $typeface_colors_default !default;
  $colors_themes_light-text: $colors_ui_06 !default;
  $colors_themes_light-border: $typeface_colors_default !default;
  */
  /*
      themes

      light 
          light background, dark text

      dark
          dark background, light text

      alternate
          brand background, light(?) text

  */
  /*$colors_themes_light-background: $colors_ui_06 !default;
  $colors_themes_light-text: $typeface_colors_default !default;
  $colors_themes_light-border: $colors_lines_border !default;
      // divider
      // button colors

  $colors_themes_light-background: $typeface_colors_default !default;
  $colors_themes_light-text: $colors_ui_06 !default;
  $colors_themes_light-border: $typeface_colors_default !default;
  */
  /*
      themes

      light 
          light background, dark text

      dark
          dark background, light text

      alternate
          brand background, light(?) text

  */
  display: flex;
  flex-direction: column;
  min-width: 21rem;
  width: 21rem;
  max-width: 21rem;
  background: #F0F0F0;
  border-right: solid 1px #7D7D7D;
  padding: 0.25rem 0 0 0;
}
#publicMap .incidentList .incidentCards {
  /*$colors_themes_light-background: $colors_ui_06 !default;
  $colors_themes_light-text: $typeface_colors_default !default;
  $colors_themes_light-border: $colors_lines_border !default;
      // divider
      // button colors

  $colors_themes_light-background: $typeface_colors_default !default;
  $colors_themes_light-text: $colors_ui_06 !default;
  $colors_themes_light-border: $typeface_colors_default !default;
  */
  /*
      themes

      light 
          light background, dark text

      dark
          dark background, light text

      alternate
          brand background, light(?) text

  */
  overflow-y: auto;
  overflow-x: hidden;
  padding-bottom: 1rem;
  padding-top: 1rem;
  position: relative;
  transition: all 1s ease-in-out;
}
#publicMap .incidentList .incidentCards .incidentCard {
  display: flex;
  background: white;
  position: relative;
  cursor: pointer;
}
#publicMap .incidentList .incidentCards .incidentCard.incidentCard-active {
  background: #FDE2E2;
}
#publicMap .incidentList .incidentCards .incidentCard.incidentCard-active .activeBorder {
  border-top: 3px solid #83292A;
  border-bottom: 3px solid #83292A !important;
  border-right: 3px solid #83292A;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  height: 100%;
  width: 100%;
  z-index: 29;
  position: absolute;
  pointer-events: none;
}
#publicMap .incidentList .incidentCards .incidentCard.incidentCard-active .buttonGroup {
  display: flex;
  justify-content: end;
}
#publicMap .incidentList .incidentCards .incidentCard.incidentCard-active .relativeDateTime {
  color: #83292A;
  font-weight: 400;
}
#publicMap .incidentList .incidentCards .incidentCard.incidentCard-active .title {
  color: #83292A;
  font-weight: 500;
}
#publicMap .incidentList .incidentCards .incidentCard.incidentCard-active .bottom {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.5rem;
}
#publicMap .incidentList .incidentCards .incidentCard.incidentCard-active .bottom .incidentReference {
  display: flex;
  gap: 0.25rem;
  font-size: 0.8rem;
}
#publicMap .incidentList .incidentCards .incidentCard.incidentCard-active .bottom .description {
  font-size: 0.8rem;
}
#publicMap .incidentList .incidentCards .incidentCard .severityBorder {
  /*        height: 100%;*/
  width: 1.25rem;
  min-width: 1.25rem;
  padding-top: 0.5rem;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
#publicMap .incidentList .incidentCards .incidentCard .severityBorder .icon:before {
  filter: brightness(500%);
}
#publicMap .incidentList .incidentCards .incidentCard.incidentCard-low .severityBorder {
  background: #5E9F56;
}
#publicMap .incidentList .incidentCards .incidentCard.incidentCard-medium .severityBorder {
  background: #D6A257;
}
#publicMap .incidentList .incidentCards .incidentCard.incidentCard-severe .severityBorder {
  background: #C65252;
}
#publicMap .incidentList .incidentCards .incidentCard .tint {
  display: none;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
}
#publicMap .incidentList .incidentCards .incidentCard.incidentCard-resolved .tint {
  display: block;
  background: #999;
  opacity: 0.5;
}
#publicMap .incidentList .incidentCards .incidentCard .content {
  flex-grow: 1;
  padding: 0.5rem 0.5rem;
  min-width: 0;
}
#publicMap .incidentList .incidentCards .incidentCard .content > div {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
#publicMap .incidentList .incidentCards .incidentCard .content > div .top {
  display: flex;
}
#publicMap .incidentList .incidentCards .incidentCard .content > div .top .left {
  flex-grow: 1;
}
#publicMap .incidentList .incidentCards .incidentCard .content > div .top .right .relativeDateTime {
  font-size: 0.8rem;
}
#publicMap .incidentList .incidentCards .loadingContainer {
  padding-left: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
#publicMap .incidentList .incidentCards .incidentsForDateContainer {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
#publicMap .incidentList .incidentCards .incidentsForDateContainer .incidentsForDate {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
#publicMap .incidentList .incidentCards .incidentsForDateContainer .incidentsForDate .date {
  display: flex;
  justify-content: end;
  padding-right: 0.5rem;
}
#publicMap .incidentList .incidentCards .incidentsForDateContainer .incidentsForDate .cardsContainer {
  display: flex;
  flex-direction: column;
  border-top: 1px solid #999;
}
#publicMap .incidentList .incidentCards .incidentsForDateContainer .incidentsForDate .cardsContainer .incidentCard {
  border-bottom: 1px solid #999;
}
#publicMap .incidentList .updateStatus {
  border-bottom: solid 1px #CCC;
  display: flex;
  justify-content: end;
  align-items: center;
  gap: 0.5rem;
}
#publicMap .incidentList .updateStatus.updateStatus-fetching .icon {
  -webkit-animation: spin 1.5s linear infinite;
  -moz-animation: spin 1.5s linear infinite;
  animation: spin 1.5s linear infinite;
}
@-moz-keyframes spin {
  100% {
    -moz-transform: rotate(360deg);
  }
}
@-webkit-keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
  }
}
@keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
#publicMap .incidentList .filters {
  display: flex;
  flex-direction: column;
  border-bottom: solid 1px #CCC;
}
#publicMap .incidentList .filters.filters-showOptions {
  min-height: 50rem;
}
#publicMap .incidentList .filters .filterSelection {
  padding: 0.25rem;
  display: flex;
  gap: 0.25rem;
  flex-wrap: wrap;
}
#publicMap .incidentList .filters .filterSelection > *:not(button) {
  background: white;
  padding: 0.5rem;
  display: flex;
  gap: 0.5rem;
}
#publicMap .incidentList .filters .filterOptions {
  flex-grow: 1;
  overflow: auto;
}
#publicMap .incidentList .filters .filterOptions section {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
#publicMap .incidentList .filters .filterOptions section .sectionTitle {
  font-size: 1rem;
}
#publicMap .incidentList .filters .filterOptions section .checkboxesContainer {
  display: flex;
  flex-direction: row;
  gap: 1.5rem;
}
#publicMap .incidentList .filters .filterOptions section .checkboxesContainer .column {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
#publicMap .incidentList .filters .filterOptions section.section-eventTypes .labelContainer {
  display: flex;
}
#publicMap .incidentList .filters .filterOptions section.section-buttonGroup {
  display: flex;
  flex-direction: row;
  justify-content: end;
}
#publicMap .incidentCardAssignment {
  min-width: 11rem;
  display: inline-flex;
  border: 1px solid grey;
  border-radius: 99px;
  padding: 0 0.5rem;
  justify-content: center;
  height: 20px;
}
#publicMap .incidentCardAssignment.incidentCardAssignment-Unassigned, #publicMap .incidentCardAssignment.incidentCardAssignment-unassigned {
  background: #CCC;
  border: none;
}
#publicMap .incidentCardAssignment .actionGroup {
  flex-grow: 1;
  justify-content: center;
}
#publicMap .mapboxgl-popup {
  border: solid 1px #7D7D7D;
  border-radius: 0.2rem;
}
#publicMap .mapboxgl-popup .mapboxgl-popup-tip {
  z-index: 99;
  border: solid 1px #7D7D7D;
  height: 10px;
  width: 10px;
  border-left: none;
  border-top: none;
  position: absolute;
  background: #ffffff;
  clip-path: polygon(0px 10px, 10px 0, 10px 10px);
}
#publicMap .mapboxgl-popup.mapboxgl-popup-anchor-bottom {
  top: -10px;
}
#publicMap .mapboxgl-popup.mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip {
  transform: rotate(45deg);
  bottom: -5px;
}
#publicMap .mapboxgl-popup.mapboxgl-popup-anchor-left {
  left: 10px;
}
#publicMap .mapboxgl-popup.mapboxgl-popup-anchor-left .mapboxgl-popup-tip {
  transform: rotate(135deg);
  left: -5px;
}
#publicMap .mapboxgl-popup.mapboxgl-popup-anchor-top {
  top: 10px;
}
#publicMap .mapboxgl-popup.mapboxgl-popup-anchor-top .mapboxgl-popup-tip {
  transform: rotate(225deg);
  top: -5px;
}
#publicMap .mapboxgl-popup.mapboxgl-popup-anchor-right {
  left: -10px;
}
#publicMap .mapboxgl-popup.mapboxgl-popup-anchor-right .mapboxgl-popup-tip {
  transform: rotate(315deg);
  right: -5px;
}
#publicMap .mapboxgl-popup .mapboxgl-popup-content {
  padding: 0.25rem 0.5rem;
}
#publicMap .mapboxgl-popup .mapboxgl-popup-content .incidentPopup {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
#publicMap .mapboxgl-popup .mapboxgl-popup-content .incidentPopup .row {
  display: flex;
  gap: 0.25rem;
}
#publicMap .mapboxgl-popup .mapboxgl-popup-content .mapboxgl-popup-close-button {
  display: none;
}
#publicMap .reportAnEmergency {
  position: relative;
  pointer-events: all;
  z-index: 2;
}
#publicMap .reportAnEmergency button {
  outline: unset;
}
#publicMap .reportAnEmergency .popup {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  position: absolute;
  top: 0rem;
  right: 0rem;
  background: #CCC;
  border: solid 1px #7D7D7D;
  border-radius: 0.2rem;
  width: 28rem;
  overflow: clip;
}
#publicMap .reportAnEmergency .popup .reportButton {
  justify-content: space-between;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  margin-bottom: -8px;
  position: relative;
  left: -1px;
  top: -1px;
  width: calc(100% + 2px);
}
#publicMap .reportAnEmergency .popup section {
  background: white;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.5rem 0.5rem;
}
#publicMap .reportAnEmergency .popup .details {
  display: flex;
  justify-content: center;
  gap: 2rem;
}
#publicMap .reportAnEmergency .popup .details .phoneNumber,
#publicMap .reportAnEmergency .popup .details .email {
  display: flex;
  gap: 0.25rem;
  font-size: 1.5rem;
}
#publicMap .reportAnEmergency .popup .header {
  font-weight: 500;
  color: #F33D3E;
}
#publicMap .reportAnEmergency .popup .localParishes {
  padding-left: 0;
  padding-right: 0;
}
#publicMap .reportAnEmergency .popup .localParishes .header {
  padding-left: 0.5rem;
}
#publicMap .reportAnEmergency .popup .localParishes table {
  border-collapse: collapse;
}
#publicMap .reportAnEmergency .popup .localParishes table tr:nth-of-type(odd) {
  background: #F0F0F0;
}
#publicMap .reportAnEmergency .popup .localParishes table td {
  padding: 0.5rem 0.25rem;
}
#publicMap .reportAnEmergency .popup .localParishes table td:first-child {
  padding-left: 0.5rem;
}
#publicMap .reportAnEmergency .popup .localParishes table td:last-child {
  padding-right: 0.5rem;
}
#publicMap .reportAnEmergency .popup section.buttons {
  align-items: flex-end;
  padding: 0.5rem 0.5rem;
}
#publicMap .reportAnEmergency .popup section.explanation {
  padding: 1rem 0.5rem;
}
#publicMap .reportAnEmergency .popup .orContainer {
  position: relative;
  height: 0;
  margin-bottom: -0.25rem;
}
#publicMap .reportAnEmergency .popup .orContainer .orInner {
  position: absolute;
  width: 100%;
  text-align: center;
  top: -14px;
  display: flex;
  justify-content: center;
}
#publicMap .reportAnEmergency .popup .orContainer .orInner .or {
  padding: 0 0.5rem;
  background: white;
  font-size: 0.9rem;
  font-weight: 400;
  color: #999;
}
#publicMap .map {
  /*$colors_themes_light-background: $colors_ui_06 !default;
  $colors_themes_light-text: $typeface_colors_default !default;
  $colors_themes_light-border: $colors_lines_border !default;
      // divider
      // button colors

  $colors_themes_light-background: $typeface_colors_default !default;
  $colors_themes_light-text: $colors_ui_06 !default;
  $colors_themes_light-border: $typeface_colors_default !default;
  */
  /*
      themes

      light 
          light background, dark text

      dark
          dark background, light text

      alternate
          brand background, light(?) text

  */
  /*@use '../../../lib/bootskine/Colors/_Colors.variables.scss' as colorVariables;
  */
  flex-grow: 1;
  min-height: 200px;
  min-width: 200px;
  position: relative;
}
#publicMap .map .keyMapActionBarItem {
  position: relative;
}
#publicMap .map .keyMapActionBarItem button {
  outline: unset;
}
#publicMap .map .keyMapActionBarItem .popup {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  background: red;
  position: absolute;
  bottom: 3rem;
  right: 0rem;
  background: #CCC;
  border: solid 1px #7D7D7D;
  border-radius: 0.2rem;
  width: max-content;
}
#publicMap .map .keyMapActionBarItem .popup section {
  background: white;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.5rem;
}
#publicMap .map .keyMapActionBarItem .popup section:first-child {
  border-top-left-radius: 0.2rem;
  border-top-right-radius: 0.2rem;
}
#publicMap .map .keyMapActionBarItem .popup section:last-child {
  border-bottom-left-radius: 0.2rem;
  border-bottom-right-radius: 0.2rem;
}
#publicMap .map .keyMapActionBarItem .popup section ul {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
#publicMap .map .keyMapActionBarItem .popup section ul li {
  display: flex;
  flex-direction: row;
  gap: 0.25rem;
  align-items: center;
}
#publicMap .map .keyMapActionBarItem .popup section.plannedActivities .symbol {
  width: 20px;
  height: 6px;
}
#publicMap .map .keyMapActionBarItem .popup section.plannedActivities .roadClosure .symbol {
  background: #C65252;
}
#publicMap .map .keyMapActionBarItem .popup section.plannedActivities .diversionAll .symbol {
  background: #D6A257;
}
#publicMap .map .keyMapActionBarItem .popup section.plannedActivities .diversionCars .symbol {
  background: repeating-linear-gradient(90deg, #D6A257, #D6A257 4px, transparent 4px, transparent 8px);
}
#publicMap .map .keyMapActionBarItem .popup section.plannedActivities .oneWayAll .symbol {
  background: #6697D9;
}
#publicMap .map .keyMapActionBarItem .popup section.plannedActivities .oneWayCars .symbol {
  background: repeating-linear-gradient(90deg, #6697D9, #6697D9 4px, transparent 4px, transparent 8px);
}
#publicMap .map .keyMapActionBarItem .popup section.plannedActivities .singleFile .symbol {
  background: #5E9F56;
}
#publicMap .map .keyMapActionBarItem .popup section.roadAccessibility .symbol {
  width: 20px;
  height: 6px;
}
#publicMap .map .keyMapActionBarItem .popup section.roadAccessibility .roadClosure .symbol {
  background: #C65252;
}
#publicMap .map .keyMapActionBarItem .popup section.roadAccessibility .partialClosure .symbol {
  background: repeating-linear-gradient(90deg, #C65252, #C65252 4px, transparent 4px, transparent 8px);
}
#publicMap .map #mapboMapDiv {
  height: 100%;
  width: 100%;
}

section {
  padding: 1rem;
}

.mapboxgl-ctrl.mapboxgl-ctrl-group button {
  min-width: 0;
}
.mapboxgl-ctrl.mapboxgl-ctrl-group button span {
  color: pink;
}