html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}
canvas{display:inline-block;vertical-align:baseline}
a{background-color:transparent}
b,strong{font-weight:700}
img{border:0}
hr{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;height:0}
button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}
input{line-height:normal}input[type=checkbox],input[type=radio]{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;padding:0}
*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}:after,:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}html{font-size:10px;-webkit-tap-highlight-color:rgba(0,0,0,0)}body{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:14px;line-height:1.42857143;color:#333;}button,input,select,textarea{font-family:inherit;font-size:inherit;line-height:inherit}a{color:#337ab7;text-decoration:none}
img{vertical-align:middle}.img-responsive{display:block;max-width:100%;height:auto}
hr{margin-top:20px;margin-bottom:20px;border:0;border-top:1px solid #eee}
.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6{font-family:inherit;font-weight:500;line-height:1.1;color:inherit}
.h1,.h2,.h3,h1,h2,h3{margin-top:20px;margin-bottom:10px}
.h4,.h5,.h6,h4,h5,h6{margin-top:10px;margin-bottom:10px}
.h3,h3{font-size:1.75rem}.h4,h4{font-size:1.5rem}.h5,h5{font-size:1.25rem}.h6,h6{font-size:1rem}
.text-left{text-align:left}
.text-center{text-align:center}
.center-block{display:block;margin-right:auto;margin-left:auto}
.bg-warning{background-color:#fcf8e3}
.bg-danger{background-color:#f2dede; font-weight: 600; padding: 0.5rem; color: maroon; }
.container-fluid{padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto}.row{margin-right:-15px;margin-left:-15px}
.col-lg-10,.col-lg-2,.col-md-3,.col-md-9,.col-xs-6{position:relative;min-height:1px;padding-right:15px;padding-left:15px}
.col-xs-6{width:50%;float:left}
label{display:inline-block;max-width:100%; font-weight:700; vertical-align: text-bottom;}
input[type=checkbox]{margin:4px 0 0;margin-top:1px\9;line-height:normal}
.container-fluid:after,.container-fluid:before,.container:after,.container:before,.row:after,.row:before{display:table;content:" "}.container-fluid:after,.container:after,.row:after{clear:both}
.tooltip{position:absolute;z-index:1070;display:block;font-family:\"Helvetica Neue\",Helvetica,Arial,sans-serif;font-style:normal;font-weight:400;line-height:1.42857143;line-break:auto;text-align:left;text-align:start;text-decoration:none;text-shadow:none;text-transform:none;letter-spacing:normal;word-break:normal;word-spacing:normal;word-wrap:normal;white-space:normal;font-size:12px;filter:alpha(opacity=0);opacity:0}.tooltip.in{filter:alpha(opacity=90);opacity:.9}.tooltip.top{padding:5px 0;margin-top:-3px}.tooltip.right{padding:0 5px;margin-left:3px}.tooltip.bottom{padding:5px 0;margin-top:3px}.tooltip.left{padding:0 5px;margin-left:-3px}.tooltip.top .tooltip-arrow{bottom:0;left:50%;margin-left:-5px;border-width:5px 5px 0;border-top-color:#000}.tooltip.top-left .tooltip-arrow{right:5px;bottom:0;margin-bottom:-5px;border-width:5px 5px 0;border-top-color:#000}.tooltip.top-right .tooltip-arrow{bottom:0;left:5px;margin-bottom:-5px;border-width:5px 5px 0;border-top-color:#000}.tooltip.right .tooltip-arrow{top:50%;left:0;margin-top:-5px;border-width:5px 5px 5px 0;border-right-color:#000}.tooltip.left .tooltip-arrow{top:50%;right:0;margin-top:-5px;border-width:5px 0 5px 5px;border-left-color:#000}.tooltip.bottom .tooltip-arrow{top:0;left:50%;margin-left:-5px;border-width:0 5px 5px;border-bottom-color:#000}.tooltip.bottom-left .tooltip-arrow{top:0;right:5px;margin-top:-5px;border-width:0 5px 5px;border-bottom-color:#000}.tooltip.bottom-right .tooltip-arrow{top:0;left:5px;margin-top:-5px;border-width:0 5px 5px;border-bottom-color:#000}.tooltip-inner{max-width:200px;padding:3px 8px;color:#fff;text-align:center;background-color:#000;border-radius:4px}.tooltip-arrow{position:absolute;width:0;height:0;border-color:transparent;border-style:solid}.popover{position:absolute;top:0;left:0;z-index:1060;display:none;max-width:276px;padding:1px;font-family:\"Helvetica Neue\",Helvetica,Arial,sans-serif;font-style:normal;font-weight:400;line-height:1.42857143;line-break:auto;text-align:left;text-align:start;text-decoration:none;text-shadow:none;text-transform:none;letter-spacing:normal;word-break:normal;word-spacing:normal;word-wrap:normal;white-space:normal;font-size:14px;background-color:#fff;background-clip:padding-box;border:1px solid #ccc;border:1px solid rgba(0,0,0,.2);border-radius:6px;-webkit-box-shadow:0 5px 10px rgba(0,0,0,.2);box-shadow:0 5px 10px rgba(0,0,0,.2)}.popover.top{margin-top:-10px}.popover.right{margin-left:10px}.popover.bottom{margin-top:10px}.popover.left{margin-left:-10px}.popover>.arrow{border-width:11px}.popover>.arrow,.popover>.arrow:after{position:absolute;display:block;width:0;height:0;border-color:transparent;border-style:solid}
.mt-3 { margin-top: 1rem; }

html, body {
  /* Prevent swiping from navigating forward/back */
  overscroll-behavior-x: none;
}

#controls.collapsed {
  width: 8rem;
  padding: 0;
}

#controls.collapsed fieldset {
  overflow-wrap: anywhere;
}

#toolbox, #remix {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  row-gap: 0.5rem;
}

#toolbox {
  column-gap: 1.5rem;
}

#controls:not(.collapsed) button:not(.width-100):not(.rail-line) {
  width: 45%;
  height: 6rem;
  overflow: clip;
}

