/* MAP */
.maplibregl-map,
.maplibregl-map button,
.maplibregl-map select,
.maplibregl-map textarea,
.maplibregl-map input {
  font-family: "commissioner";
  font-size: 13px;
}
/* MapLibreGL Controls */
.maplibregl-ctrl-top-center .maplibregl-ctrl:not(.maplibregl-ctrl-attrib) {
  margin: 20px 0 0 0;
}
.maplibregl-ctrl-bottom-center .maplibregl-ctrl:not(.maplibregl-ctrl-attrib) {
  margin: 0 0 20px 0;
}
.maplibregl-ctrl-top-left .maplibregl-ctrl:not(.maplibregl-ctrl-attrib) {
  margin: 10px 0 0 20px;
}
.maplibregl-ctrl-top-right .maplibregl-ctrl:not(.maplibregl-ctrl-attrib) {
  margin: 10px 20px 0 0;
}
.maplibregl-ctrl-bottom-left .maplibregl-ctrl:not(.maplibregl-ctrl-attrib) {
  margin: 0 0 10px 20px;
}
.maplibregl-ctrl-bottom-right .maplibregl-ctrl:not(.maplibregl-ctrl-attrib) {
  margin: 0 20px 10px 0;
}
.maplibregl-ctrl-top-left .maplibregl-ctrl:not(.maplibregl-ctrl-attrib):first-child {
  margin: 20px 0 0 20px;
}
.maplibregl-ctrl-top-right .maplibregl-ctrl:not(.maplibregl-ctrl-attrib):first-child {
  margin: 20px 20px 0 0;
}
.maplibregl-ctrl-top-left .maplibregl-ctrl.maplibregl-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 20px 20px;
}
.maplibregl-ctrl-bottom-right .maplibregl-ctrl:not(.maplibregl-ctrl-attrib):last-child {
  margin: 0 20px 20px 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;
}
.maplibregl-ctrl-group {
  border-radius: 10px;
}
.maplibregl-ctrl-group:not(:empty) {
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.25);
}
.maplibregl-ctrl-group button {
  width: 36px;
  height: 36px;
}
.maplibregl-ctrl-group button:first-child,
.maplibregl-ctrl-group button:focus:first-child {
  border-radius: 10px 10px 0 0;
}
.maplibregl-ctrl-group button:last-child,
.maplibregl-ctrl-group button:focus:last-child {
  border-radius: 0 0 10px 10px;
}
.maplibregl-ctrl-group button:first-child:last-child {
  border-radius: 10px;
}
.maplibregl-ctrl-group.maplibregl-ctrl-group-inline button:first-child,
.maplibregl-ctrl-group.maplibregl-ctrl-group-inline button:focus:first-child {
  border-radius: 10px 0 0 10px;
}
.maplibregl-ctrl-group.maplibregl-ctrl-group-inline button:last-child,
.maplibregl-ctrl-group.maplibregl-ctrl-group-inline button:focus:last-child {
  border-radius: 0 10px 10px 0;
}
.maplibregl-ctrl-group.maplibregl-ctrl-group-inline button:first-child:last-child {
  border-radius: 10px;
}
.maplibregl-ctrl button:not(:disabled):hover {
  background-color: rgba(0, 0, 0, 0.05);
}
.maplibregl-ctrl button:not(:disabled):active {
  background-color: rgba(0, 0, 0, 0.1);
}
.maplibregl-ctrl-group select,
.maplibregl-ctrl-group input {
  border-radius: 10px;
}
/* MapLibreGL Popup */
.maplibregl-popup-content {
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 2px 5px 0 rgb(0, 0, 0, 0.25);
}
/* MapLibreGL Modal */
.maplibregl-modal-container {
  padding: 20px;
}
.maplibregl-modal-window {
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 2px 5px 0 rgb(0, 0, 0, 0.25);
}
.maplibregl-modal-close-button {
  border-radius: 0 10px 0 0;
}
/* NavigationControl */
.maplibregl-ctrl button.maplibregl-ctrl-compass .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='%23f00'%3E%3Cpath d='M10.5 14l4-8 4 8h-8z'/%3E%3Cpath d='M10.5 16l4 8 4-8h-8z' fill='%23292929'/%3E%3C/svg%3E");
}
/* Geocoder */
.mtk-geocoder input {
  height: 36px;
  padding: 0 36px 0 36px;
}
.mtk-geocoder-magnify {
  width: 16px;
  height: 16px;
  margin: 10px;
  background-size: 16px 16px;
}
.mtk-geocoder-loading::after {
  margin: 10px;
  width: 16px;
  height: 16px;
}
.mtk-geocoder-autocomplete {
  font-size: 14px;
  border-radius: 10px;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.25);
}
/* Styles */
.mtk-control-styles.mtk-control-styles-top-left .mtk-control-styles-groups,
.mtk-control-styles.mtk-control-styles-bottom-left .mtk-control-styles-groups {
  margin: 0 0 0 95px;
}
.mtk-control-styles.mtk-control-styles-top-right .mtk-control-styles-groups,
.mtk-control-styles.mtk-control-styles-bottom-right .mtk-control-styles-groups {
  margin: 0 95px 0 0;
}
.mtk-control-styles .mtk-control-styles-current {
  width: 85px;
  height: 85px;
}
.mtk-control-styles .mtk-control-styles-group-name {
  font-weight: 600;
}
.mtk-control-styles .mtk-control-styles-current .mtk-control-styles-current-image {
  border-radius: 20px;
  border: 4px solid transparent;
}
.mtk-control-styles .mtk-control-styles-current .mtk-control-styles-current-name {
  pointer-events: none;
  border-radius: 0 0 10px 10px;
}
.mtk-control-styles .mtk-control-styles-group-list-item .mtk-control-styles-group-list-item-image {
  border-radius: 10px;
}
.mtk-control-styles .mtk-control-styles-group-list-item button:hover,
.mtk-control-styles .mtk-control-styles-group-list-item button:active {
  background-color: unset;
}
@media only screen and (max-width: 768px) {
  .mtk-control-styles.mtk-control-styles-top-left .mtk-control-styles-groups,
  .mtk-control-styles.mtk-control-styles-top-right .mtk-control-styles-groups,
  .mtk-control-styles.mtk-control-styles-bottom-left .mtk-control-styles-groups,
  .mtk-control-styles.mtk-control-styles-bottom-right .mtk-control-styles-groups {
    margin: 0;
  }
}
/* Scale */
.mtk-scale-control:not(:empty) {
  width: 36px;
}
/* Daytime */
.mtk-daytime-control-label {
  padding: 4px 7px 5px 7px;
  border-radius: 10px;
  box-shadow: 0 2px 5px 0 rgb(0, 0, 0, 0.25);
  font-size: 12px;
}
.mtk-daytime-control-label::after {
  box-shadow: 0 2px 5px 0 rgb(0, 0, 0, 0.25);
}
/* Editor GUI */
.mtk-editor-gui {
  font-size: 13px;
}
.mtk-editor-gui .maplibregl-ctrl-group-inline:first-child {
  margin: 20px 0 -46px 76px !important;
}
/* 3D */
.mtk-3d-control button {
  font-size: 15px;
}
/* Pitch */
.mtk-pitch-control {
  width: 36px;
}
.maplibregl-ctrl.mtk-pitch-control:not(.mtk-active) {
  margin-top: -10px;
}
.mtk-pitch-control-slide {
  width: 6px;
  margin: 0 15px;
  border-width: 2px;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.25);
}
.mtk-pitch-control-knob {
  width: 16px;
  height: 16px;
  margin: 0px 10px;
  border-width: 5px;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.25);
}
/* Compass */
.maplibregl-ctrl-top-left .maplibregl-ctrl.mtk-compass-control,
.maplibregl-ctrl-bottom-left .maplibregl-ctrl.mtk-compass-control {
  margin-left: 14px;
}
.maplibregl-ctrl-top-right .maplibregl-ctrl.mtk-compass-control,
.maplibregl-ctrl-bottom-right .maplibregl-ctrl.mtk-compass-control {
  margin-right: 14px;
}
.mtk-compass-control {
  width: 48px;
  height: 48px;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.25);
}
.mtk-compass-control-img {
  width: 48px;
  height: 48px;
}
.mtk-compass-control-arrow-left {
  background-size: 60px;
  background-position: -3px -6px;
}
.mtk-compass-control-arrow-right {
  background-size: 60px;
  background-position: -41px -6px;
}
/* Elevationprofile */
.maplibregl-ctrl-top-left .mtk-elevation-profile.maplibregl-ctrl,
.maplibregl-ctrl-top-right .mtk-elevation-profile.maplibregl-ctrl,
.maplibregl-ctrl-bottom-left .mtk-elevation-profile.maplibregl-ctrl,
.maplibregl-ctrl-bottom-right .mtk-elevation-profile.maplibregl-ctrl {
  box-sizing: border-box;
  margin-left: 0;
  margin-right: 0;
  padding: 0 20px;
}
@media only screen and (max-width: 450px) {
  .maplibregl-ctrl-top-left .mtk-elevation-profile.maplibregl-ctrl,
  .maplibregl-ctrl-top-right .mtk-elevation-profile.maplibregl-ctrl,
  .maplibregl-ctrl-bottom-left .mtk-elevation-profile.maplibregl-ctrl,
  .maplibregl-ctrl-bottom-right .mtk-elevation-profile.maplibregl-ctrl {
    padding: 0 10px;
  }
}
/* MTK Logo */
.maplibregl-ctrl-top-left .maplibregl-ctrl.mtk-control-logo:first-child,
.maplibregl-ctrl-top-right .maplibregl-ctrl.mtk-control-logo:first-child {
  margin: 0 0 10px 0;
}
.maplibregl-ctrl-bottom-left .maplibregl-ctrl.mtk-control-logo:last-child,
.maplibregl-ctrl-bottom-right .maplibregl-ctrl.mtk-control-logo:last-child {
  margin: 10px 0 0 0;
}
/* Polygon Editor */
.mtk-polygon-editor-connector-dropdown .mtk-polygon-editor-connector-dropdown-button {
  padding: 0 10px;
}
.mtk-polygon-editor-connector-map-popup .mtk-polygon-editor-connector-map-popup-list-button {
  padding: 0 10px;
  height: 36px;
}
/* FONTS */
/* Noto Serif */
@font-face {
  font-family: "noto-serif";
  src: url("https://static.maptoolkit.net/fonts/NotoSerif/NotoSerif-Regular.ttf");
  font-display: auto;
  font-style: normal;
  font-weight: 400;
}
@font-face {
  font-family: "noto-serif";
  src: url("https://static.maptoolkit.net/fonts/NotoSerif/NotoSerif-Italic.ttf");
  font-display: auto;
  font-style: italic;
  font-weight: 400;
}
@font-face {
  font-family: "noto-serif";
  src: url("https://static.maptoolkit.net/fonts/NotoSerif/NotoSerif-Bold.ttf");
  font-display: auto;
  font-style: normal;
  font-weight: 700;
}
@font-face {
  font-family: "noto-serif";
  src: url("https://static.maptoolkit.net/fonts/NotoSerif/NotoSerif-BoldItalic.ttf");
  font-display: auto;
  font-style: italic;
  font-weight: 700;
}
/* Commissioner */
@font-face {
  font-family: "commissioner";
  font-style: normal;
  font-weight: 100;
  font-display: auto;
  src: url("https://static.maptoolkit.net/fonts/Commissioner/Commissioner-Thin.ttf");
}
@font-face {
  font-family: "commissioner";
  font-style: normal;
  font-weight: 200;
  font-display: auto;
  src: url("https://static.maptoolkit.net/fonts/Commissioner/Commissioner-ExtraLight.ttf");
}
@font-face {
  font-family: "commissioner";
  font-style: normal;
  font-weight: 300;
  font-display: auto;
  src: url("https://static.maptoolkit.net/fonts/Commissioner/Commissioner-Light.ttf");
}
@font-face {
  font-family: "commissioner";
  font-style: normal;
  font-weight: 400;
  font-display: auto;
  src: url("https://static.maptoolkit.net/fonts/Commissioner/Commissioner-Regular.ttf");
}
@font-face {
  font-family: "commissioner";
  font-style: normal;
  font-weight: 500;
  font-display: auto;
  src: url("https://static.maptoolkit.net/fonts/Commissioner/Commissioner-Medium.ttf");
}
@font-face {
  font-family: "commissioner";
  font-style: normal;
  font-weight: 600;
  font-display: auto;
  src: url("https://static.maptoolkit.net/fonts/Commissioner/Commissioner-SemiBold.ttf");
}
@font-face {
  font-family: "commissioner";
  font-style: normal;
  font-weight: 700;
  font-display: auto;
  src: url("https://static.maptoolkit.net/fonts/Commissioner/Commissioner-Bold.ttf");
}
@font-face {
  font-family: "commissioner";
  font-style: normal;
  font-weight: 800;
  font-display: auto;
  src: url("https://static.maptoolkit.net/fonts/Commissioner/Commissioner-ExtraBold.ttf");
}
@font-face {
  font-family: "commissioner";
  font-style: normal;
  font-weight: 800;
  font-display: auto;
  src: url("https://static.maptoolkit.net/fonts/Commissioner/Commissioner-Black.ttf");
}

