/*****************************************************************************
 *
 * style.css - NagVis default theme stylesheet
 *
 * Copyright (c) 2004-2014 NagVis Project (Contact: info@nagvis.org)
 *
 * License:
 *
 * This program is free software; you can redistribute it and/or modify
 * it under the terms of the GNU General Public License version 2 as
 * published by the Free Software Foundation.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with this program; if not, write to the Free Software
 * Foundation, Inc., 675 Mass Ave, Cambridge, MA 02139, USA.
 *
 *****************************************************************************/

body, table, th, td {
    margin: 0;
    padding: 0;

    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    text-decoration: none;

    color: black;
    font-size: 9pt;
}

span {font-size: 9pt;}

html,body{height:100%;}

table {width:100%}
div {margin:0;padding:0}
img {border:0}

/* Global DIVs */
.main {margin:0;padding:0;background-color:white;color:black}
.header {position:fixed;top:0;left:0;padding:0;z-index:100;min-width:1000px;}
.headerspacer {width:100%}
div#map, div#overview, div#url {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index:98
}

iframe#url {
    width: 100%;
    height: 100%;
}

/* Background images */
#backgroundImage {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
}

/* icons */
.icondiv {
    position : absolute;
    border : 0;
    z-index : 1;
}

.icon {
    cursor: pointer;
}

.dragger .icon {
    cursor: move;
}

/* lines */
.line {
    position : absolute;
}

.jsline div {
    z-index: 10;
}

a.linelink {
  color: #000000;
}

/* textbox (object on map) */
.box {
    position: absolute;
    z-index : 1;
    border: 1px #000 solid;
    padding: 0 2px;
    /* tried to solve the off-screen text wrap. This fixes the problem but
     * results no no linebreak at all: white-space:nowrap; */
}

/* control styles */
div.control {
    position: absolute;
}

div.control.togglemid {
    cursor: pointer;
}

.dragger {
    cursor: move;
}

/* new overview page */

div.infopage {
    overflow: auto;    
}

div.infopage h2 {
    margin: 20px 10px 0 10px;
}

div.infobox {
    margin: 0 auto;
    padding: 10px;
    overflow: hidden;
}

div.infopage div.clear {
    clear: left;
}

div.infobox div.mapobj {
    float: left;
    width: 200px;
    height: 36px;
    margin: 1px;
    background-color: #fbfbfb;
    border: 1px solid #e5e5e5;
    overflow: hidden;
}

div.infobox div.mapobj h3,
div.infobox table.rotation h3 {
    color: #43B3CF;
    margin-top: 2px;
    margin-bottom: 2px;
    margin-left: 2px;
    font-weight: normal;
    font-size: 1.0em;
}

div.infobox div.mapobj img.state {
    margin: 2px;
}

div.infobox table.rotation {
    width: 600px;
    margin: 2px auto;
    border-collapse:collapse;
    background-color: #fbfbfb;
}

div.infobox table.rotation td.title {
    width: 300px;
}

div.infobox table.rotation td {
    padding: 4px;
    border: 1px solid #e5e5e5;
    vertical-align: top;
}

/* Style on info page */
div.infopage > table {
    margin: auto;
    margin-top: 20px;
    margin-bottom: 25px;

    width: 800px;

    background-color: #fbfbfb;
    border-collapse:collapse;
}

div.infopage > table td, div.infopage > table th {
    border: 1px solid #e5e5e5;
    padding: 4px;

    color: #43B3CF;
    vertical-align: top;
}

div.infopage > table th {
    text-align: center;
}

div.infopage > table th.head {
    font-size: 1.3em;
}

div.infopage > div.map.disabled h3  {
    color: #a4a4a4;
}

div.infopage > div.map.error h3  {
    color: #ff4f4f;
}

div.infopage a {
    display: block;
    width: 100%;
    height: 100%;
    color: #43b3cf;
    text-decoration: none;
}

div.infopage a:hover {
    color: #789D2B;
    text-decoration: none;
    opacity: .5;
}

/**
 *
 *  Status message dialog
 *
 */

#statusMessage {
  position: absolute;
  display: none;
  top: -1px;
  left: 200px;
  right: 200px;
  z-index: 5000;
  opacity: 0.85;
  font-size: 1.5em;
}

#statusMessage div {
  width: 400px;
  margin: 0px auto;
  height: 24px;
  min-height: 24px;
  padding: 8px 10px 8px 46px;
}

#statusMessage div.notice {
  background: url('../../frontend/nagvis-js/images/internal/info.png') 6px 3px no-repeat;
  background-color: #fbfbfb;
  border: 1px solid #e5e5e5;
}

