html:root {
  --map-tooltip-z-index:   700;
  --map-overlay-z-index: 10000;
  --form-footer-z-index: 50000;
  --page-header-z-index: 80000;
  --dialog-z-index:      90000;
  --toolbar-z-index:     95000;
  --panel-z-index:      100000;
  --toast-z-index:      200000;
/*--paco-menu-z-index: 99999999;*/
}

/* ------ Texts ------ */

dfn {
  font-style: normal;
  font-weight: bolder;
}

code {
  unicode-bidi: isolate;
  white-space: pre-wrap;
  word-break: break-all;
}

unit-number[altunit] {
  display: none;
}
.with-altunits unit-number[altunit]:not([hidden]),
.stats-detail unit-number[altunit]:not([hidden]) {
  display: inline;
}

/* ------ Media ------ */

.strava-brand-logo {
  display: block;
  margin: .5em auto;
}

.strava-brand-link {
  text-align: center;
}

.strava-brand-link img {
  max-height: 5em;
}

a.strava-brand-link {
  color: #FC4C02;
  font-size: 80%;
}

rb-formatted-body img,
figure img {
  max-width: 100%;
  max-height: 100vh;
  object-fit: contain;
}

iframe.embed-listen {
  border: none;
  width: 100%;
  height: 178px;
}

iframe.embed-listen-mini {
  border: none;
  width: 178px;
  height: 178px;
}

iframe.embed-youtube {
  border: none;
  height: 315px;
  width: 560px;
}

iframe.embed-instagram {
  border: none;
  height: 315px;
  width: 560px;
}

.eventInfo-contents iframe.embed-youtube,
.eventInfo-contents iframe.embed-instagram {
  width: 100%;
}

/* ------ Buttons ------ */

button {
  cursor: pointer;
  padding: 0.5em;
  vertical-align: middle;
  font-weight: normal;
}

button:disabled {
  cursor: default;
}

a.button {
  display: inline-block;
  min-width: 5em;
  padding: 0.5em 1em;
  background: #eee;
  color: black;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
}

a.button:hover,
a.button:active {
  background: #d7d7d7;
  color: black; }

.delete-button:not([hidden]) {
  display: inline-block;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  margin: 0 0 0 -4px;
  border-style: none;
  padding: 0.2em;
  line-height: 1;
  color: black;
  background: transparent;
  min-width: 0;
  text-align: center; }

