/******************
 * OSRM (Manager) *
 ******************/

.mg-osrm-manager-waypoints {
  max-height: 11rem;
  overflow: auto;
}

.mg-osrm-manager-waypoints .ui-sortable-placeholder,
.mg-osrm-waypoint {
  border: 1px solid transparent;
  display: flex;
}

.mg-osrm-waypoint-icon,
.mg-osrm-directions-instructions-table .mg-osrm-directions-instructions-waypoint .mg-osrm-directions-instructions-icon {
  background-color: #717171;
  border: 1px solid #666;
  color: white;
  display: inline-block;
  flex: 0 0 auto;
  font-weight: bold;
  margin: 0.3rem 0;
  text-align: center;
  width: 1.8rem;
}

.mg-osrm-waypoint-icon {
  max-height: 24px;
}

.mg-osrm-manager-waypoints-sorting .mg-osrm-waypoint:last-child .mg-osrm-waypoint-icon {
  background-color: #00b3fd;
}

.mg-osrm-manager-waypoints .ui-sortable-placeholder {
  border: 1px dashed #ccc;
  opacity: 0.3;
}

.mg-osrm-manager-waypoints-notsorting .mg-osrm-waypoint:first-child .mg-osrm-waypoint-icon,
.mg-osrm-directions-instructions-waypoint:first-child .mg-osrm-directions-instructions-icon {
  background-color: #6fbb3b;
}

.mg-osrm-manager-waypoints-notsorting .mg-osrm-waypoint:last-child .mg-osrm-waypoint-icon,
.mg-osrm-directions-instructions-waypoint:last-child .mg-osrm-directions-instructions-icon {
  background-color: #ef4040;
}

.mg-osrm-manager-waypoints-notsorting .mg-osrm-waypoint:nth-child(1) .mg-osrm-waypoint-icon::after,
.mg-osrm-directions-instructions-icon-waypoint-a::after {
  content: 'A';
}

.mg-osrm-manager-waypoints-notsorting .mg-osrm-waypoint:nth-child(2) .mg-osrm-waypoint-icon::after,
.mg-osrm-directions-instructions-icon-waypoint-b::after {
  content: 'B';
}

.mg-osrm-manager-waypoints-notsorting .mg-osrm-waypoint:nth-child(3) .mg-osrm-waypoint-icon::after,
.mg-osrm-directions-instructions-icon-waypoint-c::after {
  content: 'C';
}

.mg-osrm-manager-waypoints-notsorting .mg-osrm-waypoint:nth-child(4) .mg-osrm-waypoint-icon::after,
.mg-osrm-directions-instructions-icon-waypoint-d::after {
  content: 'D';
}

.mg-osrm-manager-waypoints-notsorting .mg-osrm-waypoint:nth-child(5) .mg-osrm-waypoint-icon::after,
.mg-osrm-directions-instructions-icon-waypoint-e::after {
  content: 'E';
}

.mg-osrm-manager-waypoints-notsorting .mg-osrm-waypoint:nth-child(6) .mg-osrm-waypoint-icon::after,
.mg-osrm-directions-instructions-icon-waypoint-f::after {
  content: 'F';
}

.mg-osrm-manager-waypoints-notsorting .mg-osrm-waypoint:nth-child(7) .mg-osrm-waypoint-icon::after,
.mg-osrm-directions-instructions-icon-waypoint-g::after {
  content: 'G';
}

.mg-osrm-manager-waypoints-notsorting .mg-osrm-waypoint:nth-child(8) .mg-osrm-waypoint-icon::after,
.mg-osrm-directions-instructions-icon-waypoint-h::after {
  content: 'H';
}

.mg-osrm-manager-waypoints-notsorting .mg-osrm-waypoint:nth-child(9) .mg-osrm-waypoint-icon::after,
.mg-osrm-directions-instructions-icon-waypoint-i::after {
  content: 'I';
}