#statusMessage div.error,
#statusMessage div.warning {
  background: url('../../frontend/nagvis-js/images/internal/warning.png') 6px 3px no-repeat;
  background-color: #EF9398;
  border: 1px solid #DC5757;
}

#statusMessage div.loading {
  background: url('../../frontend/nagvis-js/images/internal/loading.gif') 6px 3px no-repeat;
  background-color: #fbfbfb;
  border: 1px solid #e5e5e5;
}

/*
 * popupWindow css
 */

div#popupWindow {
    position: absolute;
    z-index: 2000;

    font-weight: normal;
    -moz-border-radius: 11px;
    -khtml-border-radius: 11px;
    -webkit-border-radius: 11px;
    border-radius: 5px;
    background: #fff;
    border: 1px solid #e5e5e5;
    -moz-box-shadow: rgba(200,200,200,1) 0 4px 18px;
    -webkit-box-shadow: rgba(200,200,200,1) 0 4px 18px;
    -khtml-box-shadow: rgba(200,200,200,1) 0 4px 18px;
    box-shadow: rgba(200,200,200,1) 0 4px 18px;
}

div#popupWindow div.close {
    width: 20px;
    height: 20px;
    float: right;
    font-size: 13px;
    border: 1px dotted #c0c0c0;
    text-align: center;
    margin-top: 8px;
    margin-right: 8px;
    cursor: pointer;
    color: #555;
}

/* Content styling */
#popupWindowContent {
    padding: 0 16px 16px 16px;
    color: #43B3CF;
}

#popupWindowContent div.error {
    background-color: #febabb;
    border: 1px solid #d5091b;
    color: #d5091b;
    border-radius: 5px;
    margin: 2px 0;
    padding: 3px;
    white-space: normal;
}

#popupWindowContent div.error code,
#popupWindowContent div.error pre {
    display: block;
    overflow: scroll;
    background-color: #fff;
    color: #000;
    margin: 2px;
    padding: 2px;
}

#popupWindowContent div.error div.details {
    margin-top: 5px;
    text-align: left;
    font-size: 0.8em;
}

#popupWindowContent table.mytable {
    width: 100%;
    padding: 0;
    margin: 0;
}

#popupWindowContent table.mytable th,
#popupWindowContent table.mytable td {
    padding: 0;
    margin: 0;
    border: 0;
    color: #43B3CF;
}

#popupWindowContent table.mytable td {
    vertical-align: middle;
}

#popupWindowContent label span {
    vertical-align: middle;
}

#popupWindowContent p {
    margin-bottom: 12px;
}

/* title */
div.infopage h2,
div#popupWindow h1,
#popupWindowContent h2 {
    text-align: left;
    padding: 3px 10px 2px 2px;
    line-height:20px;
    font-weight:normal;
    border-bottom: 1px solid #7EA434;
    color: #43B3CF;
}

div#popupWindow h1 {
    font-weight: normal;
    margin: 5px;
    padding: 5px 10px;
    font-size: 1.5em;

    cursor: move;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#popupWindowContent h2 {
    margin: 5px 0;
}

/* cat */
#popupWindowContent table.mytable th.cat {font-size: 1.2em;}

/* Child rows */
#popupWindowContent table.mytable tr.child-row td.tdlabel {padding-left: 10px;}

/* td labels */
#popupWindowContent table.mytable td.tdlabel {width: 140px;}
#popupWindowContent table.mytable td.tdbox {width: 25px;}
#popupWindowContent table.mytable td.tdfield {
    overflow: hidden;
    text-overflow: ellipsis;
}
#popupWindowContent input[type="radio"] {
    vertical-align: middle;
}
#popupWindowContent table.mytable tr td.tdlabel input {
    width: 140x;
}
#popupWindowContent table.mytable tr td.tdfield textarea,
#popupWindowContent table.mytable tr td.tdfield select {
    width: 99%;
}
#popupWindowContent table.mytable tr td.tdfield textarea {
    height: 250px;
}
#popupWindowContent table.mytable tr td.tdfield input[type="checkbox"] {
    width: auto;
    margin-right:2px;
}
#popupWindowContent table.mytable tr td.tdfield span {
    word-wrap: break-word;
}
#popupWindowContent table.mytable tr td.tdfield div.picker input {
    width:140px;
    margin-right:3px;
}
#popupWindowContent table.mytable tr td.tdfield div.picker img {
    vertical-align: middle;
}
#popupWindowContent table.mytable tr td.tdfield input.err,
#popupWindowContent table.mytable tr td.tdfield select.err {
    border-color: #ff4f4f;
}

