@font-face {
  font-family: "Avenir Next";
  src: url("fonts/avenirnext-regular.woff2") format("woff2"),
       url("fonts/avenirnext-regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Avenir Next Medium";
  src: url("fonts/avenirnext-medium.woff2") format("woff2"),
       url("fonts/avenirnext-medium.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Gill Sans MT for Nacka';
  src: url('fonts/gillsans-nacka.woff2') format('woff2'),
       url('fonts/gillsans-nacka.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

html,
body {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

html {
  position: fixed;
  height: 100%;
}

body {
  font-family: "Avenir Next", sans-serif;
  font-weight: normal;
  width: 100vw;
  height: 100vh;
  overflow-y: scroll;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  /* prevent pinch-zoom on Android */
  touch-action: pan-y;
}

#map {
  /* restore pinch-zoom for map */
  touch-action: auto;
}

.app-start {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  font-family: "Avenir Next Medium", sans-serif;
  font-size: 2rem;
  font-weight: 500;
  color: #fff;
  fill: #fff;
  background: #0077b7;
}

.sr-only {
  /*Same style attributes as MaterialUI SrOnly*/
  width: 0;
  height: 0;
  overflow: hidden;
  position: absolute;
}

.compass {
  animation: compass 1.2s cubic-bezier(0.51, 0.41, 0.17, 1.1) infinite;
  height: 56px;
}

@keyframes compass {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.app-name {
  font-size: 2rem;
  height: 76px;
  margin-bottom: 4rem;
}

.app-version {
  font-size: 0.75rem;
  line-height: 2rem;
}

/* Used only for displaying error if nothing loaded (and we don't have any MUI yet) */
.start-error {
  color: #cd0019;
  border: 1px solid #cd0019;
  background: #Fdefee;
  border-radius: 0.5rem;
  padding: 1rem;
  margin: 0 auto;
  width: 50%;
  text-align: center;
  margin-top: 5%;
}

.introjs-tooltip {
  min-width: 280px !important;
}

/* Nacka kommun logotype */
.MuiDrawer-paper.MuiDrawer-paperAnchorLeft > .MuiBox-root {
  padding: 1rem !important;
  height: 5rem !important;
  display: flex;
  justify-content: center;
}

.MuiDrawer-paper.MuiDrawer-paperAnchorLeft > .MuiBox-root img {
  height: 3rem !important;
}

/* Nacka kommun menu */
.MuiDrawer-paper.MuiDrawer-paperAnchorLeft .MuiListItem-button,
.MuiDrawer-paper.MuiDrawer-paperAnchorLeft .MuiListItemText-primary {
  font-family: "Avenir Next Medium" !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  color: #0077b7 !important;
}

.MuiDrawer-paper.MuiDrawer-paperAnchorLeft .MuiListItem-button {
  border-left: 6px solid transparent !important;
  padding-left: 10px !important;
}

.MuiDrawer-paper.MuiDrawer-paperAnchorLeft .MuiListItem-button.Mui-selected {
  background: #f0f0f0 !important;
  border-left: 6px solid #0077b7 !important;
}

.MuiDrawer-paper.MuiDrawer-paperAnchorLeft .MuiListItem-button .MuiListItemIcon-root {
  width: 2rem !important;
  min-width: 2rem !important;
}

.MuiDrawer-paper.MuiDrawer-paperAnchorLeft .MuiSvgIcon-root,
.MuiAutocomplete-root .MuiButtonBase-root .MuiSvgIcon-root,
.MuiMenuItem-root .MuiSvgIcon-root,
.react-draggable .MuiButtonBase-root .MuiSvgIcon-root {
  fill: #0077b7 !important;
}

.react-draggable .MuiButton-containedPrimary .MuiSvgIcon-root {
  fill: #fff !important;
}

.MuiMenuItem-root,
.MuiIcon-root {
  color: #0077b7 !important;
}

.react-draggable section .MuiTypography-subtitle2,
.react-draggable section .MuiTypography-body2 {
  color: #000000 !important;
}

.react-draggable section .MuiTypography-body2 {
  font-family: "Avenir Next";
  font-weight: 400;
}

.MuiAvatar-root.MuiAvatar-circular {
  background: #0077b7 !important;
}

/* Nacka kommun search */
#searchInputField {
  padding-left: 1rem;
}

/* Nacka kommun modal */
.react-draggable {
  min-height: 3.5rem !important;
}
.react-draggable header:not(.MuiAppBar-root) {
  border-bottom: 1px solid #e6e6e6 !important;
  min-height: 3.5rem !important;
}

#documentViewer p.MuiTypography-body1 {
  font-family: "Avenir Next";
  font-weight: 400;
  font-size: 1rem;
  margin: 0 0 1rem;
}

.MuiAccordionSummary-content,
.MuiAccordionDetails-root,
.MuiMenuItem-root,
.MuiAccordionSummary-content p.MuiTypography-root,
.MuiAccordionDetails-root p.MuiTypography-root,
.react-draggable section .MuiBox-root .MuiGrid-wrap-xs-nowrap p.MuiTypography-body1 {
  font-family: "Avenir Next Medium" !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
}

.MuiAccordionSummary-content div,
.MuiAccordionDetails-root div,
.MuiBox-root > div {
  border-bottom-width: 1px !important;
}

/* Nacka kommun map control btn:s */
#controls-column .MuiPaper-root,
#header > .MuiPaper-root:first-child {
  border-radius: 9999px !important;
  background: transparent !important;
  color: #fff !important;
  box-shadow: none !important;
  border: 0 !important;
}

#controls-column .MuiPaper-root button + button {
  margin-top: 0.5rem !important;
}

#controls-column .MuiPaper-root button {
  width: 48px !important;
  height: 48px !important;
}

#controls-column .MuiPaper-root button {
  background: #0077b7 !important;
  color: #fff !important;
  border-radius: 9999px !important;
  border: 0 !important;
  box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 1px -1px, rgba(0, 0, 0, 0.14) 0px 1px 1px 0px, rgba(0, 0, 0, 0.12) 0px 1px 3px 0px;
}

.MuiDialogActions-root .MuiButton-containedPrimary {
  background: #0077b7 !important;
}

#controls-column .MuiPaper-root button:hover,
#controls-column .MuiPaper-root button:focus,
.MuiDialogActions-root .MuiButton-containedPrimary:hover,
.MuiDialogActions-root .MuiButton-containedPrimary:focus {
  background: #4da0cd !important;
}

@media only screen and (max-width: 599.95px) {
  #header .MuiButtonBase-root .MuiSvgIcon-root {
    fill: #0077b7 !important;
  }
}

@media only screen and (min-width: 599.95px) {
  #header .MuiToggleButtonGroup-root button + button {
    margin-left: 0.5rem !important;
  }
  #header .MuiToggleButtonGroup-root button {
    font-size: 1rem !important;
    background: #0077b7 !important;
    color: #fff !important;
    border-radius: 9999px !important;
    border: 0 !important;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 1px -1px, rgba(0, 0, 0, 0.14) 0px 1px 1px 0px, rgba(0, 0, 0, 0.12) 0px 1px 3px 0px;
    padding: 8px 22px !important;
    height: 48px !important;
  }
  #header .MuiToggleButtonGroup-root button:hover {
    background: #4da0cd !important;
  }
  #header .MuiToggleButtonGroup-root button:focus {
    background: #4da0cd !important;
  }
}