@font-face {
  font-family: "ff-meta-serif-web-pro";
  src: url("https://use.typekit.net/af/6da54c/00000000000000003b9b06f7/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3")
      format("woff2"),
    url("https://use.typekit.net/af/6da54c/00000000000000003b9b06f7/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3")
      format("woff"),
    url("https://use.typekit.net/af/6da54c/00000000000000003b9b06f7/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3")
      format("opentype");
  font-display: auto;
  font-style: normal;
  font-weight: 700;
}

@font-face {
  font-family: "ff-meta-serif-web-pro";
  src: url("https://use.typekit.net/af/d03d8b/00000000000000003b9b06f1/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n3&v=3")
      format("woff2"),
    url("https://use.typekit.net/af/d03d8b/00000000000000003b9b06f1/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n3&v=3")
      format("woff"),
    url("https://use.typekit.net/af/d03d8b/00000000000000003b9b06f1/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n3&v=3")
      format("opentype");
  font-display: auto;
  font-style: normal;
  font-weight: 300;
}

@font-face {
  font-family: "brandon-grotesque";
  src: url("https://use.typekit.net/af/1da05b/0000000000000000000132df/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3")
      format("woff2"),
    url("https://use.typekit.net/af/1da05b/0000000000000000000132df/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3")
      format("woff"),
    url("https://use.typekit.net/af/1da05b/0000000000000000000132df/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3")
      format("opentype");
  font-display: auto;
  font-style: normal;
  font-weight: 400;
}

@font-face {
  font-family: "brandon-grotesque";
  src: url("https://use.typekit.net/af/8f4e31/0000000000000000000132e3/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3")
      format("woff2"),
    url("https://use.typekit.net/af/8f4e31/0000000000000000000132e3/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3")
      format("woff"),
    url("https://use.typekit.net/af/8f4e31/0000000000000000000132e3/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3")
      format("opentype");
  font-display: auto;
  font-style: normal;
  font-weight: 700;
}

:root {
  --brandon-font: "brandon-grotesque";
  --ui-background: #fff;
  --ui-radius: 6px;
  --ui-overlay-shadow: 0px 0px 15px rgba(104, 104, 104, 0.5);
  --neutral-white: #fff;
  --neutral-10: #f6f6f9;
  --neutral-40: #9b9db0;
  --primary-80: #303f7e;
  --primary-90: #2a3561;
  --secondary-60: #fa3f38;
}

#mtk-weather {
  width: 100%;
  height: 100%;
  font-family: var(--brandon-font);
  letter-spacing: 0.5px;
  box-sizing: border-box;
}

#mtk-weather *,
#mtk-weather button,
#mtk-weather select,
#mtk-weather *:before,
#mtk-weather *:after {
  box-sizing: inherit;
  letter-spacing: inherit;
  font-family: inherit;
  line-height: normal;
  color: initial;
}

/* Control Margin */
.maplibregl-ctrl-top-center .maplibregl-ctrl:not(.maplibregl-ctrl-attrib) {
  margin: 32px 0 0 0;
}
.maplibregl-ctrl-bottom-center .maplibregl-ctrl:not(.maplibregl-ctrl-attrib) {
  margin: 0 0 32px 0;
}
.maplibregl-ctrl-top-left .maplibregl-ctrl:not(.maplibregl-ctrl-attrib) {
  margin: 10px 0 0 25px;
}
.maplibregl-ctrl-top-right .maplibregl-ctrl:not(.maplibregl-ctrl-attrib) {
  margin: 10px 25px 0 0;
}
.maplibregl-ctrl-bottom-left .maplibregl-ctrl:not(.maplibregl-ctrl-attrib) {
  margin: 0 0 10px 25px;
}
.maplibregl-ctrl-bottom-right .maplibregl-ctrl:not(.maplibregl-ctrl-attrib) {
  margin: 0 25px 10px 0;
}
.maplibregl-ctrl-top-left .maplibregl-ctrl:not(.maplibregl-ctrl-attrib):first-child {
  margin: 32px 0 0 25px;
}
.maplibregl-ctrl-top-right .maplibregl-ctrl:not(.maplibregl-ctrl-attrib):first-child {
  margin: 32px 25px 0 0;
}
.maplibregl-ctrl-top-left .maplibregl-ctrl.maxplibregl-ctrl-attrib:first-child,
.maplibregl-ctrl-top-right .maplibregl-ctrl.maplibregl-ctrl-attrib:first-child {
  margin: 0 0 10px 0;
}
.maplibregl-ctrl-bottom-left .maplibregl-ctrl:not(.maplibregl-ctrl-attrib):last-child {
  margin: 0 0 32px 25px;
}
.maplibregl-ctrl-bottom-right .maplibregl-ctrl:not(.maplibregl-ctrl-attrib):last-child {
  margin: 0 25px 32px 0;
}
.maplibregl-ctrl-bottom-left .maplibregl-ctrl.maplibregl-ctrl-attrib:last-child,
.maplibregl-ctrl-bottom-right .maplibregl-ctrl.maplibregl-ctrl-attrib:last-child {
  margin: 10px 0 0 0;
}