#controls:not(.collapsed) #toolbox > button:not(.rail-line) {
  height: 6rem;
  flex-grow: 1;
}

#controls.collapsed #title {
  display: none;
}

#controls.collapsed button {
  width: 100%;
  height: 3rem;
}

button {
  color: #fff;
}
#toolbox button, #remix button, #mobile-browse button {
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  justify-content: center;
  overflow: auto;
}

#remix button, #mobile-browse button, #tool-download-svg {
  height: 6rem;
}

#mobile-browse {
  margin-bottom: 1rem;
}

button#tool-line.active.draw-rail-line,
button#tool-line.active.draw-rail-line:hover,
button#tool-line.active.draw-rail-line:active {
  background-color: #bd1038;
  color: #fff;
  border-color: rgba(51, 51, 51, .4);
}

#toolbox button svg, #toolbox button span { margin: auto; }

#toolbox button.width-100, #remix .width-100, #remix fieldset, #mobile-browse .width-100 { width: 100%; }

button.styled:hover {
  border-color: rgba(255, 255, 255, 0.3);
  color: #fff;
}
button.styled:active {
  border-color: rgba(0,0,0,0.3);
}

button.styling-redline {
  border: 0.5rem solid rgba(51, 51, 51, .4);
  background-color: #bd1038;
}
button.styling-redline:hover {
  background-color: rgba(189, 16, 56, .7);
  border-color: rgba(189, 16, 56, .4);
}

button.styling-greenline {
  border: 0.5rem solid rgba(51, 51, 51, .4);
  background-color: #00b251;
}
button.styling-greenline:hover {
  background-color: rgba(0, 178,81, .7);
  border-color: rgba(0, 178,81, .4);
}

button.styling-blueline {
  border: 0.5rem solid rgba(51, 51, 51, .4);
  background-color: #0896d7;
}
button.styling-blueline:hover {
  background-color: rgba(8, 150, 215, .7);
  border-color: rgba(8, 150, 215, .4);
}

button.styling-silverline {
  border: 0.5rem solid rgba(51, 51, 51, .4);
  background-color: #a2a2a2;
}
button.styling-silverline:hover {
  background-color: rgba(162, 162, 162, .7);
  border-color: rgba(162, 162, 162, .4);
}