.mg-osrm-manager-waypoints-notsorting .mg-osrm-waypoint:nth-child(10) .mg-osrm-waypoint-icon::after,
.mg-osrm-directions-instructions-icon-waypoint-j::after {
  content: 'J';
}

.mg-osrm-manager-waypoints-notsorting .mg-osrm-waypoint:nth-child(11) .mg-osrm-waypoint-icon::after,
.mg-osrm-directions-instructions-icon-waypoint-k::after {
  content: 'K';
}

.mg-osrm-manager-waypoints-notsorting .mg-osrm-waypoint:nth-child(12) .mg-osrm-waypoint-icon::after,
.mg-osrm-directions-instructions-icon-waypoint-l::after {
  content: 'L';
}

.mg-osrm-manager-waypoints-notsorting .mg-osrm-waypoint:nth-child(13) .mg-osrm-waypoint-icon::after,
.mg-osrm-directions-instructions-icon-waypoint-m::after {
  content: 'M';
}

.mg-osrm-manager-waypoints-notsorting .mg-osrm-waypoint:nth-child(14) .mg-osrm-waypoint-icon::after,
.mg-osrm-directions-instructions-icon-waypoint-n::after {
  content: 'N';
}

.mg-osrm-manager-waypoints-notsorting .mg-osrm-waypoint:nth-child(15) .mg-osrm-waypoint-icon::after,
.mg-osrm-directions-instructions-icon-waypoint-o::after {
  content: 'O';
}

.mg-osrm-manager-waypoints-notsorting .mg-osrm-waypoint:nth-child(16) .mg-osrm-waypoint-icon::after,
.mg-osrm-directions-instructions-icon-waypoint-p::after {
  content: 'P';
}

.mg-osrm-manager-waypoints-notsorting .mg-osrm-waypoint:nth-child(17) .mg-osrm-waypoint-icon::after,
.mg-osrm-directions-instructions-icon-waypoint-q::after {
  content: 'Q';
}

.mg-osrm-manager-waypoints-notsorting .mg-osrm-waypoint:nth-child(18) .mg-osrm-waypoint-icon::after,
.mg-osrm-directions-instructions-icon-waypoint-r::after {
  content: 'R';
}

.mg-osrm-manager-waypoints-notsorting .mg-osrm-waypoint:nth-child(19) .mg-osrm-waypoint-icon::after,
.mg-osrm-directions-instructions-icon-waypoint-s::after {
  content: 'S';
}

.mg-osrm-manager-waypoints-notsorting .mg-osrm-waypoint:nth-child(20) .mg-osrm-waypoint-icon::after,
.mg-osrm-directions-instructions-icon-waypoint-t::after {
  content: 'T';
}

.mg-osrm-manager-waypoints-notsorting .mg-osrm-waypoint:nth-child(21) .mg-osrm-waypoint-icon::after,
.mg-osrm-directions-instructions-icon-waypoint-u::after {
  content: 'U';
}

.mg-osrm-manager-waypoints-notsorting .mg-osrm-waypoint:nth-child(22) .mg-osrm-waypoint-icon::after,
.mg-osrm-directions-instructions-icon-waypoint-v::after {
  content: 'V';
}

.mg-osrm-manager-waypoints-notsorting .mg-osrm-waypoint:nth-child(23) .mg-osrm-waypoint-icon::after,
.mg-osrm-directions-instructions-icon-waypoint-w::after {
  content: 'W';
}

.mg-osrm-manager-waypoints-notsorting .mg-osrm-waypoint:nth-child(24) .mg-osrm-waypoint-icon::after,
.mg-osrm-directions-instructions-icon-waypoint-x::after {
  content: 'X';
}

.mg-osrm-manager-waypoints-notsorting .mg-osrm-waypoint:nth-child(25) .mg-osrm-waypoint-icon::after,
.mg-osrm-directions-instructions-icon-waypoint-y::after {
  content: 'Y';
}