/* Groups/Buttons */
.maplibregl-ctrl-group {
  border-radius: var(--ui-radius);
}
.maplibregl-ctrl-group button {
  width: 36px;
  height: 36px;
}
.maplibregl-ctrl-group button:first-child,
.maplibregl-ctrl-group button:focus:first-child {
  border-radius: var(--ui-radius) var(--ui-radius) 0 0;
}
.maplibregl-ctrl-group button:last-child,
.maplibregl-ctrl-group button:focus:last-child {
  border-radius: 0 0 var(--ui-radius) var(--ui-radius);
}
.maplibregl-ctrl-group button:first-child:last-child {
  border-radius: var(--ui-radius);
}
.maplibregl-ctrl-group.maplibregl-ctrl-group-inline button:first-child,
.maplibregl-ctrl-group.maplibregl-ctrl-group-inline button:focus:first-child {
  border-radius: var(--ui-radius) 0 0 var(--ui-radius);
}
.maplibregl-ctrl-group.maplibregl-ctrl-group-inline button:last-child,
.maplibregl-ctrl-group.maplibregl-ctrl-group-inline button:focus:last-child {
  border-radius: 0 var(--ui-radius) var(--ui-radius) 0;
}
.maplibregl-ctrl-group.maplibregl-ctrl-group-inline button:first-child:last-child {
  border-radius: var(--ui-radius);
}
.maplibregl-ctrl-group:not(:empty) {
  box-shadow: var(--ui-overlay-shadow);
}
.maplibregl-ctrl-group button {
  width: 36px;
  height: 36px;
}
.maplibregl-ctrl-group button + button,
.maplibregl-ctrl-group.maplibregl-ctrl-group-inline button + button {
  box-sizing: content-box;
  border-width: 2px;
  border-color: var(--neutral-10);
}
.maplibregl-ctrl button.maplibregl-ctrl-zoom-in .maplibregl-ctrl-icon {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg' fill='%232a3561'%3E%3Cpath d='M14.5 8.5c-.75 0-1.5.75-1.5 1.5v3h-3c-.75 0-1.5.75-1.5 1.5S9.25 16 10 16h3v3c0 .75.75 1.5 1.5 1.5S16 19.75 16 19v-3h3c.75 0 1.5-.75 1.5-1.5S19.75 13 19 13h-3v-3c0-.75-.75-1.5-1.5-1.5z'/%3E%3C/svg%3E");
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='14' height='14' viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg' fill='%232a3561'%3E%3Cpath d='M6 0c-.621 0-1.125.504-1.125 1.125v3.75h-3.75a1.125 1.125 0 000 2.25h3.75v3.75a1.125 1.125 0 002.25 0v-3.75h3.75a1.125 1.125 0 000-2.25h-3.75v-3.75C7.125.504 6.621 0 6 0z'%3E%3C/path%3E%3C/svg%3E");
}
.maplibregl-ctrl button.maplibregl-ctrl-zoom-out .maplibregl-ctrl-icon {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg' fill='%232a3561'%3E%3Cpath d='M10 13c-.75 0-1.5.75-1.5 1.5S9.25 16 10 16h9c.75 0 1.5-.75 1.5-1.5S19.75 13 19 13h-9z'/%3E%3C/svg%3E");
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='14' height='14' viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg' fill='%232a3561'%3E%3Cpath d='M1.125 4.875a1.125 1.125 0 000 2.25h9.75a1.125 1.125 0 000-2.25z'%3E%3C/path%3E%3C/svg%3E");
}
.maplibregl-ctrl button.maplibregl-ctrl-compass .maplibregl-ctrl-icon {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20width%3D%2229%22%20height%3D%2229%22%20viewBox%3D%220%200%2029%2029%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22%23303F7E%22%3E%3Cpath%20d%3D%22M10.5%2015l4-9%204%209-4-2%22%2F%3E%3Cpath%20d%3D%22M10.5%2017l4%208%204-8-4-2%22%20fill%3D%22%23D8D9DE%22%2F%3E%3C%2Fsvg%3E");
}