/* HEADINGS */
[class*="mtk-heading-"] {
  font-family: "commissioner";
  font-weight: 600;
  color: #333333;
  margin: 10px 0 16px 0;
}
/* Heading 1 */
.mtk-heading-1 {
  font-size: 37px;
}
/* Heading 2 */
.mtk-heading-2 {
  font-size: 31px;
}
/* Heading 3 */
.mtk-heading-3 {
  font-size: 27px;
}
/* Heading 4 */
.mtk-heading-4 {
  font-size: 23px;
}
/* Heading 5 */
.mtk-heading-5 {
  font-size: 19px;
}
/* Heading 6 */
.mtk-heading-6 {
  font-size: 16px;
}

/* PARAGRAPHS */
.mtk-paragraph {
  font-family: "noto-serif";
  font-size: 14px;
  color: #333333;
  margin: 8px 0 14px 0;
}

/* BUTTONS */
[class*="mtk-button-"]:not(.mtk-button-icon) {
  border: none;
  outline: none;
  cursor: pointer;
  /* font-family: "noto-serif"; */
  font-family: "commissioner";
  font-size: 13px;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.25);
  min-height: 38px;
  padding: 8px 14px;
  border-radius: 999px;
}
[class*="mtk-button-"]:not(.mtk-button-icon):disabled {
  cursor: not-allowed;
}
[class*="mtk-button-"] > div {
  display: flex;
  align-items: center;
}
[class*="mtk-button-"] > div > .mtk-button-icon {
  width: 22px;
  height: 22px;
}
[class*="mtk-button-"] > div > .mtk-button-icon + *,
[class*="mtk-button-"] > div > * + .mtk-button-icon {
  margin-left: 6px;
}
/* Button Primary */
.mtk-button-primary {
  background-color: #303f7e;
  color: #ffffff;
}
.mtk-button-primary .mtk-button-icon {
  fill: #ffffff;
  color: #ffffff;
}
.mtk-button-primary:hover {
  background-color: #29366e; /* brightness -25% (0.75) */
}
.mtk-button-primary:active {
  background-color: #202c5b; /* brightness -50% (0.50) */
}
.mtk-button-primary:disabled {
  background-color: #373f5f;
  color: #dddddd;
  cursor: not-allowed;
}
.mtk-button-primary:disabled > div > .mtk-button-icon {
  fill: #dddddd;
  color: #dddddd;
}
/* Button Secondary */
.mtk-button-secondary {
  background-color: #fa3f38;
  color: #ffffff;
}
.mtk-button-secondary .mtk-button-icon {
  fill: #ffffff;
  color: #ffffff;
}
.mtk-button-secondary:hover {
  background-color: #e93a33; /* brightness -25% (0.85) */
}
.mtk-button-secondary:active {
  background-color: #d6342e; /* brightness -50% (0.70) */
}
.mtk-button-secondary:disabled {
  background-color: #b15350;
  color: #dddddd;
  cursor: not-allowed;
}
.mtk-button-secondary:disabled > div > .mtk-button-icon {
  fill: #dddddd;
  color: #dddddd;
}