.delete-button:hover,
.delete-button:active {
  color: black;
  background: #eee; }

button.link {
  display: inline;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  margin: 0;
  border-style: none;
  padding: 0;
  color: var(--color-primary);
  background: transparent;
  min-width: 0;
  font-size: inherit;
  cursor: pointer; }

button.link:hover,
button.link:active {
  text-decoration: underline; }

button[is="mode-button"] {
  background: white;
  color: black;
  border: solid black 1px; }

button[is="mode-button"].selected {
  background: gray;
  color: white;
  border: solid #ccc 1px; }

button .info:not([hidden]),
a.button .info:not([hidden]) {
  display: block;
  text-align: start;
  color: inherit;
  background: transparent;
  font-size: 80%;
}

button strong,
a.button strong {
  font-size: 150%;
}

.login-button {
  border-color: transparent;
  -webkit-appearance: none;
  min-width: 240px;
  padding: 10px;
  font-size: 14px;
  margin: 0;
}
@media (max-width: 350px) {
  .login-button {
    min-width: 200px;
  }
}

.login-button:not(.selected) {
  min-width: 180px;
  padding: 8px;
  font-size: 12px;
}

.login-button-google {
  background: #4285f4;
  color: #fff;
}
.login-button-google:hover {
  background: #2a75f3;
  color: #fff;
}

.login-button-facebook {
  background: #4267b2;
  color: #fff;
}
.login-button-facebook:hover {
  background: #3b5c9f;
  color: #fff;
}

.close-button,
.help-button,
toast-box button,
button[is=rb-close-dialog-button],
button[is=rb-action-toolbar-close-button] {
  background: transparent;
  color: inherit;
  min-width: 2em;
  min-height: 2em;
  margin: 0;
  border: 1px solid var(--color-white); }

.close-button:hover, .close-button:active, .close-button:focus,
.help-button:hover, .help-button:active, .help-button:focus,
toast-box button:hover,
button[is=rb-close-dialog-button]:hover,
button[is=rb-action-toolbar-close-button]:hover,
toast-box button:active,
button[is=rb-close-dialog-button]:active,
button[is=rb-action-toolbar-close-button]:active,
toast-box button:focus,
button[is=rb-close-dialog-button]:focus,
button[is=rb-action-toolbar-close-button]:focus {
  background-color: #f2f2f2;
  color: black;
}

/* ------ Forms ------ */

input, textarea, select {
  box-sizing: border-box;
}

input.dimension {
  width: 5em;
  text-align: center;
  font-size: 150%;
}

label + label {
  margin-left: 1em;
}

label-sub:not([hidden]) {
  display: block;
}
label-sub {
  font-size: 80%;
}

dialog-backdrop .config {
  margin: 1em;
  width: calc(100% - 2em);
}

dialog-backdrop .config td input:not([type]) {
  max-width: none;
  width: 100%;
}

.output-code code {
  font-size: 200%;
  background-color: #f3f3f3;
  color: black;
  vertical-align: middle;
}

.config route-map {
  width: 100%;
}

/* ------ Blocks ------ */

ol > li,
.edit-form .notes ol > li {
  list-style: decimal;
}

/* ------ Statuses and warnings ------ */

action-status[status=ng] action-status-message:not([hidden]) {
  display: block;
}
action-status[status=ng] action-status-message,
.route-editor .error {
  margin: .5em;
  border: red 0.2em solid;
  padding: .5em;
  text-align: center;
  background-color: #ffdddd;
  color: red;
}

.warning::before {
  content: "⚠\A0";
}

strong.warning {
  color: red;
  background: transparent;
  font-weight: bolder;
}

danger-zone:not([hidden]) {
  display: block;
}
danger-zone {
  margin: 0.5em 0 1em;
  padding: 12px 15px;
  color: white;
  background: #c1840d;
  font-size: .85rem;
}

/* ------ Wizards ------ */

rb-wizard-button-container:not([hidden]) {
  display: block;
}
rb-wizard-button-container {
  margin: 3em 0 5em 0;
}

rb-wizard-button-container p {
  text-align: center;
}
rb-wizard-button-container p + .buttons {
  margin-top: 1em;
}

rb-wizard-button-container .buttons button,
rb-wizard-button-container .buttons a.button {
  min-width: 10em;
  font-size: 120%;
  padding: .5em 1em;
}


/* ------ Popup menus ------ */

popup-menu > menu-main > menu-item:not([hidden]) {
  display: block;
  margin: 0;
  padding: 0; }

popup-menu > menu-main menu-item form {
  margin: 0;
  padding: 0;
}

menu-item label {
  cursor: pointer;
}

rb-with-menu:not([hidden]) {
  display: flex;
}
rb-with-menu {
  justify-content: center;
  align-items: center;
}

rb-with-menu > popup-menu {
  vertical-align: bottom;
  text-align: right;
  min-width: 50px; }


rb-event-family-menu {
  position: relative;
}

rb-event-family-menu popup-menu > button {
  border: 0;
  padding: 0;
  color: inherit;
  background: transparent;
  font: inherit;
  min-width: 8em;
}

rb-event-family-menu popup-menu > button:hover,
rb-event-family-menu popup-menu > button:focus,
rb-event-family-menu popup-menu > button:active {
  text-decoration: underline;
}

rb-event-family-menu popup-menu > menu-main {
  right: 0;
  width: 20em;
  max-width: 80vw;
  color: var(--dialog-color);
  background-color: var(--dialog-background-color);
  border: var(--dialog-border-color) var(--dialog-border-width) solid;
  padding: var(--dialog-padding);
  text-align: start;
}

.error-message {
  background-color: red;
  color: white; }

/* ------ Share ------ */
.has-navigator-share .if-no-navigator-share {
  display: none; }

.no-navigator-share .if-navigator-share {
  display: none; }

invitation-container:not([hidden]) {
  display: block; }

invitation-text:not([hidden]) {
  display: block;
  border: solid 1px currentcolor;
  white-space: pre-wrap; }

invitation-text > * {
  font: inherit; }

.has-status-info {
  background: #ddd;
  color: black; }

status-info:not([hidden]) {
  display: block;
  margin: 0.5em 0;
  padding: 1em;
  color: white;
  background: #c1840d; }

status-info enum-value[data-field="report_type"]:not(:empty)::before {
  content: "理由: "; }

status-info span[data-field="claimed_by"]:not(:empty)::before {
  content: "申立人: "; }

list-has-closed-item:not([hidden]) {
  display: block;
  font-size: 80%;
  font-style: italic;
  color: gray;
  background: transparent;
  text-align: right; }

.thumbnail {
  width: 15em;
  height: 15em;
  -o-object-fit: cover;
     object-fit: cover; }



/* ------ Stars ------ */

.star {
  width: 1em;
  height: 1em;
  vertical-align: baseline;
}

rb-stars {
  font-size: 1.2rem;
  line-height: 1.0;
}

rb-stars button:not([hidden]) {
  display: inline-block;
}
rb-stars button {
  -webkit-appearance: none;
  border: none;
  color: black;
  background: none;
  width: auto;
  text-align: center;
}
rb-stars button:hover {
  background-color: #f2f2f2;
  color: black;
}

.star-btn {
  border: 1px solid #e4e4e4;
  display: inline-block;
  border-radius: 3px;
  margin-right: 8px;
}

rb-stars .star-btn > button:not([hidden]),
rb-stars .star-btn > popup-menu:not([hidden]) {
  display: inline-block;
}

rb-stars .star-btn > button {
  padding: 4px 6px;
  font-size: .8rem;
  height: 29px;
}

rb-stars .star-btn > button .star {
  margin: 0 2px 0 0;
}

rb-stars popup-menu {
  height: 29px;
  margin-left: -5px;
}

rb-stars popup-menu > button {
  border-left: 1px solid #e4e4e4;
  padding: 4px;
  background-image: url("/images/menu.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 16px 16px;
  width: 24px;
  height: 29px;
  box-sizing: border-box;
}
rb-stars popup-menu[open] > button {
  background-image: url("/images/menu-focus.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 16px 16px;
}

rb-stars popup-menu > button span {
  display: none;
}

rb-stars menu-main {
  background: #fff;
  z-index: 100;
  border: 1px solid #e4e4e4;
  border-radius: 2px;
  padding: 2px;
}

rb-stars popup-menu menu-item:not([hidden]) {
  display: inline-block;
}
rb-stars popup-menu menu-item {
  text-align: center;
  min-width: 3em;
}

rb-stars popup-menu menu-item button {
  min-width: 2em;
  min-height: 2em;
}

rb-stars popup-menu menu-item button:first-child:not([hidden]) {
  display: block;
}
rb-stars popup-menu menu-item button:first-child {
  margin: 0 auto;
}

rb-stars popup-menu menu-item button .star {
  width: 2em;
  height: 2em;
}

rb-stars-main {
  vertical-align: middle;
}

rb-stars-item:not([hidden]) {
  display: inline-block;
}
rb-stars-item {  
  position: relative;
  min-width: 20px;
}

rb-stars-item .star {
  width: 24px;
  height: 24px;
}

rb-stars account-info:not([hidden]) {
  display: inline-block;
}
rb-stars account-info {
  position: absolute;
  bottom: -2px;
  left: 2px;
  border-radius: 50%;
}

rb-stars account-info a {
  padding-top: 8px;
  padding-left: 8px;
}

rb-stars account-info img {
  width: 16px;
  height: 16px;
}

rb-stars-item:not([hidden]) {
  display: inline-block;
}
rb-stars-item {
  position: relative;
  margin: 0 4px 0 0;
}

rb-stars-count {
  margin-right: 2px;
  vertical-align: middle;
  font-size: 13px;
  line-height: 20px;
  color: orange;
  background: transparent;
}

/* ------ Charts ------ */

rb-markedpoint-team-graph:not([hidden]) {
  display: block;
}
rb-markedpoint-team-graph {
  height: 100%;
}

rb-graph-main:not([hidden]) {
  display: block;
}
rb-graph-main {
  max-height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
}

.rb-axis-label-vertical {
  writing-mode: vertical-rl;
  text-align: center;
}

rb-barsets-chart {
  height: 30em;
}

rb-rank-chart, rb-distance-chart {
  height: calc(max(30em, 80vh));
}

  .ct-vertical.ct-label {
      margin-top: .5em;
  }

  rb-rank-chart .ct-horizontal.ct-label {
      margin-left: -.5em;
  }

  rb-barsets-chart, rb-rank-chart, rb-distance-chart {
      display: block;
  }

  rb-rank-chart, rb-distance-chart {
      position: relative;
  }

  rb-rank-chart-legend {
      display: block;
      position: absolute;
      padding-bottom: 20px;
      padding-right: 10px;
  }

  rb-rank-chart-legend li {
      display: block;
      margin: 0;
      padding: 0;
  }

rb-distance-chart .ct-series .ct-line { stroke-width: 3px }
rb-distance-chart .ct-series .ct-line[data-tracked] { stroke-width: 6px }
rb-rank-chart[data-selected~=ct-series-a] .ct-series-a .ct-line { stroke-width: 6px }
rb-rank-chart[data-selected~=ct-series-b] .ct-series-b .ct-line { stroke-width: 6px }
rb-rank-chart[data-selected~=ct-series-c] .ct-series-c .ct-line { stroke-width: 6px }
rb-rank-chart[data-selected~=ct-series-d] .ct-series-d .ct-line { stroke-width: 6px }
rb-rank-chart[data-selected~=ct-series-e] .ct-series-e .ct-line { stroke-width: 6px }
rb-rank-chart[data-selected~=ct-series-f] .ct-series-f .ct-line { stroke-width: 6px }
rb-rank-chart[data-selected~=ct-series-g] .ct-series-g .ct-line { stroke-width: 6px }
rb-rank-chart[data-selected~=ct-series-h] .ct-series-h .ct-line { stroke-width: 6px }
rb-rank-chart[data-selected~=ct-series-i] .ct-series-i .ct-line { stroke-width: 6px }
rb-rank-chart[data-selected~=ct-series-j] .ct-series-j .ct-line { stroke-width: 6px }

/*
rb-rank-chart .ct-series-a .ct-line { stroke: #ff4f81 }
rb-rank-chart .ct-series-b .ct-line { stroke: #36a2eb }
rb-rank-chart .ct-series-c .ct-line { stroke: #4bc0c0 }
rb-rank-chart .ct-series-d .ct-line { stroke: #ff8c00 }
rb-rank-chart .ct-series-e .ct-line { stroke: #6a0dad }
rb-rank-chart .ct-series-f .ct-line { stroke: #34c759 }
rb-rank-chart .ct-series-g .ct-line { stroke: #ff6347 }
rb-rank-chart .ct-series-h .ct-line { stroke: #8a2be2 }
rb-rank-chart .ct-series-i .ct-line { stroke: #00bfff }
rb-rank-chart .ct-series-j .ct-line { stroke: #ff1493 }
*/

  rb-rank-chart-legend svg {
      vertical-align: middle;
  }

  rb-barsets-chart .ct-bar {
      stroke-width: 20px;
  }

  .rb-redundant-label {
      display: none;
  }

  .rb-bar-value {
      text-anchor: middle;
      fill: black;
  }

  .rb-bar-desc {
    writing-mode: vertical-rl;
    text-orientation: upright;
    fill: black;
  }

  .rb-bar-desc-hour {
      writing-mode: horizontal-tb;
      text-anchor: middle;
  }

  .rb-barset-passed {
      fill: black;
  }

  .rb-barset-label {
    text-anchor: start;
  }

  .rb-team-desc {
      alignment-baseline: ideographic;
  }

  .rb-team-desc-pointer {
    stroke-width: 1px;
    stroke-dasharray: 5,5;
  }

  .rb-grid-day, .rb-grid-markedpoint {
      stroke-width: 1px;
  stroke-dasharray: 6px 0;
  }

  .rb-label-markedpoint {
  alignment-baseline: after-edge;
  fill: black;
  }

  .paco-elevation {
    fill: #eee;
  }

rb-barsets-chart .ct-series .ct-bar {
  stroke: black;
}

.ct-series-a .rb-team-desc-pointer { stroke-dasharray: 5, 2; }
.ct-series-b .rb-team-desc-pointer { stroke-dasharray: 7, 3; }
.ct-series-c .rb-team-desc-pointer { stroke-dasharray: 6, 4; }
.ct-series-d .rb-team-desc-pointer { stroke-dasharray: 4, 2, 2, 2; }
.ct-series-e .rb-team-desc-pointer { stroke-dasharray: 3, 1, 5, 1; }
.ct-series-f .rb-team-desc-pointer { stroke-dasharray: 8, 2; }
.ct-series-g .rb-team-desc-pointer { stroke-dasharray: 5, 5; }
.ct-series-h .rb-team-desc-pointer { stroke-dasharray: 10, 2, 2, 2; }
.ct-series-i .rb-team-desc-pointer { stroke-dasharray: 4, 4; }
.ct-series-j .rb-team-desc-pointer { stroke-dasharray: 6, 2, 1, 2; }
.ct-series-k .rb-team-desc-pointer { stroke-dasharray: 9, 1; }
.ct-series-l .rb-team-desc-pointer { stroke-dasharray: 5, 2, 3, 2; }
.ct-series-m .rb-team-desc-pointer { stroke-dasharray: 4, 2; }
.ct-series-n .rb-team-desc-pointer { stroke-dasharray: 7, 3, 1, 3; }
.ct-series-o .rb-team-desc-pointer { stroke-dasharray: 8, 1; }
.ct-series-p .rb-team-desc-pointer { stroke-dasharray: 6, 1, 3, 1; }
.ct-series-q .rb-team-desc-pointer { stroke-dasharray: 3, 3; }
.ct-series-r .rb-team-desc-pointer { stroke-dasharray: 10, 1, 1, 1; }
.ct-series-s .rb-team-desc-pointer { stroke-dasharray: 5, 3; }
.ct-series-t .rb-team-desc-pointer { stroke-dasharray: 7, 2, 2, 2; }
.ct-series-u .rb-team-desc-pointer { stroke-dasharray: 4, 2, 1, 2; }
.ct-series-v .rb-team-desc-pointer { stroke-dasharray: 9, 2; }
.ct-series-w .rb-team-desc-pointer { stroke-dasharray: 6, 2; }
.ct-series-x .rb-team-desc-pointer { stroke-dasharray: 8, 1, 4, 1; }
.ct-series-y .rb-team-desc-pointer { stroke-dasharray: 3, 2, 5, 2; }
.ct-series-z .rb-team-desc-pointer { stroke-dasharray: 5, 4; }

/* ------ References ------ */

p rb-group-info:not([hidden]),
rb-page-path rb-group-info:not([hidden]) {
  display: inline;
/*}
p rb-group-info,
rb-page-path rb-group-info {*/
  position: static;
}

p rb-group-info a:not([hidden]),
rb-page-path rb-group-info a:not([hidden]) {
  display: inline;
}

/* ------ Main part of pages ------ */
page-main > header > hgroup:not([hidden]) {
  display: table-cell;
  padding: 0;
  text-align: left; }

page-main > header hgroup h1,
page-main > header hgroup h2 {
  margin: 0;
  line-height: 1.4; }

page-main > header hgroup h2 {
  font-size: 100%;
  color: gray; }

page-main > header hgroup h2 account-info img {
  width: 1em;
  height: 1em;
  margin: 0 0.25em; }

@media (max-width: 600px) {
  page-group {
    display: block; }
  page-group > group-main {
    display: block;
    width: auto;
    margin-bottom: 1em; }
  page-group > group-sub {
    display: block;
    width: auto;
    margin-bottom: 1em; } }

/* ------ User pages ------ */
.user-page header.page list-container list-item:nth-child(1),
.user-page header.page list-container list-item:nth-child(2),
.user-page header.page list-container list-item:nth-child(3),
.user-page header.page list-container list-item:nth-child(4),
.user-page header.page list-container list-item:nth-child(5),
.user-page header.page list-container list-item:nth-child(6) {
  display: inline; }

group-sub .ranked-list list-item:not([hidden]) {
  display: block;
  margin: 0 0 .5em 0;
  font-size: 90%; }

group-sub .ranked-list list-item p {
  margin: 0; }

group-sub .ranked-list list-item a:not(:hover):not(:active) {
  text-decoration: none; }

group-sub .ranked-list list-item .secondary {
  color: gray;
  background: transparent;
  font-size: 90%; }

group-sub .ranked-list list-item .secondary a {
  color: inherit;
  background: transparent; }

/* ========== Maps ========== */

route-map:not([hidden]) {
  display: block; }

route-map {
  height: 24em;
  max-height: 100vh;
  z-index: 0; }

route-map {
  /* See also: /js/site.js */ }
  route-map > map-area {
    height: 100% !important; }
  route-map[data-defaultaction="pen"] route-map-overlay[type="editing"] {
    cursor: url(/images/cursor-pen.cur), crosshair; }
  route-map[data-defaultaction="tape"] route-map-overlay[type="editing"] {
    cursor: url(/images/cursor-tape.cur), crosshair; }
  route-map[data-defaultaction="fill"] route-map-overlay[type="editing"] {
    cursor: url(/images/cursor-bucket.cur), crosshair; }
  route-map[data-defaultaction="addMarkedPoint"] route-map-overlay[type="editing"] {
    cursor: crosshair; }
  route-map > map-controls {
    display: none; }
  route-map button.rb-locate-current-position-button:not([hidden]),
  route-map button-sample.rb-locate-current-position-button:not([hidden]) {
    display: inline-block;
    -webkit-appearance: none;
    margin-right: 10px;
    border: none;
    border-radius: 2px;
    padding: 0;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background: white;
    -webkit-box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px -1px;
            box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px -1px; }
    route-map button.rb-locate-current-position-button:not([hidden]) img,
    route-map button-sample.rb-locate-current-position-button:not([hidden]) img {
      vertical-align: middle; }

html:root {
  --map-roadtype-0-color: #13b739;
  --map-roadtype-1-color: rgba(79, 38, 114, 0.8);
  --map-roadtype-2-color: rgba(247, 147, 30, 0.8);
  --map-roadtype-3-color: rgba(237, 28, 36, 0.8);
  --map-roadtype-9-color: rgba(255, 255, 255, 0.8);
  --map-locationhistory-0-border-color: var(--locationColor0);
  --map-locationhistory-0-background-color: var(--locationColor0-translucent);
  --map-locationhistory-1-border-color: var(--locationColor1);
  --map-locationhistory-1-background-color: var(--locationColor1-translucent);
  --map-locationhistory-2-border-color: var(--locationColor2);
  --map-locationhistory-2-background-color: var(--locationColor2-translucent);
  --map-locationhistory-3-border-color: var(--locationColor3);
  --map-locationhistory-3-background-color: var(--locationColor3-translucent);
  --map-locationhistory-4-border-color: var(--locationColor4);
  --map-locationhistory-4-background-color: var(--locationColor4-translucent);
  --map-locationhistory-5-border-color: var(--locationColor5);
  --map-locationhistory-5-background-color: var(--locationColor5-translucent);
  --map-locationhistory-6-border-color: var(--locationColor6);
  --map-locationhistory-6-background-color: var(--locationColor6-translucent);
  --map-locationhistory-7-border-color: var(--locationColor7);
  --map-locationhistory-7-background-color: var(--locationColor7-translucent);
  --map-locationhistory-8-border-color: var(--locationColor8);
  --map-locationhistory-8-background-color: var(--locationColor8-translucent);
  --map-locationhistory-9-border-color: var(--locationColor9);
  --map-locationhistory-9-background-color: var(--locationColor9-translucent);
  /* See also: /js/site.js */
  --map-marker-markedpoint-url: url("/images/marker.png");
  --map-marker-markedpoint-width: 16px;
  --map-marker-markedpoint-height: 10px;
  --map-marker-cursor-url: url("/images/marker.png");
  --map-marker-globalstart-url: url("/images/icon-marker-start.png");
  --map-marker-globalgoal-url: url("/images/icon-marker-goal.png");
  --map-marker-partialstart-url: url("/images/icon-marker-start.png");
  --map-marker-partialgoal-url: url("/images/icon-marker-goal.png");
  --map-marker-video-url: url("/images/icon-map-video-small.png");
  --map-marker-image-url: url("/images/icon-map-image-small.png");
  --map-marker-audio-url: url("/images/icon-map-audio-small.png");
  --map-marker-video-large-url: url("/images/icon-map-video.png");
  --map-marker-image-large-url: url("/images/icon-map-image.png");
  --map-marker-audio-large-url: url("/images/icon-map-audio.png");
  --map-marker-set-url: url("/images/icon-map-content-small.png");
}
html:root[data-theme=red] {
  --map-roadtype-0-color: #db0a40;
}
html:root[data-theme=redb] {
  --map-roadtype-0-color: #db0a40;
  --map-marker-markedpoint-url: url(/images/star64.png);
  --map-marker-markedpoint-width: 64px;
  --map-marker-markedpoint-height: 64px;
  --map-marker-cursor-url: url(/images/marker-redb.png);
}
html:root[data-theme=transparent] {
  --map-roadtype-0-color: transparent;
}

map-area {
  --paco-marker-currentposition: circle blue 8px;
  --paco-map-zoom-animation: none;
}
map-area:lang(ja) {
  --paco-maptype-gsi-text: '国土地理院';
}

map-area .leaflet-bar a {
  background-color: white;
  color: black;
}

map-area button.paco-control-button {
  min-width: 33px;
  min-height: 33px;
  padding: 5px;
}

map-area[engine=googlemaps] button.paco-control-button {
  max-width: none;
}

html:root[data-theme=redb] map-controls.map-route-colors,
html:root[data-theme=transparent] map-controls.map-route-colors {
  display: none;
}

map-path, map-label, map-marker {
  position: absolute;
  visibility: hidden;

  /* CSS property value proxies */
  border-top-left-radius: var(--rb-old-radius);
  border-top-right-radius: var(--rb-new-radius);
}


map-path {
  outline-width: 0;
  stroke-width: 4;
}
map-path[hover] {
  stroke-width: 10;
}
map-path[background] {
  stroke-width: 2;
}
map-path[background]:not([roadtype="0"]) {
  stroke-width: 7;
}

map-path,
color-sample {
  color: var(--map-roadtype-0-color);
  stroke: currentcolor;
}
route-map map-path[background][roadtype="0"] {
  stroke: rgba(100, 100, 100, 0.5);
}
map-path[roadtype="1"],
color-sample[roadtype="1"] {
  color: var(--map-roadtype-1-color);
}
map-path[roadtype="2"],
color-sample[roadtype="2"] {
  color: var(--map-roadtype-2-color);
}
map-path[roadtype="3"],
color-sample[roadtype="3"] {
  color: var(--map-roadtype-3-color);
}
map-path[roadtype="9"],
color-sample[roadtype="9"] { /* eraser */
  color: var(--map-roadtype-9-color);
}
map-path[roadtype="shadow"] {
  color: rgba(0, 0, 0, 0.1);
  --shadow-x: 5px;
  --shadow-y: 5px;
}


map-label[locationhistory] {
  --rb-old-radius: 6px;
  --rb-new-radius: 18px;
  fill: var(--color-white);
  background: var(--color-white);
  color: var(--color-black);
  font-size: 65%;
  line-height: 1;
  text-align: center;
  font-family: sans-serif;
  font-weight: bold;
  border: 3px solid var(--color-black);
  box-shadow: rgba(0, 0, 0, 0.1) 2px 2px 3px;
}
map-label[locationhistory="0"] { border-color: var(--map-locationhistory-0-border-color) }
map-label[locationhistory="1"] { border-color: var(--map-locationhistory-1-border-color) }
map-label[locationhistory="2"] { border-color: var(--map-locationhistory-2-border-color) }
map-label[locationhistory="3"] { border-color: var(--map-locationhistory-3-border-color) }
map-label[locationhistory="4"] { border-color: var(--map-locationhistory-4-border-color) }
map-label[locationhistory="5"] { border-color: var(--map-locationhistory-5-border-color) }
map-label[locationhistory="6"] { border-color: var(--map-locationhistory-6-border-color) }
map-label[locationhistory="7"] { border-color: var(--map-locationhistory-7-border-color) }
map-label[locationhistory="8"] { border-color: var(--map-locationhistory-8-border-color) }
map-label[locationhistory="9"] { border-color: var(--map-locationhistory-9-border-color) }
map-path[locationhistory="0"] {
  stroke: var(--map-locationhistory-0-border-color);
  fill: var(--map-locationhistory-0-background-color);
}
map-path[locationhistory="1"] {
  stroke: var(--map-locationhistory-1-border-color);
  fill: var(--map-locationhistory-1-background-color);
}
map-path[locationhistory="2"] {
  stroke: var(--map-locationhistory-2-border-color);
  fill: var(--map-locationhistory-2-background-color);
}
map-path[locationhistory="3"] {
  stroke: var(--map-locationhistory-3-border-color);
  fill: var(--map-locationhistory-3-background-color);
}
map-path[locationhistory="4"] {
  stroke: var(--map-locationhistory-4-border-color);
  fill: var(--map-locationhistory-4-background-color);
}
map-path[locationhistory="5"] {
  stroke: var(--map-locationhistory-5-border-color);
  fill: var(--map-locationhistory-5-background-color);
}
map-path[locationhistory="6"] {
  stroke: var(--map-locationhistory-6-border-color);
  fill: var(--map-locationhistory-6-background-color);
}
map-path[locationhistory="7"] {
  stroke: var(--map-locationhistory-7-border-color);
  fill: var(--map-locationhistory-7-background-color);
}
map-path[locationhistory="8"] {
  stroke: var(--map-locationhistory-8-border-color);
  fill: var(--map-locationhistory-8-background-color);
}
map-path[locationhistory="9"] {
  stroke: var(--map-locationhistory-9-border-color);
  fill: var(--map-locationhistory-9-background-color);
}

.ct-series .ct-line[data-locationhistory="0"] {
  stroke: var(--map-locationhistory-0-border-color);
}
.ct-series .ct-line[data-locationhistory="1"] {
  stroke: var(--map-locationhistory-1-border-color);
}
.ct-series .ct-line[data-locationhistory="2"] {
  stroke: var(--map-locationhistory-2-border-color);
}
.ct-series .ct-line[data-locationhistory="3"] {
  stroke: var(--map-locationhistory-3-border-color);
}
.ct-series .ct-line[data-locationhistory="4"] {
  stroke: var(--map-locationhistory-4-border-color);
}
.ct-series .ct-line[data-locationhistory="5"] {
  stroke: var(--map-locationhistory-5-border-color);
}
.ct-series .ct-line[data-locationhistory="6"] {
  stroke: var(--map-locationhistory-6-border-color);
}
.ct-series .ct-line[data-locationhistory="7"] {
  stroke: var(--map-locationhistory-7-border-color);
}
.ct-series .ct-line[data-locationhistory="8"] {
  stroke: var(--map-locationhistory-8-border-color);
}
.ct-series .ct-line[data-locationhistory="9"] {
  stroke: var(--map-locationhistory-9-border-color);
}


markedpoint-icon:not([hidden]),
team-icon:not([hidden]) {
  display: inline-block;
}
markedpoint-icon,
team-icon {
  position: relative;
  margin: 0.2em;
  padding: 0.2em;
  vertical-align: middle;
}

markedpoint-icon {
  margin-left: 26px;
  margin-left: calc(var(--map-marker-markedpoint-width) + 10px);
  font-size: 100%;
  line-height: 1;
  min-height: var(--map-marker-markedpoint-height);
}

team-icon {
  min-width: 2em;
  background: #eee;
  color: black;
  font-size: 80%;
  line-height: 1;
  text-align: center;
  font-weight: bolder;
  font-family: sans-serif;
}

markedpoint-icon::before {
  position: absolute;
  margin-left: -24px;
  margin-left: calc(-1 * (var(--map-marker-markedpoint-width) + 8px));
}

map-marker.markedPoint,
markedpoint-icon::before {
  content: var(--map-marker-markedpoint-url);
  align-self: center;
}
map-marker.cursor {
  content: var(--map-marker-cursor-url);
}
map-marker.start,
map-marker.markedPoint-globalStart,
markedpoint-icon[value="globalStart"]::before {
  content: var(--map-marker-globalstart-url);
}
map-marker.end,
map-marker.markedPoint-globalGoal,
markedpoint-icon[value="globalGoal"]::before {
  content: var(--map-marker-globalgoal-url);
}
map-marker.markedPoint-partialStart,
markedpoint-icon[value="partialStart"]::before {
  content: var(--map-marker-partialstart-url);
}
map-marker.markedPoint-partialGoal,
markedpoint-icon[value="partialGoal"]::before {
  content: var(--map-marker-partialgoal-url);
}
.embed-thumbnail map-marker.start,
.embed-thumbnail map-marker.markedPoint-globalStart,
.embed-thumbnail markedpoint-icon[value="globalStart"]::before {
  fill: #d82d29;
  border: 0px transparent solid;
  --rb-new-radius: 8px;
  box-shadow: none;
  content: none;
}
.embed-thumbnail map-marker.end,
.embed-thumbnail map-marker.markedPoint-globalGoal,
.embed-thumbnail markedpoint-icon[value="globalGoal"]::before {
  fill: #8037e2;
  border: 0px transparent solid;
  --rb-new-radius: 8px;
  box-shadow: none;
  content: none;
}
.map-media-button:not([hidden]) {
  display: inline-block;
}
.map-media-button {
  -webkit-appearance: none;
  border: none;
  padding: 4px;
  background: var(--map-marker-video-large-url) transparent no-repeat;
  color: inherit;
  min-width: 56px;
  min-height: 56px;
}
map-marker.media { content: var(--map-marker-video-url) }
map-marker.media-youtube { }
map-marker.media-instagram { }
map-marker.media-listen { content: var(--map-marker-audio-url); }
.map-media-button.media-youtube {
  background-image: var(--map-marker-audio-large-url);
}
map-marker.media-set {
  content: var(--map-marker-set-url);
}

map-marker.mycurrent {
  fill: blue;
  border: 3px white solid;
  --rb-new-radius: 8px;
  box-shadow: rgba(0, 0, 0, 0.1) 2px 2px 3px;
}
marker-sample.mycurrent {
  color: blue;
  background: transparent;
  font-size: 16px;
  text-shadow: rgba(0, 0, 0, 0.1) 2px 2px 3px;
}

map-label.markedPoint {
  margin: 0.2em;
  padding: 0.2em;
  font-size: 80%;
}

map-label.markedPoint,
markedpoint-icon {
  background: #e50012;
  color: white;
  font-weight: bolder; }

map-label.markedPoint-checkpoint,
markedpoint-icon[value="checkpoint"] {
  background: gray;
  color: white; }

map-label.markedPoint-observer {
  font-size: 80%; }

map-label.markedPoint-observer,
markedpoint-icon[value="observer"] {
  color: gray;
  background: rgba(255, 255, 255, 0.7); }

map-tooltip {
  position: absolute;
  max-width: 20em;
  background: var(--color-black);
  color: var(--color-white);
  border: none;
  text-align: center;
  font-family: var(--fontFamily-monospace);
  line-height: 1.0;
  z-index: var(--map-tooltip-z-index);
  cursor: auto;
}

map-tooltip[name=mediaset] {
  background: transparent;
  color: inherit;
  max-width: 10em;
  text-align: center;
}

map-tooltip .location-tooltip-label:not([hidden]) {
  display: flex;
}
map-tooltip .location-tooltip-label {
  align-items: center;
  justify-content: center;
}

map-tooltip .location-tooltip-label > a:not([hidden]) {
  display: flex;
}
map-tooltip .location-tooltip-label > a {
  align-items: center;
  justify-content: center;
  gap: var(--margin-small);
  padding: var(--margin-xsmall) var(--margin-default);
  color: inherit;
  background: transparent;
}

map-tooltip .location-tooltip-label.secondary bdi {
  font-size: 80%;
}

map-tooltip team-icon {
    padding: 2px;
    border: 1px solid currentColor;
    font-size: var(--fontSize-xxsmall);
    color: var(--color-white);
    background: none;
    min-width: 24px; }
  map-tooltip .team-icon-img {
    width: 24px;
    height: 24px;
    border-radius: 12px; }
  map-tooltip bdi {
    font-size: var(--fontSize-xsmall);
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1; }
  map-tooltip .location-tooltip-time {
    padding: var(--margin-small) var(--margin-default) var(--margin-small);
    border-top: 1px solid #000; }
  map-tooltip time {
    margin: var(--margin-xsmall) 0 0; }

map-tooltip .plane-container:not([hidden]) {
  display: inline-block;
}

rb-rankingtype-item:not([hidden]) {
  display: inline-block;
}
rb-rankingtype-item {
  margin: 0 2px;
  border: 1px solid currentColor;
  padding: 2px;
  min-width: 1em;
  font-size: var(--fontSize-xxsmall);
  color: var(--color-white);
  background: none;
}

rb-route-status:not([hidden]) {
  display: flex;
}
rb-route-status {
  z-index: var(--map-overlay-z-index);
  position: absolute;
  bottom: 3em;
  left: 25%;
  right: 25%;
  align-items: center;
  justify-content: center;
  white-space: pre-wrap;
  pointer-events: none;
}

rb-route-status div:not([hidden]) {
  display: flex;
}
rb-route-status > div {
  flex-direction: row-reverse;
  align-items: center;
  font-size: var(--fontSize-small);
  color: var(--color-white);
  background: rgba(0, 0, 0, 0.85);
  border-radius: 1em;
  padding: var(--margin-large);
  pointer-events: all;
}

rb-route-status p {
  text-align: start;
}

rb-route-status span {
  font-size: var(--fontSize-xsmall);
}

rb-route-status p.buttons {
  margin-inline-start: 1em;
  align-self: start;
}

rb-route-status p.buttons button:not(:hover):not(:focus):not(:active) {
  border-style: hidden;
}

@media (max-width: 400px) {
  rb-route-status div {
    flex-direction: column;
  }
  
  rb-route-status p.buttons {
    margin-block-start: -1em;
    margin-inline-start: 0;
    align-self: end;
  }
}

rb-route-status .location-tooltip-label {
  margin: 0 1em;
  white-space: normal;
  min-width: 10em;
}

rb-route-status .location-tooltip-label a:not(:hover):not(:focus):not(:active) {
  color: inherit;
  background: transparent;
}

rb-route-graph-marker-list:not([hidden]) {
  display: block;
}
rb-route-graph-marker-list {
  height: .1em;
  max-height: .1em;
  font-size: 75%;
}

rb-route-graph-marker-item {
  position: absolute;
  left: calc(var(--graph-x) * 1px - var(--map-marker-markedpoint-width) / 2 - 6px);
}

rb-route-graph-marker-item markedpoint-icon span {
}

rb-time-distance-graph[selectable] {
  cursor: crosshair;
}

rb-time-distance-graph .rb-graph-cursor {
  stroke: black;
  pointer-events: none;
}

rb-time-distance-graph .rb-graph-cursor-currenttime {
  stroke: #0075ff;
}

map-controls.map-route-colors,
map-controls.map-route-current {
  background: rgba(255, 255, 255, 0.5);
  color: black;
  line-height: 14px;
  font-size: 10px;
  padding: 2px 4px;
  border-radius: 2px;
}

.leaflet-left map-controls.map-route-colors {
  margin-left: 5px;
}

.paco-legend-hidden map-controls.map-route-current {
  display: block;
}

.map-route-current .stats:not([hidden]) {
  display: inline;
  margin: 0;
  padding: 0;
}

.map-route-current .stats > div:not([hidden]) {
  display: inline;
  margin: 0;
  padding: 0;
}

.map-route-current .stats > div > dt:not([hidden]),
.map-route-current .stats > div > dd:not([hidden]) {
  display: inline-block;
}
.map-route-current .stats > div > dt,
.map-route-current .stats > div > dd {
  margin: 0;
  padding: 0;
  vertical-align: middle;
}

.map-route-current .stats > div > dd {
  min-width: 6em;
  padding: 0 .5em;
  text-align: center;
}

.map-route-current .stats unit-number + unit-number {
  margin-left: .5em;
}

.map-route-current .stats number-value {
  font-size: 150%;
  font-weight: bolder;
  vertical-align: baseline;
}

.map-media {
  position: absolute;
  bottom: 11px;
  right: 50px;
}

.map-media list-container {
  white-space: nowrap;
}

.map-media list-container list-item:not([hidden]) {
  display: contents;
}

.map-media button {
  vertical-align: middle;
  font-size: 400%;
  background: transparent;
  color: gray;
  border: none;
  padding: 0;
}

.map-media button.list-prev {
}

.map-media iframe {
  vertical-align: middle;
}

.leaflet-control-attribution {
  line-height: 1.0;
}

/* ====== Route graphs ====== */

.course-graph:not([hidden]) {
  display: flex;
}
route-graph {
  flex-direction: column;
  min-height: 10em;
  max-height: 100vh;
  max-width: 100vw;
  position: relative;
  width: 100%;
}

div[is="route-data"] {
  position: relative; }
  div[is="route-data"] route-stats + action-status {
    position: absolute;
    width: 100%; }

route-map[disabled],
div[is="route-data"] route-stats[hidden],
div[is="route-data"] route-map[hidden],
div[is="route-data"] route-graph[hidden] {
  display: block;
  pointer-events: none;
  opacity: 0.3;
  background: #eee; }

rb-if-no-elevation p {
  text-align: center;
  font-size: smaller; }


.course-graph .main {
  margin: 1em;
  margin-top: 30px; }

.course-graph .tick-line {
  stroke: #666666;
  stroke-width: 0.5; }

.course-graph .tick-line.route-boundary {
  stroke: #444;
  stroke-dasharray: 3, 1; }

.course-graph .tick-labels {
  margin: 0.4em;
  font: 10px sans-serif;
  fill: #999; }

.course-graph .tick-labels.x text {
  text-anchor: middle;
  alignment-baseline: before-edge; }

.course-graph .tick-labels.x text.unit {
  text-anchor: start; }

.course-graph .tick-labels.y text {
  text-anchor: end;
  alignment-baseline: middle; }

.course-graph .tick-labels.y text.topmost {
  alignment-baseline: before-edge; }

.course-graph .tick-labels.y text.unit {
  alignment-baseline: after-edge; }

.course-graph .unit {
  cursor: default; }

.course-graph .data {
  stroke-width: 1;
  stroke: #c0c0c0;
  fill: rgba(192, 192, 192, 0.8); }

.course-graph .cursor {
  stroke-width: 2;
  stroke: black;
  fill: transparent; }



route-cursor-info:not([hidden]) {
  display: block;
}
route-cursor-info {
  position: absolute;
  margin: 0.5em;
  border: black 1px solid;
  padding: 0.2em;
  font-size: 70%;
  line-height: 1.2;
  background: rgba(255, 255, 255, 0.6);
  color: black;
}

.map-page-outer route-cursor-info {
  background: rgba(255, 255, 255, 0.9);
  color: black;
}

route-cursor-info hr {
  margin: 1px;
}

route-cursor-info p {
  text-align: center;
}

route-cursor-info .stats:not([hidden]) {
  display: block;
}
route-cursor-info .stats {
  margin: 0;
}

route-cursor-info .stats div:not([hidden]) {
  display: inline-block;
}

route-cursor-info .stats hr:not([hidden]) {
  display: inline-block;
}

route-cursor-info .stats div:not([hidden]) {
  display: inline-block;
}

route-cursor-info .stats hr:not([hidden]) {
  display: inline-block;
}

route-cursor-info .stats hr {
  margin: 0;
  width: 1em;
}

route-cursor-info .stats div + div {
  margin-left: .5em;
}

route-cursor-info .stats dt {
  margin: 0;
  padding: 0;
  min-width: 4em;
  font-weight: normal;
  color: gray;
  background: transparent;
  font-size: 90%;
  text-align: start;
}

route-cursor-info .stats dd {
  margin: 0;
  padding: 0;
  font-weight: bolder;
  font-size: 120%;
  text-align: start;
}

route-cursor-info .details:not([hidden]) {
  display: grid;
}
route-cursor-info .details.has-buttons {
  grid-template: "latlon buttons"
                 "time1  buttons"
                 "time2  buttons";
}

route-cursor-info .details > p:nth-child(1) {
  grid-area: latlon;
}
route-cursor-info .details > p:nth-child(2) {
  grid-area: time1;
}
route-cursor-info .details > p:nth-child(3) {
  grid-area: time2;
}

route-cursor-info .info {
  text-align: end;
  color: gray;
  background: transparent;
}

route-cursor-info time {
  --timejs-serialization: dtsjp3;
}

route-cursor-info .buttons {
  grid-area: buttons;
  text-align: center;
}

/* ------ Route editors ------ */

rb-route-editor.type-c rb-editor-area[name=selector],
rb-route-editor.type-c rb-editor-area[name=selected] input[name=file] {
  display: none;
}

rb-route-editor:not(.type-a) .selected-item-list .time-range {
  display: none;
}

rb-route-editor.type-a .source-selector-typed:not(.for-activity-log) {
  display: none;
}

rb-route-editor .tag-selector:not([hidden]) {
  Display: flex;
}

rb-route-editor .tag-selector input[type=search] {
  flex: 1;
}

/* ------ Embedded map widgets ------ */

.embed-preview:not([hidden]) {
  display: flex;
}
.embed-preview {
  margin: 0;
  flex-direction: column;
}

.embed-preview figure-main:not([hidden]) {
  display: block;
}
.embed-preview figure-main {
  text-align: center;
}

.embed-preview figcaption:not([hidden]) {
  display: block;
}

.embed-preview code:not([hidden]) {
  display: block;
  margin-top: 4px;
  border-color: 1px solid #b3b3b3;
  border-radius: 4px;
  padding: 8px;
  font-size: 0.9rem;
  color: #545454;
  background-color: #ebebe4; }

.embed-preview .small-copy-button {
  margin: 4px 0 4px 0;
  font-size: 120%;
  min-width: 5em; }

.embed-page-outer:not([hidden]) {
  display: flex;
  position: fixed;
}
.embed-page-outer {
  flex-direction: column;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  color: #333;
  border: 1px solid #ddd;
}

.embed-thumbnail .embed-page-outer {
  padding: 0;
}

.embed-thumbnail header,
.embed-thumbnail footer {
  display: none;
}

.embed-page-outer > header > a {
  padding: 10px 12px;
  color: #333;
  background: transparent;
  display: inline-block;
}

.embed-page-outer > header > a > h1 {
  font-size: 18px;
  line-height: 1.5;
 }

.embed-page-outer > header > a > img {
  max-width: 40px;
}

.embed-page-outer route-map {
  flex: 2;
  height: auto;
}

.embed-page-outer route-map > map-area {
  min-height: 0;
}

.embed-page-outer route-graph {
  background: white;
  color: black;
}

.embed-page-outer footer a {
  padding: 10px 12px;
  font-size: 12px;
  color: #333;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.embed-page-outer footer img {
  max-height: 24px;
}

.embed-thumbnail map-area.paco-maptype-none {
  background: #f3f3f3;
  color: black;
}

.embed-thumbnail .leaflet-control-attribution {
  display: none;
}

/* ------ Toasts ------ */

toast-group {
  z-index: var(--toast-z-index);
}

toast-box a {
  color: var(--color-white);
  background: transparent;
  text-decoration: underline;
}

.alt-lang-toast {
  --paco-toast-autoclose: none;
}

.email-missing-toast {
  --paco-toast-autoclose: none;
  background: #333;
  color: #fff;
}

/* ------ Dialogs ------ */



.modal {
  padding: 20px 40px;
  display: block; }
  @media (max-width: 559px) {
    .modal {
      padding: 12px 16px; } }

.modal-title {
  margin: 20px 0;
  text-align: center; }

header.modal-title:not([hidden]) {
  display: flex;
}

header.modal-title h1 {
  flex: 1;
  text-align: center;
}

header.modal-title a {
  text-align: right;
}

.modal-description {
  font-size: .9rem;
  margin: 0 0 .4em; }

.modal-login {
  text-align: center;
  margin: 0 0 20px; }

.modal-section {
  margin-top: 2em;
}

.modal-section .notes {
  margin: 1em;
}

.modal-section li:not([hidden]) {
  display: list-item;
}
.modal-section li {
  margin-left: 1em;
  list-style: disc;
}

.modal-section .buttons {
  text-align: center;
}

.modal-note {
  font-size: .8rem;
  color: #999;
  margin: 0 0 24px; }
  .modal-note li {
    margin: 0 0 .2em; }

.modal-strava {
  margin: 0 0 20px 0; }

.modal-buttons {
  text-align: center;
  margin: 20px 0;
  font-size: 120%;
}

.dialog-page .modal:not([hidden]) {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; }

.dialog-page .modal {
  margin-left: auto;
  margin-right: auto;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  min-height: 100vh;
  max-width: 50em;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center; }

.route-editor dialog-backdrop > section .buttons,
.modal .buttons {
  margin-top: 2em;
  margin-bottom: 2em; }

.route-editor dialog-backdrop > section .buttons:last-child {
  margin-bottom: 1em;
}

.route-editor dialog-backdrop > section .buttons button,
.modal .buttons button {
  padding: .5em 1em;
  min-width: 10em; }

dialog-backdrop:not([hidden]) {
  display: block; }
dialog-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  z-index: var(--dialog-z-index);
}

dialog-backdrop > article {
  display: block;
  max-width: 580px;
  width: 100%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  margin: 5% auto;
  height: 85%;
  position: relative; }
  @media (max-width: 559px) {
    dialog-backdrop > article {
      margin: 40px auto;
      padding: 0 20px; } }
  @media (max-width: 350px) {
    dialog-backdrop > article {
      padding: 0 12px; } }

dialog-backdrop > article > header {
  position: absolute;
  display: block;
  top: -1.5em;
  height: 1.5em;
  left: 0;
  right: 0;
  padding: 0 0 0 0.5em;
  font-size: 90%;
  line-height: 1.5; }
  dialog-backdrop > article > header:after {
    content: "";
    display: block;
    clear: both; }
  dialog-backdrop > article > header h1 {
    font-size: 100%;
    float: left; }
  @media (max-width: 559px) {
    dialog-backdrop > article > header {
      padding: 0 20px; } }
  @media (max-width: 350px) {
    dialog-backdrop > article > header {
      padding: 0 12px; } }

dialog-backdrop > article > header button {
  display: block;
  -webkit-appearance: none;
  margin: 0;
  border-style: none;
  padding: 0;
  width: 1.5em;
  height: 1.5em;
  min-width: 0;
  text-align: left;
  background: transparent;
  color: inherit;
  font-size: 100%;
  line-height: 1.5;
  font-family: inherit;
  font-style: normal;
  text-decoration: none;
  text-align: center;
  font-size: 24px;
  position: absolute;
  top: -15px;
  right: 0; }

dialog-main {
  display: block;
  width: 100%;
  height: 100%;
  -webkit-overflow-scrolling: touch; }

dialog-main > iframe {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 100vh;
  border-radius: 4px;
  background: white;
  color: black;
  border: none; }

dialog-main > div {
  display: block;
  max-height: 100%;
  overflow: auto;
  padding: .3em;
  border-radius: 4px;
  background: white;
  color: black; }

image-uploader-dialog:not([hidden]) {
  display: block;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.7);
  color: black;
  overflow: auto;
  padding: 0 80px;
  /* Google Picker : z-index: 1000 */
  z-index: 900; }
  @media (max-width: 559px) {
    image-uploader-dialog:not([hidden]) {
      padding: 0 20px; } }
  @media (max-width: 350px) {
    image-uploader-dialog:not([hidden]) {
      padding: 0 12px; } }

.modal-upload {
  background: #fff;
  border-radius: 4px;
  display: block;
  max-width: 580px;
  width: 100%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  margin: 5% auto;
  position: relative;
  padding: 12px 20px; }
  .modal-upload h1 {
    display: none; }
  .modal-upload media-upload figure:not([hidden]) {
    background: #fff; }
  .modal-upload .btn-white, .modal-upload .btn-white-medium, .modal-upload .create-link, .modal-upload .btn-white-large, .modal-upload .component-courseData .component-courseData-downloadGpx, .component-courseData .modal-upload .component-courseData-downloadGpx, .modal-upload .page-event .course-share-gpx, .page-event .modal-upload .course-share-gpx, .modal-upload .page-event-item-index #eventHeader-mapPageButton a, .page-event-item-index #eventHeader-mapPageButton .modal-upload a, .modal-upload .edit-photo-btn {
    margin-right: 8px; }
  @media (max-width: 559px) {
    .modal-upload {
      margin: 40px auto;
      padding: 12px 16px; } }

.modal-upload-tab a {
  color: #333;
  font-weight: bold; }

.login-dialog-item {
  margin-bottom: 1em;
  --timejs-serialization: dtsjp1;
}

.login-dialog-item .last-used:not([hidden]) {
  display: block;
}
.login-dialog-item .last-used {
  font-size: 75%;
  color: var(--info-color);
  background: var(--info-background-color);
}

media-upload {
  width: 100%;
  min-height: 80vh;
  margin: 0; }

media-upload form:not([hidden]) {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap; }

media-upload form > figure {
  -ms-flex-preferred-size: 100%;
  flex-basis: 100%; }

media-upload form > details {
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  text-align: left; }

media-upload p {
  margin: 0; }

media-upload figure:not([hidden]) {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 100%;
  height: 320px;
  overflow: auto;
  position: relative;
  background: gray;
  color: white;
  text-align: center;
  vertical-align: middle;
  overflow: hidden;
  margin: 0 0 8px 0; }

media-upload figure image-editor:not([hidden]) {
  color: black; }

media-upload figure image-editor > image-layer[useplaceholderui].placeholder::before {
  content: "";
  background-image: url("/images/add-image.svg");
  background-position: center;
  background-size: 300px 300px;
  background-repeat: no-repeat; }

media-upload figure image-editor > image-layer[useplaceholderui].placeholder:hover::before {
  content: "";
  background-image: url("/images/add-image-hover.svg"); }

.icon-layer {
  border: 2px dashed gray;
  border-radius: 50%;
  -webkit-clip-path: circle(102px at center);
  clip-path: circle(102px at center); }

media-upload details[open] summary {
  display: none; }

media-upload details p:not([hidden]) {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  font-size: 80%; }

media-upload details.video > .primary-controller {
  display: none; }

media-upload details:not(.video) > .video-controller {
  display: none; }

media-upload button-set:not([hidden]) {
  display: block;
  margin-right: .5em; }

media-upload button-set:nth-last-child(2) {
  text-align: right;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1; }

media-upload progress:not([hidden]) {
  display: inline;
  width: 10em;
  height: 1em;
  margin: 0;
  vertical-align: middle; }

media-upload button-set:last-child {
  margin-left: .5em;
  margin-right: 0;
  text-align: right; }

media-upload button {
  min-width: 1.5em;
  padding: 2px 4px; }

media-upload details[open] ~ progress,
media-upload details[open] ~ button {
  display: none !important; }

.image-viewer {
  max-width: calc(100% - 2em);
  height: calc(100vh - 2em);
  margin: 2.5em auto 1em auto;
}

.image-viewer dialog-main > div {
  background: transparent;
  color: inherit;
}

.image-viewer figure {
  margin: 0;
  padding: 0;
  text-align: center;
}

.image-viewer figure img {
  max-width: calc(100% - 4em);
  max-height: calc(100vh - 4em);
  background: white;
}

/* ------ Editors ------ */

rb-item-editable-list:not([hidden]) {
  display: flex;
  width: 100%;
  max-height: 100vh; }

rb-item-editable-list > list-container:not([hidden]) {
  display: block;
  width: 15em;
  overflow: auto;
  font-size: 90%; }

rb-item-editable-list > list-container list-item:not([hidden]) {
  display: block;
  border: 1px solid #e4e4e4; }

rb-item-editable-list > list-container list-item:not(:first-child) {
  border-top: none; }

rb-item-editable-list > list-container list-item > rb-editable-item:not([hidden]) {
  display: block; }

rb-item-editable-list > list-container list-item > rb-editable-item > a:not([hidden]) {
  display: block;
  border-left: transparent 4px solid;
  padding: 4px 8px;
  text-decoration: none; }

rb-item-editable-list > list-container list-item > rb-editable-item.active > a:not([hidden]) {
  border-left-color: #239b43;
  background: #f2f2f2;
  font-weight: bold;
  color: #239b43; }

rb-item-editable-list > rb-edit-form:not([hidden]) {
  display: block;
  overflow: auto;
  padding-left: 1em; }

rb-item-editable-list rb-import-items {
  display: none; }

rb-item-editable-list.import rb-import-items:not([hidden]) {
  display: block;
}

rb-import-items dialog-backdrop > section:not([hidden]),
.import-dialog dialog-backdrop > section:not([hidden]) {
  display: grid;
}
rb-import-items dialog-backdrop > section,
.import-dialog dialog-backdrop > section {
  position: absolute;
  top: 1em;
  height: calc(100vh - 2em);
  left: 1em;
  right: 1em;
  max-width: calc(100vw - 2em);
  margin: 0;
  background: var(--dialog-background-color);
  color: var(--dialog-color);
  grid-template: "preview selector" min-content
                 "preview editor"   1fr
                 "stats   editor"   max-content
                 "stats   buttons"  min-content /
                  auto    30em;
}

@media (max-width: 60em), (max-height: 25em) {
  rb-import-items dialog-backdrop > section:not([hidden]),
  .import-dialog dialog-backdrop > section:not([hidden]) {
    display: block;
  }
  rb-import-items dialog-backdrop > section,
  .import-dialog dialog-backdrop > section {
    overflow: auto;
    grid-template: "selector"
                   "editor"
                   "preview"
                   "stats"
                   "buttons";
  }
}

rb-import-items dialog-backdrop > section p,
.import-dialog dialog-backdrop > section p {
  font-size: 80%;
}

rb-import-items dialog-backdrop > section .source-selector,
.import-dialog dialog-backdrop > section .source-selector {
  grid-area: selector;
  margin: 0;
  padding: .5em;
}

rb-import-items dialog-backdrop > section .source-selector input[type=file]:not([hidden]),
.import-dialog dialog-backdrop > section .source-selector input[type=file]:not([hidden]) {
  display: block;
}
rb-import-items dialog-backdrop > section .source-selector input[type=file],
.import-dialog dialog-backdrop > section .source-selector input[type=file] {
  border: dashed black 3px;
  padding: .5em;
  width: 100%;
  box-sizing: border-box;
  cursor: pointer;
}

rb-import-items dialog-backdrop > section > table-mapper:not([hidden]),
.import-dialog dialog-backdrop > section > table-mapper:not([hidden]) {
  display: contents;
}

rb-import-items dialog-backdrop > section > table-mapper .editor,
.import-dialog dialog-backdrop > section > table-mapper .editor {
  grid-area: editor;
  margin: 0;
  padding: .5em;
  overflow: auto;
}

rb-import-items dialog-backdrop > section > table-mapper .preview,
.import-dialog dialog-backdrop > section > table-mapper .preview {
  grid-area: preview;
  overflow: auto;
  padding: .5em;
}

rb-import-items dialog-backdrop > section > table-mapper .preview h1,
.import-dialog dialog-backdrop > section > table-mapper .preview h1 {
  font-size: 100%;
}

.preview-stats-table {
  margin: 1em auto;
  font-size: 80%;
  line-height: 1.2;
  grid-area: stats;
}

rb-import-items dialog-backdrop > section .preview-stats-table,
.import-dialog dialog-backdrop > section .preview-stats-table {
  margin: 0 auto;
  line-height: 1.0;
  font-size: 60%;
}

.preview-stats-table th,
.preview-stats-table td {
  padding: 0.5em;
  text-align: center; }

.preview-stats-table strong:not([hidden]) {
  display: block; }

.preview-stats-table number-value {
  font-size: 200%;
  font-weight: bolder; }

rb-import-items dialog-backdrop > section > form:not([hidden]),
.import-dialog dialog-backdrop > section > form:not([hidden]) {
  display: contents;
}

rb-import-items dialog-backdrop > section > .buttons:not([hidden]),
.import-dialog dialog-backdrop > section > .buttons:not([hidden]),
rb-import-items dialog-backdrop > section > form > .buttons:not([hidden]),
.import-dialog dialog-backdrop > section > form > .buttons:not([hidden]) {
  display: flex;
}
rb-import-items dialog-backdrop > section > .buttons,
.import-dialog dialog-backdrop > section > .buttons,
rb-import-items dialog-backdrop > section > form > .buttons,
.import-dialog dialog-backdrop > section > form > .buttons {
  grid-area: buttons;
  flex-wrap: wrap;
  flex-direction: row-reverse;
  align-items: center;
  column-gap: .5em;
  padding: .5em;
  text-align: end;
}

@media (max-width: 60em) {
  rb-import-items dialog-backdrop > section > .buttons,
  .import-dialog dialog-backdrop > section > .buttons,
  rb-import-items dialog-backdrop > section > form > .buttons,
  .import-dialog dialog-backdrop > section > form > .buttons {
    position: sticky;
    bottom: 0;
    background: var(--dialog-background-color);
    color: var(--dialog-color);
    margin-inline-start: auto;
    width: max-content;
  }
}

rb-import-items dialog-backdrop > section .buttons > action-status,
.import-dialog dialog-backdrop > section .buttons > action-status {
  flex: 1;
}

rb-import-items dialog-backdrop > section .buttons > action-status progress,
.import-dialog dialog-backdrop > section .buttons > action-status progress {
  min-width: 5em;
}

.blog-entry-editor form {
  padding: .5em;
}

.blog-entry-editor input[name=title] {
  width: 100%;
}

.blog-entry-editor textarea {
  font-size: 150%;
  line-height: 1.5;
  height: calc(100vh - 5em);
}

.blog-entry-editor .buttons:not([hidden]) {
  display: flex;
}
.blog-entry-editor .buttons {
  position: sticky;
  bottom: 0;
  flex-direction: row-reverse;
  align-items: center;
  width: fit-content;
  margin-inline-start: auto;
  background: white;
  color: black;
}

/* ====== Events ====== */

.event-mp-list {
}

.event-mp-list .active {
  font-weight: bolder;
}

.event-submit-check #devices-list .main-button {
  padding: 1em;
}

.event-submit-check #devices-list dl:not([hidden]) {
  display: table;
}
.event-submit-check #devices-list dl {
  width: 100%;
}
.event-submit-check #devices-list dl > div:not([hidden]) {
  display: table-row;
}
.event-submit-check #devices-list dl > div > dt:not([hidden]),
.event-submit-check #devices-list dl > div > dd:not([hidden]) {
  display: table-cell;
}
.event-submit-check #devices-list dl > div > dt {
  font-weight: bolder;
  padding: var(--dialog-padding);
  vertical-align: middle;
  height: 30px;
}
.event-submit-check #devices-list dl > div > dd {
  padding: var(--dialog-padding);
  vertical-align: middle;
}

.event-submit-check .component-steps div {
  position: relative;
  padding-right: 30px;
}
.event-submit-check .component-steps div::before,
.event-submit-check .component-steps div.isCompleted::before {
  display: none;
}
.event-submit-check .component-steps div::after,
.event-submit-check .component-steps div.isCompleted::after {
  display: table-cell;
  left: auto;
}

/* ------ Rental forms ------ */

.event-rental-form {
  margin: 1em 0 10em 0;
  min-height: 100vh;
}

.event-rental-form p {
  margin: 1em 0;
}

.event-rental-form section {
  margin: 1em;
}

.event-rental-form > header h1 {
  font-size: 150%;
  text-align: center;
}

.event-rental-form .buttons {
  text-align: center;
}

.event-rental-form .buttons button {
  font-size: 150%;
  min-width: 10em;
}

.event-rental-form.done .buttons {
  text-align: end;
}

.event-rental-form.done .buttons button {
  font-size: 100%;
}

.event-rental-form .component-steps {
  justify-content: center;
}

.event-rental-form .desc-item,
.event-rental-form .prices-item,
.event-rental-form .beforestart-item,
.event-rental-form .return-item,
.event-rental-form .cancel-item,
.event-rental-form .completed-item,
.event-rental-form .contacts-item {
  margin: 1em 0;
}

.event-rental-form .product-item rb-formatted-body:not(:empty):not([hidden]),
.event-rental-form .textarea-item rb-formatted-body:not(:empty):not([hidden]),
.event-rental-form .text-item rb-formatted-body:not(:empty):not([hidden]),
.event-rental-form .tel-item rb-formatted-body:not(:empty):not([hidden]),
.event-rental-form .email-item rb-formatted-body:not(:empty):not([hidden]),
.event-rental-form .contacts-item rb-formatted-body:not(:empty):not([hidden]) {
  display: block;
}
.event-rental-form .product-item rb-formatted-body:not(:empty),
.event-rental-form .textarea-item rb-formatted-body:not(:empty),
.event-rental-form .text-item rb-formatted-body:not(:empty),
.event-rental-form .tel-item rb-formatted-body:not(:empty),
.event-rental-form .email-item rb-formatted-body:not(:empty),
.event-rental-form .contacts-item rb-formatted-body:not(:empty) {
  margin: .5em 2em;
  font-size: 90%;
}

.event-rental-form td > rb-formatted-body:not(:empty):not([hidden]) {
  margin: 0;
}

.event-rental-form .config td:not([hidden]) {
  display: table-cell;
}

.event-rental-form .config label {
  font-weight: bolder;
}

.event-rental-form .config input:not([type]),
.event-rental-form .config input[type=tel],
.event-rental-form .config input[type=email] {
  max-width: none;
}

.event-rental-form .config input:not([type]),
.event-rental-form .config input[type=tel],
.event-rental-form .config input[type=email],
.event-rental-form .config textarea {
  width: 100%;
}

/* ------ Comments ------ */

rb-select-image .edit-photo-btn {
}

rb-select-image list-item:not([hidden]) {
  display: inline-block;
}
rb-select-image list-item {
  vertical-align: middle;
}

rb-select-image figure:not([hidden]) {
  display: inline-block;
}
rb-select-image figure {
  margin: 0;
  padding: 0;
}

rb-select-image figure img {
  max-width: 8em;
  max-height: 8em;
}

rb-select-image figure .delete-button {
  vertical-align: top;
  padding: .5em;
  font-size: 1em;
}

.comment-list figure {
  margin: 1em auto;
}

.comment-list figure img {
  max-width: calc(min(100vw, 30em));
  max-height: calc(min(100vh, 30em));
}

.comment-more-options {
  grid-area: more;
  text-align: end;
}

/* ------ Admin features ------ */

html:not([data-admin]) .if-admin {
  display: none !important;
}

.if-admin {
  border: red 0.5em solid;
  padding: 0.5em;
}

html.if-admin {
  padding: 0;
}

#teams ul {
  column-width: 10em;
}

/* ------ Config pages ------ */

.config.main {
  margin-top: 2em;
  margin-bottom: 2em;
}

.config.main th {
  font-weight: bolder;
}

.config.main td {
  font-size: 150%;
}

.config-section ul:not(.notes) {
  margin: 1em;
}

rb-event-family-menu list-item {
  padding: var(--dialog-padding);
}

rb-event-family-menu .active {
  background: #f2f2f2;
  color: black;
}

rb-event-family-menu .active > a:first-child {
  color: inherit;
  background: transparent;
}

rb-event-family-menu .active rb-event-info {
  font-weight: bolder;
  color: inherit;
  background: transparent;
}

.m-plmap-team-graph .hour {
  stroke: #eee;
  stroke-width: 1px;
  stroke-dasharray: 4px 2px;
}
.m-plmap-team-graph .hour-0,
.m-plmap-team-graph .hour-6,
.m-plmap-team-graph .hour-12,
.m-plmap-team-graph .hour-18,
.m-plmap-team-graph .hour-24 {
  stroke: #ccc;
}

.m-plmap-team-graph .day {
  stroke: #ccc;
  stroke-width: 1px;
}

.m-plmap-team-graph .outside {
  fill: #ccc;
}

.m-plmap-team-graph .pl {
  stroke: currentcolor;
  stroke-width: 3px;  
}

.rb-new-device_key-cands:not([hidden]) {
  display: flex;
}
.rb-new-device_key-cands {
  margin: 0 2em;
  align-items: center;
}

.rb-new-device_key-cands button {
  align-self: start;
}
.rb-new-device_key-cands button::before {
  content: "↑ ";
}

.rb-new-device_key-cands code:not([hidden]) {
}
.rb-new-device_key-cands code {
  flex: 1;
  padding: .5em;
  font-size: 80%;
  line-height: 1.0;
}

.mwindow:not([hidden]) {
  display: grid;
}
.mwindow {
  position: fixed;
  z-index: var(--dialog-z-index);
  top: 2.5em;
  bottom: .5em;
  left: .5em;
  right: .5em;
  grid-template: "header1 status header2 buttons" auto
                 "main    main   main    main   " 1fr /
                  1fr     auto   auto    auto;
  padding: var(--dialog-padding);
  border: var(--dialog-border-width) var(--dialog-border-color) solid;
  color: var(--dialog-color);
  background: var(--dialog-background-color);
  box-shadow: var(--dialog-shadow-size) var(--dialog-shadow-size)
              var(--dialog-shadow-color);
}

@media (max-width: 30em) {
  .mwindow {
    grid-template: "status  buttons" auto
                   "header1 header2" auto
                   "main    main   " 1fr /
                    1fr     auto;
  }
}

.mwindow > hgroup:not([hidden]) {
  display: contents;
}

.mwindow > hgroup > h1 {
  grid-area: header1;
  padding: var(--dialog-padding);
  font-weight: bolder;
}

.mwindow > hgroup > p {
  grid-area: header2;
  padding: var(--dialog-padding);
  font-weight: bolder;
}

.mwindow > rb-sub-window-buttons {
  grid-area: buttons;
}

.mwindow > rb-sub-window-status {
  grid-area: status;
}

.mwindow > rb-sub-window-status progress:not([hidden]) {
  display: inline-block;
}
.mwindow > rb-sub-window-status progress {
  width: 10em;
  vertical-align: middle;
}

.mwindow > rb-sub-window-main:not([hidden]) {
  display: block;
}
.mwindow > rb-sub-window-main {
  grid-area: main;
  overflow: auto;
  padding: var(--dialog-padding);
}

.mwindow-min:not([hidden]) {
  display: inline-block;
}
.mwindow-min {
  margin: .5rem;
  padding: var(--dialog-padding);
  border: var(--dialog-border-width) var(--dialog-border-color) solid;
  color: var(--dialog-color);
  background: var(--dialog-background-color);
  box-shadow: var(--dialog-shadow-size) var(--dialog-shadow-size)
              var(--dialog-shadow-color);
}

.mwindow-min bdi {
  margin-right: .25em;
  font-weight: bolder;
  font-size: 80%;
  line-height: 1.0;
}

.mwindow rb-sub-window-buttons button,
.mwindow-min button {
  -webkit-appearance: none;
  margin: 0;
  border-style: none;
  padding: .5em;
  min-width: 2em;
  min-height: 2em;
}
.mwindow rb-sub-window-buttons button[is=rb-mwindow-reload] {
  padding: 0;
}

.raw-data-view,
.object-menu-list,
.object-config {
  --timejs-serialization: dtsjp3;
}

section.raw-data-view {
  margin: 0 0.5em;
  min-height: 100vh;
}

.need-position-fixup section.raw-data-view {
  position: relative;
  max-width: 100vw;
  max-height: 100vh;
  overflow: auto;
}

.object-config:not([hidden]) {
  display: grid; }

.object-config {
  grid: " header header " min-content
        " menu   main   " 1fr
        " footer main   " min-content
        /   15em   1fr;
  align-items: start;
  height: 100vh;
  max-width: 1024px;
}

html.if-admin .object-config {
  height: calc(100vh - 0.5em * 2);
}

body.object-config,
section.object-config {
  margin: 0 auto; }

@media (max-width: 768px) {
/*@media (max-width: 559px) {*/
  .object-config {
    grid: "header" "menu" "main" "footer"; 
    height: auto; } }

.object-config.no-menu:not([hidden]) {
  display: block;
  height: auto;
  min-height: 100vh;
}

.route-editor header.page:not([hidden]),
.object-config > header:not([hidden]),
.raw-data-view > header:not([hidden]) {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.route-editor header.page,
.object-config > header,
.raw-data-view > header {
  position: sticky;
  top: 0;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin: 0 0 0.5em 0;
  border-bottom: var(--borderColor-default) solid 1px;
  padding: 0 .5em;
  background: var(--header-background-color);
  color: var(--header-color);
  z-index: var(--page-header-z-index);
  grid-area: header; }

.route-editor header.page > *,
.object-config > header > *,
.raw-data-view > header > * {
  padding: 0.3rem; }

.object-config > header > hgroup:not([hidden]),
.route-editor header.page > hgroup:not([hidden]),
.raw-data-view > header > hgroup:not([hidden]) {
  display: contents;
}

.object-config > header > hgroup > h1,
.route-editor header.page > hgroup > h1,
.raw-data-view > header > hgroup > h1 {
  margin: 0 .6em 0 0;
}

.object-config > header > hgroup > h1.logo svg,
.route-editor header.page > hgroup > h1.logo svg,
.raw-data-view > header > hgroup > h1.logo svg {
  height: 1em;
  width: auto;
}

.object-config > header > h1,
.raw-data-view > header > h1,
.object-config > header > hgroup > h2,
.route-editor header.page > hgroup > h2,
.raw-data-view > header > hgroup > h2 {
  margin: 0;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  min-width: 6em;
}

.object-config > header > rb-page-path,
.raw-data-view > header > rb-page-path {
  font-size: 90%;
  text-align: right;
  flex: 2;
}

.object-config > header > rb-page-path a[target=help]:not([hidden]),
.raw-data-view > header > rb-page-path a[target=help]:not([hidden]) {
  display: block; }

object-config-menu {
  grid-area: menu;
  justify-self: end;
  -ms-flex-item-align: stretch;
      align-self: stretch; }

object-config-main {
  grid-area: main;
  align-self: stretch;
  overflow: auto;
}

object-config-main > form:only-child:not([hidden]) {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column; }

object-config-main > form > .item-list-editor:not([hidden]) {
  display: grid; }
object-config-main > form > .item-list-editor {
  max-height: calc(100vh - 3em);
}

object-config-main > form > .item-list-editor {
  grid: "menu-buttons main"   min-content
        "menu         main"   1fr
        / 15em         auto; }

@media (max-width: 768px) {
  object-config-main > form > .item-list-editor {
    grid: "menu-buttons" "menu" "main";
    max-height: none;
  }

  object-config-main > form > .item-list-editor > list-container > rb-list-main {
    max-height: 80vh;
    overflow: auto;
  }
}

object-config-main > form > .item-list-editor > list-container:not([hidden]) {
  display: contents; }

object-config-main > form > .item-list-editor > list-container > rb-list-main {
  grid-area: menu;
  overflow: auto; }

object-config-main > form > .item-list-editor > list-container > rb-list-buttons:not([hidden]) {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; }

object-config-main > form > .item-list-editor > list-container > rb-list-buttons {
  grid-area: menu-buttons;
  flex-wrap: wrap;
}

object-config-main > form > .item-list-editor > rb-edit-form {
  grid-area: main;
  overflow: auto; }

object-config-main > form > .item-list-editor rb-import-items {
  grid-area: dialog; }

object-config-main > form > .item-list-editor rb-import-items,
.inline-dialog {
  margin: .5em;
  border: var(--borderColor-default) solid 1px;
  padding: .5em; }

.edit-form .buttons:not([hidden]),
object-config-main > form > .buttons:not([hidden]) {
  display: flex;
}
.edit-form .buttons,
object-config-main > form > .buttons {
  position: sticky;
  bottom: 0;
  justify-content: flex-end;
  align-items: center;
  margin-left: auto;
  border-radius: .5em;
  padding: .5em 1em;
  box-sizing: border-box;
  width: max-content;
  max-width: 100%;
  text-align: end;
  background: var(--color-white);
  color: var(--color-black);
  z-index: var(--form-footer-z-index);
}

.edit-form .buttons progress,
object-config-main > form > .buttons progress {
  min-width: 5em;
}

.edit-form .buttons action-status,
object-config-main > form > .buttons action-status {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  padding: 0 0.5em; }

.edit-form .buttons action-status action-status-message,
object-config-main > form > .buttons action-status action-status-message {
  margin: 0; }

.edit-form .buttons action-status action-status progress,
object-config-main > form > .buttons action-status progress {
  margin: 0; }

object-config-main #edit-desc {
  height: calc(min(100vh - 17em, 50em));
}

object-config-menu.tab-vertical-menu ul {
  position: static;
}

object-config-main > section:last-of-type {
  min-height: 100vh;
}

object-config-main > section.no-account:not([hidden]) {
  display: flex;
}
object-config-main > section.no-account {
  min-height: 100vh;
  justify-content: center;
  align-content: center;
  flex-wrap: wrap;
}

object-config-main > section p {
  font-size: 90%;
}

.edit-page
object-config-main > section > section {
  margin: 1em;
}

.edit-page
object-config-main > section > section > h1 {
  font-size: 100%;
  text-decoration: underline;
}

object-config-main > section section-intro:not([hidden]) {
  display: block;
}
object-config-main > section section-intro {
  margin-bottom: 1em;
}

object-config-main > section .info.supplementary {
  text-align: end;
}

object-config-main > section .menu {
  margin: 1em;
  padding: 0;
}

object-config-main > section .menu > li:not([hidden]) {
  display: block;
}
object-config-main > section .menu > li {
  margin: 0;
  padding: 0;
}
object-config-main > section .menu > li::before {
  content: "\25B8";
  text-align: end;
  float: left;
  padding-right: .5em;
}
object-config-main > section .menu > li::after {
  display: block;
  clear: both;
  content: "";
}

.raw-data-view > section {
  margin: 1em;
}

.raw-data-view section > details {
  margin: 1em;
}

.raw-data-view section > details > summary {
  font-weight: bolder;
}

.raw-data-view section > details[open] > summary {
  margin-bottom: .5em;
}

.raw-data-view ul {
  margin-top: 1em;
  margin-bottom: 1em;
}

.event-rental-form ul li,
.route-editor ul li,
.dialog-page ul li,
.edit-form ul li,
.raw-data-view ul li {
  list-style: disc;
  margin-left: 1.5em;
}

.raw-data-view form {
  margin: 1em;
  padding: 0.5em;
  background: #f2f2f2;
  color: black;
}

.route-editor dialog-backdrop > section .buttons,
.raw-data-view form .buttons,
danger-zone .buttons {
  text-align: right; }

.raw-data-view form .buttons button,
danger-zone .buttons button {
  min-width: 5em; }

.raw-data-view list-container > .buttons:not([hidden]) {
  display: flex;
}
.raw-data-view list-container > .buttons {
  align-items: center;
  justify-content: end;
  flex-wrap: wrap;
}
.raw-data-view list-container > .buttons:first-child {
  position: sticky;
  top: 3em;
  left: 0;
  z-index: 1000;
  width: max-content;
  margin-left: auto;
}

.raw-data-view list-container > .buttons:first-child action-status progress {
  min-width: 50vw;
}

.raw-data-view list-container > .buttons .info {
  flex: 1;
  text-align: end;
}

.raw-data-view list-container > .buttons action-status {
  flex: 2;
  padding: .5em;
}
.raw-data-view list-container > .buttons:first-child action-status {
  background: var(--header-background-color);
  color: var(--header-color);
}

.raw-data-view list-container > .buttons action-status progress {
  margin-top: 0;
  margin-bottom: 0;
  justify-self: start;
}

.object-config .main-table,
.raw-data-view .main-table {
  margin: 1em 0;
  border-collapse: collapse;
}

.object-config .main-table thead tr,
.raw-data-view .main-table thead tr {
  border-bottom: 3px solid currentcolor;
}

.object-config .main-table tbody tr,
.raw-data-view .main-table tbody tr {
  border-bottom: 1px solid currentcolor;
}

.object-config .main-table thead th,
.raw-data-view .main-table thead th {
  min-width: 4em;
}

.mwindow table thead th {
  position: sticky;
  top: 0;
}

.raw-data-view a,
footer.event-edit a {
  color: #239b43;
  background: transparent;
}
.raw-data-view a:visited,
footer.event-edit a:visited {
  color: #c1840d;
  background: transparent;
}

mwindow-main-content:not([hidden]) {
  display: block;
}
mwindow-main-content {
  min-height: 100vh;
  padding-bottom: 10em;
}

rb-action-toolbar:not([hidden]) {
  display: flex;
}
rb-action-toolbar {
  position: fixed;
  z-index: var(--toolbar-z-index);
  bottom: 2rem;
  left: 1rem;
  width: calc(100vw - 8rem);
  max-height: 50vh;
  background: var(--color-lightGray);
  color: var(--color-black);
  box-shadow: 2px 2px var(--color-dullGray);
  border: 1px solid var(--color-dullGray);
  border-radius: 0.5rem;
  padding: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
  overflow: auto;
}

rb-action-toolbar > section,
.edit-page rb-action-toolbar > section {
  margin: 0 .5em 0 0;
  padding: 0;
}

rb-action-toolbar > section > h1,
.edit-page rb-action-toolbar > section > h1 {
  margin: 0;
  margin-bottom: calc(-3 * var(--dialog-padding));
  padding: 0 var(--dialog-padding);
  font-size: 70%;
  text-align: left;
}

rb-action-toolbar > section > form {
  writing-mode: horizontal-tb;
  margin: var(--dialog-padding);
  padding: var(--dialog-padding);
  background: var(--dialog-background-color);
  color: var(--dialog-color);
  border-top-right-radius: .5em;
  border-bottom-right-radius: .5em;
  font-size: 90%;
}

rb-action-toolbar rb-action-target {
  margin-right: 0.5em;
  font-size: 80%; }

.raw-data-view rb-action-toolbar > form:not([hidden]) {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; }

.raw-data-view rb-action-toolbar > form {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  margin: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center; }

.raw-data-view rb-action-toolbar > form:first-of-type {
  -webkit-box-flex: 2;
      -ms-flex: 2;
          flex: 2; }

rb-action-toolbar form button {
  font-size: 80%;
}

rb-action-toolbar input-datetime input[type=date],
rb-action-toolbar input-datetime input[type=time] {
  min-width: 0;
}

rb-action-toolbar input-datetime button {
  min-width: 2em;
  padding: 0.2em 0;
}

.raw-data-view form .small-copy-button {
  margin: 0 0.5em 0 0; }

rb-action-toolbar form > action-status:not([hidden]) {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  font-size: 80%; }

rb-action-toolbar form > action-status {
  padding: 0 0.5em; }

rb-action-toolbar form > action-status > progress:not([hidden]) {
  margin: 0; }

rb-action-toolbar form rb-datetime-value {
  line-height: 1.0;
}

rb-action-toolbar form enum-value {
  white-space: nowrap;
}

rb-action-toolbar form can-copy:not([hidden]) {
  display: inline-block;
}
rb-action-toolbar form can-copy {
  vertical-align: middle;
  text-align: center;
}

rb-action-toolbar form can-copy code:not([hidden]) {
  display: block;
}

button[is="rb-action-toolbar-close-button"] {
  margin-left: 0.5em; }


#create-n .created code:not([hidden]) {
  display: block;
}