/* MTK Logo */
#mtk-weather .maplibregl-ctrl-top-left .maplibregl-ctrl.mtk-control-logo:first-child,
#mtk-weather .maplibregl-ctrl-top-right .maplibregl-ctrl.mtk-control-logo:first-child {
  margin: 0 0 10px 0;
}
#mtk-weather .maplibregl-ctrl-bottom-left .maplibregl-ctrl.mtk-control-logo:last-child,
#mtk-weather .maplibregl-ctrl-bottom-right .maplibregl-ctrl.mtk-control-logo:last-child {
  margin: 10px 0 0 0;
}

/* MTK.WeatherControl */
#mtk-weather .mtk-weather-control-overview-icon {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%232a3561'%3E%3Cpath d='M9.25,3a1,1,0,0,0,1-1V1a1,1,0,0,0-2,0V2A1,1,0,0,0,9.25,3Z' /%3E%3Cpath d='M3.416,4.83A1,1,0,1,0,4.83,3.416l-.707-.707A1,1,0,0,0,2.709,4.123Z' /%3E%3Cpath d='M3,9.25a1,1,0,0,0-1-1H1a1,1,0,0,0,0,2H2A1,1,0,0,0,3,9.25Z' /%3E%3Cpath d='M14.377,5.123a1,1,0,0,0,.707-.293l.707-.707a1,1,0,0,0-1.414-1.414l-.707.707a1,1,0,0,0,.707,1.707Z' /%3E%3Cpath d='M 9.203125 3.203125 A 5.974577 5.974577 0 0 0 3.2285156 9.1777344 A 5.974577 5.974577 0 0 0 4.0214844 12.136719 C 4.7155715 11.742508 5.5426445 11.479256 6.5175781 11.412109 C 6.619448 11.40501 6.7073602 11.337554 6.7382812 11.240234 C 7.9749073 7.4361662 11.422261 5.9906643 14.544922 6.5078125 A 5.974577 5.974577 0 0 0 9.203125 3.203125 z ' /%3E%3Cpath d='M22.094,15.074a.252.252,0,0,1-.1-.193A7,7,0,0,0,8.338,12.84a.249.249,0,0,1-.22.173A5.5,5.5,0,0,0,8.5,24H19a5,5,0,0,0,3.094-8.926ZM22,19a3,3,0,0,1-3,3H8.5a3.5,3.5,0,1,1,.448-6.971.994.994,0,0,0,1.116-.833A5,5,0,0,1,20,15c0,.146-.007.289-.02.433a1,1,0,0,0,.5.959A3.007,3.007,0,0,1,22,19Z' /%3E%3C/svg%3E");
  background-size: 17px 17px;
}
#mtk-weather .mtk-weather-control-temperature-icon {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%232a3561'%3E%3Cpath d='M14,4.5a4.5,4.5,0,0,0-9,0v9.438a.248.248,0,0,1-.06.162A5.941,5.941,0,0,0,3.5,18a6,6,0,0,0,12,0,5.941,5.941,0,0,0-1.44-3.9.248.248,0,0,1-.06-.162ZM9.5,22a4,4,0,0,1-2.8-6.856A1,1,0,0,0,7,14.43V4.5a2.5,2.5,0,0,1,5,0v9.93a1,1,0,0,0,.3.714A4,4,0,0,1,9.5,22Z'/%3E%3Cpath d='M10.611,16.337a.25.25,0,0,1-.111-.208V8.5a1,1,0,0,0-2,0v7.629a.25.25,0,0,1-.111.208,2,2,0,1,0,2.222,0Z'/%3E%3Cpath d='M19.5,11.5H17a1,1,0,0,0,0,2h2.5a1,1,0,0,0,0-2Z'/%3E%3Cpath d='M17,5.5h2.5a1,1,0,0,0,0-2H17a1,1,0,0,0,0,2Z'/%3E%3Cpath d='M19.5,7.5H17a1,1,0,0,0,0,2h2.5a1,1,0,0,0,0-2Z'/%3E%3C/svg%3E");
  background-size: 17px 17px;
}
#mtk-weather .mtk-weather-control-precipitation-icon {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%232a3561'%3E%3Cpath d='M12.842.447a1.036,1.036,0,0,0-1.684,0C11.086.558,4,11.735,4,15.986a8,8,0,0,0,16,0C20,11.736,12.914.558,12.842.447ZM12,21.236a5.256,5.256,0,0,1-5.25-5.25.75.75,0,0,1,1.5,0A3.755,3.755,0,0,0,12,19.736a.75.75,0,1,1,0,1.5Z'/%3E%3C/svg%3E");
  background-size: 17px 17px;
}
#mtk-weather .mtk-weather-control-wind-icon {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%232a3561'%3E%3Cpath d='M20.88,5.3a2.54,2.54,0,0,0-2.54,2.53,1,1,0,1,0,2,0,.54.54,0,0,1,.54-.53.92.92,0,0,1,.92.92,1.4,1.4,0,0,1-1.4,1.4H1.2a1,1,0,1,0,0,2H20.4a3.41,3.41,0,0,0,3.4-3.4A2.92,2.92,0,0,0,20.88,5.3Z'/%3E%3Cpath d='M1.2,7.29h12a3.19,3.19,0,0,0,3.18-3.18,2.75,2.75,0,0,0-2.75-2.75,2.36,2.36,0,0,0-1.4.45,1,1,0,0,0,1.17,1.62.45.45,0,0,1,.23-.07.74.74,0,0,1,.75.75,1.18,1.18,0,0,1-1.18,1.18H1.2a1,1,0,0,0,0,2Z'/%3E%3Cpath d='M12.7,13.94H1.2a1,1,0,0,0,0,2H12.7a2.72,2.72,0,0,1,2.72,2.72,2,2,0,0,1-2,2,1.38,1.38,0,0,1-1.38-1.38,1,1,0,0,0-2,0,3.39,3.39,0,0,0,3.38,3.38,4,4,0,0,0,4-4A4.73,4.73,0,0,0,12.7,13.94Z'/%3E%3C/svg%3E");
  background-size: 17px 17px;
}