button.styling-redline:active, button.styling-redline.active, button.styled.active-mapstyle, button.styling-redline.remains-active {
  color: #bd1038;
  border-color: rgba(189, 16, 56, .4);
}
button.styling-greenline:active, button.styling-greenline.active, button.styling-greenline.remains-active {
  color: #00b251;
  border-color: rgba(0, 178,81, .4);
}
button.styling-blueline:active, button.styling-blueline.active, button.styling-blueline.remains-active {
  color: #0896d7;
  border-color: rgba(8, 150, 215, .4);
}

button.styling-silverline:active, button.styling-silverline.active {
  color: #333;
  border-color: rgba(162, 162, 162, .4);
}

button.styled:active, button.styled.active, button.styled.active-mapstyle, button.styled.remains-active {
  background-color: #fff;
}

@media (max-width: 767px) {
  .visible-xs {display:block!important}
  .hidden-xs{display:none!important}
}

@media (min-width: 768px) {
  .visible-xs{display:none!important}
}

@media (min-width: 992px) {
  .col-md-3{width:25%}
  .col-md-9{width:75%}
}

@media (min-width: 1200px) {
  .col-lg-10{width:83.33333333%}
  .col-lg-2{width:16.66666667%}
}

body {
  font-family: Helvetica, Arial, sans-serif;
}

.hidden {
  display: none;
}

#title, #autosave-indicator {
  color: black;
  font-size: 2rem;
  margin: 0.5rem;
}

.M {
  background-color: black;
  color: white;
  padding: 1px;
  margin: 1px;
}

#main-container {
  margin-top: 15px;
  margin-bottom: 15px;
}

#controls {
  z-index: 101;
  border: 6px solid black;
  background-color: white;
}

div#toolbox {
  text-align: center;
}

label.mmm-help-setting {
  display: inline;
}

div.mmm-help-setting {
  text-align: left;
  margin-left: 5px;
}

#canvas-container {
  padding: 0;
  height: 100%;
  cursor: crosshair;
}

#metro-map-canvas {
  z-index: -99;
  width: 100%;
  height: auto;
  position: absolute;
  top: 0;
  left: 0;
  overflow: scroll;
  cursor: crosshair;
}

#metro-map-stations-canvas {
  z-index: 99;
  width: 100%;
  height: auto;
  position: absolute;
  top: 0;
  left: 0;
}

canvas#grid-canvas, canvas#hover-canvas, canvas#ruler-canvas {
  z-index: 100;
  width: 100%;
  height: auto;
  position: absolute;
  top: 0;
  left: 0;
}

.station-rail-lines {
  /* I'm not sure how useful this feature is, maybe it's just clutter? Let's hide it */
  display: none;
}

#remix, #credits {
  text-align: left;
}

#tool-line-options {
  margin-top: -0.75rem;
  padding: 0.25rem;
  border: 0.25rem solid #bd1038;
  width: 100%;
}

#tool-line-options, div fieldset, #line-colors {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  gap: 0.5rem;
}

#line-manage-options {
  display: flex;
  gap: 0.5rem;
  flex-flow: column;
}

#tool-line-options div {
  flex-grow: 1;
}

#tool-line-options div.mmm-help-setting {
  width: 100%;
}

#tool-map-style-options fieldset {
  padding: 0.5rem;
}

#line-colors button.rail-line {
  text-shadow: -1px -1px 0 #333, 1px -1px 0 #333, -1px 1px 0 #333, 1px 1px 0 #333;
  color: #fff;
  justify-content: center;
  align-items: center;
  width: 5rem;
  overflow-x: hidden;
  overflow-y: clip;
  border-radius: 0.333rem;
  border: 0.5rem solid transparent;
}

#controls.collapsed #line-color-options {
  overflow-x: clip;
  width: 100%;
}

#controls.collapsed #line-color-options fieldset {
  border: 0;
  padding: 0;
}

#controls.collapsed button.rail-line {
  overflow-wrap: break-word;
  width: 5.333rem;
}

#controls.collapsed .hide-when-collapsed {
  display: none;
}

#controls:not(.collapsed) #ruler-icon-xy-container {
  margin-top: 0.5rem;
}

#controls.collapsed #ruler-icon-xy-container svg {
  display: none;
}

#controls.collapsed button#tool-ruler {
  overflow: clip;
}

#line-colors button.rail-line:hover {
  border: 0.5rem solid rgba(255, 255, 255, 0.3);
}
#line-colors button.rail-line:active {
  border: 0.5rem solid rgba(0, 0, 0, 0.3);
}