/* INPUTS */
.mtk-input {
  border: none;
  outline: none;
  font-family: "commissioner";
  font-size: 13px;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.25);
  min-height: 38px;
  padding: 8px 14px;
  border-radius: 999px;
}

/* MODAL */
.mtk-modal {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.25);
  padding: 20px;
  color: #333333;
  box-sizing: border-box;
}
.mtk-modal-window:not(:empty) {
  position: relative;
  width: 500px;
  max-width: 100%;
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0 2px 5px 0 rgb(0 0 0 / 25%);
  padding: 20px;
}
.mtk-modal-window-close-button {
  position: absolute;
  top: 0;
  right: 0;
  border: unset;
  outline: unset;
  background: none;
  width: 14px;
  height: 14px;
  margin: 12px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23303f7e'%3E%3Cpath d='M14.3,12.179a.25.25,0,0,1,0-.354l9.263-9.262A1.5,1.5,0,0,0,21.439.442L12.177,9.7a.25.25,0,0,1-.354,0L2.561.442A1.5,1.5,0,0,0,.439,2.563L9.7,11.825a.25.25,0,0,1,0,.354L.439,21.442a1.5,1.5,0,0,0,2.122,2.121L11.823,14.3a.25.25,0,0,1,.354,0l9.262,9.263a1.5,1.5,0,0,0,2.122-2.121Z' /%3E%3C/svg%3E");
  background-size: 100%;
  cursor: pointer;
}