#popupWindowContent table.mytable tr td.tdfield div.err {
    margin: 0;
}

#popupWindowContent .submit {
    /*font-weight: bold;
    color: #43b3cf;
    vertical-align: middle;*/

    padding: 3px 10px;
    background-color: #fbfbfb;
    border: 1px solid #e5e5e5;
    border-width: 1px;
    border-style: solid;
    -moz-border-radius: 5px;
    -khtml-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    cursor: pointer;
    text-decoration: none;

    margin: 2px auto;
    display: block;
}

#popupWindowContent table.mytable tr td.err div {
    padding: 3px;
    margin: 0 0 0 20%;
    width: 80%;
    border: 1px solid #ff4f4f;
    background-color: #ffdddd;
    color: #000000;
    -moz-border-radius: 5px;
    -khtml-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

#popupWindowContent div.success,
#popupWindowContent div.err {
    padding: 5px 8px;
    margin: 10px;
    border: 1px solid #00ff00;
    background-color: #ddffdd;
    color: #000000;
    -moz-border-radius: 5px;
    -khtml-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

#popupWindowContent div.err {
    border: 1px solid #ff4f4f;
    background-color: #FFC9C9;
    color: #000;
}

/* Popup window forms */

#popupWindowContent table.perms td.perm {
    text-align: center;
}

#popupWindowContent a {color:#43B3CF;text-decoration:none;}
#popupWindowContent a:hover {color:#779D2A;text-decoration:underline}

#popupWindowContent input, select {
    color: #555555;
    background-color: #fbfbfb;
    border: 1px solid #bbb;
}

/* Header styling */
.header {
    background-color: #fbfbfb;
    border-bottom: 1px solid #ddd;
    box-shadow: 0 3px 6px #ddd;
    color: #43B3CF;
    height: 31px;
    width: 100%;
}

#headershow {
    display: none;
    width: 9px;
    min-width: 9px;
    height: 31px;
    background-image: none;
    background-color: #fbfbfb;
    border: 1px solid #dddddd;
    border-top: none;
    border-bottom-right-radius: 4px;
}

.header ul.head {
    margin: 0;
    padding: 0;
    height: 31px;
    float:left;
    list-style:none;
}

.header ul.right {float:right}

.header ul.head li {
    margin: 0;
    padding: 0;

    height: 100%;

    float: left;
}

.header ul.head li.toggle a,
#headershow a {
    display: block;
    margin-left: 2px;
    height: 100%;
    line-height: 32px;
    text-decoration: none;
    color: #43B3CF;
}

#headershow a {
    margin-left: 0;
}

#sidetoggle {
    position: absolute;
    left: 50px;
    top: 31px;
    background-color: #fbfbfb;
    border: 1px solid #dddddd;
    border-top: none;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    width: 100px;
    height: 5px;
    text-align: center;
}

#sidetoggle:hover {
    cursor:pointer;
    background-color: #ffffff;
}

#sidetoggle img {
    width: 20px;
    height: 3px;
    margin-top: 1px;
}

.header ul.head li.logo {
    padding-left: 5px;
    padding-right: 5px;
    margin-top: 2px;
}

.header ul.head li.logo img {
    height: 25px;
    width: 97px;
}

.header ul.head li.logo a, .header ul.head li.logo a:active {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;

    display: block;
    text-decoration: none;
}

.header ul li > span {
    margin:0;
    height:31px;
    line-height:32px;
    font-weight:normal;
    padding: 0 8px;
}

