/* @import "node_modules/ol-contextmenu/dist/ol-contextmenu.css";
@import "node_modules/ol-ext/dist/ol-ext.css";
@import "node_modules/ol/ol.css"; */

 @import "ol-contextmenu.css";
 @import "ol-ext.css";
 @import "ol.css";
 @import "divGraphic.css";


 html,
 body {
   margin: 0;
   height: 100%;
 }

 #map {
   position: absolute;
   top: 0;
   bottom: 0;
   width: 100%;
 }

 a {
   color: #03899c;
   text-decoration: none
 }

 a:hover,
 a:focus,
 footer a:hover,
 footer a:focus {
   color: #ff7a00;
   text-decoration: none
 }

 .ol-popup {
   position: absolute;
   color: white;
   background-color: rgba(51, 51, 51, 0.822);
   box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
   padding: 15px;
   border-radius: 10px;
   border: 1px solid #cccccc;
   bottom: 12px;
   left: -50px;
   min-width: 150px;
 }

 .ol-popup:after,
 .ol-popup:before {
   top: 100%;
   border: solid transparent;
   content: " ";
   height: 0;
   width: 0;
   position: absolute;
   pointer-events: none;
 }

 .ol-popup:after {
   border-top-color: white;
   border-width: 10px;
   left: 48px;
   margin-left: -10px;
 }

 .ol-popup:before {
   border-top-color: #cccccc;
   border-width: 11px;
   left: 48px;
   margin-left: -11px;
 }

 .ol-popup-closer {
   text-decoration: none;
   position: absolute;
   top: 2px;
   right: 8px;
 }

 .ol-popup-closer:after {
   content: "✖";
 }

 .tooltip.anim {
   visibility: hidden;
 }

 .tooltip {

   position: absolute;
   color: white;
   background-color: rgba(51, 51, 51, 0.822);
   box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
   padding: 15px;
   border-radius: 10px;
   border: 1px solid #cccccc;
   bottom: 12px;
   left: -50px;
   min-width: 200px;
   font-size: 14px;
   font-family: sans-serif;
 }

 .tooltip:after,
 .tooltip:before {
   top: 100%;
   border: solid transparent;
   content: " ";
   height: 0;
   width: 0;
   position: absolute;
   pointer-events: none;
 }

 .tooltip:after {
   border-top-color: white;
   border-width: 10px;
   left: 48px;
   margin-left: -10px;
 }

 .tooltip:before {
   border-top-color: #cccccc;
   border-width: 11px;
   left: 48px;
   margin-left: -11px;
 }

 /* //鹰眼样式 */
 .ol-custom-overviewmap,
 .ol-custom-overviewmap {

   width: 300px;
   height: 300px;
 }

 /* //鹰眼控件中地图容器的样式 */
 .ol-custom-overviewmap .ol-overviewmap-map {
   border: none;
   width: 295px;
   height: 295px;

   left: 100px;
   top: 200px;
 }

 /* //鹰眼控件中显示当前窗口中主区域的边框 */
 .ol-custom-overviewmap .ol-overviewmap-box {
   border: 2px solid red;
 }




 .mirage-mapswitch-box {
   position: fixed;
   right: 10px;
   bottom: 40px;
   z-index: 993;
   height: 70px;
   width: 90px;
 }

 .mirage-mapswitch-image {
   width: 100%;
   height: 100%;
 }

 .mirage-mapswitch-button {
   /* line-height: 32px; */
   width: 100%;
   height: 100%;
   border-radius: 14%;
   vertical-align: middle;
   padding: 0;
   cursor: pointer;
   z-index: 0;

 }

 .mirage-mapswitch-button-itemLabel {
   position: fixed;
   width: 90px;
   height: 20px;
   vertical-align: middle;
   padding: 0;
   font-family: sans-serif;
   font-size: 8pt;
   text-align: center;
   color: #edffff;
   cursor: pointer;
   word-wrap: break-word;
   bottom: 40px;
   background: #0000007c;
 }

 .mirage-mapswitch-button:focus {
   color: #fff;
   fill: #fff;
   border-color: #ea4;
   outline: 0;
 }

 .mirage-mapswitch-button:hover {
   color: #fff;
   fill: #fff;
   border: 1px solid rgba(175, 134, 68, 0.8);
   box-shadow: 0 0 8px rgba(175, 134, 68, 0.8);
 }

 .mirage-mapswitch-button:active {
   color: #000;
   fill: #000;
   background: #ddb16ba6;
   border-color: rgba(175, 134, 68, 0.8);
   box-shadow: 0 0 8px rgba(175, 134, 68, 0.8);
 }

 .mirage-mapswitch-baseLayerPicker-dropDown-visible {
   transform: translate(0, 0);
   visibility: visible !important;
   opacity: 1 !important;
   transition: opacity 0.2s ease-out, transform 0.2s ease-out;
 }

 .mirage-mapswitch-baseLayerPicker-dropDown {
   background-color: rgba(38, 38, 38, 0.35);
   border: 1px solid #444;
   position: absolute;
   right: 101px;
   bottom: -60px;
   width: 455px;
   max-height: 500px;
   margin-top: 5px;
   padding: 6px;
   overflow: auto;
   border-radius: 10px;
   transform: translate(0, -20%);
   visibility: hidden;
   opacity: 0;
   transition: visibility 0s 0.2s, opacity 0.2s ease-in, transform 0.2s ease-in;
 }

 .mirage-mapswitch-baseLayerPicker-item {
   display: inline-block;
   vertical-align: top;
   margin: 2px 5px;
   width: 64px;
   text-align: center;
   cursor: pointer;
 }

 .mirage-mapswitch-baseLayerPicker-itemIcon {
   display: inline-block;
   position: relative;
   width: inherit;
   height: auto;
   background-size: 100% 100%;
   border: solid 1px #444;
   border-radius: 9px;
   color: #edffff;
   margin: 0;
   padding: 0;
   cursor: pointer;
   box-sizing: border-box;
 }

 .mirage-mapswitch-baseLayerPicker-itemLabel {
   display: block;
   font-family: sans-serif;
   font-size: 8pt;
   text-align: center;
   color: #edffff;
   cursor: pointer;
   word-wrap: break-word;
 }

 .mirage-mapswitch-baseLayerPicker-item:hover .mirage-mapswitch-baseLayerPicker-itemIcon {
   border-color: #fff;
   box-shadow: 0 0 8px #fff;
 }

 .mirage-mapswitch-baseLayerPicker-dropDown::-webkit-scrollbar {
   width: 10px;
   height: 1px;
 }

 .mirage-mapswitch-baseLayerPicker-dropDown::-webkit-scrollbar-thumb {

   border-radius: 5px;
   background-color: #666;
 }

 .mirage-mapswitch-baseLayerPicker-dropDown::-webkit-scrollbar-track {

   box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
   border-radius: 5px;

 }

 .ol-compassctrl.top {
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: 9999;
 }

 .mirage-edit-marker-selected {
   background-color: rgba(254, 87, 161, 0.1);
   border: 2px dashed rgba(172, 85, 59, 0.768);
   -webkit-border-radius: 2px;
   border-radius: 2px;
   margin: -2px;
   box-sizing: border-box;
 }


 
 .mirage-hide {
   display: none;
 }