/* hide admin pointless menus */
#toplevel_page_simple-maps ul li:nth-child(4),
#toplevel_page_simple-maps ul li:nth-child(6),
#toplevel_page_simple-maps ul li:nth-child(8){ display: none; }

div.simpleMapOuter{
width:         100%;
min-width:     300px;
text-align:    center;
margin:        0 auto 20px auto;
position:      relative;
}

div.simpleMapInner{
width:         100%;
height:        500px;
padding:       0;
margin-bottom: 5px;
position:      relative;
background:    white;
}

.xh{
position: absolute;
width:    4px;
height:   4px;
opacity:  .1;
z-index:  4000;
pointer-events: none; 
}

.xh1{
bottom:        calc(50% + 4px); right: 50%;
border-bottom: dashed 2px black;
border-right:  dashed 2px black;
}

.xh2{
bottom:        calc(50% + 4px); left: 50%;
border-bottom: dashed 2px black;
border-left:   dashed 2px black;
}

.xh3{
top:         calc(50% - 4px); left: 50%;
border-top:  dashed 2px black;
border-left: dashed 2px black;
}

.xh4{
top:          calc(50% - 4px); right: 50%;
border-top:   dashed 2px black;
border-right: dashed 2px black;
}

div.simpleMapInner:active:hover {
cursor: move;
}

.simpleMapOuter a{
text-decoration: none;
outline: none;
}

div.simpleMapStatic{
cursor: default !important;
}

.sm_marker img.transparency {
opacity: 0.5;
}

.sm_marker img.transparency.linked-marker {
opacity: 0.7;
}

.sm_marker img.transparency.linked-marker:hover {
opacity: 1.0;
}

.zindex_9 img{
opacity: 1.0 !important;
}

.ol-scale-step-text{
font-size: 14px !important;
text-shadow:  
-1px 0     white, 0 1px     white, 1px 0     white, 0 -1px     white,
-1px 0 7px white, 0 1px 7px white, 1px 0 7px white, 0 -1px 7px white !important;
}

.sm_gpx_layer{
font-size: 12px !important;
z-index:   100;
text-shadow:  
-1px 0     white, 0 1px     white, 1px 0     white, 0 -1px     white,
-1px 0 7px white, 0 1px 7px white, 1px 0 7px white, 0 -1px 7px white !important;
}


/* map buttons & controls */
.homeButton,
.markerlabelsButton,
.srcButton,
.ol-zoom,
.distanceButton,
.scaleButton,
.editButton,
.ol-attribution,
.maptiler_logo {
}

.homeButton{
top:  10px;
left: 10px;
}

.ol-zoom{
top:  40px;
left: 10px;
}

.srcButton{
top:  10px;
left: 40px;
}

.markerlabelsButton{ 
bottom: 70px; 
left:   10px; 
}

.distanceButton{ 
bottom: 40px; 
left:   10px; 
}

.scaleButton{
bottom: 10px;
left:   10px;
}

.ol-scale-bar{
bottom: 10px;
left:   45px;
}

.ol-search{
position: absolute;
top:   10px;
right: 70px;
}

.drawButton{ 
bottom: 70px; 
right:  10px; 
}

.editButton{
bottom: 100px;
left:   10px;
}

.ol-attribution{
bottom: 10px !important; 
right:  10px !important; 
}

.kml0Button{
bottom: 10px !important; 
left:   10px !important; 
}
.kml0{ visiblity: visible; }

/*
.snapButton{
bottom: 2.1em;
right:  10px;
}
*/

.smSig{  
/* pointer-events: none !important; */ 
z-index:       -12; 
height:        1.5em;
outline:       1px solid silver;
border-radius: 2px;
padding:       3px 8px 1px 8px;
background:    white;
font-size:     14px;
font-weight:   normal;
color:         gray;
opacity:       1;
position:      absolute;
bottom:        10px;
right:         45px;
}

.maptiler_logo{
z-index:  1000000; 
position: absolute;
bottom:   35px;
right:    10px;
}

.ol-attribution{ 
z-index:       1000000; 
opacity:       1 !important;
background:    white !important;
outline:       1px solid silver;
border-radius: 2px;
font-size:     16px;
color:         gray;
}

.ol-attribution ul{ 
font-size: 14px !important;
}

.simpleListBox{
min-width:     300px;
height:        200px; 
overflow:      auto; 
margin-bottom: 20px; 
border:        1px solid black; 
padding:       5px;
}