#editIndicator span {width:89px;color:#ff4f4f}
.dropdown span, .header div#refreshCounterHead {
    display:block;
    margin:0;
    padding:0;
    height:31px;
    padding-left:8px;
    padding-right:8px;
    line-height: 32px;
    width:auto;
    font-weight:normal;
    cursor:pointer;
}
.dropdown span:hover {
    background-color: #ffffff;
}
.dropdown img {vertical-align:middle;margin-left:10px}
.dropdown ul {margin:0;padding:0;list-style:none;width:205px;z-index:100;position:absolute;top:31px;display:none}
.dropdown li {margin:0;padding:0}
.dropdown li.current a{color:#000000}
.dropdown li.lvl2 a{padding-left:10px;width:188px}
.dropdown li.lvl3 a{padding-left:20px;width:178px}
.dropdown li.lvl4 a{padding-left:30px;width:168px}
.dropdown li.lvl5 a{padding-left:40px;width:158px}
.dropdown li.lvl5 a{padding-left:50px;width:148px}
.dropdown a, .dropdown a:active, .dropdown li.spacer, .dropdown dl.subdropdown dt {
    display: block;
    width: 193px;
    background: #fbfbfb;
    margin: 0;
    color: #43B3CF;
    text-decoration: none;
    border-left: 1px solid #e5e5e5;
    border-right: 1px solid #e5e5e5;
    padding:5px;
    z-index:100
}
.dropdown a:visited {color:#43B3CF;}
.dropdown a.left, .dropdown a.left:active {float:left;width:152px;border-right:0}
.dropdown a.right, .dropdown a.right:active {float:right;width:30px;border-left:1px solid #43B3CF}
.dropdown a.error, .dropdown a.error:active, .dropdown a.error:visited {color:#ff4f4f}
.dropdown a:hover {
    background-color: #ffffff;
    color: #789D2B;
    text-decoration: none;
}
.dropdown a.submenu-link:after {float:right;content:">"}
.dropdown li.spacer {width:203px}
.dropdown li.spacer hr {
    border: 0;
    height: 1px;
    width: 95%;
    background-color: #e5e5e5;
}
.dropdown .underline {border-bottom:1px solid #e5e5e5}
.subdropdown {position:relative;}
.subdropdown .topline {border-top:1px solid #e5e5e5}
.subdropdown .underline {border-bottom:1px solid #e5e5e5}

.dropdown ul#views-ddcontent {max-height:690px;overflow-y:auto;overflow-x:hidden}

/* Styling for the sidebar */
#sidebar {
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    width:200px;
    z-index:99;
    display:none;
    background-color:#fbfbfb;
    text-decoration:none;
    padding-top:10px;
    border-right:1px solid #e5e5e5;
}
#sidebar ul {margin:0;padding:0;display:block;list-style:none}
#sidebar li {margin:0;padding:0;line-height:25px;}
#sidebar li.spacerbottom {border-bottom:1px dotted #e5e5e5}
#sidebar li.spacertop {border-top:1px dotted #e5e5e5}
#sidebar li > div {width:200px;clear:both;}
#sidebar li > div a {padding-left:20px;}

#sidebar li.parent div {}
#sidebar li.parent a.title {width:160px;}
#sidebar li.parent a.open {width:20px;padding:0;text-align:center;float:right}
#sidebar li.parent.lvl1 a.title{padding-left:30px;width:150px;background-position:10px 0;}
#sidebar li.parent.lvl2 a.title{padding-left:40px;width:140px;background-position:20px 0;}
#sidebar li.parent.lvl3 a.title{padding-left:50px;width:130px;background-position:30px 0;}
#sidebar li.parent.lvl4 a.title{padding-left:60px;width:120px;background-position:40px 0;}
#sidebar li.parent.lvl5 a.title{padding-left:70px;width:110px;background-position:50px 0;}
#sidebar li.parent.lvl6 a.title{padding-left:80px;width:100px;background-position:60px 0;}

#sidebar li a {display:block;width:180px;color:#43B3CF;text-decoration:none;}
#sidebar li.lvl2 a{padding-left:30px;width:170px}
#sidebar li.lvl3 a{padding-left:40px;width:160px}
#sidebar li.lvl4 a{padding-left:50px;width:150px}
#sidebar li.lvl5 a{padding-left:60px;width:140px}
#sidebar li.lvl6 a{padding-left:70px;width:130px}
#sidebar li.open > div a.title {background: url('../images/templates/default.folder_open.gif') no-repeat left #fbfbfb;}
#sidebar li.closed > div a.title {background: url('../images/templates/default.folder_closed.gif') no-repeat left #fbfbfb;}
#sidebar li.current > div {font-weight: bold;}
#sidebar li > div a:hover,
#sidebar li > div a.title:hover {
    background-color: #ffffff;
    color:#779D2A
}
#sidebar a.error, #sidebar a.error:active, #sidebar a.error:visited {color:#ff4f4f}

div.statediv {
    display: none;
    float: left;
    margin-top: 9px;
    margin-left: 5px;
    width: 5px;
    height: 5px;
    border: 1px solid #000;
}

div.statediv.sOK, div.statediv.sUP {
    display: block;
    background-color: #00FF00;
}

div.statediv.sWARNING {
    display: block;
    background-color: #FFFF00;
}

div.statediv.sCRITICAL, div.statediv.sDOWN, div.statediv.sUNREACHABLE {
    display: block;
    background-color: #ff0000;
}

div.statediv.sUNKNOWN {
    display: block;
    background-color: #FFCC66;
}

div.statediv.sERROR {
    display: block;
    background-color: #519EFF;
}

div.statediv.sPENDING, div.statediv.sUNCHECKED {
    display: block;
    background-color: #C0C0C0;
}

div.statediv.sACK:not(.sDOWNTIME) {
    border-style: dotted;
    clip-path: polygon(100% 0, 100% 100%, 50% 50%, 0 100%, 0 0);
}
div.statediv.sDOWNTIME:not(.sACK) {
    border-style: dotted;
    clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 0, 50% 50%);
}
div.statediv.sACK.sDOWNTIME {
    border-style: dotted;
    clip-path: polygon(50% 50%, 100% 0, 100% 100%, 50% 50%, 0 100%, 0 0);
}

/*
 * Frontend eventlog styling
 */

#eventlog {
	position: fixed;
	bottom: 0px;
	right: 20px;
	z-index: 1000;

	width: 400px;
	height: 70px;

	background-color: #d0d0d0;
	border: 1px solid #000000;
	border-bottom: 0;

	opacity:0.4;
	/*filter:alpha(opacity=40);*/

	padding: 2px;
	font-size: 0.8em;
}

#eventlogControl {
	position: fixed;
	bottom: 75px;
	right: 20px;
	z-index: 1001;

	width: 10px;
	height: 10px;

	background-color: #d0d0d0;
	border: 1px solid #000000;
	border-bottom: 0;

	opacity:0.4;
	/*filter:alpha(opacity=40);*/

	padding: 2px;

	font-size: 0.8em;
}

/**
 * The zoom bar
 */

div#zoombar {
    position: absolute;
    width: 20px;
    height: 145px;
    z-index: 98;
    left: 10px;
    top: 40px;
}

div#zoombar a {
    display: block;
    width: 100%;
    height: 20px;

    background-color: #fbfbfb;
    border: 1px solid #e5e5e5;
    border-radius: 4px;

    text-align: center;
    vertical-align: middle;
    line-height: 20px;
    color: #43B3CF;
    font-weight: bold;
    cursor: pointer;
}
div#zoombar a.minus {
    border-bottom: none;
}
div#zoombar a:hover {
    background-color: #ffffff;
    color: #779D2A;
}
div#zoombar div.drag {
    position: relative;
    height: 100px;
    width: 100%;
    background-image:url('../images/templates/default.zoombar_bg.gif')
}
div#zoombar div.drag div {
    position: absolute;
    left: 3px;

    width: 14px;
    height: 6px;
    cursor: pointer;

    background-color: #fbfbfb;
    border: 1px solid #e5e5e5;
}