.mg-osrm-manager-waypoints-notsorting .mg-osrm-waypoint:nth-child(26) .mg-osrm-waypoint-icon::after,
.mg-osrm-directions-instructions-icon-waypoint-z::after {
  content: 'Z';
}

.mg-osrm-waypoint-draggable {
  cursor: move;
  flex: 0 0 auto;
  padding: 0.7rem 0.8rem 0.3rem 0.8rem;
}

.mg-osrm-waypoint-removebtn {
  flex: 0 0 auto;

  /* float: right; */
}

.mg-osrm-waypoint-label {
  flex: 1;
  flex-basis: auto;
  margin: 0.5rem 0;
}

.mg-osrm-manager-actions {
  margin: 0.3rem 0;
}

.mg-osrm-waypoint-add {
  cursor: pointer;
  display: none;
}

.mg-osrm-manager-can-add .mg-osrm-waypoint-add {
  display: block;
}

.mg-osrm-waypoint-add .mg-osrm-waypoint-icon {
  background-color: #ddd;
  border: 1px solid #ccc;
}

.mg-osrm-waypoint-add .mg-osrm-waypoint-icon::after {
  content: '+';
}

.mg-osrm-waypoint-add .mg-osrm-waypoint-label {
  color: #666;
  margin: 0.5rem 0 0.5rem 0.5rem;
}

.mg-osrm-waypoint-add .mg-osrm-waypoint-label::after {
  content: '...';
}

.mg-osrm-waypoint-add:hover .mg-osrm-waypoint-label {
  text-decoration: underline;
}

.mg-osrm-waypoint-add:hover .mg-osrm-waypoint-icon {
  background-color: #00b3fd;
  border: 1px solid #666;
}


/********************************
 * OSRM Directions Instructions *
 ********************************/

 .mg-osrm-directions-instructions-asnew {
  font-size: 19px;
  font-weight: bold;
  text-align: center;
  background-color: #269aff;
  border-radius: 10px;
  color: white;
  display: inline-block;
  font-size: 14px;
  line-height: 22px;
  margin: 2px 5px 2px 10px;
  padding: 0 10px;
}

.mg-osrm-directions-instructions-gpxdownload {
  margin: 0.5rem;
}

.mg-osrm-directions-instructions-summary {
  padding: 0 0 0 0.5rem;
}

.mg-osrm-directions-instructions-table tr {
  cursor: pointer;
}

.mg-osrm-directions-instructions-table tr:hover .mg-osrm-directions-instructions-text {
  text-decoration: underline;
}

.mg-osrm-directions-instructions-summary,
.mg-osrm-directions-instructions-table td {
  color: rgba(37, 72, 127, 1);
  font-size: 12pt;
}

.mg-osrm-directions-instructions-table td {
  padding: 5px 5px 10px 10px;
}

.mg-osrm-directions-instructions-distance {
  min-width: 6rem;
}

.mg-osrm-directions-instructions-icon {
  background-image: url('../img/osrm/osrm.directions.icons.color.svg');
  -webkit-background-size: 455px 20px;
  background-size: 455px 20px;
  background-repeat: no-repeat;
  margin: 0;
  content: '';
  display: inline-block;
  vertical-align: top;
  width: 20px;
  height: 20px;
}