/* clumsy, but ol designed by dolts */
.zindex_-9{ z-index: 991; }
.zindex_-8{ z-index: 992; }
.zindex_-7{ z-index: 993; }
.zindex_-5{ z-index: 994; }
.zindex_-6{ z-index: 995; }
.zindex_-4{ z-index: 996; }
.zindex_-3{ z-index: 997; }
.zindex_-2{ z-index: 998; }
.zindex_-1{ z-index: 999; }
.zindex_0{  z-index: 1000; }
.zindex_1{  z-index: 1001; }
.zindex_2{  z-index: 1002; }
.zindex_3{  z-index: 1003; }
.zindex_4{  z-index: 1004; }
.zindex_5{  z-index: 1005; }
.zindex_6{  z-index: 1006; }
.zindex_7{  z-index: 1007; }
.zindex_8{  z-index: 1008; }
.zindex_9{  z-index: 1009; }

.sm_label{  
position:       relative;
pointer-events: auto !important; /* auto | none */
white-space:    nowrap;
/* cursor:         pointer; */
}

.sm_pinlabel  div, 
.sm_droplabel div,
.sm_droplabel div{  
margin:           0;
padding:          2px 3px 2px 3px;
border-radius:    3px;
font-size:        12px;
line-height:      12px;
font-weight:      normal;
color:            rgba(0,0,0,1);
background-color: rgba(255,255,255,0.6); /*  */
text-shadow:  

-1px 0     white, 0 1px     white, 1px 0     white, 0 -1px     white,
-1px 0 7px white, 0 1px 7px white, 1px 0 7px white, 0 -1px 7px white

/*
,2px 2px 9px white, -2px -2px 9px white, 2px 0 9px white, 0 2px 9px white, 0 -2px 9px white, -2px 0 9px white 
*/
;
}

.sm_pinlabel, 
.sm_droplabel{  
display: none;
}

.sm_pinlabel div{  
margin-top: 0px;
}

.sm_droplabel div{  
margin-top: 40px;
}

.sm_dotlabel div{  
margin-top: 15px;
/* background-color: rgba(255,255,255,0.5); /*  */
text-shadow:  2px 2px 7px white, -2px -2px 7px white, 2px 0 7px white, 0 2px 7px white, 0 -2px 7px white, -2px 0 7px white ;
}

.sm_dotlabel div{
font-size:      14px !important;
line-height:    14px !important;
font-weight:    bold !important;
}

/* very tight clearances, tied to font size */

/* cross labels - anchored point */

.sm_taglabel   div,
.sm_textlabel  div,
.sm_crosslabel div,
.sm_wrecklabel div,
.sm_flaglabel  div{  
margin:           0;
padding:          0;
border-radius:    2px;
font-size:        12px;
line-height:      12px;
font-weight:      normal;
color:            rgba(0,0,0,1);
/* background-color: rgba(255,255,255,0.5); /*  */
text-shadow:  2px 2px 7px white, -2px -2px 7px white, 2px 0 7px white, 0 2px 7px white, 0 -2px 7px white, -2px 0 7px white ;
}

.sm_textlabel  div{
font-size:   14px;
font-weight: bold;
}

/* cross labels - anchored corner - very tight */

.p_center-left div { /* to right of marker */
position: relative;
top:      -2px;
left:     8px;
}

.p_center-right div { /* to left of marker */
position: relative;
top:      -2px;
right:    8px;
}

.p_top-center div { /* below marker */
position: relative;
top:      9px;
}

.p_bottom-center div { /* above marker */
position: relative;
bottom:   9px;
}

.p_top-right div { /* below-left of marker */
position: relative;
top:      2px;
right:    4px;
}

.p_bottom-right div { /* above-left of marker */
position: relative;
bottom:   4px;
right:    4px;
}

.p_top-left div { /* below-right of marker */
position: relative;
top:      2px;
left:     4px;
}

.p_bottom-left div { /* above-right of marker */
position: relative;
bottom:   4px;
left:     4px;
}

/* wreck labels - anchored corner */

.p_center-left2 div {
position: relative;
left:     11px;
}

.p_center-right2 div {
position: relative;
right:    11px;
}

.p_top-center2 div { /* below */
position: relative;
top:      10px;
}

.p_bottom-center2 div { /* above */
position: relative;
bottom:   13px;
}

.p_top-right2 div {
position: relative;
top:      4px;
right:    8px;
}

.p_bottom-right2 div {
position: relative;
bottom:   4px;
right:    8px;
}

.p_top-left2 div {
position: relative;
top:      4px;
left:     8px;
}

.p_bottom-left2 div {
position: relative;
bottom:   4px;
left:     8px;
}

/* flag labels - anchored corner */

.p_center-left3 div {
position: relative;
left:     9px;
}

.p_center-right3 div {
position: relative;
right:    9px;
}

.p_top-center3 div { /* below */
position: relative;
top:      9px;
}

.p_bottom-center3 div { /* above */
position: relative;
bottom:   9px;
}

.p_top-right3 div {
position: relative;
top:      8px;
right:    8px;
}

.p_bottom-right3 div {
position: relative;
bottom:   8px;
right:    8px;
}

