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

.leaflet-container {
  .leaflet-control-attribution-elane {
    margin: 0;
    margin-right: 0;
    margin-bottom: 0;
    padding: 0 5px;
    background-color: rgb(255 255 255 / 70%);
    box-shadow: 0 0 5px #bbb;
    color: #0078a8;
    font: 11px/1.5 'Helvetica Neue', Arial, Helvetica, sans-serif;
  }

  .leaflet-control-mouseposition {
    width: 90px;
    margin: 0;
    margin-right: 10px;
    margin-bottom: 10px;
    padding: 0 5px;
    border-radius: 3px;
    background-color: rgb(255 255 255 / 70%);
    box-shadow: 3px 4px 10px #363636;
    color: #333;
    font-family: 'Microsoft Yahei';
    font-size: 12px;
    cursor: auto;
  }

  a {
    -webkit-tap-highlight-color: rgb(51 181 229 / 40%);
    color: #0078a8;

    &.leaflet-active {
      outline: 2px solid orange;
    }
  }
}

.basemaps {
  padding: 4px;

  &.hide {
    display: none;
  }

  &.closed {
    .basemap {
      display: none;

      &.alt {
        display: inline-block;

        h4 {
          display: none;
        }
      }
    }
  }
}

.basemap {
  display: inline-block;
  margin: 0 2px;
  cursor: pointer;

  &.active {
    img {
      border-color: #ccc;
      box-shadow: 5px 5px 10px #000;
    }
  }

  img {
    width: 64px;
    margin: 0 1px;
    border: 0 solid #fff;
    border-radius: 40px;
    box-shadow: 5px 5px 20px rgb(0 0 0 / 65%);
  }
}

.leaflet-control {
  // position: relative;
  // z-index: 800;
  box-sizing: content-box;
  // float: left;
  // clear: both;
  cursor: pointer;
  // pointer-events: visiblepainted;
  // pointer-events: auto;
}

.polyline-measure-unicode-icon {
  font-size: 19px;
  font-weight: bold;
}

a {
  &.polyline-measure-clearControl {
    &:active {
      background-color: #f88;
    }
  }
}

.polyline-measure-tooltip {
  width: auto !important;
  height: auto !important;
  margin: 0;
  padding: 2px;
  border-radius: 3px;
  background-color: inherit;
  box-shadow: none;
  font: 10px Arial, Helvetica, sans-serif;
  line-height: 10px;
  text-align: right;
  white-space: nowrap;
}

.polyline-measure-tooltip-end {
  background-color: inherit;
}

.polyline-measure-tooltip-total {
  display: inline-block;
  border: 0;
  background-color: inherit;
  box-shadow: none;
  color: #006;
  font-family: 'Microsoft Yahei';
  font-size: 14px;
  font-weight: bold;
  -webkit-text-shadow: #fff 1px 0 0, #fff 0 1px 0, #fff -1px 0 0, #fff 0 -1px 0;
  -moz-text-shadow: #fff 1px 0 0, #fff 0 1px 0, #fff -1px 0 0, #fff 0 -1px 0;
  text-shadow: #fff 1px 0 0, #fff 0 1px 0, #fff -1px 0 0, #fff 0 -1px 0;
  white-space: nowrap;
}

.polyline-measure-tooltip-difference {
  display: none;
  margin-bottom: 4px;
  color: #060;
  font-size: 14px;
}

.polyline-measure-popupTooltip {
  font: 11px Arial, Helvetica, sans-serif;
  line-height: 11px;
}

.polyline-measure-scale {
  font-weight: bold;
  vertical-align: top;
}

.polyline-measure-scale-one {
  color: #666;
  font-size: 12px;
  font-weight: 100;
  line-height: 12px;
}

.polyline-measure-scale-two {
  color: #666;
  font-size: 8px;
  font-weight: 100;
  line-height: 10px;
}

.polyline-measure-scale-one-wx {
  color: #ededed;
  font-size: 12px;
  font-weight: 100;
  line-height: 12px;
}

.polyline-measure-scale-two-wx {
  color: #ededed;
  font-size: 4px;
  font-weight: 100;
  line-height: 8px;
}

.polyline-measure-scale-txt {
  width: 80px;
  margin-left: -10px;
  color: #2f302f;
  font-family: 'Microsoft Yahei';
  font-size: 10px;
}

.polyline-measure-scale-txt-wx {
  width: 80px;
  margin-left: -10px;
  color: #fff;
  font-family: 'Microsoft Yahei';
  font-size: 10px;
  text-shadow: 1px 1px 0 #2f302f;
}

.leaflet-control-messagebox {
  display: none;
  padding: 3px 15px;
  border: 1px solid #404040;
  border-radius: 4px;
  background-color: rgb(6 6 6 / 69%);
  color: #fff;
}

.leaflet-control-minimap {
  transition: all 0.6s;
  border: solid rgb(255 255 255 / 100%) 1px;
  border-radius: 3px;
  background: #f8f8f9;
  box-shadow: 0 1px 5px rgb(0 0 0 / 65%);

  a {
    z-index: 99999;
    transition: all 0.6s;
    background-color: rgb(255 255 255 / 100%);
    background-repeat: no-repeat;

    &.minimized-bottomright {
      transform: rotate(180deg);
      border-radius: 0;
    }

    &.minimized-topleft {
      transform: rotate(0deg);
      border-radius: 0;
    }

    &.minimized-bottomleft {
      transform: rotate(270deg);
      border-radius: 0;
    }

    &.minimized-topright {
      transform: rotate(90deg);
      border-radius: 0;
    }
  }
}

.leaflet-control-minimap-toggle-display-bottomright {
  right: 0;
  bottom: 0;
}

.leaflet-control-minimap-toggle-display-topleft {
  top: 0;
  left: 0;
  transform: rotate(180deg);
}

.leaflet-control-minimap-toggle-display-bottomleft {
  bottom: 0;
  left: 0;
  transform: rotate(90deg);
}

.leaflet-control-minimap-toggle-display-topright {
  top: 0;
  right: 0;
  transform: rotate(270deg);
}

/* Old IE */
.leaflet-control-mouseposition .lat,
.leaflet-control-mouseposition .lng {
  width: 100%;
  font-family: 'Microsoft Yahei';
  font-size: 12px;
  text-align: right;
  user-select: none;
}

.leaflet-control-zoomview-elane {
  width: 26px;
  height: 20px;
  overflow: hidden;
  border: 4px solid #6acde6;
  border-radius: 6px;
  color: red;
  font-family: tahoma;
  font-size: 14px;
  font-weight: unset;
  line-height: 20px;
  text-align: center;
}

.leaflet-container .leaflet-control-attribution,
.leaflet-container .leaflet-control-scale {
  font-size: 11px;
}

.leaflet-control-scale-line {
  box-sizing: border-box;
  padding: 2px 5px 1px;
  overflow: hidden;
  border: 2px solid #777;
  border-top: none;
  background: #fff;
  background: rgb(255 255 255 / 50%);
  font-size: 11px;
  line-height: 1.1;
  white-space: nowrap;

  &:not(:first-child) {
    margin-top: -2px;
    border-top: 2px solid #777;
    border-bottom: none;
  }

  &:not(:first-child):not(:last-child) {
    border-bottom: 2px solid #777;
  }
}

.leaflet-touch .leaflet-control-attribution,
.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
  box-shadow: none;
}

.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
  border: 2px solid rgb(0 0 0 / 20%);
  background-clip: padding-box;
}

/* popup */
.leaflet-popup {
  position: absolute;
  margin-bottom: 20px;
  text-align: center;
}

.leaflet-popup-content-wrapper {
  padding: 1px;
  border-radius: 12px;
  text-align: left;
}

.leaflet-popup-content {
  // width: auto !important;
  margin: 13px 19px;
  margin: 0;
  line-height: 1.4;

  p {
    margin: 18px 0;
  }
}

.leaflet-popup-tip-container {
  position: absolute;
  left: 50%;
  width: 40px;
  height: 20px;
  margin-left: -20px;
  overflow: hidden;
  pointer-events: none;
}

.leaflet-popup-tip {
  width: 17px;
  height: 17px;
  margin: -10px auto 0;
  padding: 1px;
  transform: rotate(45deg);
}

.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
  background: white;
  box-shadow: 0 3px 14px rgb(0 0 0 / 40%);
  color: #333;
}

.leaflet-popup-scrolled {
  overflow: auto;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
}

.leaflet-oldie .leaflet-control-zoom,
.leaflet-oldie .leaflet-control-layers,
.leaflet-oldie .leaflet-popup-content-wrapper,
.leaflet-oldie .leaflet-popup-tip {
  border: 1px solid #999;
}

/* div icon */
.leaflet-div-icon {
  border: 1px solid #666;
  background: #fff;
}

/* Tooltip */

/* Base styles for the element that has a tooltip */
.leaflet-tooltip {
  position: absolute;
  padding: 6px;
  border: 1px solid #fff;
  border-radius: 10px;
  background-color: #fff;
  box-shadow: 0 1px 3px rgb(0 0 0 / 40%);
  color: #222;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;

  &.leaflet-clickable {
    cursor: pointer;
    pointer-events: auto;
  }
}

.leaflet-tooltip-top::before,
.leaflet-tooltip-bottom::before,
.leaflet-tooltip-left::before,
.leaflet-tooltip-right::before {
  content: '';
  position: absolute;
  border: 6px solid transparent;
  background: transparent;
  pointer-events: none;
}

/* Directions */
.leaflet-tooltip-bottom {
  margin-top: 6px;

  &::before {
    top: 0;
    margin-top: -12px;
    margin-left: -6px;
    border-bottom-color: #fff;
  }
}

.leaflet-tooltip-top {
  margin-top: -6px;

  &::before {
    bottom: 0;
    margin-bottom: -12px;
    border-top-color: #fff;
  }
}

.leaflet-tooltip-bottom::before,
.leaflet-tooltip-top::before {
  left: 50%;
  margin-left: -6px;
}

.leaflet-tooltip-left {
  margin-left: -6px;

  &::before {
    right: 0;
    margin-right: -12px;
    border-left-color: #fff;
    border-left-color: transparent;
  }
}

.leaflet-tooltip-right {
  margin-left: 6px;

  &::before {
    left: 0;
    margin-left: -12px;
    border-right-color: #fff;
    border-right-color: transparent;
  }
}

.leaflet-tooltip-left::before,
.leaflet-tooltip-right::before {
  top: 50%;
  margin-top: -6px;
}

/* .marker-icon, */

/* .marker-icon:focus { */

/* background-color: #ffffff; */

/* border: 1px solid #3388ff; */

/* border-radius: 50%; */

/* margin: -8px 0 0 -8px !important; */

/* width: 14px !important; */

/* height: 14px !important; */

/* outline: 0; */

/* transition: opacity ease 0.3s; */

/* } */

/* .marker-icon-middle, */

/* .marker-icon-middle:focus { */

/* opacity: 0.7; */

/* margin: -6px 0 0 -6px !important; */

/* width: 10px !important; */

/* height: 10px !important; */

/* } */

/* hankin 20180608 */
.marker-icon,
.marker-icon:focus {
  width: 8px !important;
  height: 8px !important;
  margin: -5px 0 0 -5px !important;
  transition: opacity ease 0.3s;
  border: 1px solid #38f;
  border-radius: 50%;
  outline: 0;
  background-color: #fff;
}

.marker-icon-middle,
.marker-icon-middle:focus {
  width: 6px !important;
  height: 6px !important;
  margin: -4px 0 0 -4px !important;
  opacity: 0.7;
}

.leaflet-pm-draggable {
  cursor: move !important;
}

.cursor-marker {
  display: none;
  cursor: crosshair;
  pointer-events: none;

  &.visible {
    display: block !important;
  }
}

.leaflet-pm-invalid {
  transition: fill ease 0s, stroke ease 0s;
  stroke: red;
}

.rect-style-marker,
.rect-start-marker {
  opacity: 0;
}

.rect-style-marker.visible,
.rect-start-marker.visible {
  opacity: 1 !important;
}

.hidden {
  display: none;
}