input[type=checkbox] {
    position: relative;
    vertical-align: middle;
    bottom: 1px;
}

/* edit main config dialog navigation (tabbing) */

#popupWindowContent ul.nav {
    list-style: none;
    height: 21px;
    margin: 0;
    padding: 0;
    border-bottom: 1px solid #e5e5e5;
    margin-bottom: 10px;
}

#popupWindow ul.nav li {
    float: left;
}

#popupWindow ul.nav li a {
    display: block;
    height: 20px;
    padding: 0 5px;
    margin: 0 1px;
    line-height: 20px;
    border: 1px solid #e5e5e5;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

#popupWindow ul.nav li a:hover {
    text-decoration: none;
    color:#779D2A;
    background-color: #fbfbfb;
}

#popupWindow ul.nav li.active a {
    border-bottom: 1px solid #fff;
    color: #000;
}

/* search dialog */

td#popupWindow div.simple_form input#highlightInput {
    width: 200px;
}

td#popupWindow div.simple_form .submit {
    display: inline-block;
    margin: 2px 10px;
}

/* ack dialog */

td#popupWindow form#acknowledge input#comment {
    width: 246px;
    margin-left: 5px;
}

body.add, body.add .leaflet-container {
    cursor: crosshair;
}

/* edit grid */
div#grid div {
    position: absolute;
    z-index: 9;
}

div#grid div.vertical {
    position: absolute;
    width: 1px;
}

div#grid div.horizontal {
    position: absolute;
    height: 1px;
}

/* worldmap specific */

/* required styles */

.leaflet-map-pane,
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-tile-pane,
.leaflet-tile-container,
.leaflet-overlay-pane,
.leaflet-shadow-pane,
.leaflet-marker-pane,
.leaflet-popup-pane,
.leaflet-overlay-pane svg,
.leaflet-zoom-box,
.leaflet-image-layer,
.leaflet-layer {
    position: absolute;
    left: 0;
    top: 0;
    }