/* FILEDROP */
.mtk-filedrop {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border: 2px dashed #303f7e;
  border-radius: 10px;
  font-family: "commissioner";
  font-size: 14px;
  color: #333333;
  padding: 25px;
}
.mtk-filedrop .mtk-filedrop-icon {
  width: 72px;
  height: 72px;
  fill: #d1d1d1;
  color: #d1d1d1;
  pointer-events: none;
}
.mtk-filedrop .mtk-filedrop-text {
  margin: 10px 0 0 0;
  text-align: center;
  pointer-events: none;
}
.mtk-filedrop .mtk-filedrop-button {
  margin: 10px 0 0 0;
}
.mtk-filedrop.mtk-active {
  border-style: solid;
}
.mtk-filedrop.mtk-active .mtk-filedrop-icon {
  fill: #303f7e;
  color: #303f7e;
}
.mtk-filedrop input[type="file"] {
  display: none;
}

/* LOADING */
/* Circle 1 */
.mtk-loading-circle1 {
  width: 1.2em;
  height: 1.2em;
  background: none;
  border-radius: 50%;
  border: 0.2em solid transparent;
  border-top-color: #303f7e;
  box-sizing: border-box;
  animation: spin 750ms linear infinite;
}
/* Circle 2 */
.mtk-loading-circle2 {
  width: 1.2em;
  height: 1.2em;
  background: none;
  border-radius: 50%;
  border: 0.2em solid #303f7e;
  border-top-color: transparent;
  border-bottom-color: transparent;
  box-sizing: border-box;
  animation: spin 750ms linear infinite;
}
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}