.leaflet-pm-toolbar {
  .leaflet-buttons-control-button {
    box-sizing: border-box;
    padding: 3px;
  }

  .control-icon {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    opacity: 0.8;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
  }

  .leaflet-pm-icon-marker {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAAZCAYAAADTyxWqAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAABAhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDY3IDc5LjE1Nzc0NywgMjAxNS8wMy8zMC0yMzo0MDo0MiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1wTU06T3JpZ2luYWxEb2N1bWVudElEPSJ1dWlkOjY1RTYzOTA2ODZDRjExREJBNkUyRDg4N0NFQUNCNDA3IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjFENzY1MUQyODUzNzExRTU4RTQwRkQwODFEOUZEMEE3IiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjFENzY1MUQxODUzNzExRTU4RTQwRkQwODFEOUZEMEE3IiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDQyAyMDE1IChNYWNpbnRvc2gpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MTk5NzA1OGEtZDI3OC00NDZkLWE4ODgtNGM4MGQ4YWI1NzNmIiBzdFJlZjpkb2N1bWVudElEPSJhZG9iZTpkb2NpZDpwaG90b3Nob3A6YzRkZmQxMGMtY2NlNS0xMTc4LWE5OGQtY2NkZmM5ODk5YWYwIi8+IDxkYzp0aXRsZT4gPHJkZjpBbHQ+IDxyZGY6bGkgeG1sOmxhbmc9IngtZGVmYXVsdCI+Z2x5cGhpY29uczwvcmRmOmxpPiA8L3JkZjpBbHQ+IDwvZGM6dGl0bGU+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+bwCVTQAAARZJREFUeNqclQERwyAMRaEGhoRKmAQkVEIlIKESJgEJSNgcVELngClgcBd2LCWBkrt/t63JCwlLKkIIAiuaijJRe1RASr+tyecUVwHpqKMCwUo+moRBxnBR6wkGJ6JOYKMeRNlJdwzDpXlcRpEUQ48frFKez9mYC8LJ1/zQUX1ggLgtLj/460ELRLTGT1LKdOTSXqLfjuLzbUq9QQ6zGLVamQnYUaLCcRMwPyjH1nEOg76/qdtkb5SYFNsaI1f+36C/lvDV3ARc0ROP0zII8vnCcC/cAMxQK0hBpl6Qay3H5UJ5ioUBcOuA6eba7uyfqcY0xqW2WS0Z0zF/O3ozqSEYAGdotudASRICWIs77w4bZuf8vgIMAAI1tNMVERhgAAAAAElFTkSuQmCC');
  }

  .leaflet-pm-icon-polygon {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAZCAYAAAAv3j5gAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAABAhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDY3IDc5LjE1Nzc0NywgMjAxNS8wMy8zMC0yMzo0MDo0MiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1wTU06T3JpZ2luYWxEb2N1bWVudElEPSJ1dWlkOjY1RTYzOTA2ODZDRjExREJBNkUyRDg4N0NFQUNCNDA3IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkQwM0ZDNzlCODUzNDExRTU4RTQwRkQwODFEOUZEMEE3IiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkQwM0ZDNzlBODUzNDExRTU4RTQwRkQwODFEOUZEMEE3IiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDQyAyMDE1IChNYWNpbnRvc2gpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MTk5NzA1OGEtZDI3OC00NDZkLWE4ODgtNGM4MGQ4YWI1NzNmIiBzdFJlZjpkb2N1bWVudElEPSJhZG9iZTpkb2NpZDpwaG90b3Nob3A6YzRkZmQxMGMtY2NlNS0xMTc4LWE5OGQtY2NkZmM5ODk5YWYwIi8+IDxkYzp0aXRsZT4gPHJkZjpBbHQ+IDxyZGY6bGkgeG1sOmxhbmc9IngtZGVmYXVsdCI+Z2x5cGhpY29uczwvcmRmOmxpPiA8L3JkZjpBbHQ+IDwvZGM6dGl0bGU+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+qfabAwAAAYxJREFUeNqsVj1PwzAUjKtuCMHOViExIRXEQNUOjEiIj5GNEXUiDPwJOtD+g1SMLFUnRtgR4hcgdWEGVczh3L6WlxfHsVOfdHIdO3ft1X62StM0coVSKjMZ7yrXd2uRJ7S4j4GXEX7JJtg3PO/rMddvaCXQBD/01ALqsWapTolJLESfwEvwlD7zsdimpUyLgeJIwHN6NAUfwDcx9QC8Bdep/wpeQPM7pymNYHKEZgRu0KN3sAf+FqS/Bt6B+9T/IbOXQiP6w2/Y+CNF5IIT8Jr1B9COl9qUr8QXeA9+eq7iBtgFd3LRzRfefF/QhnwGh5aoyqCjvAKPua7J6CwKgzHXrZtKSyhw3Rq5DtgyDoUpWxRqUYISavV+2A1gcsj2VrKsdXDUZWRCA3sBjLapnZB2pqiOqG0FMGoLzYzRIr4t2g9V0SANrvlvJOLrrGDUkbGZzqMQ8bVkbCajVeMzxpYzChCfMbaiY0JWCdeSNLZdXIxGovZ5XVykRuVbUFXUy4qh69VqdhRYEvgTYAAqrQMfMqEIJwAAAABJRU5ErkJggg==');
  }

  .leaflet-pm-icon-polyline {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAABAhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDY3IDc5LjE1Nzc0NywgMjAxNS8wMy8zMC0yMzo0MDo0MiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1wTU06T3JpZ2luYWxEb2N1bWVudElEPSJ1dWlkOjY1RTYzOTA2ODZDRjExREJBNkUyRDg4N0NFQUNCNDA3IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkQwM0ZDNzlGODUzNDExRTU4RTQwRkQwODFEOUZEMEE3IiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkQwM0ZDNzlFODUzNDExRTU4RTQwRkQwODFEOUZEMEE3IiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDQyAyMDE1IChNYWNpbnRvc2gpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MTk5NzA1OGEtZDI3OC00NDZkLWE4ODgtNGM4MGQ4YWI1NzNmIiBzdFJlZjpkb2N1bWVudElEPSJhZG9iZTpkb2NpZDpwaG90b3Nob3A6YzRkZmQxMGMtY2NlNS0xMTc4LWE5OGQtY2NkZmM5ODk5YWYwIi8+IDxkYzp0aXRsZT4gPHJkZjpBbHQ+IDxyZGY6bGkgeG1sOmxhbmc9IngtZGVmYXVsdCI+Z2x5cGhpY29uczwvcmRmOmxpPiA8L3JkZjpBbHQ+IDwvZGM6dGl0bGU+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+KUUD2gAAAJhJREFUeNq01dsNwCAIhWHZyO4/RDtKN6DwYKP2ouDBhNhL8n+PEDMn5CGiJkgRgBwqz1BAglmuvQaSAoiRo/FThpsJiOud73+R8WVgFF8CZuJuYDbuAixxM2CNmwBPfBrwxqeAlfgQWI3/Aoj4J4CKvwLI+ANAxxsgIl6WGXcDi+voamt2qFybvB+wNdoD5RkK1B/QwCXAAMyWX2PeMm23AAAAAElFTkSuQmCC');
    background-size: 80%;
  }

  .leaflet-pm-icon-circle {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAABAhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDY3IDc5LjE1Nzc0NywgMjAxNS8wMy8zMC0yMzo0MDo0MiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1wTU06T3JpZ2luYWxEb2N1bWVudElEPSJ1dWlkOjY1RTYzOTA2ODZDRjExREJBNkUyRDg4N0NFQUNCNDA3IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkQwM0ZDNzk3ODUzNDExRTU4RTQwRkQwODFEOUZEMEE3IiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkQwM0ZDNzk2ODUzNDExRTU4RTQwRkQwODFEOUZEMEE3IiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDQyAyMDE1IChNYWNpbnRvc2gpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MTk5NzA1OGEtZDI3OC00NDZkLWE4ODgtNGM4MGQ4YWI1NzNmIiBzdFJlZjpkb2N1bWVudElEPSJhZG9iZTpkb2NpZDpwaG90b3Nob3A6YzRkZmQxMGMtY2NlNS0xMTc4LWE5OGQtY2NkZmM5ODk5YWYwIi8+IDxkYzp0aXRsZT4gPHJkZjpBbHQ+IDxyZGY6bGkgeG1sOmxhbmc9IngtZGVmYXVsdCI+Z2x5cGhpY29uczwvcmRmOmxpPiA8L3JkZjpBbHQ+IDwvZGM6dGl0bGU+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+ZDy0gwAAAW9JREFUeNq8lj1Ow0AQhb0WbcgBaKKcwC1VaCjcoFCnyRG4QBq4QI6QxlWQQDRpSZWWEyBHgh7CAcwb6Y0ZlpVjYydPerJ3d/ab7Hp/4oqiiOrIOfcrEP1cnX7xHmgCz+FcoQqWOnghMZUZZAS+oQH8LM3Wpr3wLLGDICsAH8MfpvMbvAxAl2zTsvQZ+zxnvwGGK/AHFndwBq/2THMKT+BTlq/BfCyZmgBwmZYXuA9/wTP4NaqnIXwH9+BPOAE39z/ygvBdQ3jE2Bn79sn6WUVcCSPWZQ3hNknG95GuLh3BDZ/vNea8SisySqYmuOBzE7XXxjIdl5jVVcsET392st2hXcjy4ujAOgkdZG1leTGHsjV7oa3u+dwKW6dIt/ZlBwnOLTP2fvkZz5b/KiWjZOoqkjNozYYJz5amGrKvaE3mEQ87VkxZlMDbmtOVMrbH8lThwRut6wvn+Feml0iO3DmcBxLkbEuqGO7Qf1u+BRgABphW5i4/+hMAAAAASUVORK5CYII=');
    background-size: 90%;
  }

  .leaflet-pm-icon-rectangle {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAABAhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDY3IDc5LjE1Nzc0NywgMjAxNS8wMy8zMC0yMzo0MDo0MiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1wTU06T3JpZ2luYWxEb2N1bWVudElEPSJ1dWlkOjY1RTYzOTA2ODZDRjExREJBNkUyRDg4N0NFQUNCNDA3IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkM4QUVDQzQ2ODUzNDExRTU4RTQwRkQwODFEOUZEMEE3IiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkM4QUVDQzQ1ODUzNDExRTU4RTQwRkQwODFEOUZEMEE3IiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDQyAyMDE1IChNYWNpbnRvc2gpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MTk5NzA1OGEtZDI3OC00NDZkLWE4ODgtNGM4MGQ4YWI1NzNmIiBzdFJlZjpkb2N1bWVudElEPSJhZG9iZTpkb2NpZDpwaG90b3Nob3A6YzRkZmQxMGMtY2NlNS0xMTc4LWE5OGQtY2NkZmM5ODk5YWYwIi8+IDxkYzp0aXRsZT4gPHJkZjpBbHQ+IDxyZGY6bGkgeG1sOmxhbmc9IngtZGVmYXVsdCI+Z2x5cGhpY29uczwvcmRmOmxpPiA8L3JkZjpBbHQ+IDwvZGM6dGl0bGU+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+J3lsvQAAAFpJREFUeNrsljsOACAIQ1sPyGG9IJq4IKOfQdNuhuQ90gUJwBHi7sRGSE48DuaA5uFqIq/gcpgr6rFNZo2Pkjq3A0tbrOp6RRJIIIEEEjxxcD68yae/LU2AAQC7fSa9H1rL6AAAAABJRU5ErkJggg==');
    background-size: 90%;
  }

  .leaflet-pm-icon-drag {
    /* background-image: url('../assets/icons/drag.png'); */
  }

  .leaflet-pm-icon-delete {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAaCAYAAAC3g3x9AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAABAhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDY3IDc5LjE1Nzc0NywgMjAxNS8wMy8zMC0yMzo0MDo0MiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1wTU06T3JpZ2luYWxEb2N1bWVudElEPSJ1dWlkOjY1RTYzOTA2ODZDRjExREJBNkUyRDg4N0NFQUNCNDA3IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjk5QzE2QjUyODUzMzExRTU4RTQwRkQwODFEOUZEMEE3IiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjk5QzE2QjUxODUzMzExRTU4RTQwRkQwODFEOUZEMEE3IiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDQyAyMDE1IChNYWNpbnRvc2gpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MTk5NzA1OGEtZDI3OC00NDZkLWE4ODgtNGM4MGQ4YWI1NzNmIiBzdFJlZjpkb2N1bWVudElEPSJhZG9iZTpkb2NpZDpwaG90b3Nob3A6YzRkZmQxMGMtY2NlNS0xMTc4LWE5OGQtY2NkZmM5ODk5YWYwIi8+IDxkYzp0aXRsZT4gPHJkZjpBbHQ+IDxyZGY6bGkgeG1sOmxhbmc9IngtZGVmYXVsdCI+Z2x5cGhpY29uczwvcmRmOmxpPiA8L3JkZjpBbHQ+IDwvZGM6dGl0bGU+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+UGbNXAAAAI5JREFUeNpi+P//PwM2DAQNQPwfB27ApY8RqhkFMDIyCgCp9wx4AFAfIzZxFgYCAF0j0LL/+NQz4TDkAwOZAGQ7SDM/A3XARyYGKgOskUIRgBr4AU8SIRZ/gCcbQjFHguMYqR6G2AzMhmJyxLAm7McUiDHQxcujBo4aOOQNxJb1ZCkQG6LFF9kVFIgACDAAqr5rFp6MjMcAAAAASUVORK5CYII=');
    background-size: 70%;
  }

  .leaflet-pm-icon-edit {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAVCAYAAABc6S4mAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAABAhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDY3IDc5LjE1Nzc0NywgMjAxNS8wMy8zMC0yMzo0MDo0MiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1wTU06T3JpZ2luYWxEb2N1bWVudElEPSJ1dWlkOjY1RTYzOTA2ODZDRjExREJBNkUyRDg4N0NFQUNCNDA3IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjgzRTE5MjcxODUzNTExRTU4RTQwRkQwODFEOUZEMEE3IiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjgzRTE5MjcwODUzNTExRTU4RTQwRkQwODFEOUZEMEE3IiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDQyAyMDE1IChNYWNpbnRvc2gpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MTk5NzA1OGEtZDI3OC00NDZkLWE4ODgtNGM4MGQ4YWI1NzNmIiBzdFJlZjpkb2N1bWVudElEPSJhZG9iZTpkb2NpZDpwaG90b3Nob3A6YzRkZmQxMGMtY2NlNS0xMTc4LWE5OGQtY2NkZmM5ODk5YWYwIi8+IDxkYzp0aXRsZT4gPHJkZjpBbHQ+IDxyZGY6bGkgeG1sOmxhbmc9IngtZGVmYXVsdCI+Z2x5cGhpY29uczwvcmRmOmxpPiA8L3JkZjpBbHQ+IDwvZGM6dGl0bGU+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+4jFzXwAAAOdJREFUeNq0leENhCAMheEmuREc4UZwBEdihI7CKLqBG9RWi+F6aqBwTd4PaPkeIbY6RHQ9RRFIkTTs6z/AUbSySU/4tAMPcDKJKTmS5ixRIga95TzIHiiTkOBogA8KjsokSP68ORieBW4uMGU1x2ZHOKi6eoNSuMmgBl5tUAuvMrDAiw1Uh/7A0ydrMpA+0R36Bedci8F60aGg8mgykPly2aFZDbYYRDUePhc1NgMeZOdEzFq/1sBLAS+8U+G952k5u4egmtvzHC/SIoWgkwXwdGZ5qrOMa63x9gkbfjgoZ8anJt0EGAAZUK4sZc82dAAAAABJRU5ErkJggg==');
    background-position: 4px center;
    background-size: 80%;
  }

  .leaflet-pm-icon-cut {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAXCAYAAAD+4+QTAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAABAhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDY3IDc5LjE1Nzc0NywgMjAxNS8wMy8zMC0yMzo0MDo0MiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1wTU06T3JpZ2luYWxEb2N1bWVudElEPSJ1dWlkOjY1RTYzOTA2ODZDRjExREJBNkUyRDg4N0NFQUNCNDA3IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkNDNkM0RTY5ODUzNzExRTU4RTQwRkQwODFEOUZEMEE3IiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkNDNkM0RTY4ODUzNzExRTU4RTQwRkQwODFEOUZEMEE3IiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDQyAyMDE1IChNYWNpbnRvc2gpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MTk5NzA1OGEtZDI3OC00NDZkLWE4ODgtNGM4MGQ4YWI1NzNmIiBzdFJlZjpkb2N1bWVudElEPSJhZG9iZTpkb2NpZDpwaG90b3Nob3A6YzRkZmQxMGMtY2NlNS0xMTc4LWE5OGQtY2NkZmM5ODk5YWYwIi8+IDxkYzp0aXRsZT4gPHJkZjpBbHQ+IDxyZGY6bGkgeG1sOmxhbmc9IngtZGVmYXVsdCI+Z2x5cGhpY29uczwvcmRmOmxpPiA8L3JkZjpBbHQ+IDwvZGM6dGl0bGU+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+UbC4LAAAATFJREFUeNrUVosRgyAMhU5gN3AER3AER2AER7AbOIIjdAS7gSO4Qd2AEu+ll6JYP9i75i4nIrxHkgeorbVKa50opYxzevbO765/ULGMSJy11BROBBV9i+FkuQBu8GSyOhYJR1GJzpqJYpBogJFduQ6o0RPp1EdLIkluSA8T2T0kWGDhPEVX85EaLjiUtjpdACxnBETe8aAS0vUH2AXgDAucnQdvR2F5E83MJHo3YkzuKTAI/p4TWKUZw5ySVdiwKaLwySj/2QTvS65zkedBOJMlaBN4GsRZWViL6IwnknoJfG0kmSAZFmqxPRKvJgYpGbYAB0kC6urE9wJy51O7F5HaUHv3Ptl6QB7e8WtImGCUpaeo/zmFL84faJeiv1KR7fyb8Rd3vObquzqUZ/2tvAQYANwXksvfGBuLAAAAAElFTkSuQmCC');
    background-position: 4px center;
    background-size: 80%;
  }
}

.leaflet-buttons-control-button {
  &:hover {
    background-color: #f4f4f4;
    cursor: pointer;
  }

  &.active {
    background-color: #f4f4f4;

    & > .control-icon {
      opacity: 0.5;
    }
  }
}

.leaflet-buttons-control-text-hide {
  display: none;
}

.ais-track-popup {
  & > .leaflet-popup-content-wrapper {
    border-radius: 6px;
    background: #1f68a7;

    & > .leaflet-popup-content {
      margin: 0;
    }
  }

  & > .leaflet-popup-tip-container {
    & > .leaflet-popup-tip {
      background: #1f68a7;
    }
  }

  & > .leaflet-popup-close-button {
    padding: 10px 25px 0 0;
  }

  a {
    color: #fff;
  }
}

.ais-track-popup-header {
  margin: 0;
  padding: 10px;
  border-bottom: 1px solid #e5e5e5;
  color: #fff;
  font-weight: 700;
}

.ais-track-popup-content {
  margin: 0;
  padding: 10px;
  color: #fff;
}

.ais-track-popup-footer {
  padding: 10px;
  border-top: 1px solid #e5e5e5;
  color: #fff;
}

.leaflet-tracksymbol-label {
  display: block;
  position: absolute;
  z-index: 6;
  padding: 1px 6px;
  border-width: 1px;
  border-style: solid;
  border-radius: 4px;
  border-color: #969696;
  border-color: rgb(150 150 150 / 90%);
  background: #dcdcdc;
  background: rgb(220 220 220 / 90%);
  background-clip: padding-box;
  color: #111;
  font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
  font-weight: 700;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;

  .leaflet-clickable {
    cursor: pointer;
    pointer-events: auto;
  }

  &::before {
    left: -7px;
    border-right: 6px solid #000;
    border-right-color: inherit;
  }

  &::after {
    right: -7px;
    border-left: 6px solid #000;
    border-left-color: inherit;
  }
}

.leaflet-tracksymbol-label::after,
.leaflet-tracksymbol-label::before {
  content: none;
  position: absolute;
  top: 5px;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
}

.leaflet-tracksymbol-label-left::after,
.leaflet-tracksymbol-label-right::before {
  content: '';
}

.leaflet-contextmenu {
  display: none;
  padding: 4px 0;
  border-radius: 4px;
  background-color: #fff;
  box-shadow: 0 1px 7px rgb(0 0 0 / 40%);
  cursor: default;
  user-select: none;

  a {
    &.leaflet-contextmenu-item {
      display: block;
      padding: 0 12px;
      border-top: 1px solid transparent;
      border-bottom: 1px solid transparent;
      outline: 0;
      color: #222;
      font-size: 12px;
      line-height: 20px;
      text-decoration: none;
      cursor: default;

      &.over {
        border-top: 1px solid #f0f0f0;
        border-bottom: 1px solid #f0f0f0;
        background-color: #f4f4f4;
      }
    }

    &.leaflet-contextmenu-item-disabled {
      opacity: 0.5;

      &.over {
        border-top: 1px solid transparent;
        border-bottom: 1px solid transparent;
        background-color: inherit;
      }
    }
  }
}

.leaflet-contextmenu-icon {
  width: 16px;
  height: 16px;
  margin: 2px 8px 0 0;
  float: left;
  border: 0;
}

.leaflet-contextmenu-separator {
  margin: 5px 0;
  border-bottom: 1px solid #ccc;
}

.plugin-replay-createTask,
.plugin-replay-createTask * {
  box-sizing: border-box;
  color: white;
  font-size: 12px;
}

.plugin-replay-createTask {
  position: absolute;
  z-index: 1000;
  bottom: 30px;
  left: calc(50% - 240px);
  width: 480px;
  height: 130px;
  padding-left: 10px;
  background-color: #03192c;

  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li {
    padding: 0;
  }
}

.plugin-replay-createTaskChild {
  width: 100%;
  height: 40px;
  line-height: 40px;
}

.plugin-replay-createTaskTitle {
  cursor: move;
}

/* 切换回放模式 */
.replayTask-mode {
  width: 60px;
  height: 100%;
  margin-right: 10px;
  color: #9b9b9b;
  line-height: 100%;
  text-align: center;
  cursor: pointer;

  &.chose {
    border-bottom: 1px solid white;
    color: white;
  }
}

