@font-face {  font-family: Roadbook;  src: url(../font/weblysleekuisl.ttf) format('truetype');  font-weight: normal;  }
@font-face {  font-family: Roadbook;  src: url(../font/weblysleekuisli.ttf) format('truetype');  font-style: italic;  font-weight: normal;  }
@font-face {  font-family: Roadbook;  src: url(../font/weblysleekuil.ttf) format('truetype');  font-weight: 100;  }
@font-face {  font-family: Roadbook;  src: url(../font/weblysleekuili.ttf) format('truetype');  font-style: italic;  font-weight: 100;  }
@font-face {  font-family: Roadbook;  src: url(../font/weblysleekuisb.ttf) format('truetype');  font-weight: bold;  }
@font-face {  font-family: Roadbook; src: url(../font/weblysleekuisbi.ttf) format('truetype');  font-style: italic;  font-weight: bold;  }

body {font-family: Roadbook, monospace;height:100vh; width: 100vw; overflow: auto; background-image: linear-gradient(rgba(255,255,255,1), rgba(230,230,230,1))}
.pell-content {background-color: white;}
a.button > * {pointer-events: none;}
body.rootpage {background: url("../img/bg_map.png")  center center no-repeat, linear-gradient(rgba(255,255,255,1), rgba(230,230,230,1));}

body.homepage {height:100vh; width: 100vw;}
body.homepage nav {position: absolute; top:5px; left: 55px; right: 15px; height: 72px;padding: 0.75em}
body.homepage nav .navbar-brand {height: 100%;align-items: center;}
body.homepage div#map-wrapper, body.homepage div#map {position: absolute; top:0; left:0; bottom:0;right:0;z-index: 10;cursor: default;}
div.rb-div-icon {background: url("../img/marker1.png") transparent center center/cover no-repeat; border: 0 none;color: white;text-align: center;background-color: #748bca;background-blend-mode: multiply;mask-image: url('../img/marker1.png');mask-repeat: no-repeat;mask-size: contain;mask-position: center;}
div.rb-div-icon span {display:block;margin-top: 10px;font-size: 10px;font-weight: bold;text-shadow: 1px 1px 2px black; }
div.rb-div-icon div {margin-top: 15px;font-size: 16px;font-weight: bold;text-shadow: 0 0 3px black, 0 0 3px black; }

.bg-black       { background-color: #000000!important; }
.bg-lime        { background-color: #00ff00!important; }
.bg-orangered   { background-color: #ff4500!important; }
.bg-yellow      { background-color: #ffff00!important;}
.bg-orchid      { background-color: #c26dbc!important; }
.bg-aqua        { background-color: #00ffff!important; }
.bg-dodgerblue  { background-color: #1e90ff!important; }
.bg-navajowhite { background-color: #ffdead!important; }
.bg-hotpink     { background-color: #fd49a0!important; }


.switch-format-icon {margin-right: 5px;cursor: pointer;user-select: none;}
.gps-coordinates {font-family: monospace;}
.move {cursor: move;}

form.is-fullwidth {width: 100%;}
article.panel {background-color: white;}

.modal div.card div.card-content {max-height: 60vh;overflow: auto;scroll-behavior: smooth;}
.navbar-item div.dropdown {max-width: 100%;width: 100%;}
.navbar-item div.dropdown > div, .navbar-item div.dropdown button {max-width: 100%;width: 100%;}
.navbar-item div.dropdown button > i + span {overflow: hidden;width: 100%;text-align: left}
.navbar-item div.dropdown div.dropdown-menu a {overflow: hidden;}

.card-footer-item-not-stretched {align-self: flex-start; width: auto; flex-grow: 0;}

.page-feedback {pointer-events: none;position: fixed;right: 0;left: 10px; top: 120px;z-index: 10000;}
.page-feedback > ul {display: flex;justify-content: center}
.page-feedback li.notification {padding:0;margin: 0 10px 0 0 ;line-height: 34px;}
.page-feedback li.notification > span {padding: 5px 28px 5px 15px;}
.page-feedback li.notification > .delete {inset-inline-end: 3px;top: 7px;}

.route-point-list {}
.route-point-list > div {position: relative;display: block;min-width: 140px; border: 1px solid lightgray;border-radius: 12px 5px 5px 5px;}
.route-point-list > div > div:first-child {position: absolute; top: 0; left: 0; font-style: italic; font-size: 9pt; line-height: 24px; background-color: #666; border-radius: 12px; color: white; text-align: center; min-width: 24px; height: 24px;}
.route-point-list > div > div:nth-child(2) {max-width: 140px; word-wrap: break-word; display: block; padding: 2px 5px;text-indent: 26px;}

.route-point-list > div.selectable {cursor: pointer;user-select: none;}

.route-point-list > div.selected {background-color: #def;}

/* keep it near the input and above the map */
.rb-search-wrapper { position: relative; width: 100%; }
.rb-search-results {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    right: 0;
    z-index: 30;           /* higher than map controls */
    max-height: 50vh;
    overflow: auto;
    border-radius: 0.5rem;
}