/* MTK Title Control */
#mtk-weather .mtk-title-control {
  height: 60px; /* fixed height for easier placement */
  margin: 32px 0 calc(-60px - 10px) calc(25px + 36px + 30px); /* control-margin-top 0 -fixed-height - control-space control margin-left + control button size + custom space */
  background: none;
  box-shadow: none;
  pointer-events: none;
}
#mtk-weather .mtk-title-control h1 {
  margin: 0;
  font-size: 36px;
  color: var(--primary-90);
  text-shadow: 2px 2px 1px #fff, 1px 1px 4px rgba(0, 0, 0, 0.5);
}

/* MTK.ScaleControl */
#mtk-weather .mtk-scale-control:not(:empty) {
  width: 36px;
}
#mtk-weather .mtk-scale-control .mtk-scale-control-label {
  padding: 2px 0;
  font-size: 12px;
}

/* MTK.DaytimeControl */
#mtk-weather .mtk-daytime-control-button {
  font-size: 15px;
}
#mtk-weather .mtk-daytime-control-slider-progress {
  background: var(--secondary-60);
}
#mtk-weather .mtk-daytime-control-label {
  background: var(--primary-80);
  color: var(--neutral-white);
  font-weight: bold;
  font-size: 13px;
  padding: 2px 5px 3px 6px;
}
#mtk-weather .mtk-daytime-control-label::after {
  background: var(--secondary-60);
  box-shadow: var(--ui-overlay-shadow);
}