.replayTask-close {
  position: relative;
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  float: right;
  border: none;
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAFWSURBVHgB7ZhRroIwEEWnfQt5uBPdEco6UHakOxEXAugoTQhBZTp3/JqTEAiB9h5o2gEix3Ecx3GcbILk4v3+cOV9jGFb1/WNgJRlWYQQz3x8Oh03a++LJCCEwFvR98Olqqp/ApHCc9vchwSRQN93u8euRUpMw7/api0JkOmOHcb4x6+6GIah1QynpfDStsQCqWOtBCI8kyWQAuRKoMIz2QIpiFQCGZ5RCaRAayXQ4Rm1QAr2TcIiPAMRYD5JWIVnYALMkkTXdcEqPAMVYOYSz06Mwj/bJgOmEuMpk/CMqJSQ8Hj6i8doTIbQdMyPp9Vlxzugb2BptrEoAKdAp9F3sw2yAJwDW8i+TZVWEpBSYu08byGhLuakixRaQlVO566wSInsDxpteYCSyPqkRNU2CAmRgEVVqZUQ/lbBV5VN07TzxU5yv/i/EBkUZjMJchzHcRzH+RF3TaVTHhTDyDoAAAAASUVORK5CYII=');
  background-size: 100%;
  cursor: pointer;
}

/* 切换回放区域、船舶 */
.replayTask-area {
  width: 300px;
  height: 30px;
  border: none;
  border-radius: 4px;
  outline: none;
  background-color: #405057;
  cursor: pointer;
}

.replayTask-arrow,
.replayTask-add {
  position: absolute;
  top: 13px;
  left: 250px;
  width: 14px;
  height: 14px;
  border: none;
  cursor: pointer;
}

.replayTask-arrow {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAQCAYAAAAFzx/vAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAABzSURBVHgBtdTdCcAgDATgbOrojuAIV6X2RWj+vAQEUbxPUCISLABtjjFHX3OprI2dVYP+YDWogXFRJ8ZBFaxpe5IpTyANjQRdo5mANHpz2/BZEN7DnQHwfpyZxcRcKN4mTMMMdKyNwcYUtH+LfcP0zn/mP8y4tReax86pAAAAAElFTkSuQmCC');
  background-repeat: no-repeat;
  background-size: 100%;
  background-position-y: 2px;
}

.replayTask-add {
  left: 275px;
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAADQSURBVHgB7ZZBCsJADEUT8STiwjuod9A76FJxJ3oB6a7YpXoGewi9gwvxKlEzU2iklpYpwUjfZmgyTfmd/DBIRBdwDKEZuB4ijouSHVCmC82DZUl1hS32wb/3YbDCTRTzers/ZIKc0vSUCKX6k+b1r0cQwGS2oPe6W6/4mXx8G8WFde3O0kG/V2mfvsIKXVrqq7r8pA+vvNF3c4Bv+T17PqwB3wT0zxACySbN+bAX8el8yWt6TMQ37E0a8l0MH12biwvsnWFGzp+u8JfuV1f4BJXSOwSFrOtUAAAAAElFTkSuQmCC');
  background-repeat: no-repeat;
  background-size: 100%;
}

.replayTask-start {
  position: relative;
  top: 2px;
  width: 120px;
  height: 36px;
  margin-right: 25px;
  float: right;
  background-color: skyblue;
  line-height: 36px;
  text-align: center;
  cursor: pointer;
}

/* 设置回放时间、范围 */
.replayTask-bTime,
.replayTask-eTime {
  width: 140px;
  height: 30px;
  border: none;
  border-radius: 4px;
  outline: none;
  background-color: #405057;
}

.replayTask-option {
  display: none;
  margin-left: 20px;

  input[type='checkbox'] {
    position: relative;
    top: 2px;
    width: 14px;
    height: 14px;
    cursor: pointer;
  }

  input[type='text'] {
    width: 45px;
    height: 24px;
    border: 1px solid #405057;
    border-radius: 4px;
    outline: none;
    background-color: transparent;
    text-align: center;
  }

  &.active {
    display: inline-block;
  }
}

/* 区域历史记录列表 */
.plugin-replay-areaHistory {
  position: absolute;
  top: -152px;
  left: 0;
  width: 290px;
  height: 150px;
  overflow: hidden;
  background-color: #03192c;

  .areaHistory-title {
    padding-left: 20px;
    border-bottom: 1px solid #444;
    font-weight: 700;
    line-height: 30px;
  }

  .areaHistory-list {
    width: 100%;
    height: auto;
    max-height: 120px;
    overflow: auto;

    ul {
    }

    li {
      height: 30px;
      padding-left: 20px;
      line-height: 30px;
      cursor: pointer;

      &:hover {
        background-color: #405057;
      }

      &.chose {
        background-color: #405057;

        .checked {
          display: inline-block;
        }
      }

      .checked {
        display: none;
        position: relative;
        top: 5px;
        width: 20px;
        height: 20px;
        margin-right: 10px;
        float: right;
        border: none;
        background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAYAAADhAJiYAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAACLSURBVHgB7ZbBDYAwCEUZyRHcxFEcxdEcoSN824SDBzUQAyT6X0LSE7wAaStCCCGxAFh6tB77OEslKnOmSRUXMoNdKriRQcnIKEOZchm8uLgQ0RkVcSdD1Ji0O66kiNwZb3JkLLC1SIqMtViqjEFqS5cxSOXLOKR+/hw8SNV+QVVq6rH2mIUQQj7IAT4OuBU1vYtmAAAAAElFTkSuQmCC');
        background-size: 100% 100%;
        cursor: pointer;
      }

      .delete {
        display: inline-block;
        position: relative;
        top: 9px;
        width: 12px;
        height: 12px;
        margin-right: 10px;
        float: right;
        border: none;
        background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAbUlEQVQokY3QMQ6AMAiFYWLirXSpS4+vm57BQ/wuVbEFCwkJefAtCHAACZBgZ2AVYAHOIM7ldr6DCH4QIHrxhz+ohh5ukAVrbCIPamwiQAaxa3TmtzqPSN7DPDSpzMQ95OIIMnEUNViAPYg03i4DoENwulQ+XQAAAABJRU5ErkJggg==');
        background-size: 100% 100%;
        cursor: pointer;
      }
    }
  }
}

/* 船舶历史记录列表 */
.plugin-replay-shipHistory {
  position: absolute;
  top: -242px;
  left: 0;
  width: 200px;
  height: 240px;
  overflow: hidden;
  background-color: #03192c;

  .shipHistory-title {
    width: 100%;
    height: 30px;
    line-height: 30px;

    input {
      width: calc(100% - 20px);
      height: 20px;
      margin-left: 10px;
      border: none;
      border-radius: 4px;
      outline: none;
      background-color: #405057;
      text-indent: 6px;
    }
  }

  .shipHistory-result {
    li {
      height: 30px;
      padding-left: 20px;
      line-height: 30px;
      cursor: pointer;

      &:hover {
        background-color: #405057;
      }
    }
  }

  .shipHistory-list {
    a {
      display: inline-block;
      height: 20px;
      margin: 5px;
      padding: 0 10px;
      border-radius: 10px;
      background-color: black;
      line-height: 20px;
      cursor: pointer;

      span {
        display: inline-block;
        position: relative;
        top: 3px;
        width: 15px;
        height: 15px;
        margin-left: 5px;
        border: none;
        background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAFWSURBVHgB7ZhRroIwEEWnfQt5uBPdEco6UHakOxEXAugoTQhBZTp3/JqTEAiB9h5o2gEix3Ecx3GcbILk4v3+cOV9jGFb1/WNgJRlWYQQz3x8Oh03a++LJCCEwFvR98Olqqp/ApHCc9vchwSRQN93u8euRUpMw7/api0JkOmOHcb4x6+6GIah1QynpfDStsQCqWOtBCI8kyWQAuRKoMIz2QIpiFQCGZ5RCaRAayXQ4Rm1QAr2TcIiPAMRYD5JWIVnYALMkkTXdcEqPAMVYOYSz06Mwj/bJgOmEuMpk/CMqJSQ8Hj6i8doTIbQdMyPp9Vlxzugb2BptrEoAKdAp9F3sw2yAJwDW8i+TZVWEpBSYu08byGhLuakixRaQlVO566wSInsDxpteYCSyPqkRNU2CAmRgEVVqZUQ/lbBV5VN07TzxU5yv/i/EBkUZjMJchzHcRzH+RF3TaVTHhTDyDoAAAAASUVORK5CYII=');
        background-size: 100% 100%;
      }
    }
  }
}

.plugin-replay-shipHistory .shipHistory-result,
.plugin-replay-shipHistory .shipHistory-list {
  width: 100%;
  height: 210px;
  padding: 0 5px;
  overflow: auto;
}

/* 附近船舶列表 */
.area-name-tooltip {
  background-color: #333;
  box-shadow: none;
  color: #fff;
}

/* 区域 */
.area-popup {
  a {
    &.leaflet-popup-close-button {
      color: #fff !important;
    }
  }

  .box {
    width: auto;
    margin-top: 0;
    padding: 0 5px;
    border: 1px #fff solid;
    background-color: #333;
    color: #fff;
    font-family: Arial;
    font-size: larger;
  }

  .title {
    margin-top: 5px;
    margin-bottom: 5px;
    font-size: 12px;
    font-weight: bold;
    text-align: center;
  }

  .field {
    margin-bottom: 4px;
    padding-left: 15px;
    font-size: 12px;
    font-weight: bold;
    text-align: center;
  }
}

.area-popup .leaflet-popup-content-wrapper,
.area-popup .leaflet-popup-tip-container .leaflet-popup-tip {
  border-radius: 4px;
  opacity: 1;
  background-color: #333;
  color: #fff !important;
}

/* 时区 */
.time-popup {
  a {
    &.leaflet-popup-close-button {
      color: #fff !important;
    }
  }

  .box {
    width: auto;
    margin-top: 0;
    background-color: #1d374c;
    color: #fff;
    font-family: Arial;
    font-size: larger;
  }

  .title {
    margin-top: 5px;
    margin-bottom: 5px;
    font-size: 12px;
    font-weight: bold;
    text-align: center;
  }

  .field {
    margin-bottom: 4px;
    padding-left: 15px;
    font-size: 12px;
    font-weight: bold;
    text-align: center;
  }
}

.time-popup .leaflet-popup-content-wrapper,
.time-popup .leaflet-popup-tip-container .leaflet-popup-tip {
  border-radius: 4px;
  opacity: 0.7;
  background: #1d374c;
  color: #fff !important;
}

/* 临海基线 */
.baseline-popup {
  .leaflet-popup-tip-container {
    display: none;
  }

  a {
    &.leaflet-popup-close-button {
      color: #fff !important;
    }
  }

  .box {
    width: auto;
    margin-top: 0;
    background-color: #1d374c;
    color: #fff;
    font-family: Arial;
    font-size: larger;
  }

  .title {
    margin: 2px;
    font-size: 12px;
    font-weight: bold;
    text-align: center;
  }

  .field {
    margin-bottom: 2px;
    font-size: 12px;
    font-weight: bold;
    text-align: center;
  }
}

.baseline-popup .leaflet-popup-content-wrapper,
.baseline-popup .leaflet-popup-tip-container .leaflet-popup-tip {
  border-radius: 4px;
  opacity: 1;
  background: inherit;
  color: #fff !important;
}

.baseline-popup.cfff .box,
.baseline-popup.cfff .leaflet-popup-content-wrapper,
.baseline-popup.cfff .leaflet-popup-tip-container .leaflet-popup-tip,
.baseline-popup.cfff a.leaflet-popup-close-button {
  background-color: #000333;
  color: #fff !important;
}

.baseline-popup.c000 .box,
.baseline-popup.c000 .leaflet-popup-content-wrapper,
.baseline-popup.c000 .leaflet-popup-tip-container .leaflet-popup-tip,
.baseline-popup.c000 a.leaflet-popup-close-button {
  background-color: #fff;
  color: #000333 !important;
}

