/** layout */
html, body, #app, .container {
    height: 100dvh;
    margin: 0;
    max-width: 100%;
    overflow-x: hidden;
    overflow-y: hidden;
}
#app {
    width: 100%;
    margin: 0;
    max-width: inherit;
    position: -webkit-sticky;
    position: fixed;
    top: 0;
}
#app > div {
    height: inherit;
}
.map, #map {
    height: calc(60dvh - 48px);
}
/* ref: 100% - main title - details pane - details title (tabs) */
#infoPanelsTabsMenu div ul { margin-top: 2px; }
#infoPanelsContent {
    height: calc(40dvh - 48px); overflow-x: hidden;
    border: 1px solid transparent;
    border-top-color: rgb(222, 226, 230);
}
#infoPanelsContent > div { height: inherit;}
#infoPanelsContentTabs { height: inherit;}
#infoPanelsContentTabs .col {
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
}
#messages { z-index: 500; }
/* loading spinner */
#loading-spinner-image { animation: spin 1s linear infinite; }
@keyframes spin {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}
.navbar-brand img { transition: opacity 0.5s ease-in-out; }
body.loading .navbar-brand img { opacity: 0; }
/** card design */
.card:hover {
    box-shadow: 0 0 3px 1px rgba(0, 140, 186, 0.5) inset;
}
.mb-3 { /* remove space under 'card' overlaping bootstrap */
    margin-bottom: 0rem !important;
}
.card {
    /* default font-size is 1rem or 16px - this is set in the default browser stylesheet */ 
    font-size: 0.75rem; /*small; 12px;*/
    font-weight: 400; 
} 
.card-body {
    padding: 0.7rem;
}
.card-title {
    margin-bottom: 0.25rem;
}
@media screen and (max-width: 1400px) { 
    .card-title {
        font-size: 1rem;
    }
}
.card-text {
    margin-bottom: 0.25rem;
}
.card-headers {
    border-radius: 0em;
}
.card-img {
    margin: 5px;
    object-fit: scale-down;
    max-height: 50px;
}
.card .row .col-9 { padding-left: 0em; } /* card with image removes left padding for text */
.lh-half { line-height: .5; }

@media screen and (orientation: landscape) {
    .map, #map { min-height: 200px; }
}
/** layout: micro small */
/*@media screen and (max-width: 322px) {}*/
/** layout: small */
@media screen and (max-width: 768px) {
    #mainPanels {height: 60dvh;}
    #infoPanels {height: 40dvh;}
    #infoPanelsContent {height: calc(40dvh - 48px);overflow-y: auto;overflow-x: hidden;}
    #infoPanelsTabsMenu { margin-bottom: -2px; }
    #infoPanelsTabsMenu div { margin-bottom: -2px; }
    .nav-item { margin-top: .25rem; margin-bottom: .25rem; }
}
/** layout: medium & large */
@media screen and (min-width: 768px) {
    #mainPanels {height: 100dvh;}
    #infoPanels {height: 100dvh;}
    #infoPanelsContent {height: calc(100dvh - 56px);}
    #infoPanelsTabsMenu div { z-index: 100; }
    .map, #map { height: calc(100dvh - 48px); }
    .card-img { max-height: 100px; }
}
/** layout: large */
/*@media screen and (min-width: 1400px) {}*/

/*.col-md-3, .col { / * @TODO limitar al menu, usando id!! * / 
    padding-right: 0px;
    padding-left: 0px;
}*/

