html, body {
  height: 100%;
  margin: 0;
  font-family: 'Roboto', monospace;
}

/**
Fonts
 */
/* latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: local('Roboto Light'), local('Roboto-Light'), url(./fonts/Roboto_light.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Roboto'), local('Roboto-Regular'), url(./fonts/Roboto_regular.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: local('Roboto Medium'), local('Roboto-Medium'), url(./fonts/Roboto_medium.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local('Roboto Bold'), local('Roboto-Bold'), url(./fonts/Roboto_bold.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

#map {
  width: 100%;
  height: 100%;
}

.leaflet-container {
  font: 12px/1.5 "Roboto";
}

.info {
  padding: 6px 8px;
  font-size: 14px;
  background: white;
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
  border-radius: 5px;
  font-weight: normal;
}

.info h3 {
  margin: 0 0 5px;
}

.info h4 {
  margin: 0 0 5px;
  color: #777;
}

.legend {
  display: flex;
  flex-direction: column;
  text-align: left;
  line-height: 22px;
  color: #555;
  font-size: 18px;
}

.legend div {
  display: flex;
  flex-direction: row;
}

.legend div i {
  width: 22px;
  height: 22px;
  float: left;
  margin-right: 8px;
  opacity: 0.7;
}

.legend div i.primary {
  margin-right: 0;
}

.info.stats {
  display: flex;
  flex-direction: column;
  font-size: 16px;
  font-weight: 300;
}

.stats .header-column {
  display: flex;
  flex-direction: column;
  font-size: 20px;
  text-align: center;
  line-height: 30px;
}

.stats .number-box {
  margin-top: 17px;
  margin-bottom: 17px;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.stats .number-box-mun {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.number-box-mun .municipality {
  display: flex;
  text-align: right;
  justify-content: flex-end;
  flex: 1 0 auto;
  font-size: 20px;
}

.no-municipality-chosen{
  line-height: 24px;
  font-size: 20px;
  text-align: right;
}

.stats .table-container {
  display: flex;
  flex-direction: row;
  font-weight: 300;
  font-size: 20px;
  line-height: 24px;
  width: 100%;
}

.stats .table-container .column {
  display: flex;
  flex-direction: column;
  flex-grow: 1;

}

.stats .table-container .column div {
  min-height: 24px;
  border-bottom: 1px solid #999999;
}

.stats .table-container .column div:first-child,
.stats .table-container .column div:last-child {
  border-bottom: none;
}

.stats .table-container .number-column {
  text-align: right;

}

.stats .numbers {
  font-weight: 700;
  padding-left: 20px;
}

.stats .date-box {
  display: flex;
  flex-direction: column;
  margin-top: 30px;
}

.stats .date-container {
  display: flex;
  flex-direction: column;
  font-size: 16px;
  line-height: 20px;
}


.stats .date-number {
  font-weight: 400;
}

.stats .stats-container {
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
}

.stats .small-text {
  font-size: 14px;
  font-weight: 300;
}


.stats .reload {
  font-size: 10px;
  font-weight: 300;
  display: flex;
  flex-direction: row;
  margin-top: 12px;
  justify-content: flex-end;
}

.reload .desc {
  margin-right: 5px;
}

.stats-row {
  flex-direction: row;
  flex-wrap: nowrap;
}

.stats .data {
  flex: 0
}

.no-key {
  display: flex;
  flex-direction: column;
}

.no-key .error-message {
  margin-top: 30px;
}

.error-message {

  padding: 10px;
  border-radius: 10px;
  background-color: #f2dede;
  font-weight: 400;
}

.radiosys {
  display: flex;
  flex-direction: row;
}

.radiosys div {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

.radiosys .logo-container {
  flex-grow: 0;
  align-content: flex-start;
}

.radiosys a img {
  align-content: center;
  justify-content: center;
  justify-self: center;
  align-self: center;
}

.radiosys a {
  flex-grow: 1;
  display: flex;
  align-content: center;
  justify-content: center;
  justify-self: center;
  align-self: center;
}

.radiosys .logo-title {
  color: #777777;
  text-align: center;
  font-weight: 300;
  font-size: 14px;
  margin-bottom: 3px;
}

.radiosys .logo {
  width: 160px;
}

.radiosys .kks-logo {
  border-radius: 4px;
  background: white;
  padding: 2px;
}


.hide {
  display: none;
}

/**
IE Warning message
 */
.ieWarning{
  display: none;
  border-radius: 10px;
  padding: 20px;
  background-color: #f2dede;
  margin: 30px;
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  /**
  Gets IE10 and up, see https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection
   */
  .ieWarning{display:block;}
}


/**
Hide attribution in iframe
 */
@media (max-width: 510px) {
  .leaflet-control-attribution {
    display: none;
  }
}

/**
Hiding things on smaller screens
 */
@media (max-width: 1000px), (max-height: 850px) {
  .hide-medium {
    display: none !important;
  }

  /**
  Smaller legend
   */
  .legend {
    text-align: left;
    line-height: 12px;
    color: #555;
    font-size: 9px;
  }

  .legend div i {
    width: 12px;
    height: 12px;
    float: left;
    margin-right: 4px;
    opacity: 0.7;
  }

  .legend div i.primary {
    margin-right: 0;
  }
}

@media (max-width: 1000px) and (max-height: 700px) {
  .hide-small {
    display: none !important;
  }

  .stats .header-column {
    font-size: 20px;
    line-height: 25px;
  }

  .radiosys .logo {
    width: 100px;
  }

  .radiosys .logo-title {
    font-size: 12px;
  }
}

@media (max-width: 650px), (max-height: 400px) {
  .hide-tiny {
    display: none !important;
  }

  .leaflet-control-attribution {
    display: none;
  }

  .stats .number-box-mun {
    font-size: 14px;
    line-height: 16px;
  }

  .number-box-mun .municipality {
    font-size: 14px;
  }

  .stats .table-container {
    font-size: 14px;
    line-height: 16px;
  }

  .no-municipality-chosen{
    font-size: 14px;
    line-height: 16px;
  }

  .stats .table-container .column div {
    min-height: 16px;
  }
}

/**
Case Numbers
 */

.case-number-icon {
  font-family: 'Roboto', monospace;
}

@media (min-width: 1000px), (min-height: 560px) {
  .case-number-icon {
    font-size: 14px;
  }
}

@media (max-width: 999px), (max-height: 559px) {
  .case-number-icon {
    font-size: 11px;
  }
}

@media (max-width: 701px), (max-height: 344px) {
  .case-number-icon {
    font-size: 9px;
  }
}

@media (max-width: 497px), (max-height: 344px) {
  .case-number-icon {
    font-size: 7px;
  }
}

@media (max-width: 247px), (max-height: 130px) {
  .case-number-icon {
    font-size: 5px;
  }
}

/**
Hide Design Elements
 */

@media (max-width: 165px) {
  .hide-gdeinfobox {
    display: none !important;
  }
}

@media (max-width: 200px), (max-height: 100px) {
  .hide-case-number {
    display: none !important;
  }
}

@media (max-width: 100px), (max-height: 330px) {
  .hide-legend {
    display: none !important;
  }
}