form.navigator:not([hidden]) {
  display: flex;
}
form.navigator {
  margin: .5em;
  border: 1px solid var(--dialog-border-color);
  padding: .5em;
  background: var(--dialog-background-color);
  color: var(--dialog-color);
}

form.navigator input {
  flex: 1;
}

footer.event-edit {
  margin-top: 1em;
  padding: .5em;
  background: #f2f2f2;
  color: black;
  font-size: var(--fontSize-small);
  text-align: center;
}

footer.event-edit p + p {
  margin-top: .5em;
}

footer.event-edit + footer.site {
  margin-top: 0;
}

invitation-container {
  margin: 1em;
}

invitation-text:not([hidden]) {
  display: block;
}

invitation-text {
  padding: .5em;
  font-size: 80%;
  overflow: auto;
}

nav.toplink {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  border: 1px solid var(--color-lightGray);
  border-radius: 1em;
  font-size: 150%;
}

nav.toplink a:not([hidden]) {
  display: block;
}
nav.toplink a {
  min-width: 1em;
  min-height: 1em;
  border-radius: 1em;
  padding: .2em;
  background: white;
  color: black;
  opacity: 0.4;
  line-height: 1.0;
}
nav.toplink a:hover {
  text-decoration: none;
  background: white;
  color: black;
  opacity: 1;
}