#rail-line-bd1038 {
  background-color: #bd1038;
}

#rail-line-df8600 {
  background-color: #df8600;
}

#rail-line-f0ce15 {
  background-color: #f0ce15;
}

#rail-line-00b251 {
  background-color: #00b251;
}

#rail-line-0896d7 {
  background-color: #0896d7;
}

#rail-line-662c90 {
  background-color: #662c90;
}

#rail-line-a2a2a2 {
  background-color: #a2a2a2;
}

#rail-line-79bde9 {
  background-color: #79bde9;
}

#rail-line-cfe4a7 {
  background-color: #cfe4a7;
}

#rail-line-000000 {
  background-color: #000000;
}

#toolbox hr {
  margin-top: 10px;
  margin-bottom: 10px;
}

#station-name {
  font-weight: bold;
  padding-left: 5px;
}

/*input#new-rail-line-color, input#new-rail-line-name, input#change-line-color {*/
input[type="text"], input[type="color"] {
  width: 100%;
  margin-bottom: 0.5rem;
}

#tool-lines-to-change {
  margin: 1rem 0;
}

#save-rail-line-edits {
  margin-top: 0.5rem;
}

p.bg-danger:empty, h3:empty { display: none; }

form#name-map input {
  margin-top: -5px;
  margin-bottom: 5px;
}

#station-name-orientation {
  width: 100%;
  margin: 3px;
}

hr {
  border-top: 1px solid #666;
}

select {
  width: 100%;
}

@media (max-width: 767px) {
  #controls {
    margin-top: 10px;
  }
  #toolbox button {
    margin-bottom: 8px;
  }
  #remix ul li {
    margin-bottom: 8px;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  #controls {
    z-index: 100;
    background-color: #fff;
    width: 250px;
  }
}

@media (min-width: 1200px) and (max-width: 1499px) {
  #controls {
    width: 22.5%;
  }
}

@media (min-width: 2400px) {
  #controls {
    width: 12.5%;
  }
}

@media (min-width: 3000px) {
  #controls {
    width: 10%;
  }
}

@media (max-width: 1099px) {
  button#tool-grid span.button-label, button#tool-ruler span:first-child {
    font-size: 75%;
  }
}

@media (min-width: 768px) {
  #controls {
    position: fixed;
    overflow-y: auto;
    top: 0;
    bottom: 0;
    right: 5px;
  }
  .tooltip, .tooltip span {
    position: fixed;
  }
  #zoom-in-container {
    padding-right: 0;
  }
  #zoom-out-container {
    padding-left: 0;
  }
}

@media (max-width: 768px) {
  #controls {
    position: fixed;
    bottom: 5px;
    height: 75%;
    overflow-y: scroll;
  }
  button#tool-export-canvas {
    display: flex !important;
  }
}

#loading {
  display: inline-block;
  width: 100%;
  height: 100%;
}
#loading:after {
  content: " ";
  display: block;
  width: 200px;
  height: 200px;
  margin: 25% auto;
  border-radius: 50%;
  border: 6px solid #000;
  border-color: #000 transparent #000 transparent;
  animation: loading-ring 1.2s linear infinite;
}
@keyframes loading-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Display a preview of what the station styles will look like */
#toolbox button.has-hover-preview span.style-hover-display,
#toolbox button.has-hover-preview span.style-description {
  margin: unset;
}

.has-hover-preview span.style-hover-display {
  display: none;
}

.has-hover-preview:hover span.style-hover-display {
  display: block;
}

.has-hover-preview:hover span.style-description {
  display: none;
}

#toolbox button.has-hover-preview {
  overflow: clip;
}

#shareable-map-link {
  word-break: break-word;
}

#line-style-options button svg {
  stroke: #ffffff;
}

#line-style-options button.active-mapstyle svg,
#line-style-options button svg:not(.twotone):active {
  stroke: #bd1038;
}

/* TODO: Consider Applying this treatment to Circles Lg, Md, Sm also,
  for improved readability */
button#tool-map-style-station-london svg {
  stroke: #ffffff;
  fill: #ffffff;
}
button#tool-map-style-station-london.active-mapstyle svg,
button#tool-map-style-station-london svg:active {
  stroke: #bd1038;
  fill: #bd1038;
}