.mg-osrm-directions-instructions-icon-continue { background-position: 2px 0; }
.mg-osrm-directions-instructions-icon-sharp-right { background-position: -24px 0; }
.mg-osrm-directions-instructions-icon-turn-right { background-position: -50px 0; }
.mg-osrm-directions-instructions-icon-bear-right { background-position: -74px 0; }
.mg-osrm-directions-instructions-icon-u-turn { background-position: -101px 0; }
.mg-osrm-directions-instructions-icon-sharp-left { background-position: -127px 0; }
.mg-osrm-directions-instructions-icon-turn-left { background-position: -150px 0; }
.mg-osrm-directions-instructions-icon-bear-left { background-position: -175px 0; }
.mg-osrm-directions-instructions-icon-depart { background-position: -202px 0; }
.mg-osrm-directions-instructions-icon-enter-roundabout { background-position: -227px 0; }
.mg-osrm-directions-instructions-icon-arrive { background-position: -253px 0; }
.mg-osrm-directions-instructions-icon-via { background-position: -278px 0; }
.mg-osrm-directions-instructions-icon-fork { background-position: -305px 0; }
.mg-osrm-directions-instructions-icon-ramp-right { background-position: -331px 0; }
.mg-osrm-directions-instructions-icon-ramp-left { background-position: -352px 0; }
.mg-osrm-directions-instructions-icon-merge-left { background-position: -376px 0; }
.mg-osrm-directions-instructions-icon-merge-right { background-position: -403px 0; }
.mg-osrm-directions-instructions-icon-end { background-position: -429px 0; }

.mg-osrm-directions-instructions-waypoint .mg-osrm-directions-instructions-icon {
  background-image: none;
  height: 27px;
}


/**************************************
 * OSRM Directions Instructions Error *
 **************************************/

.mg-osrm-directions-instructions-error-message {
  color: #a94442;
  font-size: 12pt;
  padding: 5px;
}


/***************************
 * OSRM Directions Summary *
 ***************************/

.mg-osrm-directions-summary .mg-osrm-directions-summary-instructions {
  display: block;
}

.mg-osrm-directions-summary .mg-osrm-directions-summary-ctn {
  display: none;
}

.mg-osrm-directions-summary-ok .mg-osrm-directions-summary-instructions {
  display: none;
}

.mg-osrm-directions-summary-ok .mg-osrm-directions-summary-ctn {
  display: block;
}

.mg-osrm-directions-summary .mg-osrm-directions-summary-error-message {
  color: #a94442;
  display: none;
}

.mg-osrm-directions-summary-error .mg-osrm-directions-summary-instructions,
.mg-osrm-directions-summary-error .mg-osrm-directions-summary-ctn {
  display: none;
}

.mg-osrm-directions-summary-error .mg-osrm-directions-summary-error-message {
  display: block;
}


/*******************
 * OSRM Route Load *
 *******************/

.mg-osrm-route-load {
  list-style: none;
  padding: 0;
  margin: 0;
}

.mg-osrm-route-load-item {
  border: 1px solid #ccc;
  padding: 0.5rem 1rem;
  margin: 0 0 0.5rem 0;
}

.mg-osrm-route-load-item:hover {
  cursor: pointer;
}