/* ------ Events ------ */

#teams ul {
  column-width: 10em;
}

:root:not(.has-results) .if-has-results {
  display: none !important;
}
.has-results .if-no-results {
  display: none !important;
}

.alarm-view-item {
  background-image: url(/images/alert.svg);
  background-repeat: no-repeat;
  background-position: top left;
  padding-left: 30px;
}
.alarm-view-item .alarm-type-rb-alarm-old-devicelocation {
  background-image: url(/images/not-receiving.svg);
}
.alarm-view-item .alarm-type-rb-alarm-battery-none {
  background-image: url(/images/battery-low.svg);
}
.alarm-view-item .alarm-type-rb-alarm-battery-low {
  background-image: url(/images/battery-critically-low.svg);
}

.alarm-view-item .info:not([hidden]) {
  display: block;
}
.alarm-view-item .info {
  text-align: end;
  font-size: 80%;
  line-height: 1;
}

/* ------ Documentations ------ */

.checkpoints dt {
  font-weight: bolder;
}

.checkpoints dt::before {
  content: "✔ ";
  font-size: 140%;
}

.checkpoints div dd {
  margin-left: 2em;
}

.checkpoints div dd p {
  margin: 0.25em 0;
}

.qanda > div > dt {
  margin-left: 0;
  padding-left: 0;
  font-weight: bolder;
}