.leaflet-container {
    overflow: hidden;
    -ms-touch-action: none;
    }
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow {
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    -webkit-user-drag: none;
    }
.leaflet-marker-icon,
.leaflet-marker-shadow {
    display: block;
    }
/* map is broken in FF if you have max-width: 100% on tiles */
.leaflet-container img {
    max-width: none !important;
    }
/* stupid Android 2 doesn't understand "max-width: none" properly */
.leaflet-container img.leaflet-image-layer {
    max-width: 15000px !important;
    }
.leaflet-tile {
    filter: inherit;
    visibility: hidden;
    }
.leaflet-tile-loaded {
    visibility: inherit;
    }
.leaflet-zoom-box {
    width: 0;
    height: 0;
    }
/* workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=888319 */
.leaflet-overlay-pane svg {
    -moz-user-select: none;
    }

.leaflet-tile-pane    { z-index: 2; }
.leaflet-objects-pane { z-index: 3; }
.leaflet-overlay-pane { z-index: 4; }
.leaflet-shadow-pane  { z-index: 5; }
.leaflet-marker-pane  { z-index: 6; }
.leaflet-popup-pane   { z-index: 7; }

.leaflet-vml-shape {
    width: 1px;
    height: 1px;
    }
.lvml {
    behavior: url(#default#VML);
    display: inline-block;
    position: absolute;
    }


/* control positioning */

.leaflet-control {
    position: relative;
    z-index: 7;
    pointer-events: auto;
    }
.leaflet-top,
.leaflet-bottom {
    position: absolute;
    z-index: 1000;
    pointer-events: none;
    }
.leaflet-top {
    top: 0;
    }
.leaflet-right {
    right: 0;
    }
.leaflet-bottom {
    bottom: 0;
    }
.leaflet-left {
    left: 0;
    }
.leaflet-control {
    float: left;
    clear: both;
    }
.leaflet-right .leaflet-control {
    float: right;
    }
.leaflet-top .leaflet-control {
    margin-top: 10px;
    }
.leaflet-bottom .leaflet-control {
    margin-bottom: 10px;
    }
.leaflet-left .leaflet-control {
    margin-left: 10px;
    }
.leaflet-right .leaflet-control {
    margin-right: 10px;
    }


/* zoom and fade animations */

.leaflet-fade-anim .leaflet-tile,
.leaflet-fade-anim .leaflet-popup {
    opacity: 0;
    -webkit-transition: opacity 0.2s linear;
       -moz-transition: opacity 0.2s linear;
         -o-transition: opacity 0.2s linear;
            transition: opacity 0.2s linear;
    }
.leaflet-fade-anim .leaflet-tile-loaded,
.leaflet-fade-anim .leaflet-map-pane .leaflet-popup {
    opacity: 1;
    }

.leaflet-zoom-anim .leaflet-zoom-animated {
    -webkit-transition: -webkit-transform 0.25s cubic-bezier(0,0,0.25,1);
       -moz-transition:    -moz-transform 0.25s cubic-bezier(0,0,0.25,1);
         -o-transition:      -o-transform 0.25s cubic-bezier(0,0,0.25,1);
            transition:         transform 0.25s cubic-bezier(0,0,0.25,1);
    }
.leaflet-zoom-anim .leaflet-tile,
.leaflet-pan-anim .leaflet-tile,
.leaflet-touching .leaflet-zoom-animated {
    -webkit-transition: none;
       -moz-transition: none;
         -o-transition: none;
            transition: none;
    }

.leaflet-zoom-anim .leaflet-zoom-hide {
    visibility: hidden;
    }


/* cursors */

.leaflet-clickable {
    cursor: pointer;
    }
.leaflet-container {
    cursor: -webkit-grab;
    cursor:    -moz-grab;
    }
.leaflet-popup-pane,
.leaflet-control {
    cursor: auto;
    }
.leaflet-dragging .leaflet-container,
.leaflet-dragging .leaflet-clickable {
    cursor: move;
    cursor: -webkit-grabbing;
    cursor:    -moz-grabbing;
    }


/* visual tweaks */

.leaflet-container {
    background: #ddd;
    outline: 0;
    }
.leaflet-container a {
    color: #0078A8;
    }
.leaflet-zoom-box {
    border: 2px dotted #38f;
    background: rgba(255,255,255,0.5);
    }


/* general typography */
.leaflet-container {
    font: 12px/1.5 "Helvetica Neue", Arial, Helvetica, sans-serif;
    }


/* general toolbar styles */

.leaflet-bar {
    box-shadow: 0 1px 5px rgba(0,0,0,0.65);
    border-radius: 4px;
    }
.leaflet-bar a,
.leaflet-bar a:hover {
    background-color: #fff;
    border-bottom: 1px solid #ccc;
    width: 26px;
    height: 26px;
    line-height: 26px;
    display: block;
    text-align: center;
    text-decoration: none;
    color: black;
    }
.leaflet-bar a,
.leaflet-control-layers-toggle {
    background-position: 50% 50%;
    background-repeat: no-repeat;
    display: block;
    }
.leaflet-bar a:hover {
    background-color: #f4f4f4;
    }
.leaflet-bar a:first-child {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    }
.leaflet-bar a:last-child {
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    border-bottom: none;
    }
.leaflet-bar a.leaflet-disabled {
    cursor: default;
    background-color: #f4f4f4;
    color: #bbb;
    }

.leaflet-touch .leaflet-bar a {
    width: 30px;
    height: 30px;
    line-height: 30px;
    }


/* zoom control */

.leaflet-control-zoom-in,
.leaflet-control-zoom-out {
    font: bold 18px 'Lucida Console', Monaco, monospace;
    text-indent: 1px;
    }
.leaflet-control-zoom-out {
    font-size: 20px;
    }

.leaflet-touch .leaflet-control-zoom-in {
    font-size: 22px;
    }
.leaflet-touch .leaflet-control-zoom-out {
    font-size: 24px;
    }


/* layers control */

.leaflet-control-layers {
    box-shadow: 0 1px 5px rgba(0,0,0,0.4);
    background: #fff;
    border-radius: 5px;
    }
.leaflet-control-layers-toggle {
    background-image: url(../../frontend/nagvis-js/images/internal/leaflet/layers.png);
    width: 36px;
    height: 36px;
    }
.leaflet-retina .leaflet-control-layers-toggle {
    background-image: url(../../frontend/nagvis-js/images/internal/leaflet/layers-2x.png);
    background-size: 26px 26px;
    }
.leaflet-touch .leaflet-control-layers-toggle {
    width: 44px;
    height: 44px;
    }
.leaflet-control-layers .leaflet-control-layers-list,
.leaflet-control-layers-expanded .leaflet-control-layers-toggle {
    display: none;
    }
.leaflet-control-layers-expanded .leaflet-control-layers-list {
    display: block;
    position: relative;
    }
.leaflet-control-layers-expanded {
    padding: 6px 10px 6px 6px;
    color: #333;
    background: #fff;
    }
.leaflet-control-layers-selector {
    margin-top: 2px;
    position: relative;
    top: 1px;
    }
.leaflet-control-layers label {
    display: block;
    }
.leaflet-control-layers-separator {
    height: 0;
    border-top: 1px solid #ddd;
    margin: 5px -10px 5px -6px;
    }


/* attribution and scale controls */

.leaflet-container .leaflet-control-attribution {
    background: #fff;
    background: rgba(255, 255, 255, 0.7);
    margin: 0;
    }
.leaflet-control-attribution,
.leaflet-control-scale-line {
    padding: 0 5px;
    color: #333;
    }
.leaflet-control-attribution a {
    text-decoration: none;
    }
.leaflet-control-attribution a:hover {
    text-decoration: underline;
    }
.leaflet-container .leaflet-control-attribution,
.leaflet-container .leaflet-control-scale {
    font-size: 11px;
    }
.leaflet-left .leaflet-control-scale {
    margin-left: 5px;
    }
.leaflet-bottom .leaflet-control-scale {
    margin-bottom: 5px;
    }
.leaflet-control-scale-line {
    border: 2px solid #777;
    border-top: none;
    line-height: 1.1;
    padding: 2px 5px 1px;
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    -moz-box-sizing: content-box;
         box-sizing: content-box;

    background: #fff;
    background: rgba(255, 255, 255, 0.5);
    }
.leaflet-control-scale-line:not(:first-child) {
    border-top: 2px solid #777;
    border-bottom: none;
    margin-top: -2px;
    }
.leaflet-control-scale-line: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 rgba(0,0,0,0.2);
    background-clip: padding-box;
    }


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