.mg-osrm-route-load-item-name {
  color: var(--primary-color);
  display: inline-block;
  font-size: 12pt;
  overflow: hidden;
  max-width: calc(100% - 45px);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mg-osrm-route-load-item:hover .mg-osrm-route-load-item-name {
  text-decoration: underline;
}

.mg-osrm-route-load-item::after {
  clear: both;
  content: "";
  display: table;
}

.mg-osrm-route-load-item-btn-remove {
  float: right;
}


/**************************
 * OSRM EditFeature Panel *
 **************************/

.mg-osrm-editfeature-panel {

  /* note: position is in map.browser.css */
  background-color: rgba(255, 255, 255, 0.85);
  width: 22rem;
}


/**************************
 * OSRM Panel (Desktop)   *
 **************************/

.mg-osrm-panel-desktop {
  background-color: rgba(255, 255, 255, 0.85);
  left: 5px;
  width: 22rem;
  position: absolute;
  top: 5px;
}

.mg-osrm-panel-desktop .panel-heading {
  cursor: pointer;
}

.mg-osrm-panel-desktop .panel-heading::after {
  font-family: 'Glyphicons Halflings';  /* essential for enabling glyphicon */
  content: "\e113";
  float: right;
}

.mg-osrm-panel-desktop .panel-heading.collapsed::after {
  content: "\e114";
}

.mg-osrm-editfeature-panel .panel-body,
.mg-osrm-panel-desktop .panel-body {
  padding: 3px 6px;
}

.mg-osrm-editfeature-panel .panel-footer,
.mg-osrm-panel-desktop .panel-footer {
  text-align: right;
}


/***********************
 * OSRM Panel (Mobile) *
 ***********************/

.mg-osrm-mobilepanel-bottom,
.mg-osrm-mobilepanel-top {
  display: flex;
}

.mg-osrm-mobilepanel-bottom {
  border-top: 1px solid #ccc;
  padding: 0.2rem;
}

.mg-osrm-mobilepanel-bottom .btn {
  font-size: 18px;
}

.mg-osrm-mobilepanel-bottom .btn-group .btn {
  width: 4.4rem;
}

.mg-osrm-mobilepanel .mg-osrm-manager {
  flex: 1;
}

.mg-osrm-mobilepanel-backbtn {
  border-radius: 0;
  height: 5rem;
  padding: 1rem 1.65rem;
  display: inline-block;
  font-size: 15pt;
  flex: 0 0 auto;
}

.mg-osrm-mobilepanel .mg-osrm-directions-summary {
  margin: 0 0.5rem;
  width: calc(100% - 16rem);
}

.mg-osrm-mobilepanel .mg-osrm-directions-summary-total {
  display: inline-block;
  padding: 0 0 0 1rem;
}


/***************************************
 * OSRM SubPages (Save, Load) (Mobile) *
 ***************************************/

.mg-navigation-subpage-osrm-load,
.mg-navigation-subpage-osrm-save {
  background-color: white;
  display: none;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

body.mg-nav-osrm_load_subpage .mg-navigation-subpage-osrm-load,
body.mg-nav-osrm_save_subpage .mg-navigation-subpage-osrm-save {
  display: flex;
}

.mg-navigation-subpage-osrm-load .mg-navigation-subpage-body,
.mg-navigation-subpage-osrm-save .mg-navigation-subpage-body {
  padding: 2rem;
}

.ol-viewport .mg-osrm-route-load,
.ol-viewport .mg-osrm-route-save {
  display: none;
}

.mg-osrm-route-load-item-distance,
.mg-osrm-route-load-item-time {
  font-size: 10pt;
}

.mg-osrm-route-load-item-time::before {
  content: " (";
}

.mg-osrm-route-load-item-time::after {
  content: ", ";
}

.mg-osrm-route-load-item-distance::after {
  content: ")";
}

/***************************
 * OSRM DraggableWaypoints *
 ***************************/

.mg-osrm-draggablewaypoints {
  left: 23rem;
  position: absolute;
  top: 3.5rem;
  z-index: 1;
}

.mg-osrm-draggablewaypoints-item {
  background-color: rgba(255, 255, 255, 1);
  padding: 5px;
  border: 1px solid #ccc;
  opacity: 1;
  border-radius: 3px;
  position: relative;
}

.mg-osrm-draggablewaypoints-item:hover {
  border: 1px solid var(--primary-color);
  cursor: move;
  opacity: 1;
}

.mg-osrm-draggablewaypoints-item-label {
  color: #333;
  font-family: Arial;
  font-weight: bold;
  font-size: 20px;
  height: 37px;
  left: 5px;
  outline-color: black;
  padding: 3px 0 0 0;
  position: absolute;
  text-align: center;
  text-shadow:
    -1px -1px 0 #fff,
    1px -1px 0 #fff,
    -1px 1px 0 #fff,
    1px 1px 0 #fff;
  top: 5px;
  width: 32px;
}

.mg-osrm-directions-instructions-icon-printpdf {
  position: absolute;
  left: -1000%;
  right: -1000%;
  top: -1000%;
  bottom: -1000%;
  margin: auto;
  min-height: 100%;
  min-width: 100%;
}