/*
========= PinDown Styles 20251027 =========
= Roel Buining - LuxSoft - www.LuxSoft.eu =
*/

/* !!Leaflet is using z-index upto 1000 !!*/

* {padding:0; margin:0;}
html, body {height:100%;}
body {font:12px arial,sans-serif;}
body {background:#E0E0E0; color:#2B3856; overflow:hidden;}
table {border-collapse:collapse;}

pre {display:inline;}
button, input, label, select {cursor:pointer;}
input[type='text'] {font-family:inherit; font-size:1.0em; height:16px; padding:0 2px; color:#2B3856; background:#FFFFFF; border-radius:2px; border:1px solid #666; cursor:text;}
input:focus {outline:solid 1px blue;}
input:hover {outline:solid 1px red;}
a {text-decoration:none;}
button, a.button {font-size:1.0em; height:18px; color:#2B3856; background:#F0F0F0; padding:0 4px; border-radius:3px; border:1px solid #1888D8; text-decoration:none;}
button:hover, a:hover {text-shadow:0 0 0.4em #7070B0;}
select {font-size:1.0em; height:18px; color:#2B3856; background:#FFFFFF; padding:0 4px; border-radius:3px; border:1px solid #666;}
optgroup {text-align:left; font-style: italic;}
option {text-align:left; font-style: normal;}
p {margin:4px 0; text-align:justify; word-break:keep-all;}
p.alLeft {text-align:left;}
img {border-style:none;}

h3 {font:bold 1.1em arial,sans-serif;}
h4 {font:bold 1.0em arial,sans-serif;}

ul {margin:0 25px;}
li {margin:4px 0;}

.bold {font-weight:bold;}
.floatR {float:right;}
.floatL {float:left;}
.alignC {text-align:center;}
.alignR {text-align:right;}
.center {display:block; margin:auto;}
.clear {clear:both;}
.hide {display:none;}
.small {font-size:0.8em;}

.noSel {
	-webkit-user-select:none; /* Safari */
	-ms-user-select:none; /* IE 10+ and Edge */
	user-select:none; /* Standard syntax */
}
.point {cursor:pointer;}
.arrow {cursor:default;}
.hilite {color:#E03030; font-weight:bold;}
.inputError {background:#E09090;}
.inputMsg {background:#D3D3D3;}
.noWrap {white-space:nowrap;}
.hr {align-items:center; display:flex; text-align:center;}
.hr::before, .hr::after {border-top:.0625em solid; content:""; border-color:#1888D8; flex:1; margin:0 .5em;}
span.geoClick {font-size:0.95em; color:#2B38A0; background:#E0E0FF; padding:0 4px; border-radius:3px; border:1px solid #FF0000;}[onClick] {cursor:pointer;}

/* leaflet tooltip */
.leaflet-tooltip-right.xKm:before {border:transparent;}
.leaflet-tooltip.xKm {
	font:1.0em arial,sans-serif;
	padding:2px;
	background-color:rgba(255, 255,255, 0.7);
	border-radius:5px;
	border:transparent;
	box-shadow:none;
}
 
/* site info box */
div#xBox {
	position:fixed; top:0; bottom:0; left:0; right:0;
	display:flex;
	align-items:center;
	justify-content:space-around;
	background-color:rgba(0,0,0,0.4);
	opacity:0; transition:opacity 2s;
	z-index:1200;
}

div#xBoxText {
	overflow:auto;
	color:#083060; background:#F8F8F8;
	font-size:1.2em;
	padding:12px 12px 6px 12px;
	max-height:80vh;
	max-width:80vw;
	border:1px solid #F04040; border-radius:6px; box-shadow:6px 6px 6px #888;
	cursor:pointer;
}

/* canvas */
.theme {color:#F0F0F0; background:#1888D8;}
span.fullScreen {margin:-7px 0 0 6px; color:#F02030; font-size:1.8em; cursor:pointer; z-index:1000;}
div.navBar {height:24px; padding:3px 10px 0 0; font-weight:bold; border:1px solid #808080; border-style:solid none;}
div.navBar span.title {margin:0 3%; font:bold 1.2em arial,sans-serif;}
div.navBar span.titleP {color:#FCA020;}
div.navBar span.titleL {display:inline-block;}
div.navBar span.titleS {display:none;}
div.navBar input.find {height:16px; width: 80px;}
span.adminMsg {color:#f99; background: #444; margin-left:30px; padding:2px 10px}
div#map {position:absolute; left:0; top:26px; right:0; bottom:18px; z-index:902;}
@media screen and (max-width:750px) {
	div.navBar {height:48px;}
	div.navBar span.title {margin:0 1%;}
	div.navBar span.titleL {display:none;}
	div.navBar span.titleS {display:inline-block;}
	div#map {top:50px;}
	div#list {top:50px;}
	.notOnMob {display:none;}
}
footer {position:absolute; left:0; right:0; bottom:0; height:16px; padding:0px 10px 0 0; border:1px solid #808080; border-style:solid none;}
footer a {font:1.0em arial,sans-serif; float:right; text-decoration:none; color:#F0F0F0;}
footer a span {font-weight:bold;}

/* list view */
#scrollLine {border:none; background:red; height:3px; width:0px;}
#list {position:absolute; left:0; top:26px; right:0; bottom:21px; color:#2B3856; background:#FFFFFF; z-index:901;}
#listInner {height:100%; overflow:auto;}
table.list thead {background:#D3D3D3; position:sticky; top:0;}
table.list th, td {vertical-align:top; padding:4px 10px; border:1px solid #D0D0D0;}
table.list tr.indent {background:#F0F0F0;}
table.list tr.indent img {width:130px; margin-left:20px;}
table.list tr td.row2 {width:170px; word-break: break-all;}
table.list div.arrowTop {color:#303030;}
table.list div.arrow {font-size:2.0em; line-height:20px; text-align:center;}
table.list div.arrow span:hover {color:#FF5050;}
tbody.fold {display:none;}
img.lstImg {width:150px; cursor:zoom-in;}
img.lstMkr {width:25px;}
div.empty {margin:40vh 0 0 15px; font-size:1.1em;}
div#toTop {position:fixed; bottom:40px; left:20px; font-size:2.0em;; text-align:center; background:rgba(255,255,255,0.5); width:35px; height:35px; border-radius:50%; z-index:903}
div#toTop a {color:#7777CC}
div#toTop a:hover {color:#DD3300;}
a#top {visibility:hidden;}

/* modal overlay */
.modal { /* modal background */
	display:none;
	position:fixed; top:0; bottom:0; left:0; right:0;
	background-color:rgba(0,0,0,0.4);
	z-index:1100;
}
.modX { /* modal content */
	padding:10px;
	position:absolute; top:50%; left:50%;
	transform:translate(-50%, -50%);
	overflow:auto;
	background:#FFF;
	border:1px solid black;
}
.modImg { /* modal image */
	max-width:80%; max-height:80%;
}
.modIfr { /* modal iframe */
	border:0;
	width:80%; height:80%;
}
.modCls {position:fixed; top:40px; right:40px; font-size:2.0em;}

/* GPS and distance bar */
div.topBars {position:absolute; top:4px; left:0; right:0; text-align:center; z-index:1000;}
span.miniBar {display:none; font-size:1.4em; margin:0 8px; padding:2px 6px; color:#2B3856; background:#FFFFFF; border-radius:8px;}

/* side menu */
div.sideMenu {position:fixed; right:4px; width:0px; padding:4px 0; color:#2B3856; background:#FEFEFE; box-sizing:border-box; border-radius:5px; box-shadow:5px 5px 5px #888; font-size:1.0em; z-index:1000; overflow:hidden; transition:0.5s;}
div.sideMenu h4 {margin:4px 0px;}
select.appSelect {width:190px;}
div.smInner {margin:4px 8px; white-space:nowrap;}
div.subTitle {background:#EEEEEE; border:1px solid #808080; border-radius:5px; margin:0 4px 4px 0; padding-left:4px;}
div.lyrGroup {display:none; max-height:210px; margin:6px 0 4px 4px; overflow-y:auto;}
span.lyrInfo {float:right; margin-right:2px; font-weight:bold; visibility:hidden;}
div.udrPars {display:none; margin:6px 0 4px 4px;}
div.udrPars span {width:60px; margin:2px; display:inline-block;}
div.udrPars input {width:110px; margin:2px;}
select.ddMenu {width:55px;}
select {text-align:center;}
select.ddMenu option{padding:0 4px;}
span.smLabel:hover {background:#F0B0B0;}
span.closeSm {position:absolute; top:0; right:0; color:#FF0000;}

/* toggle switch */
.switch {
	position:relative;
	top:2px;
	display:inline-block;
	width:30px; height:13px;
}

.switch input { 
	display:none;
}

.slider {
	position:absolute;
	cursor:pointer;
	top:0; right:0; bottom:0; left:0;
	border:1px solid #fff;
	border-radius:10px;
	background:#999;
	transition:.4s;
}

.slider:before {
	position:absolute;
	left:4px; bottom:1px;
	content:"";
	width:9px; height:9px;
	border-radius:50%;
	background:white;
	transition:.4s;
}

input:checked + .slider {
	background:#2090FF;
}

input:checked + .slider:before {
	transform:translateX(14px);
}

/* control & info box */
div#cBox, div#iBox {position:fixed; top:110px; left:12px; width:280px; padding:2px; color:#2B3856; background:#FEFEFE; border:2px solid #808080; border-radius:5px; box-shadow:5px 5px 5px #888; font-size:1.0em; z-index:1000; display:none;}
div.cBoxTop, div.iBoxTop {padding:0 10px; line-height:20px; font-weight:bold; cursor:move;}

/* map control box */
div#cBox {top:110px;}
#rememSet {margin:-2px 2px 0 0;}
div.cBoxBody {padding:5px 4px; cursor:default;}
div.cBoxBody input[type='text'], div#cBoxBody select {box-sizing:border-box;}
div.msgArea {margin:-2px 0 4px 0;}
div.msgArea span {padding:0 4px;}
div.border {position:relative; padding:4px; margin-top:4px; border:1px solid #1888D8; border-radius:5px;}
ul.locList {position:absolute; top:22px; left:68px; margin:0; list-style-type:none; background:#FFF; z-index:10;}
ul.locList li {line-height:1.6; margin:-1px; padding:0 3px; white-space:nowrap; border:1px solid #1888D8; cursor:pointer;}
ul.locList li:hover {text-shadow:0 0 0.4em #1888D8;}
table.cBox {width:100%;}
table.cBox td:first-child {width:50px;}
table.cBox td {vertical-align:top; border:0px solid transparent; padding:0;}
table.cBox tr > td + td {border-left-width:6px;}
table.cBox tr + tr > td {border-top-width:4px;}
#place {width:154px; height:18px;}
#locFly, #cooFly {margin:0 4px;}
#cLat, #cLng {width:72px;}
#rRad, #flyTo {width:72px;}
#evtDays {width:22px; text-align:right;}
#fGroup, #fType {width:128px;}
.key2input {width:88px;}
.stCheck {font-size:0.8em;}
.xfNum {width:45px;}
div.scroll {width:100%; max-height:240px; padding-top:2px; overflow:auto;}
div.formButs {text-align:center; margin-top:6px;}
span.infoBut {display:none; cursor:pointer; font-size:0.9em; padding:0 5px; border:2px solid #808080; border-radius:50%;}
input.date {font-size:11px; width:72px;}
.dtPick {cursor:pointer; font-size:14px;}
fieldset.tagsList {position:absolute; top:25px; left:50%; transform:translate(-50%,0); padding:3px 0; background:#FFF; box-shadow:5px 5px 5px #888; z-index:1001; display:none;}
fieldset.tagsList div {max-height:140px; padding:8px; overflow-y:auto; white-space:nowrap;}
.tagsClose {float:right;}
.tagsOA {margin:0 4px 0 10px; font-size:0.8em;}
.tagsSubmit {display:block; margin:2px auto;}
#active {display:none; color:grey;}

/* marker info box */
div#iBox {top:450px;}
div#iBoxBody {padding:8px 10px; cursor:default;}
div#iBoxBody div.name {font:bold 1.1em arial,sans-serif; margin:0 0 4px 0; color:#2B3856; background:#E0E0E0; padding:0 2px;}
div#iBoxBody div.buttons {margin:4px 0;}
div#iBoxBody div.arrows {text-align:center;}
div#iBoxBody div.arrows span {font-size:2.0em; line-height:20px; color:#7777CC; margin:0 40px}
div#iBoxBody div.arrows span:hover {color:#FF5050;}
div#iBoxBody div.scroll {margin-top:4px; max-height:120px; overflow:auto;}
div#iBoxBody div.scroll p {text-align:left; margin-right:7px;}
div#iBoxBody .iBoxImg {margin-top:4px; width:100%; cursor:zoom-in;}
div#iBoxBody .iBoxMkr {display:block; margin:4px auto 0 auto; width:45px;}

/* leaflet style mods */
.leaflet-control-layers-toggle {
	background-image:url(../images/layers.png);
}
.leaflet-popup-content {
	margin:13px 6px 6px 6px;
	line-height:1.4;
}

/* date picker */
table.dPicker {table-layout:fixed; width:150px; text-align:center; color:#2B3856; background:#FEFEFE; border:1px solid #B0B0B0; border-radius:5px; box-shadow:5px 5px 5px #888;}
table.dPicker th {font:bold 12px arial;}
table.dPicker td {width:14.5%; padding:0; border:1px solid #FEFEFE;}
table.dPicker td span.dpArrow {padding:0 6px; cursor:pointer;}
table.dPicker tr.dpWdays {font:bold 11px Arial; color:#F0F0F0; background:#1888D8;}
table.dPicker td.dpTDHover {background:#C0C0C0; color:red; cursor:pointer;}
table.dPicker td div.dpHilight {color:red; font-weight:bold;}
table.dPicker td button {height:16px; margin:6px 2px; padding:0 6px;}