.maptalks-zoom { text-align: center;}
.maptalks-zoom .maptalks-zoom-zoomlevel { display: block; width: 30px; height: 30px; background: #fff; color: #868686; border: 1px solid #9d9d9d;  line-height: 26px; text-align: center; box-sizing: border-box}
.maptalks-zoom .maptalks-zoom-zoomlevel .maptalks-zoom-zoomlevel-text {display: inline-block; font-size: 12px; transform: scale(.8)}
.maptalks-zoom-slider {margin-top: 6px;}
.maptalks-zoom-slider a.maptalks-zoom-zoomin ,.maptalks-zoom-slider a.maptalks-zoom-zoomout {display: block; font-size: 16px; width: 30px; height: 30px; border: 1px solid #9d9d9d; background: #fff; line-height: 28px; text-decoration: none; background-repeat: no-repeat; background-position: center; box-sizing:border-box}
.maptalks-zoom-slider a.maptalks-zoom-zoomin { background-image: url("data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 width%3D%2212%22 height%3D%2212%22 viewBox%3D%220 0 12 12%22%3E%3Crect width%3D%222%22 height%3D%2212%22 transform%3D%22translate(5)%22 fill%3D%22%23868686%22%2F%3E%3Crect width%3D%222%22 height%3D%2212%22 transform%3D%22translate(12 5) rotate(90)%22 fill%3D%22%23868686%22%2F%3E%3C%2Fsvg%3E") }
.maptalks-zoom-slider a.maptalks-zoom-zoomout { height: 29px; background-image: url("data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 width%3D%2212%22 height%3D%222%22 viewBox%3D%220 0 12 2%22%3E%0D  %3Crect id%3D%22%E7%9F%A9%E5%BD%A2_2%22 data-name%3D%22%E7%9F%A9%E5%BD%A2 2%22 width%3D%222%22 height%3D%2212%22 transform%3D%22translate(12) rotate(90)%22 fill%3D%22%23868686%22%2F%3E%0D%3C%2Fsvg%3E%0D"); border-top: none }

.maptalks-compass { width: 30px; height: 30px; background: #fff; border: 1px solid #9d9d9d; border-radius: 50%; box-sizing: border-box; background-image: url("data:image/svg+xml,%3Csvg id%3D%22%E6%8C%87%E5%8D%97%E9%92%8810x18%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 width%3D%2210%22 height%3D%2218%22 viewBox%3D%220 0 10 18%22%3E%0D  %3Cpath id%3D%22%E8%B7%AF%E5%BE%84_1%22 data-name%3D%22%E8%B7%AF%E5%BE%84 1%22 d%3D%22M3%2C9H0L5%2C0l5%2C9H7A2%2C2%2C0%2C0%2C0%2C3%2C9Z%22 fill%3D%22red%22%2F%3E%0D  %3Cpath id%3D%22%E8%B7%AF%E5%BE%84_2%22 data-name%3D%22%E8%B7%AF%E5%BE%84 2%22 d%3D%22M5%2C11H5L0%2C2H3A2%2C2%2C0%2C1%2C0%2C7%2C2h3Z%22 transform%3D%22translate(0 7)%22 fill%3D%22%239d9d9d%22%2F%3E%0D%3C%2Fsvg%3E%0D"); background-repeat: no-repeat; background-position: center; cursor: pointer}

.maptalks-reset { width: 30px; height: 30px; background: #fff; border: 1px solid #9d9d9d; box-sizing: border-box; background-image: url("data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 width%3D%2213.997%22 height%3D%2214%22 viewBox%3D%220 0 13.997 14%22%3E%0D  %3Cpath id%3D%22%E8%B7%AF%E5%BE%84_1%22 data-name%3D%22%E8%B7%AF%E5%BE%84 1%22 d%3D%22M-1610.58-1267.16a5.468%2C5.468%2C0%2C0%2C1%2C3.521%2C1.421l.192.175-1.713%2C1.776c-.1.128-.179.284.008.389a.587.587%2C0%2C0%2C0%2C.172.049h4.454a.257.257%2C0%2C0%2C0%2C.183-.07.252.252%2C0%2C0%2C0%2C.071-.182v-4.481c0-.188-.089-.374-.208-.344a.342.342%2C0%2C0%2C0-.157.09l-1.565%2C1.549-.182-.173a7.078%2C7.078%2C0%2C0%2C0-3.151-1.737%2C6.758%2C6.758%2C0%2C0%2C0-3.535.063%2C7.3%2C7.3%2C0%2C0%2C0-3.1%2C1.816%2C7.192%2C7.192%2C0%2C0%2C0-1.833%2C3.069h0a6.846%2C6.846%2C0%2C0%2C0%2C.632%2C5.279%2C7.017%2C7.017%2C0%2C0%2C0%2C4.229%2C3.3h0a7%2C7%2C0%2C0%2C0%2C5.293-.6%2C7.055%2C7.055%2C0%2C0%2C0%2C3.369-4.14.871.871%2C0%2C0%2C0-.07-.626.84.84%2C0%2C0%2C0-1.113-.294.726.726%2C0%2C0%2C0-.365.471h0a5.542%2C5.542%2C0%2C0%2C1-1.7%2C2.661%2C5.585%2C5.585%2C0%2C0%2C1-2.9%2C1.287%2C5.468%2C5.468%2C0%2C0%2C1-3.143-.5%2C5.31%2C5.31%2C0%2C0%2C1-2.3-2.158h0a5.169%2C5.169%2C0%2C0%2C1-.645-3.649%2C5.489%2C5.489%2C0%2C0%2C1%2C1.948-3.249%2C5.454%2C5.454%2C0%2C0%2C1%2C3.608-1.192Z%22 transform%3D%22translate(1617.689 1268.903)%22 fill%3D%22%23868686%22 fill-rule%3D%22evenodd%22%2F%3E%0D%3C%2Fsvg%3E%0D"); background-repeat: no-repeat; background-position: center; cursor: pointer }

.maptalks-toolbar-vertical { /*border: 1px solid #3b3e44;*/margin: 0; border: 1px solid #b8b8b8; overflow : visible;}
.maptalks-toolbar-vertical ul ,.maptalks-toolbar-horizonal ul {margin: 0;padding: 0;}
.maptalks-toolbar-vertical ul li+li { border-top: 1px solid #ddd; }
.maptalks-toolbar-vertical li { text-align:center;list-style: none; line-height:28px; font-size: 12px; color:#5a5a5a; background: #fff; min-width: 10px; min-height: 28px; /*border-bottom: 1px solid #425568;*/ position: relative; padding:0px 10px;}
.maptalks-toolbar-vertical li:hover { color: #fff; background: #6a97d9;}
.maptalks-toolbar-vertical li .maptalks-dropMenu { padding: 0; position: absolute; top: -1px; overflow : visible; border: 1px solid #b8b8b8; /*border: 1px solid #3e4f61; border-right: none; border-top: none;*/}
.maptalks-toolbar-vertical li .maptalks-dropMenu li { list-style: none; min-width: 95px; background: #606976; height: 28px; }
.maptalks-toolbar-vertical li .maptalks-dropMenu li + li { border-top: 1px solid #ddd; }
.maptalks-toolbar-vertical li .maptalks-dropMenu li a { color: #fff; display: block; line-height: 27px; text-indent: 33px;  text-decoration: none; font-size: 12px;}
.maptalks-toolbar-vertical li .maptalks-dropMenu em.maptalks-ico { display: block; width: 5px; height: 6px; /*background: url(images/control/4_1.png) no-repeat;*/ position: absolute; top: 12px; right: -4px;}
.maptalks-toolbar-vertical li .maptalks-dropMenu li.maptalks-on ,.maptalks-toolbar-vertical li .maptalks-dropMenu li:hover  { background: #4b545f;}

.maptalks-toolbar-horizonal { /*border: 1px solid #3b3e44;*/margin: 0;overflow : visible;}
.maptalks-toolbar-horizonal li { text-align:left; line-height:28px; font-size: 12px; color:#5a5a5a; padding: 0px 10px; list-style: none; min-width: 28px; min-height: 28px; float: left; background: #fff; border: 1px solid #b8b8b8; /*border-right: 1px solid #425568;*/ position: relative; }
.maptalks-toolbar-horizonal ul li:not(:last-child) { border-right-color: #ddd }
.maptalks-toolbar-horizonal ul li+li { border-left: none }
.maptalks-toolbar-horizonal li:hover { color: #fff; background: #6a97d9 /*border-right:1px solid #1bbc9b;*/ }
.maptalks-toolbar-horizonal li .maptalks-dropMenu { display:block;position: absolute; left: -1px;  overflow : visible;/*border: 1px solid #3e4f61;  border-top: none;*/}
.maptalks-toolbar-horizonal li .maptalks-dropMenu li { list-style: none; min-width: 95px; background: #606976; height: 28px; border: 1px solid #b8b8b8 }
.maptalks-toolbar-horizonal li .maptalks-dropMenu ul li:first-child { border-top: none }
.maptalks-toolbar-horizonal li .maptalks-dropMenu ul li:not(:last-child) { border-bottom-color: #ddd }
.maptalks-toolbar-horizonal li .maptalks-dropMenu li+li { border-top: none }
.maptalks-toolbar-horizonal li .maptalks-dropMenu li a { color: #fff; display: block; line-height: 27px; text-indent: 20px; text-decoration: none; font-size: 12px;}
.maptalks-toolbar-horizonal li .maptalks-dropMenu em.maptalks-ico { display: block; width: 5px; height: 6px; /*background: url(images/control/4.png) no-repeat; */position: absolute; top: -4px; left: 12px;}
.maptalks-toolbar-horizonal .maptalks-dropMenu li:hover { background: #4b545f }

.maptalks-toolbar-vertical li .maptalks-dropMenu li a::before, .maptalks-toolbar-horizonal li .maptalks-dropMenu li a::before {
  content: "";
  width: 0;
  height: 0;
  position: absolute;
  top: 10px;
  left: 14px;
  border-top: 4px solid transparent;
  border-left: 6px solid #fff;
  border-bottom: 4px solid transparent;
}

.maptalks-menu { background: #fff; padding: 1px; width: 172px; border: 1px solid #b4b3b3; /*box-shadow: 3px 5px 10px #dbdada;*/}
.maptalks-menu .maptalks-menu-items { color: #5a5756; margin: 0; padding: 0; font-size: 12px;}
.maptalks-menu .maptalks-menu-items li { list-style: none; height: 30px; line-height: 30px; text-indent: 16px;}
.maptalks-menu .maptalks-menu-items li:hover {background: #007fbe; color: #fff;cursor:pointer;}
.maptalks-menu .maptalks-menu-items li.maptalks-menu-splitter { list-style: none; height: 2px; background: #ddd;}

.maptalks-msgBox { background: #fff; border: 1px solid #b4b3b3; border-radius: 3px; /*box-shadow: 3px 5px 5px #dbdada;*/}
.maptalks-msgBox em.maptalks-ico {
  display: block;
  position: absolute;
  left: 50%;
  margin-left: -5px;
  bottom: -10px;
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 10px solid #b4b3b3;
}
.maptalks-msgBox em.maptalks-ico::after {
  content: "";
  width: 0;
  height: 0;
  position: absolute;
  left: -7px;
  top: -10px;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 9px solid #fff;
}
.maptalks-msgBox h2 { display: block; height: auto; line-height: 30px; font-weight: bold; font-size: 14px; padding: 0 10px;  margin: 0;  white-space: nowrap;padding-right: 30px;}
.maptalks-msgBox a.maptalks-close { display: block; width: 13px; height: 13px; text-decoration: none; font-size: 14px; color: #a5a5a5; font-weight: bold; position: absolute; top: 3px; right: 6px }
.maptalks-msgBox .maptalks-msgContent { font-size: 12px;padding: 10px; min-width: 200px;}

.maptalks-panel { background: #fff; border: 1px solid #b4b3b3; border-radius: 3px; /*box-shadow: 3px 5px 5px #dbdada;*/}
.maptalks-panel .maptalks-panel-content { padding: 10px; min-width: 200px; min-height: 60px;}
.maptalks-panel a.maptalks-close { display: block; width: 13px; height: 13px; text-decoration: none; font-size: 14px; color: #a5a5a5; font-weight: bold; position: absolute; top: 3px; right: 6px }

.maptalks-attribution {display: inline-block;opacity: 1; color: #aeaeae; background:#fff; background-color: rgba(255,255,255,0.7);padding:0px;font-size:13px;font-family: "microsoft yahei","Helvetica Neue", Helvetica, sans-serif;}
.maptalks-attribution a {text-decoration: none; color : #8eafbe;}
.maptalks-attribution a:hover {text-decoration: underline;}

.maptalks-overview {background:#fff; border:1px solid #b4b3b3; width:100%;height:100%;}
.maptalks-overview-button {
  cursor:pointer;
  background:#fff;
  width:18px;
  height:18px;
  position:absolute;
  bottom: 1px;
  right: 1px;
  font: 16px sans-serif;
  text-align : center;
  line-height : 16px;
  border:1px solid #b4b3b3;
  color : #363539;
}

.maptalks-layer-switcher ul {
  list-style: none;
}
.maptalks-layer-switcher .panel > ul {
  padding-left: 1em;
}
.maptalks-layer-switcher .group > ul {
  padding-left: 10px;
}
.maptalks-layer-switcher .group + .group {
  padding-top: 1em;
}
.maptalks-layer-switcher label {
  text-overflow: ellipsis;
  overflow: hidden;
  display: inline-block;
  font-size : 14px;
  white-space: nowrap;
  color: #5a5a5a;
}
.maptalks-layer-switcher .group > label {
  font-weight: bold;
  color: #5a5a5a;
  width: 100%;
}
.maptalks-layer-switcher .layer label {
  padding-top: 5px;
  width: 92%;
}
.maptalks-layer-switcher input {
  margin: 0 5px;
  position: relative;
  top: -2px;
}
.maptalks-layer-switcher input[disabled = 'disabled'] {
  cursor: not-allowed;
}
.maptalks-layer-switcher input[disabled = 'disabled'] + label {
  color: #666;
}
.maptalks-layer-switcher button, .maptalks-layer-switcher .panel {
  border-radius: 4px;
}
.maptalks-layer-switcher button {
  width: 28px;
  height: 28px;
  background: url("data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 width%3D%2218%22 height%3D%2216%22 viewBox%3D%220 0 18 16%22%3E%0D  %3Cpath id%3D%22%E5%9B%BE%E5%B1%82%22 d%3D%22M17.156%2C74.864a.833.833%2C0%2C0%2C0-.323.065h-.007L9%2C78.222l-7.826-3.29H1.166A.839.839%2C0%2C0%2C0%2C.088%2C75.4a.862.862%2C0%2C0%2C0%2C.433%2C1.109h0L8.67%2C79.939h.008a.825.825%2C0%2C0%2C0%2C.645%2C0H9.33l8.149-3.425h0a.86.86%2C0%2C0%2C0%2C.5-.959A.847.847%2C0%2C0%2C0%2C17.156%2C74.864ZM.521%2C69.085h0L8.67%2C72.51h.008a.822.822%2C0%2C0%2C0%2C.645%2C0H9.33l8.149-3.425h0a.862.862%2C0%2C0%2C0%2C0-1.584h0L9.33%2C64.075H9.323a.827.827%2C0%2C0%2C0-.645%2C0H8.67L.521%2C67.5h0a.862.862%2C0%2C0%2C0%2C0%2C1.583ZM17.156%2C71.15a.833.833%2C0%2C0%2C0-.323.065h0l0%2C0h0L9%2C74.508l-7.826-3.29h0l0%2C0h0a.839.839%2C0%2C0%2C0-1.082.472A.862.862%2C0%2C0%2C0%2C.521%2C72.8h0L8.67%2C76.225h.008a.825.825%2C0%2C0%2C0%2C.645%2C0H9.33L17.479%2C72.8h0a.86.86%2C0%2C0%2C0%2C.5-.959A.847.847%2C0%2C0%2C0%2C17.156%2C71.15Z%22 transform%3D%22translate(0 -64.007)%22 fill%3D%22%236a97d9%22%2F%3E%0D%3C%2Fsvg%3E%0D") no-repeat;
  background-position: center;
  background-color: #fff;
  border: 1px solid #b8b8b8;
}
.maptalks-layer-switcher.shown button {
  display: none;
}
.maptalks-layer-switcher .panel {
  background-color: #fff;
  display: none;
  overflow-y: auto;
  overflow-x: hidden;
  min-width: 120px;
  max-width: 400px;
  max-height: 500px;
}
.maptalks-layer-switcher li {
  white-space:nowrap;
}
.maptalks-layer-switcher li.group {
  margin-right: 1em;
}
.maptalks-layer-switcher.shown .panel {
  display: block;
}
.maptalks-layer-switcher ::-webkit-scrollbar {
  width: 6px;
}
.maptalks-layer-switcher ::-webkit-scrollbar-track {
  background-color: #1f1f1f;
}
.maptalks-layer-switcher ::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background-color: #777;
}
.maptalks-tooltip {
  display: block;
  background: #fff;
  border: 1px solid #b4b3b3;
  padding: 0px 4px 0px 4px;
  height: 24px;
  line-height: 24px;
  font-size: 14px;
  white-space: nowrap;
}

@keyframes maptalksfadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}
.mtk-ui-fadein {
  animation: maptalksfadeIn 2s;
}

.maptalks-tooltip {
    display: block;
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid black;
    padding: 0 4px;
    height: 100%;
    line-height: 24px;
    font-size: 14px;
    white-space: nowrap;
    color: white;
    border-radius: 2px
}

.maptalks-msgBox,
.maptalks-panel,
.maptalks-overview {
    border: none;
    box-shadow: 0px 0px 10px #aaaaaa;
}

.maptalks-zoom-slider-box {
    background: #172029;
}

.maptalks-zoom-slider-box .maptalks-zoom-slider-ruler {
    background: #f1f1f1;
}

.maptalks-zoom-slider-box .maptalks-zoom-slider-ruler .maptalks-zoom-slider-reading {
    background: #0c84ff;
}

.maptalks-zoom-slider-box .maptalks-zoom-slider-dot {
    background: none;
}

.maptalks-zoom .maptalks-zoom-zoomlevel,.maptalks-zoom-slider a.maptalks-zoom-zoomin,.maptalks-zoom-slider a.maptalks-zoom-zoomout {
   background-color: black;
   color: #868686;
   border: 1px solid #4d4d4d;
}

.highlightpoint,
.highlightpoint::before,
.highlightpoint::after {
    position: absolute;
    border-radius: 50%;
    content: '';
}

.highlightpoint::before {
    animation: highlightpoint 2s infinite;
}

.highlightpoint::after {
    animation: highlightpoint2 2s infinite;
}

@keyframes highlightpoint {
    0% {
        transform: scale(1);
        opacity: .9
    }

    100% {
        transform: scale(6);
        opacity: 0;
    }
}

@keyframes highlightpoint2 {
    0% {
        transform: scale(1);
        opacity: .9;
    }

    100% {
        transform: scale(12);
        opacity: 0;
    }
}

.yymap-loading-container {
    width: 100%;
    height: 100%;
    background-color: #000000c2;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    text-align: center;
    z-index: 1000000;
  }
  
  .yymap-loading-message {
    position: absolute;
    color: white;
    font-size: 15px;
    width: 100px;
    text-align: center;
    height: 40px;
    left: 50%;
    /* right: 50%; */
    top: 50%;
    margin-left: -50px;
    margin-top: -55px;
  }
  .yymap-loading {
    width: 30px;
    height: 30px;
    border: 5px solid #fff;
    border-top-color: transparent;
    border-radius: 100%;
    position: absolute;
    left: 50%;
    /* right: 50%; */
    top: 50%;
    margin-left: -15px;
    margin-top: -15px;
  
    animation: loading-circle infinite 0.75s linear;
  }
  
  @keyframes loading-circle {
    0% {
      transform: rotate(0);
    }
  
    100% {
      transform: rotate(360deg);
    }
  }
  
/* .compass-div {
    width: 40px;
    height: 40px;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0px 0px 0px 2px rgba(0, 0, 0, 0.1);
    transform: rotate(0deg);
}

.compass-div > span {
    width: 20px;
    height: 20px;
    margin: 10px;
    background-image: url(./compass.svg);
    background-repeat: no-repeat;
    display: inline-block;
    cursor: pointer;
} */

.maptalks-compass {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}
.maptalks-compass .maptalks-compass-dial .maptalks-compass-dial-clock {
    position: absolute;
    width: 2px;
    height: 40px;
    left: calc(50% - 1px);
}
.maptalks-compass .maptalks-compass-dial .maptalks-compass-dial-clock::before,
.maptalks-compass .maptalks-compass-dial .maptalks-compass-dial-clock::after {
    content: '\20';
    display: block;
    width: 2px;
    background: white;
}
.maptalks-compass
    .maptalks-compass-dial
    .maptalks-compass-dial-clock:nth-child(odd)::before,
.maptalks-compass
    .maptalks-compass-dial
    .maptalks-compass-dial-clock:nth-child(odd)::after {
    height: 8px;
}
.maptalks-compass
    .maptalks-compass-dial
    .maptalks-compass-dial-clock:nth-child(odd)::after {
    margin-top: 24px;
}
.maptalks-compass
    .maptalks-compass-dial
    .maptalks-compass-dial-clock:nth-child(even)::before,
.maptalks-compass
    .maptalks-compass-dial
    .maptalks-compass-dial-clock:nth-child(even)::after {
    height: 4px;
}
.maptalks-compass
    .maptalks-compass-dial
    .maptalks-compass-dial-clock:nth-child(even)::after {
    margin-top: 32px;
}
.maptalks-compass
    .maptalks-compass-dial
    .maptalks-compass-dial-clock:nth-child(1) {
    transform: rotate(0deg);
}
.maptalks-compass
    .maptalks-compass-dial
    .maptalks-compass-dial-clock:nth-child(2) {
    transform: rotate(45deg);
}
.maptalks-compass
    .maptalks-compass-dial
    .maptalks-compass-dial-clock:nth-child(3) {
    transform: rotate(90deg);
}
.maptalks-compass
    .maptalks-compass-dial
    .maptalks-compass-dial-clock:nth-child(4) {
    transform: rotate(135deg);
}
.maptalks-compass .maptalks-compass-needle {
    position: absolute;
    width: 100%;
    top: 50%;
}
.maptalks-compass .maptalks-compass-needle::before,
.maptalks-compass .maptalks-compass-needle::after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    left: 16px;
}
.maptalks-compass .maptalks-compass-needle::before {
    top: 0;
    border-width: 20px 4px 0;
    border-color: white transparent transparent;
    transform-origin: top center;
}
.maptalks-compass .maptalks-compass-needle::after {
    top: -20px;
    border-width: 0 4px 20px;
    border-color: transparent transparent red;
    transform-origin: bottom center;
}

.basemaps {
  padding: 4px;
}

.basemaps .basemap {
  display: inline-block;
  cursor: pointer;
  width:60px;
  height: 60px;
}

.basemaps img {
  width: 54px;
  height: 54px;
  border: 2px solid #cccccc;
  margin: 0 2px;
  /* border-radius: 40px; */
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.65);
  background: white;
}

.basemaps-closed .basemap {
  display: none;
}

.basemaps-closed .basemap.active {
  display: inline-block;
}

.basemaps .active img {
  border-color: #3388ff;
  box-shadow: 2px 2px 4px #000;
}

.hide {
  display: none;
}

.basemap-title {
  font-size: 12px;
  text-align: center;
  position: relative;
  z-index: 1;
  top: -22px;
  color: white;
  background-color: #3388ff;
  width: 80%;
  margin: auto;
  text-overflow: ellipsis;
  overflow: hidden;
  word-break: break-all;
  white-space: nowrap;
}

.fullscreen-div{
    width:35px;
    height: 35px;
    background: #fff;
    /* border-radius: 20px; */
    box-shadow: 0px 0px 0px 2px rgba(0,0,0,0.1);
    transform:rotate(0deg);
    border-radius: 5px;
}

.fullscreen-div>div{
    margin: 2px;
    width: 30px;
    height: 30px;
    /* margin: 10px; */
    background-image: url("data:image/svg+xml,%3Csvg viewBox%3D%220 0 20 20%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E %3Cpath d%3D%22M 5 4 C 4.5 4 4 4.5 4 5 L 4 6 L 4 9 L 4.5 9 L 5.7773438 7.296875 C 6.7771319 8.0602131 7.835765 8.9565728 8.890625 10 C 7.8257121 11.0633 6.7761791 11.951675 5.78125 12.707031 L 4.5 11 L 4 11 L 4 15 C 4 15.5 4.5 16 5 16 L 9 16 L 9 15.5 L 7.2734375 14.205078 C 8.0428931 13.187886 8.9395441 12.133481 9.9609375 11.068359 C 11.042371 12.14699 11.942093 13.2112 12.707031 14.21875 L 11 15.5 L 11 16 L 14 16 L 15 16 C 15.5 16 16 15.5 16 15 L 16 14 L 16 11 L 15.5 11 L 14.205078 12.726562 C 13.177985 11.949617 12.112718 11.043577 11.037109 10.009766 C 12.151856 8.981061 13.224345 8.0798624 14.228516 7.3046875 L 15.5 9 L 16 9 L 16 5 C 16 4.5 15.5 4 15 4 L 11 4 L 11 4.5 L 12.703125 5.7773438 C 11.932647 6.7864834 11.026693 7.8554712 9.9707031 8.9199219 C 8.9584739 7.8204943 8.0698767 6.7627188 7.3046875 5.7714844 L 9 4.5 L 9 4 L 6 4 L 5 4 z%22 %2F%3E %3C%2Fsvg%3E");
    background-repeat: no-repeat;
    display: inline-block;
    cursor: pointer;
    border:0px;
    background-color: #fff;
}

.fullscreen-div>.active{
    background-image: url("data:image/svg+xml,%3Csvg viewBox%3D%220 0 20 20%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E %3Cpath style%3D%22fill%3A%2523000000%3B%22 d%3D%22M 4.2421875 3.4921875 A 0.750075 0.750075 0 0 0 3.71875 4.78125 L 5.9648438 7.0273438 L 4 8.5 L 4 9 L 8 9 C 8.500001 8.9999988 9 8.4999992 9 8 L 9 4 L 8.5 4 L 7.0175781 5.9550781 L 4.78125 3.71875 A 0.750075 0.750075 0 0 0 4.2421875 3.4921875 z M 15.734375 3.4921875 A 0.750075 0.750075 0 0 0 15.21875 3.71875 L 12.984375 5.953125 L 11.5 4 L 11 4 L 11 8 C 11 8.4999992 11.499999 8.9999988 12 9 L 16 9 L 16 8.5 L 14.035156 7.0273438 L 16.28125 4.78125 A 0.750075 0.750075 0 0 0 15.734375 3.4921875 z M 4 11 L 4 11.5 L 5.9648438 12.972656 L 3.71875 15.21875 A 0.75130096 0.75130096 0 1 0 4.78125 16.28125 L 7.0273438 14.035156 L 8.5 16 L 9 16 L 9 12 C 9 11.500001 8.500001 11.000001 8 11 L 4 11 z M 12 11 C 11.499999 11.000001 11 11.500001 11 12 L 11 16 L 11.5 16 L 12.972656 14.035156 L 15.21875 16.28125 A 0.75130096 0.75130096 0 1 0 16.28125 15.21875 L 14.035156 12.972656 L 16 11.5 L 16 11 L 12 11 z %22%2F%3E %3C%2Fsvg%3E");
}