/* div icon */

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

/* disable focus effect (border), needed for worldmap, but ok for whole nagvis */
input:focus,
select:focus,
textarea:focus,
button:focus,
a:focus,
div:focus {
    outline: none;
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    body.main {
        background-color: #1a1a1a;
        color: #e0e0e0;
    }

    /* Header */
    .header {
        background-color: #2a2a2a;
        border-bottom-color: #444;
        box-shadow: 0 3px 6px #000;
        color: #e0e0e0;
    }

    /* Logo has a white background baked into the PNG; blend it away */
    li.logo img {
        mix-blend-mode: multiply;
    }

    .header ul.head li.toggle a,
    #headershow a,
    .header ul.head li > a {
        color: #e0e0e0;
    }

    #headershow {
        background-color: #2a2a2a;
        border-color: #444;
    }

    #sidetoggle {
        background-color: #2a2a2a;
        border-color: #444;
    }

    #sidetoggle:hover {
        background-color: #333;
    }

    /* Dropdown menus */
    .dropdown span:hover {
        background-color: #333;
    }

    .dropdown a, .dropdown a:active, .dropdown li.spacer, .dropdown dl.subdropdown dt {
        background: #2a2a2a;
        color: #43B3CF;
        border-left-color: #444;
        border-right-color: #444;
    }

    .dropdown a:visited {
        color: #43B3CF;
    }

    .dropdown a:hover {
        background-color: #333;
        color: #779D2A;
    }

    .dropdown li.spacer hr {
        background-color: #444;
    }

    .dropdown .underline { border-bottom-color: #444; }
    .subdropdown .topline { border-top-color: #444; }
    .subdropdown .underline { border-bottom-color: #444; }

    /* Sidebar */
    #sidebar {
        background-color: #2a2a2a;
        border-right-color: #444;
    }

    #sidebar li.spacerbottom { border-bottom-color: #444; }
    #sidebar li.spacertop { border-top-color: #444; }

    #sidebar li.open > div a.title,
    #sidebar li.closed > div a.title {
        background-color: #2a2a2a;
    }

    /* Popup window */
    div#popupWindow {
        background: #2a2a2a;
        border-color: #555;
        -moz-box-shadow: rgba(0,0,0,0.8) 0 4px 18px;
        -webkit-box-shadow: rgba(0,0,0,0.8) 0 4px 18px;
        -khtml-box-shadow: rgba(0,0,0,0.8) 0 4px 18px;
        box-shadow: rgba(0,0,0,0.8) 0 4px 18px;
    }

    div#popupWindow div.close {
        border-color: #666;
        color: #ccc;
    }

    #popupWindowContent {
        color: #e0e0e0;
    }

    div.infopage h2,
    div#popupWindow h1,
    #popupWindowContent h2 {
        color: #43B3CF;
    }

    div#popupWindow h1 {
        border-bottom-color: #444;
    }

    #popupWindowContent table.mytable th,
    #popupWindowContent table.mytable td {
        color: #e0e0e0;
    }

    /* Popup nav tabs */
    #popupWindow ul.nav li a {
        background-color: #333;
        border-color: #555;
        color: #ccc;
    }

    #popupWindow ul.nav li a:hover {
        background-color: #3c3c3c;
        color: #779D2A;
    }

    #popupWindow ul.nav li.active a {
        border-bottom-color: #2a2a2a;
        color: #e0e0e0;
    }

    #popupWindowContent ul.nav {
        border-bottom-color: #555;
    }

    /* Form inputs inside popup */
    #popupWindowContent input, select {
        color: #e0e0e0;
        background-color: #3a3a3a;
        border-color: #555;
    }

    /* Error/success messages */
    #popupWindowContent div.success {
        border-color: #00aa00;
        background-color: #1a3a1a;
        color: #88ff88;
    }

    #popupWindowContent div.err {
        border-color: #ff4f4f;
        background-color: #3a1a1a;
        color: #ffaaaa;
    }

    #popupWindowContent div.error {
        background-color: #3a1a1a;
        border-color: #d5091b;
        color: #ffaaaa;
    }

    #popupWindowContent div.error code,
    #popupWindowContent div.error pre {
        background-color: #2a2a2a;
    }

    /* Links */
    #popupWindowContent a { color: #43B3CF; }
    #popupWindowContent a:hover { color: #779D2A; }

    /* Submit button */
    #popupWindowContent .submit {
        background-color: #3a3a3a;
        border-color: #555;
        color: #e0e0e0;
    }

    /* Infopage */
    div.infobox div.mapobj {
        background-color: #2a2a2a;
        border-color: #444;
    }

    div.infobox table.rotation {
        background-color: #2a2a2a;
    }

    div.infobox table.rotation td {
        border-color: #444;
    }

    div.infopage > table {
        background-color: #2a2a2a;
    }

    div.infopage > table td,
    div.infopage > table th {
        border-color: #444;
        color: #e0e0e0;
    }

    /* Worldmap icon */
    .leaflet-div-icon {
        background: #2a2a2a;
        border-color: #666;
    }
}