/* =========播放器========= */
.areaplayer {
  position: absolute;
  z-index: 1000;
  right: 0;
  bottom: 26px;
  left: 0;
  width: 80%;
  margin: auto;
  background: #142630;
  line-height: 30px;
  cursor: auto;

  .float-left {
    float: left;
  }

  .float-right {
    float: right;
  }

  .areaplayer-title {
    width: 100%;
    height: 35px;
    line-height: 35px;

    .title-text {
      width: 200px;
      height: 35px;
      margin-left: 15px;
      color: #fff;
      font-family: 'Microsoft Yahei';
      font-size: 14px;
      line-height: 35px;
    }

    .title-btn {
      width: 14px;
      height: 14px;
      margin-top: 10px;
      margin-right: 10px;
      border: 0;
      opacity: 1;
      background-color: #142630;
      background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkE1RUVGQjFFNjdDRDExRThBQ0YzODc4QkZCQzc4MDVCIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkE1RUVGQjFGNjdDRDExRThBQ0YzODc4QkZCQzc4MDVCIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QTVFRUZCMUM2N0NEMTFFOEFDRjM4NzhCRkJDNzgwNUIiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QTVFRUZCMUQ2N0NEMTFFOEFDRjM4NzhCRkJDNzgwNUIiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5cXa++AAAAk0lEQVR42mKcOXPmTQYGhkwg3sdAHPAA4g4mIJEFxCuB2IlITYuBOBekcS8QRxChGaYpCIgPM0EFCWlG0QQSYEKSxKUZQxMIsKCZjKw5HIjZsGnCphFdMwM2TehORQasONh4NSL7KRxXgDHh0BQIdd4+XJqZcGg6giSOVTMTAU04NTMRoQmrZpDGCURoQtfcDxBgALWxL98V+D6/AAAAAElFTkSuQmCC');
      background-repeat: no-repeat;
      background-position: center center;
      background-size: 90%;
      color: #fff;
      font-family: 'Microsoft Yahei';
      font-size: 14px;
      line-height: 14px;
      text-align: center;
      cursor: pointer;
    }
  }

  .areaplayer-option {
    width: 98%;
    height: 40px;
    margin-top: 10px;
    margin-left: 15px;
    line-height: 40px;
  }

  .areaplayer-play {
    box-sizing: border-box;
    width: 32px;
    height: 32px;
    border: 0;
    opacity: 1;
    background-color: inherit;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 90%;
    cursor: pointer;
  }

  .start {
    background-color: #142630;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkIwMDdGRkQ5NjdDRDExRTg5MDc0OEFEMkY4RkNENTU1IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkIwMDdGRkRBNjdDRDExRTg5MDc0OEFEMkY4RkNENTU1Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QjAwN0ZGRDc2N0NEMTFFODkwNzQ4QUQyRjhGQ0Q1NTUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QjAwN0ZGRDg2N0NEMTFFODkwNzQ4QUQyRjhGQ0Q1NTUiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6SpWvBAAACeUlEQVR42ryXT0sbQRjGNzmEtCQ0hUroUbp6FClU2kgP4qGg3gWv0qu3+hkaPaqnaHrqN1DBlqDppUoPNZ6qRXMTUQ9WopCg2T4vPAPDmj8zu1lf+JFsduZ9nszOzswb8zzPMYwUmARjYBj0g2e89w9UwT7YBhugZpRVDHTBBQVQ88yjxj5ut/ydbibBZ1Bn0iYog3kwCrIgQbL8bZ5tmuwjffPMZWXgFfjNJPfgCxg0GC3FACiyr8dcrqmB1+CMHY/AiIWwH+lbZa4z5u5oQFyes8MWSIcQV/SBH8x57h8JveETsM+GZT5bp0dIrhJzV6j1wECeDap07fQYGc1DauT9BmTSNThpRiIQ1+fEPbVc3UCBzooRiivWqLWqDKS5cDRNFg7yFyyCVAADLrVEMy0/TNPRjkUSFadgBsQsTeyw/3Qcq/E4V+VNxz5egq+gzP3BNJTWuBgY4sVPJ3i8B7/AMsgYtN/l55AMxwWHIxvgEbQKyTcL4h36Z1VbeXZ1OEmAJKgb/mOTPfwb+NDmXoJajbgTXSRNGomBa37P9Ej4Csxpk7tVPOfntRg45sVgSOEmKDLPErjr0FZpHYuBA168CyEub0AOzIILg/ZK60AMlHgxEUD4EnwEb8GeRT+lVQq6FMuOuQIyIZbiG7UUO9wYPG4Uj74ZKVePsR2/AXfUGmh3IDmJ8EDyhxoL7Y5klQiPZN+1I9lT00NpqgfiL0wPpa2O5Yd8bmGe+YnNsVwfiYpWmBTVpLEoTNa0wqRiU5jopVmeM1YvzT6BXIvSLMd7emnWCFqa+f9NgQuHadzyPe86ajHL8nzKV55ntB1QL8/XTcvz/wIMALsaB+hnnp9pAAAAAElFTkSuQmCC');
  }

  .stop {
    background-color: #142630;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkNFMzkwOTM2NjdDRDExRThCNDZDOEQyNDI4MTIwRUNFIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkNFMzkwOTM3NjdDRDExRThCNDZDOEQyNDI4MTIwRUNFIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6Q0UzOTA5MzQ2N0NEMTFFOEI0NkM4RDI0MjgxMjBFQ0UiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6Q0UzOTA5MzU2N0NEMTFFOEI0NkM4RDI0MjgxMjBFQ0UiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6rY04YAAACKUlEQVR42sSXz0pCQRTGry7EQqmgcB3+WUoECdUq2lV7nySfIXsF016iggjJSqhd2iqDdCuuSixQ0ts38A0Mt6vO9c808GPuzJ0553PuOHOOz7ZtS7OEwCHYAxtgHSzx3SdogAq4BZego2VVCBhDDORAx9YvHc6JjbM/6mUQnIAujQ7AHciAXRABARJhX4ZjBpwj5mZpy5OAKHimkT44BwmN1ZLEQYFzbdqK6QrYBE1OfAMpD46diLkN2mrS9kgBQmWLE65BeArnkjVwT5st50qoAxdAhQPv+G2tGSFsFWm7Sl9/BGQ5oEHV1owRq1mjj6xTgNh0PW6a1Bycq3uiT18xVUCOygpzdC7J09eZFBDmwTHQOTjAA3H2l4f0u230AX2GRUeaikqav0AW3X43Shyb9uM03uepfGWZK9LXvhCQZOPRoIAn1kkhIMrGm0EBNdZRn7gw8BAAQdDVuUBZ+zT73UqAvnp+65+LENDm87JBvyus20LAOxsJgwKkr3ch4IWNbYMCpK8XIaDIxoFBAdJXcdKjuDzkKC57OIq/5FFs8WKweVEYv4ykKhPX8Rb4oa/4sICkPseA5JU+ToeFZNU5hmQ3Ski2qBuUhmbgfFU3KHULy2v8btN887qXsFxdiaqSmBTkpvGQmOSVxKTqJTFRU7Msd6yamh2DHZfUbIfv1NSsN2lq5vw1OR4cuuWb//Oxq+bzmJ4fOdJzeYN+ONLzC930/FeAAQAvuZTSaSl6FgAAAABJRU5ErkJggg==');
  }

  .areaplayer-time {
    width: 350px;
    height: 32px;
    margin-left: 10px;
    line-height: 32px;
  }

  .areaplayer-time-txt {
    width: 140px;
    height: 32px;
    color: #fff;
    font-family: 'Microsoft Yahei';
    font-size: 12px;
    line-height: 32px;
    vertical-align: top;
    user-select: none;
  }

  .areaplayer-time-fgx {
    width: 5px;
    height: 32px;
    color: #fff;
    font-family: 'Microsoft Yahei';
    font-size: 12px;
    line-height: 32px;
    vertical-align: top;
    user-select: none;
  }

  .areaplayer-ctime {
    color: #fff;
    font-weight: 500;
    text-align: right;
  }

  .areaplayer-etime {
    color: #d1d1d1;
    font-weight: 400;
    text-align: left;
  }

  .areaplayer-tiao {
    display: inline-block;
    position: relative;
    width: 95%;
    height: 5px;
    margin-top: 10px;
    margin-left: 15px;
    border-radius: 10px;
    background: #ddd;
    line-height: 5px;
    cursor: pointer;
  }

  .areaplayer-yuan {
    display: inline-block;
    position: absolute;
    width: 14px;
    height: 14px;
    margin-top: -4px;
    margin-left: 0;
    padding: 0;
    border-radius: 50%;
    background-color: inherit;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjVBN0FGMTlCNjdENjExRTg5MzU4QjcxRkZGM0FFRTVCIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjVBN0FGMTlDNjdENjExRTg5MzU4QjcxRkZGM0FFRTVCIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NUE3QUYxOTk2N0Q2MTFFODkzNThCNzFGRkYzQUVFNUIiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NUE3QUYxOUE2N0Q2MTFFODkzNThCNzFGRkYzQUVFNUIiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz52AwlpAAAAyUlEQVR42mL4//8/AxIWAeI2IL4ExD+g+AIQN0Hl4GqRNQUD8Yf/uMFHqBoUjSCBf/8Jg38wzSBNolDTiAUgtWJMDAwMuUDMx0A8AKktYIB6HgX8OH7w/6sAazAGsbGAS4wgdUAT2JGNfB1ow/Dv7Wswm0lYlEF0/RF0W38xEXQYKCAwAVjjDQxPlLcyMAmJMDCJijPwVbRh03iPARq5pII2kEYxcqKDogQAwyFA/AmPpk/Ykhx6Ir8MxL+A+AsQnwPiZvREDhBgAP0iE9ZX6dF0AAAAAElFTkSuQmCC');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 90%;
    box-shadow: -2px 0 2px #000;
    cursor: pointer;
  }

  .areaplayer-jindu {
    width: 0;
    height: 5px;
    border-radius: 1px;
    background-color: #e83c26;
  }

  .playSpeed {
    width: 80px;
    height: 25px;
    margin-top: 5px;
    margin-right: 25px;
    border-radius: 15px;

    // background-color: #000;
    color: #fff;
    font-family: 'Microsoft Yahei';
    font-size: 12px;
    line-height: 25px;
    text-align: center;
    cursor: pointer;

    &:hover {
      background-color: #1ba0ff;
    }

    &-txt {
      width: 45px;
      height: 25px;
      text-align: right;
    }

    &-img {
      width: 15px;
      height: 12px;
      margin-top: 6px;
      margin-left: 3px;
      background-color: inherit;
      background-repeat: no-repeat;
      background-position: center center;
      background-size: 90%;

      &.up {
        background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAFCAYAAACXU8ZrAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkY2MDMwNjc2NjdERTExRThCMURBRDdDM0VCOTc0MjY0IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkY2MDMwNjc3NjdERTExRThCMURBRDdDM0VCOTc0MjY0Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6RjYwMzA2NzQ2N0RFMTFFOEIxREFEN0MzRUI5NzQyNjQiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6RjYwMzA2NzU2N0RFMTFFOEIxREFEN0MzRUI5NzQyNjQiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5skqy8AAAAO0lEQVR42mL4//8/AxJ2BeKnQGyHLI6u4BEQJ6ArRFdgAOWbICvEpoABXSGIcwqIDdEUwLApEJ8ACDAAwViR4LMrygwAAAAASUVORK5CYII=');
      }

      &.down {
        background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjVBN0FGMTlCNjdENjExRTg5MzU4QjcxRkZGM0FFRTVCIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjVBN0FGMTlDNjdENjExRTg5MzU4QjcxRkZGM0FFRTVCIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NUE3QUYxOTk2N0Q2MTFFODkzNThCNzFGRkYzQUVFNUIiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NUE3QUYxOUE2N0Q2MTFFODkzNThCNzFGRkYzQUVFNUIiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz52AwlpAAAAyUlEQVR42mL4//8/AxIWAeI2IL4ExD+g+AIQN0Hl4GqRNQUD8Yf/uMFHqBoUjSCBf/8Jg38wzSBNolDTiAUgtWJMDAwMuUDMx0A8AKktYIB6HgX8OH7w/6sAazAGsbGAS4wgdUAT2JGNfB1ow/Dv7Wswm0lYlEF0/RF0W38xEXQYKCAwAVjjDQxPlLcyMAmJMDCJijPwVbRh03iPARq5pII2kEYxcqKDogQAwyFA/AmPpk/Ykhx6Ir8MxL+A+AsQnwPiZvREDhBgAP0iE9ZX6dF0AAAAAElFTkSuQmCC');
      }
    }

    &-select {
      position: absolute;
      right: 25px;
      bottom: 90px;
      width: 80px;
      padding: 0;
      border: solid 1px #fff;
      background-color: #000;
      color: #fff;
      font-family: 'Microsoft Yahei';
      font-size: 12px;
      list-style: none;

      li {
        width: 80px;
        height: 20px;
        margin: 5px auto;
        font-family: 'Microsoft Yahei';
        font-size: 12px;
        line-height: 20px;
        text-align: center;
        cursor: pointer;

        &:hover {
          background-color: #142630;
          color: #1ba0ff;
        }
      }

      .active {
        color: #1ba0ff;
      }
    }
  }
}

.areaplayer-display-none {
  display: none;
}

.areaplayer-display-block {
  display: block;
}

/* 标题 */
.areaplayer .areaplayer-title .title-btn:hover,
.areaplayer .areaplayer-title .title-btn:active {
  background-color: #142630;
}

.areaplayer .start:active,
.areaplayer .start:hover {
  background-color: #142630;
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjA1QUNDNThENjdDRTExRThBOTU5REFBNjU0RkVCMjIzIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjA1QUNDNThFNjdDRTExRThBOTU5REFBNjU0RkVCMjIzIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MDVBQ0M1OEI2N0NFMTFFOEE5NTlEQUE2NTRGRUIyMjMiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MDVBQ0M1OEM2N0NFMTFFOEE5NTlEQUE2NTRGRUIyMjMiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5/9qE6AAADCklEQVR42rSXX2iNYRzH372M42DOikyuTra5UCMiY5Qm6ZhSyJ+S/LtSaiXbyYW5MXJBcYmMsAvcGJaMDJmJdGqKndPcaU1h8y+E77e+b7221znP+2dPfXr37jzP7/d7n9+f5/cUzWz5YxmOSWANWAHmgSSYot8+gT7wEtwHN8FnE6FFBgaUgwawBUw0NPYLuAKOgWy+iXae32LgKOgBu0EcdMqYGlAGxosy/a9Bc+Ja0yMjYn53YBa4qq3+DS6AZvDGcAcqQBps10fSNRu9dsNrB+aDx1LeC6rBDh/KLa3bqbVvJeuRZOc1gP5uB9PBHbAAdFvBB9cuAg8ls106PA2YoG2fJj+uBUNW+DEAVoJ7kn1NukYY0ATmass2gB9WdIOy1smNVdL1jwEMunoF3CZZHfXgbm6TjnrHFY4BjaAYtIT0uUlMnJeuRseAySoyzMcjPqL8uKqj39EsXZupmwakVOE6C1WtYdmyXz7dynriw4CsdFFnigbU6odbAb5mBrgEHijXTYejq9ZWVHI8CeHbZeAZOA0SBvO79KyylQGWz0rnNcaCvYqPXQXOmddO9nFSiV4+RhTpU8EZcDvPnA96ltijmHIxk0k0YFB/JyJSzJ3c5wpur1Gq5yANyOmlMqRiVrhzknMK/Moz19GVowEZvVSHUM4MWKLgMynjjq4MDejQSyqA4vdgD1gMnvpY5+jqYEfEUvxObVSlYTXsUzE5GCB7ypXy39jK2TqlWlVO04ZCksr5IKmbli42rUNOT0irXoEx8s9onYgLVXEZsHNYtGzXAXFCadmqziXqQVdf1EeeVMUc0RFltL1szcZFqJyyroPZ0tHk1ZIxKNYrjZaDGwHPe6/SfFd94YB0fP1fV0xXrAb9YBV4Lr+F8Xm3Tst+yc4Wuhe80C0no7TsUoWr8KGYc89qbVKyaiTb+G7Iw+SwGshitVHs79t0ccm5TrVSHetLQZ2+mKn2U8F9CHwPejnl1xxQ6xU33AHG02XdC3vD3o7d1/O6YdfzhOsEdF/P20yv538FGADYqrRuGtQ1bAAAAABJRU5ErkJggg==');
}

.areaplayer .stop:active,
.areaplayer .stop:hover {
  background-color: #142630;
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkNFMzkwOTM2NjdDRDExRThCNDZDOEQyNDI4MTIwRUNFIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkNFMzkwOTM3NjdDRDExRThCNDZDOEQyNDI4MTIwRUNFIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6Q0UzOTA5MzQ2N0NEMTFFOEI0NkM4RDI0MjgxMjBFQ0UiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6Q0UzOTA5MzU2N0NEMTFFOEI0NkM4RDI0MjgxMjBFQ0UiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6rY04YAAACKUlEQVR42sSXz0pCQRTGry7EQqmgcB3+WUoECdUq2lV7nySfIXsF016iggjJSqhd2iqDdCuuSixQ0ts38A0Mt6vO9c808GPuzJ0553PuOHOOz7ZtS7OEwCHYAxtgHSzx3SdogAq4BZego2VVCBhDDORAx9YvHc6JjbM/6mUQnIAujQ7AHciAXRABARJhX4ZjBpwj5mZpy5OAKHimkT44BwmN1ZLEQYFzbdqK6QrYBE1OfAMpD46diLkN2mrS9kgBQmWLE65BeArnkjVwT5st50qoAxdAhQPv+G2tGSFsFWm7Sl9/BGQ5oEHV1owRq1mjj6xTgNh0PW6a1Bycq3uiT18xVUCOygpzdC7J09eZFBDmwTHQOTjAA3H2l4f0u230AX2GRUeaikqav0AW3X43Shyb9uM03uepfGWZK9LXvhCQZOPRoIAn1kkhIMrGm0EBNdZRn7gw8BAAQdDVuUBZ+zT73UqAvnp+65+LENDm87JBvyus20LAOxsJgwKkr3ch4IWNbYMCpK8XIaDIxoFBAdJXcdKjuDzkKC57OIq/5FFs8WKweVEYv4ykKhPX8Rb4oa/4sICkPseA5JU+ToeFZNU5hmQ3Ski2qBuUhmbgfFU3KHULy2v8btN887qXsFxdiaqSmBTkpvGQmOSVxKTqJTFRU7Msd6yamh2DHZfUbIfv1NSsN2lq5vw1OR4cuuWb//Oxq+bzmJ4fOdJzeYN+ONLzC930/FeAAQAvuZTSaSl6FgAAAABJRU5ErkJggg==');
}