.qanda > div > dd {
  margin-left: 0;
  padding-left: 0;
}

.qanda > div > dt::before {
  content: "Q: ";
}

.qanda > div > dd::before {
  content: "A: ";
  font-weight: bolder;
}

.qanda > div > dd > sw-box:not([hidden]) {
  display: contents;
}

.qanda > div > dd > sw-box p:first-child:not([hidden]) {
  display: inline;
}

rb-doc-viewer {
  position: fixed;
  top: 0;
  left: 0;
  width: 25em;
  max-width: 90%;
  bottom: 0;
  z-index: var(--panel-z-index);
  background: var(--dialog-background-color);
  color: var(--dialog-color);
}

rb-doc-viewer aside:not([hidden]) {
  display: flex;
}
rb-doc-viewer aside {
  flex-direction: column;
  height: 100%;
  width: 100%;
  border-right: var(--dialog-border-color) solid 1px;
}

rb-doc-viewer header:not([hidden]) {
  display: flex;
}
rb-doc-viewer header {
  border-bottom: var(--dialog-border-color) solid 1px;
  padding: 0 .5em;
  align-items: center;
}

rb-doc-viewer header h1 {
  margin: 0;
  padding: 0;
  font-size: 100%;
  font-weight: bolder;
  order: 1;
  flex: 1;
}