/* MTK.StyleControl */
#mtk-weather .mtk-control-styles {
  background-color: var(--ui-background);
  border-radius: var(--ui-radius);
  box-shadow: var(--ui-overlay-shadow);
}
#mtk-weather button.mtk-control-styles-current {
  padding: 6px;
  width: auto;
  height: auto;
}
#mtk-weather .mtk-control-styles-current-name {
  top: 0;
  right: 0;
  left: auto;
  bottom: auto;
  width: auto;
  margin: 6px;
  padding: 2px 4px 0px 4px;
  border-radius: 0 var(--ui-radius) 0 var(--ui-radius);
  font-size: 12px;
  font-weight: bold;
  background-color: var(--primary-80);
  color: var(--neutral-white);
}
#mtk-weather .mtk-control-styles-current-image {
  width: 70px;
  height: 70px;
  border-color: var(--primary-80);
  border-radius: var(--ui-radius);
}
#mtk-weather .mtk-control-styles-groups {
  top: 0;
  right: 0;
  margin: 0 92px 0 0;
  background-color: var(--ui-background);
  padding: 6px;
  border-radius: var(--ui-radius);
  box-shadow: var(--ui-overlay-shadow);
}
@media only screen and (max-width: 768px) {
  #mtk-weather .mtk-control-styles-groups {
    margin: 0;
    overflow: auto;
  }
}
#mtk-weather .mtk-control-styles-groups .mtk-control-styles-close {
  margin: 13px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg' fill='%239b9db0' transform='rotate(45)'%3E%3Cpath d='M6 0c-.621 0-1.125.504-1.125 1.125v3.75h-3.75a1.125 1.125 0 000 2.25h3.75v3.75a1.125 1.125 0 002.25 0v-3.75h3.75a1.125 1.125 0 000-2.25h-3.75v-3.75C7.125.504 6.621 0 6 0z'%3E%3C/path%3E%3C/svg%3E");
}
#mtk-weather .mtk-control-styles-groups .mtk-control-styles-close:hover {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg' fill='%232a3561' transform='rotate(45)'%3E%3Cpath d='M6 0c-.621 0-1.125.504-1.125 1.125v3.75h-3.75a1.125 1.125 0 000 2.25h3.75v3.75a1.125 1.125 0 002.25 0v-3.75h3.75a1.125 1.125 0 000-2.25h-3.75v-3.75C7.125.504 6.621 0 6 0z'%3E%3C/path%3E%3C/svg%3E");
}
#mtk-weather .mtk-control-styles-groups .mtk-control-styles-group .mtk-control-styles-group-name {
  font-size: 18px;
  color: var(--primary-90);
}
#mtk-weather .mtk-control-styles-groups .mtk-control-styles-group .mtk-control-styles-group-list .mtk-control-styles-group-list-item > button {
  position: relative;
  width: 70px;
  border-radius: var(--ui-radius);
}
#mtk-weather
  .mtk-control-styles-groups
  .mtk-control-styles-group
  .mtk-control-styles-group-list
  .mtk-control-styles-group-list-item
  > button
  .mtk-control-styles-group-list-item-image {
  height: 70px;
  padding: 0;
  border-radius: var(--ui-radius);
}
#mtk-weather
  .mtk-control-styles-groups
  .mtk-control-styles-group
  .mtk-control-styles-group-list
  .mtk-control-styles-group-list-item
  > button
  .mtk-control-styles-group-list-item-name {
  position: absolute;
  top: 0;
  right: 0;
  padding: 0 2px 0px 4px;
  margin: 2px 2px 0 0;
  border-radius: 0 calc(var(--ui-radius) / 2) 0 var(--ui-radius);
  font-size: 12px;
  font-weight: bold;
  background-color: var(--neutral-white);
  color: var(--primary-90);
}
#mtk-weather
  .mtk-control-styles-groups
  .mtk-control-styles-group
  .mtk-control-styles-group-list
  .mtk-control-styles-group-list-item
  > button:hover
  .mtk-control-styles-group-list-item-image {
  border-color: var(--primary-80);
}
#mtk-weather
  .mtk-control-styles-groups
  .mtk-control-styles-group
  .mtk-control-styles-group-list
  .mtk-control-styles-group-list-item-active
  > button
  .mtk-control-styles-group-list-item-image {
  opacity: 1;
  border-color: var(--primary-80);
}
#mtk-weather
  .mtk-control-styles-groups
  .mtk-control-styles-group
  .mtk-control-styles-group-list
  .mtk-control-styles-group-list-item-active
  > button
  .mtk-control-styles-group-list-item-name {
  background-color: var(--primary-80);
  color: var(--neutral-white);
}
#mtk-weather .mtk-control-styles-groups .mtk-control-styles-expand {
  margin: 13px auto 0 auto;
  color: var(--neutral-40);
  font-weight: bold;
}
#mtk-weather .mtk-control-styles-groups .mtk-control-styles-expand:hover {
  color: var(--primary-90);
}