/**
* ShipCanvas css
* Created by hankin
*/
.div-canvas-ships {
  position: absolute;
  z-index: 90;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.div-canvas-navigations {
  position: absolute;
  z-index: 299;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

/* .div-canvas-Radars { */

/*    position: absolute; */

/*    top: 0px; */

/*    left: 0px; */

/*    z-index: 301; */

/*    margin : 0px; */

/*    padding: 0px; */

/*    width: 100%; */

/*    height: 100%; */

/*    !*border: 1px blue solid;*! */

/* } */
.canvas-ships {
  position: absolute;
  margin: 0;
  padding: 0;
  border: 0;
  background: inherit;
  pointer-events: auto;
}

.calcStr-ships {
  display: block;
  visibility: hidden;
  font-family: Arial;
  font-size: 12px;
  font-weight: bold;
}

.loadingPopup {
  display: block;
  display: none;
  position: relative;
  z-index: 99999;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 1;
  color: #fff;
  font-family: 'Microsoft Yahei';
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  user-select: none;

  .loading-container {
    position: absolute;
    inset: 0;
    width: 212px;
    height: 140px;
    margin: auto;
    text-align: center;
  }

  .loading-text {
    display: block;
    position: absolute;
    bottom: 8px;
    left: 0;
    width: 90%;
    height: 40px;
    padding: 0 10px;
    overflow: hidden;
    color: #fff;
    font-weight: 100;
    line-height: 40px;
    text-overflow: ellipsis;
    word-break: break-all;
    white-space: nowrap;
  }
}

.portdatasymbol-tooltip {
  background-color: #333;
  box-shadow: none;
  color: #fff;
}

/**
* track css
* Created by hankin
*/
.div-truck-ship {
  position: absolute;
  z-index: 250;
  width: 20px;
  height: 24px;
  margin-top: -12px;
  margin-left: -10px;
  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAAZCAYAAADTyxWqAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAABAhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDY3IDc5LjE1Nzc0NywgMjAxNS8wMy8zMC0yMzo0MDo0MiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1wTU06T3JpZ2luYWxEb2N1bWVudElEPSJ1dWlkOjY1RTYzOTA2ODZDRjExREJBNkUyRDg4N0NFQUNCNDA3IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjFENzY1MUQyODUzNzExRTU4RTQwRkQwODFEOUZEMEE3IiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjFENzY1MUQxODUzNzExRTU4RTQwRkQwODFEOUZEMEE3IiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDQyAyMDE1IChNYWNpbnRvc2gpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MTk5NzA1OGEtZDI3OC00NDZkLWE4ODgtNGM4MGQ4YWI1NzNmIiBzdFJlZjpkb2N1bWVudElEPSJhZG9iZTpkb2NpZDpwaG90b3Nob3A6YzRkZmQxMGMtY2NlNS0xMTc4LWE5OGQtY2NkZmM5ODk5YWYwIi8+IDxkYzp0aXRsZT4gPHJkZjpBbHQ+IDxyZGY6bGkgeG1sOmxhbmc9IngtZGVmYXVsdCI+Z2x5cGhpY29uczwvcmRmOmxpPiA8L3JkZjpBbHQ+IDwvZGM6dGl0bGU+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+bwCVTQAAARZJREFUeNqclQERwyAMRaEGhoRKmAQkVEIlIKESJgEJSNgcVELngClgcBd2LCWBkrt/t63JCwlLKkIIAiuaijJRe1RASr+tyecUVwHpqKMCwUo+moRBxnBR6wkGJ6JOYKMeRNlJdwzDpXlcRpEUQ48frFKez9mYC8LJ1/zQUX1ggLgtLj/460ELRLTGT1LKdOTSXqLfjuLzbUq9QQ6zGLVamQnYUaLCcRMwPyjH1nEOg76/qdtkb5SYFNsaI1f+36C/lvDV3ARc0ROP0zII8vnCcC/cAMxQK0hBpl6Qay3H5UJ5ioUBcOuA6eba7uyfqcY0xqW2WS0Z0zF/O3ozqSEYAGdotudASRICWIs77w4bZuf8vgIMAAI1tNMVERhgAAAAAElFTkSuQmCC')
    no-repeat;
}

.trackPlay_label {
  display: block;

  &_tooltip {
    top: 10px;
    left: 5px;
    border: 0;
    opacity: 1;
    background: none;
    box-shadow: none;

    &.unvisiable {
      display: none;
    }

    .trackPlay_label_name {
      font-weight: 400;
    }

    div {
      height: 16px;
      color: #000;
      text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff,
        1px 1px 0 #fff, 0 2px 2px #fff;
    }
  }

  &.unvisiable {
    display: none;
  }
}

/* =========播放器样式========= */
.truckplayer {
  position: absolute;
  z-index: 1000;
  right: 0;
  bottom: 26px;
  left: 0;
  width: 600px;
  margin: auto;
  padding: 10px;
  border-radius: 10px;
  background-color: rgb(20 38 48 / 20%);
  box-shadow: 0 0 20px rgb(0 0 0 / 10%);
  line-height: 30px;
  cursor: auto;
  backdrop-filter: blur(10px) saturate(180%);

  .float-left {
    float: left;
  }

  .float-right {
    float: right;
  }

  .truckplayer-title {
    width: 100%;
    height: 35px;
    line-height: 35px;
    cursor: move;

    .title-text {
      width: 200px;
      height: 35px;
      margin-left: 15px;
      color: #fff;
      font-family: 'Microsoft Yahei';
      font-size: 14px;
      line-height: 35px;
    }

    .title-option {
      max-width: 570px;
      padding-left: 10px;
      overflow: hidden;

      ul {
        margin: 0;
        padding: 0;
        list-style: none;
      }

      li {
        display: inline-block;
        width: fit-content;
        height: 35px;
        margin: 0;
        margin-right: 10px;
        padding: 0;
        color: #fff;
        font-weight: 400;
        line-height: 35px;
        user-select: none;
      }

      input {
        display: inline-block;
        width: 12px;
        height: 12px;
      }
    }

    .title-btn {
      width: 24px;
      height: 24px;
      margin-top: 5px;
      margin-right: 10px;
      background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAFWSURBVHgB7ZhRroIwEEWnfQt5uBPdEco6UHakOxEXAugoTQhBZTp3/JqTEAiB9h5o2gEix3Ecx3GcbILk4v3+cOV9jGFb1/WNgJRlWYQQz3x8Oh03a++LJCCEwFvR98Olqqp/ApHCc9vchwSRQN93u8euRUpMw7/api0JkOmOHcb4x6+6GIah1QynpfDStsQCqWOtBCI8kyWQAuRKoMIz2QIpiFQCGZ5RCaRAayXQ4Rm1QAr2TcIiPAMRYD5JWIVnYALMkkTXdcEqPAMVYOYSz06Mwj/bJgOmEuMpk/CMqJSQ8Hj6i8doTIbQdMyPp9Vlxzugb2BptrEoAKdAp9F3sw2yAJwDW8i+TZVWEpBSYu08byGhLuakixRaQlVO566wSInsDxpteYCSyPqkRNU2CAmRgEVVqZUQ/lbBV5VN07TzxU5yv/i/EBkUZjMJchzHcRzH+RF3TaVTHhTDyDoAAAAASUVORK5CYII=');
      background-size: 100%;
    }

    .title-fullScreen {
      width: 24px;
      height: 24px;
      margin-top: 5px;
      margin-right: 10px;
      background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAFeSURBVHgB7ZhBqsIwEIbjeyIoeAYLehOPpBsXRaQLN3okjyLEMwgKbmIHFGSINX86OhTm2wghMfM1aZu/vRDCv+swf67jmIA2JqCNCWjTeYF+SqfFYnmsfyYfuvn9fjdzP/6/1BX4NNk3KFI6Ja0Aww8G4/l2uz65TOorO+VtZVkWl8v14MCLhd4DVHRxu50Pq9VGbFVY8R4ZCwmMRsO5E5bgxdPqIuMhgaqqvKRErHh0a8KPUSkJieKJrPdAWwmp4onsF1lMInWsVPFEqgBN4Hkjk0BpKj46X4yeRUplTEAbE9DGBLQxAW2QTBxiGfXlYBbATBzeHSWa5uMgmbjgjbkx8EHTKTY6X4zsLdQmSUmGoiyBtud5yWQHC0iFESkJSEAySRESEpCAZPFP2iQ7At1CosU/4RLI2Jwvc3SVjvWzmrdLfxtNAsnEv8andLJMrI0JaGMC2piANp0XuANnrBB8VS9PrQAAAABJRU5ErkJggg==');
      background-size: 100%;
    }
  }

  &-option {
    width: 98%;
    height: 40px;
    margin-top: 10px;
    margin-left: 15px;
    line-height: 40px;
  }

  &-play {
    box-sizing: border-box;
    width: 32px;
    height: 32px;
    border: 0;
    opacity: 1;
    background-color: inherit;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 90%;
    cursor: pointer;
  }

  .start {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkIwMDdGRkQ5NjdDRDExRTg5MDc0OEFEMkY4RkNENTU1IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkIwMDdGRkRBNjdDRDExRTg5MDc0OEFEMkY4RkNENTU1Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QjAwN0ZGRDc2N0NEMTFFODkwNzQ4QUQyRjhGQ0Q1NTUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QjAwN0ZGRDg2N0NEMTFFODkwNzQ4QUQyRjhGQ0Q1NTUiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6SpWvBAAACeUlEQVR42ryXT0sbQRjGNzmEtCQ0hUroUbp6FClU2kgP4qGg3gWv0qu3+hkaPaqnaHrqN1DBlqDppUoPNZ6qRXMTUQ9WopCg2T4vPAPDmj8zu1lf+JFsduZ9nszOzswb8zzPMYwUmARjYBj0g2e89w9UwT7YBhugZpRVDHTBBQVQ88yjxj5ut/ydbibBZ1Bn0iYog3kwCrIgQbL8bZ5tmuwjffPMZWXgFfjNJPfgCxg0GC3FACiyr8dcrqmB1+CMHY/AiIWwH+lbZa4z5u5oQFyes8MWSIcQV/SBH8x57h8JveETsM+GZT5bp0dIrhJzV6j1wECeDap07fQYGc1DauT9BmTSNThpRiIQ1+fEPbVc3UCBzooRiivWqLWqDKS5cDRNFg7yFyyCVAADLrVEMy0/TNPRjkUSFadgBsQsTeyw/3Qcq/E4V+VNxz5egq+gzP3BNJTWuBgY4sVPJ3i8B7/AMsgYtN/l55AMxwWHIxvgEbQKyTcL4h36Z1VbeXZ1OEmAJKgb/mOTPfwb+NDmXoJajbgTXSRNGomBa37P9Ej4Csxpk7tVPOfntRg45sVgSOEmKDLPErjr0FZpHYuBA168CyEub0AOzIILg/ZK60AMlHgxEUD4EnwEb8GeRT+lVQq6FMuOuQIyIZbiG7UUO9wYPG4Uj74ZKVePsR2/AXfUGmh3IDmJ8EDyhxoL7Y5klQiPZN+1I9lT00NpqgfiL0wPpa2O5Yd8bmGe+YnNsVwfiYpWmBTVpLEoTNa0wqRiU5jopVmeM1YvzT6BXIvSLMd7emnWCFqa+f9NgQuHadzyPe86ajHL8nzKV55ntB1QL8/XTcvz/wIMALsaB+hnnp9pAAAAAElFTkSuQmCC');

    &:active,
    &:hover {
      background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjA1QUNDNThENjdDRTExRThBOTU5REFBNjU0RkVCMjIzIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjA1QUNDNThFNjdDRTExRThBOTU5REFBNjU0RkVCMjIzIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MDVBQ0M1OEI2N0NFMTFFOEE5NTlEQUE2NTRGRUIyMjMiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MDVBQ0M1OEM2N0NFMTFFOEE5NTlEQUE2NTRGRUIyMjMiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5/9qE6AAADCklEQVR42rSXX2iNYRzH372M42DOikyuTra5UCMiY5Qm6ZhSyJ+S/LtSaiXbyYW5MXJBcYmMsAvcGJaMDJmJdGqKndPcaU1h8y+E77e+b7221znP+2dPfXr37jzP7/d7n9+f5/cUzWz5YxmOSWANWAHmgSSYot8+gT7wEtwHN8FnE6FFBgaUgwawBUw0NPYLuAKOgWy+iXae32LgKOgBu0EcdMqYGlAGxosy/a9Bc+Ja0yMjYn53YBa4qq3+DS6AZvDGcAcqQBps10fSNRu9dsNrB+aDx1LeC6rBDh/KLa3bqbVvJeuRZOc1gP5uB9PBHbAAdFvBB9cuAg8ls106PA2YoG2fJj+uBUNW+DEAVoJ7kn1NukYY0ATmass2gB9WdIOy1smNVdL1jwEMunoF3CZZHfXgbm6TjnrHFY4BjaAYtIT0uUlMnJeuRseAySoyzMcjPqL8uKqj39EsXZupmwakVOE6C1WtYdmyXz7dynriw4CsdFFnigbU6odbAb5mBrgEHijXTYejq9ZWVHI8CeHbZeAZOA0SBvO79KyylQGWz0rnNcaCvYqPXQXOmddO9nFSiV4+RhTpU8EZcDvPnA96ltijmHIxk0k0YFB/JyJSzJ3c5wpur1Gq5yANyOmlMqRiVrhzknMK/Moz19GVowEZvVSHUM4MWKLgMynjjq4MDejQSyqA4vdgD1gMnvpY5+jqYEfEUvxObVSlYTXsUzE5GCB7ypXy39jK2TqlWlVO04ZCksr5IKmbli42rUNOT0irXoEx8s9onYgLVXEZsHNYtGzXAXFCadmqziXqQVdf1EeeVMUc0RFltL1szcZFqJyyroPZ0tHk1ZIxKNYrjZaDGwHPe6/SfFd94YB0fP1fV0xXrAb9YBV4Lr+F8Xm3Tst+yc4Wuhe80C0no7TsUoWr8KGYc89qbVKyaiTb+G7Iw+SwGshitVHs79t0ccm5TrVSHetLQZ2+mKn2U8F9CHwPejnl1xxQ6xU33AHG02XdC3vD3o7d1/O6YdfzhOsEdF/P20yv538FGADYqrRuGtQ1bAAAAABJRU5ErkJggg==');
    }
  }

  .stop {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkNFMzkwOTM2NjdDRDExRThCNDZDOEQyNDI4MTIwRUNFIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkNFMzkwOTM3NjdDRDExRThCNDZDOEQyNDI4MTIwRUNFIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6Q0UzOTA5MzQ2N0NEMTFFOEI0NkM4RDI0MjgxMjBFQ0UiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6Q0UzOTA5MzU2N0NEMTFFOEI0NkM4RDI0MjgxMjBFQ0UiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6rY04YAAACKUlEQVR42sSXz0pCQRTGry7EQqmgcB3+WUoECdUq2lV7nySfIXsF016iggjJSqhd2iqDdCuuSixQ0ts38A0Mt6vO9c808GPuzJ0553PuOHOOz7ZtS7OEwCHYAxtgHSzx3SdogAq4BZego2VVCBhDDORAx9YvHc6JjbM/6mUQnIAujQ7AHciAXRABARJhX4ZjBpwj5mZpy5OAKHimkT44BwmN1ZLEQYFzbdqK6QrYBE1OfAMpD46diLkN2mrS9kgBQmWLE65BeArnkjVwT5st50qoAxdAhQPv+G2tGSFsFWm7Sl9/BGQ5oEHV1owRq1mjj6xTgNh0PW6a1Bycq3uiT18xVUCOygpzdC7J09eZFBDmwTHQOTjAA3H2l4f0u230AX2GRUeaikqav0AW3X43Shyb9uM03uepfGWZK9LXvhCQZOPRoIAn1kkhIMrGm0EBNdZRn7gw8BAAQdDVuUBZ+zT73UqAvnp+65+LENDm87JBvyus20LAOxsJgwKkr3ch4IWNbYMCpK8XIaDIxoFBAdJXcdKjuDzkKC57OIq/5FFs8WKweVEYv4ykKhPX8Rb4oa/4sICkPseA5JU+ToeFZNU5hmQ3Ski2qBuUhmbgfFU3KHULy2v8btN887qXsFxdiaqSmBTkpvGQmOSVxKTqJTFRU7Msd6yamh2DHZfUbIfv1NSsN2lq5vw1OR4cuuWb//Oxq+bzmJ4fOdJzeYN+ONLzC930/FeAAQAvuZTSaSl6FgAAAABJRU5ErkJggg==');

    &:active,
    &:hover {
      background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkNFMzkwOTM2NjdDRDExRThCNDZDOEQyNDI4MTIwRUNFIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkNFMzkwOTM3NjdDRDExRThCNDZDOEQyNDI4MTIwRUNFIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6Q0UzOTA5MzQ2N0NEMTFFOEI0NkM4RDI0MjgxMjBFQ0UiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6Q0UzOTA5MzU2N0NEMTFFOEI0NkM4RDI0MjgxMjBFQ0UiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6rY04YAAACKUlEQVR42sSXz0pCQRTGry7EQqmgcB3+WUoECdUq2lV7nySfIXsF016iggjJSqhd2iqDdCuuSixQ0ts38A0Mt6vO9c808GPuzJ0553PuOHOOz7ZtS7OEwCHYAxtgHSzx3SdogAq4BZego2VVCBhDDORAx9YvHc6JjbM/6mUQnIAujQ7AHciAXRABARJhX4ZjBpwj5mZpy5OAKHimkT44BwmN1ZLEQYFzbdqK6QrYBE1OfAMpD46diLkN2mrS9kgBQmWLE65BeArnkjVwT5st50qoAxdAhQPv+G2tGSFsFWm7Sl9/BGQ5oEHV1owRq1mjj6xTgNh0PW6a1Bycq3uiT18xVUCOygpzdC7J09eZFBDmwTHQOTjAA3H2l4f0u230AX2GRUeaikqav0AW3X43Shyb9uM03uepfGWZK9LXvhCQZOPRoIAn1kkhIMrGm0EBNdZRn7gw8BAAQdDVuUBZ+zT73UqAvnp+65+LENDm87JBvyus20LAOxsJgwKkr3ch4IWNbYMCpK8XIaDIxoFBAdJXcdKjuDzkKC57OIq/5FFs8WKweVEYv4ykKhPX8Rb4oa/4sICkPseA5JU+ToeFZNU5hmQ3Ski2qBuUhmbgfFU3KHULy2v8btN887qXsFxdiaqSmBTkpvGQmOSVxKTqJTFRU7Msd6yamh2DHZfUbIfv1NSsN2lq5vw1OR4cuuWb//Oxq+bzmJ4fOdJzeYN+ONLzC930/FeAAQAvuZTSaSl6FgAAAABJRU5ErkJggg==');
    }
  }

  &-time {
    width: 250px;
    height: 32px;
    margin-left: 10px;
    line-height: 32px;

    &-txt {
      width: 140px;
      height: 32px;
      color: #fff;
      font-family: 'Microsoft Yahei';
      font-size: 12px;
      line-height: 32px;
      vertical-align: top;
      user-select: none;
    }

    &-fgx {
      width: 5px;
      height: 32px;
      color: #fff;
      font-family: 'Microsoft Yahei';
      font-size: 12px;
      line-height: 32px;
      vertical-align: top;
      user-select: none;
    }
  }

  &-ctime {
    color: #fff;
    font-weight: 500;
    text-align: right;
  }

  &-etime {
    color: #fff;
    font-weight: 400;
    text-align: left;
  }

  &-tiao {
    display: inline-block;
    position: relative;
    width: 560px;
    height: 5px;
    margin-top: 10px;
    margin-left: 15px;
    border-radius: 10px;
    background: #ddd;
    line-height: 5px;
    cursor: pointer;
  }

  &-yuan {
    display: inline-block;
    position: absolute;
    width: 14px;
    height: 14px;
    margin-top: -4px;
    margin-left: 0;
    padding: 0;
    border-radius: 50%;
    background-color: inherit;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjVBN0FGMTlCNjdENjExRTg5MzU4QjcxRkZGM0FFRTVCIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjVBN0FGMTlDNjdENjExRTg5MzU4QjcxRkZGM0FFRTVCIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NUE3QUYxOTk2N0Q2MTFFODkzNThCNzFGRkYzQUVFNUIiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NUE3QUYxOUE2N0Q2MTFFODkzNThCNzFGRkYzQUVFNUIiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz52AwlpAAAAyUlEQVR42mL4//8/AxIWAeI2IL4ExD+g+AIQN0Hl4GqRNQUD8Yf/uMFHqBoUjSCBf/8Jg38wzSBNolDTiAUgtWJMDAwMuUDMx0A8AKktYIB6HgX8OH7w/6sAazAGsbGAS4wgdUAT2JGNfB1ow/Dv7Wswm0lYlEF0/RF0W38xEXQYKCAwAVjjDQxPlLcyMAmJMDCJijPwVbRh03iPARq5pII2kEYxcqKDogQAwyFA/AmPpk/Ykhx6Ir8MxL+A+AsQnwPiZvREDhBgAP0iE9ZX6dF0AAAAAElFTkSuQmCC');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 90%;
    box-shadow: -2px 0 2px #000;
    cursor: pointer;
  }

  &-jindu {
    width: 0;
    height: 5px;
    border-radius: 1px;
    background-color: #469dfd;
  }

  .playSpeed {
    width: 80px;
    height: 25px;
    margin-top: 5px;
    margin-right: 25px;
    border-radius: 15px;
    background-color: #1ba0ff;
    color: #fff;
    font-family: 'Microsoft Yahei';
    font-size: 12px;
    line-height: 25px;
    text-align: center;
    cursor: pointer;

    &:hover {
      background-color: #1ba0ff;
    }

    &-txt {
      width: 45px;
      height: 25px;
      text-align: right;
    }

    &-img {
      width: 15px;
      height: 12px;
      margin-top: 6px;
      margin-left: 3px;
      background-color: inherit;
      background-repeat: no-repeat;
      background-position: center center;
      background-size: 90%;

      &.up {
        background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAFCAYAAACXU8ZrAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkY2MDMwNjc2NjdERTExRThCMURBRDdDM0VCOTc0MjY0IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkY2MDMwNjc3NjdERTExRThCMURBRDdDM0VCOTc0MjY0Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6RjYwMzA2NzQ2N0RFMTFFOEIxREFEN0MzRUI5NzQyNjQiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6RjYwMzA2NzU2N0RFMTFFOEIxREFEN0MzRUI5NzQyNjQiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5skqy8AAAAO0lEQVR42mL4//8/AxJ2BeKnQGyHLI6u4BEQJ6ArRFdgAOWbICvEpoABXSGIcwqIDdEUwLApEJ8ACDAAwViR4LMrygwAAAAASUVORK5CYII=');
      }

      &.down {
        background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjVBN0FGMTlCNjdENjExRTg5MzU4QjcxRkZGM0FFRTVCIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjVBN0FGMTlDNjdENjExRTg5MzU4QjcxRkZGM0FFRTVCIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NUE3QUYxOTk2N0Q2MTFFODkzNThCNzFGRkYzQUVFNUIiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NUE3QUYxOUE2N0Q2MTFFODkzNThCNzFGRkYzQUVFNUIiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz52AwlpAAAAyUlEQVR42mL4//8/AxIWAeI2IL4ExD+g+AIQN0Hl4GqRNQUD8Yf/uMFHqBoUjSCBf/8Jg38wzSBNolDTiAUgtWJMDAwMuUDMx0A8AKktYIB6HgX8OH7w/6sAazAGsbGAS4wgdUAT2JGNfB1ow/Dv7Wswm0lYlEF0/RF0W38xEXQYKCAwAVjjDQxPlLcyMAmJMDCJijPwVbRh03iPARq5pII2kEYxcqKDogQAwyFA/AmPpk/Ykhx6Ir8MxL+A+AsQnwPiZvREDhBgAP0iE9ZX6dF0AAAAAElFTkSuQmCC');
      }
    }

    &-select {
      position: absolute;
      right: 25px;
      bottom: 90px;
      width: 80px;
      padding: 0;
      border: solid 1px #fff;
      border-radius: 10px;
      background-color: rgb(20 38 48 / 20%);
      box-shadow: 0 0 20px rgb(0 0 0 / 10%);
      color: #fff;
      font-family: 'Microsoft Yahei';
      font-size: 12px;
      list-style: none;
      backdrop-filter: blur(10px) saturate(180%);

      li {
        width: 80px;
        height: 20px;
        margin: 5px auto;
        font-family: 'Microsoft Yahei';
        font-size: 12px;
        line-height: 20px;
        text-align: center;
        cursor: pointer;

        &:hover {
          color: #1ba0ff;
        }
      }

      .active {
        color: #1ba0ff;
      }
    }
  }

  &-display-none {
    display: none;
  }

  &-display-block {
    display: block;
  }
}

.unselectde {
  user-select: none;
}

.playTrackInfo {
  position: fixed;
  top: 100px;
  left: 50px;
  height: 260px;
  background-color: #142630;

  .btn {
    width: 35px;
    height: 260px;
    border: 0;
    opacity: 1;
    background-color: #1d313c;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 35%;
    cursor: pointer;

    &.left-btn {
      border-right: solid 1px #4f5a61;
      background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAcCAYAAAC+lOV/AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjVCOTA3MTVDNjg5NjExRThCMjVBRTBCQUZFQkY1RURFIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjVCOTA3MTVENjg5NjExRThCMjVBRTBCQUZFQkY1RURFIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NUI5MDcxNUE2ODk2MTFFOEIyNUFFMEJBRkVCRjVFREUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NUI5MDcxNUI2ODk2MTFFOEIyNUFFMEJBRkVCRjVFREUiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5wPz85AAAAu0lEQVR42pzVvQ3CMBQE4ODQshELkJqagkUQbOGGgpqaCViFgho6hMRF4kmWZb+fi3RV9J0S+yVe5JyH4DUiJ+SzJOAZ2SHPRMI3sk0k3CD3xML5RmKhhVWoYRP2sAu2cAlfGqxxDScNljgMBVNQ8JGBniEx8QG5ICvkhqwj+IvsmQJ5bKqgfOdwQb1goYLWarsLelvlKtD22SywhkQt8ExYt8A7ns2CyE9fCob/h3SNnhhS8JiPm58AAwD5mU5f1lhA2AAAAABJRU5ErkJggg==');
    }

    &.right-btn {
      border-left: solid 1px #4f5a61;
      background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAbCAYAAACjkdXHAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjVGQTRFMjQyNjg5NjExRThBNzNBRUE0MTc2OTI0RjRFIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjVGQTRFMjQzNjg5NjExRThBNzNBRUE0MTc2OTI0RjRFIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NUZBNEUyNDA2ODk2MTFFOEE3M0FFQTQxNzY5MjRGNEUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NUZBNEUyNDE2ODk2MTFFOEE3M0FFQTQxNzY5MjRGNEUiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4ulElKAAABdklEQVR42pTUPyiFURjH8XOv6+ZPVwy3LAaLQRkMBiVKyP+QUoqBSSZsjMhguJNur8WlRJQoyUARBpNBBhPFYFBEIRHfp563btJ9z3nq0zu8/c4573nOe0Ke550ZY2Jow51xqLA+K3CMUtewzHiuQRmgzCX8jEacoEQHKHdZ9iuacYBiHKHSNiz1hg7sIY5DVNmGpT7QjS0U6UpqbMNSn+jDGgqwj3rbsNQXBpBCPnZ1T6zCUt8YQhK52EGXbVjqB6NIIIoN/SSrsD/AOOaQjVUMyouIw2mc1HZOY0lWEjZuNaPnQHIJ1/AUWvVTxlyWPatLly4MY9kmHMI8JtL6v26zYRJcwEjaydv2X2YKZ2FRD8o7enWzTFBYgivo1/Z06l9mgsJR/Sl68KI3zel/M/wN52AT7XhCi15RJiicp5shV9IjmnCRaTf9cEx/u1o8oAFXQT2UcKHuYjXuNXhtc2oiOqMEb/XGuHG5eqUtl6hzCUr9CjAA6XNLvl2gWKMAAAAASUVORK5CYII=');
    }
  }

  .center-tracks {
    height: 100%;
    overflow: hidden;

    .track {
      width: 220px;
      height: 100%;
      padding: 5px 10px;
      background-color: #142630;

      &:nth-child(odd) {
        background-color: #1c2f39;
      }

      .info-line {
        display: inline-block;
        width: 100%;
        height: 25px;
        margin: 0;
        padding: 0;
        overflow: hidden;
        line-height: 25px;
        white-space: nowrap;

        div {
          user-select: none;
        }
      }

      .info-name {
        display: inline-block;
        color: #9a9a9c;
        font-family: 'Microsoft Yahei';
        font-size: 12px;
      }

      .info-value {
        display: inline-block;
        color: #fff;
        font-family: 'Microsoft Yahei';
        font-size: 12px;
        white-space: nowrap;
      }
    }
  }
}

.wp_marker {
  display: inline-block;
  border: 0;
  background-color: inherit;
  box-shadow: none;
  color: #fff;
  font-family: 'Microsoft Yahei';
  font-size: 14px;
  -webkit-text-shadow: #333 1px 0 0, #333 0 1px 0, #333 -1px 0 0, #333 0 -1px 0;
  -moz-text-shadow: #333 1px 0 0, #333 0 1px 0, #333 -1px 0 0, #333 0 -1px 0;
  text-shadow: #333 1px 0 0, #333 0 1px 0, #333 -1px 0 0, #333 0 -1px 0;
  white-space: nowrap;
}

.track_mouse_tip {
  position: absolute;
  border: solid 1px #fff;
  border-radius: 3px;
  background-color: #142630;
  box-shadow: 1px 1px 3px #ccc;
  cursor: default;

  .one {
    position: relative;
    _position: absolute;
    width: 170px;
    padding: 3px 5px !important;
    opacity: 0.8;
    color: #fff;
    font-size: 13px;
    line-height: 1.6em;
  }
}

.trackStopSlowClass {
  padding: 0 4px;
  border: none;
  background-color: #2078f0;
  color: white;
  font-size: 12px;
}

.playShipList,
.playShipList * {
  box-sizing: border-box;
}

.playShipList {
  position: absolute;
  z-index: 999;
  top: 50px;
  left: 50px;
  width: 600px;
  height: 300px;
  background-color: #03192c;

  &Title {
    width: 100%;
    height: 40px;
    border-bottom: 1px solid #444;
    line-height: 40px;

    .titleText {
      display: inline-block;
      width: calc(100% - 310px);
      margin-left: 20px;
      color: white;
      font-size: 14px;
      font-weight: 700;
    }

    .titleBtn {
      display: inline-block;
      width: 250px;
      height: 100%;
      float: right;

      div {
        input {
          width: 200px;
          height: 24px;
          border: 1px solid #444;
          border-radius: 4px;
          outline: none;
          background-color: #03192c;
          color: white;
          text-indent: 24px;
        }

        .search {
          display: inline-block;
          position: absolute;
          top: 11px;
          left: 7px;
          width: 16px;
          height: 16px;
          background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAF8SURBVHgB7VftcYMwDBWdgE6QbJBsEDZhhI7gURiBETwC7QTQCUgnUOU7+VBcYhvblP7ou9OJO/TxLBlhAxyMaosxItakTiRXkjvLR1VVd9gLJimJIhnwOcy7luQEJcGJZ5Fo5mQdSU+infcGCnJBQc4c3MI8Nx77hknJiqRVg5OPHGj0JV7xvTm+20ng0uukAM4C9FZnlcV+nUTcnmAniwYywe2wG7eOcWjZoYNCEBs5XAXR+wYKQVRhCBnWtlxQGLjMidU2vLC+sH6H8phYn8FDwLLbY6bbRV3AQ+B1RwLexVkCluUV9iPw9dTiyE0oDe1neINyyeM+QzZWSfPbH7PjmG2McS3KlV0FsXqM/q/gkT8j4axzSDjJw70PBBi3tAMfDyTplWQS8hDa+YhwYi3sNeaejDiwwkfMHLxnUgP+PLQqsYgiJEygFsPHcoXOsIkhkXIxMeO6ZjEjfPJdTAwJUma2GD2RNGT/Cb8JpxI9HAFc7hpv8I+/hG89dPygrS329gAAAABJRU5ErkJggg==');
          background-size: 100% 100%;
          color: white;
        }

        .clear {
          display: inline-block;
          position: absolute;
          top: 12px;
          right: 7px;
          width: 16px;
          height: 16px;
          background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAFWSURBVHgB7ZhRroIwEEWnfQt5uBPdEco6UHakOxEXAugoTQhBZTp3/JqTEAiB9h5o2gEix3Ecx3GcbILk4v3+cOV9jGFb1/WNgJRlWYQQz3x8Oh03a++LJCCEwFvR98Olqqp/ApHCc9vchwSRQN93u8euRUpMw7/api0JkOmOHcb4x6+6GIah1QynpfDStsQCqWOtBCI8kyWQAuRKoMIz2QIpiFQCGZ5RCaRAayXQ4Rm1QAr2TcIiPAMRYD5JWIVnYALMkkTXdcEqPAMVYOYSz06Mwj/bJgOmEuMpk/CMqJSQ8Hj6i8doTIbQdMyPp9Vlxzugb2BptrEoAKdAp9F3sw2yAJwDW8i+TZVWEpBSYu08byGhLuakixRaQlVO566wSInsDxpteYCSyPqkRNU2CAmRgEVVqZUQ/lbBV5VN07TzxU5yv/i/EBkUZjMJchzHcRzH+RF3TaVTHhTDyDoAAAAASUVORK5CYII=');
          background-size: 100% 100%;
          color: white;
          cursor: pointer;
        }
      }
    }

    .titleClose {
      display: inline-block;
      position: relative;
      top: 8px;
      right: 12px;
      width: 24px;
      height: 24px;
      float: right;
      background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAFWSURBVHgB7ZhRroIwEEWnfQt5uBPdEco6UHakOxEXAugoTQhBZTp3/JqTEAiB9h5o2gEix3Ecx3GcbILk4v3+cOV9jGFb1/WNgJRlWYQQz3x8Oh03a++LJCCEwFvR98Olqqp/ApHCc9vchwSRQN93u8euRUpMw7/api0JkOmOHcb4x6+6GIah1QynpfDStsQCqWOtBCI8kyWQAuRKoMIz2QIpiFQCGZ5RCaRAayXQ4Rm1QAr2TcIiPAMRYD5JWIVnYALMkkTXdcEqPAMVYOYSz06Mwj/bJgOmEuMpk/CMqJSQ8Hj6i8doTIbQdMyPp9Vlxzugb2BptrEoAKdAp9F3sw2yAJwDW8i+TZVWEpBSYu08byGhLuakixRaQlVO566wSInsDxpteYCSyPqkRNU2CAmRgEVVqZUQ/lbBV5VN07TzxU5yv/i/EBkUZjMJchzHcRzH+RF3TaVTHhTDyDoAAAAASUVORK5CYII=');
      background-size: 100%;
      color: white;
      cursor: pointer;
    }
  }

  &Content {
    width: 100%;
    height: 220px;

    * {
      color: white;
    }

    table {
      width: 100%;
      table-layout: fixed;
    }

    tr {
      height: 30px;
    }

    td {
      overflow: hidden;
      text-align: center;
      text-overflow: ellipsis;
      word-break: break-all;
      white-space: nowrap;

      span {
        display: inline-block;
        position: relative;
        top: 4px;
        width: 16px;
        height: 16px;
        background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAE3SURBVHgBxVLtTcMwEH2209J/ZIQg8SVEUbJBOwHpCN3AnYB2ArxBYYJ0A7JBEF9q+UPYIPyDpom5I0QqEPGzPcnS3fnde/azgU2HaGp6OnEVVE9AZA5W6dwE6b+DxzrxgNaFBULAxrTtUtuneiaRT9YJZJ2c6IQA7RsCvX0g31uY7mBhTvsCeSBhX3nvQD/4PwZZqUA7EiiHBNYdOP6RfnzhBTje3HTHFsWIwFE9LHmoUipGBIi5aSGnTMKLc+49m7MZ1RMJEbEH8h3IGAohd38bsEJFU0f5je0ArkxNkCnkA2ExPtR3YeUYK4mp+lK2Q+7t63tyWV3Snftsklg3p0ArooErieV17SAfa4ecpjRkgScT3Fbkf55DkRHynEoCCD5ar+k5Gj9AReB4Jay7RBHzdbD1+ASUC4f2wW8YNQAAAABJRU5ErkJggg==');
        background-size: 100% 100%;
        cursor: pointer;

        &.unvisiable {
          background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAC8SURBVHgB5U/bDcIwDGzT7gFsABvABh0BpGYAJghMwH8eAiYAJiDdoGzACFkgCeeqifhBDNBISc72nc8uiokcY4xQSq3/8YgD7okwoyeE0JVleZZSbn+JtNYNOLcYY0dxPTx13XvvHWNMgCCQ6kF4DZ0ZmwE3gG9cV1WVzY4QPVF8tG27wL9DapmcSISJNqitgK/EzUIk9pzzw+gwJzeK6VLD1GjkHPOoSNjvfbDLJWE0shC7FMP5XkzkfAD7QV9myppTmwAAAABJRU5ErkJggg==');
        }
      }
    }

    .contentTitle {
      width: calc(100% - 6px);

      tr {
        background-color: #000;
      }
    }

    .contentContent {
      width: 100%;
      max-height: 190px;
      overflow: hidden scroll;

      tr {
        &.unvisiable {
          display: none;
        }

        &:hover {
          background-color: #000;
        }
      }
    }

    .shipList {
      &_td1 {
        width: 30px;
      }

      &_td3 {
        width: 80px;
      }

      &_td4 {
        width: 55px;
      }

      &_td5 {
        width: 50px;
      }

      &_td6 {
        width: 120px;
      }

      &_td7 {
        width: 120px;
      }

      &_td8 {
        width: 80px;
      }
    }
  }

  &Foot {
    width: 100%;
    height: 40px;
    line-height: 40px;

    input {
      width: 70px;
      height: 26px;
      margin-top: 6px;
      margin-right: 20px;
      float: right;
      border-radius: 4px;
      background: linear-gradient(97.85deg, #1ea1ff 0%, #2bc9f7 100%);
      color: white;
      line-height: 11px;
      cursor: pointer;
    }
  }
}

.tbody {
  position: absolute;
  z-index: 9999;
  top: 10%;
  left: 10%;
  width: 600px;
  border: 0;
  background: #2771d4;
  vertical-align: middle;

  .tide_img_div {
    display: none;
    position: absolute;
    top: 49px;
    left: 206px;
    width: 2px;
    height: 198px;
    background-color: #19cebf;

    b {
      position: absolute;
      top: 0;
      left: 0;
      padding: 0 2px;
      background-color: #19cebf;
      color: #fff;
      font-size: x-small;
    }
  }
}

.tid {
  &_body {
    position: relative;
    width: 600px;
    height: 400px;
    background: #fff;
    text-align: left;

    .tide {
      &_img {
        position: absolute;
        top: 110px;
        left: 0;
        width: 600px;
        height: 300px;
      }

      &_echart_div {
        display: none;
        width: 600px;
        height: 300px;
        margin-top: 15px;
      }
    }
  }

  &_close,
  &_hm {
    width: 2px;
    height: 2px;
    color: #fff;
  }

  &_close {
    position: absolute;
    top: 0;
    right: 4px;
    width: 24px;
    height: 24px;
    overflow: hidden;
    cursor: pointer;

    &:hover {
    }
  }

  &_title {
    min-width: 1000px;
    height: 30px;
    padding-left: 6px;
    overflow: hidden;
    color: #fff !important;
    font-weight: bold !important;
    line-height: 30px;
    text-align: left;
    white-space: nowrap;

    a {
      color: #ff0;
    }
  }

  &_hm {
    background-position: -75px -13px;
  }

  &_a {
    padding-top: 5px;
    color: #686868;
    font-size: 11px;
    text-decoration: none;
    cursor: pointer;
    user-select: none;

    &.before {
      position: absolute;
      top: 10px;
      left: 10px;
      font-weight: bold;
    }

    &.after {
      position: absolute;
      top: 44px;
      left: 10px;
      font-weight: bold;
    }
  }

  &_day {
    &_title {
      padding-top: 10px;
      padding-left: 24px;
      color: black !important;
      font-size: 14px;
      font-weight: 600;
    }

    &_table {
      margin-top: 4px;
      margin-bottom: 10px;
      margin-left: 20px;
      border-spacing: 4px;
      border-collapse: separate;
      color: black !important;
      font-size: 12px;

      td {
        width: fit-content;
        padding: 0 5px;
        font-size: 12px;
      }
    }

    &_box {
      position: absolute;
      z-index: 1;
      top: 0;
      left: 65px;
      border-bottom: solid #d3d3d3 1px;
      color: black !important;

      .tide-table {
        width: 530px;
      }
    }
  }

  &_content {
    position: relative;
    padding-top: 5px;

    a {
      z-index: 99;
      color: #686868;

      &:hover,
      &:active {
        color: #296cdf;
        text-decoration: none;
        cursor: pointer;
      }
    }
  }

  &-table {
    .td-next {
    }

    .border-left {
      border-left: solid #d3d3d3 1px;
    }
  }
}

.xwin_button {
  a {
    display: inline-block;
    width: 60px;
    height: 22px;
    margin: 0 5px;
    overflow: hidden;
    border-radius: 4px;
    background: #237fa3;
    color: #fff;
    line-height: 22px;
    text-align: center;
    text-decoration: none;

    &:hover {
      background: #3e99bd;
      text-decoration: none;
    }
  }
}

.typhoonListWin {
  position: absolute;
  z-index: 999;
  top: 85px;
  right: 320px;
  width: 200px;
  height: auto;
  overflow: hidden;
  border-radius: 2px;
  box-shadow: 0 2px 2px #999;

  .typhoonListTitle {
    width: 200px;
    height: 30px;
    border-radius: 2px;
    background-color: #2771d4;
    color: #fff;
    font-size: small;
    line-height: 30px;
    cursor: move;

    .title-txt {
      position: absolute;
      width: 80px;
      margin-left: 10px;
    }
  }

  .yearList {
    width: 200px;
    height: 40px;
    border-bottom: solid 1px #ddd;
    background-color: #fff;
    color: black !important;
    font-size: 12px;
    line-height: 40px;
  }

  .typhoonList {
    width: 200px;
    height: 330px;
    overflow-y: auto;
    background-color: #fff;
  }

  .title-btn {
    position: absolute;
    width: 14px;
    height: 14px;
    padding: 6px;
    color: #c2f12c;
    cursor: pointer;

    &.btn-close:hover,
    &.btn-min:hover {
      color: #e1dfdf;
    }
  }

  .min-max {
    top: 4px;
    right: 36px;
    cursor: pointer;
  }

  .btn {
    &-close {
      top: 4px;
      right: 6px;
      background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjc2NTc2RTQxODAzMDExRTg5QkJCOUQ5MUVERkQwNjU3IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjc2NTc2RTQyODAzMDExRTg5QkJCOUQ5MUVERkQwNjU3Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NzY1NzZFM0Y4MDMwMTFFODlCQkI5RDkxRURGRDA2NTciIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NzY1NzZFNDA4MDMwMTFFODlCQkI5RDkxRURGRDA2NTciLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6MXIzqAAAAcUlEQVR42ozQwQ2AMAgFUGLiVnqpl46vN53BIRCSqtiC/SQ/Adp3gZj5kCQJgcmSVZtFcoI4l7/zvUDwg3S2D3/4g2oY4QZ5sMYuiqDFLtIM5NcY9G91DpGig0VoMjsX91CIEeRiFDVYhx1EFm+XAAMAA6BDcALCHj0AAAAASUVORK5CYII=')
        no-repeat center;
    }

    &-min {
      background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAACCAIAAADn6Hr9AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjczRkQ1RjI4N0E5RTExRThCRkM0OTI5MjI4NkU1QTU3IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjczRkQ1RjI5N0E5RTExRThCRkM0OTI5MjI4NkU1QTU3Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NzNGRDVGMjY3QTlFMTFFOEJGQzQ5MjkyMjg2RTVBNTciIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NzNGRDVGMjc3QTlFMTFFOEJGQzQ5MjkyMjg2RTVBNTciLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5BLVSNAAAAFUlEQVR42mL89u0bA3GAiYFoABBgAPMqAuYWOjRUAAAAAElFTkSuQmCC')
        no-repeat center;
    }

    &-max {
      background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAKCAYAAACE2W/HAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkU0RUM3MTI4N0E5RTExRTg4REM2QUZEM0FFMzMyOEYyIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkU0RUM3MTI5N0E5RTExRTg4REM2QUZEM0FFMzMyOEYyIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6RTRFQzcxMjY3QTlFMTFFODhEQzZBRkQzQUUzMzI4RjIiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6RTRFQzcxMjc3QTlFMTFFODhEQzZBRkQzQUUzMzI4RjIiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6faIYjAAAAJklEQVR42mL8DwQMZAAmBjIBC5RmJFHff7JtHNVIRHSQnAgAAgwAszcGE5WgKogAAAAASUVORK5CYII=')
        no-repeat center;
    }

    &-tuli {
      top: 4px;
      right: 70px;
      background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAKCAYAAADLhGwXAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkMzOUY4REZFN0E5RTExRTg5RTlDOEU4RjBBMzY3NDYxIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkMzOUY4REZGN0E5RTExRTg5RTlDOEU4RjBBMzY3NDYxIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QzM5RjhERkM3QTlFMTFFODlFOUM4RThGMEEzNjc0NjEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QzM5RjhERkQ3QTlFMTFFODlFOUM4RThGMEEzNjc0NjEiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5pz8kUAAAA0klEQVR42mL8Z7WYAQp8gbgQiE2h/NNA3AfEW2AKGI/GMNAS/LdegszF6x4mqGALEG8CYkcg5oFiEHszVI7egKB7QA73AeJqPIZUQ31PL0CUexiBSWUf1Df4wH4gdsIlCUtCaFFNrjqi3MMCJEyICAWQmv+43IOeVClU95kY9zARGX2MDIMLMIIcfoYIhaehjseGsXmSEnVEuQeUxn2hORgf8APlaDoVh0S5hwlaxLTiUdQKVUMvQJR7YGm8Boj9oaXHVyjeDw3pmgFIwwTdAxBgAOk4PoahwLKqAAAAAElFTkSuQmCC');
      background-repeat: no-repeat;
      background-position: center center;
      background-size: 90%;
      cursor: pointer;
    }
  }

  .typhonUl {
    margin: 0;
    padding: 0;
    padding-left: 10px;
  }

  .typhLi {
    height: 30px;
    color: black !important;
    line-height: 30px;
    list-style: none;
    cursor: pointer;

    &:hover {
      background: rgb(0 191 251 / 20%);
    }
  }
}

/* ============================= */
.textBlack {
  color: black !important;
}

.inputAndSelectDefaultSyle {
  width: 56px;
  margin-right: 10px;
  margin-left: 10px;
  border: 1px solid #ddd !important;
  background: white !important;
  color: black !important;
}

.typhoonListBox {
  padding: 2px;
}

.weather {
  &-label {
    width: 40px;
    height: 40px;
    border: none;
    background-color: #3d80df;
    color: #fff !important;
    font-family: Arial, serif !important;
    font-size: medium;
    text-align: center;
  }

  &-bindTooltip {
    background-color: inherit;
    box-shadow: none;

    &.leaflet-tooltip-left::before {
      border-left-color: transparent !important;
    }
  }

  &-tooltip {
    width: 250px;
    height: 383px;
    padding: 20px 0 0 20px;
    overflow: hidden;
    font-family: Arial;
    font-size: larger;

    div {
      color: #fff !important;
    }

    .title {
      width: 100%;
      margin: 0;
      padding: 0;
      font-size: 16px;
      font-weight: bold;
      text-align: left;
    }

    .field {
      margin-bottom: 4px;
      margin-left: 10px;
      padding-left: 0;
      font-size: 12px;
      font-weight: 500;

      &.yubaotime {
        margin-top: 5px;
        margin-left: 0;
      }

      &.icon {
        position: relative;
        width: 62px;
        height: 62px;
        margin: auto;

        img {
          position: absolute;
          inset: 0;
          width: auto;
          max-width: 100%;
          height: auto;
          max-height: 100%;
          margin: auto;
        }
      }

      &.date {
        margin-bottom: 10px;
        text-align: center;
      }
    }

    .area_info {
      width: 100%;
      height: 80px;
      float: left;
    }

    .day_info {
      width: 136px;
      margin-right: 15px;
      float: left;
    }

    .ml0 {
      margin-left: 0;
    }
  }

  &-typh {
    &-legend {
      position: absolute;
      z-index: 999;
      right: 50px;
      width: 180px;
      height: 400px;
      overflow: hidden;
      border-radius: 2px;
      background: #fff;
      box-shadow: 0 2px 2px #999;
      color: black !important;

      .typh-title {
        height: 30px;
        margin-bottom: 10px;
        background-color: #2771d4;
        color: #fff;
        line-height: 30px;

        .title {
          &-btn {
            width: 15px;
            height: 15px;
            margin-top: 8px;
            margin-right: 5px;
            float: right;
            border: none;
            outline: none;
            cursor: pointer;
          }

          &-txt {
            margin-left: 10px;
            float: left;
            font-size: 12px;
          }
        }

        .btn {
          &-min {
            background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAACCAIAAADn6Hr9AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjczRkQ1RjI4N0E5RTExRThCRkM0OTI5MjI4NkU1QTU3IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjczRkQ1RjI5N0E5RTExRThCRkM0OTI5MjI4NkU1QTU3Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NzNGRDVGMjY3QTlFMTFFOEJGQzQ5MjkyMjg2RTVBNTciIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NzNGRDVGMjc3QTlFMTFFOEJGQzQ5MjkyMjg2RTVBNTciLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5BLVSNAAAAFUlEQVR42mL89u0bA3GAiYFoABBgAPMqAuYWOjRUAAAAAElFTkSuQmCC')
              no-repeat center;
          }

          &-max {
            background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAKCAYAAACE2W/HAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkU0RUM3MTI4N0E5RTExRTg4REM2QUZEM0FFMzMyOEYyIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkU0RUM3MTI5N0E5RTExRTg4REM2QUZEM0FFMzMyOEYyIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6RTRFQzcxMjY3QTlFMTFFODhEQzZBRkQzQUUzMzI4RjIiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6RTRFQzcxMjc3QTlFMTFFODhEQzZBRkQzQUUzMzI4RjIiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6faIYjAAAAJklEQVR42mL8DwQMZAAmBjIBC5RmJFHff7JtHNVIRHSQnAgAAgwAszcGE5WgKogAAAAASUVORK5CYII=')
              no-repeat center;
          }

          &-right {
            background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAOCAYAAAAbvf3sAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjdDNjhENUExN0E5RTExRThCMEM3RkNENEFGRjBERTMxIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjdDNjhENUEyN0E5RTExRThCMEM3RkNENEFGRjBERTMxIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6N0M2OEQ1OUY3QTlFMTFFOEIwQzdGQ0Q0QUZGMERFMzEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6N0M2OEQ1QTA3QTlFMTFFOEIwQzdGQ0Q0QUZGMERFMzEiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5kphFhAAAAxklEQVR42oTQsQ4BQRDG8duLVkQUcp1Cp1Cq6HRqjQfQaYlOp1J5lWtU4gFIaERCQ4JaIyLWf+U2WZtxLvldLjPzZfdGaa0D4cniJjUCAnu0TNAxQ9+rfZhXDRd0nEaErRSyHxUc0RNCAylglLDDKC3k37GIFaYIpZAStpRDjBcaSS3CAvNQWJypZfB0ag/ckfevZI7fYAKV1ApYYuz/QxkHDJ3a17AbqOKEbtqwDdRxRfvfsA2s0fQasTT8a612jWep8RZgABvelBPjP94QAAAAAElFTkSuQmCC')
              no-repeat center;
          }

          &-left {
            background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAOCAYAAAAbvf3sAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkVDNzM2Rjc5N0E5RTExRTg5QkIyRTc2MDAxMTBENUEwIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkVDNzM2RjdBN0E5RTExRTg5QkIyRTc2MDAxMTBENUEwIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6RUM3MzZGNzc3QTlFMTFFODlCQjJFNzYwMDExMEQ1QTAiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6RUM3MzZGNzg3QTlFMTFFODlCQjJFNzYwMDExMEQ1QTAiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6QGeJRAAAAxklEQVR42mL8//8/Aw7AC8Sf0QWZcCguA+K1aGI+QHyPAWQDGi4H4htALIkkFgPEL4DYnBjFeUD8BIi1wc4noLgJiG8BsQJMDCZRgaaYCYinAPF5IBZHdgWImAPEt9FMPgLF/Oh+BIWSABD/AOJfSCHyE4hZgJgZI/ygOjuA+BwQC0P5jEDcB8SX0WxG8TS6JhCuBuL7QKyCTQMuTRnQYDXApgGE27FoCgPil0Bsi00DTNNWNDE3IL7CiCfxSQLxc3RBgAADAFtvkJn89hxqAAAAAElFTkSuQmCC')
              no-repeat center;
          }
        }
      }

      &-hid {
        display: none;
      }

      &-block {
        display: block;
      }
    }

    &-bindTooltip {
      padding: 0;
      border: none;
      background-color: inherit;
      box-shadow: none;

      &.leaflet-tooltip-right {
        &::before {
          border-right-color: rgb(29 55 76 / 80%) !important;
        }
      }
    }

    &-tooltip {
      padding: 0 6px;
      opacity: 0.85;
      background-color: #1d374c;
      color: #fff !important;
      font-family: Arial;
      font-size: larger;

      .title {
        margin-bottom: 5px;
        padding-top: 15px;
        font-size: 16px;
        font-weight: bold;
        text-align: center;
      }

      .field {
        margin-top: 4px;
        padding-left: 4px;
        font-size: 12px;
        font-weight: 500;
      }
    }
  }

  &-chaoxi {
    &-bindTooltip {
      background-color: inherit;
      box-shadow: none;
    }

    &-tooltip {
      width: fit-content;
      padding-right: 15px;
      opacity: 0.85;
      // background-color: #1d374c;
      color: #fff !important;
      font-family: Arial;
      font-size: larger;
      border-radius: 10px;
      background-color: rgba(29, 55, 76, 0.5);
      box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
      backdrop-filter: blur(10px) saturate(180%);

      .title {
        margin-bottom: 15px;
        padding-top: 15px;
        font-size: 16px;
        font-weight: bold;
        text-align: center;
      }

      .field {
        margin-bottom: 4px;
        padding-left: 15px;
        font-size: 12px;
        font-weight: 500;
      }
    }
  }
}

.leaflet-control-left {
  margin-left: 30px !important;
}

.leaflet-popup-content-wrapper_1 {
  padding: 0;
  border-radius: 0;
  box-shadow: 0 3px 14px rgb(0 0 0 / 40%);
  color: #333;
  text-align: left;
}

.up_down_box {
  width: 80px;
  margin: 0;
  margin-top: -4px;
  margin-left: -35px;
  padding: 0;
  color: #fff;
  font-size: 12px;

  .title {
    font-size: 14px;
    font-weight: bold;
    line-height: 14px;
    text-align: center;
  }

  .lable {
    line-height: 12px;
    text-align: center;
  }
}

.tooltip-bbox {
  .box {
    padding: 0;
    transform: scale(0.8);
    border-radius: 36%;
    background-color: #ffa69f;
    color: #fff;
    font-family: Arial;
    font-size: larger;
    font-size: small;
    font-weight: normal;
    text-align: center;
  }

  .value {
    text-align: center;
  }
}

.leaflet-control-velocity {
  margin: 0 !important;
  padding: 0 5px;
  background-color: rgb(255 255 255 / 70%);
  color: #333;
  font: 11px/1.5 'Helvetica Neue', Arial, Helvetica, sans-serif;
}

.leaflet-control-container {
  & > div {
    display: flex;
    flex-direction: column;
  }

  .leaflet-left {
    align-items: start;
  }

  .leaflet-right {
    align-items: end;
  }
}

/* shipxy_popup start */
.shipxy_popup {
  opacity: 0.85 !important;

  .box {
    padding: 10px;
    border-radius: 12px;
    background-color: #1d374c;
    color: #fff;
    font-family: Arial;
    font-size: larger;
  }

  .title {
    margin-bottom: 10px;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
  }

  .field {
    margin-bottom: 4px;
    font-size: 14px;
    font-weight: 500;
  }

  a {
    &.leaflet-popup-close-button {
      color: #fff !important;
    }
  }

  &.bfc0 {
    .box {
      background-color: #fff;
      color: #000;
    }

    a {
      &.leaflet-popup-close-button {
        color: #000 !important;
      }
    }
  }
}

.shipxy_popup .leaflet-popup-content-wrapper,
.shipxy_popup .leaflet-popup-tip-container .leaflet-popup-tip {
  background: #1d374c;
}

.shipxy_popup.bfc0 .leaflet-popup-content-wrapper,
.shipxy_popup.bfc0 .leaflet-popup-tip-container .leaflet-popup-tip {
  background: #fff;
}

/* shipxy_popup end */

.left_radius_2 {
  border-radius: 2px 0 0 2px;
}

.right_radius_2 {
  border-radius: 0 2px 2px 0;
}

.bottom_radius_2 {
  border-radius: 0 0 2px 2px;
}

.shadow_2 {
  box-shadow: 0 2px 2px rgb(0 0 0 / 25%);
}

.m_l_5 {
  margin-left: 5px;
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
  background: none;
}

::-webkit-scrollbar-thumb {
  width: 6px;
  height: 6px;
  border-radius: 6px;
  background: #d7d7d7;
}

input {
  &::-moz-input-placeholder {
    color: #bcbcbc;
  }

  &::-o-input-placeholder {
    color: #bcbcbc;
  }
}

/* marker-tooltip字体 */
.m-tootip-txt {
  display: inline-block;
  border: 0;
  background-color: inherit;
  box-shadow: none;
  font-family: 'Microsoft Yahei';
  font-size: 14px;
  white-space: nowrap;

  &.c000 {
    color: #000;
    -webkit-text-shadow: #fff 1px 0 0, #fff 0 1px 0, #fff -1px 0 0,
      #fff 0 -1px 0;
    -moz-text-shadow: #fff 1px 0 0, #fff 0 1px 0, #fff -1px 0 0, #fff 0 -1px 0;
    text-shadow: #fff 1px 0 0, #fff 0 1px 0, #fff -1px 0 0, #fff 0 -1px 0;
  }

  &.cfff {
    display: inline-block;
    border: 0;
    background-color: inherit;
    box-shadow: none;
    color: #fff;
    font-family: 'Microsoft Yahei';
    font-size: 14px;
    -webkit-text-shadow: #333 1px 0 0, #333 0 1px 0, #333 -1px 0 0,
      #333 0 -1px 0;
    -moz-text-shadow: #333 1px 0 0, #333 0 1px 0, #333 -1px 0 0, #333 0 -1px 0;
    text-shadow: #333 1px 0 0, #333 0 1px 0, #333 -1px 0 0, #333 0 -1px 0;
    white-space: nowrap;
  }

  &.leaflet-tooltip-top {
    &::before {
      border-top-color: transparent;
    }
  }
}

.m_cursor {
  cursor: crosshair !important;
}

/* tooltip */
.e-tooltip {
  margin-left: 8px;
  padding: 1px 0;
  border: none;
  border-radius: 2px;
  background-color: inherit;
  box-shadow: none;
  color: #fff;
  font-size: 12px;

  &.leaflet-tooltip-right {
    &::before {
      border-right-color: rgb(0 3 51 / 80%) !important;
    }
  }

  .box {
    padding: 2px 4px;
    border-radius: 2px;
    background-color: rgb(0 3 51 / 80%);
    font-family: Arial;
    font-size: larger;
  }

  .title {
    margin-bottom: 5px;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
  }

  .field {
    font-size: 12px;
    font-weight: 500;
  }

  &.b-fff {
    &.leaflet-tooltip-right {
      &::before {
        border-right-color: rgb(255 255 255 / 80%) !important;
      }
    }

    .box {
      background-color: rgb(255 255 255 / 80%);
      color: #333;
    }
  }

  &.b-fff-b0 {
    &.leaflet-tooltip-right {
      &::before {
        border-right-color: rgb(255 255 255 / 80%) !important;
      }
    }

    .box {
      padding: 0 2px;
      background-color: rgb(255 255 255 / 80%);
      color: #000;
    }
  }
}

.popup_lable_only {
  margin-bottom: 0;

  .leaflet-popup-tip-container {
    display: none;
  }

  .leaflet-popup-content-wrapper {
    background: inherit;
  }

  .leaflet-popup-content {
    margin: 0;
    background: inherit;
    color: #f805e3;
    user-select: none;
  }
}

.popup_lable_only .leaflet-popup-content-wrapper,
.leaflet-popup-tip {
  box-shadow: none;
}

.track-popup,
.ai-track-popup {
  .leaflet-popup-content-wrapper {
    // 内容区域
    padding: 10px;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 3px 14px rgb(0 0 0 / 40%);
    color: #333;

    ul {
      padding: 2px;
      line-height: 18px;
      width: fit-content;
      font-size: 12px;
      li {
        font-size: 12px;
        color: #666;
      }
    }
  }

  .leaflet-popup-tip {
    background: #fff;
  }
}

/* 自定义未选中时的样式 */
input[type='checkbox'] {
  accent-color: #1ba0ff; /* 更改勾选框的勾边颜色（部分浏览器支持） */
}

/* 自定义选中时的样式，可能需要使用伪元素和额外的标签来实现更复杂的样式 */
input[type='checkbox']:checked + label::before {
  content: '\2714'; /* 使用 Unicode 符号表示勾选 */
  color: #1ba0ff; /* 改变勾的颜色 */

  /* 这里还可以添加其他样式，比如背景色、边框等 */
}

.my_css_forecast {
  position: absolute;
  top: -24px;
  left: 0;
  margin-top: -6px;
  padding: 4px 9px;
  border: none;
  border-radius: 10px;
  background-color: rgb(1 29 60 / 80%);
  box-shadow: none;
  color: #fff;
  font-size: 13px;

  &::before {
    border-top-color: transparent;
  }
}

.foreacast_panel {
  position: fixed;
  z-index: 1000;
  bottom: 0;
  width: 100%;
  background: #fff;

  .castbox {
    position: absolute;
    z-index: 1000;
    right: 0;
    bottom: 200px;
    left: 0;
    width: 100%;
    margin: auto;
    background: #fff0;
    cursor: auto;
    user-select: none;

    .areaplayer .areaplayer-yuan {
      display: inline-block;
      position: absolute;
      width: 14px;
      height: 14px;
      margin-top: -4px;
      margin-left: 0;
      padding: 0;
      border-radius: 50%;
      background-color: inherit;
      background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjVBN0FGMTlCNjdENjExRTg5MzU4QjcxRkZGM0FFRTVCIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjVBN0FGMTlDNjdENjExRTg5MzU4QjcxRkZGM0FFRTVCIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NUE3QUYxOTk2N0Q2MTFFODkzNThCNzFGRkYzQUVFNUIiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NUE3QUYxOUE2N0Q2MTFFODkzNThCNzFGRkYzQUVFNUIiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz52AwlpAAAAyUlEQVR42mL4//8/AxIWAeI2IL4ExD+g+AIQN0Hl4GqRNQUD8Yf/uMFHqBoUjSCBf/8Jg38wzSBNolDTiAUgtWJMDAwMuUDMx0A8AKktYIB6HgX8OH7w/6sAazAGsbGAS4wgdUAT2JGNfB1ow/Dv7Wswm0lYlEF0/RF0W38xEXQYKCAwAVjjDQxPlLcyMAmJMDCJijPwVbRh03iPARq5pII2kEYxcqKDogQAwyFA/AmPpk/Ykhx6Ir8MxL+A+AsQnwPiZvREDhBgAP0iE9ZX6dF0AAAAAElFTkSuQmCC');
      background-repeat: no-repeat;
      background-position: center center;
      background-size: 90%;
      box-shadow: -2px 0 2px #000;
      cursor: pointer;
    }

    .areaplayer .areaplayer-jindu {
      height: 6px;
      border-radius: 10px;
      background-color: #2770d4;
    }

    .castboxplayer {
      z-index: 1000;
      bottom: 0;
      width: 100%;
      background: inherit;

      .areaplayer-option {
        display: inline-block;
        width: 36px;
        height: 36px;
        margin-top: 0;
        margin-left: 10px;
        line-height: 36px;
        vertical-align: middle;

        .areaplayer-play {
          box-sizing: border-box;
          width: 36px;
          height: 36px;
          border: 0;
          border-radius: 50%;
          opacity: 1;
          background-color: inherit;
          background-color: #2770d4;
          background-repeat: no-repeat;
          background-position: center center;
          background-size: 90%;
          cursor: pointer;

          &.start {
            background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkIwMDdGRkQ5NjdDRDExRTg5MDc0OEFEMkY4RkNENTU1IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkIwMDdGRkRBNjdDRDExRTg5MDc0OEFEMkY4RkNENTU1Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QjAwN0ZGRDc2N0NEMTFFODkwNzQ4QUQyRjhGQ0Q1NTUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QjAwN0ZGRDg2N0NEMTFFODkwNzQ4QUQyRjhGQ0Q1NTUiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6SpWvBAAACeUlEQVR42ryXT0sbQRjGNzmEtCQ0hUroUbp6FClU2kgP4qGg3gWv0qu3+hkaPaqnaHrqN1DBlqDppUoPNZ6qRXMTUQ9WopCg2T4vPAPDmj8zu1lf+JFsduZ9nszOzswb8zzPMYwUmARjYBj0g2e89w9UwT7YBhugZpRVDHTBBQVQ88yjxj5ut/ydbibBZ1Bn0iYog3kwCrIgQbL8bZ5tmuwjffPMZWXgFfjNJPfgCxg0GC3FACiyr8dcrqmB1+CMHY/AiIWwH+lbZa4z5u5oQFyes8MWSIcQV/SBH8x57h8JveETsM+GZT5bp0dIrhJzV6j1wECeDap07fQYGc1DauT9BmTSNThpRiIQ1+fEPbVc3UCBzooRiivWqLWqDKS5cDRNFg7yFyyCVAADLrVEMy0/TNPRjkUSFadgBsQsTeyw/3Qcq/E4V+VNxz5egq+gzP3BNJTWuBgY4sVPJ3i8B7/AMsgYtN/l55AMxwWHIxvgEbQKyTcL4h36Z1VbeXZ1OEmAJKgb/mOTPfwb+NDmXoJajbgTXSRNGomBa37P9Ej4Csxpk7tVPOfntRg45sVgSOEmKDLPErjr0FZpHYuBA168CyEub0AOzIILg/ZK60AMlHgxEUD4EnwEb8GeRT+lVQq6FMuOuQIyIZbiG7UUO9wYPG4Uj74ZKVePsR2/AXfUGmh3IDmJ8EDyhxoL7Y5klQiPZN+1I9lT00NpqgfiL0wPpa2O5Yd8bmGe+YnNsVwfiYpWmBTVpLEoTNa0wqRiU5jopVmeM1YvzT6BXIvSLMd7emnWCFqa+f9NgQuHadzyPe86ajHL8nzKV55ntB1QL8/XTcvz/wIMALsaB+hnnp9pAAAAAElFTkSuQmCC');
          }
        }
      }

      .areaplayer-close {
        display: inline-block;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: rgb(212 39 39 / 60%);
        line-height: 36px;
        text-align: center;

        /* margin-left: 5px; */
        img {
          display: inline-block;
          width: 12px;
          height: 12px;
          vertical-align: baseline;
        }
      }

      .areaplayer-tiao {
        display: inline-block;
        position: relative;
        width: calc(100% - 120px);
        margin: 0 13px;
        border-radius: 17px;
        background: #edf4fe;
        line-height: 7px;
        cursor: pointer;
      }

      .areaplayer-yuan {
        width: 16px;
        height: 16px;
        margin-top: -4px;
        margin-left: 0;
        border-radius: 50%;
        background-color: #2770d4;
      }
    }

    .areaplayer-display-block {
      display: block;
    }
  }

  .forecast_left .item,
  .forecast_right .item {
    height: 30px;
    border-bottom: 1px solid #fff;
    font-size: 13px;
    line-height: 30px;
  }

  .forecast_left {
    position: absolute;
    width: 110px;
    height: 100%;
    background-color: #2770d4;
    box-shadow: 4px 0 6px #2770d4;
    color: #fff;
    font-size: 12px;
    text-align: center;
  }

  .forecast_table {
    max-width: calc(100% - 140px);
    height: 100%;
    margin-left: 110px;
    overflow: hidden;
    overflow-x: auto;
    cursor: pointer;

    table {
      height: 100%;
      table-layout: fixed;
      color: #333;
      text-align: center;

      tr {
        height: 29px;
        border: 1px solid #e5e5e5;
        line-height: 29px;

        td {
          border: 1px solid #e5e5e5;
          font-size: 13px;
        }
      }
    }
  }

  .forecast_right {
    /* background-color: #2770d4; */

    /* color: #fff; */
    position: absolute;
    right: 0;
    bottom: 0;
    width: 28px;
    height: 100%;
    margin-top: 6px;

    /* box-shadow: -4px 0px 6px #2770d4; */
    background-color: #fbf6f6;
    box-shadow: -4px 0 6px #b6b8bd;
    color: #2770d4;
    text-align: center;
    cursor: pointer;

    .fa {
      display: inline-block;
      font: normal normal normal 14px / 1 FontAwesome;
      font-size: inherit;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-rendering: auto;
    }
  }
}

table {
  border-collapse: collapse;
  border: none;

  tr,
  td {
    margin: 0;
    padding: 0;
  }
}

// 航行警告css
.nav_tooltip_content {
  padding: 5px;
  &_yj {
    width: 400px;
    white-space: normal;
  }
  .bd1 {
    border-bottom: 1px solid #333;
    padding: 5px 0px;
  }
  .nav_from {
    font-size: 12px;
    font-weight: 600;
  }
  .nav_title {
    font-size: 12px;
    font-weight: 700;
  }
  .nav_content {
    padding: 10px 0px;
    font-size: 12px;
  }
  .nav_content p {
    font-size: 12px;
  }
  .nav_time {
    font-size: 12px;
    font-weight: 600;
    padding-top: 5px;
  }
  .earth_content {
    font-size: 12px;
    font-weight: 700;
    padding-top: 5px;
  }
}

.weather-shuiwen-tooltip {
  background: #1d374c;
  color: #fff;
  border: none;
  margin-top: -70px;
  .field {
    font-size: 12px;
    height: 20px;
  }
  .weather-shuiwen-close {
    position: absolute;
    right: -20px;
    top: -15px;
    font-size: 21px;
    color: #1d374c;
  }
  .layui-icon-down {
    margin-left: 5px;
    color: #fff;
    background: orange;
    padding: 3px;
    border-radius: 10px;
    font-size: 10px;
  }
  .layui-icon-up {
    color: #fff;
    background: orange;
    right: 0px;
    bottom: -10px;
    position: absolute;
    line-height: 12px;
    padding: 3px;
    border-radius: 9px;
    font-size: 10px;
    display: none;
  }
}

.context-menu {
  display: none;
  position: absolute;
  background-color: #ffffff;
  z-index: 1000;
  border-radius: 4px;
  // box-shadow: 0 3px 14px rgb(0 0 0 / 40%);
  padding: 5px 0;
  border: none;
  box-shadow: none;
  list-style: none;
  li {
    display: flex;
    align-items: center;
    white-space: nowrap;
    list-style: none;
    line-height: 22px;
    padding: 5px 16px;
    margin: 0;
    font-size: 14px;
    color: #606266;
    cursor: pointer;
    outline: none;
    &:hover {
      background-color: #ecf5ff;
      color: #409eff;
    }
  }
}

.weather-info-mousemove {
  position: absolute;
  z-index: 1000;
  right: 30px;
  bottom: 100px;
  width: 260px;
  background-color: #fff;
  border-radius: 10px;
  overflow: hidden;

  border-radius: 10px;
  background-color: rgba(20, 38, 48, 0.2);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
  line-height: 30px;
  cursor: auto;
  backdrop-filter: blur(10px) saturate(180%);

  .seamete_info_box {
    padding: 10px;

    li {
      color: #fff;
      font-size: 12px;
      line-height: 30px;
    }
  }

  .weather-title {
    height: 34px;
    background-color: rgba(39, 112, 212, 0.8);
    color: #fff;
    font-size: 14px;
    line-height: 34px;
    text-align: center;
    cursor: move;
    backdrop-filter: blur(10px) saturate(180%);
  }
}

.drawshipcount,
.leaflet-control,
.leaflet-control-scale-line,
.leaflet-container a {
  background-color: rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1) !important;
  backdrop-filter: blur(10px) saturate(180%) !important;
}