rb-doc-viewer header button:not([hidden]) {
  display: inline-block;
}
rb-doc-viewer header button {
  -webkit-appearance: none;
  margin: 0;
  border-style: none;
  padding: 2px 4px;
  min-width: 2rem;
  min-height: 2rem;
  font-size: 100%;
  line-height: 1;
  font-family: inherit;
  font-style: normal;
  text-decoration: none;
  text-align: center;
  font-size: 16px;
  order: 2;
}
rb-doc-viewer header button:not(:hover):not(:focus):not(:active) {
  background: transparent;
  color: inherit;
}
rb-doc-viewer header button[is=rb-doc-viewer-hide-button] {
  font-size: 24px;
  order: 3;
}

rb-doc-viewer iframe {
  flex: 1;
  border: none;
}

.dialog-content body > header,
.dialog-content #globalFooter,
.dialog-content footer.site {
  display: none ! important;
}

/* ------ Printable pages ------ */

.for-print {
}

.qr-list {
  margin: 1em;
  text-align: center;
}

.qr-list div:not([hidden]) {
  display: inline-block;
}
.qr-list div {
  margin: 1em;
}

.qr-list dt {
  font-weight: bolder;
}

.qr-list dd {
  margin: 0;
  padding: 0;
}

@media print {
  page-noprint {
    display: none;
  }

  .for-print .page-guide-gps #guide-main #howtouse {
    margin-top: 0;
    border: none;
  }

  .for-print footer.site {
    display: none;
  }
}