.p_top-left3 div {
position: relative;
top:      8px;
left:     8px;
}

.p_bottom-left3 div {
position: relative;
bottom:   8px;
left:     8px;
}

/* pure text & tag labels - anchored corner */

.p_center-center0 div {
position: relative;
}

.p_center-left0 div {
position: relative;
}

.p_center-right0 div {
position: relative;
}

.p_top-center0 div {
position: relative;
}

.p_bottom-center0 div {
position: relative;
}

.p_top-right0 div {
position: relative;
}

.p_bottom-right0 div {
position: relative;
}

.p_top-left0 div {
position: relative;
}

.p_bottom-left0 div {
position: relative;
}

.no-marker{ display: none !important; }


.sm_ghost{ 
height:  0;
border:  0;
padding: 0;
margin:  0;
/* display: none; */
}

/* ====================================================================== */
/* marker animations */

.anim-bounce img{ animation: anim-bounce 0.3s infinite alternate; position: relative; }
@keyframes anim-bounce { from { bottom: 0px; } to { bottom: 10px; } }

.anim-drop img{ animation: anim-drop 2.0s;  position: relative; }
@keyframes anim-drop   { from { bottom: 100vh; } to { bottom: 0vh;  } }

.anim-blink img{ animation: anim-flash 1.0s step-start infinite; }
.anim-flicker img{ animation: anim-flash 0.2s step-start infinite; }
@keyframes anim-flash { 50% { opacity: 0.2; } }

.anim-wobble img{ 
animation: anim-rotate 0.3s linear infinite alternate;
position:                relative;
transform-origin:        bottom center;
}
.anim-vibrate img{ 
animation: anim-rotate 0.05s linear infinite alternate;
position:                relative; 
transform-origin:        bottom center;
}
.anim-dangle img{ 
animation: anim-rotate 0.3s linear infinite alternate;
position:                relative;
transform-origin:        top center;
}
@keyframes anim-rotate{ from { transform: rotate(3deg) scale(.5) } to { transform: rotate(-3deg) scale(.5) } }

.anim-pulse img{
animation: anim-pulse 1s ease-in-out infinite alternate;
position:                relative;
transform-origin:        center center;
}
/* @keyframes anim-pulse{ from { transform: scale(0.9); } to { transform: scale(1.1); } } */

/* ====================================================================== */
/* on-screen ruler, track, drag-drop, draw, etc */

.sm_distance_active * { background: yellow; }
.sm_distance_unclickable .sm_marker,
.sm_distance_unclickable .sm_label{ 
cursor:         default !important; 
pointer-events: none    !important; 
}

.draw_erase * { background: pink; }
.draw_unclickable{ cursor: default !important; }
.draw_unclickable .sm_marker{ pointer-events: none; }

.sm_draw_layer{     position: relative; z-index: 1700; }
.sm_dd_layer{       position: relative; z-index: 1800; }
.sm_polygon_layer{  position: relative; z-index: 1910; }
.sm_line_layer{     position: relative; z-index: 1920; }
.sm_marker_layer{   position: relative; z-index: 1930; }
.sm_label_layer{    position: relative; z-index: 1950; }
.sm_distance_label{ position: relative; z-index: 2000; }

.sm_distance_draw_layer{ z-index: 2000; }

#sm_distance_label{ 
color:         black; 
background:    rgb(255,255,255,.9);
border:        1px red solid;
border-radius: 2px;
padding:       1px 3px 0px 3px;
font-size:     12px;
font-weight:   normal;
}

/* ====================================================================== */
/* loading spinner */

.spinner:after {
content: "";
box-sizing: border-box;
position: absolute;
top: 50%; left: 50%;
width: 40px; height: 40px;
margin-top: -20px; margin-left: -20px;
border-radius: 50%;
border: 5px solid rgba(180, 180, 180, 0.6);
border-top-color: rgba(0, 0, 0, 0.6);
animation: sm_spinner 0.6s linear infinite;
}
@keyframes sm_spinner { to { transform: rotate(360deg); } }

#sm_popup{
z-Index:     100000000;
position:    fixed;
top:         20px;
left:        20px;
width:       350px;
height:      500px;
border:      1px black solid;
padding:     12px;
background:  white;
font-family: "Courier New",courier,monospace;
font-size:   14px;
white-space: pre-wrap;
overflow:    scroll;
}

/* ====================================================================== */

@media print {

.simpleMapOuter {
page-break-inside: avoid;
}

.simpleListBox,
.simpleMap-links,
.simpleMap-caption .dashicons-admin-home,
.ol-zoom,
.ol-attribution,
.ol-full-screen,
.markerlabelsButton,
.srcButton,
.snapButton,
.drawButton,
.editButton,
.homeButton,
.distanceButton {
display: none !important;
}

}