/** colors and others */
/* .navbar { background-color: lavender; } */
.years { color:darkred; font-weight:bold; text-align:center; } /* #f6931f - maroon */
.yearinput { border:0; }
.year-btn { width: 28px; }
.highlight_active { color: darkslategrey; background-color: lightblue; border-color: midnightblue; border-width: 2px; border-spacing: 5px; }
/*.description { color: darkslategrey; background-color: #eee; border-color: #eee; border-width: 0px; border-spacing: 5px; padding: 5px; } /* se usa? */
/*.description:hover { color: black; background-color: lightblue; border-color: midnightblue; border-width: 2px; border-spacing: 5px; transition-duration: 1s;} /* se usa? */
/* body { background-color: #eee; } */
.infoPanelsTabsMenuItem { 
    border: 1px solid lightgray;
    border-bottom: unset;
    box-sizing: border-box;
    border-top-left-radius: .25rem;
    border-top-right-radius: .25rem;
}
.infoPanelsTabsMenuItem:hover {
    box-shadow: 0 0 3px 1px rgba(0, 140, 186, 0.5) inset;
}
/* icons for tabs */
.infoPanelsTabsMenuButton.active {
    /*background-color: indianred;*/
    color: white;
    box-shadow: 0 0 3px 1px rgb(139, 0, 0);
}
.infoPanelsTabsMenuButtonText {
    color: darkslategrey;
    font-size: x-small;
}
.orderResultsMenu li a {
    font-size: .875rem;
}
.search-results em {
    background-color: #fff9c0; /*#c0ffc8;*/
    padding:0.1em 0.2em;
}
.dot {
	height: 15px;
	width: 15px;
	background-color: #bbb;
	border-radius: 50%;
	display: inline-block;
}
.descImg {
	border: 1px solid #ddd;
	border-radius: 4px;
	padding: 5px;
	width: 150px;
}
span:hover div .descImg {
  box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
}
.descTxt {
	padding: 5px;
}
h6.ayuda {
	color: darkcyan;
}
.navbar {
	padding-top: .25rem;
	padding-bottom: .25rem;
}
/*.navbar-toggler-icon {
    font-size: small;
}*/
.menuItem {
    color: cornflowerblue;
}
.menuItemIcon {
    width: 25px;
}
.menuSelector {
    color: #0d6efd;
}
.dropdown-item a {
    text-decoration: none;
    white-space: nowrap;
    color: var(--bs-dropdown-link-color);
}
a.dropdown-item.disabled {
    color: rgb(93, 97, 101);
}
/** context menu */
.dropdown-context .nav-header{
    cursor:default;
}
.dropdown-context:before {
    position: absolute;
    top: -7px;
    left: 9px;
    display: inline-block;
    border-right: 7px solid transparent;
    border-bottom: 7px solid #ccc;
    border-left: 7px solid transparent;
    border-bottom-color: rgba(0, 0, 0, 0.2);
    content: '';
}
.dropdown-context:after {
    position: absolute;
    top: -6px;
    left: 10px;
    display: inline-block;
    border-right: 6px solid transparent;
    border-bottom: 6px solid #ffffff;
    border-left: 6px solid transparent;
    content: '';
}

.positionButton i {
    font-size: 1rem;
    vertical-align: middle;
}

/** leaflet & markers */
.awesome-marker i {
    font-size: 18px;
}

/* https://github.com/Leaflet/Leaflet/issues/4686 */
/* https://stackoverflow.com/questions/56025536/will-change-memory-consumption-is-too-high-firefox-issue */
.leaflet-fade-anim .leaflet-tile,.leaflet-zoom-anim .leaflet-zoom-animated { will-change:auto !important; }

/* animation on polylines to draw 'trips' DWH3-61 */
path.leaflet-interactive.animate {
    stroke-dasharray: 1920;
    stroke-dashoffset: 1920;
    animation: dash 15s linear 1s forwards;
}
@keyframes dash {
    to {
        stroke-dashoffset: 0;
    }
}

/* debug window */
.trace {
    position: absolute;
    right: 20px;
    bottom: 20px;
    width: 300px;
    height: initial !important;
    background-color: #fff;
    color: black;
    border-radius: 5px;
    opacity: 1;
    transition: all 0.4s;
    z-index: 1000;
}
.trace-body {
    min-height: 100px;
    max-height: 300px;
    font-size: x-small;
    height: 200px;
    overflow-x: hidden;
    border: 2px solid purple;
}
#check:checked~.trace {
    opacity: 1
}
.trace-header {
    padding: 13px;
    background-color: purple;
    border-radius: 5px 5px 0px 0px;
    color: #fff
}